mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-13 21:05:19 +00:00
refactor(core): refactor left sidebar to use di (#8385)
This commit is contained in:
JimmFly
@@ -1,8 +1,11 @@
|
||||
import {
|
||||
AppSidebarFallback,
|
||||
ShellAppSidebarFallback,
|
||||
} from '@affine/core/modules/app-sidebar/views';
|
||||
import clsx from 'clsx';
|
||||
import type { PropsWithChildren, ReactElement } from 'react';
|
||||
|
||||
import { useAppSettingHelper } from '../../components/hooks/affine/use-app-setting-helper';
|
||||
import { AppSidebarFallback, ShellAppSidebarFallback } from '../app-sidebar';
|
||||
import type { WorkspaceRootProps } from '../workspace';
|
||||
import {
|
||||
AppContainer as AppContainerWithoutSettings,
|
||||
|
||||
@@ -1,12 +0,0 @@
|
||||
import { cssVarV2 } from '@toeverything/theme/v2';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const root = style({
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: 8,
|
||||
boxShadow: '0px 1px 2px 0px rgba(0, 0, 0, 0.15)',
|
||||
borderWidth: 1,
|
||||
borderColor: cssVarV2('layer/insideBorder/border'),
|
||||
background: cssVarV2('button/siderbarPrimary/background'),
|
||||
});
|
||||
@@ -1,37 +0,0 @@
|
||||
import { IconButton } from '@affine/component';
|
||||
import { useI18n } from '@affine/i18n';
|
||||
import { PlusIcon } from '@blocksuite/icons/rc';
|
||||
import clsx from 'clsx';
|
||||
import type React from 'react';
|
||||
import type { MouseEventHandler } from 'react';
|
||||
|
||||
import * as styles from './index.css';
|
||||
|
||||
interface AddPageButtonProps {
|
||||
onClick?: MouseEventHandler;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
const sideBottom = { side: 'bottom' as const };
|
||||
export function AddPageButton({
|
||||
onClick,
|
||||
className,
|
||||
style,
|
||||
}: AddPageButtonProps) {
|
||||
const t = useI18n();
|
||||
|
||||
return (
|
||||
<IconButton
|
||||
tooltip={t['New Page']()}
|
||||
tooltipOptions={sideBottom}
|
||||
data-testid="sidebar-new-page-button"
|
||||
style={style}
|
||||
className={clsx([styles.root, className])}
|
||||
onClick={onClick}
|
||||
onAuxClick={onClick}
|
||||
>
|
||||
<PlusIcon />
|
||||
</IconButton>
|
||||
);
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
export {
|
||||
closeIcon,
|
||||
ellipsisTextOverflow,
|
||||
halo,
|
||||
icon,
|
||||
particles,
|
||||
root,
|
||||
} from '../app-updater-button/index.css';
|
||||
export const rootPadding = style({
|
||||
padding: '0 24px',
|
||||
});
|
||||
export const label = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
fontSize: cssVar('fontSm'),
|
||||
whiteSpace: 'nowrap',
|
||||
});
|
||||
@@ -1,50 +0,0 @@
|
||||
import { useCatchEventCallback } from '@affine/core/components/hooks/use-catch-event-hook';
|
||||
import { track } from '@affine/track';
|
||||
import { CloseIcon, DownloadIcon } from '@blocksuite/icons/rc';
|
||||
import clsx from 'clsx';
|
||||
import { useCallback, useState } from 'react';
|
||||
|
||||
import * as styles from './index.css';
|
||||
|
||||
// Although it is called an input, it is actually a button.
|
||||
export function AppDownloadButton({
|
||||
className,
|
||||
style,
|
||||
}: {
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
}) {
|
||||
const [show, setShow] = useState(true);
|
||||
|
||||
const handleClose = useCatchEventCallback(() => {
|
||||
setShow(false);
|
||||
}, []);
|
||||
|
||||
// TODO(@JimmFly): unify this type of literal value.
|
||||
const handleClick = useCallback(() => {
|
||||
track.$.navigationPanel.bottomButtons.downloadApp();
|
||||
const url = `https://affine.pro/download?channel=stable`;
|
||||
open(url, '_blank');
|
||||
}, []);
|
||||
|
||||
if (!show) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<button
|
||||
style={style}
|
||||
className={clsx([styles.root, styles.rootPadding, className])}
|
||||
onClick={handleClick}
|
||||
>
|
||||
<div className={clsx([styles.label])}>
|
||||
<DownloadIcon className={styles.icon} />
|
||||
<span className={styles.ellipsisTextOverflow}>Download App</span>
|
||||
</div>
|
||||
<div className={styles.closeIcon} onClick={handleClose}>
|
||||
<CloseIcon />
|
||||
</div>
|
||||
<div className={styles.particles} aria-hidden="true"></div>
|
||||
<span className={styles.halo} aria-hidden="true"></span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 122 116">
|
||||
<path id="b" stroke="#fff" stroke-linecap="round" stroke-width="0" d="M17.9256 115C17.434 111.774 13.1701 104.086 13.4282 95.6465C13.6862 87.207 18.6628 76.0721 17.9256 64.3628C17.1883 52.6535 8.7772 35.9512 9.00452 25.3907C9.23185 14.8302 16.2114 5.06512 17.9256 1"/>
|
||||
<path id="d" stroke="#fff" stroke-linecap="round" stroke-width="0" d="M84.1628 115C85.2376 112.055 94.5618 98.8394 93.9975 91.1338C93.4332 83.4281 82.5505 73.2615 84.1628 62.5704C85.775 51.8793 96.4803 35.4248 95.9832 25.7826C95.4861 16.1404 87.9113 4.71163 84.1628 1"/>
|
||||
<path id="f" stroke="#fff" stroke-linecap="round" stroke-width="0" d="M37.0913 115C37.9604 111.921 44.4347 99.4545 45.3816 92.9773C48.9305 68.7011 35.7877 73.9552 37.0913 62.7781C38.3949 51.6011 47.3889 36.9895 46.9869 26.9091C46.585 16.8286 40.1222 4.88034 37.0913 1"/>
|
||||
<path id="h" stroke="#fff" stroke-linecap="round" stroke-width="0" d="M112.443 115C111.698 112.235 108.25 106.542 107.715 93.7582C107.241 82.4286 107.229 83.9543 112.443 66.1429C116.085 44.0408 100.661 42.5908 101.006 33.539C101.35 24.4871 109.843 4.48439 112.443 1"/>
|
||||
<g>
|
||||
<circle r="1.5" fill="rgba(96, 70, 254, 0.3)">
|
||||
<animateMotion dur="10s" repeatCount="indefinite">
|
||||
<mpath href="#b" />
|
||||
</animateMotion>
|
||||
</circle>
|
||||
</g>
|
||||
<g>
|
||||
<circle r="1" fill="rgba(96, 70, 254, 0.3)" fill-opacity="1" shape-rendering="crispEdges">
|
||||
<animateMotion dur="8s" repeatCount="indefinite">
|
||||
<mpath href="#d" />
|
||||
</animateMotion>
|
||||
</circle>
|
||||
</g>
|
||||
<g>
|
||||
<circle r=".5" fill="rgba(96, 70, 254, 0.3)" fill-opacity="1" shape-rendering="crispEdges">
|
||||
<animateMotion dur="4s" repeatCount="indefinite">
|
||||
<mpath href="#f" />
|
||||
</animateMotion>
|
||||
</circle>
|
||||
</g>
|
||||
<g>
|
||||
<circle r=".8" fill="rgba(96, 70, 254, 0.3)" fill-opacity="1" shape-rendering="crispEdges">
|
||||
<animateMotion dur="6s" repeatCount="indefinite">
|
||||
<mpath href="#h" />
|
||||
</animateMotion>
|
||||
</circle>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.0 KiB |
@@ -1,225 +0,0 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
export const root = style({
|
||||
display: 'inline-flex',
|
||||
background: cssVar('white30'),
|
||||
alignItems: 'center',
|
||||
borderRadius: '8px',
|
||||
border: `1px solid ${cssVar('black10')}`,
|
||||
fontSize: cssVar('fontSm'),
|
||||
width: '100%',
|
||||
height: '52px',
|
||||
userSelect: 'none',
|
||||
cursor: 'pointer',
|
||||
padding: '0 12px',
|
||||
position: 'relative',
|
||||
transition: 'all 0.3s ease',
|
||||
selectors: {
|
||||
'&:hover': {
|
||||
background: cssVar('white60'),
|
||||
},
|
||||
'&[data-disabled="true"]': {
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
'&:after': {
|
||||
content: "''",
|
||||
position: 'absolute',
|
||||
top: '-2px',
|
||||
right: '-2px',
|
||||
width: '8px',
|
||||
height: '8px',
|
||||
backgroundColor: cssVar('primaryColor'),
|
||||
borderRadius: '50%',
|
||||
zIndex: 1,
|
||||
transition: 'opacity 0.3s',
|
||||
},
|
||||
'&:hover:after': {
|
||||
opacity: 0,
|
||||
},
|
||||
},
|
||||
vars: {
|
||||
'--svg-dot-animation': `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 122 116'%3E%3Cpath id='b' stroke='%23fff' stroke-linecap='round' stroke-width='0' d='M17.9256 115C17.434 111.774 13.1701 104.086 13.4282 95.6465C13.6862 87.207 18.6628 76.0721 17.9256 64.3628C17.1883 52.6535 8.7772 35.9512 9.00452 25.3907C9.23185 14.8302 16.2114 5.06512 17.9256 1'/%3E%3Cpath id='d' stroke='%23fff' stroke-linecap='round' stroke-width='0' d='M84.1628 115C85.2376 112.055 94.5618 98.8394 93.9975 91.1338C93.4332 83.4281 82.5505 73.2615 84.1628 62.5704C85.775 51.8793 96.4803 35.4248 95.9832 25.7826C95.4861 16.1404 87.9113 4.71163 84.1628 1'/%3E%3Cpath id='f' stroke='%23fff' stroke-linecap='round' stroke-width='0' d='M37.0913 115C37.9604 111.921 44.4347 99.4545 45.3816 92.9773C48.9305 68.7011 35.7877 73.9552 37.0913 62.7781C38.3949 51.6011 47.3889 36.9895 46.9869 26.9091C46.585 16.8286 40.1222 4.88034 37.0913 1'/%3E%3Cpath id='h' stroke='%23fff' stroke-linecap='round' stroke-width='0' d='M112.443 115C111.698 112.235 108.25 106.542 107.715 93.7582C107.241 82.4286 107.229 83.9543 112.443 66.1429C116.085 44.0408 100.661 42.5908 101.006 33.539C101.35 24.4871 109.843 4.48439 112.443 1'/%3E%3Cg%3E%3Ccircle r='1.5' fill='rgba(30, 150, 235, 0.3)'%3E%3CanimateMotion dur='10s' repeatCount='indefinite'%3E%3Cmpath href='%23b' /%3E%3C/animateMotion%3E%3C/circle%3E%3C/g%3E%3Cg%3E%3Ccircle r='1' fill='rgba(30, 150, 235, 0.3)' fill-opacity='1' shape-rendering='crispEdges'%3E%3CanimateMotion dur='8s' repeatCount='indefinite'%3E%3Cmpath href='%23d' /%3E%3C/animateMotion%3E%3C/circle%3E%3C/g%3E%3Cg%3E%3Ccircle r='.5' fill='rgba(30, 150, 235, 0.3)' fill-opacity='1' shape-rendering='crispEdges'%3E%3CanimateMotion dur='4s' repeatCount='indefinite'%3E%3Cmpath href='%23f' /%3E%3C/animateMotion%3E%3C/circle%3E%3C/g%3E%3Cg%3E%3Ccircle r='.8' fill='rgba(30, 150, 235, 0.3)' fill-opacity='1' shape-rendering='crispEdges'%3E%3CanimateMotion dur='6s' repeatCount='indefinite'%3E%3Cmpath href='%23h' /%3E%3C/animateMotion%3E%3C/circle%3E%3C/g%3E%3C/svg%3E")`,
|
||||
},
|
||||
});
|
||||
export const icon = style({
|
||||
marginRight: '18px',
|
||||
color: cssVar('iconColor'),
|
||||
fontSize: '24px',
|
||||
});
|
||||
export const closeIcon = style({
|
||||
position: 'absolute',
|
||||
top: '4px',
|
||||
right: '4px',
|
||||
height: '14px',
|
||||
width: '14px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
boxShadow: cssVar('shadow1'),
|
||||
color: cssVar('textSecondaryColor'),
|
||||
backgroundColor: cssVar('backgroundPrimaryColor'),
|
||||
fontSize: '14px',
|
||||
cursor: 'pointer',
|
||||
transition: '0.1s',
|
||||
borderRadius: '50%',
|
||||
transform: 'scale(0.6)',
|
||||
zIndex: 1,
|
||||
opacity: 0,
|
||||
selectors: {
|
||||
'&:hover': {
|
||||
transform: 'scale(1.1)',
|
||||
},
|
||||
[`${root}:hover &`]: {
|
||||
opacity: 1,
|
||||
transform: 'scale(1)',
|
||||
},
|
||||
},
|
||||
});
|
||||
export const installLabel = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
flex: 1,
|
||||
fontSize: cssVar('fontSm'),
|
||||
whiteSpace: 'nowrap',
|
||||
justifyContent: 'space-between',
|
||||
});
|
||||
export const installLabelNormal = style([
|
||||
installLabel,
|
||||
{
|
||||
justifyContent: 'flex-start',
|
||||
selectors: {
|
||||
[`${root}:hover &, ${root}[data-updating=true] &`]: {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
},
|
||||
]);
|
||||
export const installLabelHover = style([
|
||||
installLabel,
|
||||
{
|
||||
display: 'none',
|
||||
justifyContent: 'flex-start',
|
||||
selectors: {
|
||||
[`${root}:hover &, ${root}[data-updating=true] &`]: {
|
||||
display: 'flex',
|
||||
},
|
||||
},
|
||||
},
|
||||
]);
|
||||
export const updateAvailableWrapper = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
padding: '8px 0',
|
||||
});
|
||||
export const versionLabel = style({
|
||||
padding: '0 6px',
|
||||
color: cssVar('textSecondaryColor'),
|
||||
background: cssVar('backgroundPrimaryColor'),
|
||||
fontSize: '10px',
|
||||
lineHeight: '18px',
|
||||
borderRadius: '4px',
|
||||
maxWidth: '100px',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
});
|
||||
export const whatsNewLabel = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
fontSize: cssVar('fontSm'),
|
||||
whiteSpace: 'nowrap',
|
||||
});
|
||||
export const ellipsisTextOverflow = style({
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
});
|
||||
export const progress = style({
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
height: '4px',
|
||||
borderRadius: '12px',
|
||||
background: cssVar('black10'),
|
||||
});
|
||||
export const progressInner = style({
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
height: '100%',
|
||||
borderRadius: '12px',
|
||||
background: cssVar('primaryColor'),
|
||||
transition: '0.1s',
|
||||
});
|
||||
export const particles = style({
|
||||
background: `var(--svg-dot-animation), var(--svg-dot-animation)`,
|
||||
backgroundRepeat: 'no-repeat, repeat',
|
||||
backgroundPosition: 'center, center top 100%',
|
||||
backgroundSize: '100%, 130%',
|
||||
maskImage: 'linear-gradient(to top, transparent, black, black, transparent)',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
pointerEvents: 'none',
|
||||
display: 'none',
|
||||
selectors: {
|
||||
[`${root}:hover &, ${root}[data-updating=true] &`]: {
|
||||
display: 'block',
|
||||
},
|
||||
'&:before': {
|
||||
content: '""',
|
||||
display: 'block',
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
background: `var(--svg-dot-animation), var(--svg-dot-animation), var(--svg-dot-animation)`,
|
||||
backgroundRepeat: 'no-repeat, repeat, repeat',
|
||||
backgroundPosition: 'center, center top 100%, center center',
|
||||
backgroundSize: '100% 120%, 150%, 120%',
|
||||
filter: 'blur(1px)',
|
||||
willChange: 'filter',
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
},
|
||||
});
|
||||
export const halo = style({
|
||||
overflow: 'hidden',
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
':before': {
|
||||
content: '""',
|
||||
display: 'block',
|
||||
inset: 0,
|
||||
position: 'absolute',
|
||||
filter: 'blur(10px) saturate(1.2)',
|
||||
transition: '0.3s ease',
|
||||
willChange: 'filter, transform',
|
||||
transform: 'translateY(100%) scale(0.6)',
|
||||
background:
|
||||
'radial-gradient(ellipse 60% 80% at bottom, rgba(30, 150, 235, 0.35), transparent)',
|
||||
},
|
||||
':after': {
|
||||
content: '""',
|
||||
display: 'block',
|
||||
inset: 0,
|
||||
position: 'absolute',
|
||||
filter: 'blur(10px) saturate(1.2)',
|
||||
transition: '0.1s ease',
|
||||
willChange: 'filter, transform',
|
||||
transform: 'translateY(100%) scale(0.6)',
|
||||
background:
|
||||
'radial-gradient(ellipse 30% 45% at bottom, rgba(30, 150, 235, 0.6), transparent)',
|
||||
},
|
||||
selectors: {
|
||||
[`${root}:hover &:before, ${root}:hover &:after,
|
||||
${root}[data-updating=true] &:before, ${root}[data-updating=true] &:after`]:
|
||||
{
|
||||
transform: 'translateY(0) scale(1)',
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -1,293 +0,0 @@
|
||||
import { Tooltip } from '@affine/component';
|
||||
import { useCatchEventCallback } from '@affine/core/components/hooks/use-catch-event-hook';
|
||||
import { popupWindow } from '@affine/core/utils';
|
||||
import { Unreachable } from '@affine/env/constant';
|
||||
import { useI18n } from '@affine/i18n';
|
||||
import {
|
||||
CloseIcon,
|
||||
DownloadIcon,
|
||||
NewIcon,
|
||||
ResetIcon,
|
||||
} from '@blocksuite/icons/rc';
|
||||
import clsx from 'clsx';
|
||||
import { useCallback, useMemo } from 'react';
|
||||
|
||||
import * as styles from './index.css';
|
||||
|
||||
export interface AddPageButtonProps {
|
||||
onQuitAndInstall: () => void;
|
||||
onDownloadUpdate: () => void;
|
||||
onDismissChangelog: () => void;
|
||||
onOpenChangelog: () => void;
|
||||
changelogUnread: boolean;
|
||||
updateReady: boolean;
|
||||
updateAvailable: {
|
||||
version: string;
|
||||
allowAutoUpdate: boolean;
|
||||
} | null;
|
||||
autoDownload: boolean;
|
||||
downloadProgress: number | null;
|
||||
appQuitting: boolean;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
interface ButtonContentProps {
|
||||
updateReady: boolean;
|
||||
updateAvailable: {
|
||||
version: string;
|
||||
allowAutoUpdate: boolean;
|
||||
} | null;
|
||||
autoDownload: boolean;
|
||||
downloadProgress: number | null;
|
||||
appQuitting: boolean;
|
||||
changelogUnread: boolean;
|
||||
onDismissChangelog: () => void;
|
||||
}
|
||||
|
||||
function DownloadUpdate({ updateAvailable }: ButtonContentProps) {
|
||||
const t = useI18n();
|
||||
return (
|
||||
<div className={styles.updateAvailableWrapper}>
|
||||
<div className={styles.installLabelNormal}>
|
||||
<DownloadIcon className={styles.icon} />
|
||||
<span className={styles.ellipsisTextOverflow}>
|
||||
{t['com.affine.appUpdater.downloadUpdate']()}
|
||||
</span>
|
||||
<span className={styles.versionLabel}>{updateAvailable?.version}</span>
|
||||
</div>
|
||||
|
||||
<div className={styles.installLabelHover}>
|
||||
<DownloadIcon className={styles.icon} />
|
||||
<span className={styles.ellipsisTextOverflow}>
|
||||
{t['com.affine.appUpdater.downloadUpdate']()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function UpdateReady({ updateAvailable, appQuitting }: ButtonContentProps) {
|
||||
const t = useI18n();
|
||||
return (
|
||||
<div className={styles.updateAvailableWrapper}>
|
||||
<div className={styles.installLabelNormal}>
|
||||
<ResetIcon className={styles.icon} />
|
||||
<span className={styles.ellipsisTextOverflow}>
|
||||
{t['com.affine.appUpdater.updateAvailable']()}
|
||||
</span>
|
||||
<span className={styles.versionLabel}>{updateAvailable?.version}</span>
|
||||
</div>
|
||||
|
||||
<div className={styles.installLabelHover}>
|
||||
<ResetIcon className={styles.icon} />
|
||||
<span className={styles.ellipsisTextOverflow}>
|
||||
{t[appQuitting ? 'Loading' : 'com.affine.appUpdater.installUpdate']()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DownloadingUpdate({
|
||||
updateAvailable,
|
||||
downloadProgress,
|
||||
}: ButtonContentProps) {
|
||||
const t = useI18n();
|
||||
return (
|
||||
<div className={clsx([styles.updateAvailableWrapper])}>
|
||||
<div className={clsx([styles.installLabelNormal])}>
|
||||
<span className={styles.ellipsisTextOverflow}>
|
||||
{t['com.affine.appUpdater.downloading']()}
|
||||
</span>
|
||||
<span className={styles.versionLabel}>{updateAvailable?.version}</span>
|
||||
</div>
|
||||
|
||||
<div className={styles.progress}>
|
||||
<div
|
||||
className={styles.progressInner}
|
||||
style={{ width: `${downloadProgress}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function OpenDownloadPage({ updateAvailable }: ButtonContentProps) {
|
||||
const t = useI18n();
|
||||
return (
|
||||
<>
|
||||
<div className={styles.installLabelNormal}>
|
||||
<DownloadIcon className={styles.icon} />
|
||||
<span className={styles.ellipsisTextOverflow}>
|
||||
{t['com.affine.appUpdater.updateAvailable']()}
|
||||
</span>
|
||||
<span className={styles.versionLabel}>{updateAvailable?.version}</span>
|
||||
</div>
|
||||
|
||||
<div className={styles.installLabelHover}>
|
||||
<DownloadIcon className={styles.icon} />
|
||||
<span className={styles.ellipsisTextOverflow}>
|
||||
{t['com.affine.appUpdater.openDownloadPage']()}
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function WhatsNew({ onDismissChangelog }: ButtonContentProps) {
|
||||
const t = useI18n();
|
||||
const onClickClose = useCatchEventCallback(() => {
|
||||
onDismissChangelog();
|
||||
}, [onDismissChangelog]);
|
||||
return (
|
||||
<>
|
||||
<div className={clsx([styles.whatsNewLabel])}>
|
||||
<NewIcon className={styles.icon} />
|
||||
<span className={styles.ellipsisTextOverflow}>
|
||||
{t['com.affine.appUpdater.whatsNew']()}
|
||||
</span>
|
||||
</div>
|
||||
<div className={styles.closeIcon} onClick={onClickClose}>
|
||||
<CloseIcon />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const getButtonContentRenderer = (props: ButtonContentProps) => {
|
||||
if (props.updateReady) {
|
||||
return UpdateReady;
|
||||
} else if (props.updateAvailable?.allowAutoUpdate) {
|
||||
if (props.autoDownload && props.updateAvailable.allowAutoUpdate) {
|
||||
return DownloadingUpdate;
|
||||
} else {
|
||||
return DownloadUpdate;
|
||||
}
|
||||
} else if (props.updateAvailable && !props.updateAvailable?.allowAutoUpdate) {
|
||||
return OpenDownloadPage;
|
||||
} else if (props.changelogUnread) {
|
||||
return WhatsNew;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
export function AppUpdaterButton({
|
||||
updateReady,
|
||||
changelogUnread,
|
||||
onDismissChangelog,
|
||||
onDownloadUpdate,
|
||||
onQuitAndInstall,
|
||||
onOpenChangelog,
|
||||
updateAvailable,
|
||||
autoDownload,
|
||||
downloadProgress,
|
||||
appQuitting,
|
||||
className,
|
||||
style,
|
||||
}: AddPageButtonProps) {
|
||||
const handleClick = useCallback(() => {
|
||||
if (updateReady) {
|
||||
onQuitAndInstall();
|
||||
} else if (updateAvailable) {
|
||||
if (updateAvailable.allowAutoUpdate) {
|
||||
if (autoDownload) {
|
||||
// wait for download to finish
|
||||
} else {
|
||||
onDownloadUpdate();
|
||||
}
|
||||
} else {
|
||||
popupWindow(
|
||||
`https://github.com/toeverything/AFFiNE/releases/tag/v${updateAvailable.version}`
|
||||
);
|
||||
}
|
||||
} else if (changelogUnread) {
|
||||
onOpenChangelog();
|
||||
} else {
|
||||
throw new Unreachable();
|
||||
}
|
||||
}, [
|
||||
updateReady,
|
||||
updateAvailable,
|
||||
changelogUnread,
|
||||
onQuitAndInstall,
|
||||
autoDownload,
|
||||
onDownloadUpdate,
|
||||
onOpenChangelog,
|
||||
]);
|
||||
|
||||
const contentProps = useMemo(
|
||||
() => ({
|
||||
updateReady,
|
||||
updateAvailable,
|
||||
changelogUnread,
|
||||
autoDownload,
|
||||
downloadProgress,
|
||||
appQuitting,
|
||||
onDismissChangelog,
|
||||
}),
|
||||
[
|
||||
updateReady,
|
||||
updateAvailable,
|
||||
changelogUnread,
|
||||
autoDownload,
|
||||
downloadProgress,
|
||||
appQuitting,
|
||||
onDismissChangelog,
|
||||
]
|
||||
);
|
||||
|
||||
const ContentComponent = getButtonContentRenderer(contentProps);
|
||||
|
||||
const wrapWithTooltip = (
|
||||
node: React.ReactElement,
|
||||
tooltip?: React.ReactElement | string
|
||||
) => {
|
||||
if (!tooltip) {
|
||||
return node;
|
||||
}
|
||||
|
||||
return (
|
||||
<Tooltip content={tooltip} side="top">
|
||||
{node}
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
|
||||
const disabled = useMemo(() => {
|
||||
if (appQuitting) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (updateAvailable?.allowAutoUpdate) {
|
||||
return !updateReady && autoDownload;
|
||||
}
|
||||
|
||||
return false;
|
||||
}, [
|
||||
appQuitting,
|
||||
autoDownload,
|
||||
updateAvailable?.allowAutoUpdate,
|
||||
updateReady,
|
||||
]);
|
||||
|
||||
if (!updateAvailable && !changelogUnread) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return wrapWithTooltip(
|
||||
<button
|
||||
style={style}
|
||||
className={clsx([styles.root, className])}
|
||||
data-has-update={!!updateAvailable}
|
||||
data-updating={appQuitting}
|
||||
data-disabled={disabled}
|
||||
onClick={handleClick}
|
||||
>
|
||||
{ContentComponent ? <ContentComponent {...contentProps} /> : null}
|
||||
<div className={styles.particles} aria-hidden="true"></div>
|
||||
<span className={styles.halo} aria-hidden="true"></span>
|
||||
</button>,
|
||||
updateAvailable?.version
|
||||
);
|
||||
}
|
||||
@@ -1,90 +0,0 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { cssVarV2 } from '@toeverything/theme/v2';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
const baseAction = style({
|
||||
display: 'flex',
|
||||
gap: 8,
|
||||
opacity: 0,
|
||||
});
|
||||
|
||||
export const root = style({
|
||||
fontSize: cssVar('fontXs'),
|
||||
height: 20,
|
||||
width: 'calc(100%)',
|
||||
userSelect: 'none',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
padding: '0 8px',
|
||||
borderRadius: 4,
|
||||
selectors: {
|
||||
[`&[data-collapsible="true"]`]: {
|
||||
cursor: 'pointer',
|
||||
},
|
||||
[`&[data-collapsible="true"]:hover`]: {
|
||||
backgroundColor: cssVarV2('layer/background/hoverOverlay'),
|
||||
},
|
||||
[`&[data-collapsible="true"]:hover:has(${baseAction}:hover)`]: {
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const actions = style([
|
||||
baseAction,
|
||||
{
|
||||
selectors: {
|
||||
[`${root}:hover &`]: {
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
},
|
||||
]);
|
||||
export const label = style({
|
||||
color: cssVarV2('text/tertiary'),
|
||||
fontWeight: 500,
|
||||
lineHeight: '20px',
|
||||
flexGrow: '0',
|
||||
display: 'flex',
|
||||
gap: 2,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'start',
|
||||
cursor: 'pointer',
|
||||
});
|
||||
|
||||
export const collapseIcon = style({
|
||||
vars: { '--y': '1px', '--r': '90deg' },
|
||||
color: cssVarV2('icon/tertiary'),
|
||||
transform: 'translateY(var(--y)) rotate(var(--r))',
|
||||
transition: 'transform 0.2s',
|
||||
selectors: {
|
||||
[`${root}[data-collapsed="true"] &`]: {
|
||||
vars: { '--r': '0deg' },
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// ------------- mobile -------------
|
||||
export const mobileRoot = style([
|
||||
root,
|
||||
{
|
||||
height: 25,
|
||||
padding: '0 16px',
|
||||
selectors: {
|
||||
'&[data-collapsible="true"]:hover': {
|
||||
backgroundColor: 'none',
|
||||
},
|
||||
},
|
||||
},
|
||||
]);
|
||||
export const mobileLabel = style([
|
||||
label,
|
||||
{
|
||||
color: cssVarV2('text/primary'),
|
||||
fontSize: 20,
|
||||
lineHeight: '25px',
|
||||
letterSpacing: -0.45,
|
||||
fontWeight: 400,
|
||||
},
|
||||
]);
|
||||
@@ -1,16 +0,0 @@
|
||||
import type { Meta, StoryFn } from '@storybook/react';
|
||||
|
||||
import { CategoryDivider } from './index';
|
||||
|
||||
export default {
|
||||
title: 'Components/AppSidebar/CategoryDivider',
|
||||
component: CategoryDivider,
|
||||
} satisfies Meta;
|
||||
|
||||
export const Default: StoryFn = () => {
|
||||
return (
|
||||
<main style={{ width: '240px' }}>
|
||||
<CategoryDivider label="Favorites" />
|
||||
</main>
|
||||
);
|
||||
};
|
||||
@@ -1,66 +0,0 @@
|
||||
import { ToggleCollapseIcon } from '@blocksuite/icons/rc';
|
||||
import clsx from 'clsx';
|
||||
import { type ForwardedRef, forwardRef, type PropsWithChildren } from 'react';
|
||||
|
||||
import * as styles from './index.css';
|
||||
|
||||
export type CategoryDividerProps = PropsWithChildren<
|
||||
{
|
||||
label: string;
|
||||
className?: string;
|
||||
collapsed?: boolean;
|
||||
mobile?: boolean;
|
||||
setCollapsed?: (collapsed: boolean) => void;
|
||||
} & {
|
||||
[key: `data-${string}`]: unknown;
|
||||
}
|
||||
>;
|
||||
|
||||
export const CategoryDivider = forwardRef(
|
||||
(
|
||||
{
|
||||
label,
|
||||
children,
|
||||
className,
|
||||
collapsed,
|
||||
mobile,
|
||||
setCollapsed,
|
||||
...otherProps
|
||||
}: CategoryDividerProps,
|
||||
ref: ForwardedRef<HTMLDivElement>
|
||||
) => {
|
||||
const collapsible = collapsed !== undefined;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={clsx(mobile ? styles.mobileRoot : styles.root, className)}
|
||||
ref={ref}
|
||||
role="switch"
|
||||
onClick={() => setCollapsed?.(!collapsed)}
|
||||
data-mobile={mobile}
|
||||
data-collapsed={collapsed}
|
||||
data-collapsible={collapsible}
|
||||
{...otherProps}
|
||||
>
|
||||
<div className={mobile ? styles.mobileLabel : styles.label}>
|
||||
{label}
|
||||
{collapsible ? (
|
||||
<ToggleCollapseIcon
|
||||
width={16}
|
||||
height={16}
|
||||
data-testid="category-divider-collapse-button"
|
||||
className={styles.collapseIcon}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
{mobile ? null : (
|
||||
<div className={styles.actions} onClick={e => e.stopPropagation()}>
|
||||
{children}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
CategoryDivider.displayName = 'CategoryDivider';
|
||||
@@ -1,38 +0,0 @@
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const fallback = style({
|
||||
padding: '4px 20px',
|
||||
height: '100%',
|
||||
overflow: 'clip',
|
||||
});
|
||||
|
||||
export const fallbackHeader = style({
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
flexDirection: 'row',
|
||||
gap: '8px',
|
||||
overflow: 'hidden',
|
||||
height: '52px',
|
||||
});
|
||||
|
||||
export const spacer = style({
|
||||
flex: 1,
|
||||
});
|
||||
|
||||
export const fallbackBody = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '42px',
|
||||
marginTop: '42px',
|
||||
});
|
||||
|
||||
export const fallbackGroupItems = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '16px',
|
||||
});
|
||||
|
||||
export const fallbackItemHeader = style({
|
||||
transform: 'translateX(-10px)',
|
||||
});
|
||||
@@ -1,79 +0,0 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
export const floatingMaxWidth = 768;
|
||||
export const navWrapperStyle = style({
|
||||
'@media': {
|
||||
print: {
|
||||
display: 'none',
|
||||
zIndex: -1,
|
||||
},
|
||||
},
|
||||
selectors: {
|
||||
'&[data-has-border=true]': {
|
||||
borderRight: `0.5px solid ${cssVar('borderColor')}`,
|
||||
},
|
||||
'&[data-is-floating="true"]': {
|
||||
backgroundColor: cssVar('backgroundPrimaryColor'),
|
||||
},
|
||||
'&[data-client-border="true"]': {
|
||||
paddingBottom: 8,
|
||||
},
|
||||
},
|
||||
});
|
||||
export const navHeaderButton = style({
|
||||
width: '32px',
|
||||
height: '32px',
|
||||
flexShrink: 0,
|
||||
});
|
||||
export const navHeaderNavigationButtons = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
columnGap: '32px',
|
||||
});
|
||||
export const navStyle = style({
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
});
|
||||
export const navHeaderStyle = style({
|
||||
flex: '0 0 auto',
|
||||
height: '52px',
|
||||
padding: '0px 16px',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
});
|
||||
|
||||
export const navBodyStyle = style({
|
||||
flex: '1 1 auto',
|
||||
height: 'calc(100% - 52px)',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
rowGap: '4px',
|
||||
});
|
||||
export const sidebarFloatMaskStyle = style({
|
||||
transition: 'opacity .15s',
|
||||
opacity: 0,
|
||||
pointerEvents: 'none',
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: '100%',
|
||||
bottom: 0,
|
||||
background: cssVar('backgroundModalColor'),
|
||||
selectors: {
|
||||
'&[data-open="true"][data-is-floating="true"]': {
|
||||
opacity: 1,
|
||||
pointerEvents: 'auto',
|
||||
right: '0',
|
||||
zIndex: 3,
|
||||
},
|
||||
},
|
||||
'@media': {
|
||||
print: {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -1,14 +0,0 @@
|
||||
import { atom } from 'jotai';
|
||||
import { atomWithStorage } from 'jotai/utils';
|
||||
|
||||
export const APP_SIDEBAR_OPEN = 'app-sidebar-open';
|
||||
export const isMobile = !BUILD_CONFIG.isElectron && window.innerWidth < 768;
|
||||
|
||||
export const appSidebarOpenAtom = atomWithStorage(APP_SIDEBAR_OPEN, !isMobile);
|
||||
export const appSidebarFloatingAtom = atom(isMobile);
|
||||
|
||||
export const appSidebarResizingAtom = atom(false);
|
||||
export const appSidebarWidthAtom = atomWithStorage(
|
||||
'app-sidebar-width',
|
||||
248 /* px */
|
||||
);
|
||||
@@ -1,271 +0,0 @@
|
||||
import { Skeleton } from '@affine/component';
|
||||
import { ResizePanel } from '@affine/component/resize-panel';
|
||||
import { useAppSettingHelper } from '@affine/core/components/hooks/affine/use-app-setting-helper';
|
||||
import { NavigateContext } from '@affine/core/components/hooks/use-navigate-helper';
|
||||
import { useServiceOptional, WorkspaceService } from '@toeverything/infra';
|
||||
import { useAtom, useAtomValue } from 'jotai';
|
||||
import { debounce } from 'lodash-es';
|
||||
import type { PropsWithChildren, ReactElement } from 'react';
|
||||
import { useContext, useEffect, useMemo } from 'react';
|
||||
|
||||
import { WorkspaceNavigator } from '../workspace-selector';
|
||||
import * as styles from './fallback.css';
|
||||
import {
|
||||
floatingMaxWidth,
|
||||
navBodyStyle,
|
||||
navHeaderStyle,
|
||||
navStyle,
|
||||
navWrapperStyle,
|
||||
sidebarFloatMaskStyle,
|
||||
} from './index.css';
|
||||
import {
|
||||
APP_SIDEBAR_OPEN,
|
||||
appSidebarFloatingAtom,
|
||||
appSidebarOpenAtom,
|
||||
appSidebarResizingAtom,
|
||||
appSidebarWidthAtom,
|
||||
} from './index.jotai';
|
||||
import { SidebarHeader } from './sidebar-header';
|
||||
|
||||
export type History = {
|
||||
stack: string[];
|
||||
current: number;
|
||||
};
|
||||
|
||||
const MAX_WIDTH = 480;
|
||||
const MIN_WIDTH = 248;
|
||||
|
||||
export function AppSidebar({ children }: PropsWithChildren) {
|
||||
const { appSettings } = useAppSettingHelper();
|
||||
|
||||
const clientBorder = appSettings.clientBorder;
|
||||
|
||||
const [open, setOpen] = useAtom(appSidebarOpenAtom);
|
||||
const [width, setWidth] = useAtom(appSidebarWidthAtom);
|
||||
const [floating, setFloating] = useAtom(appSidebarFloatingAtom);
|
||||
const [resizing, setResizing] = useAtom(appSidebarResizingAtom);
|
||||
|
||||
useEffect(() => {
|
||||
// do not float app sidebar on desktop
|
||||
if (BUILD_CONFIG.isElectron) {
|
||||
return;
|
||||
}
|
||||
|
||||
function onResize() {
|
||||
const isFloatingMaxWidth = window.matchMedia(
|
||||
`(max-width: ${floatingMaxWidth}px)`
|
||||
).matches;
|
||||
const isOverflowWidth = window.matchMedia(
|
||||
`(max-width: ${width / 0.4}px)`
|
||||
).matches;
|
||||
const isFloating = isFloatingMaxWidth || isOverflowWidth;
|
||||
if (
|
||||
open === undefined &&
|
||||
localStorage.getItem(APP_SIDEBAR_OPEN) === null
|
||||
) {
|
||||
// give the initial value,
|
||||
// so that the sidebar can be closed on mobile by default
|
||||
setOpen(!isFloating);
|
||||
}
|
||||
setFloating(isFloating);
|
||||
}
|
||||
|
||||
const dOnResize = debounce(onResize, 50);
|
||||
window.addEventListener('resize', dOnResize);
|
||||
return () => {
|
||||
window.removeEventListener('resize', dOnResize);
|
||||
};
|
||||
}, [open, setFloating, setOpen, width]);
|
||||
|
||||
const hasRightBorder = !BUILD_CONFIG.isElectron && !clientBorder;
|
||||
const isMacosDesktop = BUILD_CONFIG.isElectron && environment.isMacOs;
|
||||
|
||||
return (
|
||||
<>
|
||||
<ResizePanel
|
||||
floating={floating}
|
||||
open={open}
|
||||
resizing={resizing}
|
||||
maxWidth={MAX_WIDTH}
|
||||
minWidth={MIN_WIDTH}
|
||||
width={width}
|
||||
resizeHandlePos="right"
|
||||
onOpen={setOpen}
|
||||
onResizing={setResizing}
|
||||
onWidthChange={setWidth}
|
||||
className={navWrapperStyle}
|
||||
resizeHandleOffset={0}
|
||||
resizeHandleVerticalPadding={clientBorder ? 16 : 0}
|
||||
data-transparent
|
||||
data-open={open}
|
||||
data-has-border={hasRightBorder}
|
||||
data-testid="app-sidebar-wrapper"
|
||||
data-is-macos-electron={isMacosDesktop}
|
||||
data-client-border={clientBorder}
|
||||
>
|
||||
<nav className={navStyle} data-testid="app-sidebar">
|
||||
{!BUILD_CONFIG.isElectron && <SidebarHeader />}
|
||||
<div className={navBodyStyle} data-testid="sliderBar-inner">
|
||||
{children}
|
||||
</div>
|
||||
</nav>
|
||||
</ResizePanel>
|
||||
<div
|
||||
data-testid="app-sidebar-float-mask"
|
||||
data-open={open}
|
||||
data-is-floating={floating}
|
||||
className={sidebarFloatMaskStyle}
|
||||
onClick={() => setOpen(false)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function FallbackHeader() {
|
||||
return (
|
||||
<div className={styles.fallbackHeader}>
|
||||
<FallbackHeaderSkeleton />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function FallbackHeaderWithWorkspaceNavigator() {
|
||||
// if navigate is not defined, it is rendered outside of router
|
||||
// WorkspaceNavigator requires navigate context
|
||||
// todo: refactor
|
||||
const navigate = useContext(NavigateContext);
|
||||
|
||||
const currentWorkspace = useServiceOptional(WorkspaceService);
|
||||
return (
|
||||
<div className={styles.fallbackHeader}>
|
||||
{currentWorkspace && navigate ? (
|
||||
<WorkspaceNavigator
|
||||
showSettingsButton
|
||||
showSyncStatus
|
||||
showEnableCloudButton
|
||||
/>
|
||||
) : (
|
||||
<FallbackHeaderSkeleton />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function FallbackHeaderSkeleton() {
|
||||
return (
|
||||
<>
|
||||
<Skeleton variant="rectangular" width={32} height={32} />
|
||||
<Skeleton variant="rectangular" width={150} height={32} flex={1} />
|
||||
<Skeleton variant="circular" width={25} height={25} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const randomWidth = () => {
|
||||
return Math.floor(Math.random() * 200) + 100;
|
||||
};
|
||||
|
||||
const RandomBar = ({ className }: { className?: string }) => {
|
||||
const width = useMemo(() => randomWidth(), []);
|
||||
return (
|
||||
<Skeleton
|
||||
variant="rectangular"
|
||||
width={width}
|
||||
height={16}
|
||||
className={className}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const RandomBars = ({ count, header }: { count: number; header?: boolean }) => {
|
||||
return (
|
||||
<div className={styles.fallbackGroupItems}>
|
||||
{header ? (
|
||||
<Skeleton
|
||||
className={styles.fallbackItemHeader}
|
||||
variant="rectangular"
|
||||
width={50}
|
||||
height={16}
|
||||
/>
|
||||
) : null}
|
||||
{Array.from({ length: count }).map((_, index) => (
|
||||
<RandomBar key={index} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const FallbackBody = () => {
|
||||
return (
|
||||
<div className={styles.fallbackBody}>
|
||||
<RandomBars count={3} />
|
||||
<RandomBars count={4} header />
|
||||
<RandomBars count={4} header />
|
||||
<RandomBars count={3} header />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const AppSidebarFallback = (): ReactElement | null => {
|
||||
const width = useAtomValue(appSidebarWidthAtom);
|
||||
const { appSettings } = useAppSettingHelper();
|
||||
const clientBorder = appSettings.clientBorder;
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{ width }}
|
||||
className={navWrapperStyle}
|
||||
data-has-border={!BUILD_CONFIG.isElectron && !clientBorder}
|
||||
data-open="true"
|
||||
>
|
||||
<nav className={navStyle}>
|
||||
{!BUILD_CONFIG.isElectron ? <div className={navHeaderStyle} /> : null}
|
||||
<div className={navBodyStyle}>
|
||||
<div className={styles.fallback}>
|
||||
<FallbackHeaderWithWorkspaceNavigator />
|
||||
<FallbackBody />
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* NOTE(@forehalo): this is a copy of [AppSidebarFallback] without [WorkspaceNavigator] which will introduce a lot useless dependencies for shell(tab bar)
|
||||
*/
|
||||
export const ShellAppSidebarFallback = () => {
|
||||
const width = useAtomValue(appSidebarWidthAtom);
|
||||
const { appSettings } = useAppSettingHelper();
|
||||
const clientBorder = appSettings.clientBorder;
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{ width }}
|
||||
className={navWrapperStyle}
|
||||
data-has-border={!BUILD_CONFIG.isElectron && !clientBorder}
|
||||
data-open="true"
|
||||
>
|
||||
<nav className={navStyle}>
|
||||
{!BUILD_CONFIG.isElectron ? <div className={navHeaderStyle} /> : null}
|
||||
<div className={navBodyStyle}>
|
||||
<div className={styles.fallback}>
|
||||
<FallbackHeader />
|
||||
<FallbackBody />
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export * from './add-page-button';
|
||||
export * from './app-download-button';
|
||||
export * from './app-updater-button';
|
||||
export * from './category-divider';
|
||||
export * from './index.css';
|
||||
export * from './menu-item';
|
||||
export * from './quick-search-input';
|
||||
export * from './sidebar-containers';
|
||||
export * from './sidebar-header';
|
||||
export { appSidebarFloatingAtom, appSidebarOpenAtom, appSidebarResizingAtom };
|
||||
@@ -1,44 +0,0 @@
|
||||
import { DualLinkIcon } from '@blocksuite/icons/rc';
|
||||
import { cssVarV2 } from '@toeverything/theme/v2';
|
||||
import type { ReactElement } from 'react';
|
||||
import type { To } from 'react-router-dom';
|
||||
|
||||
import { MenuLinkItem } from '.';
|
||||
|
||||
const RawLink = ({
|
||||
children,
|
||||
to,
|
||||
className,
|
||||
}: {
|
||||
children?: React.ReactNode;
|
||||
to: To;
|
||||
className?: string;
|
||||
}) => {
|
||||
const href = typeof to === 'string' ? to : to.pathname;
|
||||
return (
|
||||
<a className={className} href={href} target="_blank" rel="noreferrer">
|
||||
{children}
|
||||
</a>
|
||||
);
|
||||
};
|
||||
|
||||
export const ExternalMenuLinkItem = ({
|
||||
href,
|
||||
icon,
|
||||
label,
|
||||
}: {
|
||||
href: string;
|
||||
icon: ReactElement;
|
||||
label: string;
|
||||
}) => {
|
||||
return (
|
||||
<MenuLinkItem to={href} linkComponent={RawLink} icon={icon}>
|
||||
{label}
|
||||
<DualLinkIcon
|
||||
width={12}
|
||||
height={12}
|
||||
style={{ marginLeft: 4, color: cssVarV2('icon/tertiary') }}
|
||||
/>
|
||||
</MenuLinkItem>
|
||||
);
|
||||
};
|
||||
@@ -1,122 +0,0 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { cssVarV2 } from '@toeverything/theme/v2';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
export const linkItemRoot = style({
|
||||
color: 'inherit',
|
||||
});
|
||||
export const root = style({
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
borderRadius: '4px',
|
||||
textAlign: 'left',
|
||||
color: 'inherit',
|
||||
width: '100%',
|
||||
minHeight: '30px',
|
||||
userSelect: 'none',
|
||||
cursor: 'pointer',
|
||||
padding: '0 12px',
|
||||
fontSize: cssVar('fontSm'),
|
||||
marginTop: '4px',
|
||||
position: 'relative',
|
||||
selectors: {
|
||||
'&:hover': {
|
||||
background: cssVar('hoverColor'),
|
||||
},
|
||||
'&[data-active="true"]': {
|
||||
background: cssVar('hoverColor'),
|
||||
},
|
||||
'&[data-disabled="true"]': {
|
||||
cursor: 'default',
|
||||
color: cssVar('textSecondaryColor'),
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
// this is not visible in dark mode
|
||||
// '&[data-active="true"]:hover': {
|
||||
// background:
|
||||
// // make this a variable?
|
||||
// 'linear-gradient(0deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04)), rgba(0, 0, 0, 0.04)',
|
||||
// },
|
||||
'&[data-collapsible="true"]': {
|
||||
paddingLeft: '4px',
|
||||
paddingRight: '4px',
|
||||
},
|
||||
'&[data-collapsible="false"]:is([data-active="true"], :hover)': {
|
||||
width: 'calc(100% + 8px)',
|
||||
transform: 'translateX(-8px)',
|
||||
paddingLeft: '20px',
|
||||
paddingRight: '12px',
|
||||
},
|
||||
[`${linkItemRoot}:first-of-type &`]: {
|
||||
marginTop: '0px',
|
||||
},
|
||||
},
|
||||
});
|
||||
export const content = style({
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
flex: 1,
|
||||
});
|
||||
export const postfix = style({
|
||||
right: '4px',
|
||||
position: 'absolute',
|
||||
opacity: 0,
|
||||
pointerEvents: 'none',
|
||||
selectors: {
|
||||
[`${root}:hover &`]: {
|
||||
justifySelf: 'flex-end',
|
||||
position: 'initial',
|
||||
opacity: 1,
|
||||
pointerEvents: 'all',
|
||||
},
|
||||
},
|
||||
});
|
||||
export const icon = style({
|
||||
color: cssVarV2('icon/primary'),
|
||||
fontSize: '20px',
|
||||
});
|
||||
export const collapsedIconContainer = style({
|
||||
width: '16px',
|
||||
height: '16px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderRadius: '2px',
|
||||
transition: 'transform 0.2s',
|
||||
color: 'inherit',
|
||||
selectors: {
|
||||
'&[data-collapsed="true"]': {
|
||||
transform: 'rotate(-90deg)',
|
||||
},
|
||||
'&[data-disabled="true"]': {
|
||||
opacity: 0.3,
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
'&:hover': {
|
||||
background: cssVar('hoverColor'),
|
||||
},
|
||||
},
|
||||
});
|
||||
export const iconsContainer = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-start',
|
||||
width: '28px',
|
||||
flexShrink: 0,
|
||||
selectors: {
|
||||
'&[data-collapsible="true"]': {
|
||||
width: '44px',
|
||||
},
|
||||
},
|
||||
});
|
||||
export const collapsedIcon = style({
|
||||
transition: 'transform 0.2s ease-in-out',
|
||||
selectors: {
|
||||
'&[data-collapsed="true"]': {
|
||||
transform: 'rotate(-90deg)',
|
||||
},
|
||||
},
|
||||
});
|
||||
export const spacer = style({
|
||||
flex: 1,
|
||||
});
|
||||
@@ -1,44 +0,0 @@
|
||||
import { SettingsIcon } from '@blocksuite/icons/rc';
|
||||
import type { Meta, StoryFn } from '@storybook/react';
|
||||
import { useState } from 'react';
|
||||
|
||||
import { MenuItem, MenuLinkItem } from './index';
|
||||
|
||||
export default {
|
||||
title: 'Components/AppSidebar/MenuItem',
|
||||
component: MenuItem,
|
||||
} satisfies Meta;
|
||||
|
||||
export const Default: StoryFn = () => {
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
return (
|
||||
<main style={{ width: '240px' }}>
|
||||
<MenuItem icon={<SettingsIcon />} onClick={() => alert('opened')}>
|
||||
Normal Item
|
||||
</MenuItem>
|
||||
<MenuLinkItem
|
||||
icon={<SettingsIcon />}
|
||||
to="/test"
|
||||
onClick={() => alert('opened')}
|
||||
>
|
||||
Normal Link Item
|
||||
</MenuLinkItem>
|
||||
<MenuLinkItem
|
||||
active
|
||||
icon={<SettingsIcon />}
|
||||
to="/test"
|
||||
onClick={() => alert('opened')}
|
||||
>
|
||||
Primary Item
|
||||
</MenuLinkItem>
|
||||
<MenuItem
|
||||
collapsed={collapsed}
|
||||
onCollapsedChange={setCollapsed}
|
||||
icon={<SettingsIcon />}
|
||||
onClick={() => alert('opened')}
|
||||
>
|
||||
Collapsible Item
|
||||
</MenuItem>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
@@ -1,103 +0,0 @@
|
||||
import { WorkbenchLink } from '@affine/core/modules/workbench';
|
||||
import { ArrowDownSmallIcon } from '@blocksuite/icons/rc';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
import type { To } from 'react-router-dom';
|
||||
|
||||
import * as styles from './index.css';
|
||||
|
||||
export interface MenuItemProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
icon?: React.ReactElement;
|
||||
active?: boolean;
|
||||
disabled?: boolean;
|
||||
// true, false, undefined. undefined means no collapse
|
||||
collapsed?: boolean;
|
||||
// if onCollapsedChange is given, but collapsed is undefined, then we will render the collapse button as disabled
|
||||
onCollapsedChange?: (collapsed: boolean) => void;
|
||||
postfix?: React.ReactElement;
|
||||
}
|
||||
|
||||
export interface MenuLinkItemProps extends MenuItemProps {
|
||||
to: To;
|
||||
linkComponent?: React.ComponentType<{ to: To; className?: string }>;
|
||||
}
|
||||
|
||||
const stopPropagation: React.MouseEventHandler = e => {
|
||||
e.stopPropagation();
|
||||
};
|
||||
|
||||
export const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(
|
||||
(
|
||||
{
|
||||
onClick,
|
||||
icon,
|
||||
active,
|
||||
children,
|
||||
disabled,
|
||||
collapsed,
|
||||
onCollapsedChange,
|
||||
postfix,
|
||||
...props
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
const collapsible = onCollapsedChange !== undefined;
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
{...props}
|
||||
onClick={onClick}
|
||||
className={clsx([styles.root, props.className])}
|
||||
data-active={active}
|
||||
data-disabled={disabled}
|
||||
data-collapsible={collapsible}
|
||||
>
|
||||
{icon && (
|
||||
<div className={styles.iconsContainer} data-collapsible={collapsible}>
|
||||
{collapsible && (
|
||||
<div
|
||||
data-disabled={collapsed === undefined ? true : undefined}
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault(); // for links
|
||||
onCollapsedChange?.(!collapsed);
|
||||
}}
|
||||
data-testid="fav-collapsed-button"
|
||||
className={styles.collapsedIconContainer}
|
||||
>
|
||||
<ArrowDownSmallIcon
|
||||
className={styles.collapsedIcon}
|
||||
data-collapsed={collapsed !== false}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{React.cloneElement(icon, {
|
||||
className: clsx([styles.icon, icon.props.className]),
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className={styles.content}>{children}</div>
|
||||
{postfix ? (
|
||||
<div className={styles.postfix} onClick={stopPropagation}>
|
||||
{postfix}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
MenuItem.displayName = 'MenuItem';
|
||||
|
||||
export const MenuLinkItem = React.forwardRef<HTMLDivElement, MenuLinkItemProps>(
|
||||
({ to, linkComponent: LinkComponent = WorkbenchLink, ...props }, ref) => {
|
||||
return (
|
||||
<LinkComponent to={to} className={styles.linkItemRoot}>
|
||||
{/* The <a> element rendered by Link does not generate display box due to `display: contents` style */}
|
||||
{/* Thus ref is passed to MenuItem instead of Link */}
|
||||
<MenuItem ref={ref} {...props}></MenuItem>
|
||||
</LinkComponent>
|
||||
);
|
||||
}
|
||||
);
|
||||
MenuLinkItem.displayName = 'MenuLinkItem';
|
||||
@@ -1,36 +0,0 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { cssVarV2 } from '@toeverything/theme/v2';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
export const root = style({
|
||||
display: 'inline-flex',
|
||||
background: cssVarV2('button/siderbarPrimary/background'),
|
||||
alignItems: 'center',
|
||||
borderRadius: '8px',
|
||||
border: `1px solid ${cssVarV2('layer/insideBorder/border')}`,
|
||||
fontSize: cssVar('fontSm'),
|
||||
width: '100%',
|
||||
height: '36px',
|
||||
userSelect: 'none',
|
||||
cursor: 'pointer',
|
||||
padding: '0 12px',
|
||||
position: 'relative',
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
});
|
||||
export const icon = style({
|
||||
marginRight: '8px',
|
||||
color: cssVarV2('icon/primary'),
|
||||
fontSize: '20px',
|
||||
});
|
||||
export const spacer = style({
|
||||
flex: 1,
|
||||
});
|
||||
export const shortcutHint = style({
|
||||
color: cssVarV2('text/tertiary'),
|
||||
fontSize: cssVar('fontBase'),
|
||||
});
|
||||
export const quickSearchBarEllipsisStyle = style({
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
});
|
||||
@@ -1,16 +0,0 @@
|
||||
import type { Meta, StoryFn } from '@storybook/react';
|
||||
|
||||
import { QuickSearchInput } from './index';
|
||||
|
||||
export default {
|
||||
title: 'Components/AppSidebar/QuickSearchInput',
|
||||
component: QuickSearchInput,
|
||||
} satisfies Meta;
|
||||
|
||||
export const Default: StoryFn = () => {
|
||||
return (
|
||||
<main style={{ width: '240px' }}>
|
||||
<QuickSearchInput onClick={() => alert('opened')} />
|
||||
</main>
|
||||
);
|
||||
};
|
||||
@@ -1,34 +0,0 @@
|
||||
import { useI18n } from '@affine/i18n';
|
||||
import { SearchIcon } from '@blocksuite/icons/rc';
|
||||
import clsx from 'clsx';
|
||||
import type { HTMLAttributes } from 'react';
|
||||
|
||||
import { Spotlight } from '../spolight';
|
||||
import * as styles from './index.css';
|
||||
|
||||
interface QuickSearchInputProps extends HTMLAttributes<HTMLDivElement> {
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
// Although it is called an input, it is actually a button.
|
||||
export function QuickSearchInput({ onClick, ...props }: QuickSearchInputProps) {
|
||||
const t = useI18n();
|
||||
|
||||
return (
|
||||
<div
|
||||
{...props}
|
||||
className={clsx([props.className, styles.root])}
|
||||
onClick={onClick}
|
||||
>
|
||||
<SearchIcon className={styles.icon} />
|
||||
<span className={styles.quickSearchBarEllipsisStyle}>
|
||||
{t['Quick search']()}
|
||||
</span>
|
||||
<div className={styles.spacer} />
|
||||
<div className={styles.shortcutHint}>
|
||||
{environment.isMacOs ? ' ⌘ + K' : ' Ctrl + K'}
|
||||
</div>
|
||||
<Spotlight />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,87 +0,0 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { globalStyle, style } from '@vanilla-extract/css';
|
||||
export const baseContainer = style({
|
||||
padding: '4px 16px',
|
||||
display: 'flex',
|
||||
flexFlow: 'column nowrap',
|
||||
':empty': {
|
||||
display: 'none',
|
||||
},
|
||||
});
|
||||
export const scrollableContainerRoot = style({
|
||||
flex: '1 1 auto',
|
||||
overflowY: 'hidden',
|
||||
vars: {
|
||||
'--scrollbar-width': '10px',
|
||||
},
|
||||
});
|
||||
export const scrollTopBorder = style({
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: '16px',
|
||||
right: '16px',
|
||||
height: '1px',
|
||||
transition: 'opacity .3s .2s',
|
||||
opacity: 0,
|
||||
background: cssVar('black10'),
|
||||
selectors: {
|
||||
'&[data-has-scroll-top="true"]': {
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
});
|
||||
export const scrollableViewport = style({
|
||||
height: '100%',
|
||||
marginTop: '4px',
|
||||
// safe area to avoid bottom clipping
|
||||
paddingBottom: 8,
|
||||
});
|
||||
globalStyle(`${scrollableViewport} > div`, {
|
||||
maxWidth: '100%',
|
||||
display: 'block !important',
|
||||
});
|
||||
export const scrollableContainer = style([
|
||||
baseContainer,
|
||||
{
|
||||
height: '100%',
|
||||
padding: '0px 8px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 8,
|
||||
},
|
||||
]);
|
||||
export const scrollbar = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
userSelect: 'none',
|
||||
touchAction: 'none',
|
||||
padding: '0 2px',
|
||||
width: 'var(--scrollbar-width)',
|
||||
height: '100%',
|
||||
opacity: 1,
|
||||
transition: 'opacity .15s',
|
||||
selectors: {
|
||||
'&[data-state="hidden"]': {
|
||||
opacity: 0,
|
||||
},
|
||||
},
|
||||
});
|
||||
export const scrollbarThumb = style({
|
||||
position: 'relative',
|
||||
background: cssVar('black30'),
|
||||
borderRadius: '4px',
|
||||
overflow: 'hidden',
|
||||
selectors: {
|
||||
'&::before': {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
minWidth: '44px',
|
||||
minHeight: '44px',
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -1,35 +0,0 @@
|
||||
import { useHasScrollTop } from '@affine/component';
|
||||
import * as ScrollArea from '@radix-ui/react-scroll-area';
|
||||
import clsx from 'clsx';
|
||||
import { type PropsWithChildren } from 'react';
|
||||
|
||||
import * as styles from './index.css';
|
||||
|
||||
export function SidebarContainer({ children }: PropsWithChildren) {
|
||||
return <div className={clsx([styles.baseContainer])}>{children}</div>;
|
||||
}
|
||||
|
||||
export function SidebarScrollableContainer({ children }: PropsWithChildren) {
|
||||
const [setContainer, hasScrollTop] = useHasScrollTop();
|
||||
return (
|
||||
<ScrollArea.Root className={styles.scrollableContainerRoot}>
|
||||
<div
|
||||
data-has-scroll-top={hasScrollTop}
|
||||
className={styles.scrollTopBorder}
|
||||
/>
|
||||
<ScrollArea.Viewport
|
||||
className={clsx([styles.scrollableViewport])}
|
||||
ref={setContainer}
|
||||
>
|
||||
<div className={clsx([styles.scrollableContainer])}>{children}</div>
|
||||
</ScrollArea.Viewport>
|
||||
<ScrollArea.Scrollbar
|
||||
forceMount
|
||||
orientation="vertical"
|
||||
className={styles.scrollbar}
|
||||
>
|
||||
<ScrollArea.Thumb className={styles.scrollbarThumb} />
|
||||
</ScrollArea.Scrollbar>
|
||||
</ScrollArea.Root>
|
||||
);
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
import { useAtomValue } from 'jotai';
|
||||
|
||||
import { navHeaderStyle } from '../index.css';
|
||||
import { appSidebarOpenAtom } from '../index.jotai';
|
||||
import { SidebarSwitch } from './sidebar-switch';
|
||||
|
||||
export const SidebarHeader = () => {
|
||||
const open = useAtomValue(appSidebarOpenAtom);
|
||||
|
||||
return (
|
||||
<div className={navHeaderStyle} data-open={open}>
|
||||
<SidebarSwitch show={open} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export * from './sidebar-switch';
|
||||
@@ -1,18 +0,0 @@
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const sidebarSwitchClip = style({
|
||||
flexShrink: 0,
|
||||
overflow: 'hidden',
|
||||
transition:
|
||||
'max-width 0.2s ease-in-out, margin 0.3s ease-in-out, opacity 0.3s ease',
|
||||
selectors: {
|
||||
'&[data-show=true]': {
|
||||
opacity: 1,
|
||||
maxWidth: '60px',
|
||||
},
|
||||
'&[data-show=false]': {
|
||||
opacity: 0,
|
||||
maxWidth: 0,
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -1,43 +0,0 @@
|
||||
import { IconButton } from '@affine/component';
|
||||
import { useI18n } from '@affine/i18n';
|
||||
import { SidebarIcon } from '@blocksuite/icons/rc';
|
||||
import { useAtom } from 'jotai';
|
||||
|
||||
import { appSidebarOpenAtom } from '../index.jotai';
|
||||
import * as styles from './sidebar-switch.css';
|
||||
|
||||
export const SidebarSwitch = ({
|
||||
show,
|
||||
className,
|
||||
}: {
|
||||
show: boolean;
|
||||
className?: string;
|
||||
}) => {
|
||||
const [open, setOpen] = useAtom(appSidebarOpenAtom);
|
||||
const t = useI18n();
|
||||
const tooltipContent = open
|
||||
? t['com.affine.sidebarSwitch.collapse']()
|
||||
: t['com.affine.sidebarSwitch.expand']();
|
||||
|
||||
return (
|
||||
<div
|
||||
data-show={show}
|
||||
className={styles.sidebarSwitchClip}
|
||||
data-testid={`app-sidebar-arrow-button-${open ? 'collapse' : 'expand'}`}
|
||||
>
|
||||
<IconButton
|
||||
tooltip={tooltipContent}
|
||||
tooltipShortcut={['$mod', '/']}
|
||||
tooltipOptions={{ side: open ? 'bottom' : 'right' }}
|
||||
className={className}
|
||||
size="24"
|
||||
style={{
|
||||
zIndex: 1,
|
||||
}}
|
||||
onClick={() => setOpen(open => !open)}
|
||||
>
|
||||
<SidebarIcon />
|
||||
</IconButton>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,22 +0,0 @@
|
||||
import { createVar, style } from '@vanilla-extract/css';
|
||||
export const spotlightX = createVar();
|
||||
export const spotlightY = createVar();
|
||||
export const spotlightOpacity = createVar();
|
||||
export const spotlightSize = createVar();
|
||||
export const spotlight = style({
|
||||
vars: {
|
||||
[spotlightX]: '0px',
|
||||
[spotlightY]: '0px',
|
||||
[spotlightOpacity]: '0',
|
||||
[spotlightSize]: '64px',
|
||||
},
|
||||
position: 'absolute',
|
||||
background: `radial-gradient(${spotlightSize} circle at ${spotlightX} ${spotlightY}, var(--affine-text-primary-color), transparent)`,
|
||||
inset: '0px',
|
||||
pointerEvents: 'none',
|
||||
willChange: 'background, opacity',
|
||||
opacity: spotlightOpacity,
|
||||
zIndex: 1,
|
||||
transition: 'all 0.2s',
|
||||
borderRadius: 'inherit',
|
||||
});
|
||||
@@ -1,30 +0,0 @@
|
||||
import type { Meta, StoryFn } from '@storybook/react';
|
||||
import type { PropsWithChildren } from 'react';
|
||||
|
||||
import { Spotlight } from './index';
|
||||
|
||||
export default {
|
||||
title: 'Components/AppSidebar/Spotlight',
|
||||
component: Spotlight,
|
||||
} satisfies Meta;
|
||||
|
||||
const Container = ({ children }: PropsWithChildren) => (
|
||||
<main
|
||||
style={{
|
||||
position: 'relative',
|
||||
width: '320px',
|
||||
height: '320px',
|
||||
border: '1px solid #ccc',
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</main>
|
||||
);
|
||||
|
||||
export const Default: StoryFn = () => {
|
||||
return (
|
||||
<Container>
|
||||
<Spotlight />
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
@@ -1,50 +0,0 @@
|
||||
import { assignInlineVars } from '@vanilla-extract/dynamic';
|
||||
import { useTheme } from 'next-themes';
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
|
||||
import * as styles from './index.css';
|
||||
|
||||
function useMouseOffset() {
|
||||
const [offset, setOffset] = React.useState<{ x: number; y: number }>();
|
||||
const [outside, setOutside] = React.useState(true);
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (ref.current && ref.current.parentElement) {
|
||||
const el = ref.current.parentElement;
|
||||
|
||||
// debounce?
|
||||
const onMouseMove = (e: MouseEvent) => {
|
||||
const bound = el.getBoundingClientRect();
|
||||
setOffset({ x: e.clientX - bound.x, y: e.clientY - bound.y });
|
||||
setOutside(false);
|
||||
};
|
||||
|
||||
const onMouseLeave = () => {
|
||||
setOutside(true);
|
||||
};
|
||||
el.addEventListener('mousemove', onMouseMove);
|
||||
el.addEventListener('mouseleave', onMouseLeave);
|
||||
return () => {
|
||||
el.removeEventListener('mousemove', onMouseMove);
|
||||
el.removeEventListener('mouseleave', onMouseLeave);
|
||||
};
|
||||
}
|
||||
return;
|
||||
}, []);
|
||||
|
||||
return [offset, outside, ref] as const;
|
||||
}
|
||||
|
||||
export function Spotlight() {
|
||||
const [offset, outside, ref] = useMouseOffset();
|
||||
const { theme } = useTheme();
|
||||
const isDark = theme === 'dark';
|
||||
const offsetVars = assignInlineVars({
|
||||
[styles.spotlightX]: (offset?.x ?? 0) + 'px',
|
||||
[styles.spotlightY]: (offset?.y ?? 0) + 'px',
|
||||
[styles.spotlightOpacity]: outside ? '0' : isDark ? '.1' : '0.07',
|
||||
});
|
||||
|
||||
return <div style={offsetVars} ref={ref} className={styles.spotlight} />;
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
import { useAtom } from 'jotai';
|
||||
import { useCallback, useMemo } from 'react';
|
||||
|
||||
import { appSidebarOpenAtom } from '../../../components/app-sidebar';
|
||||
|
||||
export function useSwitchSidebarStatus() {
|
||||
const [isOpened, setOpened] = useAtom(appSidebarOpenAtom);
|
||||
|
||||
const onOpenChange = useCallback(() => {
|
||||
setOpened(open => !open);
|
||||
}, [setOpened]);
|
||||
|
||||
return useMemo(
|
||||
() => ({
|
||||
onOpenChange,
|
||||
isOpened,
|
||||
}),
|
||||
[isOpened, onOpenChange]
|
||||
);
|
||||
}
|
||||
@@ -1,3 +1,4 @@
|
||||
import { AppSidebarService } from '@affine/core/modules/app-sidebar';
|
||||
import { useI18n } from '@affine/i18n';
|
||||
import type { AffineEditorContainer } from '@blocksuite/affine/presets';
|
||||
import { useService, WorkspaceService } from '@toeverything/infra';
|
||||
@@ -71,6 +72,7 @@ export function useRegisterWorkspaceCommands() {
|
||||
const cmdkQuickSearchService = useService(CMDKQuickSearchService);
|
||||
const editorSettingService = useService(EditorSettingService);
|
||||
const createWorkspaceDialogService = useService(CreateWorkspaceDialogService);
|
||||
const appSidebarService = useService(AppSidebarService);
|
||||
|
||||
useEffect(() => {
|
||||
const unsub = registerCMDKCommand(cmdkQuickSearchService, editor);
|
||||
@@ -123,12 +125,12 @@ export function useRegisterWorkspaceCommands() {
|
||||
|
||||
// register AffineLayoutCommands
|
||||
useEffect(() => {
|
||||
const unsub = registerAffineLayoutCommands({ t, store });
|
||||
const unsub = registerAffineLayoutCommands({ t, appSidebarService });
|
||||
|
||||
return () => {
|
||||
unsub();
|
||||
};
|
||||
}, [store, t]);
|
||||
}, [appSidebarService, store, t]);
|
||||
|
||||
// register AffineCreationCommands
|
||||
useEffect(() => {
|
||||
|
||||
@@ -3,6 +3,7 @@ import {
|
||||
pushGlobalLoadingEventAtom,
|
||||
resolveGlobalLoadingEventAtom,
|
||||
} from '@affine/component/global-loading';
|
||||
import { SidebarSwitch } from '@affine/core/modules/app-sidebar/views';
|
||||
import { useI18n } from '@affine/i18n';
|
||||
import { type DocMode, ZipTransformer } from '@blocksuite/affine/blocks';
|
||||
import {
|
||||
@@ -17,7 +18,7 @@ import {
|
||||
useServices,
|
||||
WorkspaceService,
|
||||
} from '@toeverything/infra';
|
||||
import { useAtomValue, useSetAtom } from 'jotai';
|
||||
import { useSetAtom } from 'jotai';
|
||||
import type { PropsWithChildren } from 'react';
|
||||
import { useEffect } from 'react';
|
||||
import {
|
||||
@@ -40,7 +41,6 @@ import { WorkbenchService } from '../../modules/workbench';
|
||||
import { WorkspaceAIOnboarding } from '../affine/ai-onboarding';
|
||||
import { AppContainer } from '../affine/app-container';
|
||||
import { SyncAwareness } from '../affine/awareness';
|
||||
import { appSidebarResizingAtom, SidebarSwitch } from '../app-sidebar';
|
||||
import { useRegisterFindInPageCommands } from '../hooks/affine/use-register-find-in-page-commands';
|
||||
import { useSubscriptionNotifyReader } from '../hooks/affine/use-subscription-notify';
|
||||
import { useRegisterWorkspaceCommands } from '../hooks/use-register-workspace-commands';
|
||||
@@ -221,10 +221,8 @@ const WorkspaceLayoutUIContainer = ({ children }: PropsWithChildren) => {
|
||||
})
|
||||
);
|
||||
|
||||
const resizing = useAtomValue(appSidebarResizingAtom);
|
||||
|
||||
return (
|
||||
<AppContainer data-current-path={currentPath} resizing={resizing}>
|
||||
<AppContainer data-current-path={currentPath}>
|
||||
<LayoutComponent>{children}</LayoutComponent>
|
||||
</AppContainer>
|
||||
);
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { AppSidebarService } from '@affine/core/modules/app-sidebar';
|
||||
import { useLiveData, useService } from '@toeverything/infra';
|
||||
import clsx from 'clsx';
|
||||
import { useAtomValue } from 'jotai';
|
||||
import type { ReactNode } from 'react';
|
||||
|
||||
import { appSidebarFloatingAtom, appSidebarOpenAtom } from '../../app-sidebar';
|
||||
import * as style from './style.css';
|
||||
|
||||
interface HeaderPros {
|
||||
@@ -16,8 +16,9 @@ interface HeaderPros {
|
||||
// 1. Manage layout issues independently of page or business logic
|
||||
// 2. Dynamic centered middle element (relative to the main-container), when the middle element is detected to collide with the two elements, the line wrapping process is performed
|
||||
export const Header = ({ left, center, right }: HeaderPros) => {
|
||||
const open = useAtomValue(appSidebarOpenAtom);
|
||||
const appSidebarFloating = useAtomValue(appSidebarFloatingAtom);
|
||||
const appSidebarService = useService(AppSidebarService).sidebar;
|
||||
const open = useLiveData(appSidebarService.open$);
|
||||
const appSidebarFloating = useLiveData(appSidebarService.responsiveFloating$);
|
||||
return (
|
||||
<div
|
||||
className={clsx(style.header)}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { useAsyncCallback } from '@affine/core/components/hooks/affine-async-hooks';
|
||||
import { MenuItem } from '@affine/core/modules/app-sidebar/views';
|
||||
import { useI18n } from '@affine/i18n';
|
||||
import { track } from '@affine/track';
|
||||
import type { DocCollection } from '@blocksuite/affine/store';
|
||||
import { ImportIcon } from '@blocksuite/icons/rc';
|
||||
|
||||
import { MenuItem } from '../app-sidebar';
|
||||
import { usePageHelper } from '../blocksuite/block-suite-page-list/utils';
|
||||
|
||||
const ImportPage = ({ docCollection }: { docCollection: DocCollection }) => {
|
||||
|
||||
@@ -1,5 +1,17 @@
|
||||
import { openSettingModalAtom } from '@affine/core/components/atoms';
|
||||
import { useAsyncCallback } from '@affine/core/components/hooks/affine-async-hooks';
|
||||
import {
|
||||
AddPageButton,
|
||||
AppDownloadButton,
|
||||
AppSidebar,
|
||||
CategoryDivider,
|
||||
MenuItem,
|
||||
MenuLinkItem,
|
||||
QuickSearchInput,
|
||||
SidebarContainer,
|
||||
SidebarScrollableContainer,
|
||||
} from '@affine/core/modules/app-sidebar/views';
|
||||
import { ExternalMenuLinkItem } from '@affine/core/modules/app-sidebar/views/menu-item/external-menu-link-item';
|
||||
import {
|
||||
ExplorerCollections,
|
||||
ExplorerFavorites,
|
||||
@@ -30,18 +42,6 @@ import type { MouseEvent, ReactElement } from 'react';
|
||||
import { useCallback, useEffect } from 'react';
|
||||
|
||||
import { WorkbenchService } from '../../modules/workbench';
|
||||
import {
|
||||
AddPageButton,
|
||||
AppDownloadButton,
|
||||
AppSidebar,
|
||||
CategoryDivider,
|
||||
MenuItem,
|
||||
MenuLinkItem,
|
||||
QuickSearchInput,
|
||||
SidebarContainer,
|
||||
SidebarScrollableContainer,
|
||||
} from '../app-sidebar';
|
||||
import { ExternalMenuLinkItem } from '../app-sidebar/menu-item/external-menu-link-item';
|
||||
import { usePageHelper } from '../blocksuite/block-suite-page-list/utils';
|
||||
import { WorkspaceNavigator } from '../workspace-selector';
|
||||
import ImportPage from './import-page';
|
||||
|
||||
@@ -3,6 +3,7 @@ import {
|
||||
useJournalInfoHelper,
|
||||
useJournalRouteHelper,
|
||||
} from '@affine/core/components/hooks/use-journal';
|
||||
import { MenuItem } from '@affine/core/modules/app-sidebar/views';
|
||||
import { DocDisplayMetaService } from '@affine/core/modules/doc-display-meta';
|
||||
import { WorkbenchService } from '@affine/core/modules/workbench';
|
||||
import { isNewTabTrigger } from '@affine/core/utils';
|
||||
@@ -12,8 +13,6 @@ import { TodayIcon } from '@blocksuite/icons/rc';
|
||||
import { useLiveData, useService } from '@toeverything/infra';
|
||||
import { type MouseEvent } from 'react';
|
||||
|
||||
import { MenuItem } from '../app-sidebar';
|
||||
|
||||
interface AppSidebarJournalButtonProps {
|
||||
docCollection: DocCollection;
|
||||
}
|
||||
|
||||
@@ -3,6 +3,7 @@ import {
|
||||
useConfirmModal,
|
||||
useDropTarget,
|
||||
} from '@affine/component';
|
||||
import { MenuLinkItem } from '@affine/core/modules/app-sidebar/views';
|
||||
import type { AffineDNDData } from '@affine/core/types/dnd';
|
||||
import { useI18n } from '@affine/i18n';
|
||||
import {
|
||||
@@ -12,8 +13,6 @@ import {
|
||||
useService,
|
||||
} from '@toeverything/infra';
|
||||
|
||||
import { MenuLinkItem } from '../app-sidebar';
|
||||
|
||||
export const TrashButton = () => {
|
||||
const t = useI18n();
|
||||
const docsService = useService(DocsService);
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import { useAppUpdater } from '@affine/core/components/hooks/use-app-updater';
|
||||
import { AppUpdaterButton } from '@affine/core/modules/app-sidebar/views';
|
||||
import { Suspense } from 'react';
|
||||
|
||||
import { AppUpdaterButton } from '../app-sidebar';
|
||||
|
||||
const UpdaterButtonInner = () => {
|
||||
const appUpdater = useAppUpdater();
|
||||
|
||||
|
||||
@@ -9,9 +9,6 @@ export const appStyle = style({
|
||||
display: 'flex',
|
||||
backgroundColor: cssVar('backgroundPrimaryColor'),
|
||||
selectors: {
|
||||
'&[data-is-resizing="true"]': {
|
||||
cursor: 'col-resize',
|
||||
},
|
||||
'&.blur-background': {
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { useAppSettingHelper } from '@affine/core/components/hooks/affine/use-app-setting-helper';
|
||||
import { AppSidebarService } from '@affine/core/modules/app-sidebar';
|
||||
import {
|
||||
DocsService,
|
||||
GlobalContextService,
|
||||
@@ -6,22 +7,18 @@ import {
|
||||
useService,
|
||||
} from '@toeverything/infra';
|
||||
import { clsx } from 'clsx';
|
||||
import { useAtomValue } from 'jotai';
|
||||
import type { HTMLAttributes, PropsWithChildren, ReactElement } from 'react';
|
||||
import { forwardRef } from 'react';
|
||||
|
||||
import { appSidebarOpenAtom } from '../app-sidebar';
|
||||
import { appStyle, mainContainerStyle, toolStyle } from './index.css';
|
||||
|
||||
export type WorkspaceRootProps = PropsWithChildren<{
|
||||
resizing?: boolean;
|
||||
className?: string;
|
||||
useNoisyBackground?: boolean;
|
||||
useBlurBackground?: boolean;
|
||||
}>;
|
||||
|
||||
export const AppContainer = ({
|
||||
resizing,
|
||||
useNoisyBackground,
|
||||
useBlurBackground,
|
||||
children,
|
||||
@@ -39,7 +36,6 @@ export const AppContainer = ({
|
||||
'blur-background': blurBackground,
|
||||
})}
|
||||
data-noise-background={noisyBackground}
|
||||
data-is-resizing={resizing}
|
||||
data-blur-background={blurBackground}
|
||||
>
|
||||
{children}
|
||||
@@ -53,7 +49,8 @@ export const MainContainer = forwardRef<
|
||||
HTMLDivElement,
|
||||
PropsWithChildren<MainContainerProps>
|
||||
>(function MainContainer({ className, children, ...props }, ref): ReactElement {
|
||||
const appSideBarOpen = useAtomValue(appSidebarOpenAtom);
|
||||
const appSidebarService = useService(AppSidebarService).sidebar;
|
||||
const appSideBarOpen = useLiveData(appSidebarService.open$);
|
||||
const { appSettings } = useAppSettingHelper();
|
||||
|
||||
return (
|
||||
|
||||
Reference in New Issue
Block a user