improvement: 1.left toolbar hover style#148;

2026-02-11 11:58:41 +00:00 · 2022-08-11 16:17:02 +08:00
parent b4724f3ae0
commit 2d18e8f558
12 changed files with 72 additions and 63 deletions
--- a/apps/ligo-virgo/src/pages/workspace/docs/collapsible-page-tree.tsx
+++ b/apps/ligo-virgo/src/pages/workspace/docs/collapsible-page-tree.tsx
@@ -8,6 +8,7 @@ import {
    usePageTree,
 } from '@toeverything/components/layout';
 import {
+    IconButton,
    MuiBox as Box,
    MuiCollapse as Collapse,
    styled,
@@ -27,6 +28,7 @@ const StyledBtn = styled('div')({
    cursor: 'pointer',
    userSelect: 'none',
    flex: 1,
+    marginLeft: '12px',
 });

 export type CollapsiblePageTreeProps = {
@@ -70,7 +72,7 @@ export function CollapsiblePageTree(props: CollapsiblePageTreeProps) {
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center',
-                    paddingRight: 1,
+                    paddingRight: '12px',
                    '&:hover': {
                        background: '#f5f7f8',
                        borderRadius: '5px',
@@ -80,24 +82,17 @@ export function CollapsiblePageTree(props: CollapsiblePageTreeProps) {
                onMouseLeave={() => setNewPageBtnVisible(false)}
            >
                <StyledBtn onClick={() => setOpen(prev => !prev)}>
-                    {open ? (
-                        <ArrowDropDownIcon sx={{ color: '#566B7D' }} />
-                    ) : (
-                        <ArrowRightIcon sx={{ color: '#566B7D' }} />
-                    )}
                    {title}
                </StyledBtn>

                {newPageBtnVisible && (
-                    <AddIcon
-                        style={{
-                            width: '20px',
-                            height: '20px',
-                            color: '#98ACBD',
-                            cursor: 'pointer',
-                        }}
+                    <IconButton
+                        size="small"
+                        hoverColor="#E0E6EB"
                        onClick={create_page}
-                    />
+                    >
+                        <AddIcon />
+                    </IconButton>
                )}
            </Box>
            {children ? (
--- a/apps/ligo-virgo/src/pages/workspace/docs/workspace-name.tsx
+++ b/apps/ligo-virgo/src/pages/workspace/docs/workspace-name.tsx
@@ -1,13 +1,16 @@
-import {
-    styled,
-    MuiOutlinedInput as OutlinedInput,
-} from '@toeverything/components/ui';
+import { styled, Input } from '@toeverything/components/ui';
 import { PinIcon } from '@toeverything/components/icons';
 import {
    useUserAndSpaces,
    useShowSpaceSidebar,
 } from '@toeverything/datasource/state';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, {
+    ChangeEvent,
+    KeyboardEvent,
+    useCallback,
+    useEffect,
+    useState,
+} from 'react';
 import { services } from '@toeverything/datasource/db-service';
 import { Logo } from './components/logo/Logo';

@@ -124,24 +127,24 @@ export const WorkspaceName = () => {
        };
    }, [currentSpaceId, fetchWorkspaceName]);

-    const handleKeyDown = useCallback(
-        (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-            if (e.key === 'Enter') {
-                e.stopPropagation();
-                e.preventDefault();
-                setInRename(false);
-            }
-        },
-        []
-    );
+    const handleKeyDown = useCallback((e: KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === 'Enter') {
+            e.stopPropagation();
+            e.preventDefault();
+            setInRename(false);
+        }
+    }, []);
    const handleChange = useCallback(
-        (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-            services.api.userConfig.setWorkspaceName(
+        async (e: ChangeEvent<HTMLInputElement>) => {
+            const name = e.target.value;
+
+            await setWorkspaceName(name);
+            await services.api.userConfig.setWorkspaceName(
                currentSpaceId,
-                e.currentTarget.value
+                name
            );
        },
-        []
+        [currentSpaceId]
    );

    return (
@@ -165,7 +168,8 @@ export const WorkspaceName = () => {
                <StyledWorkspace>
                    {inRename ? (
                        <WorkspaceReNameContainer>
-                            <OutlinedInput
+                            <Input
+                                autoFocus
                                style={{ width: '140px', height: '28px' }}
                                value={workspaceName}
                                onChange={handleChange}
--- a/libs/components/common/src/lib/collapsible-title/index.tsx
+++ b/libs/components/common/src/lib/collapsible-title/index.tsx
@@ -13,6 +13,7 @@ const StyledContainer = styled('div')({
    display: 'flex',
    alignItems: 'center',
    cursor: 'pointer',
+    paddingLeft: '12px',
    '&:hover': {
        background: '#f5f7f8',
        borderRadius: '5px',
@@ -36,11 +37,6 @@ export function CollapsibleTitle(props: CollapsibleTitleProps) {
    return (
        <>
            <StyledContainer onClick={() => setOpen(prev => !prev)}>
-                {open ? (
-                    <ArrowDropDownIcon sx={{ color: '#566B7D' }} />
-                ) : (
-                    <ArrowRightIcon sx={{ color: '#566B7D' }} />
-                )}
                <div
                    style={{
                        color: '#98ACBD',
--- a/libs/components/layout/src/header/EditorBoardSwitcher/StatusTrack.tsx
+++ b/libs/components/layout/src/header/EditorBoardSwitcher/StatusTrack.tsx
@@ -20,7 +20,6 @@ const Container = styled('div')(({ theme }) => {
    return {
        width: '64px',
        height: '32px',
-        backgroundColor: theme.affine.palette.textHover,
        border: '1px solid #ECF1FB',
        borderRadius: '8px',
        cursor: 'pointer',
--- a/libs/components/layout/src/header/LayoutHeader.tsx
+++ b/libs/components/layout/src/header/LayoutHeader.tsx
@@ -31,6 +31,7 @@ export const LayoutHeader = () => {
                                size="large"
                                hoverColor={'transparent'}
                                disabled={true}
+                                style={{ cursor: 'not-allowed' }}
                            >
                                <SearchIcon />
                            </IconButton>
@@ -124,11 +125,11 @@ const StyledHelper = styled('div')({
    alignItems: 'center',
 });

-const StyledShare = styled(MuiButton)<{ disabled?: boolean }>({
+const StyledShare = styled('div')<{ disabled?: boolean }>({
    padding: '10px 12px',
    fontWeight: 600,
    fontSize: '14px',
-    cursor: 'pointer',
+    cursor: 'not-allowed',
    color: '#98ACBD',
    textTransform: 'none',
    /* disabled for current time */
--- a/libs/components/layout/src/workspace-sidebar/activities/activities.tsx
+++ b/libs/components/layout/src/workspace-sidebar/activities/activities.tsx
@@ -10,9 +10,10 @@ import {
 } from '@toeverything/components/ui';
 import { useNavigate } from 'react-router';
 import { formatDistanceToNow } from 'date-fns';
+import { DotIcon } from '../dot-icon';

 const StyledWrapper = styled('div')({
-    paddingLeft: '12px',
+    width: '100%',
    span: {
        textOverflow: 'ellipsis',
        overflow: 'hidden',
@@ -22,8 +23,8 @@ const StyledWrapper = styled('div')({
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
-        paddingRight: '20px',
        whiteSpace: 'nowrap',
+        paddingLeft: '12px',
        '&:hover': {
            background: '#f5f7f8',
            borderRadius: '5px',
@@ -106,6 +107,8 @@ export const Activities = () => {
                    const { id, title, updated } = item;
                    return (
                        <ListItem className="item" key={id}>
+                            <DotIcon />
+
                            <StyledItemContent
                                onClick={() => {
                                    navigate(`/${currentSpaceId}/${id}`);
--- a/libs/components/layout/src/workspace-sidebar/dot-icon/DotIcon.tsx
+++ b/libs/components/layout/src/workspace-sidebar/dot-icon/DotIcon.tsx
@@ -0,0 +1,9 @@
+import { PageInPageTreeIcon } from '@toeverything/components/icons';
+
+export const DotIcon = () => {
+    return (
+        <PageInPageTreeIcon
+            style={{ fill: '#98ACBD', width: '20px', height: '20px' }}
+        />
+    );
+};
--- a/libs/components/layout/src/workspace-sidebar/dot-icon/index.ts
+++ b/libs/components/layout/src/workspace-sidebar/dot-icon/index.ts
@@ -0,0 +1 @@
+export { DotIcon } from './DotIcon';
--- 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 = 12,
+        indentationWidth = 20,
        collapsible,
        removable,
        showDragIndicator,
--- a/libs/components/layout/src/workspace-sidebar/page-tree/PageTree.tsx
+++ b/libs/components/layout/src/workspace-sidebar/page-tree/PageTree.tsx
@@ -3,10 +3,8 @@ import { DndTree } from './DndTree';
 import { useDndTreeAutoUpdate } from './use-page-tree';

 const Root = styled('div')({
-    minWidth: 160,
-    maxWidth: 260,
-    marginLeft: 18,
-    marginRight: 6,
+    minWidth: '160px',
+    maxWidth: '276px',
 });

 export const PageTree = () => {
--- 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
@@ -8,6 +8,7 @@ import { useParams } from 'react-router-dom';
 import { useFlag } from '@toeverything/datasource/feature-flags';

 import MoreActions from './MoreActions';
+import { DotIcon } from '../../dot-icon';
 import {
    ActionButton,
    Counter,
@@ -76,24 +77,25 @@ export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
                ghost={ghost}
                disableSelection={disableSelection}
                disableInteraction={disableInteraction}
-                spacing={`${indentationWidth * depth}px`}
+                spacing={`${indentationWidth * depth + 12}px`}
+                active={pageId === page_id}
                {...props}
            >
                <TreeItemContainer ref={ref} style={style} title={value}>
                    <ActionButton tabIndex={0} onClick={onCollapse}>
-                        {childCount !== 0 &&
-                            (collapsed ? (
+                        {childCount !== 0 ? (
+                            collapsed ? (
                                <ArrowRightIcon />
                            ) : (
                                <ArrowDropDownIcon />
-                            ))}
+                            )
+                        ) : (
+                            <DotIcon />
+                        )}
                    </ActionButton>

                    <TreeItemContent {...handleProps}>
-                        <TextLink
-                            to={`/${workspace_id}/${pageId}`}
-                            active={pageId === page_id}
-                        >
+                        <TextLink to={`/${workspace_id}/${pageId}`}>
                            {value}
                        </TextLink>
                        {BooleanPageTreeItemMoreActions && (
--- a/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/styles.ts
+++ b/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/styles.ts
@@ -15,11 +15,14 @@ export const Wrapper = styled('li')<{
    indicator?: boolean;
    disableSelection?: boolean;
    disableInteraction?: boolean;
+    active?: boolean;
 }>`
    box-sizing: border-box;
    padding-left: ${({ spacing }) => spacing};
    list-style: none;
    font-size: 14px;
+    background-color: ${({ active }) => (active ? '#f5f7f8' : 'transparent')};
+    border-radius: 5px;

    ${({ clone, disableSelection }) =>
        (clone || disableSelection) &&
@@ -126,8 +129,6 @@ export const ActionButton = styled('button')<{
    fill?: string;
 }>`
    display: flex;
-    width: 12px;
-    padding: 0 15px;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
@@ -141,9 +142,10 @@ export const ActionButton = styled('button')<{
    -webkit-tap-highlight-color: transparent;

    svg {
+        width: 20px;
+        height: 20px;
        flex: 0 0 auto;
        margin: auto;
-        height: 100%;
        overflow: visible;
        fill: #919eab;
    }
@@ -182,8 +184,7 @@ export const TextLink = styled(Link, {
    appearance: none;
    text-decoration: none;
    user-select: none;
-    color: ${({ theme, active }) =>
-        active ? theme.affine.palette.primary : 'unset'};
+    color: #4c6275;
 `;

 export const TreeItemContent = styled('div')`
@@ -195,7 +196,7 @@ export const TreeItemContent = styled('div')`
    align-items: center;
    justify-content: space-around;
    color: #4c6275;
-    padding-right: 0.5rem;
+    padding-right: 12px;
    overflow: hidden;

    &:hover {