opti: style improve of sidebar and topbar #572;

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

@@ -68,6 +68,7 @@ export function Page(props: PageProps) {
                             !showSpaceSidebar && !fixedDisplay
                                 ? 'translateX(-270px)'
                                 : 'translateX(0px)',
+                        transition: '0.8s',
                     }}
                     onMouseEnter={() => setSpaceSidebarVisible(true)}
                     onMouseLeave={() => setSpaceSidebarVisible(false)}
@@ -144,12 +145,13 @@ const LigoLeftContainer = styled('div')({
 
 const WorkspaceSidebar = styled('div')(({ hidden }) => ({
     position: 'absolute',
+    bottom: '48px',
+    top: '0px',
     zIndex: 1,
     display: 'flex',
     flexDirection: 'column',
     width: 300,
     minWidth: 300,
-    height: '100%',
     borderRadius: '0px 10px 10px 0px',
     boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
     backgroundColor: '#FFFFFF',

apps/ligo-virgo/src/pages/workspace/docs/index.ts

@@ -0,0 +1 @@
+export { Page } from './Page';

apps/ligo-virgo/src/pages/workspace/index.ts

@@ -0,0 +1 @@
+export { WorkspaceContainer } from './WorkspaceContainer';

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

@@ -34,6 +34,7 @@ const StyledContainerForHeaderRoot = styled('div')(({ theme }) => {
     return {
         width: '100%',
         zIndex: theme.affine.zIndex.header,
+        backgroundColor: '#fff',
     };
 });
 

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

@@ -13,6 +13,8 @@ export const CurrentPageTitle = () => {
     const { workspace_id } = params;
     const [pageId, setPageId] = useState<string>('');
     const [pageTitle, setPageTitle] = useState<string | undefined>();
+    /* card.7 */
+    // const { items } = usePageTree();
 
     useEffect(() => {
         if (params['*']) {

libs/components/layout/src/header/utils.ts

@@ -0,0 +1,25 @@
+import { TreeItem, TreeItems } from './../workspace-sidebar/page-tree';
+
+const pickPath = (treeItems: TreeItem | TreeItems, targetId: string) => {
+    const pick = (tree: TreeItem, result: TreeItem[] = []) => {
+        if (tree.id === targetId) {
+            result.push(tree);
+            return result;
+        }
+
+        for (const child of tree?.children || []) {
+            if (pick(child, result).length) {
+                result.unshift(tree);
+                break;
+            }
+        }
+
+        return result;
+    };
+
+    return (Array.isArray(treeItems) ? treeItems : [treeItems]).map(treeItem =>
+        pick(treeItem)
+    );
+};
+
+export { pickPath };

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

@@ -81,6 +81,8 @@ export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
                 style={
                     {
                         '--spacing': `${indentationWidth * depth}px`,
+                        paddingTop: 0,
+                        paddingBottom: 0,
                     } as CSSProperties
                 }
                 {...props}
@@ -94,30 +96,35 @@ export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
                     <Action onClick={onCollapse}>
                         {collapsed ? <ArrowRightIcon /> : <ArrowDropDownIcon />}
                     </Action>
-                    <Action>
-                        <DocumentIcon />
-                    </Action>
-                    <span
-                        className={styles['Text']}
-                        {...handleProps}
-                        onClick={() => {
-                            navigate(`/${workspace_id}/${pageId}`);
-                        }}
-                    >
-                        {value}
-                    </span>
-                    {BooleanPageTreeItemMoreActions && (
-                        <MoreActions
-                            workspaceId={workspace_id}
-                            pageId={pageId}
-                            onRemove={onRemove}
-                        />
-                    )}
+                    {/*<Action>*/}
+                    {/*    <DocumentIcon />*/}
+                    {/*</Action>*/}
 
-                    {!clone && onRemove && <Remove onClick={onRemove} />}
-                    {clone && childCount && childCount > 1 ? (
-                        <span className={styles['Count']}>{childCount}</span>
-                    ) : null}
+                    <div className={styles['ItemContent']}>
+                        <span
+                            className={styles['Text']}
+                            {...handleProps}
+                            onClick={() => {
+                                navigate(`/${workspace_id}/${pageId}`);
+                            }}
+                        >
+                            {value}
+                        </span>
+                        {BooleanPageTreeItemMoreActions && (
+                            <MoreActions
+                                workspaceId={workspace_id}
+                                pageId={pageId}
+                                onRemove={onRemove}
+                            />
+                        )}
+
+                        {/*{!clone && onRemove && <Remove onClick={onRemove} />}*/}
+                        {clone && childCount && childCount > 1 ? (
+                            <span className={styles['Count']}>
+                                {childCount}
+                            </span>
+                        ) : null}
+                    </div>
                 </div>
             </li>
         );

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

@@ -1,7 +1,6 @@
 .Wrapper {
     box-sizing: border-box;
     padding-left: var(--spacing);
-    margin-bottom: -1px;
     list-style: none;
     padding: 6px 0;
     font-size: 14px;
@@ -68,12 +67,24 @@
 
 .TreeItem {
     box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    background-color: #fff;
+    color: #4c6275;
+}
+
+.ItemContent {
+    box-sizing: border-box;
+    width: 100%;
+    height: 32px;
     position: relative;
     display: flex;
     align-items: center;
-    padding: 4px 0;
+    justify-content: space-around;
     background-color: #fff;
     color: #4c6275;
+    padding: 0 0.5rem;
+    overflow: hidden;
 
     .TreeItemMoreActions {
         visibility: hidden;
@@ -85,11 +96,15 @@
             display: block;
         }
     }
+
+    &:hover {
+        background: #f5f7f8;
+        border-radius: 5px;
+    }
 }
 
 .Text {
     flex-grow: 1;
-    padding-left: 0.5rem;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -98,13 +113,13 @@
 
 .Count {
     position: absolute;
-    top: -10px;
-    right: -10px;
+    top: 8px;
+    right: 0;
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 24px;
-    height: 24px;
+    width: 18px;
+    height: 18px;
     border-radius: 50%;
     background-color: #2389ff;
     font-size: 0.9rem;
@@ -118,6 +133,7 @@
 
 .disableSelection,
 .clone {
+    width: 100%;
     .Text,
     .Count {
         user-select: none;

libs/components/ui/src/index.ts

@@ -1,6 +1,6 @@
 // Base abstract feature for all UI components
 export { Theme, useTheme, withTheme, ThemeProvider } from './theme';
-export { styled } from './styled';
+export { styled, keyframes } from './styled';
 export type { SxProps } from './styled';
 
 export * from './mui';

libs/components/ui/src/styled/index.ts

@@ -1,5 +1,5 @@
 // eslint-disable-next-line no-restricted-imports
-import { styled as muiStyled } from '@mui/material/styles';
+import { styled as muiStyled, keyframes } from '@mui/material/styles';
 import { ReactHTML, ReactSVG } from 'react';
 import isPropValid from '@emotion/is-prop-valid';
 export type { SxProps } from '@mui/system';
@@ -71,3 +71,5 @@ export const styled: typeof muiStyled = (
     options.shouldForwardProp = isValidProp;
     return muiStyled(component, options);
 };
+
+export { keyframes };