From 380f40ebed1c8f7edf0fc6fb51df9c244405bb11 Mon Sep 17 00:00:00 2001 From: Cats Juice Date: Thu, 19 Jun 2025 10:15:42 +0800 Subject: [PATCH] style(core): adjust app sidebar style (#12852) ## Summary by CodeRabbit - **Style** - Adjusted layout and spacing in sidebar and quick search components for a more compact appearance. - Reduced header and tab heights in the desktop app, increasing main view space. - Updated add-page button size, padding, and font for improved usability. - Refined menu positioning in workspace selector for dense layouts. - Improved macOS window button positioning for better alignment. - Updated and restructured iOS app dependencies. Co-authored-by: fengmk2 --- .../src/main/windows-manager/tab-views.ts | 2 +- .../Packages/Intelligents/Package.resolved | 60 +++++++------------ .../components/root-app-sidebar/index.css.ts | 4 +- .../components/workspace-selector/index.tsx | 2 +- .../components/app-container/styles.css.ts | 4 +- .../pages/workspace/layouts/styles.css.ts | 33 ---------- .../views/add-page-button/index.css.ts | 10 ++-- .../views/quick-search-input/index.css.ts | 3 +- .../app-tabs-header/views/styles.css.ts | 2 +- 9 files changed, 35 insertions(+), 85 deletions(-) delete mode 100644 packages/frontend/core/src/desktop/pages/workspace/layouts/styles.css.ts diff --git a/packages/frontend/apps/electron/src/main/windows-manager/tab-views.ts b/packages/frontend/apps/electron/src/main/windows-manager/tab-views.ts index c099dab9ac..be446fbfc8 100644 --- a/packages/frontend/apps/electron/src/main/windows-manager/tab-views.ts +++ b/packages/frontend/apps/electron/src/main/windows-manager/tab-views.ts @@ -925,7 +925,7 @@ export async function handleWebContentsResize(webContents?: WebContents) { if (isMacOS()) { const window = await getMainWindow(); const factor = webContents?.getZoomFactor() || 1; - window?.setWindowButtonPosition({ x: 16 * factor, y: 24 * factor - 6 }); + window?.setWindowButtonPosition({ x: 14 * factor, y: 14 * factor - 2 }); } } diff --git a/packages/frontend/apps/ios/App/Packages/Intelligents/Package.resolved b/packages/frontend/apps/ios/App/Packages/Intelligents/Package.resolved index 96fcf491f8..a0763ea436 100644 --- a/packages/frontend/apps/ios/App/Packages/Intelligents/Package.resolved +++ b/packages/frontend/apps/ios/App/Packages/Intelligents/Package.resolved @@ -5,44 +5,26 @@ "kind" : "remoteSourceControl", "location" : "https://github.com/apollographql/apollo-ios.git", "state" : { - "revision" : "c3f48d45ec1300bc95243bf19f67284f9dc0d14a", - "version" : "1.15.3" + "revision" : "39fea7617346c0731be25f61afd537e7032fb562", + "version" : "1.22.0" } }, { - "identity" : "msdisplaylink", + "identity" : "chidorimenu", "kind" : "remoteSourceControl", - "location" : "https://github.com/Lakr233/MSDisplayLink", + "location" : "https://github.com/Lakr233/ChidoriMenu", "state" : { - "revision" : "6e92b5513e3473e064685e64056c4ac46470e7b0", - "version" : "2.0.3" + "revision" : "3bb4323fe0f7f8f435d15656c3eeffcbb7c9c605", + "version" : "3.0.0" } }, { - "identity" : "networkimage", + "identity" : "splash", "kind" : "remoteSourceControl", - "location" : "https://github.com/gonzalezreal/NetworkImage", + "location" : "https://github.com/JohnSundell/Splash", "state" : { - "revision" : "2849f5323265386e200484b0d0f896e73c3411b9", - "version" : "6.0.1" - } - }, - { - "identity" : "springinterpolation", - "kind" : "remoteSourceControl", - "location" : "https://github.com/Lakr233/SpringInterpolation", - "state" : { - "revision" : "f9d1ee3d2466bdb00fd0ade7f256ed20229c8413", - "version" : "1.3.0" - } - }, - { - "identity" : "sqlite.swift", - "kind" : "remoteSourceControl", - "location" : "https://github.com/stephencelis/SQLite.swift.git", - "state" : { - "revision" : "a95fc6df17d108bd99210db5e8a9bac90fe984b8", - "version" : "0.15.3" + "revision" : "7f4df436eb78fe64fe2c32c58006e9949fa28ad8", + "version" : "0.16.0" } }, { @@ -50,8 +32,17 @@ "kind" : "remoteSourceControl", "location" : "https://github.com/swiftlang/swift-cmark", "state" : { - "revision" : "3ccff77b2dc5b96b77db3da0d68d28068593fa53", - "version" : "0.5.0" + "revision" : "b022b08312decdc46585e0b3440d97f6f22ef703", + "version" : "0.6.0" + } + }, + { + "identity" : "swift-collections", + "kind" : "remoteSourceControl", + "location" : "https://github.com/apple/swift-collections", + "state" : { + "revision" : "c1805596154bb3a265fd91b8ac0c4433b4348fb0", + "version" : "1.2.0" } }, { @@ -62,15 +53,6 @@ "revision" : "57051701c58a93603ffa2051f8e9cf0c8cff7814", "version" : "3.3.0" } - }, - { - "identity" : "swift-markdown-ui", - "kind" : "remoteSourceControl", - "location" : "https://github.com/gonzalezreal/swift-markdown-ui", - "state" : { - "revision" : "5f613358148239d0292c0cef674a3c2314737f9e", - "version" : "2.4.1" - } } ], "version" : 2 diff --git a/packages/frontend/core/src/components/root-app-sidebar/index.css.ts b/packages/frontend/core/src/components/root-app-sidebar/index.css.ts index 267737286e..b721bd56ab 100644 --- a/packages/frontend/core/src/components/root-app-sidebar/index.css.ts +++ b/packages/frontend/core/src/components/root-app-sidebar/index.css.ts @@ -6,6 +6,7 @@ export const workspaceAndUserWrapper = style({ justifyContent: 'space-between', gap: 8, width: 'calc(100% + 12px)', + height: 42, paddingRight: 6, alignSelf: 'center', }); @@ -13,8 +14,9 @@ export const quickSearchAndNewPage = style({ display: 'flex', alignItems: 'center', gap: 8, - padding: '8px 0', + padding: '4px 0', marginLeft: -8, + marginRight: -6, }); export const quickSearch = style({ width: 0, diff --git a/packages/frontend/core/src/components/workspace-selector/index.tsx b/packages/frontend/core/src/components/workspace-selector/index.tsx index 28fc558ba0..06d800683d 100644 --- a/packages/frontend/core/src/components/workspace-selector/index.tsx +++ b/packages/frontend/core/src/components/workspace-selector/index.tsx @@ -113,7 +113,7 @@ export const WorkspaceSelector = ({ } contentOptions={{ // hide trigger - sideOffset: -58, + sideOffset: dense ? -32 : -58, onInteractOutside: closeUserWorkspaceList, onEscapeKeyDown: closeUserWorkspaceList, ...menuContentOptions, diff --git a/packages/frontend/core/src/desktop/components/app-container/styles.css.ts b/packages/frontend/core/src/desktop/components/app-container/styles.css.ts index e3b0a61488..6b13276216 100644 --- a/packages/frontend/core/src/desktop/components/app-container/styles.css.ts +++ b/packages/frontend/core/src/desktop/components/app-container/styles.css.ts @@ -59,14 +59,14 @@ export const desktopAppViewMain = style({ display: 'flex', flexFlow: 'row', width: '100%', - height: 'calc(100% - 52px)', + height: 'calc(100% - 40px)', position: 'relative', }); export const desktopTabsHeader = style({ display: 'flex', flexFlow: 'row', - height: '52px', + height: '40px', zIndex: 1, width: '100%', overflow: 'hidden', diff --git a/packages/frontend/core/src/desktop/pages/workspace/layouts/styles.css.ts b/packages/frontend/core/src/desktop/pages/workspace/layouts/styles.css.ts deleted file mode 100644 index 64a6e16cdc..0000000000 --- a/packages/frontend/core/src/desktop/pages/workspace/layouts/styles.css.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { style } from '@vanilla-extract/css'; - -export const browserAppViewContainer = style({ - display: 'flex', - flexFlow: 'row', - height: '100%', - width: '100%', - position: 'relative', -}); - -export const desktopAppViewContainer = style({ - display: 'flex', - flexFlow: 'column', - height: '100%', - width: '100%', -}); - -export const desktopAppViewMain = style({ - display: 'flex', - flexFlow: 'row', - width: '100%', - height: 'calc(100% - 52px)', - position: 'relative', -}); - -export const desktopTabsHeader = style({ - display: 'flex', - flexFlow: 'row', - height: '52px', - zIndex: 1, - width: '100%', - overflow: 'hidden', -}); diff --git a/packages/frontend/core/src/modules/app-sidebar/views/add-page-button/index.css.ts b/packages/frontend/core/src/modules/app-sidebar/views/add-page-button/index.css.ts index 3cfd89df6d..f4efb04526 100644 --- a/packages/frontend/core/src/modules/app-sidebar/views/add-page-button/index.css.ts +++ b/packages/frontend/core/src/modules/app-sidebar/views/add-page-button/index.css.ts @@ -3,9 +3,9 @@ import { cssVarV2 } from '@toeverything/theme/v2'; import { style } from '@vanilla-extract/css'; export const root = style({ - width: 20, - height: 20, - borderRadius: 4, + width: 30, + height: 30, + borderRadius: 8, boxShadow: cssVar('buttonShadow'), borderWidth: 0, background: cssVarV2('button/siderbarPrimary/background'), @@ -15,12 +15,12 @@ export const withAskRoot = style([ root, { width: 'auto', - padding: 4, + padding: 7, }, ]); export const withAskContent = style({ - fontSize: 20, + fontSize: 16, display: 'flex', alignItems: 'center', gap: 4, diff --git a/packages/frontend/core/src/modules/app-sidebar/views/quick-search-input/index.css.ts b/packages/frontend/core/src/modules/app-sidebar/views/quick-search-input/index.css.ts index 24bdc75f93..e0a4760b82 100644 --- a/packages/frontend/core/src/modules/app-sidebar/views/quick-search-input/index.css.ts +++ b/packages/frontend/core/src/modules/app-sidebar/views/quick-search-input/index.css.ts @@ -3,9 +3,8 @@ import { cssVarV2 } from '@toeverything/theme/v2'; import { style } from '@vanilla-extract/css'; export const root = style({ display: 'inline-flex', - background: cssVarV2('button/siderbarPrimary/background'), alignItems: 'center', - borderRadius: '8px', + borderRadius: '4px', fontSize: cssVar('fontSm'), width: '100%', height: '30px', diff --git a/packages/frontend/core/src/modules/app-tabs-header/views/styles.css.ts b/packages/frontend/core/src/modules/app-tabs-header/views/styles.css.ts index 9a2ac8e911..7b672e8200 100644 --- a/packages/frontend/core/src/modules/app-tabs-header/views/styles.css.ts +++ b/packages/frontend/core/src/modules/app-tabs-header/views/styles.css.ts @@ -8,7 +8,7 @@ export const tabMaxWidth = createVar('200px'); export const root = style({ width: '100%', - height: '52px', + height: '40px', display: 'flex', alignItems: 'center', flexDirection: 'row',