Merge pull request #207 from toeverything/chore/page-tree-styles

Chore/page tree styles

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

@@ -52,8 +52,8 @@ export const LayoutHeader = () => {
             </StyledHeaderRoot>
             <StyledUnstableTips>
                 <StyledUnstableTipsText>
-                    AFFiNE now under active development, the version is
+                    AFFiNE is currently under active development. This build is
-                    UNSTABLE, please DO NOT store important data in this version
+                    UNSTABLE. Please DO NOT store important data.
                 </StyledUnstableTipsText>
             </StyledUnstableTips>
         </StyledContainerForHeaderRoot>

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

@@ -36,19 +36,13 @@ export type DndTreeProps = {
     indentationWidth?: number;
     collapsible?: boolean;
     removable?: boolean;
-    showDragIndicator?: boolean;
 };
 
 /**
  * Currently does not support drag and drop using the keyboard.
  */
 export function DndTree(props: DndTreeProps) {
-    const {
+    const { indentationWidth = 20, collapsible, removable } = props;
-        indentationWidth = 20,
-        collapsible,
-        removable,
-        showDragIndicator,
-    } = props;
 
     const sensors = useSensors(
         useSensor(PointerSensor, { activationConstraint: { distance: 8 } })
@@ -111,7 +105,6 @@ export function DndTree(props: DndTreeProps) {
                                         : depth
                                 }
                                 indentationWidth={indentationWidth}
-                                indicator={showDragIndicator}
                                 childCount={children.length}
                                 onCollapse={
                                     collapsible && children.length
@@ -129,7 +122,8 @@ export function DndTree(props: DndTreeProps) {
                 )}
                 <DragOverlay
                     dropAnimation={dropAnimation}
-                    style={{ marginTop: '-65px' }}
+                    // TODO fix drag offset when the position of the page tree changes
+                    style={{ marginTop: '-100px' }}
                 >
                     {activeId && activeItem ? (
                         <DndTreeItem

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

@@ -16,8 +16,7 @@ export function DndTreeItem({ id, depth, ...props }: DndTreeItemProps) {
         isDragging,
         isSorting,
         listeners,
-        setDraggableNodeRef,
+        setNodeRef,
-        setDroppableNodeRef,
         transform,
         transition,
     } = useSortable({ id });
@@ -29,8 +28,7 @@ export function DndTreeItem({ id, depth, ...props }: DndTreeItemProps) {
 
     return (
         <TreeItem
-            ref={setDraggableNodeRef}
+            ref={setNodeRef}
-            wrapperRef={setDroppableNodeRef}
             pageId={id}
             style={style}
             depth={depth}

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

@@ -15,7 +15,6 @@ import {
     TextLink,
     TreeItemContainer,
     TreeItemContent,
-    Wrapper,
 } from './styles';
 
 export type TreeItemProps = {
@@ -33,13 +32,10 @@ export type TreeItemProps = {
     /** isDragging */
     ghost?: boolean;
     handleProps?: any;
-    indicator?: boolean;
     indentationWidth: number;
     onCollapse?(): void;
     onRemove?(): void;
-    /** The ref of the outermost container is often used as droppaHTMLAttributes<HTMLLIElement>ble-node; the ref of the inner dom is often used as draggable-node */
+} & HTMLAttributes<HTMLDivElement>;
-    wrapperRef?(node: HTMLLIElement): void;
-} & HTMLAttributes<HTMLLIElement>;
 
 export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
     (
@@ -52,13 +48,10 @@ export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
             ghost,
             handleProps,
             indentationWidth,
-            indicator,
             collapsed,
             onCollapse,
             onRemove,
-            style,
             value,
-            wrapperRef,
             pageId,
             ...props
         },
@@ -71,8 +64,8 @@ export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
         );
 
         return (
-            <Wrapper
+            <TreeItemContainer
-                ref={wrapperRef}
+                ref={ref}
                 clone={clone}
                 ghost={ghost}
                 disableSelection={disableSelection}
@@ -81,18 +74,19 @@ export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
                 active={pageId === page_id}
                 {...props}
             >
-                <TreeItemContainer ref={ref} style={style} title={value}>
-                    <ActionButton tabIndex={0} onClick={onCollapse}>
                 {childCount !== 0 ? (
                     collapsed ? (
+                        <ActionButton tabIndex={0} onClick={onCollapse}>
                             <ArrowRightIcon />
+                        </ActionButton>
                     ) : (
+                        <ActionButton tabIndex={0} onClick={onCollapse}>
                             <ArrowDropDownIcon />
+                        </ActionButton>
                     )
                 ) : (
                     <DotIcon />
                 )}
-                    </ActionButton>
 
                 <TreeItemContent {...handleProps}>
                     <TextLink to={`/${workspace_id}/${pageId}`}>
@@ -112,7 +106,6 @@ export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
                     ) : null}
                 </TreeItemContent>
             </TreeItemContainer>
-            </Wrapper>
         );
     }
 );

libs/components/layout/src/workspace-sidebar/page-tree/tree-item/styles.ts

@@ -1,22 +1,18 @@
 import { styled } from '@toeverything/components/ui';
 import { Link } from 'react-router-dom';
 
-export const TreeItemContainer = styled('div')`
+export const TreeItemContainer = styled('div')<{
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    color: #4c6275;
-`;
-
-export const Wrapper = styled('li')<{
     spacing: string;
     clone?: boolean;
     ghost?: boolean;
-    indicator?: boolean;
     disableSelection?: boolean;
     disableInteraction?: boolean;
     active?: boolean;
 }>`
+    display: flex;
+    align-items: center;
+    color: #4c6275;
+
     box-sizing: border-box;
     padding-left: ${({ spacing }) => spacing};
     list-style: none;
@@ -26,21 +22,13 @@ export const Wrapper = styled('li')<{
 
     ${({ clone, disableSelection }) =>
         (clone || disableSelection) &&
-        `width: 100%;
+        `
-        .Text,
+        width: 100%;
-        .Count {
         user-select: none;
-            -webkit-user-select: none;
+        opacity: 0.7;
-        }`}
+        background: transparent;
-
+        cursor: grab;
-    ${({ indicator }) =>
+    `}
-        indicator &&
-        `width: 100%;
-        .Text,
-        .Count {
-            user-select: none;
-            -webkit-user-select: none;
-        }`}
 
     ${({ disableInteraction }) => disableInteraction && `pointer-events: none;`}
 
@@ -48,64 +36,6 @@ export const Wrapper = styled('li')<{
         background: #f5f7f8;
         border-radius: 5px;
     }
-
-    &.clone {
-        display: inline-block;
-        padding: 0;
-        margin-left: 10px;
-        margin-top: 5px;
-        pointer-events: none;
-
-        ${TreeItemContainer} {
-            padding-right: 20px;
-            border-radius: 4px;
-            box-shadow: 0px 15px 15px 0 rgba(34, 33, 81, 0.1);
-        }
-    }
-
-    &.ghost {
-        &.indicator {
-            opacity: 1;
-            position: relative;
-            z-index: 1;
-            margin-bottom: -1px;
-
-            ${TreeItemContainer} {
-                position: relative;
-                padding: 0;
-                height: 8px;
-                border-color: #2389ff;
-                background-color: #56a1f8;
-
-                &:before {
-                    position: absolute;
-                    left: -8px;
-                    top: -4px;
-                    display: block;
-                    content: '';
-                    width: 12px;
-                    height: 12px;
-                    border-radius: 50%;
-                    border: 1px solid #2389ff;
-                }
-
-                > * {
-                    /* Items are hidden using height and opacity to retain focus */
-                    opacity: 0;
-                    height: 0;
-                }
-            }
-        }
-
-        &:not(.indicator) {
-            opacity: 0.5;
-        }
-
-        ${TreeItemContainer} > * {
-            box-shadow: none;
-            background-color: transparent;
-        }
-    }
 `;
 
 export const Counter = styled('span')`
@@ -138,7 +68,7 @@ export const ActionButton = styled('button')<{
     border: none;
     outline: none;
     appearance: none;
-    background-color: transparent;
+    background: transparent;
     -webkit-tap-highlight-color: transparent;
 
     svg {
@@ -151,8 +81,7 @@ export const ActionButton = styled('button')<{
     }
 
     &:active {
-        background-color: ${({ background }) =>
+        background: ${({ background }) => background ?? 'rgba(0, 0, 0, 0.05)'};
-            background ?? 'rgba(0, 0, 0, 0.05)'};
 
         svg {
             fill: ${({ fill }) => fill ?? '#788491'};
@@ -170,9 +99,7 @@ export const TreeItemMoreActions = styled('div')`
     visibility: hidden;
 `;
 
-export const TextLink = styled(Link, {
+export const TextLink = styled(Link)`
-    shouldForwardProp: (prop: string) => !['active'].includes(prop),
-})<{ active?: boolean }>`
     display: flex;
     align-items: center;
     flex-grow: 1;