Merge pull request #37 from toeverything/opti-page-tree-mitsuha-dev

opti: 1.adjust padding of page-tree item; 2. fetch new icon from figma;

apps/ligo-virgo/src/pages/workspace/docs/Page.tsx

@@ -47,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();

libs/components/icons/src/auto-icons/add/add.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M11.04 12.96V18h1.92v-5.04H18v-1.92h-5.04V6h-1.92v5.04H6v1.92h5.04Z" clip-rule="evenodd"/></svg>

libs/components/icons/src/auto-icons/add/add.tsx

@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface AddIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const AddIcon: FC<AddIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M11.04 12.96V18h1.92v-5.04H18v-1.92h-5.04V6h-1.92v5.04H6v1.92h5.04Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};

libs/components/icons/src/auto-icons/index.ts

@@ -1,4 +1,4 @@
-export const timestamp = 1659000896562;
+export const timestamp = 1659423582387;
 export * from './image/image';
 export * from './format-clear/format-clear';
 export * from './backward-undo/backward-undo';
@@ -125,4 +125,8 @@ export * from './eraser/eraser';
 export * from './group-by/group-by';
 export * from './layout/layout';
 export * from './lock/lock';
-export * from './unlock/unlock';
+export * from './unlock/unlock';
+export * from './more-tags-an-subblocks/more-tags-an-subblocks';
+export * from './page-in-page-tree/page-in-page-tree';
+export * from './pin/pin';
+export * from './add/add';

libs/components/icons/src/auto-icons/more-tags-an-subblocks/more-tags-an-subblocks.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M2.2 3v13A3.8 3.8 0 0 0 6 19.8h10.316A2.801 2.801 0 0 0 21.8 19a2.8 2.8 0 0 0-5.484-.8H6A2.2 2.2 0 0 1 3.8 16v-6h12.584a2.801 2.801 0 1 0-.12-1.6H3.8V3H2.2ZM19 7.8a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4ZM17.8 19a1.2 1.2 0 1 1 2.4 0 1.2 1.2 0 0 1-2.4 0Z" clip-rule="evenodd"/></svg>

libs/components/icons/src/auto-icons/more-tags-an-subblocks/more-tags-an-subblocks.tsx

@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface MoreTagsAnSubblocksIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const MoreTagsAnSubblocksIcon: FC<MoreTagsAnSubblocksIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M2.2 3v13A3.8 3.8 0 0 0 6 19.8h10.316A2.801 2.801 0 0 0 21.8 19a2.8 2.8 0 0 0-5.484-.8H6A2.2 2.2 0 0 1 3.8 16v-6h12.584a2.801 2.801 0 1 0-.12-1.6H3.8V3H2.2ZM19 7.8a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4ZM17.8 19a1.2 1.2 0 1 1 2.4 0 1.2 1.2 0 0 1-2.4 0Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};

libs/components/icons/src/auto-icons/page-in-page-tree/page-in-page-tree.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="2.5"/></svg>

libs/components/icons/src/auto-icons/page-in-page-tree/page-in-page-tree.tsx

@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface PageInPageTreeIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const PageInPageTreeIcon: FC<PageInPageTreeIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <circle cx={12} cy={12} r={2.5} />
+        </SvgIcon>
+    )
+};

libs/components/icons/src/auto-icons/pin/pin.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g clip-path="url(#a)"><path fill-rule="evenodd" d="M20.403 7.84a2 2 0 0 1 0 2.828l-2.12 2.12-1.414-1.414-2.596 2.595a6.003 6.003 0 0 1-1.172 6.83l-4.243-4.243-3.834 3.834a1 1 0 1 1-1.414-1.414l3.834-3.834L3.2 10.9a6.002 6.002 0 0 1 6.83-1.173l2.595-2.596-1.414-1.414 2.12-2.12a2 2 0 0 1 2.829 0l4.242 4.242Z" clip-rule="evenodd"/></g><defs><clipPath id="a"><path d="M0 0H24V24H0z" transform="matrix(-1 0 0 1 24 0)"/></clipPath></defs></svg>

