From 44d569ca669f362e61e87421543972277173e991 Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Tue, 31 Jan 2023 12:22:00 +0800 Subject: [PATCH 1/6] feat: add FlexWrapper in layout component --- packages/app/src/components/import/index.tsx | 6 +-- .../components/page-list/OperationCell.tsx | 10 ++-- .../src/components/workspace-modal/Footer.tsx | 6 +-- .../workspace-modal/WorkspaceCard.tsx | 6 +-- .../src/components/workspace-modal/index.tsx | 6 +-- .../workspace-setting/member/MembersPage.tsx | 6 +-- packages/app/src/ui/layout/Wrapper.tsx | 49 +++++++++++++++---- 7 files changed, 60 insertions(+), 29 deletions(-) diff --git a/packages/app/src/components/import/index.tsx b/packages/app/src/components/import/index.tsx index a594b08e35..05fd28182c 100644 --- a/packages/app/src/components/import/index.tsx +++ b/packages/app/src/components/import/index.tsx @@ -1,7 +1,7 @@ import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal'; import { StyledButtonWrapper, StyledTitle } from './styles'; import { Button } from '@/ui/button'; -import { Wrapper, Content } from '@/ui/layout'; +import { Wrapper, Content, FlexWrapper } from '@/ui/layout'; import Loading from '@/components/loading'; import { usePageHelper } from '@/hooks/use-page-helper'; import { useAppState } from '@/providers/app-state-provider'; @@ -116,7 +116,7 @@ export const ImportModal = ({ open, onClose }: ImportModalProps) => { )} {status === 'importing' && ( - { OOOOPS! Sorry forgot to remind you that we are working on the import function - + )} diff --git a/packages/app/src/components/page-list/OperationCell.tsx b/packages/app/src/components/page-list/OperationCell.tsx index ca59efa60a..a9efc634c4 100644 --- a/packages/app/src/components/page-list/OperationCell.tsx +++ b/packages/app/src/components/page-list/OperationCell.tsx @@ -1,7 +1,7 @@ import { useConfirm } from '@/providers/ConfirmProvider'; import { PageMeta } from '@/providers/app-state-provider'; import { Menu, MenuItem } from '@/ui/menu'; -import { Wrapper } from '@/ui/layout'; +import { FlexWrapper } from '@/ui/layout'; import { IconButton } from '@/ui/button'; import { MoreVerticalIcon, @@ -63,13 +63,13 @@ export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => { ); return ( - + - + ); }; @@ -80,7 +80,7 @@ export const TrashOperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => { const { confirm } = useConfirm(); const { t } = useTranslation(); return ( - + { > - + ); }; diff --git a/packages/app/src/components/workspace-modal/Footer.tsx b/packages/app/src/components/workspace-modal/Footer.tsx index ea38de2a9c..0aef077900 100644 --- a/packages/app/src/components/workspace-modal/Footer.tsx +++ b/packages/app/src/components/workspace-modal/Footer.tsx @@ -1,5 +1,5 @@ import { CloudInsyncIcon, LogOutIcon } from '@blocksuite/icons'; -import { Wrapper } from '@/ui/layout'; +import { FlexWrapper } from '@/ui/layout'; import { WorkspaceAvatar } from '@/components/workspace-avatar'; import { IconButton } from '@/ui/button'; import { useAppState } from '@/providers/app-state-provider'; @@ -18,7 +18,7 @@ export const Footer = ({ {user && ( <> - + {user.name}

{user.email}

