opti: 1.adjust layout style;

2026-02-12 04:18:54 +00:00 · 2022-08-04 17:20:03 +08:00
parent 78ee91583a
commit 5b682188a8
7 changed files with 123 additions and 126 deletions
--- 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) {
                            )}
                            <div>
                                <CollapsibleTitle
-                                    title="Activities"
+                                    title="ACTIVITIES"
                                    initialOpen={false}
                                >
                                    <Activities />
                                </CollapsibleTitle>
                            </div>
                            <div>
-                                <CollapsiblePageTree title="Page Tree">
+                                <CollapsiblePageTree title="PAGES">
                                    {page_id ? <PageTree /> : null}
                                </CollapsiblePageTree>
                            </div>
--- 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)}
            >
-                <Button
-                    startIcon={
-                        open ? <ArrowDropDownIcon /> : <ArrowRightIcon />
-                    }
-                    onClick={() => setOpen(prev => !prev)}
-                    sx={{ color: '#566B7D', textTransform: 'none' }}
-                    className={clsx(styles('ligoButton'), className)}
-                    style={style}
-                    disableElevation
-                    disableRipple
-                >
-                    {title}
-                </Button>
+                <StyledContainer>
+                    {open ? (
+                        <ArrowDropDownIcon sx={{ color: '#566B7D' }} />
+                    ) : (
+                        <ArrowRightIcon sx={{ color: '#566B7D' }} />
+                    )}
+                    <StyledBtn onClick={() => setOpen(prev => !prev)}>
+                        {title}
+                    </StyledBtn>
+                </StyledContainer>

                {newPageBtnVisible && (
-                    <div
+                    <AddIcon
+                        style={{
+                            width: '20px',
+                            height: '20px',
+                            color: '#98ACBD',
+                            cursor: 'pointer',
+                        }}
                        onClick={create_page}
-                        className={clsx(styles('newPage'), className)}
-                    >
-                        +
-                    </div>
+                    />
                )}
            </Box>
            {children ? (
--- 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 (
        <>
-            <Button
-                startIcon={
-                    open ? (
-                        <ArrowDropDownIcon sx={{ color: '#566B7D' }} />
-                    ) : (
-                        <ArrowRightIcon sx={{ color: '#566B7D' }} />
-                    )
-                }
-                onClick={() => setOpen(prev => !prev)}
-                sx={{ color: '#566B7D', textTransform: 'none' }}
-                className={clsx(styles('ligoButton'), className)}
-                style={style}
-                disableElevation
-                disableRipple
-            >
-                {title}
-            </Button>
+            <StyledContainer onClick={() => setOpen(prev => !prev)}>
+                {open ? (
+                    <ArrowDropDownIcon sx={{ color: '#566B7D' }} />
+                ) : (
+                    <ArrowRightIcon sx={{ color: '#566B7D' }} />
+                )}
+                <div
+                    style={{
+                        color: '#98ACBD',
+                        textTransform: 'none',
+                        fontSize: '12px',
+                        fontWeight: '600',
+                        height: '32px',
+                        display: 'flex',
+                        alignItems: 'center',
+                    }}
+                >
+                    {title}
+                </div>
+            </StyledContainer>
            {children ? (
                <Collapse in={open} timeout="auto" unmountOnExit>
                    {children}
--- 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 (
        <StyledWrapper>
-            <List>
+            <List style={{ padding: '0px' }}>
                {recentPages.map(({ id, title, lastOpenTime }) => {
                    return (
                        <ListItem className="item" key={id}>
-                            <ListItemButton
-                                className="itemButton"
+                            <StyledItemContent
                                onClick={() => {
                                    navigate(`/${currentSpaceId}/${id}`);
                                }}
@@ -110,7 +118,7 @@ export const Activities = () => {
                                        includeSeconds: true,
                                    })}
                                />
-                            </ListItemButton>
+                            </StyledItemContent>
                        </ListItem>
                    );
                })}
--- 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,
--- 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<HTMLDivElement, TreeItemProps>(
                                <ArrowDropDownIcon />
                            ))}
                    </Action>
-                    {/*<Action>*/}
-                    {/*    <DocumentIcon />*/}
-                    {/*</Action>*/}

                    <div className={styles['ItemContent']}>
                        <span
@@ -161,7 +158,6 @@ export function Action({
            style={
                {
                    ...style,
-                    // cursor,
                    '--fill': active?.fill,
                    '--background': active?.background,
                } as CSSProperties
--- a/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/tree-item.module.scss
+++ b/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/tree-item.module.scss
@@ -4,6 +4,10 @@
    list-style: none;
    padding: 6px 0;
    font-size: 14px;
+    &:hover {
+        background: #f5f7f8;
+        border-radius: 5px;
+    }

    &.clone {
        display: inline-block;
@@ -43,7 +47,6 @@
                    height: 12px;
                    border-radius: 50%;
                    border: 1px solid #2389ff;
-                    background-color: #ffffff;
                }

                > * {
@@ -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;