From a94765913bae2020acc8f1e9f1c5cb421224372c Mon Sep 17 00:00:00 2001 From: lawvs <18554747+lawvs@users.noreply.github.com> Date: Mon, 26 Sep 2022 15:25:48 +0800 Subject: [PATCH 01/11] fix: remove chaotic font css --- .../error-fallback/error-fallback.tsx | 3 - .../src/components/loading/loading.tsx | 1 - .../src/image-util/image-util.tsx | 1 - .../src/video-util/video-util.tsx | 1 - .../common/src/lib/text/plugins/link.tsx | 1 - .../src/components/text-manage/TextManage.tsx | 1 - .../src/menu/command-menu/Categories.tsx | 1 - .../src/menu/group-menu/Menu.tsx | 1 - .../inline-menu/menu-item/DropdownItem.tsx | 1 - .../src/menu/link-menu/LinkMenu.tsx | 1 - libs/components/ui/src/button/base-button.ts | 1 - libs/components/ui/src/cascader/Cascader.tsx | 1 - libs/components/ui/src/theme/theme.ts | 127 +++--------------- 13 files changed, 18 insertions(+), 123 deletions(-) diff --git a/libs/components/board-draw/src/components/error-fallback/error-fallback.tsx b/libs/components/board-draw/src/components/error-fallback/error-fallback.tsx index 6efbcbca97..a88b441d96 100644 --- a/libs/components/board-draw/src/components/error-fallback/error-fallback.tsx +++ b/libs/components/board-draw/src/components/error-fallback/error-fallback.tsx @@ -76,7 +76,6 @@ const InnerContainer = styled('div')({ boxShadow: '$panel', maxWidth: 320, color: '$text', - fontFamily: '$ui', fontSize: '$2', textAlign: 'center', display: 'flex', @@ -90,11 +89,9 @@ const InnerContainer = styled('div')({ backgroundColor: '$hover', padding: '$4', borderRadius: '$2', - fontFamily: '"Menlo", "Monaco", monospace', fontWeight: 500, }, '& p': { - fontFamily: '$body', lineHeight: 1.7, padding: '$5', margin: 0, diff --git a/libs/components/board-draw/src/components/loading/loading.tsx b/libs/components/board-draw/src/components/loading/loading.tsx index a0bf11dab1..1245cc0bb4 100644 --- a/libs/components/board-draw/src/components/loading/loading.tsx +++ b/libs/components/board-draw/src/components/loading/loading.tsx @@ -23,7 +23,6 @@ const StyledLoadingPanelContainer = styled('div')({ borderBottomLeftRadius: '12px', borderBottomRightRadius: '12px', padding: '8px 16px', - fontFamily: 'var(--fonts-ui)', fontSize: 'var(--fontSizes-1)', boxShadow: 'var(--shadows-panel)', backgroundColor: 'white', diff --git a/libs/components/board-shapes/src/image-util/image-util.tsx b/libs/components/board-shapes/src/image-util/image-util.tsx index 2becfdcc84..a19667d549 100644 --- a/libs/components/board-shapes/src/image-util/image-util.tsx +++ b/libs/components/board-shapes/src/image-util/image-util.tsx @@ -165,7 +165,6 @@ const Wrapper = styled('div')<{ }>({ pointerEvents: 'all', position: 'relative', - fontFamily: 'sans-serif', fontSize: '2em', height: '100%', width: '100%', diff --git a/libs/components/board-shapes/src/video-util/video-util.tsx b/libs/components/board-shapes/src/video-util/video-util.tsx index 22b51284d4..37ad390c26 100644 --- a/libs/components/board-shapes/src/video-util/video-util.tsx +++ b/libs/components/board-shapes/src/video-util/video-util.tsx @@ -210,7 +210,6 @@ const Wrapper = styled('div')<{ }>({ pointerEvents: 'all', position: 'relative', - fontFamily: 'sans-serif', fontSize: '2em', height: '100%', width: '100%', diff --git a/libs/components/common/src/lib/text/plugins/link.tsx b/libs/components/common/src/lib/text/plugins/link.tsx index 971d8dc62b..18e937566a 100644 --- a/libs/components/common/src/lib/text/plugins/link.tsx +++ b/libs/components/common/src/lib/text/plugins/link.tsx @@ -519,7 +519,6 @@ const styles = style9.create({ outline: 'none', border: 'none', padding: '0', - fontFamily: 'Helvetica,Arial,"Microsoft Yahei",SimHei,sans-serif', '::-webkit-input-placeholder': { color: '#98acbd', }, diff --git a/libs/components/editor-blocks/src/components/text-manage/TextManage.tsx b/libs/components/editor-blocks/src/components/text-manage/TextManage.tsx index df3ab85abb..2614207a66 100644 --- a/libs/components/editor-blocks/src/components/text-manage/TextManage.tsx +++ b/libs/components/editor-blocks/src/components/text-manage/TextManage.tsx @@ -39,7 +39,6 @@ export type ExtendedTextUtils = SlateUtils & { }; const TextBlockContainer = styled(Text)(({ theme }) => ({ lineHeight: theme.affine.typography.body1.lineHeight, - fontFamily: theme.affine.typography.body1.fontFamily, color: theme.affine.typography.body1.color, letterSpacing: '0.1px', a: { diff --git a/libs/components/editor-plugins/src/menu/command-menu/Categories.tsx b/libs/components/editor-plugins/src/menu/command-menu/Categories.tsx index b24d9825ef..5db1811a12 100644 --- a/libs/components/editor-plugins/src/menu/command-menu/Categories.tsx +++ b/libs/components/editor-plugins/src/menu/command-menu/Categories.tsx @@ -81,7 +81,6 @@ const styles = style9.create({ color: '#98ACBD', fontSize: '12px', lineHeight: '14px', - fontFamily: 'Helvetica,Arial,"Microsoft Yahei",SimHei,sans-serif', textAlign: 'justify', letterSpacing: '1.5px', }, diff --git a/libs/components/editor-plugins/src/menu/group-menu/Menu.tsx b/libs/components/editor-plugins/src/menu/group-menu/Menu.tsx index 85ea1bcbda..cdca77484c 100644 --- a/libs/components/editor-plugins/src/menu/group-menu/Menu.tsx +++ b/libs/components/editor-plugins/src/menu/group-menu/Menu.tsx @@ -61,7 +61,6 @@ export const Menu = ({ }; const MenuUl = styled('ul')(({ theme }) => ({ - fontFamily: 'PingFang SC', background: '#FFF', color: '#4C6275', fontWeight: '400', diff --git a/libs/components/editor-plugins/src/menu/inline-menu/menu-item/DropdownItem.tsx b/libs/components/editor-plugins/src/menu/inline-menu/menu-item/DropdownItem.tsx index c7a34fb6fb..c462b40ed5 100644 --- a/libs/components/editor-plugins/src/menu/inline-menu/menu-item/DropdownItem.tsx +++ b/libs/components/editor-plugins/src/menu/inline-menu/menu-item/DropdownItem.tsx @@ -177,6 +177,5 @@ const styles = style9.create({ }, dropdownItemItext: { color: '#4C6275', - fontFamily: 'Helvetica,Arial,"Microsoft Yahei",SimHei,sans-serif', }, }); diff --git a/libs/components/editor-plugins/src/menu/link-menu/LinkMenu.tsx b/libs/components/editor-plugins/src/menu/link-menu/LinkMenu.tsx index 81856eba4f..d9aee2070c 100644 --- a/libs/components/editor-plugins/src/menu/link-menu/LinkMenu.tsx +++ b/libs/components/editor-plugins/src/menu/link-menu/LinkMenu.tsx @@ -251,7 +251,6 @@ const LinkModalContainerInput = styled('input')(({ theme }) => ({ outline: 'none', border: 'none', padding: '8px', - fontFamily: 'Helvetica,Arial,"Microsoft Yahei",SimHei,sans-serif', '::-webkit-input-placeholder': { color: '#98acbd', }, diff --git a/libs/components/ui/src/button/base-button.ts b/libs/components/ui/src/button/base-button.ts index 5d1df09e5f..b719f73e42 100644 --- a/libs/components/ui/src/button/base-button.ts +++ b/libs/components/ui/src/button/base-button.ts @@ -4,7 +4,6 @@ import ButtonUnstyled, { import { styled } from '../styled'; export const BaseButton = styled(ButtonUnstyled)` - fontFamily: 'Helvetica,Arial,"Microsoft Yahei",SimHei,sans-serif', font-size: 0.875rem; border-radius: 8px; padding: 4px 8px; diff --git a/libs/components/ui/src/cascader/Cascader.tsx b/libs/components/ui/src/cascader/Cascader.tsx index 7bf43413f2..ad96feff17 100644 --- a/libs/components/ui/src/cascader/Cascader.tsx +++ b/libs/components/ui/src/cascader/Cascader.tsx @@ -131,7 +131,6 @@ export function Cascader(props: CascaderProps) { } const MenuPaper = styled('div')(({ theme }) => ({ - fontFamily: 'PingFang SC', background: '#FFF', boxShadow: theme.affine.shadows.shadow1, borderRadius: '10px 0px 10px 10px', diff --git a/libs/components/ui/src/theme/theme.ts b/libs/components/ui/src/theme/theme.ts index ad3576dba6..5e9a93e944 100644 --- a/libs/components/ui/src/theme/theme.ts +++ b/libs/components/ui/src/theme/theme.ts @@ -1,111 +1,3 @@ -// import { ThemeOptions } from '@mui/material/styles'; -/** - * @deprecated Please use the new {@link ThemeOptions} type. - */ -interface ThemeOptionsLegacy { - palette: Palette; - typography: Typography; - shadows?: Shadows; - border?: StringWithNone; - spacing?: Spacing; - shape?: Shape; -} - -interface Shape { - xsBorderRadius?: string; - borderRadius?: string; - smBorderRadius?: string; - lgBorderRadius?: string; -} -interface Spacing { - xsSpacing: string; - smSpacing?: string; - main?: string; - lgSpacing?: string; -} -interface Palette { - primary?: Action; - success?: Action; - info?: Action; - error?: Action; - warning?: Action; - text?: Action; -} -interface Action { - main: string; - active?: string; - hover?: string; - hoverOpacity?: number; - selected?: string; - selectedOpacity?: number; - disabled?: string; - disabledOpacity?: number; - disabledBackground?: string; - focus?: string; - focusOpacity?: number; - activatedOpacity?: number; -} -interface Typography { - fontSize?: string; - fontFamily?: string; - xsFontSize?: string; - lgFontSize?: string; - fontWeight?: number; - xsFontWeight?: number; - lineHeight?: string; - lgFontWeight?: number; - button?: Font; - body1?: Font; - body2?: Font; - h1?: Font; - h2?: Font; - h3?: Font; - h4?: Font; - h5?: Font; - page?: Font; - quote?: Font; - callout?: Font; -} - -interface Shadows { - none: 'none'; - shadow1: string; -} - -type StringWithNone = [ - 'none', - string?, - string?, - string?, - string?, - string?, - string?, - string?, - string?, - string?, - string?, - string?, - string?, - string?, - string?, - string?, - string?, - string?, - string?, - string?, - string?, - string?, - string?, - string?, - string? -]; -interface Font { - fontSize?: string; - lineHeight?: string; - fontFamily?: string; - fontWeight?: number; -} - export const Theme = { palette: { /** @@ -166,6 +58,24 @@ export const Theme = { textHover: '#ECF1FB', }, typography: { + fontFamily: ( + [ + '-apple-system', + 'BlinkMacSystemFont', + 'Helvetica Neue', + 'Tahoma', + 'PingFang SC', + 'Microsoft Yahei', + 'Arial', + 'Hiragino Sans GB', + 'sans-serif', + 'Apple Color Emoji', + 'Segoe UI Emoji', + 'Segoe UI Symbol', + 'Noto Color Emoji', + ] as const + ).join(', '), + button: { fontSize: '16px', }, @@ -173,7 +83,6 @@ export const Theme = { fontSize: '16px', lineHeight: '22px', fontWeight: 400, - fontFamily: 'PingFang SC', color: '#3A4C5C', }, h1: { From 892f15f78cd17786961174ce79389d86f5352639 Mon Sep 17 00:00:00 2001 From: lawvs <18554747+lawvs@users.noreply.github.com> Date: Mon, 26 Sep 2022 15:26:22 +0800 Subject: [PATCH 02/11] chore: clean code --- libs/components/account/src/error.tsx | 3 +-- .../src/components/error-fallback/error-fallback.tsx | 4 +++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/libs/components/account/src/error.tsx b/libs/components/account/src/error.tsx index fb1f93f551..55489187df 100644 --- a/libs/components/account/src/error.tsx +++ b/libs/components/account/src/error.tsx @@ -1,7 +1,6 @@ import style9 from 'style9'; -import { keyframes } from '@emotion/react'; -import { MuiBox as Box } from '@toeverything/components/ui'; +import { keyframes, MuiBox as Box } from '@toeverything/components/ui'; const styles = style9.create({ container: { diff --git a/libs/components/board-draw/src/components/error-fallback/error-fallback.tsx b/libs/components/board-draw/src/components/error-fallback/error-fallback.tsx index a88b441d96..f3b076bbf4 100644 --- a/libs/components/board-draw/src/components/error-fallback/error-fallback.tsx +++ b/libs/components/board-draw/src/components/error-fallback/error-fallback.tsx @@ -35,7 +35,9 @@ export function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) { 
                     {error.message}
-
+
From a47913a9d83e29ac5f5436c0e459bcbb4a7b0ddf Mon Sep 17 00:00:00 2001 From: DiamondThree Date: Tue, 27 Sep 2022 16:23:31 +0800 Subject: [PATCH 03/11] fix: show up image menu option (#464) fix: fix bug that don't add image in kanban view --- .../blocks/group/scene-kanban/CardItem.tsx | 2 -- .../src/components/upload/upload.tsx | 29 ++++++++++--------- 2 files changed, 15 insertions(+), 16 deletions(-) diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx b/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx index b527711217..3267c7d6f5 100644 --- a/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx +++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx @@ -52,8 +52,6 @@ const CardContainer = styled('div')({ backgroundColor: '#fff', border: '1px solid #E2E7ED', borderRadius: '5px', - overflow: 'hidden', - [CardActions.toString()]: { opacity: '0', }, diff --git a/libs/components/editor-blocks/src/components/upload/upload.tsx b/libs/components/editor-blocks/src/components/upload/upload.tsx index d9a4ed6f0b..190b4f4f31 100644 --- a/libs/components/editor-blocks/src/components/upload/upload.tsx +++ b/libs/components/editor-blocks/src/components/upload/upload.tsx @@ -1,21 +1,21 @@ -import { - useRef, - ChangeEvent, - ReactElement, - useState, - SyntheticEvent, -} from 'react'; import DeleteSweepOutlinedIcon from '@mui/icons-material/DeleteSweepOutlined'; import { - styled, - SxProps, - MuiTextField as TextField, + MuiBox as Box, MuiButton as Button, MuiClickAwayListener as ClickAwayListener, - MuiTabs as Tabs, MuiTab as Tab, - MuiBox as Box, + MuiTabs as Tabs, + MuiTextField as TextField, + styled, + SxProps, } from '@toeverything/components/ui'; +import { + ChangeEvent, + ReactElement, + SyntheticEvent, + useRef, + useState, +} from 'react'; const MESSAGES = { ADD_AN_FILE: 'Add an file', @@ -36,8 +36,9 @@ interface Props { } const styles: SxProps = { position: 'absolute', - width: '600px', - zIndex: 99, + width: '70%', + // maxWidth:'100%', + zIndex: 999, marginLeft: '50px', p: 1, bgcolor: 'background.paper', From 287e6ff1c41a6185ab70655ad96a510c3a27653d Mon Sep 17 00:00:00 2001 From: alt0 Date: Wed, 28 Sep 2022 15:23:14 +0800 Subject: [PATCH 04/11] fix: venus logo use svg --- apps/venus/src/app/common/Footer.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) 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', }} > - + + {/* */} From 7c5de7b20ca995f5249561a489506a70fc05ff3f Mon Sep 17 00:00:00 2001 From: alt0 Date: Wed, 28 Sep 2022 15:30:57 +0800 Subject: [PATCH 05/11] fix: page title support click to reload --- libs/components/layout/src/header/LayoutHeader.tsx | 2 +- libs/components/layout/src/header/Title.tsx | 13 ++++++++++++- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/libs/components/layout/src/header/LayoutHeader.tsx b/libs/components/layout/src/header/LayoutHeader.tsx index e6ab719a5a..03b427c8fb 100644 --- a/libs/components/layout/src/header/LayoutHeader.tsx +++ b/libs/components/layout/src/header/LayoutHeader.tsx @@ -121,7 +121,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/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', + }, }; }); From b9bc2d167e0582d50602dfa1bbdba2054f0b3044 Mon Sep 17 00:00:00 2001 From: alt0 Date: Wed, 28 Sep 2022 15:48:29 +0800 Subject: [PATCH 06/11] fix: add some tips for livedemo --- .../src/pages/workspace/docs/Page.tsx | 14 +++++++++ .../layout/src/header/LayoutHeader.tsx | 30 +++++++++++++------ .../settings-sidebar/Comments/Comments.tsx | 15 +++++++++- 3 files changed, 49 insertions(+), 10 deletions(-) diff --git a/apps/ligo-virgo/src/pages/workspace/docs/Page.tsx b/apps/ligo-virgo/src/pages/workspace/docs/Page.tsx index 2a4c4f1aa5..6dd977a8af 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 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/libs/components/layout/src/header/LayoutHeader.tsx b/libs/components/layout/src/header/LayoutHeader.tsx index 03b427c8fb..427171461a 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, @@ -51,16 +51,28 @@ export const LayoutHeader = () => { - {t('Share')} + + + {t('Share')} + +
- - - + + + +
diff --git a/libs/components/layout/src/settings-sidebar/Comments/Comments.tsx b/libs/components/layout/src/settings-sidebar/Comments/Comments.tsx index e2aeb949eb..db80b0b6bc 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 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) => { From 5ad5c4879dcf952f139bb86c0cb1f531574aaa1b Mon Sep 17 00:00:00 2001 From: alt0 Date: Wed, 28 Sep 2022 17:45:33 +0800 Subject: [PATCH 07/11] feat: add live demo infomation --- .../layout/src/header/LayoutHeader.tsx | 3 +- .../layout/src/header/Logo/DiscordIcon.tsx | 25 +++ .../layout/src/header/Logo/InfoModal.tsx | 94 ++++++++++ .../layout/src/header/Logo/Logo.tsx | 13 ++ .../layout/src/header/Logo/LogoIcon.tsx | 9 + .../layout/src/header/Logo/ModalContent.tsx | 166 ++++++++++++++++++ .../src/header/Logo/affine-text-logo.png | Bin 0 -> 20726 bytes .../layout/src/header/Logo/index.ts | 1 + 8 files changed, 310 insertions(+), 1 deletion(-) create mode 100644 libs/components/layout/src/header/Logo/DiscordIcon.tsx create mode 100644 libs/components/layout/src/header/Logo/InfoModal.tsx create mode 100644 libs/components/layout/src/header/Logo/Logo.tsx create mode 100644 libs/components/layout/src/header/Logo/LogoIcon.tsx create mode 100644 libs/components/layout/src/header/Logo/ModalContent.tsx create mode 100644 libs/components/layout/src/header/Logo/affine-text-logo.png create mode 100644 libs/components/layout/src/header/Logo/index.ts diff --git a/libs/components/layout/src/header/LayoutHeader.tsx b/libs/components/layout/src/header/LayoutHeader.tsx index 427171461a..4e5923cd0e 100644 --- a/libs/components/layout/src/header/LayoutHeader.tsx +++ b/libs/components/layout/src/header/LayoutHeader.tsx @@ -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,7 +45,7 @@ export const LayoutHeader = () => { - + 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..a13c96dc63 --- /dev/null +++ b/libs/components/layout/src/header/Logo/ModalContent.tsx @@ -0,0 +1,166 @@ +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: 132px; + + &::before { + content: ''; + position: absolute; + left: 158px; + display: block; + width: 122px; + height: 122px; + background-color: #dda82a; + opacity: 0.45; + filter: blur(78px); + } + + &::after { + content: ''; + position: absolute; + 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('div')(({ theme }) => ({ + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + color: theme.affine.palette.primary, + height: '110px', + + '& + &': { + marginTop: '50px', + }, +})); + +const LeftGithubIcon = styled(GitHubIcon)({ + fontSize: '50px !important', +}); + +const LeftLogoIcon = styled(LogoIcon)({ + fontSize: '50px !important', +}); + +const LeftButtonText = styled('span')({ + color: '#000', + fontSize: '24px', + lineHeight: '36px', + width: '200px', + marginLeft: '40px', +}); + +const RightTitle = styled('div')({ + paddingLeft: '24px', + marginBottom: '24px', + fontSize: '18px', + lineHeight: '25px', + color: '#000', +}); + +const Button = styled('div')(({ theme }) => ({ + cursor: 'pointer', + padding: '6px 24px', + fontSize: '18px', + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + borderRadius: '10px', + color: theme.affine.palette.primary, + + '&: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 0000000000000000000000000000000000000000..a136ab17fafa02007d9a8fff455bfafbf244faae GIT binary patch literal 20726 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 literal 0 HcmV?d00001 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'; From e69884f5e91b374a9fb7af30fc2390ed7a2d2ed5 Mon Sep 17 00:00:00 2001 From: alt0 Date: Wed, 28 Sep 2022 18:06:05 +0800 Subject: [PATCH 08/11] feat: add live demo infomation --- .../layout/src/header/Logo/ModalContent.tsx | 39 ++++++++++++++----- 1 file changed, 29 insertions(+), 10 deletions(-) diff --git a/libs/components/layout/src/header/Logo/ModalContent.tsx b/libs/components/layout/src/header/Logo/ModalContent.tsx index a13c96dc63..e91a2e6b63 100644 --- a/libs/components/layout/src/header/Logo/ModalContent.tsx +++ b/libs/components/layout/src/header/Logo/ModalContent.tsx @@ -12,11 +12,14 @@ export const ModalContent = () => { return ( - + Official Website AFFiNE.pro - + Check Our Docs Open Source @@ -27,23 +30,29 @@ export const ModalContent = () => {
Join our community.
- - - - - @@ -64,11 +73,12 @@ const RightContainer = styled('div')({ }); const LeftContainer = styled('div')` - padding-left: 132px; + padding-left: 120px; &::before { content: ''; position: absolute; + z-index: -1; left: 158px; display: block; width: 122px; @@ -81,6 +91,7 @@ const LeftContainer = styled('div')` &::after { content: ''; position: absolute; + z-index: -1; top: 330px; left: 280px; display: block; @@ -105,12 +116,16 @@ const LeftContainer = styled('div')` // }, // }); -const LeftButtonContainer = styled('div')(({ theme }) => ({ +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', @@ -119,10 +134,12 @@ const LeftButtonContainer = styled('div')(({ theme }) => ({ const LeftGithubIcon = styled(GitHubIcon)({ fontSize: '50px !important', + cursor: 'pointer', }); const LeftLogoIcon = styled(LogoIcon)({ fontSize: '50px !important', + cursor: 'pointer', }); const LeftButtonText = styled('span')({ @@ -131,6 +148,7 @@ const LeftButtonText = styled('span')({ lineHeight: '36px', width: '200px', marginLeft: '40px', + cursor: 'pointer', }); const RightTitle = styled('div')({ @@ -141,7 +159,7 @@ const RightTitle = styled('div')({ color: '#000', }); -const Button = styled('div')(({ theme }) => ({ +const Button = styled('a')(({ theme }) => ({ cursor: 'pointer', padding: '6px 24px', fontSize: '18px', @@ -150,6 +168,7 @@ const Button = styled('div')(({ theme }) => ({ alignItems: 'center', borderRadius: '10px', color: theme.affine.palette.primary, + textDecoration: 'none', '&:hover': { backgroundColor: '#EDF3FF', From 4815ec474b45ec9d3912e268feb76eed545ab03e Mon Sep 17 00:00:00 2001 From: alt0 Date: Wed, 28 Sep 2022 18:09:49 +0800 Subject: [PATCH 09/11] fix: copied --- apps/ligo-virgo/src/pages/workspace/docs/Page.tsx | 2 +- .../layout/src/settings-sidebar/Comments/Comments.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/ligo-virgo/src/pages/workspace/docs/Page.tsx b/apps/ligo-virgo/src/pages/workspace/docs/Page.tsx index 6dd977a8af..5c42c2c794 100644 --- a/apps/ligo-virgo/src/pages/workspace/docs/Page.tsx +++ b/apps/ligo-virgo/src/pages/workspace/docs/Page.tsx @@ -90,7 +90,7 @@ export function Page(props: PageProps) { )} {activeTab === TabMap.get(TAB_TITLE.GALLERY).value && ( - Gallery coming soon... + Gallery function coming soon... )} diff --git a/libs/components/layout/src/settings-sidebar/Comments/Comments.tsx b/libs/components/layout/src/settings-sidebar/Comments/Comments.tsx index db80b0b6bc..561a05c948 100644 --- a/libs/components/layout/src/settings-sidebar/Comments/Comments.tsx +++ b/libs/components/layout/src/settings-sidebar/Comments/Comments.tsx @@ -8,7 +8,7 @@ type CommentsProps = { }; export const Comments = (props: CommentsProps) => { - return Comment coming soon...; + return Comment function coming soon...; }; const StyledText = styled('div')(({ theme }) => { From b5898c2e671a0974d0e00c92703166980be76b8a Mon Sep 17 00:00:00 2001 From: lawvs <18554747+lawvs@users.noreply.github.com> Date: Wed, 28 Sep 2022 21:34:10 +0800 Subject: [PATCH 10/11] fix: upload layer incorrect redesign https://github.com/toeverything/AFFiNE/pull/464 --- .../src/components/upload/upload.tsx | 247 +++++++++--------- 1 file changed, 124 insertions(+), 123 deletions(-) diff --git a/libs/components/editor-blocks/src/components/upload/upload.tsx b/libs/components/editor-blocks/src/components/upload/upload.tsx index 190b4f4f31..1fa2f20092 100644 --- a/libs/components/editor-blocks/src/components/upload/upload.tsx +++ b/libs/components/editor-blocks/src/components/upload/upload.tsx @@ -3,6 +3,7 @@ import { MuiBox as Box, MuiButton as Button, MuiClickAwayListener as ClickAwayListener, + MuiPopper, MuiTab as Tab, MuiTabs as Tabs, MuiTextField as TextField, @@ -15,6 +16,7 @@ import { SyntheticEvent, useRef, useState, + type MouseEvent, } from 'react'; const MESSAGES = { @@ -36,11 +38,11 @@ interface Props { } const styles: SxProps = { position: 'absolute', - width: '70%', + width: '600px', // maxWidth:'100%', - zIndex: 999, - marginLeft: '50px', - p: 1, + // The z-index of refPage is 200, + // so the z-index of upload need to be greater than it + zIndex: 201, bgcolor: 'background.paper', borderRadius: '4px', textAlign: 'center', @@ -85,21 +87,22 @@ export const Upload = (props: Props) => { } = props; const input_ref = useRef(null); const [upload_link, set_upload_link] = useState(''); - - const [open, setOpen] = useState(firstCreate); const type = ['file', 'image'].includes(uploadType) ? 'file' : 'link'; const [value, setValue] = useState(type); + const [anchorEl, setAnchorEl] = useState(null); + const open = Boolean(anchorEl); + const handleChange = (event: SyntheticEvent, newValue: string) => { setValue(newValue); }; - const handleClick = () => { - setOpen(prev => !prev); + const handleClick = (event: MouseEvent) => { + setAnchorEl(anchorEl ? null : event.currentTarget); }; const handleClickAway = () => { - setOpen(false); + setAnchorEl(null); }; const choose_file = () => { if (input_ref.current) { @@ -127,128 +130,126 @@ export const Upload = (props: Props) => { savaLink(upload_link); }; return ( -
- - - {defaultAddBtnText - ? defaultAddBtnText - : MESSAGES.ADD_AN_FILE} - + + {defaultAddBtnText ? defaultAddBtnText : MESSAGES.ADD_AN_FILE} + { + e.stopPropagation(); + deleteFile(); + }} + > + + + + {open && ( + + { e.stopPropagation(); - deleteFile(); }} + sx={styles} > - - - - {open && ( - - { - e.stopPropagation(); - }} - sx={styles} + value={value} + onChange={handleChange} > - - {['file', 'image'].includes(uploadType) ? ( - - ) : ( - '' - )} - {!['file', 'image'].includes(uploadType) ? ( - - ) : ( - '' - )} - - - {value === 'file' ? ( - - - - + {['file', 'image'].includes(uploadType) ? ( + ) : ( - - - - - - + '' )} - - - )} - -
+ {!['file', 'image'].includes(uploadType) ? ( + + ) : ( + '' + )} + + + {value === 'file' ? ( + + + + + ) : ( + + + + + + + )} + + + )} + ); }; From a6abd42c4313dbae18ed762bb0027370f5b00256 Mon Sep 17 00:00:00 2001 From: alt0 Date: Thu, 29 Sep 2022 11:13:00 +0800 Subject: [PATCH 11/11] fix: livedemo infomation color & copies --- libs/components/layout/src/header/LayoutHeader.tsx | 4 ++-- libs/components/layout/src/header/Logo/InfoModal.tsx | 2 +- libs/components/layout/src/header/Logo/ModalContent.tsx | 8 ++++++-- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/libs/components/layout/src/header/LayoutHeader.tsx b/libs/components/layout/src/header/LayoutHeader.tsx index 4e5923cd0e..4c313afec2 100644 --- a/libs/components/layout/src/header/LayoutHeader.tsx +++ b/libs/components/layout/src/header/LayoutHeader.tsx @@ -54,7 +54,7 @@ export const LayoutHeader = () => { {t('Share')} @@ -63,7 +63,7 @@ export const LayoutHeader = () => {
({ borderRadius: '6px', '&:hover': { - backgroundColor: theme.affine.palette.tagHover, + backgroundColor: '#EDF3FF', }, })); diff --git a/libs/components/layout/src/header/Logo/ModalContent.tsx b/libs/components/layout/src/header/Logo/ModalContent.tsx index e91a2e6b63..e914c0b920 100644 --- a/libs/components/layout/src/header/Logo/ModalContent.tsx +++ b/libs/components/layout/src/header/Logo/ModalContent.tsx @@ -123,10 +123,14 @@ const LeftButtonContainer = styled('a')(({ theme }) => ({ color: theme.affine.palette.primary, height: '110px', cursor: 'pointer', - padding: '6px 12px', + padding: '6px 24px 6px 28px', borderRadius: '10px', textDecoration: 'none', + '&:hover': { + backgroundColor: 'rgba(68, 97, 242, 0.1)', + }, + '& + &': { marginTop: '50px', }, @@ -146,7 +150,7 @@ const LeftButtonText = styled('span')({ color: '#000', fontSize: '24px', lineHeight: '36px', - width: '200px', + width: '180px', marginLeft: '40px', cursor: 'pointer', });