libs/components/icons/src/auto-icons/pin/pin.tsx

@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface PinIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const PinIcon: FC<PinIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <g clipPath="url(#a)"><path fillRule="evenodd" d="M20.403 7.84a2 2 0 0 1 0 2.828l-2.12 2.12-1.414-1.414-2.596 2.595a6.003 6.003 0 0 1-1.172 6.83l-4.243-4.243-3.834 3.834a1 1 0 1 1-1.414-1.414l3.834-3.834L3.2 10.9a6.002 6.002 0 0 1 6.83-1.173l2.595-2.596-1.414-1.414 2.12-2.12a2 2 0 0 1 2.829 0l4.242 4.242Z" clipRule="evenodd" /></g><defs><clipPath id="a"><path d="M0 0H24V24H0z" transform="matrix(-1 0 0 1 24 0)" /></clipPath></defs>
+        </SvgIcon>
+    )
+};

libs/components/layout/src/header/LayoutHeader.tsx

@@ -3,13 +3,14 @@ import {
     LogoIcon,
     SideBarViewIcon,
     SearchIcon,
+    SideBarViewCloseIcon,
 } from '@toeverything/components/icons';
 import { useShowSettingsSidebar } from '@toeverything/datasource/state';
 import { CurrentPageTitle } from './Title';
 import { EditorBoardSwitcher } from './EditorBoardSwitcher';
 
 export const LayoutHeader = () => {
-    const { toggleSettingsSidebar: toggleInfoSidebar } =
+    const { toggleSettingsSidebar: toggleInfoSidebar, showSettingsSidebar } =
         useShowSettingsSidebar();
 
     return (
@@ -31,7 +32,11 @@ export const LayoutHeader = () => {
                         </div>
 
                         <IconButton onClick={toggleInfoSidebar} size="large">
-                            <SideBarViewIcon />
+                            {showSettingsSidebar ? (
+                                <SideBarViewIcon />
+                            ) : (
+                                <SideBarViewCloseIcon />
+                            )}
                         </IconButton>
                     </StyledHelper>
                 </FlexContainer>

libs/components/layout/src/workspace-sidebar/activities/activities.tsx

@@ -50,31 +50,35 @@ export const Activities = () => {
     const [recentPages, setRecentPages] = useState([]);
     const userId = user?.id;
 
-    const fetchRecentPages = useCallback(async () => {
-        if (!userId || !currentSpaceId) {
-            return;
-        }
-        const recent_pages = await services.api.userConfig.getRecentPages(
-            currentSpaceId,
-            userId
-        );
-        setRecentPages(recent_pages);
-    }, [userId, currentSpaceId]);
+    /* 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]);
 
-    useEffect(() => {
-        (async () => {
-            await fetchRecentPages();
-        })();
-    }, [fetchRecentPages]);
+    // useEffect(() => {
+    //     (async () => {
+    //         await fetchRecentPages();
+    //     })();
+    // }, [fetchRecentPages]);
+
+    /* show recently edit documents */
+    const getRecentEditPages = async (state, block) => {
+        console.log(state, await block.children());
+    };
 
     useEffect(() => {
         let unobserve: () => void;
         const observe = async () => {
             unobserve = await services.api.userConfig.observe(
                 { workspace: currentSpaceId },
-                () => {
-                    fetchRecentPages();
-                }
+                getRecentEditPages
             );
         };
         observe();
@@ -82,7 +86,7 @@ export const Activities = () => {
         return () => {
             unobserve?.();
         };
-    }, [currentSpaceId, fetchRecentPages]);
+    }, [currentSpaceId, getRecentEditPages]);
 
     return (
         <StyledWrapper>

libs/components/layout/src/workspace-sidebar/page-tree/DndTree.tsx

@@ -95,30 +95,37 @@ export function DndTree(props: DndTreeProps) {
             >
                 {/* <button onClick={() => handleAdd()}> add top node</button> */}
                 {flattenedItems.map(
-                    ({ id, title, children, collapsed, depth }) => (
-                        <DndTreeItem
-                            key={id}
-                            id={id}
-                            // value={id}
-                            value={title}
-                            collapsed={Boolean(collapsed && children.length)}
-                            depth={
-                                id === activeId && projected
-                                    ? projected.depth
-                                    : depth
-                            }
-                            indentationWidth={indentationWidth}
-                            indicator={showDragIndicator}
-                            onCollapse={
-                                collapsible && children.length
-                                    ? () => handleCollapse(id)
-                                    : undefined
-                            }
-                            onRemove={
-                                removable ? () => handleRemove(id) : undefined
-                            }
-                        />
-                    )
+                    ({ id, title, children, collapsed, depth }) => {
+                        return (
+                            <DndTreeItem
+                                key={id}
+                                id={id}
+                                // value={id}
+                                value={title}
+                                collapsed={Boolean(
+                                    collapsed && children.length
+                                )}
+                                depth={
+                                    id === activeId && projected
+                                        ? projected.depth
+                                        : depth
+                                }
+                                indentationWidth={indentationWidth}
+                                indicator={showDragIndicator}
+                                childCount={children.length}
+                                onCollapse={
+                                    collapsible && children.length
+                                        ? () => handleCollapse(id)
+                                        : undefined
+                                }
+                                onRemove={
+                                    removable
+                                        ? () => handleRemove(id)
+                                        : undefined
+                                }
+                            />
+                        );
+                    }
                 )}
                 <DragOverlay
                     dropAnimation={dropAnimation}

libs/components/layout/src/workspace-sidebar/page-tree/tree-item/MoreActions.tsx

@@ -5,6 +5,8 @@ import {
     CascaderItemProps,
     MuiDivider as Divider,
     MuiClickAwayListener as ClickAwayListener,
+    IconButton,
+    styled,
 } from '@toeverything/components/ui';
 import React from 'react';
 import { NavLink, useNavigate } from 'react-router-dom';
@@ -12,6 +14,8 @@ import { copyToClipboard } from '@toeverything/utils';
 import { services, TemplateFactory } from '@toeverything/datasource/db-service';
 import { NewFromTemplatePortal } from './NewFromTemplatePortal';
 import { useFlag } from '@toeverything/datasource/feature-flags';
+import { MoreIcon, AddIcon } from '@toeverything/components/icons';
+
 const MESSAGES = {
     COPY_LINK_SUCCESS: 'Copyed link to clipboard',
 };
@@ -20,6 +24,12 @@ interface ActionsProps {
     pageId: string;
     onRemove: () => void;
 }
+
+const StyledAction = styled('div')({
+    display: 'flex',
+    alignItems: 'center',
+});
+
 function DndTreeItemMoreActions(props: ActionsProps) {
     const [alert_open, set_alert_open] = React.useState(false);
     const [anchorEl, setAnchorEl] = React.useState<HTMLDivElement | null>(null);
@@ -236,12 +246,23 @@ function DndTreeItemMoreActions(props: ActionsProps) {
     return (
         <ClickAwayListener onClickAway={() => handleClose()}>
             <div>
-                <span
-                    className={styles['TreeItemMoreActions']}
-                    onClick={handleClick}
-                >
-                    ···
-                </span>
+                <div className={styles['TreeItemMoreActions']}>
+                    <StyledAction>
+                        <IconButton
+                            size="small"
+                            onClick={handle_new_child_page}
+                        >
+                            <AddIcon />
+                        </IconButton>
+                        <IconButton
+                            size="small"
+                            hoverColor="#E0E6EB"
+                            onClick={handleClick}
+                        >
+                            <MoreIcon />
+                        </IconButton>
+                    </StyledAction>
+                </div>
                 <Cascader
                     items={menuList}
                     anchorEl={anchorEl}

libs/components/layout/src/workspace-sidebar/page-tree/tree-item/TreeItem.tsx

@@ -65,7 +65,7 @@ export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
         const navigate = useNavigate();
         const BooleanPageTreeItemMoreActions = useFlag(
             'BooleanPageTreeItemMoreActions',
-            false
+            true
         );
         return (
             <li
@@ -94,7 +94,12 @@ export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
                     title={value}
                 >
                     <Action onClick={onCollapse}>
-                        {collapsed ? <ArrowRightIcon /> : <ArrowDropDownIcon />}
+                        {childCount !== 0 &&
+                            (collapsed ? (
+                                <ArrowRightIcon />
+                            ) : (
+                                <ArrowDropDownIcon />
+                            ))}
                     </Action>
                     {/*<Action>*/}
                     {/*    <DocumentIcon />*/}

libs/components/layout/src/workspace-sidebar/page-tree/tree-item/tree-item.module.scss

@@ -83,7 +83,7 @@
     justify-content: space-around;
     background-color: #fff;
     color: #4c6275;
-    padding: 0 0.5rem;
+    padding-right: 0.5rem;
     overflow: hidden;
 
     .TreeItemMoreActions {

libs/components/ui/src/button/IconButton.tsx

@@ -36,6 +36,7 @@ interface IconButtonProps {
     style?: CSSProperties;
     className?: string;
     size?: SizeType;
+    hoverColor?: string;
 }
 
 export const IconButton: FC<PropsWithChildren<IconButtonProps>> = ({
@@ -57,47 +58,48 @@ export const IconButton: FC<PropsWithChildren<IconButtonProps>> = ({
     );
 };
 
-const Container = styled('button')<{ size?: SizeType }>(
-    ({ theme, size = SIZE_MIDDLE }) => {
-        const { iconSize, areaSize } = SIZE_CONFIG[size];
+const Container = styled('button')<{
+    size?: SizeType;
+    hoverColor?: string;
+}>(({ theme, size = SIZE_MIDDLE, hoverColor }) => {
+    const { iconSize, areaSize } = SIZE_CONFIG[size];
 
-        return {
+    return {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: areaSize,
+        height: areaSize,
+        backgroundColor: 'transparent',
+        color: theme.affine.palette.icons,
+        padding: theme.affine.spacing.iconPadding,
+        borderRadius: '3px',
+
+        '& svg': {
+            width: iconSize,
+            height: iconSize,
             display: 'flex',
             justifyContent: 'center',
             alignItems: 'center',
-            width: areaSize,
-            height: areaSize,
-            backgroundColor: theme.affine.palette.white,
-            color: theme.affine.palette.icons,
-            padding: theme.affine.spacing.iconPadding,
-            borderRadius: '5px',
+        },
 
-            '& svg': {
-                width: iconSize,
-                height: iconSize,
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-            },
+        '&:hover': {
+            backgroundColor: hoverColor || theme.affine.palette.hover,
+        },
 
-            '&:hover': {
-                backgroundColor: theme.affine.palette.hover,
-            },
+        [`&${buttonStatus.hover}`]: {
+            backgroundColor: theme.affine.palette.hover,
+        },
 
-            [`&${buttonStatus.hover}`]: {
-                backgroundColor: theme.affine.palette.hover,
-            },
+        '&:focus': {
+            color: theme.affine.palette.primary,
+        },
+        [`&.${buttonStatus.focus}`]: {
+            color: theme.affine.palette.primary,
+        },
 
-            '&:focus': {
-                color: theme.affine.palette.primary,
-            },
-            [`&.${buttonStatus.focus}`]: {
-                color: theme.affine.palette.primary,
-            },
-
-            [`&${buttonStatus.disabled}`]: {
-                cursor: 'not-allowed',
-            },
-        };
-    }
-);
+        [`&${buttonStatus.disabled}`]: {
+            cursor: 'not-allowed',
+        },
+    };
+});