diff --git a/apps/ligo-virgo/src/assets/images/logo.svg b/apps/ligo-virgo/src/assets/images/logo.svg new file mode 100644 index 0000000000..2180acf189 --- /dev/null +++ b/apps/ligo-virgo/src/assets/images/logo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/ligo-virgo/src/pages/workspace/docs/Page.tsx b/apps/ligo-virgo/src/pages/workspace/docs/Page.tsx index b2ebc5f7dc..556ca606a7 100644 --- a/apps/ligo-virgo/src/pages/workspace/docs/Page.tsx +++ b/apps/ligo-virgo/src/pages/workspace/docs/Page.tsx @@ -31,7 +31,7 @@ import { WorkspaceName } from './workspace-name'; import { CollapsiblePageTree } from './collapsible-page-tree'; import { useFlag } from '@toeverything/datasource/feature-flags'; import { type BlockEditor } from '@toeverything/components/editor-core'; - +import { Tabs } from './components/tabs'; type PageProps = { workspace: string; }; @@ -80,7 +80,9 @@ export function Page(props: PageProps) { onMouseLeave={() => setSpaceSidebarVisible(false)} > - + + +
{dailyNotesFlag && ( @@ -219,4 +221,5 @@ const WorkspaceSidebar = styled('div')(({ hidden }) => ({ const WorkspaceSidebarContent = styled('div')({ flex: 'auto', overflow: 'hidden auto', + marginTop: '18px', }); diff --git a/apps/ligo-virgo/src/pages/workspace/docs/components/tabs/Tabs.tsx b/apps/ligo-virgo/src/pages/workspace/docs/components/tabs/Tabs.tsx new file mode 100644 index 0000000000..3722c5e162 --- /dev/null +++ b/apps/ligo-virgo/src/pages/workspace/docs/components/tabs/Tabs.tsx @@ -0,0 +1,61 @@ +import { useState } from 'react'; +import { MuiDivider as Divider, styled } from '@toeverything/components/ui'; +import type { ValueOf } from '@toeverything/utils'; + +const StyledTabs = styled('div')({ + width: '100%', + height: '12px', + marginTop: '12px', + display: 'flex', + alignItems: 'center', + cursor: 'pointer', +}); + +const StyledDivider = styled(Divider)<{ isActive?: boolean }>( + ({ isActive }) => { + return { + flex: 1, + backgroundColor: isActive ? '#3E6FDB' : '#ECF1FB', + borderWidth: '2px', + }; + } +); + +const TAB_TITLE = { + PAGES: 'pages', + GALLERY: 'gallery', + TOC: 'toc', +} as const; + +const TabMap = new Map([ + ['PAGES', 'pages'], + ['GALLERY', 'gallery'], + ['TOC', 'toc'], +]); + +type TabKey = keyof typeof TAB_TITLE; +type TabValue = ValueOf; + +const Tabs = () => { + const [activeTab, setActiveTab] = useState(TAB_TITLE.PAGES); + + const onClick = (v: TabValue) => { + setActiveTab(v); + }; + + return ( + + {[...TabMap.entries()].map(([k, v]) => { + return ( + onClick(v)} + /> + ); + })} + + ); +}; + +export { Tabs }; diff --git a/apps/ligo-virgo/src/pages/workspace/docs/components/tabs/index.ts b/apps/ligo-virgo/src/pages/workspace/docs/components/tabs/index.ts new file mode 100644 index 0000000000..941e6baba5 --- /dev/null +++ b/apps/ligo-virgo/src/pages/workspace/docs/components/tabs/index.ts @@ -0,0 +1 @@ +export { Tabs } from './Tabs'; diff --git a/apps/ligo-virgo/src/pages/workspace/docs/workspace-name.tsx b/apps/ligo-virgo/src/pages/workspace/docs/workspace-name.tsx index 24d69b659a..35b52ee264 100644 --- a/apps/ligo-virgo/src/pages/workspace/docs/workspace-name.tsx +++ b/apps/ligo-virgo/src/pages/workspace/docs/workspace-name.tsx @@ -1,27 +1,29 @@ import { - MuiButton as Button, - Switch, styled, MuiOutlinedInput as OutlinedInput, } from '@toeverything/components/ui'; -import { LogoIcon } from '@toeverything/components/icons'; +import { PinIcon } from '@toeverything/components/icons'; +import logo from '../../../assets/images/logo.svg'; import { useUserAndSpaces, useShowSpaceSidebar, } from '@toeverything/datasource/state'; -import { useCallback, useEffect, useRef, useState } from 'react'; +import React, { useCallback, useEffect, useState } from 'react'; +import type { CSSProperties } from 'react'; import { services } from '@toeverything/datasource/db-service'; const WorkspaceContainer = styled('div')({ display: 'flex', - alignItems: 'center', - minHeight: 60, - padding: '12px 0px', + flexDirection: 'column', + paddingBottom: '12px', color: '#566B7D', }); const LeftContainer = styled('div')({ flex: 'auto', display: 'flex', + height: '52px', + alignItems: 'center', + margin: '0 12px', }); const LogoContainer = styled('div')({ @@ -32,20 +34,40 @@ const LogoContainer = styled('div')({ minWidth: 24, }); -const StyledLogoIcon = styled(LogoIcon)(({ theme }) => { - return { - color: theme.affine.palette.primary, - width: '16px !important', - height: '16px !important', - }; +export const LogoImg = ({ style = {} }: { style?: CSSProperties }) => { + return AFFiNE Logo; +}; + +const StyledPin = styled('div')({ + display: 'flex', + justifyContent: 'end', + alignItems: 'center', +}); + +const StyledWorkspace = styled('div')({ + height: '100%', + display: 'flex', + flexDirection: 'column', + justifyContent: 'space-between', + marginLeft: '12px', + paddingLeft: '12px', +}); + +const StyledWorkspaceDesc = styled('div')({ + fontSize: '12px', + color: '#98ACBD', + height: '18px', + + display: 'flex', + alignItems: 'center', }); const WorkspaceNameContainer = styled('div')({ display: 'flex', alignItems: 'center', flex: 'auto', - width: '100px', - marginRight: '10px', + width: '165px', + height: '34px', input: { padding: '5px 10px', }, @@ -58,21 +80,15 @@ const WorkspaceNameContainer = styled('div')({ }); const WorkspaceReNameContainer = styled('div')({ - marginRight: '10px', + height: '34px', + display: 'flex', + alignItems: 'center', + input: { padding: '5px 10px', }, }); -const ToggleDisplayContainer = styled('div')({ - display: 'flex', - alignItems: 'center', - fontSize: 12, - color: '#3E6FDB', - padding: 6, - minWidth: 64, -}); - export const WorkspaceName = () => { const { currentSpaceId } = useUserAndSpaces(); const { fixedDisplay, toggleSpaceSidebar } = useShowSpaceSidebar(); @@ -139,35 +155,46 @@ export const WorkspaceName = () => { return ( + + + - + - {inRename ? ( - - setInRename(false)} - /> - - ) : ( - - setInRename(true)}> - {workspaceName || workspaceId} - - - )} + + {inRename ? ( + + setInRename(false)} + /> + + ) : ( + + setInRename(true)}> + {workspaceName || workspaceId} + + + )} + + + To shape, Not to Adapt. + + - - - ); };