From 5b682188a8a0c8845baf5c2fee756d84d7756276 Mon Sep 17 00:00:00 2001 From: mitsuha Date: Thu, 4 Aug 2022 17:20:03 +0800 Subject: [PATCH] opti: 1.adjust layout style; --- .../src/pages/workspace/docs/Page.tsx | 23 ++---- .../workspace/docs/collapsible-page-tree.tsx | 76 ++++++++++--------- .../src/lib/collapsible-title/index.tsx | 58 ++++++++------ .../activities/activities.tsx | 66 +++++++++------- .../workspace-sidebar/page-tree/DndTree.tsx | 2 +- .../page-tree/tree-item/TreeItem.tsx | 4 - .../page-tree/tree-item/tree-item.module.scss | 20 +---- 7 files changed, 123 insertions(+), 126 deletions(-) diff --git a/apps/ligo-virgo/src/pages/workspace/docs/Page.tsx b/apps/ligo-virgo/src/pages/workspace/docs/Page.tsx index 556ca606a7..9d5b1ac465 100644 --- a/apps/ligo-virgo/src/pages/workspace/docs/Page.tsx +++ b/apps/ligo-virgo/src/pages/workspace/docs/Page.tsx @@ -1,16 +1,9 @@ /* eslint-disable filename-rules/match */ -import { - useEffect, - useRef, - type UIEvent, - useState, - useLayoutEffect, -} from 'react'; +import { useEffect, useRef, type UIEvent, useState } from 'react'; import { useParams } from 'react-router'; import { MuiBox as Box, MuiCircularProgress as CircularProgress, - MuiDivider as Divider, styled, } from '@toeverything/components/ui'; import { AffineEditor } from '@toeverything/components/affine-editor'; @@ -54,11 +47,11 @@ export function Page(props: PageProps) { } ); - // await services.api.userConfig.addRecentPage( - // props.workspace, - // user.id, - // page_id - // ); + await services.api.userConfig.addRecentPage( + props.workspace, + user.id, + page_id + ); await services.api.editorBlock.clearUndoRedo(props.workspace); }; updateRecentPages(); @@ -94,14 +87,14 @@ export function Page(props: PageProps) { )}
- + {page_id ? : null}
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 069bc48857..ab903ab3ca 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 @@ -1,34 +1,34 @@ -import { useCallback, useState } from 'react'; +import React, { useCallback, useState } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; -import clsx from 'clsx'; -import style9 from 'style9'; import { MuiBox as Box, MuiButton as Button, MuiCollapse as Collapse, MuiIconButton as IconButton, + styled, } from '@toeverything/components/ui'; -import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'; -import ArrowRightIcon from '@mui/icons-material/ArrowRight'; - +import { + ArrowDropDownIcon, + ArrowRightIcon, +} from '@toeverything/components/icons'; import { services } from '@toeverything/datasource/db-service'; -import { NewpageIcon } from '@toeverything/components/common'; import { usePageTree, useCalendarHeatmap, } from '@toeverything/components/layout'; +import { AddIcon } from '@toeverything/components/icons'; -const styles = style9.create({ - ligoButton: { - textTransform: 'none', - }, - newPage: { - color: '#B6C7D3', - width: '26px', - fontSize: '18px', - textAlign: 'center', - cursor: 'pointer', - }, +const StyledContainer = styled('div')({ + height: '32px', + display: 'flex', + alignItems: 'center', +}); + +const StyledBtn = styled('div')({ + color: '#98ACBD', + textTransform: 'none', + fontSize: '12px', + fontWeight: '600', }); export type CollapsiblePageTreeProps = { @@ -73,31 +73,35 @@ export function CollapsiblePageTree(props: CollapsiblePageTreeProps) { justifyContent: 'space-between', alignItems: 'center', paddingRight: 1, + '&:hover': { + background: '#f5f7f8', + borderRadius: '5px', + }, }} onMouseEnter={() => setNewPageBtnVisible(true)} onMouseLeave={() => setNewPageBtnVisible(false)} > - + + {open ? ( + + ) : ( + + )} + setOpen(prev => !prev)}> + {title} + + {newPageBtnVisible && ( -
- + -
+ /> )} {children ? ( diff --git a/libs/components/common/src/lib/collapsible-title/index.tsx b/libs/components/common/src/lib/collapsible-title/index.tsx index 2612eb0aa7..7dd59e613b 100644 --- a/libs/components/common/src/lib/collapsible-title/index.tsx +++ b/libs/components/common/src/lib/collapsible-title/index.tsx @@ -1,16 +1,21 @@ import { useState } from 'react'; -import clsx from 'clsx'; -import style9 from 'style9'; import { MuiButton as Button, MuiCollapse as Collapse, + styled, } from '@toeverything/components/ui'; -import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'; -import ArrowRightIcon from '@mui/icons-material/ArrowRight'; +import { + ArrowDropDownIcon, + ArrowRightIcon, +} from '@toeverything/components/icons'; -const styles = style9.create({ - ligoButton: { - textTransform: 'none', +const StyledContainer = styled('div')({ + display: 'flex', + alignItems: 'center', + cursor: 'pointer', + '&:hover': { + background: '#f5f7f8', + borderRadius: '5px', }, }); @@ -24,29 +29,32 @@ export type CollapsibleTitleProps = { }; export function CollapsibleTitle(props: CollapsibleTitleProps) { - const { className, style, children, title, initialOpen = true } = props; + const { children, title, initialOpen = true } = props; const [open, setOpen] = useState(initialOpen); return ( <> - + setOpen(prev => !prev)}> + {open ? ( + + ) : ( + + )} +
+ {title} +
+ {children ? ( {children} diff --git a/libs/components/layout/src/workspace-sidebar/activities/activities.tsx b/libs/components/layout/src/workspace-sidebar/activities/activities.tsx index b0527c5e42..4e5a9de413 100644 --- a/libs/components/layout/src/workspace-sidebar/activities/activities.tsx +++ b/libs/components/layout/src/workspace-sidebar/activities/activities.tsx @@ -12,17 +12,22 @@ import { useNavigate } from 'react-router'; import { formatDistanceToNow } from 'date-fns'; const StyledWrapper = styled('div')({ - margin: '0 16px 0 32px', + paddingLeft: '12px', span: { textOverflow: 'ellipsis', overflow: 'hidden', }, '.item': { + height: '32px', display: 'flex', alignItems: 'center', - ustifyContent: 'space-between', - padding: '7px 0px', + justifyContent: 'space-between', + paddingRight: '20px', whiteSpace: 'nowrap', + '&:hover': { + background: '#f5f7f8', + borderRadius: '5px', + }, }, '.itemButton': { padding: 0, @@ -31,6 +36,7 @@ const StyledWrapper = styled('div')({ '.itemLeft': { color: '#4c6275', marginRight: '20px', + cursor: 'pointer', span: { fontSize: 14, }, @@ -44,6 +50,14 @@ const StyledWrapper = styled('div')({ }, }); +const StyledItemContent = styled('div')({ + width: '100%', + height: '32px', + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', +}); + export const Activities = () => { const navigate = useNavigate(); const { user, currentSpaceId } = useUserAndSpaces(); @@ -51,34 +65,29 @@ export const Activities = () => { const userId = user?.id; /* temporarily remove:show recently viewed documents */ - // const fetchRecentPages = useCallback(async () => { - // if (!userId || !currentSpaceId) { - // return; - // } - // const recent_pages = await services.api.userConfig.getRecentPages( - // currentSpaceId, - // userId - // ); - // setRecentPages(recent_pages); - // }, [userId, currentSpaceId]); + const fetchRecentPages = useCallback(async () => { + if (!userId || !currentSpaceId) { + return; + } + const recent_pages = await services.api.userConfig.getRecentPages( + currentSpaceId, + userId + ); + setRecentPages(recent_pages); + }, [userId, currentSpaceId]); - // useEffect(() => { - // (async () => { - // await fetchRecentPages(); - // })(); - // }, [fetchRecentPages]); - - /* show recently edit documents */ - const getRecentEditPages = async (state, block) => { - console.log(state, await block.children()); - }; + useEffect(() => { + (async () => { + await fetchRecentPages(); + })(); + }, [fetchRecentPages]); useEffect(() => { let unobserve: () => void; const observe = async () => { unobserve = await services.api.userConfig.observe( { workspace: currentSpaceId }, - getRecentEditPages + fetchRecentPages ); }; observe(); @@ -86,16 +95,15 @@ export const Activities = () => { return () => { unobserve?.(); }; - }, [currentSpaceId, getRecentEditPages]); + }, [currentSpaceId, fetchRecentPages]); return ( - + {recentPages.map(({ id, title, lastOpenTime }) => { return ( - { navigate(`/${currentSpaceId}/${id}`); }} @@ -110,7 +118,7 @@ export const Activities = () => { includeSeconds: true, })} /> - + ); })} 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 0c58d60fb0..57d7643bba 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 = 16, + indentationWidth = 12, collapsible, removable, showDragIndicator, 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 a524dff76e..96c14522fc 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 @@ -101,9 +101,6 @@ export const TreeItem = forwardRef( ))} - {/**/} - {/* */} - {/**/}
* { @@ -69,7 +72,6 @@ box-sizing: border-box; display: flex; align-items: center; - background-color: #fff; color: #4c6275; } @@ -81,7 +83,6 @@ display: flex; align-items: center; justify-content: space-around; - background-color: #fff; color: #4c6275; padding-right: 0.5rem; overflow: hidden; @@ -96,11 +97,6 @@ display: block; } } - - &:hover { - background: #f5f7f8; - border-radius: 5px; - } } .Text { @@ -167,14 +163,6 @@ background-color: transparent; -webkit-tap-highlight-color: transparent; - &:hover { - background-color: var(--action-background, rgba(0, 0, 0, 0.05)); - - svg { - fill: #6f7b88; - } - } - svg { flex: 0 0 auto; margin: auto;