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

feat(core): replace setting content scroll with radix ScrollArea (#6787)

Browse Source 
Use global scroll-area style

![CleanShot 2024-05-07 at 10.58.01@2x.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/LakojjjzZNf6ogjOVwKE/5330b59d-fea0-4b2b-a046-1740c8099a19.png)
This commit is contained in:
CatsJuice
2024-05-07 03:19:40 +00:00
parent cb3e7d03dc
commit 7234e2344b
3 changed files with 52 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/layout.css.ts
View File

@@ -1,5 +1,5 @@
import { cssVar } from '@toeverything/theme'; import { cssVar } from '@toeverything/theme';
import { keyframes, style } from '@vanilla-extract/css'; import { globalStyle, keyframes, style } from '@vanilla-extract/css';
export const plansLayoutRoot = style({ export const plansLayoutRoot = style({
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
@@ -100,7 +100,6 @@ export const aiScrollTip = style({
justifyContent: 'space-between', justifyContent: 'space-between',
padding: '12px 20px 12px 16px', padding: '12px 20px 12px 16px',
boxShadow: cssVar('shadow1'), boxShadow: cssVar('shadow1'),
display: 'flex',
marginBottom: -100, marginBottom: -100,
animation: `${slideInBottom} 0.3s ease 0.5s forwards`, animation: `${slideInBottom} 0.3s ease 0.5s forwards`,
@@ -112,6 +111,10 @@ export const aiScrollTip = style({
}, },
}, },
}); });
// to override `display: contents !important` in `scrollable.tsx`
globalStyle(`div.${aiScrollTip}`, {
display: 'flex !important',
});
export const aiScrollTipLabel = style({ export const aiScrollTipLabel = style({
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',

91
packages/frontend/core/src/components/affine/setting-modal/index.tsx
View File

@@ -1,4 +1,4 @@
import { Loading } from '@affine/component'; import { Loading, Scrollable } from '@affine/component';
import { WorkspaceDetailSkeleton } from '@affine/component/setting-components'; import { WorkspaceDetailSkeleton } from '@affine/component/setting-components';
import type { ModalProps } from '@affine/component/ui/modal'; import type { ModalProps } from '@affine/component/ui/modal';
import { Modal } from '@affine/component/ui/modal'; import { Modal } from '@affine/component/ui/modal';
@@ -139,51 +139,54 @@ const SettingModalInner = ({
onTabChange={onTabChange} onTabChange={onTabChange}
selectedWorkspaceId={workspaceMetadata?.id ?? null} selectedWorkspaceId={workspaceMetadata?.id ?? null}
/> />
<div <Scrollable.Root>
data-testid="setting-modal-content" <Scrollable.Viewport
className={style.wrapper} data-testid="setting-modal-content"
ref={modalContentWrapperRef} className={style.wrapper}
> ref={modalContentWrapperRef}
<div ref={modalContentRef} className={style.centerContainer}> >
<div className={style.content}> <div ref={modalContentRef} className={style.centerContainer}>
<Suspense fallback={<WorkspaceDetailSkeleton />}> <div className={style.content}>
{activeTab.startsWith('workspace:') && workspaceMetadata ? ( <Suspense fallback={<WorkspaceDetailSkeleton />}>
<WorkspaceSetting {activeTab.startsWith('workspace:') && workspaceMetadata ? (
subTab={activeTab.split(':')[1] as WorkspaceSubTab} <WorkspaceSetting
key={workspaceMetadata.id} subTab={activeTab.split(':')[1] as WorkspaceSubTab}
workspaceMetadata={workspaceMetadata} key={workspaceMetadata.id}
/> workspaceMetadata={workspaceMetadata}
) : null}
{isGeneralSetting(activeTab) ? (
<GeneralSetting generalKey={activeTab} />
) : null}
{activeTab === 'account' && loginStatus === 'authenticated' ? (
<AccountSetting />
) : null}
</Suspense>
</div>
<div className={style.footer}>
<ContactWithUsIcon fontSize={16} />
<Trans
i18nKey={'com.affine.settings.suggestion-2'}
components={{
1: (
<span
className={style.link}
onClick={handleOpenStarAFFiNEModal}
/> />
), ) : null}
2: ( {isGeneralSetting(activeTab) ? (
<span <GeneralSetting generalKey={activeTab} />
className={style.link} ) : null}
onClick={handleOpenIssueFeedbackModal} {activeTab === 'account' && loginStatus === 'authenticated' ? (
/> <AccountSetting />
), ) : null}
}} </Suspense>
/> </div>
<div className={style.footer}>
<ContactWithUsIcon fontSize={16} />
<Trans
i18nKey={'com.affine.settings.suggestion-2'}
components={{
1: (
<span
className={style.link}
onClick={handleOpenStarAFFiNEModal}
/>
),
2: (
<span
className={style.link}
onClick={handleOpenIssueFeedbackModal}
/>
),
}}
/>
</div>
</div> </div>
</div> <Scrollable.Scrollbar />
</div> </Scrollable.Viewport>
</Scrollable.Root>
</> </>
); );
}; };

5
packages/frontend/core/src/components/affine/setting-modal/style.css.ts
View File

@@ -5,13 +5,8 @@ export const wrapper = style({
height: '100%', height: '100%',
// margin: '0 auto', // margin: '0 auto',
padding: '40px 15px 20px 15px', padding: '40px 15px 20px 15px',
overflowX: 'hidden',
overflowY: 'auto',
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: 'center',
'::-webkit-scrollbar': {
display: 'none',
},
}); });
export const centerContainer = style({ export const centerContainer = style({
width: '100%', width: '100%',