diff --git a/apps/ligo-virgo/src/pages/workspace/docs/Page.tsx b/apps/ligo-virgo/src/pages/workspace/docs/Page.tsx index 2a4c4f1aa5..5c42c2c794 100644 --- a/apps/ligo-virgo/src/pages/workspace/docs/Page.tsx +++ b/apps/ligo-virgo/src/pages/workspace/docs/Page.tsx @@ -88,6 +88,11 @@ export function Page(props: PageProps) { {activeTab === TabMap.get(TAB_TITLE.TOC).value && ( )} + {activeTab === TabMap.get(TAB_TITLE.GALLERY).value && ( + + Gallery function coming soon... + + )} @@ -202,3 +207,12 @@ const WorkspaceSidebarContent = styled('div')({ overflow: 'hidden auto', marginTop: '18px', }); + +const StyledTextForGallery = styled('div')(({ theme }) => { + return { + display: 'flex', + justifyContent: 'center', + color: theme.affine.palette.menu, + marginTop: theme.affine.spacing.lgSpacing, + }; +}); diff --git a/apps/venus/src/app/common/Footer.tsx b/apps/venus/src/app/common/Footer.tsx index e1375074a4..d13ae5bb25 100644 --- a/apps/venus/src/app/common/Footer.tsx +++ b/apps/venus/src/app/common/Footer.tsx @@ -9,9 +9,10 @@ import RedditIcon from '@mui/icons-material/Reddit'; import TelegramIcon from '@mui/icons-material/Telegram'; import TwitterIcon from '@mui/icons-material/Twitter'; +import { LogoIcon } from '@toeverything/components/icons'; import { DiscordIcon, GitHub } from '../Icons'; -import LogoImage from '../logo.png'; -import { AFFiNEImage } from './index'; +// import LogoImage from '../logo.png'; +// import { AFFiNEImage } from './index'; export const AFFiNEFooter = ({ keepupdate = true, @@ -30,9 +31,12 @@ export const AFFiNEFooter = ({ display: 'flex', justifyContent: 'center', margin: 'auto', + color: '#3E6FDB', + marginBottom: '60px', }} > - + + {/* */} diff --git a/libs/components/layout/src/header/LayoutHeader.tsx b/libs/components/layout/src/header/LayoutHeader.tsx index e6ab719a5a..4e5923cd0e 100644 --- a/libs/components/layout/src/header/LayoutHeader.tsx +++ b/libs/components/layout/src/header/LayoutHeader.tsx @@ -4,7 +4,7 @@ import { SideBarViewCloseIcon, SideBarViewIcon, } from '@toeverything/components/icons'; -import { IconButton, styled } from '@toeverything/components/ui'; +import { IconButton, styled, Tooltip } from '@toeverything/components/ui'; import { useTranslation } from '@toeverything/datasource/i18n'; import { useCurrentEditors, @@ -14,6 +14,7 @@ import { import { useCallback, useMemo } from 'react'; import { EditorBoardSwitcher } from './EditorBoardSwitcher'; import { fsApiSupported } from './FileSystem'; +import { Logo } from './Logo'; import { CurrentPageTitle } from './Title'; export const LayoutHeader = () => { @@ -44,23 +45,35 @@ export const LayoutHeader = () => { - + - {t('Share')} + + + {t('Share')} + +
- - - + + + +
@@ -121,7 +134,7 @@ const StyledHeaderRoot = styled('div')(({ theme }) => { }; }); -const FlexContainer = styled('div')({ display: 'flex' }); +const FlexContainer = styled('div')({ display: 'flex', alignItems: 'center' }); const TitleContainer = styled('div')(({ theme }) => { return { diff --git a/libs/components/layout/src/header/Logo/DiscordIcon.tsx b/libs/components/layout/src/header/Logo/DiscordIcon.tsx new file mode 100644 index 0000000000..bae0c972a4 --- /dev/null +++ b/libs/components/layout/src/header/Logo/DiscordIcon.tsx @@ -0,0 +1,25 @@ +import { SvgIcon } from '@toeverything/components/ui'; + +export const DiscordIcon = (props: any) => { + return ( + + + + + + + + + + + ); +}; diff --git a/libs/components/layout/src/header/Logo/InfoModal.tsx b/libs/components/layout/src/header/Logo/InfoModal.tsx new file mode 100644 index 0000000000..ebd69c0084 --- /dev/null +++ b/libs/components/layout/src/header/Logo/InfoModal.tsx @@ -0,0 +1,94 @@ +import CloseIcon from '@mui/icons-material/Close'; +import { MuiModal, styled } from '@toeverything/components/ui'; +import affineTextLogo from './affine-text-logo.png'; +import { ModalContent } from './ModalContent'; + +interface ModalProps { + open: boolean; + onClose: () => void; +} + +export const InfoModal = ({ open, onClose }: ModalProps) => { + return ( + + +
+ + + live demo + + onClose?.()}> + + +
+ +
Copyright © 2022 AFFINE
+ + + ); +}; + +const Container = styled('div')({ + position: 'absolute', + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + width: '60%', + maxWidth: '1000px', + minWidth: '840px', + borderRadius: '28px', + backgroundColor: '#fff', + padding: '48px 48px 40px 48px', + + '&:focus-visible': { + outline: 0, + }, +}); + +const Header = styled('div')({ + display: 'flex', + flexDirection: 'row', + justifyContent: 'space-between', +}); + +const HeaderLeft = styled('div')({ + display: 'flex', + flexDirection: 'row', + alignItems: 'center', +}); + +const StyledImg = styled('img')({ + height: '22px', +}); + +const LivedemoContainer = styled('span')(({ theme }) => ({ + display: 'inline-block', + border: `1px solid ${theme.affine.palette.primary}`, + color: theme.affine.palette.primary, + fontSize: '16px', + lineHeight: '22px', + padding: '2px 10px', + borderRadius: '10px', + marginLeft: '18px', +})); + +const CloseContainer = styled('div')(({ theme }) => ({ + cursor: 'pointer', + width: '32px', + height: '32px', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + borderRadius: '6px', + + '&:hover': { + backgroundColor: theme.affine.palette.tagHover, + }, +})); + +const Footer = styled('div')(({ theme }) => ({ + textAlign: 'center', + fontSize: '14px', + lineHeight: '19px', + color: theme.affine.palette.primaryText, +})); diff --git a/libs/components/layout/src/header/Logo/Logo.tsx b/libs/components/layout/src/header/Logo/Logo.tsx new file mode 100644 index 0000000000..9b1a8d139a --- /dev/null +++ b/libs/components/layout/src/header/Logo/Logo.tsx @@ -0,0 +1,13 @@ +import { useState } from 'react'; +import { InfoModal } from './InfoModal'; +import { LogoIcon } from './LogoIcon'; + +export const Logo = () => { + const [open, setOpen] = useState(false); + return ( + <> + setOpen(true)} /> + setOpen(false)} /> + + ); +}; diff --git a/libs/components/layout/src/header/Logo/LogoIcon.tsx b/libs/components/layout/src/header/Logo/LogoIcon.tsx new file mode 100644 index 0000000000..4702d45222 --- /dev/null +++ b/libs/components/layout/src/header/Logo/LogoIcon.tsx @@ -0,0 +1,9 @@ +import { LogoIcon as _LogoIcon } from '@toeverything/components/icons'; +import { styled } from '@toeverything/components/ui'; + +export const LogoIcon = styled(_LogoIcon)(({ theme }) => { + return { + color: theme.affine.palette.primary, + cursor: 'pointer', + }; +}); diff --git a/libs/components/layout/src/header/Logo/ModalContent.tsx b/libs/components/layout/src/header/Logo/ModalContent.tsx new file mode 100644 index 0000000000..e91a2e6b63 --- /dev/null +++ b/libs/components/layout/src/header/Logo/ModalContent.tsx @@ -0,0 +1,185 @@ +import GitHubIcon from '@mui/icons-material/GitHub'; +import { LogoIcon } from '@toeverything/components/icons'; + +import RedditIcon from '@mui/icons-material/Reddit'; +import TelegramIcon from '@mui/icons-material/Telegram'; +import TwitterIcon from '@mui/icons-material/Twitter'; +import { DiscordIcon } from './DiscordIcon'; + +import { styled } from '@toeverything/components/ui'; + +export const ModalContent = () => { + return ( + + + + + Official Website AFFiNE.pro + + + + Check Our Docs Open Source + + + + +
Get in touch!
+
Join our community.
+ + + + + + + + + + ); +}; + +const Container = styled('div')({ + margin: '80px 0 100px 0', + display: 'flex', + flexDirection: 'row', + justifyContent: 'space-between', +}); + +const RightContainer = styled('div')({ + paddingRight: '132px', +}); + +const LeftContainer = styled('div')` + padding-left: 120px; + + &::before { + content: ''; + position: absolute; + z-index: -1; + left: 158px; + display: block; + width: 122px; + height: 122px; + background-color: #dda82a; + opacity: 0.45; + filter: blur(78px); + } + + &::after { + content: ''; + position: absolute; + z-index: -1; + top: 330px; + left: 280px; + display: block; + width: 122px; + height: 122px; + background-color: #4461f2; + filter: blur(78px); + } +`; + +// const LeftContainer = styled('div')({ +// paddingLeft: '132px', + +// '&::before': { +// content: '*', +// display: 'block', +// width: '122px', +// height: '122px', +// backgroundColor: '#dda82a', +// opacity: 0.45, +// filter: 'blur(78px)', +// }, +// }); + +const LeftButtonContainer = styled('a')(({ theme }) => ({ + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + color: theme.affine.palette.primary, + height: '110px', + cursor: 'pointer', + padding: '6px 12px', + borderRadius: '10px', + textDecoration: 'none', + + '& + &': { + marginTop: '50px', + }, +})); + +const LeftGithubIcon = styled(GitHubIcon)({ + fontSize: '50px !important', + cursor: 'pointer', +}); + +const LeftLogoIcon = styled(LogoIcon)({ + fontSize: '50px !important', + cursor: 'pointer', +}); + +const LeftButtonText = styled('span')({ + color: '#000', + fontSize: '24px', + lineHeight: '36px', + width: '200px', + marginLeft: '40px', + cursor: 'pointer', +}); + +const RightTitle = styled('div')({ + paddingLeft: '24px', + marginBottom: '24px', + fontSize: '18px', + lineHeight: '25px', + color: '#000', +}); + +const Button = styled('a')(({ theme }) => ({ + cursor: 'pointer', + padding: '6px 24px', + fontSize: '18px', + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + borderRadius: '10px', + color: theme.affine.palette.primary, + textDecoration: 'none', + + '&:hover': { + backgroundColor: '#EDF3FF', + }, + + '& + &': { + marginTop: '8px', + }, +})); + +const ButtonText = styled('span')(({ theme }) => ({ + marginLeft: '30px', + color: '#000100', +})); diff --git a/libs/components/layout/src/header/Logo/affine-text-logo.png b/libs/components/layout/src/header/Logo/affine-text-logo.png new file mode 100644 index 0000000000..a136ab17fa Binary files /dev/null and b/libs/components/layout/src/header/Logo/affine-text-logo.png differ diff --git a/libs/components/layout/src/header/Logo/index.ts b/libs/components/layout/src/header/Logo/index.ts new file mode 100644 index 0000000000..33af505338 --- /dev/null +++ b/libs/components/layout/src/header/Logo/index.ts @@ -0,0 +1 @@ +export { Logo } from './Logo'; diff --git a/libs/components/layout/src/header/Title.tsx b/libs/components/layout/src/header/Title.tsx index dcd0c9e356..a71f84f00d 100644 --- a/libs/components/layout/src/header/Title.tsx +++ b/libs/components/layout/src/header/Title.tsx @@ -72,7 +72,11 @@ export const CurrentPageTitle = () => { }, [pageTitle]); return pageTitle ? ( - + window.location.reload()} + title={pageTitle} + > {pageTitle} ) : null; @@ -85,5 +89,12 @@ const ContentText = styled(Typography)(({ theme }) => { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', + padding: '6px 12px', + cursor: 'pointer', + borderRadius: '5px', + + '&:hover': { + backgroundColor: '#F5F7F8', + }, }; }); diff --git a/libs/components/layout/src/settings-sidebar/Comments/Comments.tsx b/libs/components/layout/src/settings-sidebar/Comments/Comments.tsx index e2aeb949eb..561a05c948 100644 --- a/libs/components/layout/src/settings-sidebar/Comments/Comments.tsx +++ b/libs/components/layout/src/settings-sidebar/Comments/Comments.tsx @@ -7,7 +7,20 @@ type CommentsProps = { resolveComment: (blockId: string, commentId: string) => void; }; -export const Comments = ({ +export const Comments = (props: CommentsProps) => { + return Comment function coming soon...; +}; + +const StyledText = styled('div')(({ theme }) => { + return { + display: 'flex', + justifyContent: 'center', + color: theme.affine.palette.menu, + marginTop: theme.affine.spacing.lgSpacing, + }; +}); + +export const BakComments = ({ activeCommentId, resolveComment, }: CommentsProps) => {