From 01310e1650c12f4146163de644565ea3dbdeabbc Mon Sep 17 00:00:00 2001 From: Qi <474021214@qq.com> Date: Wed, 1 Feb 2023 10:46:59 +0800 Subject: [PATCH] Feat/UI (#751) --- 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 +-- .../src/components/workspace-modal/styles.ts | 3 +- .../workspace-setting/member/MembersPage.tsx | 6 +-- packages/app/src/styles/helper.ts | 4 +- packages/app/src/ui/layout/Content.tsx | 17 ++++++- packages/app/src/ui/layout/Wrapper.tsx | 49 +++++++++++++++---- .../app/src/ui/modal/ModalCloseButton.tsx | 2 +- 11 files changed, 80 insertions(+), 35 deletions(-) diff --git a/packages/app/src/components/import/index.tsx b/packages/app/src/components/import/index.tsx index a594b08e35..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 } 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'; @@ -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 6799ad5e78..f29c1a1896 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'; @@ -99,11 +99,11 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => { setCreateWorkspaceOpen(true); }} > - + - + New workspace 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/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/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 { 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, 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; 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 = ({ ) : ( - + );