luulam/AFFiNE
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix(core): optimize settings dialog's left sidebar scroll style (#13237)

Browse Source 
change from scrolling the entire left side to scrolling menu items

**before**


https://github.com/user-attachments/assets/85d5c518-5160-493e-9010-431e6f0ed51b



**after**


https://github.com/user-attachments/assets/2efcdfde-7005-4d38-8dfb-2aef5e123946




<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **New Features**
* Added vertical scrolling with a visible scrollbar to the settings
sidebar for easier navigation of setting groups.

* **Style**
* Updated sidebar padding and spacing for improved layout and
appearance.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Kieran Cui
2025-07-16 15:16:55 +08:00
committed by GitHub
parent 7b9e0a215d
commit 3949714618
2 changed files with 15 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
packages/frontend/core/src/desktop/dialogs/setting/setting-sidebar/index.tsx
View File

@@ -1,3 +1,4 @@
import { Scrollable } from '@affine/component';
import { Avatar } from '@affine/component/ui/avatar'; import { Avatar } from '@affine/component/ui/avatar';
import { UserPlanButton } from '@affine/core/components/affine/auth/user-plan-button'; import { UserPlanButton } from '@affine/core/components/affine/auth/user-plan-button';
import { useCatchEventCallback } from '@affine/core/components/hooks/use-catch-event-hook'; import { useCatchEventCallback } from '@affine/core/components/hooks/use-catch-event-hook';
@@ -225,13 +226,18 @@ export const SettingSidebar = ({
</Suspense> </Suspense>
) : null} ) : null}
{groups.map(group => ( <Scrollable.Root>
<SettingSidebarGroup <Scrollable.Viewport>
key={group.key} {groups.map(group => (
title={group.title} <SettingSidebarGroup
items={group.items} key={group.key}
/> title={group.title}
))} items={group.items}
/>
))}
<Scrollable.Scrollbar />
</Scrollable.Viewport>
</Scrollable.Root>
</div> </div>
); );
}; };

3
packages/frontend/core/src/desktop/dialogs/setting/setting-sidebar/style.css.ts
View File

@@ -5,7 +5,7 @@ export const settingSlideBar = style({
width: '25%', width: '25%',
maxWidth: '242px', maxWidth: '242px',
background: cssVar('backgroundSecondaryColor'), background: cssVar('backgroundSecondaryColor'),
padding: '20px 12px', padding: '20px 0px 0px 12px',
height: '100%', height: '100%',
flexShrink: 0, flexShrink: 0,
display: 'flex', display: 'flex',
@@ -123,6 +123,7 @@ export const sidebarGroup = style({
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
gap: '4px', gap: '4px',
paddingRight: '12px',
}); });
export const accountButton = style({ export const accountButton = style({