diff --git a/apps/web/package.json b/apps/web/package.json index f2df8cba19..f9f66740eb 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -18,7 +18,7 @@ "@affine/workspace": "workspace:*", "@blocksuite/blocks": "0.5.0-20230324040005-14417c2", "@blocksuite/editor": "0.5.0-20230324040005-14417c2", - "@blocksuite/icons": "2.0.23", + "@blocksuite/icons": "latest", "@blocksuite/store": "0.5.0-20230324040005-14417c2", "@emotion/cache": "^11.10.5", "@emotion/react": "^11.10.6", diff --git a/apps/web/src/components/blocksuite/block-suite-page-list/page-list/OperationCell.tsx b/apps/web/src/components/blocksuite/block-suite-page-list/page-list/OperationCell.tsx index d3a3fa84b0..e5abfd7029 100644 --- a/apps/web/src/components/blocksuite/block-suite-page-list/page-list/OperationCell.tsx +++ b/apps/web/src/components/blocksuite/block-suite-page-list/page-list/OperationCell.tsx @@ -79,7 +79,7 @@ export const OperationCell: React.FC = ({ disablePortal={true} trigger="click" > - + @@ -127,7 +127,6 @@ export const TrashOperationCell: React.FC = ({ { onRestorePage(id); @@ -139,7 +138,6 @@ export const TrashOperationCell: React.FC = ({ { setOpen(true); }} diff --git a/apps/web/src/components/blocksuite/block-suite-page-list/page-list/index.tsx b/apps/web/src/components/blocksuite/block-suite-page-list/page-list/index.tsx index 79fb8f56e3..90f4734f9b 100644 --- a/apps/web/src/components/blocksuite/block-suite-page-list/page-list/index.tsx +++ b/apps/web/src/components/blocksuite/block-suite-page-list/page-list/index.tsx @@ -56,7 +56,6 @@ const FavoriteTag: React.FC = ({ placement="top-start" > { e.stopPropagation(); @@ -88,13 +87,12 @@ type PageListProps = { }; const filter = { - all: (pageMeta: PageMeta, allMetas: PageMeta[]) => !pageMeta.trash, + all: (pageMeta: PageMeta) => !pageMeta.trash, trash: (pageMeta: PageMeta, allMetas: PageMeta[]) => { const parentMeta = allMetas.find(m => m.subpageIds?.includes(pageMeta.id)); return !parentMeta?.trash && pageMeta.trash; }, - favorite: (pageMeta: PageMeta, allMetas: PageMeta[]) => - pageMeta.favorite && !pageMeta.trash, + favorite: (pageMeta: PageMeta) => pageMeta.favorite && !pageMeta.trash, }; export const PageList: React.FC = ({ diff --git a/apps/web/src/components/blocksuite/header/styles.ts b/apps/web/src/components/blocksuite/header/styles.ts index 63b835f445..553704e736 100644 --- a/apps/web/src/components/blocksuite/header/styles.ts +++ b/apps/web/src/components/blocksuite/header/styles.ts @@ -8,16 +8,16 @@ import { export const StyledHeaderContainer = styled('div')<{ hasWarning: boolean }>( ({ hasWarning }) => { return { - height: hasWarning ? '96px' : '60px', + height: hasWarning ? '96px' : '48px', }; } ); export const StyledHeader = styled('div')<{ hasWarning: boolean }>( ({ theme }) => { return { - height: '64px', + height: '48px', width: '100%', - padding: '0 28px', + padding: '0 20px', ...displayFlex('space-between', 'center'), background: theme.colors.pageBackground, transition: 'background-color 0.5s', diff --git a/apps/web/src/components/pure/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx b/apps/web/src/components/pure/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx index 6c357afe4d..ac24e8a5d3 100644 --- a/apps/web/src/components/pure/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx +++ b/apps/web/src/components/pure/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx @@ -1,9 +1,16 @@ +import { CloudWorkspaceIcon, LocalWorkspaceIcon } from '@blocksuite/icons'; import type React from 'react'; +import { useCurrentWorkspace } from '../../../../hooks/current/use-current-workspace'; import { useBlockSuiteWorkspaceName } from '../../../../hooks/use-blocksuite-workspace-name'; import type { RemWorkspace } from '../../../../shared'; import { WorkspaceAvatar } from '../../workspace-avatar'; -import { SelectorWrapper, WorkspaceName } from './styles'; +import { + StyledSelectorContainer, + StyledSelectorWrapper, + StyledWorkspaceName, + StyledWorkspaceStatus, +} from './styles'; export type WorkspaceSelectorProps = { currentWorkspace: RemWorkspace | null; @@ -17,19 +24,32 @@ export const WorkspaceSelector: React.FC = ({ const [name] = useBlockSuiteWorkspaceName( currentWorkspace?.blockSuiteWorkspace ?? null ); + const [workspace] = useCurrentWorkspace(); return ( - <> - - - {name} - - + + + + + {name} + + {workspace && ( + + {workspace.flavour === 'local' ? ( + + ) : ( + + )} + {workspace.flavour === 'local' ? 'Local' : 'AFFiNE Cloud'} + + )} + + ); }; diff --git a/apps/web/src/components/pure/workspace-slider-bar/WorkspaceSelector/styles.ts b/apps/web/src/components/pure/workspace-slider-bar/WorkspaceSelector/styles.ts index aee11c906a..70718b28e4 100644 --- a/apps/web/src/components/pure/workspace-slider-bar/WorkspaceSelector/styles.ts +++ b/apps/web/src/components/pure/workspace-slider-bar/WorkspaceSelector/styles.ts @@ -1,13 +1,14 @@ -import { MuiAvatar, textEllipsis } from '@affine/component'; +import { displayFlex, textEllipsis } from '@affine/component'; import { styled } from '@affine/component'; -export const SelectorWrapper = styled('div')(({ theme }) => { +export const StyledSelectorContainer = styled('div')(({ theme }) => { return { marginTop: '4px', - height: '56px', + height: '58px', display: 'flex', alignItems: 'center', - padding: '0 44px 0 12px', - borderRadius: '5px', + padding: '0 6px', + marginBottom: '16px', + borderRadius: '8px', color: theme.colors.textColor, position: 'relative', ':hover': { @@ -17,17 +18,31 @@ export const SelectorWrapper = styled('div')(({ theme }) => { }; }); -export const Avatar = styled(MuiAvatar)({ - height: '28px', - width: '28px', -}); - -export const WorkspaceName = styled('span')(({ theme }) => { +export const StyledSelectorWrapper = styled('div')(() => { return { - marginLeft: '12px', - fontSize: theme.font.h6, - fontWeight: 500, + marginLeft: '8px', flexGrow: 1, + overflow: 'hidden', + }; +}); +export const StyledWorkspaceName = styled('div')(() => { + return { + lineHeight: '24px', + fontWeight: 600, ...textEllipsis(1), }; }); + +export const StyledWorkspaceStatus = styled('div')(({ theme }) => { + return { + height: '22px', + ...displayFlex('flex-start', 'center'), + fontSize: theme.font.sm, + color: theme.colors.secondaryTextColor, + svg: { + color: theme.colors.iconColor, + fontSize: theme.font.base, + marginRight: '4px', + }, + }; +}); diff --git a/apps/web/src/components/pure/workspace-slider-bar/favorite/favorite-list.tsx b/apps/web/src/components/pure/workspace-slider-bar/favorite/favorite-list.tsx new file mode 100644 index 0000000000..c9fbeab7b2 --- /dev/null +++ b/apps/web/src/components/pure/workspace-slider-bar/favorite/favorite-list.tsx @@ -0,0 +1,70 @@ +import { MuiCollapse } from '@affine/component'; +import { useTranslation } from '@affine/i18n'; +import { EdgelessIcon, PageIcon } from '@blocksuite/icons'; +import { useAtomValue } from 'jotai'; +import { useRouter } from 'next/router'; +import { useMemo } from 'react'; + +import { workspacePreferredModeAtom } from '../../../../atoms'; +import type { FavoriteListProps } from '../index'; +import { StyledCollapseItem } from '../shared-styles'; +export const FavoriteList = ({ + pageMeta, + openPage, + showList, +}: FavoriteListProps) => { + const router = useRouter(); + const { t } = useTranslation(); + const record = useAtomValue(workspacePreferredModeAtom); + + const favoriteList = useMemo( + () => pageMeta.filter(p => p.favorite && !p.trash), + [pageMeta] + ); + + return ( + + {favoriteList.map((pageMeta, index) => { + const active = router.query.pageId === pageMeta.id; + return ( +
+ { + if (ref && active) { + ref.scrollIntoView({ behavior: 'smooth' }); + } + }} + onClick={() => { + if (active) { + return; + } + openPage(pageMeta.id); + }} + > + {record[pageMeta.id] === 'edgeless' ? ( + + ) : ( + + )} + {pageMeta.title || 'Untitled'} + +
+ ); + })} + {favoriteList.length === 0 && ( + {t('No item')} + )} + + ); +}; + +export default FavoriteList; diff --git a/apps/web/src/components/pure/workspace-slider-bar/favorite/index.tsx b/apps/web/src/components/pure/workspace-slider-bar/favorite/index.tsx new file mode 100644 index 0000000000..068471f551 --- /dev/null +++ b/apps/web/src/components/pure/workspace-slider-bar/favorite/index.tsx @@ -0,0 +1,62 @@ +import { useTranslation } from '@affine/i18n'; +import { ArrowDownSmallIcon, FavoriteIcon } from '@blocksuite/icons'; +import { useCallback, useState } from 'react'; + +import { usePageMeta } from '../../../../hooks/use-page-meta'; +import type { WorkSpaceSliderBarProps } from '../index'; +import { StyledCollapseButton, StyledListItem } from '../shared-styles'; +import { StyledLink } from '../style'; +import FavoriteList from './favorite-list'; +export const Favorite = ({ + currentPath, + paths, + currentPageId, + openPage, + currentWorkspace, +}: Pick< + WorkSpaceSliderBarProps, + 'currentPath' | 'paths' | 'currentPageId' | 'openPage' | 'currentWorkspace' +>) => { + const currentWorkspaceId = currentWorkspace?.id || null; + const pageMeta = usePageMeta(currentWorkspace?.blockSuiteWorkspace ?? null); + + const [showSubFavorite, setOpenSubFavorite] = useState(true); + + const { t } = useTranslation(); + + return ( + <> + + { + setOpenSubFavorite(!showSubFavorite); + }, [showSubFavorite])} + collapse={showSubFavorite} + > + + + + + {t('Favorites')} + + + + + ); +}; + +export default Favorite; diff --git a/apps/web/src/components/pure/workspace-slider-bar/index.tsx b/apps/web/src/components/pure/workspace-slider-bar/index.tsx index fbefb4a646..a337fd9c95 100644 --- a/apps/web/src/components/pure/workspace-slider-bar/index.tsx +++ b/apps/web/src/components/pure/workspace-slider-bar/index.tsx @@ -1,35 +1,29 @@ -import { MuiCollapse } from '@affine/component'; -import { IconButton } from '@affine/component'; import { config } from '@affine/env'; import { useTranslation } from '@affine/i18n'; import { - ArrowDownSmallIcon, DeleteTemporarilyIcon, - FavoriteIcon, FolderIcon, PlusIcon, SearchIcon, SettingsIcon, } from '@blocksuite/icons'; import type { Page, PageMeta } from '@blocksuite/store'; -import Link from 'next/link'; -import { useRouter } from 'next/router'; import type React from 'react'; -import { useCallback, useMemo, useState } from 'react'; +import { useCallback } from 'react'; import { useSidebarStatus } from '../../../hooks/affine/use-sidebar-status'; import { usePageMeta } from '../../../hooks/use-page-meta'; import type { RemWorkspace } from '../../../shared'; import { SidebarSwitch } from '../../affine/sidebar-switch'; +import Favorite from './favorite'; import { Pivot } from './pivot'; +import { StyledListItem } from './shared-styles'; import { StyledLink, - StyledListItem, StyledNewPageButton, - StyledSidebarWrapper, + StyledSidebarSwitchWrapper, + StyledSlidebarWrapper, StyledSliderBar, - StyledSliderBarWrapper, - StyledSubListItem, } from './style'; import { WorkspaceSelector } from './WorkspaceSelector'; @@ -40,57 +34,6 @@ export type FavoriteListProps = { pageMeta: PageMeta[]; }; -const FavoriteList: React.FC = ({ - pageMeta, - openPage, - showList, -}) => { - const router = useRouter(); - const { t } = useTranslation(); - const favoriteList = useMemo( - () => pageMeta.filter(p => p.favorite && !p.trash), - [pageMeta] - ); - - return ( - - {favoriteList.map((pageMeta, index) => { - const active = router.query.pageId === pageMeta.id; - return ( -
- { - if (ref && active) { - ref.scrollIntoView({ behavior: 'smooth' }); - } - }} - onClick={() => { - if (active) { - return; - } - openPage(pageMeta.id); - }} - > - {pageMeta.title || 'Untitled'} - -
- ); - })} - {favoriteList.length === 0 && ( - {t('No item')} - )} - - ); -}; - export type WorkSpaceSliderBarProps = { isPublicWorkspace: boolean; onOpenQuickSearchModal: () => void; @@ -120,7 +63,6 @@ export const WorkSpaceSliderBar: React.FC = ({ onOpenWorkspaceListModal, }) => { const currentWorkspaceId = currentWorkspace?.id || null; - const [showSubFavorite, setOpenSubFavorite] = useState(true); const { t } = useTranslation(); const [sidebarOpen] = useSidebarStatus(); const pageMeta = usePageMeta(currentWorkspace?.blockSuiteWorkspace ?? null); @@ -131,15 +73,15 @@ export const WorkSpaceSliderBar: React.FC = ({ return ( <> - + - + - + = ({ { onOpenQuickSearchModal(); }, [onOpenQuickSearchModal])} @@ -155,70 +96,16 @@ export const WorkSpaceSliderBar: React.FC = ({ {t('Quick search')} - - - - {t('All pages')} - - - {config.enableSubpage && !!currentWorkspace && ( - - )} - - - - - {t('Favorites')} - - { - setOpenSubFavorite(!showSubFavorite); - }, [showSubFavorite])} - > - - - - = ({ - {/* { - setOpenWorkspaceSetting(false); - }} - /> */} - {/* TODO: will finish the feature next version */} - {/* { - triggerImportModal(); - }} + - {t('Import')} - */} + + + {t('All pages')} + + - + {config.enableSubpage && !!currentWorkspace && ( + + )} + + - {t('Trash')} - - - - {t('New Page')} - - + + + + + + {t('New Page')} + ); diff --git a/apps/web/src/components/pure/workspace-slider-bar/pivot/Pivot.tsx b/apps/web/src/components/pure/workspace-slider-bar/pivot/Pivot.tsx index c0a8ef6d1c..bfdb121b85 100644 --- a/apps/web/src/components/pure/workspace-slider-bar/pivot/Pivot.tsx +++ b/apps/web/src/components/pure/workspace-slider-bar/pivot/Pivot.tsx @@ -1,5 +1,6 @@ -import { IconButton, MuiCollapse, TreeView } from '@affine/component'; +import { MuiCollapse, TreeView } from '@affine/component'; import { DebugLogger } from '@affine/debug'; +import { useTranslation } from '@affine/i18n'; import { ArrowDownSmallIcon, FolderIcon } from '@blocksuite/icons'; import type { PageMeta } from '@blocksuite/store'; import { nanoid } from '@blocksuite/store'; @@ -8,7 +9,7 @@ import { useCallback, useMemo, useState } from 'react'; import { useBlockSuiteWorkspaceHelper } from '../../../../hooks/use-blocksuite-workspace-helper'; import { usePageMetaHelper } from '../../../../hooks/use-page-meta'; import type { RemWorkspace } from '../../../../shared'; -import { StyledListItem } from '../style'; +import { StyledCollapseButton, StyledListItem } from '../shared-styles'; import type { TreeNode } from './types'; import { flattenToTree } from './utils'; const logger = new DebugLogger('pivot'); @@ -178,6 +179,7 @@ export const PivotInternal = ({ onAdd={handleAdd} onDelete={handleDelete} onDrop={handleDrop} + indent={16} /> ); }; @@ -191,32 +193,30 @@ export const Pivot = ({ openPage: (pageId: string) => void; allMetas: PageMeta[]; }) => { + const { t } = useTranslation(); + const [showPivot, setShowPivot] = useState(true); return ( <> - - Pivot - { setShowPivot(!showPivot); }, [showPivot])} + collapse={showPivot} > - - + + + + {t('Pivots')} diff --git a/apps/web/src/components/pure/workspace-slider-bar/pivot/TreeNodeRender.tsx b/apps/web/src/components/pure/workspace-slider-bar/pivot/TreeNodeRender.tsx index e640990a5d..b33fd74933 100644 --- a/apps/web/src/components/pure/workspace-slider-bar/pivot/TreeNodeRender.tsx +++ b/apps/web/src/components/pure/workspace-slider-bar/pivot/TreeNodeRender.tsx @@ -1,12 +1,18 @@ import { IconButton } from '@affine/component'; import { ArrowDownSmallIcon, - DeleteTemporarilyIcon, - PlusIcon, + EdgelessIcon, + // DeleteTemporarilyIcon, + // PlusIcon, + MoreVerticalIcon, + PageIcon, } from '@blocksuite/icons'; +import type { PageMeta } from '@blocksuite/store'; +import { useAtomValue } from 'jotai'; import { useRouter } from 'next/router'; -import { StyledCollapsedButton, StyledPivotItem } from './styles'; +import { workspacePreferredModeAtom } from '../../../../atoms'; +import { StyledCollapseButton, StyledCollapseItem } from '../shared-styles'; import type { TreeNode } from './types'; export const TreeNodeRender: TreeNode['render'] = ( @@ -14,12 +20,17 @@ export const TreeNodeRender: TreeNode['render'] = ( { onAdd, onDelete, collapsed, setCollapsed }, extendProps ) => { - const { openPage } = extendProps as { openPage: (pageId: string) => void }; + const { openPage, pageMeta } = extendProps as { + openPage: (pageId: string) => void; + pageMeta: PageMeta; + }; + const record = useAtomValue(workspacePreferredModeAtom); const router = useRouter(); const active = router.query.pageId === node.id; + return ( - { if (active) { return; @@ -28,42 +39,49 @@ export const TreeNodeRender: TreeNode['render'] = ( }} active={active} > - { e.stopPropagation(); setCollapsed(!collapsed); }} - size="small" > - - + + + {record[pageMeta.id] === 'edgeless' ? : } {node.title || 'Untitled'} { - e.stopPropagation(); - onAdd(); - }} size="small" - className="pivot-item-button" - > - - - { e.stopPropagation(); + }} + > + + - onDelete(); - }} - size="small" - className="pivot-item-button" - > - - - + {/* {*/} + {/* e.stopPropagation();*/} + {/* onAdd();*/} + {/* }}*/} + {/* size="small"*/} + {/* className="operation-button"*/} + {/*>*/} + {/* */} + {/**/} + {/* {*/} + {/* e.stopPropagation();*/} + + {/* onDelete();*/} + {/* }}*/} + {/* size="small"*/} + {/* className="operation-button"*/} + {/*>*/} + {/* */} + {/**/} + ); }; diff --git a/apps/web/src/components/pure/workspace-slider-bar/pivot/styles.ts b/apps/web/src/components/pure/workspace-slider-bar/pivot/styles.ts index 53db85af7a..cbaabc9cba 100644 --- a/apps/web/src/components/pure/workspace-slider-bar/pivot/styles.ts +++ b/apps/web/src/components/pure/workspace-slider-bar/pivot/styles.ts @@ -1,35 +1,17 @@ -import { - displayFlex, - IconButton, - styled, - textEllipsis, -} from '@affine/component'; +import { IconButton, styled } from '@affine/component'; -export const StyledPivotItem = styled('div')<{ active: boolean }>( - ({ active, theme }) => { - return { - width: '100%', - height: '32px', - ...displayFlex('flex-start', 'center'), - paddingLeft: '24px', - position: 'relative', - color: active ? theme.colors.primaryColor : theme.colors.textColor, - cursor: 'pointer', - span: { - flexGrow: '1', - ...textEllipsis(1), - }, - '.pivot-item-button': { - display: 'none', - }, - ':hover': { - '.pivot-item-button': { - display: 'flex', - }, - }, - }; - } -); +export const StyledOperationButton = styled('button')(({ theme }) => { + return { + height: '20px', + width: '20px', + fontSize: '20px', + color: theme.colors.iconColor, + display: 'none', + ':hover': { + background: theme.colors.hoverBackground, + }, + }; +}); export const StyledCollapsedButton = styled(IconButton, { shouldForwardProp: prop => { diff --git a/apps/web/src/components/pure/workspace-slider-bar/pivot/utils.ts b/apps/web/src/components/pure/workspace-slider-bar/pivot/utils.ts index 837e402bbd..be785620f8 100644 --- a/apps/web/src/components/pure/workspace-slider-bar/pivot/utils.ts +++ b/apps/web/src/components/pure/workspace-slider-bar/pivot/utils.ts @@ -32,7 +32,11 @@ export const flattenToTree = ( const returnedMeta: TreeNode = { ...internalMeta, children: helper(childrenMetas), - render: (node, props) => TreeNodeRender!(node, props, renderProps), + render: (node, props) => + TreeNodeRender!(node, props, { + pageMeta: internalMeta, + ...renderProps, + }), }; // @ts-ignore returnedMetas.push(returnedMeta); diff --git a/apps/web/src/components/pure/workspace-slider-bar/shared-styles.ts b/apps/web/src/components/pure/workspace-slider-bar/shared-styles.ts new file mode 100644 index 0000000000..6600d9f17b --- /dev/null +++ b/apps/web/src/components/pure/workspace-slider-bar/shared-styles.ts @@ -0,0 +1,98 @@ +import { displayFlex, styled, textEllipsis } from '@affine/component'; + +export const StyledListItem = styled('div')<{ + active?: boolean; + disabled?: boolean; +}>(({ theme, active, disabled }) => { + return { + height: '32px', + color: active ? theme.colors.primaryColor : theme.colors.textColor, + padding: '0 16px', + borderRadius: '8px', + cursor: 'pointer', + marginBottom: '4px', + position: 'relative', + ...displayFlex('flex-start', 'center'), + ...(disabled + ? { + cursor: 'not-allowed', + color: theme.colors.borderColor, + } + : {}), + + '> svg, a > svg': { + fontSize: '20px', + marginRight: '12px', + color: active ? theme.colors.primaryColor : theme.colors.iconColor, + }, + ':hover:not([disabled])': { + backgroundColor: theme.colors.hoverBackground, + }, + }; +}); + +export const StyledCollapseButton = styled('button')<{ + collapse: boolean; + show?: boolean; +}>(({ collapse, show = true, theme }) => { + return { + width: '16px', + height: '16px', + fontSize: '16px', + position: 'absolute', + left: '0', + top: '0', + bottom: '0', + margin: 'auto', + color: theme.colors.iconColor, + opacity: '.6', + display: show ? 'block' : 'none', + svg: { + transform: `rotate(${collapse ? '0' : '-90'}deg)`, + }, + }; +}); + +export const StyledCollapseItem = styled('button')<{ + disable?: boolean; + active?: boolean; +}>(({ disable = false, active = false, theme }) => { + return { + width: '100%', + height: '32px', + borderRadius: '8px', + ...displayFlex('flex-start', 'center'), + padding: '0 2px 0 16px', + position: 'relative', + color: disable + ? theme.colors.disableColor + : active + ? theme.colors.primaryColor + : theme.colors.textColor, + cursor: disable ? 'not-allowed' : 'pointer', + + span: { + flexGrow: '1', + textAlign: 'left', + ...textEllipsis(1), + }, + '> svg': { + fontSize: '20px', + marginRight: '8px', + flexShrink: '0', + color: active ? theme.colors.primaryColor : theme.colors.iconColor, + }, + '.operation-button': { + display: 'none', + }, + + ':hover': disable + ? {} + : { + backgroundColor: theme.colors.hoverBackground, + '.operation-button': { + display: 'flex', + }, + }, + }; +}); diff --git a/apps/web/src/components/pure/workspace-slider-bar/style.ts b/apps/web/src/components/pure/workspace-slider-bar/style.ts index fd733d4de9..3b0226a946 100644 --- a/apps/web/src/components/pure/workspace-slider-bar/style.ts +++ b/apps/web/src/components/pure/workspace-slider-bar/style.ts @@ -1,6 +1,5 @@ -import { displayFlex, styled, textEllipsis } from '@affine/component'; +import { displayFlex, styled } from '@affine/component'; import Link from 'next/link'; - export const StyledSliderBar = styled('div')<{ show: boolean }>( ({ theme, show }) => { return { @@ -13,60 +12,30 @@ export const StyledSliderBar = styled('div')<{ show: boolean }>( transition: 'width .15s, padding .15s', position: 'relative', zIndex: theme.zIndex.modal, - padding: show ? '0 12px' : '0', + padding: show ? '0 4px' : '0', flexShrink: 0, + display: 'flex', + flexDirection: 'column', }; } ); -export const StyledSidebarWrapper = styled('div')(() => { +export const StyledSidebarSwitchWrapper = styled('div')(() => { return { - position: 'absolute', - right: '12px', - top: '16px', - zIndex: 1, + height: '48px', + padding: '0 16px', + ...displayFlex('flex-start', 'center'), }; }); -export const StyledSliderBarWrapper = styled('div')(() => { +export const StyledSlidebarWrapper = styled('div')(() => { return { - height: '100%', + flexGrow: 1, overflowX: 'hidden', overflowY: 'auto', position: 'relative', }; }); -export const StyledListItem = styled('div')<{ - active?: boolean; - disabled?: boolean; -}>(({ theme, active, disabled }) => { - return { - height: '32px', - marginTop: '12px', - color: active ? theme.colors.primaryColor : theme.colors.textColor, - paddingLeft: '12px', - borderRadius: '5px', - cursor: 'pointer', - ...displayFlex('flex-start', 'center'), - ...(disabled - ? { - cursor: 'not-allowed', - color: theme.colors.borderColor, - } - : {}), - - '> svg': { - fontSize: '20px', - marginRight: '12px', - color: active ? theme.colors.primaryColor : theme.colors.iconColor, - }, - ':hover:not([disabled])': { - color: theme.colors.primaryColor, - backgroundColor: theme.colors.hoverBackground, - }, - }; -}); - -export const StyledLink = styled(Link)(({ theme }) => { +export const StyledLink = styled(Link)(() => { return { flexGrow: 1, textAlign: 'left', @@ -75,51 +44,25 @@ export const StyledLink = styled(Link)(({ theme }) => { ':visited': { color: 'inherit', }, - '>svg': { + }; +}); +export const StyledNewPageButton = styled('button')(({ theme }) => { + return { + height: '48px', + ...displayFlex('flex-start', 'center'), + borderTop: '1px solid', + borderColor: theme.colors.borderColor, + padding: '0 8px', + svg: { fontSize: '20px', - marginRight: '12px', color: theme.colors.iconColor, + marginRight: '8px', }, - }; -}); -export const StyledNewPageButton = styled(StyledListItem)(() => { - return { - position: 'absolute', - bottom: '24px', - left: '0', - right: '0', - margin: 'auto', ':hover': { - cursor: 'pointer', + color: theme.colors.primaryColor, + svg: { + color: theme.colors.primaryColor, + }, }, }; }); - -export const StyledSubListItem = styled('button')<{ - disable?: boolean; - active?: boolean; -}>(({ theme, disable, active }) => { - return { - width: '100%', - height: '32px', - marginTop: '4px', - color: disable - ? theme.colors.disableColor - : active - ? theme.colors.primaryColor - : theme.colors.textColor, - backgroundColor: active ? theme.colors.hoverBackground : 'unset', - - cursor: disable ? 'not-allowed' : 'pointer', - paddingLeft: '45px', - lineHeight: '32px', - textAlign: 'start', - ...textEllipsis(1), - ':hover': disable - ? {} - : { - color: theme.colors.primaryColor, - backgroundColor: theme.colors.hoverBackground, - }, - }; -}); diff --git a/packages/component/src/styles/theme.ts b/packages/component/src/styles/theme.ts index fc2b8c8400..302879d8ee 100644 --- a/packages/component/src/styles/theme.ts +++ b/packages/component/src/styles/theme.ts @@ -18,7 +18,7 @@ export const getLightTheme = ( colors: { primaryColor: '#5438FF', pageBackground: '#fff', - hoverBackground: '#F1F1F4', + hoverBackground: 'rgba(0,0,0,.04)', innerHoverBackground: '#E9E9EC', popoverBackground: '#fff', tooltipBackground: '#261499', @@ -97,7 +97,7 @@ export const getDarkTheme = ( colors: { primaryColor: '#5438FF', pageBackground: '#2c2c2c', - hoverBackground: '#3C3C42', + hoverBackground: 'rgba(0,0,0,.04)', innerHoverBackground: '#5A5A5A', popoverBackground: '#1F2021', tooltipBackground: '#0C0A15', diff --git a/packages/component/src/ui/button/IconButton.tsx b/packages/component/src/ui/button/IconButton.tsx index 9717851707..7953108571 100644 --- a/packages/component/src/ui/button/IconButton.tsx +++ b/packages/component/src/ui/button/IconButton.tsx @@ -1,5 +1,5 @@ import type { CSSProperties, HTMLAttributes, ReactElement } from 'react'; -import { Children, cloneElement, forwardRef } from 'react'; +import { forwardRef } from 'react'; import { StyledIconButton } from './styles'; const SIZE_SMALL = 'small' as const; @@ -9,7 +9,7 @@ const SIZE_NORMAL = 'normal' as const; const SIZE_CONFIG = { [SIZE_SMALL]: { iconSize: 16, - areaSize: 24, + areaSize: 20, }, [SIZE_MIDDLE]: { iconSize: 20, @@ -42,19 +42,14 @@ export type IconButtonProps = { export const IconButton = forwardRef( ( - { - size = 'normal', - iconSize = 'normal', - disabled = false, - children, - ...props - }, + { size = 'normal', iconSize, disabled = false, children, ...props }, ref ) => { + iconSize = size; const [width, height] = Array.isArray(size) ? size : [SIZE_CONFIG[size]['areaSize'], SIZE_CONFIG[size]['areaSize']]; - const [iconWidth, iconHeight] = Array.isArray(iconSize) + const [iconWidth] = Array.isArray(iconSize) ? iconSize : [SIZE_CONFIG[iconSize]['iconSize'], SIZE_CONFIG[iconSize]['iconSize']]; @@ -65,12 +60,10 @@ export const IconButton = forwardRef( width={width} height={height} borderRadius={iconWidth / 4} + fontSize={iconWidth} {...props} > - {cloneElement(Children.only(children), { - width: iconWidth, - height: iconHeight, - })} + {children} ); } diff --git a/packages/component/src/ui/button/styles.ts b/packages/component/src/ui/button/styles.ts index 7357fce208..fef2db9875 100644 --- a/packages/component/src/ui/button/styles.ts +++ b/packages/component/src/ui/button/styles.ts @@ -15,7 +15,7 @@ export const StyledIconButton = styled('button', { 'hoverBackground', 'hoverColor', 'hoverStyle', - 'darker', + 'fontSize', ].includes(prop as string); }, })<{ @@ -27,7 +27,7 @@ export const StyledIconButton = styled('button', { hoverColor?: string; hoverStyle?: CSSProperties; // In some cases, button is in a normal hover status, it should be darkened - darker?: boolean; + fontSize?: CSSProperties['fontSize']; }>( ({ theme, @@ -38,11 +38,12 @@ export const StyledIconButton = styled('button', { hoverBackground, hoverColor, hoverStyle, - darker = false, + fontSize, }) => { return { width, height, + fontSize, color: theme.colors.iconColor, ...displayInlineFlex('center', 'center'), position: 'relative', @@ -67,11 +68,7 @@ export const StyledIconButton = styled('button', { ':hover': { color: hoverColor ?? theme.colors.primaryColor, '::after': { - background: - hoverBackground || - (darker - ? theme.colors.innerHoverBackground - : theme.colors.hoverBackground), + background: hoverBackground || theme.colors.hoverBackground, }, ...(hoverStyle ?? {}), }, diff --git a/packages/component/src/ui/tree-view/TreeNode.tsx b/packages/component/src/ui/tree-view/TreeNode.tsx index 4b3cfb767f..c9c349dfd3 100644 --- a/packages/component/src/ui/tree-view/TreeNode.tsx +++ b/packages/component/src/ui/tree-view/TreeNode.tsx @@ -46,7 +46,7 @@ export const TreeNode = ({ allDrop = true, ...otherProps }: TreeNodeProps) => { - const { onAdd, onDelete, onDrop } = otherProps; + const { onAdd, onDelete, onDrop, indent } = otherProps; const [collapsed, setCollapsed] = useState(false); const [{ isDragging }, drag] = useDrag(() => ({ @@ -109,7 +109,7 @@ export const TreeNode = ({ )} - + {node.children && node.children.map((childNode, index) => ( { +export const StyledCollapse = styled(MuiCollapse)<{ + indent?: CSSProperties['paddingLeft']; +}>(({ indent = 12 }) => { return { - paddingLeft: '12px', + paddingLeft: indent, }; }); export const StyledTreeNodeItem = styled('div')<{ diff --git a/packages/component/src/ui/tree-view/types.ts b/packages/component/src/ui/tree-view/types.ts index 907a557ec1..80079ccec9 100644 --- a/packages/component/src/ui/tree-view/types.ts +++ b/packages/component/src/ui/tree-view/types.ts @@ -1,4 +1,4 @@ -import type { ReactNode } from 'react'; +import type { CSSProperties, ReactNode } from 'react'; export type Node = { id: string; @@ -16,6 +16,7 @@ export type Node = { } & N; type CommonProps = { + indent?: CSSProperties['paddingLeft']; onAdd?: (node: Node) => void; onDelete?: (node: Node) => void; onDrop?: ( diff --git a/packages/i18n/src/resources/en.json b/packages/i18n/src/resources/en.json index d8ac351fb4..7361f4d012 100644 --- a/packages/i18n/src/resources/en.json +++ b/packages/i18n/src/resources/en.json @@ -193,5 +193,6 @@ "Help and Feedback": "Help and Feedback", "Please make sure you are online": "Please make sure you are online", "Workspace Owner": "Workspace Owner", - "Members": "Members" + "Members": "Members", + "Pivots": "Pivots" } diff --git a/tests/libs/page-logic.ts b/tests/libs/page-logic.ts index c50fb662e8..2a488953e3 100644 --- a/tests/libs/page-logic.ts +++ b/tests/libs/page-logic.ts @@ -3,7 +3,7 @@ import type { Page } from '@playwright/test'; export async function newPage(page: Page) { await page.waitForSelector('v-line'); // fixme(himself65): if too fast, the page will crash - await page.getByTestId('sliderBar').getByText('New Page').click({ + await page.getByTestId('new-page-button').click({ delay: 100, }); await page.waitForSelector('v-line'); diff --git a/yarn.lock b/yarn.lock index c028cbae52..c73b9a5bdd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -227,7 +227,7 @@ __metadata: "@affine/workspace": "workspace:*" "@blocksuite/blocks": 0.5.0-20230324040005-14417c2 "@blocksuite/editor": 0.5.0-20230324040005-14417c2 - "@blocksuite/icons": 2.0.23 + "@blocksuite/icons": latest "@blocksuite/store": 0.5.0-20230324040005-14417c2 "@emotion/cache": ^11.10.5 "@emotion/react": ^11.10.6 @@ -1855,6 +1855,16 @@ __metadata: languageName: node linkType: hard +"@blocksuite/icons@npm:latest": + version: 2.0.26 + resolution: "@blocksuite/icons@npm:2.0.26" + peerDependencies: + "@types/react": ^18.0.25 + react: ^18.2.0 + checksum: bb0142cd503098ca1bd768401d7e4cc761027d7f60ac974f21bb368d3415e7ae2f13a128c83d4389d00aa18c523cd14bee53101e078c2a941186b98d6be7ba07 + languageName: node + linkType: hard + "@blocksuite/phasor@npm:0.5.0-20230324040005-14417c2": version: 0.5.0-20230324040005-14417c2 resolution: "@blocksuite/phasor@npm:0.5.0-20230324040005-14417c2"