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

fix(core): make right-sidebar scrollable (#8830)

Browse Source
This commit is contained in:
CatsJuice 2024-11-18 08:47:12 +00:00
parent bd7c422c46
commit 9642566086
No known key found for this signature in database
GPG Key ID: 1C1E76924FAFDDE4
3 changed files with 29 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page.css.ts
View File

@ -44,3 +44,7 @@ export const affineDocViewport = style({
export const scrollbar = style({
marginRight: '4px',
});
export const sidebarScrollArea = style({
height: '100%',
});

28
packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page.tsx
View File

@ -302,19 +302,39 @@ const DetailPageImpl = memo(function DetailPageImpl() {
)}
<ViewSidebarTab tabId="properties" icon={<PropertyIcon />}>
<DocPropertySidebar />
<Scrollable.Root className={styles.sidebarScrollArea}>
<Scrollable.Viewport>
<DocPropertySidebar />
</Scrollable.Viewport>
<Scrollable.Scrollbar />
</Scrollable.Root>
</ViewSidebarTab>
<ViewSidebarTab tabId="journal" icon={<TodayIcon />}>
<EditorJournalPanel />
<Scrollable.Root className={styles.sidebarScrollArea}>
<Scrollable.Viewport>
<EditorJournalPanel />
</Scrollable.Viewport>
<Scrollable.Scrollbar />
</Scrollable.Root>
</ViewSidebarTab>
<ViewSidebarTab tabId="outline" icon={<TocIcon />}>
<EditorOutlinePanel editor={editorContainer} />
<Scrollable.Root className={styles.sidebarScrollArea}>
<Scrollable.Viewport>
<EditorOutlinePanel editor={editorContainer} />
</Scrollable.Viewport>
<Scrollable.Scrollbar />
</Scrollable.Root>
</ViewSidebarTab>
<ViewSidebarTab tabId="frame" icon={<FrameIcon />}>
<EditorFramePanel editor={editorContainer} />
<Scrollable.Root className={styles.sidebarScrollArea}>
<Scrollable.Viewport>
<EditorFramePanel editor={editorContainer} />
</Scrollable.Viewport>
<Scrollable.Scrollbar />
</Scrollable.Root>
</ViewSidebarTab>
<GlobalPageHistoryModal />

3
packages/frontend/core/src/modules/workbench/view/sidebar/sidebar-container.css.ts
View File

@ -24,10 +24,9 @@ export const sidebarContainerInner = style({
export const sidebarBodyTarget = style({
display: 'flex',
flexDirection: 'column',
height: 0,
flex: 1,
width: '100%',
height: '100%',
overflow: 'hidden',
alignItems: 'center',
});