From 2d18e8f558fd0d1833b5ae9629a559f86a2e4bbe Mon Sep 17 00:00:00 2001 From: mitsuha Date: Thu, 11 Aug 2022 16:17:02 +0800 Subject: [PATCH] improvement: 1.left toolbar hover style#148; --- .../workspace/docs/collapsible-page-tree.tsx | 23 ++++------ .../pages/workspace/docs/workspace-name.tsx | 44 ++++++++++--------- .../src/lib/collapsible-title/index.tsx | 6 +-- .../EditorBoardSwitcher/StatusTrack.tsx | 1 - .../layout/src/header/LayoutHeader.tsx | 5 ++- .../activities/activities.tsx | 7 ++- .../workspace-sidebar/dot-icon/DotIcon.tsx | 9 ++++ .../src/workspace-sidebar/dot-icon/index.ts | 1 + .../workspace-sidebar/page-tree/DndTree.tsx | 2 +- .../workspace-sidebar/page-tree/PageTree.tsx | 6 +-- .../page-tree/tree-item/TreeItem.tsx | 18 ++++---- .../page-tree/tree-item/styles.ts | 13 +++--- 12 files changed, 72 insertions(+), 63 deletions(-) create mode 100644 libs/components/layout/src/workspace-sidebar/dot-icon/DotIcon.tsx create mode 100644 libs/components/layout/src/workspace-sidebar/dot-icon/index.ts diff --git a/apps/ligo-virgo/src/pages/workspace/docs/collapsible-page-tree.tsx b/apps/ligo-virgo/src/pages/workspace/docs/collapsible-page-tree.tsx index 913f4024c9..d379105835 100644 --- a/apps/ligo-virgo/src/pages/workspace/docs/collapsible-page-tree.tsx +++ b/apps/ligo-virgo/src/pages/workspace/docs/collapsible-page-tree.tsx @@ -8,6 +8,7 @@ import { usePageTree, } from '@toeverything/components/layout'; import { + IconButton, MuiBox as Box, MuiCollapse as Collapse, styled, @@ -27,6 +28,7 @@ const StyledBtn = styled('div')({ cursor: 'pointer', userSelect: 'none', flex: 1, + marginLeft: '12px', }); export type CollapsiblePageTreeProps = { @@ -70,7 +72,7 @@ export function CollapsiblePageTree(props: CollapsiblePageTreeProps) { display: 'flex', justifyContent: 'space-between', alignItems: 'center', - paddingRight: 1, + paddingRight: '12px', '&:hover': { background: '#f5f7f8', borderRadius: '5px', @@ -80,24 +82,17 @@ export function CollapsiblePageTree(props: CollapsiblePageTreeProps) { onMouseLeave={() => setNewPageBtnVisible(false)} > setOpen(prev => !prev)}> - {open ? ( - - ) : ( - - )} {title} {newPageBtnVisible && ( - + > + + )} {children ? ( diff --git a/apps/ligo-virgo/src/pages/workspace/docs/workspace-name.tsx b/apps/ligo-virgo/src/pages/workspace/docs/workspace-name.tsx index 6311497161..67a36e1cee 100644 --- a/apps/ligo-virgo/src/pages/workspace/docs/workspace-name.tsx +++ b/apps/ligo-virgo/src/pages/workspace/docs/workspace-name.tsx @@ -1,13 +1,16 @@ -import { - styled, - MuiOutlinedInput as OutlinedInput, -} from '@toeverything/components/ui'; +import { styled, Input } from '@toeverything/components/ui'; import { PinIcon } from '@toeverything/components/icons'; import { useUserAndSpaces, useShowSpaceSidebar, } from '@toeverything/datasource/state'; -import React, { useCallback, useEffect, useState } from 'react'; +import React, { + ChangeEvent, + KeyboardEvent, + useCallback, + useEffect, + useState, +} from 'react'; import { services } from '@toeverything/datasource/db-service'; import { Logo } from './components/logo/Logo'; @@ -124,24 +127,24 @@ export const WorkspaceName = () => { }; }, [currentSpaceId, fetchWorkspaceName]); - const handleKeyDown = useCallback( - (e: React.KeyboardEvent) => { - if (e.key === 'Enter') { - e.stopPropagation(); - e.preventDefault(); - setInRename(false); - } - }, - [] - ); + const handleKeyDown = useCallback((e: KeyboardEvent) => { + if (e.key === 'Enter') { + e.stopPropagation(); + e.preventDefault(); + setInRename(false); + } + }, []); const handleChange = useCallback( - (e: React.ChangeEvent) => { - services.api.userConfig.setWorkspaceName( + async (e: ChangeEvent) => { + const name = e.target.value; + + await setWorkspaceName(name); + await services.api.userConfig.setWorkspaceName( currentSpaceId, - e.currentTarget.value + name ); }, - [] + [currentSpaceId] ); return ( @@ -165,7 +168,8 @@ export const WorkspaceName = () => { {inRename ? ( - setOpen(prev => !prev)}> - {open ? ( - - ) : ( - - )}
{ return { width: '64px', height: '32px', - backgroundColor: theme.affine.palette.textHover, border: '1px solid #ECF1FB', borderRadius: '8px', cursor: 'pointer', diff --git a/libs/components/layout/src/header/LayoutHeader.tsx b/libs/components/layout/src/header/LayoutHeader.tsx index 978b7f8dfe..85e715733b 100644 --- a/libs/components/layout/src/header/LayoutHeader.tsx +++ b/libs/components/layout/src/header/LayoutHeader.tsx @@ -31,6 +31,7 @@ export const LayoutHeader = () => { size="large" hoverColor={'transparent'} disabled={true} + style={{ cursor: 'not-allowed' }} > @@ -124,11 +125,11 @@ const StyledHelper = styled('div')({ alignItems: 'center', }); -const StyledShare = styled(MuiButton)<{ disabled?: boolean }>({ +const StyledShare = styled('div')<{ disabled?: boolean }>({ padding: '10px 12px', fontWeight: 600, fontSize: '14px', - cursor: 'pointer', + cursor: 'not-allowed', color: '#98ACBD', textTransform: 'none', /* disabled for current time */ diff --git a/libs/components/layout/src/workspace-sidebar/activities/activities.tsx b/libs/components/layout/src/workspace-sidebar/activities/activities.tsx index a532d9bd02..50c552c0ad 100644 --- a/libs/components/layout/src/workspace-sidebar/activities/activities.tsx +++ b/libs/components/layout/src/workspace-sidebar/activities/activities.tsx @@ -10,9 +10,10 @@ import { } from '@toeverything/components/ui'; import { useNavigate } from 'react-router'; import { formatDistanceToNow } from 'date-fns'; +import { DotIcon } from '../dot-icon'; const StyledWrapper = styled('div')({ - paddingLeft: '12px', + width: '100%', span: { textOverflow: 'ellipsis', overflow: 'hidden', @@ -22,8 +23,8 @@ const StyledWrapper = styled('div')({ display: 'flex', alignItems: 'center', justifyContent: 'space-between', - paddingRight: '20px', whiteSpace: 'nowrap', + paddingLeft: '12px', '&:hover': { background: '#f5f7f8', borderRadius: '5px', @@ -106,6 +107,8 @@ export const Activities = () => { const { id, title, updated } = item; return ( + + { navigate(`/${currentSpaceId}/${id}`); diff --git a/libs/components/layout/src/workspace-sidebar/dot-icon/DotIcon.tsx b/libs/components/layout/src/workspace-sidebar/dot-icon/DotIcon.tsx new file mode 100644 index 0000000000..4a86326d4c --- /dev/null +++ b/libs/components/layout/src/workspace-sidebar/dot-icon/DotIcon.tsx @@ -0,0 +1,9 @@ +import { PageInPageTreeIcon } from '@toeverything/components/icons'; + +export const DotIcon = () => { + return ( + + ); +}; diff --git a/libs/components/layout/src/workspace-sidebar/dot-icon/index.ts b/libs/components/layout/src/workspace-sidebar/dot-icon/index.ts new file mode 100644 index 0000000000..5ee35a6978 --- /dev/null +++ b/libs/components/layout/src/workspace-sidebar/dot-icon/index.ts @@ -0,0 +1 @@ +export { DotIcon } from './DotIcon'; diff --git a/libs/components/layout/src/workspace-sidebar/page-tree/DndTree.tsx b/libs/components/layout/src/workspace-sidebar/page-tree/DndTree.tsx index 57d7643bba..40991b930c 100755 --- a/libs/components/layout/src/workspace-sidebar/page-tree/DndTree.tsx +++ b/libs/components/layout/src/workspace-sidebar/page-tree/DndTree.tsx @@ -44,7 +44,7 @@ export type DndTreeProps = { */ export function DndTree(props: DndTreeProps) { const { - indentationWidth = 12, + indentationWidth = 20, collapsible, removable, showDragIndicator, diff --git a/libs/components/layout/src/workspace-sidebar/page-tree/PageTree.tsx b/libs/components/layout/src/workspace-sidebar/page-tree/PageTree.tsx index d40442ce0e..b2ea531e53 100755 --- a/libs/components/layout/src/workspace-sidebar/page-tree/PageTree.tsx +++ b/libs/components/layout/src/workspace-sidebar/page-tree/PageTree.tsx @@ -3,10 +3,8 @@ import { DndTree } from './DndTree'; import { useDndTreeAutoUpdate } from './use-page-tree'; const Root = styled('div')({ - minWidth: 160, - maxWidth: 260, - marginLeft: 18, - marginRight: 6, + minWidth: '160px', + maxWidth: '276px', }); export const PageTree = () => { diff --git a/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/TreeItem.tsx b/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/TreeItem.tsx index 1a084d7b3e..e2c0c7def6 100755 --- a/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/TreeItem.tsx +++ b/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/TreeItem.tsx @@ -8,6 +8,7 @@ import { useParams } from 'react-router-dom'; import { useFlag } from '@toeverything/datasource/feature-flags'; import MoreActions from './MoreActions'; +import { DotIcon } from '../../dot-icon'; import { ActionButton, Counter, @@ -76,24 +77,25 @@ export const TreeItem = forwardRef( ghost={ghost} disableSelection={disableSelection} disableInteraction={disableInteraction} - spacing={`${indentationWidth * depth}px`} + spacing={`${indentationWidth * depth + 12}px`} + active={pageId === page_id} {...props} > - {childCount !== 0 && - (collapsed ? ( + {childCount !== 0 ? ( + collapsed ? ( ) : ( - ))} + ) + ) : ( + + )} - + {value} {BooleanPageTreeItemMoreActions && ( diff --git a/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/styles.ts b/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/styles.ts index e05415ce81..0040e5bef7 100644 --- a/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/styles.ts +++ b/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/styles.ts @@ -15,11 +15,14 @@ export const Wrapper = styled('li')<{ indicator?: boolean; disableSelection?: boolean; disableInteraction?: boolean; + active?: boolean; }>` box-sizing: border-box; padding-left: ${({ spacing }) => spacing}; list-style: none; font-size: 14px; + background-color: ${({ active }) => (active ? '#f5f7f8' : 'transparent')}; + border-radius: 5px; ${({ clone, disableSelection }) => (clone || disableSelection) && @@ -126,8 +129,6 @@ export const ActionButton = styled('button')<{ fill?: string; }>` display: flex; - width: 12px; - padding: 0 15px; align-items: center; justify-content: center; flex: 0 0 auto; @@ -141,9 +142,10 @@ export const ActionButton = styled('button')<{ -webkit-tap-highlight-color: transparent; svg { + width: 20px; + height: 20px; flex: 0 0 auto; margin: auto; - height: 100%; overflow: visible; fill: #919eab; } @@ -182,8 +184,7 @@ export const TextLink = styled(Link, { appearance: none; text-decoration: none; user-select: none; - color: ${({ theme, active }) => - active ? theme.affine.palette.primary : 'unset'}; + color: #4c6275; `; export const TreeItemContent = styled('div')` @@ -195,7 +196,7 @@ export const TreeItemContent = styled('div')` align-items: center; justify-content: space-around; color: #4c6275; - padding-right: 0.5rem; + padding-right: 12px; overflow: hidden; &:hover {