- + { onLogout(); diff --git a/packages/app/src/components/workspace-modal/WorkspaceCard.tsx b/packages/app/src/components/workspace-modal/WorkspaceCard.tsx index 1a6032d65f..f3177fbafe 100644 --- a/packages/app/src/components/workspace-modal/WorkspaceCard.tsx +++ b/packages/app/src/components/workspace-modal/WorkspaceCard.tsx @@ -8,7 +8,7 @@ import { PublishIcon, UsersIcon } from '@blocksuite/icons'; import { WorkspaceUnit } from '@affine/datacenter'; import { useAppState } from '@/providers/app-state-provider'; import { StyleWorkspaceInfo, StyleWorkspaceTitle, StyledCard } from './styles'; -import { Wrapper } from '@/ui/layout'; +import { FlexWrapper } from '@/ui/layout'; export const WorkspaceCard = ({ workspaceData, @@ -26,9 +26,9 @@ export const WorkspaceCard = ({ }} active={workspaceData.id === currentWorkspace?.id} > - + - + diff --git a/packages/app/src/components/workspace-modal/index.tsx b/packages/app/src/components/workspace-modal/index.tsx index 93b1bb7279..88ab7a979f 100644 --- a/packages/app/src/components/workspace-modal/index.tsx +++ b/packages/app/src/components/workspace-modal/index.tsx @@ -1,5 +1,5 @@ import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal'; -import { Wrapper } from '@/ui/layout'; +import { FlexWrapper } from '@/ui/layout'; import { useState } from 'react'; import { CreateWorkspaceModal } from '../create-workspace'; import { Tooltip } from '@/ui/tooltip'; @@ -101,11 +101,11 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => { setCreateWorkspaceOpen(true); }} > - + - + New workspace diff --git a/packages/app/src/components/workspace-setting/member/MembersPage.tsx b/packages/app/src/components/workspace-setting/member/MembersPage.tsx index b1b64ffa0e..986853652f 100644 --- a/packages/app/src/components/workspace-setting/member/MembersPage.tsx +++ b/packages/app/src/components/workspace-setting/member/MembersPage.tsx @@ -25,7 +25,7 @@ import { useConfirm } from '@/providers/ConfirmProvider'; import { toast } from '@/ui/toast'; import useMembers from '@/hooks/use-members'; import Loading from '@/components/loading'; -import { Wrapper } from '@/ui/layout'; +import { FlexWrapper } from '@/ui/layout'; import { useTranslation } from '@affine/i18n'; import { EnableWorkspaceButton } from '@/components/enable-workspace'; @@ -41,9 +41,9 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => { {!loaded && ( - + - + )} {loaded && members.length === 0 && ( diff --git a/packages/app/src/ui/layout/Wrapper.tsx b/packages/app/src/ui/layout/Wrapper.tsx index 00584b20f0..a463312abf 100644 --- a/packages/app/src/ui/layout/Wrapper.tsx +++ b/packages/app/src/ui/layout/Wrapper.tsx @@ -2,6 +2,14 @@ import type { CSSProperties } from 'react'; import { styled } from '@/styles'; export type WrapperProps = { + display?: CSSProperties['display']; + width?: CSSProperties['width']; + height?: CSSProperties['height']; + padding?: CSSProperties['padding']; + margin?: CSSProperties['margin']; +}; + +export type FlexWrapperProps = { display?: CSSProperties['display']; flexDirection?: CSSProperties['flexDirection']; justifyContent?: CSSProperties['justifyContent']; @@ -13,9 +21,22 @@ export type WrapperProps = { // Sometimes we just want to wrap a component with a div to set flex or other styles, but we don't want to create a new component for it. export const Wrapper = styled('div', { + shouldForwardProp: prop => { + return !['display', 'width', 'height', 'padding', 'margin'].includes(prop); + }, +})(({ display, width, height, padding, margin }) => { + return { + display, + width, + height, + padding, + margin, + }; +}); + +export const FlexWrapper = styled(Wrapper, { shouldForwardProp: prop => { return ![ - 'display', 'justifyContent', 'alignItems', 'wrap', @@ -24,18 +45,17 @@ export const Wrapper = styled('div', { 'flexGrow', ].includes(prop); }, -})( +})( ({ - display = 'flex', - justifyContent = 'flex-start', - alignItems = 'center', + justifyContent, + alignItems, wrap = false, - flexDirection = 'row', - flexShrink = '0', - flexGrow = '0', + flexDirection, + flexShrink, + flexGrow, }) => { return { - display, + display: 'flex', justifyContent, alignItems, flexWrap: wrap ? 'wrap' : 'nowrap', @@ -46,4 +66,15 @@ export const Wrapper = styled('div', { } ); +// TODO: Complete me +export const GridWrapper = styled(Wrapper, { + shouldForwardProp: prop => { + return ![''].includes(prop); + }, +})(() => { + return { + display: 'grid', + }; +}); + export default Wrapper; From c11f257943bdb7f6c7400a3580d921ebd72d4ee6 Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Tue, 31 Jan 2023 12:28:32 +0800 Subject: [PATCH 2/6] fix: lint error --- packages/app/src/components/import/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/app/src/components/import/index.tsx b/packages/app/src/components/import/index.tsx index 05fd28182c..d8eaa2ffd5 100644 --- a/packages/app/src/components/import/index.tsx +++ b/packages/app/src/components/import/index.tsx @@ -1,7 +1,7 @@ import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal'; import { StyledButtonWrapper, StyledTitle } from './styles'; import { Button } from '@/ui/button'; -import { Wrapper, Content, FlexWrapper } from '@/ui/layout'; +import { Content, FlexWrapper } from '@/ui/layout'; import Loading from '@/components/loading'; import { usePageHelper } from '@/hooks/use-page-helper'; import { useAppState } from '@/providers/app-state-provider'; From 2f5724578fa3ff8bcb27f8f73408e716e6bd0c17 Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Tue, 31 Jan 2023 13:18:37 +0800 Subject: [PATCH 3/6] feat: modify Content component --- packages/app/src/ui/layout/Content.tsx | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/packages/app/src/ui/layout/Content.tsx b/packages/app/src/ui/layout/Content.tsx index 510f3886a6..38d13251e5 100644 --- a/packages/app/src/ui/layout/Content.tsx +++ b/packages/app/src/ui/layout/Content.tsx @@ -14,8 +14,21 @@ export type ContentProps = { lineNum?: number; children: string; }; - -export const Content = styled.div( +export const Content = styled('div', { + shouldForwardProp: prop => { + return ![ + 'color', + 'fontSize', + 'weight', + 'lineHeight', + 'ellipsis', + 'lineNum', + 'width', + 'maxWidth', + 'align', + ].includes(prop); + }, +})( ({ theme, color, From 5fb22d5b654a5be765cd2569951caf0d3b95db7e Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Tue, 31 Jan 2023 19:00:11 +0800 Subject: [PATCH 4/6] fix: workspace modal style error --- packages/app/src/components/workspace-modal/styles.ts | 3 ++- packages/app/src/styles/helper.ts | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/app/src/components/workspace-modal/styles.ts b/packages/app/src/components/workspace-modal/styles.ts index 57146afbdf..6796c3a57b 100644 --- a/packages/app/src/components/workspace-modal/styles.ts +++ b/packages/app/src/components/workspace-modal/styles.ts @@ -45,6 +45,7 @@ export const StyledCard = styled.div<{ borderRadius: '12px', border: `1px solid ${borderColor}`, ...displayFlex('flex-start', 'flex-start'), + marginBottom: '24px', ':hover': { background: theme.colors.hoverBackground, '.add-icon': { @@ -125,7 +126,7 @@ export const StyledModalContent = styled('div')({ padding: '8px 40px', marginTop: '72px', overflow: 'auto', - ...displayFlex('space-between', 'flex-start', 'column'), + ...displayFlex('space-between', 'flex-start', 'flex-start'), flexWrap: 'wrap', }); export const StyledOperationWrapper = styled.div(() => { diff --git a/packages/app/src/styles/helper.ts b/packages/app/src/styles/helper.ts index 3e5949ae3e..20e397f741 100644 --- a/packages/app/src/styles/helper.ts +++ b/packages/app/src/styles/helper.ts @@ -2,12 +2,12 @@ import type { CSSProperties } from 'react'; export const displayFlex = ( justifyContent: CSSProperties['justifyContent'] = 'unset', - alignItems: CSSProperties['alignContent'] = 'unset', + alignItems: CSSProperties['alignItems'] = 'unset', alignContent: CSSProperties['alignContent'] = 'unset' ): { display: CSSProperties['display']; justifyContent: CSSProperties['justifyContent']; - alignItems: CSSProperties['alignContent']; + alignItems: CSSProperties['alignItems']; alignContent: CSSProperties['alignContent']; } => { return { From 4545c4b56f523e86c24ced795c4d572acab943ef Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Tue, 31 Jan 2023 19:02:11 +0800 Subject: [PATCH 5/6] fix: can not close workspace modal --- packages/app/src/ui/modal/ModalCloseButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/app/src/ui/modal/ModalCloseButton.tsx b/packages/app/src/ui/modal/ModalCloseButton.tsx index b42d687ca7..f5e4eaf079 100644 --- a/packages/app/src/ui/modal/ModalCloseButton.tsx +++ b/packages/app/src/ui/modal/ModalCloseButton.tsx @@ -28,7 +28,7 @@ export const ModalCloseButton = ({ ) : ( - + ); From cf2767c5686781684bbac665f5bc9e2f4d275cbd Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Wed, 1 Feb 2023 17:59:46 +0800 Subject: [PATCH 6/6] feat: adjust layout --- .../app/src/components/workspace-slider-bar/style.ts | 2 +- packages/app/src/pages/temporary.css | 12 +++--------- 2 files changed, 4 insertions(+), 10 deletions(-) diff --git a/packages/app/src/components/workspace-slider-bar/style.ts b/packages/app/src/components/workspace-slider-bar/style.ts index 6f380b43e1..a8f09dcc7b 100644 --- a/packages/app/src/components/workspace-slider-bar/style.ts +++ b/packages/app/src/components/workspace-slider-bar/style.ts @@ -4,7 +4,7 @@ import Link from 'next/link'; export const StyledSliderBar = styled.div<{ show: boolean }>( ({ theme, show }) => { return { - width: show ? '320px' : '0', + width: show ? '256px' : '0', height: '100vh', background: theme.mode === 'dark' ? '#272727' : '#FBFBFC', boxShadow: theme.shadow.modal, diff --git a/packages/app/src/pages/temporary.css b/packages/app/src/pages/temporary.css index 92e2ff7b44..9bda7bdcf9 100644 --- a/packages/app/src/pages/temporary.css +++ b/packages/app/src/pages/temporary.css @@ -1,14 +1,8 @@ -debug-menu { - display: none !important; -} -.affine-block-children-container.edgeless { - background-color: #fff; -} - .affine-default-page-block-title-container { margin-top: 78px; margin-bottom: 40px; } -.affine-editor-container { - background: transparent !important; + +.affine-default-page-block-container { + width: 686px !important; }