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

feat(core): page preview ui optimize (#5442)

Browse Source 
![CleanShot 2023-12-28 at 23.42.44@2x.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/16b66e74-4b0d-48a5-9062-c86c94f6b065.png)
fix TOV-92

No animations right now.
This commit is contained in:
Peng Xiao
2024-01-03 03:30:43 +00:00
parent 6cb62ed25d
commit a709624ebf
2 changed files with 119 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
packages/frontend/core/src/components/affine/page-history-modal/history-modal.tsx
View File

@@ -120,41 +120,43 @@ const HistoryEditorPreview = ({
return ( return (
<div className={styles.previewWrapper}> <div className={styles.previewWrapper}>
<div className={styles.previewHeader}> <div className={styles.previewContainerStack2} />
<StyledEditorModeSwitch switchLeft={mode === 'page'}> <div className={styles.previewContainerStack1} />
<PageSwitchItem <div className={styles.previewContainer}>
data-testid="switch-page-mode-button" <div className={styles.previewHeader}>
active={mode === 'page'} <StyledEditorModeSwitch switchLeft={mode === 'page'}>
onClick={onSwitchToPageMode} <PageSwitchItem
/> data-testid="switch-page-mode-button"
<EdgelessSwitchItem active={mode === 'page'}
data-testid="switch-edgeless-mode-button" onClick={onSwitchToPageMode}
active={mode === 'edgeless'} />
onClick={onSwitchToEdgelessMode} <EdgelessSwitchItem
/> data-testid="switch-edgeless-mode-button"
</StyledEditorModeSwitch> active={mode === 'edgeless'}
onClick={onSwitchToEdgelessMode}
<div className={styles.previewHeaderTitle}>{title}</div> />
</StyledEditorModeSwitch>
<div className={styles.previewHeaderTimestamp}> <div className={styles.previewHeaderTitle}>{title}</div>
{ts ? timestampToLocalTime(ts) : null} <div className={styles.previewHeaderTimestamp}>
{ts ? timestampToLocalTime(ts) : null}
</div>
</div> </div>
{snapshotPage ? (
<AffineErrorBoundary>
<BlockSuiteEditor
className={styles.editor}
mode={mode}
page={snapshotPage}
onModeChange={onModeChange}
/>
</AffineErrorBoundary>
) : (
<div className={styles.loadingContainer}>
<Loading size={24} />
</div>
)}
</div> </div>
{snapshotPage ? (
<AffineErrorBoundary>
<BlockSuiteEditor
className={styles.editor}
mode={mode}
page={snapshotPage}
onModeChange={onModeChange}
/>
</AffineErrorBoundary>
) : (
<div className={styles.loadingContainer}>
<Loading size={24} />
</div>
)}
</div> </div>
); );
}; };
@@ -182,43 +184,57 @@ const PlanPrompt = () => {
const t = useAFFiNEI18N(); const t = useAFFiNEI18N();
const planTitle = useMemo(() => {
return (
<div className={styles.planPromptTitle}>
{freePlan
? t[
'com.affine.history.confirm-restore-modal.plan-prompt.limited-title'
]()
: t['com.affine.history.confirm-restore-modal.plan-prompt.title']()}
<IconButton
size="small"
icon={<CloseIcon />}
onClick={closeFreePlanPrompt}
/>
</div>
);
}, [closeFreePlanPrompt, freePlan, t]);
const planDescription = useMemo(() => {
if (freePlan) {
return (
<>
<Trans i18nKey="com.affine.history.confirm-restore-modal.free-plan-prompt.description">
Free users can view up to the <b>last 7 days</b> of page history.
</Trans>
{isOwner ? (
<span
className={styles.planPromptUpdateButton}
onClick={onClickUpgrade}
>
{t[
'com.affine.history.confirm-restore-modal.pro-plan-prompt.upgrade'
]()}
</span>
) : null}
</>
);
} else {
return (
<Trans i18nKey="com.affine.history.confirm-restore-modal.pro-plan-prompt.description">
Pro users can view up to the <b>last 30 days</b> of page history.
</Trans>
);
}
}, [freePlan, isOwner, onClickUpgrade, t]);
return !planPromptClosed ? ( return !planPromptClosed ? (
<div className={styles.planPromptWrapper}> <div className={styles.planPromptWrapper}>
<div className={styles.planPrompt}> <div className={styles.planPrompt}>
<div className={styles.planPromptTitle}> {planTitle}
{freePlan {planDescription}
? t[
'com.affine.history.confirm-restore-modal.plan-prompt.limited-title'
]()
: t['com.affine.history.confirm-restore-modal.plan-prompt.title']()}
<IconButton
size="small"
icon={<CloseIcon />}
onClick={closeFreePlanPrompt}
/>
</div>
{freePlan ? (
<>
<Trans i18nKey="com.affine.history.confirm-restore-modal.free-plan-prompt.description">
Free users can view up to the <b>last 7 days</b> of page history.
</Trans>
{isOwner ? (
<span
className={styles.planPromptUpdateButton}
onClick={onClickUpgrade}
>
{t[
'com.affine.history.confirm-restore-modal.pro-plan-prompt.upgrade'
]()}
</span>
) : null}
</>
) : (
<Trans i18nKey="com.affine.history.confirm-restore-modal.pro-plan-prompt.description">
Pro users can view up to the <b>last 30 days</b> of page history.
</Trans>
)}
</div> </div>
</div> </div>
) : null; ) : null;

36
packages/frontend/core/src/components/affine/page-history-modal/styles.css.ts
View File

@@ -32,10 +32,46 @@ export const previewWrapper = style({
flexDirection: 'column', flexDirection: 'column',
flexGrow: 1, flexGrow: 1,
height: '100%', height: '100%',
position: 'relative',
overflow: 'hidden',
width: `calc(100% - ${historyListWidth})`, width: `calc(100% - ${historyListWidth})`,
backgroundColor: 'var(--affine-background-secondary-color)', backgroundColor: 'var(--affine-background-secondary-color)',
}); });
export const previewContainer = style({
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
position: 'absolute',
bottom: 0,
left: 40,
borderTopLeftRadius: 8,
borderTopRightRadius: 8,
overflow: 'hidden',
boxShadow: 'var(--affine-shadow-3)',
height: 'calc(100% - 40px)',
width: `calc(100% - 80px)`,
backgroundColor: 'var(--affine-background-secondary-color)',
});
export const previewContainerStack1 = style([
previewContainer,
{
left: 48,
height: 'calc(100% - 32px)',
width: `calc(100% - 96px)`,
},
]);
export const previewContainerStack2 = style([
previewContainer,
{
left: 56,
height: 'calc(100% - 24px)',
width: `calc(100% - 112px)`,
},
]);
export const previewHeader = style({ export const previewHeader = style({
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',