toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-11-26 00:52:30 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: added scrollbar at the correct position (#3506)

Browse Source 
Co-authored-by: JimmFly <yangjinfei001@gmail.com>
This commit is contained in:
Pratik Kumar 2023-08-04 08:20:22 +05:30 committed by GitHub
parent 1c7c27712e
commit 1012807c65
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
apps/core/src/components/affine/setting-modal/setting-sidebar/index.tsx
View File

@ -1,4 +1,4 @@
import { Tooltip } from '@affine/component'; import { ScrollableContainer, Tooltip } from '@affine/component';
import { import {
WorkspaceListItemSkeleton, WorkspaceListItemSkeleton,
WorkspaceListSkeleton, WorkspaceListSkeleton,
@ -76,10 +76,12 @@ export const SettingSidebar: FC<{
</div> </div>
<div className={clsx(sidebarItemsWrapper, 'scroll')}> <div className={clsx(sidebarItemsWrapper, 'scroll')}>
<Suspense fallback={<WorkspaceListSkeleton />}> <Suspense fallback={<WorkspaceListSkeleton />}>
<WorkspaceList <ScrollableContainer>
onWorkspaceSettingClick={onWorkspaceSettingClick} <WorkspaceList
selectedWorkspaceId={selectedWorkspaceId} onWorkspaceSettingClick={onWorkspaceSettingClick}
/> selectedWorkspaceId={selectedWorkspaceId}
/>
</ScrollableContainer>
</Suspense> </Suspense>
</div> </div>
</div> </div>

12
apps/core/src/components/affine/setting-modal/setting-sidebar/style.css.ts
View File

@ -4,7 +4,7 @@ export const settingSlideBar = style({
width: '25%', width: '25%',
maxWidth: '242px', maxWidth: '242px',
background: 'var(--affine-background-secondary-color)', background: 'var(--affine-background-secondary-color)',
padding: '20px 16px', padding: '20px 0px',
height: '100%', height: '100%',
flexShrink: 0, flexShrink: 0,
display: 'flex', display: 'flex',
@ -15,14 +15,14 @@ export const sidebarTitle = style({
fontSize: 'var(--affine-font-h-6)', fontSize: 'var(--affine-font-h-6)',
fontWeight: '600', fontWeight: '600',
lineHeight: 'var(--affine-line-height)', lineHeight: 'var(--affine-line-height)',
paddingLeft: '8px', padding: '0px 16px 0px 24px',
}); });
export const sidebarSubtitle = style({ export const sidebarSubtitle = style({
fontSize: 'var(--affine-font-sm)', fontSize: 'var(--affine-font-sm)',
lineHeight: 'var(--affine-line-height)', lineHeight: 'var(--affine-line-height)',
color: 'var(--affine-text-secondary-color)', color: 'var(--affine-text-secondary-color)',
paddingLeft: '8px', padding: '0px 16px 0px 24px',
marginTop: '20px', marginTop: '20px',
marginBottom: '4px', marginBottom: '4px',
display: 'flex', display: 'flex',
@ -34,7 +34,7 @@ export const sidebarItemsWrapper = style({
selectors: { selectors: {
'&.scroll': { '&.scroll': {
flexGrow: 1, flexGrow: 1,
overflowY: 'auto', overflowY: 'hidden',
}, },
}, },
}); });
@ -42,9 +42,9 @@ export const sidebarItemsWrapper = style({
export const sidebarSelectItem = style({ export const sidebarSelectItem = style({
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
padding: '0 8px', margin: '0px 16px 4px 16px',
padding: '0px 8px',
height: '30px', height: '30px',
marginBottom: '4px',
fontSize: 'var(--affine-font-sm)', fontSize: 'var(--affine-font-sm)',
borderRadius: '8px', borderRadius: '8px',
cursor: 'pointer', cursor: 'pointer',