mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-09-07 01:09:54 +08:00
feat(component): mobile menu support (#7892)
This commit is contained in:
Cats Juice
@@ -43,12 +43,13 @@
|
|||||||
"@radix-ui/react-popover": "^1.0.7",
|
"@radix-ui/react-popover": "^1.0.7",
|
||||||
"@radix-ui/react-radio-group": "^1.1.3",
|
"@radix-ui/react-radio-group": "^1.1.3",
|
||||||
"@radix-ui/react-scroll-area": "^1.0.5",
|
"@radix-ui/react-scroll-area": "^1.0.5",
|
||||||
|
"@radix-ui/react-slot": "^1.1.0",
|
||||||
"@radix-ui/react-tabs": "^1.1.0",
|
"@radix-ui/react-tabs": "^1.1.0",
|
||||||
"@radix-ui/react-toast": "^1.1.5",
|
"@radix-ui/react-toast": "^1.1.5",
|
||||||
"@radix-ui/react-toolbar": "^1.0.4",
|
"@radix-ui/react-toolbar": "^1.0.4",
|
||||||
"@radix-ui/react-tooltip": "^1.0.7",
|
"@radix-ui/react-tooltip": "^1.0.7",
|
||||||
"@radix-ui/react-visually-hidden": "^1.1.0",
|
"@radix-ui/react-visually-hidden": "^1.1.0",
|
||||||
"@toeverything/theme": "^1.0.4",
|
"@toeverything/theme": "^1.0.5",
|
||||||
"@vanilla-extract/dynamic": "^2.1.0",
|
"@vanilla-extract/dynamic": "^2.1.0",
|
||||||
"bytes": "^3.1.2",
|
"bytes": "^3.1.2",
|
||||||
"check-password-strength": "^2.0.10",
|
"check-password-strength": "^2.0.10",
|
||||||
|
|||||||
@@ -288,3 +288,9 @@ body {
|
|||||||
[data-lit-react-wrapper] {
|
[data-lit-react-wrapper] {
|
||||||
display: contents;
|
display: contents;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Avoid color overriden by user-agent */
|
||||||
|
button,
|
||||||
|
input {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
import { cssVar } from '@toeverything/theme';
|
import { cssVar } from '@toeverything/theme';
|
||||||
import { cssVarV2 } from '@toeverything/theme/v2';
|
import { style } from '@vanilla-extract/css';
|
||||||
import { globalStyle, style } from '@vanilla-extract/css';
|
|
||||||
export const dropdownBtn = style({
|
export const dropdownBtn = style({
|
||||||
display: 'inline-flex',
|
display: 'inline-flex',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -108,363 +107,3 @@ export const radioButtonGroup = style({
|
|||||||
// @ts-expect-error - fix electron drag
|
// @ts-expect-error - fix electron drag
|
||||||
WebkitAppRegion: 'no-drag',
|
WebkitAppRegion: 'no-drag',
|
||||||
});
|
});
|
||||||
export const button = style({
|
|
||||||
display: 'inline-flex',
|
|
||||||
justifyContent: 'center',
|
|
||||||
alignItems: 'center',
|
|
||||||
userSelect: 'none',
|
|
||||||
touchAction: 'manipulation',
|
|
||||||
outline: '0',
|
|
||||||
border: '1px solid',
|
|
||||||
padding: '0 18px',
|
|
||||||
borderRadius: '8px',
|
|
||||||
fontSize: cssVar('fontBase'),
|
|
||||||
transition: 'all .3s',
|
|
||||||
['WebkitAppRegion' as string]: 'no-drag',
|
|
||||||
fontWeight: 600,
|
|
||||||
// changeable
|
|
||||||
height: '28px',
|
|
||||||
background: cssVar('white'),
|
|
||||||
borderColor: cssVarV2('layer/insideBorder/border'),
|
|
||||||
color: cssVarV2('text/primary'),
|
|
||||||
selectors: {
|
|
||||||
'&.text-bold': {
|
|
||||||
fontWeight: 600,
|
|
||||||
},
|
|
||||||
'&:not(.without-hover):hover': {
|
|
||||||
background: cssVar('hoverColor'),
|
|
||||||
},
|
|
||||||
'&.disabled': {
|
|
||||||
opacity: '.4',
|
|
||||||
cursor: 'default',
|
|
||||||
color: cssVar('textDisableColor'),
|
|
||||||
pointerEvents: 'none',
|
|
||||||
},
|
|
||||||
'&.loading': {
|
|
||||||
cursor: 'default',
|
|
||||||
color: cssVar('textDisableColor'),
|
|
||||||
pointerEvents: 'none',
|
|
||||||
},
|
|
||||||
'&.disabled:not(.without-hover):hover, &.loading:not(.without-hover):hover':
|
|
||||||
{
|
|
||||||
background: 'inherit',
|
|
||||||
},
|
|
||||||
'&.block': {
|
|
||||||
display: 'flex',
|
|
||||||
width: '100%',
|
|
||||||
},
|
|
||||||
'&.circle': {
|
|
||||||
borderRadius: '50%',
|
|
||||||
},
|
|
||||||
'&.round': {
|
|
||||||
borderRadius: '14px',
|
|
||||||
},
|
|
||||||
// size
|
|
||||||
'&.large': {
|
|
||||||
height: '32px',
|
|
||||||
},
|
|
||||||
'&.round.large': {
|
|
||||||
borderRadius: '16px',
|
|
||||||
},
|
|
||||||
'&.extraLarge': {
|
|
||||||
height: '40px',
|
|
||||||
},
|
|
||||||
'&.round.extraLarge': {
|
|
||||||
borderRadius: '20px',
|
|
||||||
},
|
|
||||||
// type
|
|
||||||
'&.plain': {
|
|
||||||
color: cssVar('textPrimaryColor'),
|
|
||||||
borderColor: 'transparent',
|
|
||||||
background: 'transparent',
|
|
||||||
},
|
|
||||||
'&.primary': {
|
|
||||||
color: cssVar('pureWhite'),
|
|
||||||
background: cssVar('primaryColor'),
|
|
||||||
borderColor: cssVar('black10'),
|
|
||||||
boxShadow: cssVar('buttonInnerShadow'),
|
|
||||||
},
|
|
||||||
'&.primary:not(.without-hover):hover': {
|
|
||||||
background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
|
|
||||||
'primaryColor'
|
|
||||||
)}`,
|
|
||||||
},
|
|
||||||
'&.primary.disabled': {
|
|
||||||
opacity: '.4',
|
|
||||||
cursor: 'default',
|
|
||||||
},
|
|
||||||
'&.primary.disabled:not(.without-hover):hover': {
|
|
||||||
background: cssVar('primaryColor'),
|
|
||||||
},
|
|
||||||
'&.error': {
|
|
||||||
color: cssVar('pureWhite'),
|
|
||||||
background: cssVar('errorColor'),
|
|
||||||
borderColor: cssVar('black10'),
|
|
||||||
boxShadow: cssVar('buttonInnerShadow'),
|
|
||||||
},
|
|
||||||
'&.error:not(.without-hover):hover': {
|
|
||||||
background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
|
|
||||||
'errorColor'
|
|
||||||
)}`,
|
|
||||||
},
|
|
||||||
'&.error.disabled': {
|
|
||||||
opacity: '.4',
|
|
||||||
cursor: 'default',
|
|
||||||
},
|
|
||||||
'&.error.disabled:not(.without-hover):hover': {
|
|
||||||
background: cssVar('errorColor'),
|
|
||||||
},
|
|
||||||
'&.warning': {
|
|
||||||
color: cssVar('white'),
|
|
||||||
background: cssVar('warningColor'),
|
|
||||||
borderColor: cssVar('black10'),
|
|
||||||
boxShadow: cssVar('buttonInnerShadow'),
|
|
||||||
},
|
|
||||||
'&.warning:not(.without-hover):hover': {
|
|
||||||
background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
|
|
||||||
'warningColor'
|
|
||||||
)}`,
|
|
||||||
},
|
|
||||||
'&.warning.disabled': {
|
|
||||||
opacity: '.4',
|
|
||||||
cursor: 'default',
|
|
||||||
},
|
|
||||||
'&.warning.disabled:not(.without-hover):hover': {
|
|
||||||
background: cssVar('warningColor'),
|
|
||||||
},
|
|
||||||
'&.success': {
|
|
||||||
color: cssVar('pureWhite'),
|
|
||||||
background: cssVar('successColor'),
|
|
||||||
borderColor: cssVar('black10'),
|
|
||||||
boxShadow: cssVar('buttonInnerShadow'),
|
|
||||||
},
|
|
||||||
'&.success:not(.without-hover):hover': {
|
|
||||||
background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
|
|
||||||
'successColor'
|
|
||||||
)}`,
|
|
||||||
},
|
|
||||||
'&.success.disabled': {
|
|
||||||
opacity: '.4',
|
|
||||||
cursor: 'default',
|
|
||||||
},
|
|
||||||
'&.success.disabled:not(.without-hover):hover': {
|
|
||||||
background: cssVar('successColor'),
|
|
||||||
},
|
|
||||||
'&.processing': {
|
|
||||||
color: cssVar('pureWhite'),
|
|
||||||
background: cssVar('processingColor'),
|
|
||||||
borderColor: cssVar('black10'),
|
|
||||||
boxShadow: cssVar('buttonInnerShadow'),
|
|
||||||
},
|
|
||||||
'&.processing:not(.without-hover):hover': {
|
|
||||||
background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
|
|
||||||
'processingColor'
|
|
||||||
)}`,
|
|
||||||
},
|
|
||||||
'&.processing.disabled': {
|
|
||||||
opacity: '.4',
|
|
||||||
cursor: 'default',
|
|
||||||
},
|
|
||||||
'&.processing.disabled:not(.without-hover):hover': {
|
|
||||||
background: cssVar('processingColor'),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
globalStyle(`${button} > span`, {
|
|
||||||
// flex: 1,
|
|
||||||
lineHeight: 1,
|
|
||||||
padding: '0 4px',
|
|
||||||
});
|
|
||||||
export const buttonIcon = style({
|
|
||||||
flexShrink: 0,
|
|
||||||
display: 'inline-flex',
|
|
||||||
justifyContent: 'center',
|
|
||||||
alignItems: 'center',
|
|
||||||
color: cssVar('iconColor'),
|
|
||||||
fontSize: '16px',
|
|
||||||
width: '16px',
|
|
||||||
height: '16px',
|
|
||||||
selectors: {
|
|
||||||
'&.start': {
|
|
||||||
marginRight: '4px',
|
|
||||||
},
|
|
||||||
'&.end': {
|
|
||||||
marginLeft: '4px',
|
|
||||||
},
|
|
||||||
'&.large': {
|
|
||||||
fontSize: '20px',
|
|
||||||
width: '20px',
|
|
||||||
height: '20px',
|
|
||||||
},
|
|
||||||
'&.extraLarge': {
|
|
||||||
fontSize: '20px',
|
|
||||||
width: '20px',
|
|
||||||
height: '20px',
|
|
||||||
},
|
|
||||||
'&.color-white': {
|
|
||||||
color: cssVar('white'),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
export const iconButton = style({
|
|
||||||
display: 'inline-flex',
|
|
||||||
justifyContent: 'center',
|
|
||||||
alignItems: 'center',
|
|
||||||
userSelect: 'none',
|
|
||||||
touchAction: 'manipulation',
|
|
||||||
outline: '0',
|
|
||||||
border: '1px solid',
|
|
||||||
borderRadius: '4px',
|
|
||||||
transition: 'all .3s',
|
|
||||||
['WebkitAppRegion' as string]: 'no-drag',
|
|
||||||
// changeable
|
|
||||||
width: '24px',
|
|
||||||
height: '24px',
|
|
||||||
fontSize: '20px',
|
|
||||||
color: cssVar('textPrimaryColor'),
|
|
||||||
borderColor: cssVar('borderColor'),
|
|
||||||
selectors: {
|
|
||||||
'&.without-padding': {
|
|
||||||
margin: '-2px',
|
|
||||||
},
|
|
||||||
'&.active': {
|
|
||||||
color: cssVar('primaryColor'),
|
|
||||||
},
|
|
||||||
'&:not(.without-hover):hover': {
|
|
||||||
background: cssVar('hoverColor'),
|
|
||||||
},
|
|
||||||
'&.disabled': {
|
|
||||||
opacity: '.4',
|
|
||||||
cursor: 'default',
|
|
||||||
color: cssVar('textDisableColor'),
|
|
||||||
pointerEvents: 'none',
|
|
||||||
},
|
|
||||||
'&.loading': {
|
|
||||||
cursor: 'default',
|
|
||||||
color: cssVar('textDisableColor'),
|
|
||||||
pointerEvents: 'none',
|
|
||||||
},
|
|
||||||
'&.disabled:not(.without-hover):hover, &.loading:not(.without-hover):hover':
|
|
||||||
{
|
|
||||||
background: 'inherit',
|
|
||||||
},
|
|
||||||
// size
|
|
||||||
'&.large': {
|
|
||||||
width: '32px',
|
|
||||||
height: '32px',
|
|
||||||
fontSize: '24px',
|
|
||||||
},
|
|
||||||
'&.large.without-padding': {
|
|
||||||
margin: '-4px',
|
|
||||||
},
|
|
||||||
'&.small': {
|
|
||||||
width: '20px',
|
|
||||||
height: '20px',
|
|
||||||
fontSize: '16px',
|
|
||||||
},
|
|
||||||
'&.extra-small': {
|
|
||||||
width: '16px',
|
|
||||||
height: '16px',
|
|
||||||
fontSize: '12px',
|
|
||||||
},
|
|
||||||
// type
|
|
||||||
'&.plain': {
|
|
||||||
color: cssVar('iconColor'),
|
|
||||||
borderColor: 'transparent',
|
|
||||||
background: 'transparent',
|
|
||||||
},
|
|
||||||
'&.plain.active': {
|
|
||||||
color: cssVar('primaryColor'),
|
|
||||||
},
|
|
||||||
'&.primary': {
|
|
||||||
color: cssVar('white'),
|
|
||||||
background: cssVar('primaryColor'),
|
|
||||||
borderColor: cssVar('black10'),
|
|
||||||
boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset',
|
|
||||||
},
|
|
||||||
'&.primary:not(.without-hover):hover': {
|
|
||||||
background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
|
|
||||||
'primaryColor'
|
|
||||||
)}`,
|
|
||||||
},
|
|
||||||
'&.primary.disabled': {
|
|
||||||
opacity: '.4',
|
|
||||||
cursor: 'default',
|
|
||||||
},
|
|
||||||
'&.primary.disabled:not(.without-hover):hover': {
|
|
||||||
background: cssVar('primaryColor'),
|
|
||||||
},
|
|
||||||
'&.error': {
|
|
||||||
color: cssVar('white'),
|
|
||||||
background: cssVar('errorColor'),
|
|
||||||
borderColor: cssVar('black10'),
|
|
||||||
boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset',
|
|
||||||
},
|
|
||||||
'&.error:not(.without-hover):hover': {
|
|
||||||
background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
|
|
||||||
'errorColor'
|
|
||||||
)}`,
|
|
||||||
},
|
|
||||||
'&.error.disabled': {
|
|
||||||
opacity: '.4',
|
|
||||||
cursor: 'default',
|
|
||||||
},
|
|
||||||
'&.error.disabled:not(.without-hover):hover': {
|
|
||||||
background: cssVar('errorColor'),
|
|
||||||
},
|
|
||||||
'&.warning': {
|
|
||||||
color: cssVar('white'),
|
|
||||||
background: cssVar('warningColor'),
|
|
||||||
borderColor: cssVar('black10'),
|
|
||||||
boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset',
|
|
||||||
},
|
|
||||||
'&.warning:not(.without-hover):hover': {
|
|
||||||
background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
|
|
||||||
'warningColor'
|
|
||||||
)}`,
|
|
||||||
},
|
|
||||||
'&.warning.disabled': {
|
|
||||||
opacity: '.4',
|
|
||||||
cursor: 'default',
|
|
||||||
},
|
|
||||||
'&.warning.disabled:not(.without-hover):hover': {
|
|
||||||
background: cssVar('warningColor'),
|
|
||||||
},
|
|
||||||
'&.success': {
|
|
||||||
color: cssVar('white'),
|
|
||||||
background: cssVar('successColor'),
|
|
||||||
borderColor: cssVar('black10'),
|
|
||||||
boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset',
|
|
||||||
},
|
|
||||||
'&.success:not(.without-hover):hover': {
|
|
||||||
background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
|
|
||||||
'successColor'
|
|
||||||
)}`,
|
|
||||||
},
|
|
||||||
'&.success.disabled': {
|
|
||||||
opacity: '.4',
|
|
||||||
cursor: 'default',
|
|
||||||
},
|
|
||||||
'&.success.disabled:not(.without-hover):hover': {
|
|
||||||
background: cssVar('successColor'),
|
|
||||||
},
|
|
||||||
'&.processing': {
|
|
||||||
color: cssVar('white'),
|
|
||||||
background: cssVar('processingColor'),
|
|
||||||
borderColor: cssVar('black10'),
|
|
||||||
boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset',
|
|
||||||
},
|
|
||||||
'&.processing:not(.without-hover):hover': {
|
|
||||||
background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
|
|
||||||
'processingColor'
|
|
||||||
)}`,
|
|
||||||
},
|
|
||||||
'&.processing.disabled': {
|
|
||||||
opacity: '.4',
|
|
||||||
cursor: 'default',
|
|
||||||
},
|
|
||||||
'&.processing.disabled:not(.without-hover):hover': {
|
|
||||||
background: cssVar('processingColor'),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|||||||
@@ -0,0 +1,13 @@
|
|||||||
|
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
|
||||||
|
|
||||||
|
import type { MenuItemProps } from '../menu.types';
|
||||||
|
import { useMenuItem } from '../use-menu-item';
|
||||||
|
|
||||||
|
export const DesktopMenuItem = (props: MenuItemProps) => {
|
||||||
|
const { className, children, otherProps } = useMenuItem(props);
|
||||||
|
return (
|
||||||
|
<DropdownMenu.Item className={className} {...otherProps}>
|
||||||
|
{children}
|
||||||
|
</DropdownMenu.Item>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,39 @@
|
|||||||
|
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
|
||||||
|
import clsx from 'clsx';
|
||||||
|
import { Fragment } from 'react';
|
||||||
|
|
||||||
|
import type { MenuProps } from '../menu.types';
|
||||||
|
import * as styles from '../styles.css';
|
||||||
|
|
||||||
|
export const DesktopMenu = ({
|
||||||
|
children,
|
||||||
|
items,
|
||||||
|
portalOptions,
|
||||||
|
rootOptions,
|
||||||
|
noPortal,
|
||||||
|
contentOptions: {
|
||||||
|
className = '',
|
||||||
|
style: contentStyle = {},
|
||||||
|
...otherContentOptions
|
||||||
|
} = {},
|
||||||
|
}: MenuProps) => {
|
||||||
|
const Wrapper = noPortal ? Fragment : DropdownMenu.Portal;
|
||||||
|
const wrapperProps = noPortal ? {} : portalOptions;
|
||||||
|
return (
|
||||||
|
<DropdownMenu.Root {...rootOptions}>
|
||||||
|
<DropdownMenu.Trigger asChild>{children}</DropdownMenu.Trigger>
|
||||||
|
|
||||||
|
<Wrapper {...wrapperProps}>
|
||||||
|
<DropdownMenu.Content
|
||||||
|
className={clsx(styles.menuContent, className)}
|
||||||
|
sideOffset={5}
|
||||||
|
align="start"
|
||||||
|
style={{ zIndex: 'var(--affine-z-index-popover)', ...contentStyle }}
|
||||||
|
{...otherContentOptions}
|
||||||
|
>
|
||||||
|
{items}
|
||||||
|
</DropdownMenu.Content>
|
||||||
|
</Wrapper>
|
||||||
|
</DropdownMenu.Root>
|
||||||
|
);
|
||||||
|
};
|
||||||
+3
-7
@@ -1,20 +1,16 @@
|
|||||||
import type { DropdownMenuSeparatorProps } from '@radix-ui/react-dropdown-menu';
|
import type { DropdownMenuSeparatorProps } from '@radix-ui/react-dropdown-menu';
|
||||||
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
|
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
|
||||||
import clsx from 'clsx';
|
import clsx from 'clsx';
|
||||||
import { useMemo } from 'react';
|
|
||||||
|
|
||||||
import * as styles from './styles.css';
|
import * as styles from '../styles.css';
|
||||||
|
|
||||||
export const MenuSeparator = ({
|
export const DesktopMenuSeparator = ({
|
||||||
className,
|
className,
|
||||||
...otherProps
|
...otherProps
|
||||||
}: DropdownMenuSeparatorProps) => {
|
}: DropdownMenuSeparatorProps) => {
|
||||||
return (
|
return (
|
||||||
<DropdownMenu.Separator
|
<DropdownMenu.Separator
|
||||||
className={useMemo(
|
className={clsx(styles.menuSeparator, className)}
|
||||||
() => clsx(styles.menuSeparator, className),
|
|
||||||
[className]
|
|
||||||
)}
|
|
||||||
{...otherProps}
|
{...otherProps}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
@@ -0,0 +1,46 @@
|
|||||||
|
import { ArrowRightSmallIcon } from '@blocksuite/icons/rc';
|
||||||
|
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
|
||||||
|
import clsx from 'clsx';
|
||||||
|
import { useMemo } from 'react';
|
||||||
|
|
||||||
|
import type { MenuSubProps } from '../menu.types';
|
||||||
|
import * as styles from '../styles.css';
|
||||||
|
import { useMenuItem } from '../use-menu-item';
|
||||||
|
|
||||||
|
export const DesktopMenuSub = ({
|
||||||
|
children: propsChildren,
|
||||||
|
items,
|
||||||
|
portalOptions,
|
||||||
|
subOptions,
|
||||||
|
triggerOptions,
|
||||||
|
subContentOptions: {
|
||||||
|
className: subContentClassName = '',
|
||||||
|
...otherSubContentOptions
|
||||||
|
} = {},
|
||||||
|
}: MenuSubProps) => {
|
||||||
|
const { className, children, otherProps } = useMenuItem({
|
||||||
|
...triggerOptions,
|
||||||
|
children: propsChildren,
|
||||||
|
suffixIcon: <ArrowRightSmallIcon />,
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DropdownMenu.Sub {...subOptions}>
|
||||||
|
<DropdownMenu.SubTrigger className={className} {...otherProps}>
|
||||||
|
{children}
|
||||||
|
</DropdownMenu.SubTrigger>
|
||||||
|
<DropdownMenu.Portal {...portalOptions}>
|
||||||
|
<DropdownMenu.SubContent
|
||||||
|
sideOffset={12}
|
||||||
|
className={useMemo(
|
||||||
|
() => clsx(styles.menuContent, subContentClassName),
|
||||||
|
[subContentClassName]
|
||||||
|
)}
|
||||||
|
{...otherSubContentOptions}
|
||||||
|
>
|
||||||
|
{items}
|
||||||
|
</DropdownMenu.SubContent>
|
||||||
|
</DropdownMenu.Portal>
|
||||||
|
</DropdownMenu.Sub>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -1,7 +1,29 @@
|
|||||||
export * from './menu';
|
|
||||||
export * from './menu.types';
|
export * from './menu.types';
|
||||||
export * from './menu-icon';
|
import { isMobile } from '../../utils/env';
|
||||||
export * from './menu-item';
|
import { DesktopMenuItem } from './desktop/item';
|
||||||
export * from './menu-separator';
|
import { DesktopMenu } from './desktop/root';
|
||||||
export * from './menu-sub';
|
import { DesktopMenuSeparator } from './desktop/separator';
|
||||||
export * from './menu-trigger';
|
import { DesktopMenuSub } from './desktop/sub';
|
||||||
|
import { MenuTrigger } from './menu-trigger';
|
||||||
|
import { MobileMenuItem } from './mobile/item';
|
||||||
|
import { MobileMenu } from './mobile/root';
|
||||||
|
import { MobileMenuSeparator } from './mobile/separator';
|
||||||
|
import { MobileMenuSub } from './mobile/sub';
|
||||||
|
|
||||||
|
const MenuItem = isMobile() ? MobileMenuItem : DesktopMenuItem;
|
||||||
|
const MenuSeparator = isMobile() ? MobileMenuSeparator : DesktopMenuSeparator;
|
||||||
|
const MenuSub = isMobile() ? MobileMenuSub : DesktopMenuSub;
|
||||||
|
const Menu = isMobile() ? MobileMenu : DesktopMenu;
|
||||||
|
|
||||||
|
export {
|
||||||
|
DesktopMenu,
|
||||||
|
DesktopMenuItem,
|
||||||
|
DesktopMenuSeparator,
|
||||||
|
DesktopMenuSub,
|
||||||
|
MobileMenu,
|
||||||
|
MobileMenuItem,
|
||||||
|
MobileMenuSeparator,
|
||||||
|
MobileMenuSub,
|
||||||
|
};
|
||||||
|
|
||||||
|
export { Menu, MenuItem, MenuSeparator, MenuSub, MenuTrigger };
|
||||||
|
|||||||
@@ -1,39 +0,0 @@
|
|||||||
import clsx from 'clsx';
|
|
||||||
import type { HTMLAttributes, PropsWithChildren, ReactNode } from 'react';
|
|
||||||
import { forwardRef, useMemo } from 'react';
|
|
||||||
|
|
||||||
import { menuItemIcon } from './styles.css';
|
|
||||||
|
|
||||||
export interface MenuIconProps
|
|
||||||
extends PropsWithChildren,
|
|
||||||
HTMLAttributes<HTMLDivElement> {
|
|
||||||
icon?: ReactNode;
|
|
||||||
position?: 'start' | 'end';
|
|
||||||
}
|
|
||||||
|
|
||||||
export const MenuIcon = forwardRef<HTMLDivElement, MenuIconProps>(
|
|
||||||
({ children, icon, position = 'start', className, ...otherProps }, ref) => {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
ref={ref}
|
|
||||||
className={useMemo(
|
|
||||||
() =>
|
|
||||||
clsx(
|
|
||||||
menuItemIcon,
|
|
||||||
{
|
|
||||||
end: position === 'end',
|
|
||||||
start: position === 'start',
|
|
||||||
},
|
|
||||||
className
|
|
||||||
),
|
|
||||||
[className, position]
|
|
||||||
)}
|
|
||||||
{...otherProps}
|
|
||||||
>
|
|
||||||
{icon || children}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
MenuIcon.displayName = 'MenuIcon';
|
|
||||||
@@ -1,33 +0,0 @@
|
|||||||
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
|
|
||||||
|
|
||||||
import type { MenuItemProps } from './menu.types';
|
|
||||||
import { useMenuItem } from './use-menu-item';
|
|
||||||
|
|
||||||
export const MenuItem = ({
|
|
||||||
children: propsChildren,
|
|
||||||
type = 'default',
|
|
||||||
className: propsClassName,
|
|
||||||
preFix,
|
|
||||||
endFix,
|
|
||||||
checked,
|
|
||||||
selected,
|
|
||||||
block,
|
|
||||||
...otherProps
|
|
||||||
}: MenuItemProps) => {
|
|
||||||
const { className, children } = useMenuItem({
|
|
||||||
children: propsChildren,
|
|
||||||
className: propsClassName,
|
|
||||||
type,
|
|
||||||
preFix,
|
|
||||||
endFix,
|
|
||||||
checked,
|
|
||||||
selected,
|
|
||||||
block,
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<DropdownMenu.Item className={className} {...otherProps}>
|
|
||||||
{children}
|
|
||||||
</DropdownMenu.Item>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,72 +0,0 @@
|
|||||||
import { ArrowRightSmallIcon } from '@blocksuite/icons/rc';
|
|
||||||
import type {
|
|
||||||
DropdownMenuPortalProps,
|
|
||||||
DropdownMenuSubContentProps,
|
|
||||||
DropdownMenuSubProps,
|
|
||||||
} from '@radix-ui/react-dropdown-menu';
|
|
||||||
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
|
|
||||||
import clsx from 'clsx';
|
|
||||||
import type { ReactNode } from 'react';
|
|
||||||
import { useMemo } from 'react';
|
|
||||||
|
|
||||||
import type { MenuItemProps } from './menu.types';
|
|
||||||
import { MenuIcon } from './menu-icon';
|
|
||||||
import * as styles from './styles.css';
|
|
||||||
import { useMenuItem } from './use-menu-item';
|
|
||||||
export interface MenuSubProps {
|
|
||||||
children: ReactNode;
|
|
||||||
items: ReactNode;
|
|
||||||
triggerOptions?: Omit<MenuItemProps, 'onSelect' | 'children'>;
|
|
||||||
portalOptions?: Omit<DropdownMenuPortalProps, 'children'>;
|
|
||||||
subOptions?: Omit<DropdownMenuSubProps, 'children'>;
|
|
||||||
subContentOptions?: Omit<DropdownMenuSubContentProps, 'children'>;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const MenuSub = ({
|
|
||||||
children: propsChildren,
|
|
||||||
items,
|
|
||||||
portalOptions,
|
|
||||||
subOptions,
|
|
||||||
triggerOptions: {
|
|
||||||
className: propsClassName,
|
|
||||||
preFix,
|
|
||||||
endFix,
|
|
||||||
type,
|
|
||||||
...otherTriggerOptions
|
|
||||||
} = {},
|
|
||||||
subContentOptions: {
|
|
||||||
className: subContentClassName = '',
|
|
||||||
...otherSubContentOptions
|
|
||||||
} = {},
|
|
||||||
}: MenuSubProps) => {
|
|
||||||
const { className, children } = useMenuItem({
|
|
||||||
children: propsChildren,
|
|
||||||
className: propsClassName,
|
|
||||||
type,
|
|
||||||
preFix,
|
|
||||||
endFix,
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<DropdownMenu.Sub {...subOptions}>
|
|
||||||
<DropdownMenu.SubTrigger className={className} {...otherTriggerOptions}>
|
|
||||||
{children}
|
|
||||||
<MenuIcon position="end">
|
|
||||||
<ArrowRightSmallIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
</DropdownMenu.SubTrigger>
|
|
||||||
<DropdownMenu.Portal {...portalOptions}>
|
|
||||||
<DropdownMenu.SubContent
|
|
||||||
sideOffset={10}
|
|
||||||
className={useMemo(
|
|
||||||
() => clsx(styles.menuContent, subContentClassName),
|
|
||||||
[subContentClassName]
|
|
||||||
)}
|
|
||||||
{...otherSubContentOptions}
|
|
||||||
>
|
|
||||||
{items}
|
|
||||||
</DropdownMenu.SubContent>
|
|
||||||
</DropdownMenu.Portal>
|
|
||||||
</DropdownMenu.Sub>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,18 +0,0 @@
|
|||||||
import type { Meta, StoryFn } from '@storybook/react';
|
|
||||||
|
|
||||||
import type { MenuTriggerProps } from './index';
|
|
||||||
import { MenuTrigger } from './index';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
title: 'UI/MenuTrigger',
|
|
||||||
component: MenuTrigger,
|
|
||||||
} satisfies Meta<typeof MenuTrigger>;
|
|
||||||
|
|
||||||
const Template: StoryFn<MenuTriggerProps> = args => (
|
|
||||||
<div style={{ width: '50%' }}>
|
|
||||||
<MenuTrigger {...args}>This is a menu trigger</MenuTrigger>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
export const Default: StoryFn<MenuTriggerProps> = Template.bind(undefined);
|
|
||||||
Default.args = {};
|
|
||||||
@@ -1,87 +1,24 @@
|
|||||||
import { ArrowDownSmallIcon } from '@blocksuite/icons/rc';
|
import { ArrowDownSmallIcon } from '@blocksuite/icons/rc';
|
||||||
import { assignInlineVars } from '@vanilla-extract/dynamic';
|
|
||||||
import clsx from 'clsx';
|
import clsx from 'clsx';
|
||||||
import type {
|
import { forwardRef, type Ref } from 'react';
|
||||||
CSSProperties,
|
|
||||||
HTMLAttributes,
|
|
||||||
PropsWithChildren,
|
|
||||||
ReactNode,
|
|
||||||
} from 'react';
|
|
||||||
import { forwardRef } from 'react';
|
|
||||||
|
|
||||||
import { MenuIcon } from './menu-icon';
|
import { Button, type ButtonProps } from '../button';
|
||||||
import * as styles from './styles.css';
|
|
||||||
import { triggerWidthVar } from './styles.css';
|
|
||||||
|
|
||||||
export interface MenuTriggerProps
|
export interface MenuTriggerProps extends ButtonProps {}
|
||||||
extends PropsWithChildren,
|
|
||||||
HTMLAttributes<HTMLButtonElement> {
|
|
||||||
width?: CSSProperties['width'];
|
|
||||||
disabled?: boolean;
|
|
||||||
noBorder?: boolean;
|
|
||||||
status?: 'error' | 'success' | 'warning' | 'default';
|
|
||||||
size?: 'default' | 'large' | 'extraLarge';
|
|
||||||
preFix?: ReactNode;
|
|
||||||
endFix?: ReactNode;
|
|
||||||
block?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const MenuTrigger = forwardRef<HTMLButtonElement, MenuTriggerProps>(
|
export const MenuTrigger = forwardRef(function MenuTrigger(
|
||||||
(
|
{ children, className, contentStyle, ...otherProps }: MenuTriggerProps,
|
||||||
{
|
ref: Ref<HTMLButtonElement>
|
||||||
disabled,
|
) {
|
||||||
noBorder = false,
|
return (
|
||||||
className,
|
<Button
|
||||||
status = 'default',
|
ref={ref}
|
||||||
size = 'default',
|
suffix={<ArrowDownSmallIcon />}
|
||||||
preFix,
|
className={clsx(className)}
|
||||||
endFix,
|
contentStyle={{ width: 0, flex: 1, textAlign: 'start', ...contentStyle }}
|
||||||
block = false,
|
{...otherProps}
|
||||||
children,
|
>
|
||||||
width,
|
{children}
|
||||||
style = {},
|
</Button>
|
||||||
...otherProps
|
);
|
||||||
},
|
});
|
||||||
ref
|
|
||||||
) => {
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
ref={ref}
|
|
||||||
style={{
|
|
||||||
...assignInlineVars({
|
|
||||||
[triggerWidthVar]: width
|
|
||||||
? typeof width === 'number'
|
|
||||||
? `${width}px`
|
|
||||||
: width
|
|
||||||
: 'auto',
|
|
||||||
}),
|
|
||||||
...style,
|
|
||||||
}}
|
|
||||||
className={clsx(styles.menuTrigger, className, {
|
|
||||||
// status
|
|
||||||
block,
|
|
||||||
disabled: disabled,
|
|
||||||
'no-border': noBorder,
|
|
||||||
// color
|
|
||||||
error: status === 'error',
|
|
||||||
success: status === 'success',
|
|
||||||
warning: status === 'warning',
|
|
||||||
default: status === 'default',
|
|
||||||
// size
|
|
||||||
large: size === 'large',
|
|
||||||
'extra-large': size === 'extraLarge',
|
|
||||||
})}
|
|
||||||
{...otherProps}
|
|
||||||
>
|
|
||||||
{preFix}
|
|
||||||
{children}
|
|
||||||
{endFix}
|
|
||||||
<MenuIcon position="end">
|
|
||||||
<ArrowDownSmallIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
MenuTrigger.displayName = 'MenuTrigger';
|
|
||||||
|
|||||||
@@ -6,14 +6,7 @@ import { useCallback, useState } from 'react';
|
|||||||
import { Button } from '../button';
|
import { Button } from '../button';
|
||||||
import { Tooltip } from '../tooltip';
|
import { Tooltip } from '../tooltip';
|
||||||
import type { MenuItemProps, MenuProps } from './index';
|
import type { MenuItemProps, MenuProps } from './index';
|
||||||
import {
|
import { Menu, MenuItem, MenuSeparator, MenuSub } from './index';
|
||||||
Menu,
|
|
||||||
MenuIcon,
|
|
||||||
MenuItem,
|
|
||||||
MenuSeparator,
|
|
||||||
MenuSub,
|
|
||||||
MenuTrigger,
|
|
||||||
} from './index';
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
title: 'UI/Menu',
|
title: 'UI/Menu',
|
||||||
@@ -29,14 +22,14 @@ const Template: StoryFn<MenuProps> = args => (
|
|||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<MenuTrigger>menu trigger</MenuTrigger>
|
<Button>menu trigger</Button>
|
||||||
</Menu>
|
</Menu>
|
||||||
);
|
);
|
||||||
|
|
||||||
interface Items {
|
interface Items {
|
||||||
label: ReactNode;
|
label: ReactNode;
|
||||||
type?: MenuItemProps['type'];
|
type?: MenuItemProps['type'];
|
||||||
preFix?: MenuItemProps['preFix'];
|
prefixIcon?: MenuItemProps['prefixIcon'];
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
divider?: boolean;
|
divider?: boolean;
|
||||||
subItems?: Items[];
|
subItems?: Items[];
|
||||||
@@ -49,13 +42,7 @@ const items: Items[] = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'menu item with icon',
|
label: 'menu item with icon',
|
||||||
preFix: (
|
prefixIcon: <InformationIcon />,
|
||||||
<Tooltip content="Use `MenuIcon` to wrap your icon and choose `preFix` or `endFix`">
|
|
||||||
<MenuIcon>
|
|
||||||
<InformationIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
</Tooltip>
|
|
||||||
),
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: (
|
label: (
|
||||||
@@ -80,13 +67,7 @@ const items: Items[] = [
|
|||||||
label: 'danger menu item',
|
label: 'danger menu item',
|
||||||
type: 'danger',
|
type: 'danger',
|
||||||
block: true,
|
block: true,
|
||||||
preFix: (
|
prefixIcon: <InformationIcon />,
|
||||||
<Tooltip content="Use `MenuIcon` to wrap your icon and choose `preFix` or `endFix`">
|
|
||||||
<MenuIcon>
|
|
||||||
<InformationIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
</Tooltip>
|
|
||||||
),
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'warning menu item',
|
label: 'warning menu item',
|
||||||
@@ -121,6 +102,9 @@ const items: Items[] = [
|
|||||||
{
|
{
|
||||||
label: 'sub menu item 2-2',
|
label: 'sub menu item 2-2',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
label: 'sub menu item 2-3',
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|||||||
@@ -1,62 +0,0 @@
|
|||||||
import type {
|
|
||||||
DropdownMenuContentProps,
|
|
||||||
DropdownMenuPortalProps,
|
|
||||||
DropdownMenuProps,
|
|
||||||
} from '@radix-ui/react-dropdown-menu';
|
|
||||||
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
|
|
||||||
import clsx from 'clsx';
|
|
||||||
import type { ReactNode } from 'react';
|
|
||||||
|
|
||||||
import * as styles from './styles.css';
|
|
||||||
|
|
||||||
export interface MenuProps {
|
|
||||||
children: ReactNode;
|
|
||||||
items: ReactNode;
|
|
||||||
portalOptions?: Omit<DropdownMenuPortalProps, 'children'>;
|
|
||||||
rootOptions?: Omit<DropdownMenuProps, 'children'>;
|
|
||||||
contentOptions?: Omit<DropdownMenuContentProps, 'children'>;
|
|
||||||
noPortal?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const Menu = ({
|
|
||||||
children,
|
|
||||||
items,
|
|
||||||
portalOptions,
|
|
||||||
rootOptions,
|
|
||||||
noPortal,
|
|
||||||
contentOptions: {
|
|
||||||
className = '',
|
|
||||||
style: contentStyle = {},
|
|
||||||
...otherContentOptions
|
|
||||||
} = {},
|
|
||||||
}: MenuProps) => {
|
|
||||||
return (
|
|
||||||
<DropdownMenu.Root {...rootOptions}>
|
|
||||||
<DropdownMenu.Trigger asChild>{children}</DropdownMenu.Trigger>
|
|
||||||
|
|
||||||
{noPortal ? (
|
|
||||||
<DropdownMenu.Content
|
|
||||||
className={clsx(styles.menuContent, className)}
|
|
||||||
sideOffset={5}
|
|
||||||
align="start"
|
|
||||||
style={{ zIndex: 'var(--affine-z-index-popover)', ...contentStyle }}
|
|
||||||
{...otherContentOptions}
|
|
||||||
>
|
|
||||||
{items}
|
|
||||||
</DropdownMenu.Content>
|
|
||||||
) : (
|
|
||||||
<DropdownMenu.Portal {...portalOptions}>
|
|
||||||
<DropdownMenu.Content
|
|
||||||
className={clsx(styles.menuContent, className)}
|
|
||||||
sideOffset={5}
|
|
||||||
align="start"
|
|
||||||
style={{ zIndex: 'var(--affine-z-index-popover)', ...contentStyle }}
|
|
||||||
{...otherContentOptions}
|
|
||||||
>
|
|
||||||
{items}
|
|
||||||
</DropdownMenu.Content>
|
|
||||||
</DropdownMenu.Portal>
|
|
||||||
)}
|
|
||||||
</DropdownMenu.Root>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,11 +1,40 @@
|
|||||||
import type { DropdownMenuItemProps as MenuItemPropsPrimitive } from '@radix-ui/react-dropdown-menu';
|
import type {
|
||||||
|
DropdownMenuContentProps,
|
||||||
|
DropdownMenuItemProps as MenuItemPropsPrimitive,
|
||||||
|
DropdownMenuPortalProps,
|
||||||
|
DropdownMenuProps,
|
||||||
|
DropdownMenuSubContentProps,
|
||||||
|
DropdownMenuSubProps,
|
||||||
|
} from '@radix-ui/react-dropdown-menu';
|
||||||
|
import type { ReactNode } from 'react';
|
||||||
|
|
||||||
|
export interface MenuProps {
|
||||||
|
children: ReactNode;
|
||||||
|
items: ReactNode;
|
||||||
|
portalOptions?: Omit<DropdownMenuPortalProps, 'children'>;
|
||||||
|
rootOptions?: Omit<DropdownMenuProps, 'children'>;
|
||||||
|
contentOptions?: Omit<DropdownMenuContentProps, 'children'>;
|
||||||
|
noPortal?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
export interface MenuItemProps
|
export interface MenuItemProps
|
||||||
extends Omit<MenuItemPropsPrimitive, 'asChild' | 'textValue'> {
|
extends Omit<MenuItemPropsPrimitive, 'asChild' | 'textValue' | 'prefix'> {
|
||||||
type?: 'default' | 'warning' | 'danger';
|
type?: 'default' | 'warning' | 'danger';
|
||||||
preFix?: React.ReactNode;
|
// preFix?: React.ReactNode;
|
||||||
endFix?: React.ReactNode;
|
// endFix?: React.ReactNode;
|
||||||
|
prefix?: ReactNode;
|
||||||
|
suffix?: ReactNode;
|
||||||
|
prefixIcon?: ReactNode;
|
||||||
|
suffixIcon?: ReactNode;
|
||||||
checked?: boolean;
|
checked?: boolean;
|
||||||
selected?: boolean;
|
selected?: boolean;
|
||||||
block?: boolean;
|
block?: boolean;
|
||||||
}
|
}
|
||||||
|
export interface MenuSubProps {
|
||||||
|
children: ReactNode;
|
||||||
|
items: ReactNode;
|
||||||
|
triggerOptions?: Omit<MenuItemProps, 'onSelect' | 'children' | 'suffixIcon'>;
|
||||||
|
portalOptions?: Omit<DropdownMenuPortalProps, 'children'>;
|
||||||
|
subOptions?: Omit<DropdownMenuSubProps, 'children'>;
|
||||||
|
subContentOptions?: Omit<DropdownMenuSubContentProps, 'children'>;
|
||||||
|
}
|
||||||
|
|||||||
@@ -0,0 +1,22 @@
|
|||||||
|
import {
|
||||||
|
createContext,
|
||||||
|
type Dispatch,
|
||||||
|
type ReactNode,
|
||||||
|
type SetStateAction,
|
||||||
|
} from 'react';
|
||||||
|
|
||||||
|
import type { MenuSubProps } from '../menu.types';
|
||||||
|
|
||||||
|
export type SubMenuContent = {
|
||||||
|
items: ReactNode;
|
||||||
|
contentOptions?: MenuSubProps['subContentOptions'];
|
||||||
|
};
|
||||||
|
|
||||||
|
export const MobileMenuContext = createContext<{
|
||||||
|
subMenus: Array<SubMenuContent>;
|
||||||
|
setSubMenus: Dispatch<SetStateAction<Array<SubMenuContent>>>;
|
||||||
|
setOpen?: (v: boolean) => void;
|
||||||
|
}>({
|
||||||
|
subMenus: [],
|
||||||
|
setSubMenus: () => {},
|
||||||
|
});
|
||||||
@@ -0,0 +1,35 @@
|
|||||||
|
import { useCallback, useContext } from 'react';
|
||||||
|
|
||||||
|
import type { MenuItemProps } from '../menu.types';
|
||||||
|
import { useMenuItem } from '../use-menu-item';
|
||||||
|
import { MobileMenuContext } from './context';
|
||||||
|
|
||||||
|
let preventDefaultFlag = false;
|
||||||
|
const preventDefault = () => {
|
||||||
|
preventDefaultFlag = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const MobileMenuItem = (props: MenuItemProps) => {
|
||||||
|
const { setOpen } = useContext(MobileMenuContext);
|
||||||
|
const { className, children, otherProps } = useMenuItem(props);
|
||||||
|
const { onSelect, onClick, ...restProps } = otherProps;
|
||||||
|
|
||||||
|
const onItemClick = useCallback(
|
||||||
|
(e: any) => {
|
||||||
|
onSelect?.(e);
|
||||||
|
onClick?.({ ...e, preventDefault });
|
||||||
|
if (preventDefaultFlag) {
|
||||||
|
preventDefaultFlag = false;
|
||||||
|
} else {
|
||||||
|
setOpen?.(false);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[onClick, onSelect, setOpen]
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div onClick={onItemClick} className={className} {...restProps}>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,166 @@
|
|||||||
|
import { ArrowLeftSmallIcon } from '@blocksuite/icons/rc';
|
||||||
|
import { Slot } from '@radix-ui/react-slot';
|
||||||
|
import clsx from 'clsx';
|
||||||
|
import {
|
||||||
|
Fragment,
|
||||||
|
useCallback,
|
||||||
|
useContext,
|
||||||
|
useEffect,
|
||||||
|
useRef,
|
||||||
|
useState,
|
||||||
|
} from 'react';
|
||||||
|
|
||||||
|
import { observeResize } from '../../../utils';
|
||||||
|
import { Button } from '../../button';
|
||||||
|
import { Modal, type ModalProps } from '../../modal';
|
||||||
|
import type { MenuProps } from '../menu.types';
|
||||||
|
import type { SubMenuContent } from './context';
|
||||||
|
import { MobileMenuContext } from './context';
|
||||||
|
import * as styles from './styles.css';
|
||||||
|
import { MobileMenuSubRaw } from './sub';
|
||||||
|
|
||||||
|
export const MobileMenu = ({
|
||||||
|
children,
|
||||||
|
items,
|
||||||
|
noPortal,
|
||||||
|
contentOptions: {
|
||||||
|
className,
|
||||||
|
onPointerDownOutside,
|
||||||
|
// ignore the following props
|
||||||
|
sideOffset: _sideOffset,
|
||||||
|
side: _side,
|
||||||
|
align: _align,
|
||||||
|
|
||||||
|
...otherContentOptions
|
||||||
|
} = {},
|
||||||
|
rootOptions,
|
||||||
|
}: MenuProps) => {
|
||||||
|
const [subMenus, setSubMenus] = useState<SubMenuContent[]>([]);
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const [sliderHeight, setSliderHeight] = useState(0);
|
||||||
|
const { setOpen: pSetOpen } = useContext(MobileMenuContext);
|
||||||
|
const finalOpen = rootOptions?.open ?? open;
|
||||||
|
const sliderRef = useRef<HTMLDivElement>(null);
|
||||||
|
const activeIndex = subMenus.length;
|
||||||
|
|
||||||
|
const onOpenChange = useCallback(
|
||||||
|
(open: boolean) => {
|
||||||
|
if (!open) {
|
||||||
|
// a workaround to hack the onPointerDownOutside event
|
||||||
|
onPointerDownOutside?.({} as any);
|
||||||
|
setSubMenus([]);
|
||||||
|
}
|
||||||
|
setOpen(open);
|
||||||
|
rootOptions?.onOpenChange?.(open);
|
||||||
|
},
|
||||||
|
[onPointerDownOutside, rootOptions]
|
||||||
|
);
|
||||||
|
|
||||||
|
const Wrapper = noPortal ? Fragment : Modal;
|
||||||
|
const wrapperProps = noPortal
|
||||||
|
? {}
|
||||||
|
: ({
|
||||||
|
open: finalOpen,
|
||||||
|
onOpenChange,
|
||||||
|
width: '100%',
|
||||||
|
animation: 'slideBottom',
|
||||||
|
withoutCloseButton: true,
|
||||||
|
contentOptions: {
|
||||||
|
className: clsx(className, styles.mobileMenuModal),
|
||||||
|
...otherContentOptions,
|
||||||
|
},
|
||||||
|
contentWrapperStyle: {
|
||||||
|
alignItems: 'end',
|
||||||
|
paddingBottom: 10,
|
||||||
|
},
|
||||||
|
} satisfies ModalProps);
|
||||||
|
|
||||||
|
const onItemClick = useCallback((e: any) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setOpen(prev => !prev);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// dynamic height for slider
|
||||||
|
useEffect(() => {
|
||||||
|
if (!finalOpen) return;
|
||||||
|
let observer: () => void;
|
||||||
|
const t = setTimeout(() => {
|
||||||
|
const slider = sliderRef.current;
|
||||||
|
if (!slider) return;
|
||||||
|
|
||||||
|
const active = slider.querySelector(
|
||||||
|
`.${styles.menuContent}[data-index="${activeIndex}"]`
|
||||||
|
);
|
||||||
|
if (!active) return;
|
||||||
|
|
||||||
|
// for the situation that content is loaded asynchronously
|
||||||
|
observer = observeResize(active, entry => {
|
||||||
|
setSliderHeight(entry.borderBoxSize[0].blockSize);
|
||||||
|
});
|
||||||
|
}, 0);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
clearTimeout(t);
|
||||||
|
observer?.();
|
||||||
|
};
|
||||||
|
}, [activeIndex, finalOpen]);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* For cascading menu usage
|
||||||
|
* ```tsx
|
||||||
|
* <Menu
|
||||||
|
* items={
|
||||||
|
* <Menu>Click me</Menu>
|
||||||
|
* }
|
||||||
|
* >
|
||||||
|
* Root
|
||||||
|
* </Menu>
|
||||||
|
* ```
|
||||||
|
*/
|
||||||
|
if (pSetOpen) {
|
||||||
|
return <MobileMenuSubRaw items={items}>{children}</MobileMenuSubRaw>;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Slot onClick={onItemClick}>{children}</Slot>
|
||||||
|
<MobileMenuContext.Provider
|
||||||
|
value={{ subMenus, setSubMenus, setOpen: onOpenChange }}
|
||||||
|
>
|
||||||
|
<Wrapper {...wrapperProps}>
|
||||||
|
<div
|
||||||
|
ref={sliderRef}
|
||||||
|
className={styles.slider}
|
||||||
|
style={{
|
||||||
|
transform: `translateX(-${100 * activeIndex}%)`,
|
||||||
|
height: sliderHeight,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div data-index={0} className={styles.menuContent}>
|
||||||
|
{items}
|
||||||
|
</div>
|
||||||
|
{subMenus.map((sub, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
data-index={index + 1}
|
||||||
|
className={styles.menuContent}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
variant="plain"
|
||||||
|
className={styles.backButton}
|
||||||
|
prefix={<ArrowLeftSmallIcon />}
|
||||||
|
onClick={() => setSubMenus(prev => prev.slice(0, index))}
|
||||||
|
prefixStyle={{ width: 20, height: 20 }}
|
||||||
|
>
|
||||||
|
Back
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{sub.items}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</Wrapper>
|
||||||
|
</MobileMenuContext.Provider>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
import type { DropdownMenuSeparatorProps } from '@radix-ui/react-dropdown-menu';
|
||||||
|
import clsx from 'clsx';
|
||||||
|
|
||||||
|
import * as styles from '../styles.css';
|
||||||
|
|
||||||
|
export const MobileMenuSeparator = ({
|
||||||
|
className,
|
||||||
|
style,
|
||||||
|
}: DropdownMenuSeparatorProps) => {
|
||||||
|
return (
|
||||||
|
<div className={clsx(styles.menuSeparator, className)} style={style} />
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,79 @@
|
|||||||
|
import { cssVar } from '@toeverything/theme';
|
||||||
|
import { cssVarV2 } from '@toeverything/theme/v2';
|
||||||
|
import { style } from '@vanilla-extract/css';
|
||||||
|
|
||||||
|
import { modalContent } from '../../modal/styles.css';
|
||||||
|
import { bgColor } from '../styles.css';
|
||||||
|
|
||||||
|
// To override desktop menu style defined in '../styles.css.ts'
|
||||||
|
|
||||||
|
export const mobileMenuModal = style({
|
||||||
|
selectors: {
|
||||||
|
// to make sure it will override the desktop modal style
|
||||||
|
[`&.${modalContent}`]: {
|
||||||
|
backgroundColor: cssVarV2('layer/background/overlayPanel'),
|
||||||
|
boxShadow: cssVar('menuShadow'),
|
||||||
|
userSelect: 'none',
|
||||||
|
borderRadius: 24,
|
||||||
|
minHeight: 0,
|
||||||
|
padding: 0,
|
||||||
|
overflow: 'hidden',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export const slider = style({
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'start',
|
||||||
|
transition: 'all 0.23s',
|
||||||
|
});
|
||||||
|
|
||||||
|
export const menuContent = style({
|
||||||
|
boxSizing: 'border-box',
|
||||||
|
fontSize: 17,
|
||||||
|
fontWeight: '400',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
gap: 0,
|
||||||
|
width: '100%',
|
||||||
|
flexShrink: 0,
|
||||||
|
padding: '13px 0px 13px 0px',
|
||||||
|
});
|
||||||
|
|
||||||
|
export const mobileMenuItem = style({
|
||||||
|
padding: '10px 20px',
|
||||||
|
borderRadius: 0,
|
||||||
|
':hover': {
|
||||||
|
vars: {
|
||||||
|
[bgColor]: 'transparent',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
':active': {
|
||||||
|
vars: {
|
||||||
|
[bgColor]: cssVar('hoverColor'),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
selectors: {
|
||||||
|
'&.danger:hover': {
|
||||||
|
vars: { [bgColor]: 'transparent' },
|
||||||
|
},
|
||||||
|
'&.danger:active': {
|
||||||
|
vars: { [bgColor]: cssVar('backgroundErrorColor') },
|
||||||
|
},
|
||||||
|
'&.warning:hover': {
|
||||||
|
vars: { [bgColor]: 'transparent' },
|
||||||
|
},
|
||||||
|
'&.warning:active': {
|
||||||
|
vars: { [bgColor]: cssVar('backgroundWarningColor') },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export const backButton = style({
|
||||||
|
height: 42,
|
||||||
|
alignSelf: 'start',
|
||||||
|
fontWeight: 600,
|
||||||
|
fontSize: 17,
|
||||||
|
paddingLeft: 0,
|
||||||
|
marginLeft: 20,
|
||||||
|
});
|
||||||
@@ -0,0 +1,55 @@
|
|||||||
|
import { ArrowRightSmallPlusIcon } from '@blocksuite/icons/rc';
|
||||||
|
import { Slot } from '@radix-ui/react-slot';
|
||||||
|
import { type MouseEvent, useCallback, useContext } from 'react';
|
||||||
|
|
||||||
|
import type { MenuSubProps } from '../menu.types';
|
||||||
|
import { useMenuItem } from '../use-menu-item';
|
||||||
|
import { MobileMenuContext } from './context';
|
||||||
|
|
||||||
|
export const MobileMenuSub = ({
|
||||||
|
children: propsChildren,
|
||||||
|
items,
|
||||||
|
triggerOptions,
|
||||||
|
subContentOptions: contentOptions = {},
|
||||||
|
}: MenuSubProps) => {
|
||||||
|
const {
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
otherProps: { onClick, ...otherTriggerOptions },
|
||||||
|
} = useMenuItem({
|
||||||
|
...triggerOptions,
|
||||||
|
children: propsChildren,
|
||||||
|
suffixIcon: <ArrowRightSmallPlusIcon />,
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<MobileMenuSubRaw
|
||||||
|
onClick={onClick}
|
||||||
|
items={items}
|
||||||
|
subContentOptions={contentOptions}
|
||||||
|
>
|
||||||
|
<div className={className} {...otherTriggerOptions}>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</MobileMenuSubRaw>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const MobileMenuSubRaw = ({
|
||||||
|
onClick,
|
||||||
|
children,
|
||||||
|
items,
|
||||||
|
subContentOptions: contentOptions = {},
|
||||||
|
}: MenuSubProps & { onClick?: (e: MouseEvent<HTMLDivElement>) => void }) => {
|
||||||
|
const { setSubMenus } = useContext(MobileMenuContext);
|
||||||
|
|
||||||
|
const onItemClick = useCallback(
|
||||||
|
(e: MouseEvent<HTMLDivElement>) => {
|
||||||
|
onClick?.(e);
|
||||||
|
setSubMenus(prev => [...prev, { items, contentOptions }]);
|
||||||
|
},
|
||||||
|
[contentOptions, items, onClick, setSubMenus]
|
||||||
|
);
|
||||||
|
|
||||||
|
return <Slot onClick={onItemClick}>{children}</Slot>;
|
||||||
|
};
|
||||||
@@ -1,57 +1,92 @@
|
|||||||
import { cssVar } from '@toeverything/theme';
|
import { cssVar } from '@toeverything/theme';
|
||||||
|
import { cssVarV2 } from '@toeverything/theme/v2';
|
||||||
import { createVar, style } from '@vanilla-extract/css';
|
import { createVar, style } from '@vanilla-extract/css';
|
||||||
export const triggerWidthVar = createVar('triggerWidthVar');
|
|
||||||
|
export const iconColor = createVar('iconColor');
|
||||||
|
export const labelColor = createVar('labelColor');
|
||||||
|
export const bgColor = createVar('bgColor');
|
||||||
|
|
||||||
export const menuContent = style({
|
export const menuContent = style({
|
||||||
minWidth: '180px',
|
minWidth: '180px',
|
||||||
color: cssVar('textPrimaryColor'),
|
|
||||||
borderRadius: '8px',
|
borderRadius: '8px',
|
||||||
padding: '8px',
|
padding: '8px',
|
||||||
fontSize: cssVar('fontSm'),
|
fontSize: cssVar('fontSm'),
|
||||||
fontWeight: '400',
|
fontWeight: '400',
|
||||||
backgroundColor: cssVar('backgroundOverlayPanelColor'),
|
backgroundColor: cssVarV2('layer/background/overlayPanel'),
|
||||||
boxShadow: cssVar('menuShadow'),
|
boxShadow: cssVar('menuShadow'),
|
||||||
userSelect: 'none',
|
userSelect: 'none',
|
||||||
['WebkitAppRegion' as string]: 'no-drag',
|
['WebkitAppRegion' as string]: 'no-drag',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
gap: 4,
|
||||||
|
selectors: {
|
||||||
|
'&.mobile': {
|
||||||
|
padding: 0,
|
||||||
|
boxShadow: 'none',
|
||||||
|
},
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
export const menuItem = style({
|
export const menuItem = style({
|
||||||
|
vars: {
|
||||||
|
[iconColor]: cssVarV2('icon/primary'),
|
||||||
|
[labelColor]: cssVarV2('text/primary'),
|
||||||
|
[bgColor]: 'transparent',
|
||||||
|
},
|
||||||
|
color: labelColor,
|
||||||
|
backgroundColor: bgColor,
|
||||||
|
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
justifyContent: 'space-between',
|
justifyContent: 'space-between',
|
||||||
padding: '4px 12px',
|
gap: 8,
|
||||||
borderRadius: '4px',
|
padding: '4px',
|
||||||
|
borderRadius: 4,
|
||||||
lineHeight: '22px',
|
lineHeight: '22px',
|
||||||
border: 'none',
|
border: 'none',
|
||||||
outline: 'none',
|
outline: 'none',
|
||||||
cursor: 'pointer',
|
cursor: 'pointer',
|
||||||
boxSizing: 'border-box',
|
boxSizing: 'border-box',
|
||||||
selectors: {
|
selectors: {
|
||||||
'&:not(:last-of-type)': {
|
|
||||||
marginBottom: '4px',
|
|
||||||
},
|
|
||||||
'&.block': {
|
'&.block': {
|
||||||
maxWidth: '100%',
|
maxWidth: '100%',
|
||||||
},
|
},
|
||||||
'&[data-disabled]': {
|
'&[data-disabled]': {
|
||||||
color: cssVar('textDisableColor'),
|
vars: {
|
||||||
|
[iconColor]: cssVarV2('icon/disable'),
|
||||||
|
[labelColor]: cssVarV2('text/secondary'),
|
||||||
|
},
|
||||||
pointerEvents: 'none',
|
pointerEvents: 'none',
|
||||||
cursor: 'not-allowed',
|
cursor: 'default',
|
||||||
},
|
|
||||||
'&[data-highlighted]': {
|
|
||||||
backgroundColor: cssVar('hoverColor'),
|
|
||||||
},
|
},
|
||||||
'&:hover': {
|
'&:hover': {
|
||||||
backgroundColor: cssVar('hoverColor'),
|
vars: {
|
||||||
|
[bgColor]: cssVar('hoverColor'),
|
||||||
|
},
|
||||||
|
outline: 'none !important',
|
||||||
|
},
|
||||||
|
'&:focus-visible': {
|
||||||
|
outline: '1px solid ' + cssVarV2('layer/insideBorder/primaryBorder'),
|
||||||
},
|
},
|
||||||
'&.danger:hover': {
|
'&.danger:hover': {
|
||||||
color: cssVar('errorColor'),
|
vars: {
|
||||||
backgroundColor: cssVar('backgroundErrorColor'),
|
[iconColor]: cssVar('errorColor'),
|
||||||
|
[labelColor]: cssVar('errorColor'),
|
||||||
|
[bgColor]: cssVar('backgroundErrorColor'),
|
||||||
|
},
|
||||||
},
|
},
|
||||||
'&.warning:hover': {
|
'&.warning:hover': {
|
||||||
color: cssVar('warningColor'),
|
vars: {
|
||||||
backgroundColor: cssVar('backgroundWarningColor'),
|
[iconColor]: cssVar('warningColor'),
|
||||||
|
[labelColor]: cssVar('warningColor'),
|
||||||
|
[bgColor]: cssVar('backgroundWarningColor'),
|
||||||
|
},
|
||||||
},
|
},
|
||||||
'&.checked': {
|
'&.checked, &.selected': {
|
||||||
color: cssVar('primaryColor'),
|
vars: {
|
||||||
|
[iconColor]: cssVar('primaryColor'),
|
||||||
|
[labelColor]: cssVar('primaryColor'),
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
@@ -66,84 +101,24 @@ export const menuItemIcon = style({
|
|||||||
display: 'flex',
|
display: 'flex',
|
||||||
flexShrink: 0,
|
flexShrink: 0,
|
||||||
fontSize: cssVar('fontH5'),
|
fontSize: cssVar('fontH5'),
|
||||||
color: cssVar('iconColor'),
|
color: iconColor,
|
||||||
selectors: {
|
width: 20,
|
||||||
'&.start': { marginRight: '4px' },
|
height: 20,
|
||||||
'&.end': { marginLeft: '4px' },
|
|
||||||
'&.selected, &.checked': {
|
|
||||||
color: cssVar('primaryColor'),
|
|
||||||
},
|
|
||||||
[`${menuItem}.danger:hover &`]: {
|
|
||||||
color: cssVar('errorColor'),
|
|
||||||
},
|
|
||||||
[`${menuItem}.warning:hover &`]: {
|
|
||||||
color: cssVar('warningColor'),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|
||||||
export const menuSeparator = style({
|
export const menuSeparator = style({
|
||||||
height: '1px',
|
width: '100%',
|
||||||
backgroundColor: cssVar('borderColor'),
|
height: '8px',
|
||||||
marginTop: '12px',
|
position: 'relative',
|
||||||
marginBottom: '8px',
|
':after': {
|
||||||
});
|
content: '""',
|
||||||
export const menuTrigger = style({
|
display: 'block',
|
||||||
vars: {
|
height: '1px',
|
||||||
[triggerWidthVar]: 'auto',
|
width: '100%',
|
||||||
},
|
backgroundColor: cssVarV2('layer/insideBorder/border'),
|
||||||
width: triggerWidthVar,
|
position: 'absolute',
|
||||||
height: 28,
|
top: '50%',
|
||||||
lineHeight: '22px',
|
left: 0,
|
||||||
padding: '0 10px',
|
transform: 'translateY(-50%) scaleY(0.5)',
|
||||||
color: cssVar('textPrimaryColor'),
|
|
||||||
border: '1px solid',
|
|
||||||
backgroundColor: cssVar('white'),
|
|
||||||
borderRadius: 8,
|
|
||||||
display: 'inline-flex',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: 'center',
|
|
||||||
fontSize: cssVar('fontXs'),
|
|
||||||
cursor: 'pointer',
|
|
||||||
['WebkitAppRegion' as string]: 'no-drag',
|
|
||||||
borderColor: cssVar('borderColor'),
|
|
||||||
outline: 'none',
|
|
||||||
selectors: {
|
|
||||||
'&:hover': {
|
|
||||||
background: cssVar('hoverColor'),
|
|
||||||
},
|
|
||||||
'&.no-border': {
|
|
||||||
border: 'unset',
|
|
||||||
},
|
|
||||||
'&.block': {
|
|
||||||
display: 'flex',
|
|
||||||
width: '100%',
|
|
||||||
},
|
|
||||||
// size
|
|
||||||
'&.large': {
|
|
||||||
height: 32,
|
|
||||||
},
|
|
||||||
'&.extra-large': {
|
|
||||||
height: 40,
|
|
||||||
fontWeight: 600,
|
|
||||||
},
|
|
||||||
// color
|
|
||||||
'&.disabled': {
|
|
||||||
cursor: 'default',
|
|
||||||
color: cssVar('textDisableColor'),
|
|
||||||
pointerEvents: 'none',
|
|
||||||
},
|
|
||||||
// TODO(@catsjuice): wait for design
|
|
||||||
'&.error': {
|
|
||||||
// borderColor: 'var(--affine-error-color)',
|
|
||||||
},
|
|
||||||
'&.success': {
|
|
||||||
// borderColor: 'var(--affine-success-color)',
|
|
||||||
},
|
|
||||||
'&.warning': {
|
|
||||||
// borderColor: 'var(--affine-warning-color)',
|
|
||||||
},
|
|
||||||
'&.default': {
|
|
||||||
// borderColor: 'var(--affine-border-color)',
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,73 +1,64 @@
|
|||||||
import { DoneIcon } from '@blocksuite/icons/rc';
|
import { DoneIcon } from '@blocksuite/icons/rc';
|
||||||
import clsx from 'clsx';
|
import clsx from 'clsx';
|
||||||
import { useMemo } from 'react';
|
|
||||||
|
|
||||||
|
import { isMobile } from '../../utils/env';
|
||||||
import type { MenuItemProps } from './menu.types';
|
import type { MenuItemProps } from './menu.types';
|
||||||
import { MenuIcon } from './menu-icon';
|
import { mobileMenuItem } from './mobile/styles.css';
|
||||||
import * as styles from './styles.css';
|
import * as styles from './styles.css';
|
||||||
|
|
||||||
interface useMenuItemProps {
|
export const useMenuItem = <T extends MenuItemProps>({
|
||||||
children: MenuItemProps['children'];
|
|
||||||
type: MenuItemProps['type'];
|
|
||||||
className: MenuItemProps['className'];
|
|
||||||
preFix: MenuItemProps['preFix'];
|
|
||||||
endFix: MenuItemProps['endFix'];
|
|
||||||
checked?: MenuItemProps['checked'];
|
|
||||||
selected?: MenuItemProps['selected'];
|
|
||||||
block?: MenuItemProps['block'];
|
|
||||||
}
|
|
||||||
|
|
||||||
export const useMenuItem = ({
|
|
||||||
children: propsChildren,
|
children: propsChildren,
|
||||||
type = 'default',
|
type = 'default',
|
||||||
className: propsClassName,
|
className: propsClassName,
|
||||||
preFix,
|
prefix,
|
||||||
endFix,
|
prefixIcon,
|
||||||
|
suffix,
|
||||||
|
suffixIcon,
|
||||||
checked,
|
checked,
|
||||||
selected,
|
selected,
|
||||||
block,
|
block,
|
||||||
}: useMenuItemProps) => {
|
...otherProps
|
||||||
const className = useMemo(
|
}: T) => {
|
||||||
() =>
|
const className = clsx(
|
||||||
clsx(
|
styles.menuItem,
|
||||||
styles.menuItem,
|
{
|
||||||
{
|
danger: type === 'danger',
|
||||||
danger: type === 'danger',
|
warning: type === 'warning',
|
||||||
warning: type === 'warning',
|
checked,
|
||||||
checked,
|
selected,
|
||||||
selected,
|
block,
|
||||||
block,
|
[mobileMenuItem]: isMobile(),
|
||||||
},
|
},
|
||||||
propsClassName
|
propsClassName
|
||||||
),
|
|
||||||
[block, checked, propsClassName, selected, type]
|
|
||||||
);
|
);
|
||||||
|
|
||||||
const children = useMemo(
|
const children = (
|
||||||
() => (
|
<>
|
||||||
<>
|
{prefix}
|
||||||
{preFix}
|
|
||||||
<span className={styles.menuSpan}>{propsChildren}</span>
|
|
||||||
{endFix}
|
|
||||||
|
|
||||||
{checked || selected ? (
|
{prefixIcon ? (
|
||||||
<MenuIcon
|
<div className={styles.menuItemIcon}>{prefixIcon}</div>
|
||||||
position="end"
|
) : null}
|
||||||
className={clsx({
|
|
||||||
selected,
|
<span className={styles.menuSpan}>{propsChildren}</span>
|
||||||
checked,
|
|
||||||
})}
|
{suffixIcon ? (
|
||||||
>
|
<div className={styles.menuItemIcon}>{suffixIcon}</div>
|
||||||
<DoneIcon />
|
) : null}
|
||||||
</MenuIcon>
|
|
||||||
) : null}
|
{suffix}
|
||||||
</>
|
|
||||||
),
|
{checked || selected ? (
|
||||||
[checked, endFix, preFix, propsChildren, selected]
|
<div className={clsx(styles.menuItemIcon, 'selected')}>
|
||||||
|
<DoneIcon />
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
children,
|
children,
|
||||||
className,
|
className,
|
||||||
|
otherProps,
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ import { useCallback, useState } from 'react';
|
|||||||
import { Button } from '../button';
|
import { Button } from '../button';
|
||||||
import type { InputProps } from '../input';
|
import type { InputProps } from '../input';
|
||||||
import { Input } from '../input';
|
import { Input } from '../input';
|
||||||
|
import { RadioGroup } from '../radio';
|
||||||
import type { ConfirmModalProps } from './confirm-modal';
|
import type { ConfirmModalProps } from './confirm-modal';
|
||||||
import { ConfirmModal } from './confirm-modal';
|
import { ConfirmModal } from './confirm-modal';
|
||||||
import type { ModalProps } from './modal';
|
import type { ModalProps } from './modal';
|
||||||
@@ -105,3 +106,36 @@ export const Confirm: StoryFn<ModalProps> =
|
|||||||
|
|
||||||
export const Overlay: StoryFn<ModalProps> =
|
export const Overlay: StoryFn<ModalProps> =
|
||||||
OverlayModalTemplate.bind(undefined);
|
OverlayModalTemplate.bind(undefined);
|
||||||
|
|
||||||
|
export const Animations = () => {
|
||||||
|
const animations = ['fadeScaleTop', 'slideBottom', 'none'];
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const [animation, setAnimation] =
|
||||||
|
useState<ModalProps['animation']>('fadeScaleTop');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
|
||||||
|
<RadioGroup
|
||||||
|
value={animation}
|
||||||
|
onChange={setAnimation}
|
||||||
|
items={animations}
|
||||||
|
/>
|
||||||
|
<Button onClick={() => setOpen(true)}>Open dialog</Button>
|
||||||
|
<Modal
|
||||||
|
contentWrapperStyle={
|
||||||
|
animation === 'slideBottom'
|
||||||
|
? {
|
||||||
|
alignItems: 'end',
|
||||||
|
padding: 10,
|
||||||
|
}
|
||||||
|
: {}
|
||||||
|
}
|
||||||
|
open={open}
|
||||||
|
onOpenChange={setOpen}
|
||||||
|
animation={animation}
|
||||||
|
>
|
||||||
|
This is a dialog with animation: {animation}
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|||||||
@@ -9,9 +9,10 @@ import * as Dialog from '@radix-ui/react-dialog';
|
|||||||
import * as VisuallyHidden from '@radix-ui/react-visually-hidden';
|
import * as VisuallyHidden from '@radix-ui/react-visually-hidden';
|
||||||
import { assignInlineVars } from '@vanilla-extract/dynamic';
|
import { assignInlineVars } from '@vanilla-extract/dynamic';
|
||||||
import clsx from 'clsx';
|
import clsx from 'clsx';
|
||||||
import type { CSSProperties } from 'react';
|
import type { CSSProperties, MouseEvent } from 'react';
|
||||||
import { forwardRef, useCallback, useEffect, useState } from 'react';
|
import { forwardRef, useCallback, useEffect, useState } from 'react';
|
||||||
|
|
||||||
|
import { isMobile } from '../../utils/env';
|
||||||
import type { IconButtonProps } from '../button';
|
import type { IconButtonProps } from '../button';
|
||||||
import { IconButton } from '../button';
|
import { IconButton } from '../button';
|
||||||
import * as styles from './styles.css';
|
import * as styles from './styles.css';
|
||||||
@@ -32,6 +33,12 @@ export interface ModalProps extends DialogProps {
|
|||||||
contentOptions?: DialogContentProps;
|
contentOptions?: DialogContentProps;
|
||||||
overlayOptions?: DialogOverlayProps;
|
overlayOptions?: DialogOverlayProps;
|
||||||
closeButtonOptions?: IconButtonProps;
|
closeButtonOptions?: IconButtonProps;
|
||||||
|
contentWrapperClassName?: string;
|
||||||
|
contentWrapperStyle?: CSSProperties;
|
||||||
|
/**
|
||||||
|
* @default 'fadeScaleTop'
|
||||||
|
*/
|
||||||
|
animation?: 'fadeScaleTop' | 'none' | 'slideBottom';
|
||||||
}
|
}
|
||||||
type PointerDownOutsideEvent = Parameters<
|
type PointerDownOutsideEvent = Parameters<
|
||||||
Exclude<DialogContentProps['onPointerDownOutside'], undefined>
|
Exclude<DialogContentProps['onPointerDownOutside'], undefined>
|
||||||
@@ -128,10 +135,14 @@ export const ModalInner = forwardRef<HTMLDivElement, ModalProps>(
|
|||||||
overlayOptions: {
|
overlayOptions: {
|
||||||
className: overlayClassName,
|
className: overlayClassName,
|
||||||
style: overlayStyle,
|
style: overlayStyle,
|
||||||
|
onClick: onOverlayClick,
|
||||||
...otherOverlayOptions
|
...otherOverlayOptions
|
||||||
} = {},
|
} = {},
|
||||||
closeButtonOptions,
|
closeButtonOptions,
|
||||||
children,
|
children,
|
||||||
|
contentWrapperClassName,
|
||||||
|
contentWrapperStyle,
|
||||||
|
animation = 'fadeScaleTop',
|
||||||
...otherProps
|
...otherProps
|
||||||
} = props;
|
} = props;
|
||||||
const { className: closeButtonClassName, ...otherCloseButtonProps } =
|
const { className: closeButtonClassName, ...otherCloseButtonProps } =
|
||||||
@@ -167,6 +178,18 @@ export const ModalInner = forwardRef<HTMLDivElement, ModalProps>(
|
|||||||
[onEscapeKeyDown, persistent]
|
[onEscapeKeyDown, persistent]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const handleOverlayClick = useCallback(
|
||||||
|
(e: MouseEvent<HTMLDivElement>) => {
|
||||||
|
onOverlayClick?.(e);
|
||||||
|
if (persistent) {
|
||||||
|
e.preventDefault();
|
||||||
|
} else {
|
||||||
|
onOpenChange?.(false);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[onOpenChange, onOverlayClick, persistent]
|
||||||
|
);
|
||||||
|
|
||||||
if (!container) {
|
if (!container) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -180,13 +203,27 @@ export const ModalInner = forwardRef<HTMLDivElement, ModalProps>(
|
|||||||
>
|
>
|
||||||
<Dialog.Portal container={container} {...portalOptions}>
|
<Dialog.Portal container={container} {...portalOptions}>
|
||||||
<Dialog.Overlay
|
<Dialog.Overlay
|
||||||
className={clsx(styles.modalOverlay, overlayClassName)}
|
className={clsx(
|
||||||
|
`anim-${animation}`,
|
||||||
|
styles.modalOverlay,
|
||||||
|
overlayClassName,
|
||||||
|
{ mobile: isMobile() }
|
||||||
|
)}
|
||||||
style={{
|
style={{
|
||||||
...overlayStyle,
|
...overlayStyle,
|
||||||
}}
|
}}
|
||||||
|
onClick={handleOverlayClick}
|
||||||
{...otherOverlayOptions}
|
{...otherOverlayOptions}
|
||||||
/>
|
/>
|
||||||
<div data-modal={modal} className={clsx(styles.modalContentWrapper)}>
|
<div
|
||||||
|
data-modal={modal}
|
||||||
|
className={clsx(
|
||||||
|
`anim-${animation}`,
|
||||||
|
styles.modalContentWrapper,
|
||||||
|
contentWrapperClassName
|
||||||
|
)}
|
||||||
|
style={contentWrapperStyle}
|
||||||
|
>
|
||||||
<Dialog.Content
|
<Dialog.Content
|
||||||
onPointerDownOutside={handlePointerDownOutSide}
|
onPointerDownOutside={handlePointerDownOutSide}
|
||||||
onEscapeKeyDown={handleEscapeKeyDown}
|
onEscapeKeyDown={handleEscapeKeyDown}
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
import { cssVar } from '@toeverything/theme';
|
import { cssVar } from '@toeverything/theme';
|
||||||
|
import { cssVarV2 } from '@toeverything/theme/v2';
|
||||||
import {
|
import {
|
||||||
createVar,
|
createVar,
|
||||||
generateIdentifier,
|
generateIdentifier,
|
||||||
@@ -18,7 +19,7 @@ const overlayShow = keyframes({
|
|||||||
opacity: 1,
|
opacity: 1,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
const contentShow = keyframes({
|
const contentShowFadeScaleTop = keyframes({
|
||||||
from: {
|
from: {
|
||||||
opacity: 0,
|
opacity: 0,
|
||||||
transform: 'translateY(-2%) scale(0.96)',
|
transform: 'translateY(-2%) scale(0.96)',
|
||||||
@@ -28,7 +29,7 @@ const contentShow = keyframes({
|
|||||||
transform: 'translateY(0) scale(1)',
|
transform: 'translateY(0) scale(1)',
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
export const contentHide = keyframes({
|
const contentHideFadeScaleTop = keyframes({
|
||||||
to: {
|
to: {
|
||||||
opacity: 0,
|
opacity: 0,
|
||||||
transform: 'translateY(-2%) scale(0.96)',
|
transform: 'translateY(-2%) scale(0.96)',
|
||||||
@@ -38,15 +39,35 @@ export const contentHide = keyframes({
|
|||||||
transform: 'translateY(0) scale(1)',
|
transform: 'translateY(0) scale(1)',
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
const contentShowSlideBottom = keyframes({
|
||||||
|
from: { transform: 'translateY(100%)' },
|
||||||
|
to: { transform: 'translateY(0)' },
|
||||||
|
});
|
||||||
|
const contentHideSlideBottom = keyframes({
|
||||||
|
from: { transform: 'translateY(0)' },
|
||||||
|
to: { transform: 'translateY(100%)' },
|
||||||
|
});
|
||||||
|
const modalContentViewTransitionNameFadeScaleTop = generateIdentifier(
|
||||||
|
'modal-content-fade-scale-top'
|
||||||
|
);
|
||||||
|
const modalContentViewTransitionNameSlideBottom = generateIdentifier(
|
||||||
|
'modal-content-slide-bottom'
|
||||||
|
);
|
||||||
export const modalOverlay = style({
|
export const modalOverlay = style({
|
||||||
position: 'fixed',
|
position: 'fixed',
|
||||||
inset: 0,
|
inset: 0,
|
||||||
backgroundColor: cssVar('backgroundModalColor'),
|
backgroundColor: cssVar('backgroundModalColor'),
|
||||||
zIndex: cssVar('zIndexModal'),
|
zIndex: cssVar('zIndexModal'),
|
||||||
animation: `${overlayShow} 150ms forwards`,
|
animation: `${overlayShow} 150ms forwards`,
|
||||||
|
selectors: {
|
||||||
|
'&.anim-none': {
|
||||||
|
animation: 'none',
|
||||||
|
},
|
||||||
|
'&.mobile': {
|
||||||
|
backgroundColor: cssVarV2('layer/mobile/modal'),
|
||||||
|
},
|
||||||
|
},
|
||||||
});
|
});
|
||||||
const modalContentViewTransitionName = generateIdentifier('modal-content');
|
|
||||||
export const modalContentWrapper = style({
|
export const modalContentWrapper = style({
|
||||||
position: 'fixed',
|
position: 'fixed',
|
||||||
inset: 0,
|
inset: 0,
|
||||||
@@ -54,14 +75,37 @@ export const modalContentWrapper = style({
|
|||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
zIndex: cssVar('zIndexModal'),
|
zIndex: cssVar('zIndexModal'),
|
||||||
animation: `${contentShow} 150ms cubic-bezier(0.42, 0, 0.58, 1)`,
|
|
||||||
animationFillMode: 'forwards',
|
selectors: {
|
||||||
viewTransitionName: modalContentViewTransitionName,
|
'&.anim-none': {
|
||||||
});
|
animation: 'none',
|
||||||
globalStyle(`::view-transition-old(${modalContentViewTransitionName})`, {
|
},
|
||||||
animation: `${contentHide} 150ms cubic-bezier(0.42, 0, 0.58, 1)`,
|
'&.anim-fadeScaleTop': {
|
||||||
animationFillMode: 'forwards',
|
animation: `${contentShowFadeScaleTop} 150ms cubic-bezier(0.42, 0, 0.58, 1)`,
|
||||||
|
viewTransitionName: modalContentViewTransitionNameFadeScaleTop,
|
||||||
|
animationFillMode: 'forwards',
|
||||||
|
},
|
||||||
|
'&.anim-slideBottom': {
|
||||||
|
animation: `${contentShowSlideBottom} 0.23s ease`,
|
||||||
|
viewTransitionName: modalContentViewTransitionNameSlideBottom,
|
||||||
|
animationFillMode: 'forwards',
|
||||||
|
},
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
globalStyle(
|
||||||
|
`::view-transition-old(${modalContentViewTransitionNameFadeScaleTop})`,
|
||||||
|
{
|
||||||
|
animation: `${contentHideFadeScaleTop} 150ms cubic-bezier(0.42, 0, 0.58, 1)`,
|
||||||
|
animationFillMode: 'forwards',
|
||||||
|
}
|
||||||
|
);
|
||||||
|
globalStyle(
|
||||||
|
`::view-transition-old(${modalContentViewTransitionNameSlideBottom})`,
|
||||||
|
{
|
||||||
|
animation: `${contentHideSlideBottom} 0.23s ease`,
|
||||||
|
animationFillMode: 'forwards',
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
export const modalContent = style({
|
export const modalContent = style({
|
||||||
vars: {
|
vars: {
|
||||||
@@ -72,6 +116,8 @@ export const modalContent = style({
|
|||||||
width: widthVar,
|
width: widthVar,
|
||||||
height: heightVar,
|
height: heightVar,
|
||||||
minHeight: minHeightVar,
|
minHeight: minHeightVar,
|
||||||
|
maxHeight: 'calc(100vh - 32px)',
|
||||||
|
maxWidth: 'calc(100vw - 20px)',
|
||||||
boxSizing: 'border-box',
|
boxSizing: 'border-box',
|
||||||
fontSize: cssVar('fontBase'),
|
fontSize: cssVar('fontBase'),
|
||||||
fontWeight: '400',
|
fontWeight: '400',
|
||||||
@@ -81,7 +127,6 @@ export const modalContent = style({
|
|||||||
backgroundColor: cssVar('backgroundOverlayPanelColor'),
|
backgroundColor: cssVar('backgroundOverlayPanelColor'),
|
||||||
boxShadow: cssVar('popoverShadow'),
|
boxShadow: cssVar('popoverShadow'),
|
||||||
borderRadius: '12px',
|
borderRadius: '12px',
|
||||||
maxHeight: 'calc(100vh - 32px)',
|
|
||||||
// :focus-visible will set outline
|
// :focus-visible will set outline
|
||||||
outline: 'none',
|
outline: 'none',
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -0,0 +1,3 @@
|
|||||||
|
export const isMobile = () => {
|
||||||
|
return environment.isBrowser && environment.isMobile;
|
||||||
|
};
|
||||||
@@ -48,7 +48,7 @@
|
|||||||
"@sentry/integrations": "^7.109.0",
|
"@sentry/integrations": "^7.109.0",
|
||||||
"@sentry/react": "^8.0.0",
|
"@sentry/react": "^8.0.0",
|
||||||
"@sgtpooki/file-type": "^1.0.1",
|
"@sgtpooki/file-type": "^1.0.1",
|
||||||
"@toeverything/theme": "^1.0.4",
|
"@toeverything/theme": "^1.0.5",
|
||||||
"@vanilla-extract/dynamic": "^2.1.0",
|
"@vanilla-extract/dynamic": "^2.1.0",
|
||||||
"animejs": "^3.2.2",
|
"animejs": "^3.2.2",
|
||||||
"async-call-rpc": "^6.4.2",
|
"async-call-rpc": "^6.4.2",
|
||||||
|
|||||||
@@ -20,7 +20,7 @@ const LanguageMenuContent = memo(function LanguageMenuContent() {
|
|||||||
title={option.name}
|
title={option.name}
|
||||||
lang={option.tag}
|
lang={option.tag}
|
||||||
onSelect={() => onLanguageChange(option.tag)}
|
onSelect={() => onLanguageChange(option.tag)}
|
||||||
endFix={(option.Completeness * 100).toFixed(0) + '%'}
|
suffix={(option.Completeness * 100).toFixed(0) + '%'}
|
||||||
data-selected={selected}
|
data-selected={selected}
|
||||||
className={styles.menuItem}
|
className={styles.menuItem}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -1,11 +1,5 @@
|
|||||||
import type { MenuItemProps } from '@affine/component';
|
import type { MenuItemProps } from '@affine/component';
|
||||||
import {
|
import { Input, MenuItem, MenuSeparator, Scrollable } from '@affine/component';
|
||||||
Input,
|
|
||||||
MenuIcon,
|
|
||||||
MenuItem,
|
|
||||||
MenuSeparator,
|
|
||||||
Scrollable,
|
|
||||||
} from '@affine/component';
|
|
||||||
import type { PageInfoCustomPropertyMeta } from '@affine/core/modules/properties/services/schema';
|
import type { PageInfoCustomPropertyMeta } from '@affine/core/modules/properties/services/schema';
|
||||||
import { useI18n } from '@affine/i18n';
|
import { useI18n } from '@affine/i18n';
|
||||||
import type { KeyboardEventHandler, MouseEventHandler } from 'react';
|
import type { KeyboardEventHandler, MouseEventHandler } from 'react';
|
||||||
@@ -61,7 +55,7 @@ export const renderMenuItemOptions = (options: MenuItemOption[]) => {
|
|||||||
type={type}
|
type={type}
|
||||||
selected={selected}
|
selected={selected}
|
||||||
checked={checked}
|
checked={checked}
|
||||||
preFix={icon ? <MenuIcon>{icon}</MenuIcon> : null}
|
prefixIcon={icon}
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
>
|
>
|
||||||
{text}
|
{text}
|
||||||
|
|||||||
@@ -1,12 +1,5 @@
|
|||||||
import type { MenuProps } from '@affine/component';
|
import type { MenuProps } from '@affine/component';
|
||||||
import {
|
import { Button, IconButton, Menu, MenuItem, Tooltip } from '@affine/component';
|
||||||
Button,
|
|
||||||
IconButton,
|
|
||||||
Menu,
|
|
||||||
MenuIcon,
|
|
||||||
MenuItem,
|
|
||||||
Tooltip,
|
|
||||||
} from '@affine/component';
|
|
||||||
import { useCurrentWorkspacePropertiesAdapter } from '@affine/core/hooks/use-affine-adapter';
|
import { useCurrentWorkspacePropertiesAdapter } from '@affine/core/hooks/use-affine-adapter';
|
||||||
import { track } from '@affine/core/mixpanel';
|
import { track } from '@affine/core/mixpanel';
|
||||||
import { DocLinksService } from '@affine/core/modules/doc-link';
|
import { DocLinksService } from '@affine/core/modules/doc-link';
|
||||||
@@ -346,9 +339,7 @@ export const PagePropertiesSettingsPopup = ({
|
|||||||
className={styles.propertySettingRow}
|
className={styles.propertySettingRow}
|
||||||
data-testid="page-properties-settings-menu-item"
|
data-testid="page-properties-settings-menu-item"
|
||||||
>
|
>
|
||||||
<MenuIcon>
|
<Icon />
|
||||||
<Icon />
|
|
||||||
</MenuIcon>
|
|
||||||
<div
|
<div
|
||||||
data-testid="page-property-setting-row-name"
|
data-testid="page-property-setting-row-name"
|
||||||
className={styles.propertyRowName}
|
className={styles.propertyRowName}
|
||||||
|
|||||||
+2
-22
@@ -25,19 +25,11 @@ export const menuTriggerStyle = style({
|
|||||||
padding: '4px 10px',
|
padding: '4px 10px',
|
||||||
justifyContent: 'space-between',
|
justifyContent: 'space-between',
|
||||||
});
|
});
|
||||||
export const menuItemStyle = style({
|
|
||||||
padding: '4px',
|
|
||||||
});
|
|
||||||
export const publicItemRowStyle = style({
|
export const publicItemRowStyle = style({
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
justifyContent: 'space-between',
|
justifyContent: 'space-between',
|
||||||
});
|
});
|
||||||
export const publicMenuItemPrefixStyle = style({
|
|
||||||
fontSize: cssVar('fontH5'),
|
|
||||||
color: cssVarV2('icon/primary'),
|
|
||||||
marginRight: '8px',
|
|
||||||
});
|
|
||||||
export const DoneIconStyle = style({
|
export const DoneIconStyle = style({
|
||||||
color: cssVarV2('button/primary'),
|
color: cssVarV2('button/primary'),
|
||||||
fontSize: cssVar('fontH5'),
|
fontSize: cssVar('fontH5'),
|
||||||
@@ -66,7 +58,6 @@ export const copyLinkButtonStyle = style({
|
|||||||
});
|
});
|
||||||
export const copyLinkLabelContainerStyle = style({
|
export const copyLinkLabelContainerStyle = style({
|
||||||
width: '100%',
|
width: '100%',
|
||||||
padding: '4px 12px',
|
|
||||||
borderRight: 'none',
|
borderRight: 'none',
|
||||||
borderTopRightRadius: '0',
|
borderTopRightRadius: '0',
|
||||||
borderBottomRightRadius: '0',
|
borderBottomRightRadius: '0',
|
||||||
@@ -92,18 +83,7 @@ export const copyLinkShortcutStyle = style({
|
|||||||
color: cssVarV2('text/pureWhite'),
|
color: cssVarV2('text/pureWhite'),
|
||||||
});
|
});
|
||||||
export const copyLinkTriggerStyle = style({
|
export const copyLinkTriggerStyle = style({
|
||||||
width: '100%',
|
padding: '4px 12px 4px 8px',
|
||||||
padding: '4px 12px',
|
|
||||||
paddingLeft: '4px',
|
|
||||||
display: 'flex',
|
|
||||||
border: `1px solid ${cssVarV2('button/innerBlackBorder')}`,
|
|
||||||
flex: 0,
|
|
||||||
justifyContent: 'end',
|
|
||||||
alignItems: 'center',
|
|
||||||
gap: '4px',
|
|
||||||
position: 'relative',
|
|
||||||
backgroundColor: cssVarV2('button/primary'),
|
|
||||||
color: cssVarV2('button/pureWhiteText'),
|
|
||||||
borderLeft: 'none',
|
borderLeft: 'none',
|
||||||
borderTopLeftRadius: '0',
|
borderTopLeftRadius: '0',
|
||||||
borderBottomLeftRadius: '0',
|
borderBottomLeftRadius: '0',
|
||||||
@@ -111,7 +91,7 @@ export const copyLinkTriggerStyle = style({
|
|||||||
backgroundColor: cssVarV2('button/primary'),
|
backgroundColor: cssVarV2('button/primary'),
|
||||||
color: cssVarV2('button/pureWhiteText'),
|
color: cssVarV2('button/pureWhiteText'),
|
||||||
},
|
},
|
||||||
'::before': {
|
'::after': {
|
||||||
content: '""',
|
content: '""',
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
left: '0',
|
left: '0',
|
||||||
|
|||||||
+9
-34
@@ -207,13 +207,7 @@ export const AFFiNESharePage = (props: ShareMenuProps) => {
|
|||||||
}}
|
}}
|
||||||
items={
|
items={
|
||||||
<>
|
<>
|
||||||
<MenuItem
|
<MenuItem prefixIcon={<LockIcon />} onSelect={onClickDisable}>
|
||||||
preFix={
|
|
||||||
<LockIcon className={styles.publicMenuItemPrefixStyle} />
|
|
||||||
}
|
|
||||||
onSelect={onClickDisable}
|
|
||||||
className={styles.menuItemStyle}
|
|
||||||
>
|
|
||||||
<div className={styles.publicItemRowStyle}>
|
<div className={styles.publicItemRowStyle}>
|
||||||
<div>
|
<div>
|
||||||
{t['com.affine.share-menu.option.link.no-access']()}
|
{t['com.affine.share-menu.option.link.no-access']()}
|
||||||
@@ -224,10 +218,7 @@ export const AFFiNESharePage = (props: ShareMenuProps) => {
|
|||||||
</div>
|
</div>
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
<MenuItem
|
<MenuItem
|
||||||
preFix={
|
prefixIcon={<ViewIcon />}
|
||||||
<ViewIcon className={styles.publicMenuItemPrefixStyle} />
|
|
||||||
}
|
|
||||||
className={styles.menuItemStyle}
|
|
||||||
onSelect={onClickAnyoneReadOnlyShare}
|
onSelect={onClickAnyoneReadOnlyShare}
|
||||||
data-testid="share-link-menu-enable-share"
|
data-testid="share-link-menu-enable-share"
|
||||||
>
|
>
|
||||||
@@ -295,7 +286,6 @@ export const AFFiNESharePage = (props: ShareMenuProps) => {
|
|||||||
<span className={styles.copyLinkShortcutStyle}>
|
<span className={styles.copyLinkShortcutStyle}>
|
||||||
{isMac ? '⌘ + ⌥ + C' : 'Ctrl + Shift + C'}
|
{isMac ? '⌘ + ⌥ + C' : 'Ctrl + Shift + C'}
|
||||||
</span>
|
</span>
|
||||||
{t['com.affine.share-menu.copy']()}
|
|
||||||
</Button>
|
</Button>
|
||||||
<Menu
|
<Menu
|
||||||
contentOptions={{
|
contentOptions={{
|
||||||
@@ -304,42 +294,24 @@ export const AFFiNESharePage = (props: ShareMenuProps) => {
|
|||||||
items={
|
items={
|
||||||
<>
|
<>
|
||||||
<MenuItem
|
<MenuItem
|
||||||
preFix={
|
prefixIcon={<PageIcon />}
|
||||||
<PageIcon className={styles.publicMenuItemPrefixStyle} />
|
|
||||||
}
|
|
||||||
className={styles.menuItemStyle}
|
|
||||||
onSelect={onCopyPageLink}
|
onSelect={onCopyPageLink}
|
||||||
data-testid="share-link-menu-copy-page"
|
data-testid="share-link-menu-copy-page"
|
||||||
>
|
>
|
||||||
{t['com.affine.share-menu.copy.page']()}
|
{t['com.affine.share-menu.copy.page']()}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
<MenuItem
|
<MenuItem
|
||||||
preFix={
|
prefixIcon={<EdgelessIcon />}
|
||||||
<EdgelessIcon className={styles.publicMenuItemPrefixStyle} />
|
|
||||||
}
|
|
||||||
className={styles.menuItemStyle}
|
|
||||||
onSelect={onCopyEdgelessLink}
|
onSelect={onCopyEdgelessLink}
|
||||||
data-testid="share-link-menu-copy-edgeless"
|
data-testid="share-link-menu-copy-edgeless"
|
||||||
>
|
>
|
||||||
{t['com.affine.share-menu.copy.edgeless']()}
|
{t['com.affine.share-menu.copy.edgeless']()}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
<MenuItem
|
<MenuItem prefixIcon={<LinkIcon />} onSelect={onCopyBlockLink}>
|
||||||
preFix={
|
|
||||||
<LinkIcon className={styles.publicMenuItemPrefixStyle} />
|
|
||||||
}
|
|
||||||
className={styles.menuItemStyle}
|
|
||||||
onSelect={onCopyBlockLink}
|
|
||||||
>
|
|
||||||
{t['com.affine.share-menu.copy.block']()}
|
{t['com.affine.share-menu.copy.block']()}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
{currentDocMode === 'edgeless' && (
|
{currentDocMode === 'edgeless' && (
|
||||||
<MenuItem
|
<MenuItem prefixIcon={<LinkIcon />} onSelect={onCopyBlockLink}>
|
||||||
preFix={
|
|
||||||
<LinkIcon className={styles.publicMenuItemPrefixStyle} />
|
|
||||||
}
|
|
||||||
className={styles.menuItemStyle}
|
|
||||||
onSelect={onCopyBlockLink}
|
|
||||||
>
|
|
||||||
{t['com.affine.share-menu.copy.frame']()}
|
{t['com.affine.share-menu.copy.frame']()}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
)}
|
)}
|
||||||
@@ -347,8 +319,11 @@ export const AFFiNESharePage = (props: ShareMenuProps) => {
|
|||||||
}
|
}
|
||||||
>
|
>
|
||||||
<MenuTrigger
|
<MenuTrigger
|
||||||
|
variant="primary"
|
||||||
className={styles.copyLinkTriggerStyle}
|
className={styles.copyLinkTriggerStyle}
|
||||||
data-testid="share-menu-copy-link-button"
|
data-testid="share-menu-copy-link-button"
|
||||||
|
suffixStyle={{ width: 20, height: 20 }}
|
||||||
|
withoutHover
|
||||||
/>
|
/>
|
||||||
</Menu>
|
</Menu>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
+13
-82
@@ -1,7 +1,6 @@
|
|||||||
import { toast } from '@affine/component';
|
import { toast } from '@affine/component';
|
||||||
import {
|
import {
|
||||||
Menu,
|
Menu,
|
||||||
MenuIcon,
|
|
||||||
MenuItem,
|
MenuItem,
|
||||||
MenuSeparator,
|
MenuSeparator,
|
||||||
MenuSub,
|
MenuSub,
|
||||||
@@ -13,6 +12,7 @@ import {
|
|||||||
import { PageHistoryModal } from '@affine/core/components/affine/page-history-modal';
|
import { PageHistoryModal } from '@affine/core/components/affine/page-history-modal';
|
||||||
import { ShareMenuContent } from '@affine/core/components/affine/share-page-modal/share-menu';
|
import { ShareMenuContent } from '@affine/core/components/affine/share-page-modal/share-menu';
|
||||||
import { Export, MoveToTrash } from '@affine/core/components/page-list';
|
import { Export, MoveToTrash } from '@affine/core/components/page-list';
|
||||||
|
import { IsFavoriteIcon } from '@affine/core/components/pure/icons';
|
||||||
import { useBlockSuiteMetaHelper } from '@affine/core/hooks/affine/use-block-suite-meta-helper';
|
import { useBlockSuiteMetaHelper } from '@affine/core/hooks/affine/use-block-suite-meta-helper';
|
||||||
import { useEnableCloud } from '@affine/core/hooks/affine/use-enable-cloud';
|
import { useEnableCloud } from '@affine/core/hooks/affine/use-enable-cloud';
|
||||||
import { useExportPage } from '@affine/core/hooks/affine/use-export-page';
|
import { useExportPage } from '@affine/core/hooks/affine/use-export-page';
|
||||||
@@ -29,8 +29,6 @@ import {
|
|||||||
DuplicateIcon,
|
DuplicateIcon,
|
||||||
EdgelessIcon,
|
EdgelessIcon,
|
||||||
EditIcon,
|
EditIcon,
|
||||||
FavoritedIcon,
|
|
||||||
FavoriteIcon,
|
|
||||||
FrameIcon,
|
FrameIcon,
|
||||||
HistoryIcon,
|
HistoryIcon,
|
||||||
ImportIcon,
|
ImportIcon,
|
||||||
@@ -157,10 +155,6 @@ export const PageHeaderMenuButton = ({
|
|||||||
: t['com.affine.toastMessage.pageMode']()
|
: t['com.affine.toastMessage.pageMode']()
|
||||||
);
|
);
|
||||||
}, [currentMode, editorService, t]);
|
}, [currentMode, editorService, t]);
|
||||||
const menuItemStyle = {
|
|
||||||
padding: '4px 12px',
|
|
||||||
transition: 'all 0.3s',
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleMenuOpenChange = useCallback((open: boolean) => {
|
const handleMenuOpenChange = useCallback((open: boolean) => {
|
||||||
if (open) {
|
if (open) {
|
||||||
@@ -225,11 +219,7 @@ export const PageHeaderMenuButton = ({
|
|||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
triggerOptions={{
|
triggerOptions={{
|
||||||
preFix: (
|
prefixIcon: <ShareIcon />,
|
||||||
<MenuIcon>
|
|
||||||
<ShareIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
),
|
|
||||||
}}
|
}}
|
||||||
subOptions={{
|
subOptions={{
|
||||||
onOpenChange: handleShareMenuOpenChange,
|
onOpenChange: handleShareMenuOpenChange,
|
||||||
@@ -247,27 +237,17 @@ export const PageHeaderMenuButton = ({
|
|||||||
{showResponsiveMenu ? ResponsiveMenuItems : null}
|
{showResponsiveMenu ? ResponsiveMenuItems : null}
|
||||||
{!isJournal && (
|
{!isJournal && (
|
||||||
<MenuItem
|
<MenuItem
|
||||||
preFix={
|
prefixIcon={<EditIcon />}
|
||||||
<MenuIcon>
|
|
||||||
<EditIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
data-testid="editor-option-menu-rename"
|
data-testid="editor-option-menu-rename"
|
||||||
onSelect={handleRename}
|
onSelect={handleRename}
|
||||||
style={menuItemStyle}
|
|
||||||
>
|
>
|
||||||
{t['Rename']()}
|
{t['Rename']()}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
)}
|
)}
|
||||||
<MenuItem
|
<MenuItem
|
||||||
preFix={
|
prefixIcon={currentMode === 'page' ? <EdgelessIcon /> : <PageIcon />}
|
||||||
<MenuIcon>
|
|
||||||
{currentMode === 'page' ? <EdgelessIcon /> : <PageIcon />}
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
data-testid="editor-option-menu-edgeless"
|
data-testid="editor-option-menu-edgeless"
|
||||||
onSelect={handleSwitchMode}
|
onSelect={handleSwitchMode}
|
||||||
style={menuItemStyle}
|
|
||||||
>
|
>
|
||||||
{t['Convert to ']()}
|
{t['Convert to ']()}
|
||||||
{currentMode === 'page'
|
{currentMode === 'page'
|
||||||
@@ -277,16 +257,7 @@ export const PageHeaderMenuButton = ({
|
|||||||
<MenuItem
|
<MenuItem
|
||||||
data-testid="editor-option-menu-favorite"
|
data-testid="editor-option-menu-favorite"
|
||||||
onSelect={handleToggleFavorite}
|
onSelect={handleToggleFavorite}
|
||||||
style={menuItemStyle}
|
prefixIcon={<IsFavoriteIcon favorite={favorite} />}
|
||||||
preFix={
|
|
||||||
<MenuIcon>
|
|
||||||
{favorite ? (
|
|
||||||
<FavoritedIcon style={{ color: 'var(--affine-primary-color)' }} />
|
|
||||||
) : (
|
|
||||||
<FavoriteIcon />
|
|
||||||
)}
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
{favorite
|
{favorite
|
||||||
? t['com.affine.favoritePageOperation.remove']()
|
? t['com.affine.favoritePageOperation.remove']()
|
||||||
@@ -294,28 +265,18 @@ export const PageHeaderMenuButton = ({
|
|||||||
</MenuItem>
|
</MenuItem>
|
||||||
<MenuSeparator />
|
<MenuSeparator />
|
||||||
<MenuItem
|
<MenuItem
|
||||||
preFix={
|
prefixIcon={<OpenInNewIcon />}
|
||||||
<MenuIcon>
|
|
||||||
<OpenInNewIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
data-testid="editor-option-menu-open-in-new-tab"
|
data-testid="editor-option-menu-open-in-new-tab"
|
||||||
onSelect={handleOpenInNewTab}
|
onSelect={handleOpenInNewTab}
|
||||||
style={menuItemStyle}
|
|
||||||
>
|
>
|
||||||
{t['com.affine.workbench.tab.page-menu-open']()}
|
{t['com.affine.workbench.tab.page-menu-open']()}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
|
|
||||||
{environment.isDesktop && (
|
{environment.isDesktop && (
|
||||||
<MenuItem
|
<MenuItem
|
||||||
preFix={
|
prefixIcon={<SplitViewIcon />}
|
||||||
<MenuIcon>
|
|
||||||
<SplitViewIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
data-testid="editor-option-menu-open-in-split-new"
|
data-testid="editor-option-menu-open-in-split-new"
|
||||||
onSelect={handleOpenInSplitView}
|
onSelect={handleOpenInSplitView}
|
||||||
style={menuItemStyle}
|
|
||||||
>
|
>
|
||||||
{t['com.affine.workbench.split-view.page-menu-open']()}
|
{t['com.affine.workbench.split-view.page-menu-open']()}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
@@ -325,81 +286,51 @@ export const PageHeaderMenuButton = ({
|
|||||||
|
|
||||||
{runtimeConfig.enableInfoModal && (
|
{runtimeConfig.enableInfoModal && (
|
||||||
<MenuItem
|
<MenuItem
|
||||||
preFix={
|
prefixIcon={<InformationIcon />}
|
||||||
<MenuIcon>
|
|
||||||
<InformationIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
data-testid="editor-option-menu-info"
|
data-testid="editor-option-menu-info"
|
||||||
onSelect={openInfoModal}
|
onSelect={openInfoModal}
|
||||||
style={menuItemStyle}
|
|
||||||
>
|
>
|
||||||
{t['com.affine.page-properties.page-info.view']()}
|
{t['com.affine.page-properties.page-info.view']()}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
)}
|
)}
|
||||||
{currentMode === 'page' ? (
|
{currentMode === 'page' ? (
|
||||||
<MenuItem
|
<MenuItem
|
||||||
preFix={
|
prefixIcon={<TocIcon />}
|
||||||
<MenuIcon>
|
|
||||||
<TocIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
data-testid="editor-option-toc"
|
data-testid="editor-option-toc"
|
||||||
onSelect={openOutlinePanel}
|
onSelect={openOutlinePanel}
|
||||||
style={menuItemStyle}
|
|
||||||
>
|
>
|
||||||
{t['com.affine.header.option.view-toc']()}
|
{t['com.affine.header.option.view-toc']()}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
) : (
|
) : (
|
||||||
<MenuItem
|
<MenuItem
|
||||||
preFix={
|
prefixIcon={<FrameIcon />}
|
||||||
<MenuIcon>
|
|
||||||
<FrameIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
data-testid="editor-option-frame"
|
data-testid="editor-option-frame"
|
||||||
onSelect={openAllFrames}
|
onSelect={openAllFrames}
|
||||||
style={menuItemStyle}
|
|
||||||
>
|
>
|
||||||
{t['com.affine.header.option.view-frame']()}
|
{t['com.affine.header.option.view-frame']()}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
)}
|
)}
|
||||||
<MenuItem
|
<MenuItem
|
||||||
preFix={
|
prefixIcon={<HistoryIcon />}
|
||||||
<MenuIcon>
|
|
||||||
<HistoryIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
data-testid="editor-option-menu-history"
|
data-testid="editor-option-menu-history"
|
||||||
onSelect={openHistoryModal}
|
onSelect={openHistoryModal}
|
||||||
style={menuItemStyle}
|
|
||||||
>
|
>
|
||||||
{t['com.affine.history.view-history-version']()}
|
{t['com.affine.history.view-history-version']()}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
<MenuSeparator />
|
<MenuSeparator />
|
||||||
{!isJournal && (
|
{!isJournal && (
|
||||||
<MenuItem
|
<MenuItem
|
||||||
preFix={
|
prefixIcon={<DuplicateIcon />}
|
||||||
<MenuIcon>
|
|
||||||
<DuplicateIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
data-testid="editor-option-menu-duplicate"
|
data-testid="editor-option-menu-duplicate"
|
||||||
onSelect={handleDuplicate}
|
onSelect={handleDuplicate}
|
||||||
style={menuItemStyle}
|
|
||||||
>
|
>
|
||||||
{t['com.affine.header.option.duplicate']()}
|
{t['com.affine.header.option.duplicate']()}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
)}
|
)}
|
||||||
<MenuItem
|
<MenuItem
|
||||||
preFix={
|
prefixIcon={<ImportIcon />}
|
||||||
<MenuIcon>
|
|
||||||
<ImportIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
data-testid="editor-option-menu-import"
|
data-testid="editor-option-menu-import"
|
||||||
onSelect={onImportFile}
|
onSelect={onImportFile}
|
||||||
style={menuItemStyle}
|
|
||||||
>
|
>
|
||||||
{t['Import']()}
|
{t['Import']()}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
|
|||||||
+2
-11
@@ -1,10 +1,5 @@
|
|||||||
import { Avatar } from '@affine/component/ui/avatar';
|
import { Avatar } from '@affine/component/ui/avatar';
|
||||||
import {
|
import { Menu, MenuItem, MenuSeparator } from '@affine/component/ui/menu';
|
||||||
Menu,
|
|
||||||
MenuIcon,
|
|
||||||
MenuItem,
|
|
||||||
MenuSeparator,
|
|
||||||
} from '@affine/component/ui/menu';
|
|
||||||
import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
|
import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
|
||||||
import { useI18n } from '@affine/i18n';
|
import { useI18n } from '@affine/i18n';
|
||||||
import { SignOutIcon } from '@blocksuite/icons/rc';
|
import { SignOutIcon } from '@blocksuite/icons/rc';
|
||||||
@@ -66,11 +61,7 @@ export const PublishPageUserAvatar = () => {
|
|||||||
<UserInfo />
|
<UserInfo />
|
||||||
<MenuSeparator />
|
<MenuSeparator />
|
||||||
<MenuItem
|
<MenuItem
|
||||||
preFix={
|
prefixIcon={<SignOutIcon />}
|
||||||
<MenuIcon>
|
|
||||||
<SignOutIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
data-testid="share-page-sign-out-option"
|
data-testid="share-page-sign-out-option"
|
||||||
onClick={handleSignOut}
|
onClick={handleSignOut}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -94,7 +94,7 @@ export const PageDisplayMenu = () => {
|
|||||||
key={option.value}
|
key={option.value}
|
||||||
onSelect={() => handleSelect(option.value)}
|
onSelect={() => handleSelect(option.value)}
|
||||||
data-active={workspaceProperties.groupBy === option.value}
|
data-active={workspaceProperties.groupBy === option.value}
|
||||||
endFix={
|
suffixIcon={
|
||||||
workspaceProperties.groupBy === option.value ? (
|
workspaceProperties.groupBy === option.value ? (
|
||||||
<DoneIcon fontSize={'20px'} />
|
<DoneIcon fontSize={'20px'} />
|
||||||
) : null
|
) : null
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { MenuIcon, MenuItem, MenuSeparator } from '@affine/component';
|
import { MenuItem, MenuSeparator } from '@affine/component';
|
||||||
import type {
|
import type {
|
||||||
Filter,
|
Filter,
|
||||||
LiteralValue,
|
LiteralValue,
|
||||||
@@ -92,7 +92,7 @@ export const VariableSelect = ({
|
|||||||
// .filter(v => !selected.find(filter => filter.left.name === v.name))
|
// .filter(v => !selected.find(filter => filter.left.name === v.name))
|
||||||
.map(v => (
|
.map(v => (
|
||||||
<MenuItem
|
<MenuItem
|
||||||
preFix={<MenuIcon>{variableDefineMap[v.name].icon}</MenuIcon>}
|
prefixIcon={variableDefineMap[v.name].icon}
|
||||||
key={v.name}
|
key={v.name}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
onSelect(createDefaultFilter(v, propertiesMeta));
|
onSelect(createDefaultFilter(v, propertiesMeta));
|
||||||
|
|||||||
@@ -1,7 +1,6 @@
|
|||||||
import {
|
import {
|
||||||
IconButton,
|
IconButton,
|
||||||
Menu,
|
Menu,
|
||||||
MenuIcon,
|
|
||||||
MenuItem,
|
MenuItem,
|
||||||
toast,
|
toast,
|
||||||
useConfirmModal,
|
useConfirmModal,
|
||||||
@@ -20,8 +19,6 @@ import {
|
|||||||
DeletePermanentlyIcon,
|
DeletePermanentlyIcon,
|
||||||
DuplicateIcon,
|
DuplicateIcon,
|
||||||
EditIcon,
|
EditIcon,
|
||||||
FavoritedIcon,
|
|
||||||
FavoriteIcon,
|
|
||||||
FilterIcon,
|
FilterIcon,
|
||||||
FilterMinusIcon,
|
FilterMinusIcon,
|
||||||
InformationIcon,
|
InformationIcon,
|
||||||
@@ -44,6 +41,7 @@ import { useCallback, useState } from 'react';
|
|||||||
import type { CollectionService } from '../../modules/collection';
|
import type { CollectionService } from '../../modules/collection';
|
||||||
import { InfoModal } from '../affine/page-properties';
|
import { InfoModal } from '../affine/page-properties';
|
||||||
import { usePageHelper } from '../blocksuite/block-suite-page-list/utils';
|
import { usePageHelper } from '../blocksuite/block-suite-page-list/utils';
|
||||||
|
import { IsFavoriteIcon } from '../pure/icons';
|
||||||
import { FavoriteTag } from './components/favorite-tag';
|
import { FavoriteTag } from './components/favorite-tag';
|
||||||
import * as styles from './list.css';
|
import * as styles from './list.css';
|
||||||
import { DisablePublicSharing, MoveToTrash } from './operation-menu-items';
|
import { DisablePublicSharing, MoveToTrash } from './operation-menu-items';
|
||||||
@@ -164,76 +162,36 @@ export const PageOperationCell = ({
|
|||||||
{isInAllowList && (
|
{isInAllowList && (
|
||||||
<MenuItem
|
<MenuItem
|
||||||
onClick={handleRemoveFromAllowList}
|
onClick={handleRemoveFromAllowList}
|
||||||
preFix={
|
prefixIcon={<FilterMinusIcon />}
|
||||||
<MenuIcon>
|
|
||||||
<FilterMinusIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
{t['Remove special filter']()}
|
{t['Remove special filter']()}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
)}
|
)}
|
||||||
<MenuItem
|
<MenuItem
|
||||||
onClick={onToggleFavoritePageOption}
|
onClick={onToggleFavoritePageOption}
|
||||||
preFix={
|
prefixIcon={<IsFavoriteIcon favorite={favourite} />}
|
||||||
<MenuIcon>
|
|
||||||
{favourite ? (
|
|
||||||
<FavoritedIcon style={{ color: 'var(--affine-primary-color)' }} />
|
|
||||||
) : (
|
|
||||||
<FavoriteIcon />
|
|
||||||
)}
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
{favourite
|
{favourite
|
||||||
? t['com.affine.favoritePageOperation.remove']()
|
? t['com.affine.favoritePageOperation.remove']()
|
||||||
: t['com.affine.favoritePageOperation.add']()}
|
: t['com.affine.favoritePageOperation.add']()}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
{runtimeConfig.enableInfoModal ? (
|
{runtimeConfig.enableInfoModal ? (
|
||||||
<MenuItem
|
<MenuItem onClick={onOpenInfoModal} prefixIcon={<InformationIcon />}>
|
||||||
onClick={onOpenInfoModal}
|
|
||||||
preFix={
|
|
||||||
<MenuIcon>
|
|
||||||
<InformationIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{t['com.affine.page-properties.page-info.view']()}
|
{t['com.affine.page-properties.page-info.view']()}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
) : null}
|
) : null}
|
||||||
|
|
||||||
<MenuItem
|
<MenuItem onClick={onOpenInNewTab} prefixIcon={<OpenInNewIcon />}>
|
||||||
onClick={onOpenInNewTab}
|
|
||||||
preFix={
|
|
||||||
<MenuIcon>
|
|
||||||
<OpenInNewIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{t['com.affine.workbench.tab.page-menu-open']()}
|
{t['com.affine.workbench.tab.page-menu-open']()}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
|
|
||||||
{environment.isDesktop && enableSplitView ? (
|
{environment.isDesktop && enableSplitView ? (
|
||||||
<MenuItem
|
<MenuItem onClick={onOpenInSplitView} prefixIcon={<SplitViewIcon />}>
|
||||||
onClick={onOpenInSplitView}
|
|
||||||
preFix={
|
|
||||||
<MenuIcon>
|
|
||||||
<SplitViewIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{t['com.affine.workbench.split-view.page-menu-open']()}
|
{t['com.affine.workbench.split-view.page-menu-open']()}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
) : null}
|
) : null}
|
||||||
|
|
||||||
<MenuItem
|
<MenuItem prefixIcon={<DuplicateIcon />} onSelect={onDuplicate}>
|
||||||
preFix={
|
|
||||||
<MenuIcon>
|
|
||||||
<DuplicateIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
onSelect={onDuplicate}
|
|
||||||
>
|
|
||||||
{t['com.affine.header.option.duplicate']()}
|
{t['com.affine.header.option.duplicate']()}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
|
|
||||||
@@ -459,17 +417,7 @@ export const CollectionOperationCell = ({
|
|||||||
<>
|
<>
|
||||||
<MenuItem
|
<MenuItem
|
||||||
onClick={onToggleFavoriteCollection}
|
onClick={onToggleFavoriteCollection}
|
||||||
preFix={
|
prefixIcon={<IsFavoriteIcon favorite={favourite} />}
|
||||||
<MenuIcon>
|
|
||||||
{favourite ? (
|
|
||||||
<FavoritedIcon
|
|
||||||
style={{ color: 'var(--affine-primary-color)' }}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<FavoriteIcon />
|
|
||||||
)}
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
{favourite
|
{favourite
|
||||||
? t['com.affine.favoritePageOperation.remove']()
|
? t['com.affine.favoritePageOperation.remove']()
|
||||||
@@ -477,21 +425,13 @@ export const CollectionOperationCell = ({
|
|||||||
</MenuItem>
|
</MenuItem>
|
||||||
<MenuItem
|
<MenuItem
|
||||||
onClick={onConfirmAddDocToCollection}
|
onClick={onConfirmAddDocToCollection}
|
||||||
preFix={
|
prefixIcon={<PlusIcon />}
|
||||||
<MenuIcon>
|
|
||||||
<PlusIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
{t['New Page']()}
|
{t['New Page']()}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
<MenuItem
|
<MenuItem
|
||||||
onClick={handleDelete}
|
onClick={handleDelete}
|
||||||
preFix={
|
prefixIcon={<DeleteIcon />}
|
||||||
<MenuIcon>
|
|
||||||
<DeleteIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
type="danger"
|
type="danger"
|
||||||
data-testid="delete-collection"
|
data-testid="delete-collection"
|
||||||
>
|
>
|
||||||
@@ -566,11 +506,7 @@ export const TagOperationCell = ({
|
|||||||
<Menu
|
<Menu
|
||||||
items={
|
items={
|
||||||
<MenuItem
|
<MenuItem
|
||||||
preFix={
|
prefixIcon={<DeleteIcon />}
|
||||||
<MenuIcon>
|
|
||||||
<DeleteIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
type="danger"
|
type="danger"
|
||||||
onSelect={handleDelete}
|
onSelect={handleDelete}
|
||||||
data-testid="delete-tag"
|
data-testid="delete-tag"
|
||||||
|
|||||||
+2
-10
@@ -1,5 +1,5 @@
|
|||||||
import type { MenuItemProps } from '@affine/component';
|
import type { MenuItemProps } from '@affine/component';
|
||||||
import { MenuIcon, MenuItem } from '@affine/component';
|
import { MenuItem } from '@affine/component';
|
||||||
import { PublicLinkDisableModal } from '@affine/component/disable-public-link';
|
import { PublicLinkDisableModal } from '@affine/component/disable-public-link';
|
||||||
import { useI18n } from '@affine/i18n';
|
import { useI18n } from '@affine/i18n';
|
||||||
import { ShareIcon } from '@blocksuite/icons/rc';
|
import { ShareIcon } from '@blocksuite/icons/rc';
|
||||||
@@ -7,15 +7,7 @@ import { ShareIcon } from '@blocksuite/icons/rc';
|
|||||||
export const DisablePublicSharing = (props: MenuItemProps) => {
|
export const DisablePublicSharing = (props: MenuItemProps) => {
|
||||||
const t = useI18n();
|
const t = useI18n();
|
||||||
return (
|
return (
|
||||||
<MenuItem
|
<MenuItem type="danger" prefixIcon={<ShareIcon />} {...props}>
|
||||||
type="danger"
|
|
||||||
preFix={
|
|
||||||
<MenuIcon>
|
|
||||||
<ShareIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{t['Disable Public Sharing']()}
|
{t['Disable Public Sharing']()}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { MenuIcon, MenuItem, MenuSub } from '@affine/component';
|
import { MenuItem, MenuSub } from '@affine/component';
|
||||||
import { track } from '@affine/core/mixpanel';
|
import { track } from '@affine/core/mixpanel';
|
||||||
import { useI18n } from '@affine/i18n';
|
import { useI18n } from '@affine/i18n';
|
||||||
import {
|
import {
|
||||||
@@ -40,7 +40,7 @@ export function ExportMenuItem<T>({
|
|||||||
data-testid={`export-to-${type}`}
|
data-testid={`export-to-${type}`}
|
||||||
onSelect={onSelect}
|
onSelect={onSelect}
|
||||||
block
|
block
|
||||||
preFix={<MenuIcon>{icon}</MenuIcon>}
|
prefixIcon={icon}
|
||||||
>
|
>
|
||||||
{label}
|
{label}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
@@ -127,11 +127,7 @@ export const Export = ({ exportHandler, className, pageMode }: ExportProps) => {
|
|||||||
items={items}
|
items={items}
|
||||||
triggerOptions={{
|
triggerOptions={{
|
||||||
className: transitionStyle,
|
className: transitionStyle,
|
||||||
preFix: (
|
prefixIcon: <ExportIcon />,
|
||||||
<MenuIcon>
|
|
||||||
<ExportIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
),
|
|
||||||
['data-testid' as string]: 'export-menu',
|
['data-testid' as string]: 'export-menu',
|
||||||
}}
|
}}
|
||||||
subOptions={{
|
subOptions={{
|
||||||
|
|||||||
+2
-10
@@ -1,5 +1,5 @@
|
|||||||
import type { ConfirmModalProps, MenuItemProps } from '@affine/component';
|
import type { ConfirmModalProps, MenuItemProps } from '@affine/component';
|
||||||
import { ConfirmModal, MenuIcon, MenuItem } from '@affine/component';
|
import { ConfirmModal, MenuItem } from '@affine/component';
|
||||||
import { useI18n } from '@affine/i18n';
|
import { useI18n } from '@affine/i18n';
|
||||||
import { DeleteIcon } from '@blocksuite/icons/rc';
|
import { DeleteIcon } from '@blocksuite/icons/rc';
|
||||||
|
|
||||||
@@ -7,15 +7,7 @@ export const MoveToTrash = (props: MenuItemProps) => {
|
|||||||
const t = useI18n();
|
const t = useI18n();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<MenuItem
|
<MenuItem prefixIcon={<DeleteIcon />} type="danger" {...props}>
|
||||||
preFix={
|
|
||||||
<MenuIcon>
|
|
||||||
<DeleteIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
type="danger"
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{t['com.affine.moveToTrash.title']()}
|
{t['com.affine.moveToTrash.title']()}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import type { MenuItemProps } from '@affine/component';
|
import type { MenuItemProps } from '@affine/component';
|
||||||
import { Menu, MenuIcon, MenuItem } from '@affine/component';
|
import { Menu, MenuItem } from '@affine/component';
|
||||||
import { useDeleteCollectionInfo } from '@affine/core/hooks/affine/use-delete-collection-info';
|
import { useDeleteCollectionInfo } from '@affine/core/hooks/affine/use-delete-collection-info';
|
||||||
import { CompatibleFavoriteItemsAdapter } from '@affine/core/modules/properties';
|
import { CompatibleFavoriteItemsAdapter } from '@affine/core/modules/properties';
|
||||||
import { WorkbenchService } from '@affine/core/modules/workbench';
|
import { WorkbenchService } from '@affine/core/modules/workbench';
|
||||||
@@ -8,8 +8,6 @@ import { useI18n } from '@affine/i18n';
|
|||||||
import {
|
import {
|
||||||
DeleteIcon,
|
DeleteIcon,
|
||||||
EditIcon,
|
EditIcon,
|
||||||
FavoritedIcon,
|
|
||||||
FavoriteIcon,
|
|
||||||
FilterIcon,
|
FilterIcon,
|
||||||
OpenInNewIcon,
|
OpenInNewIcon,
|
||||||
PlusIcon,
|
PlusIcon,
|
||||||
@@ -25,6 +23,7 @@ import type { PropsWithChildren, ReactElement } from 'react';
|
|||||||
import { useCallback, useMemo } from 'react';
|
import { useCallback, useMemo } from 'react';
|
||||||
|
|
||||||
import { CollectionService } from '../../../modules/collection';
|
import { CollectionService } from '../../../modules/collection';
|
||||||
|
import { IsFavoriteIcon } from '../../pure/icons';
|
||||||
import * as styles from './collection-operations.css';
|
import * as styles from './collection-operations.css';
|
||||||
import {
|
import {
|
||||||
useEditCollection,
|
useEditCollection,
|
||||||
@@ -127,68 +126,40 @@ export const CollectionOperations = ({
|
|||||||
>(
|
>(
|
||||||
() => [
|
() => [
|
||||||
{
|
{
|
||||||
icon: (
|
icon: <EditIcon />,
|
||||||
<MenuIcon>
|
|
||||||
<EditIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
),
|
|
||||||
name: t['com.affine.collection.menu.rename'](),
|
name: t['com.affine.collection.menu.rename'](),
|
||||||
click: showEditName,
|
click: showEditName,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: (
|
icon: <FilterIcon />,
|
||||||
<MenuIcon>
|
|
||||||
<FilterIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
),
|
|
||||||
name: t['com.affine.collection.menu.edit'](),
|
name: t['com.affine.collection.menu.edit'](),
|
||||||
click: showEdit,
|
click: showEdit,
|
||||||
},
|
},
|
||||||
...(onAddDocToCollection
|
...(onAddDocToCollection
|
||||||
? [
|
? [
|
||||||
{
|
{
|
||||||
icon: (
|
icon: <PlusIcon />,
|
||||||
<MenuIcon>
|
|
||||||
<PlusIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
),
|
|
||||||
name: t['New Page'](),
|
name: t['New Page'](),
|
||||||
click: onAddDocToCollection,
|
click: onAddDocToCollection,
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
: []),
|
: []),
|
||||||
{
|
{
|
||||||
icon: (
|
icon: <IsFavoriteIcon favorite={favorite} />,
|
||||||
<MenuIcon>
|
|
||||||
{favorite ? (
|
|
||||||
<FavoritedIcon style={{ color: 'var(--affine-primary-color)' }} />
|
|
||||||
) : (
|
|
||||||
<FavoriteIcon />
|
|
||||||
)}
|
|
||||||
</MenuIcon>
|
|
||||||
),
|
|
||||||
name: favorite
|
name: favorite
|
||||||
? t['com.affine.favoritePageOperation.remove']()
|
? t['com.affine.favoritePageOperation.remove']()
|
||||||
: t['com.affine.favoritePageOperation.add'](),
|
: t['com.affine.favoritePageOperation.add'](),
|
||||||
click: onToggleFavoritePage,
|
click: onToggleFavoritePage,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: (
|
icon: <OpenInNewIcon />,
|
||||||
<MenuIcon>
|
|
||||||
<OpenInNewIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
),
|
|
||||||
name: t['com.affine.workbench.tab.page-menu-open'](),
|
name: t['com.affine.workbench.tab.page-menu-open'](),
|
||||||
click: openCollectionNewTab,
|
click: openCollectionNewTab,
|
||||||
},
|
},
|
||||||
...(enableMultiView && environment.isDesktop
|
...(enableMultiView && environment.isDesktop
|
||||||
? [
|
? [
|
||||||
{
|
{
|
||||||
icon: (
|
icon: <SplitViewIcon />,
|
||||||
<MenuIcon>
|
|
||||||
<SplitViewIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
),
|
|
||||||
name: t['com.affine.workbench.split-view.page-menu-open'](),
|
name: t['com.affine.workbench.split-view.page-menu-open'](),
|
||||||
click: openCollectionSplitView,
|
click: openCollectionSplitView,
|
||||||
},
|
},
|
||||||
@@ -198,11 +169,7 @@ export const CollectionOperations = ({
|
|||||||
element: <div key="divider" className={styles.divider}></div>,
|
element: <div key="divider" className={styles.divider}></div>,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: (
|
icon: <DeleteIcon />,
|
||||||
<MenuIcon>
|
|
||||||
<DeleteIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
),
|
|
||||||
name: t['Delete'](),
|
name: t['Delete'](),
|
||||||
click: () => {
|
click: () => {
|
||||||
service.deleteCollection(deleteInfo, collection.id);
|
service.deleteCollection(deleteInfo, collection.id);
|
||||||
@@ -241,7 +208,7 @@ export const CollectionOperations = ({
|
|||||||
data-testid="collection-option"
|
data-testid="collection-option"
|
||||||
key={action.name}
|
key={action.name}
|
||||||
type={action.type}
|
type={action.type}
|
||||||
preFix={action.icon}
|
prefixIcon={action.icon}
|
||||||
onClick={action.click}
|
onClick={action.click}
|
||||||
>
|
>
|
||||||
{action.name}
|
{action.name}
|
||||||
|
|||||||
@@ -0,0 +1,18 @@
|
|||||||
|
import { FavoritedIcon, FavoriteIcon } from '@blocksuite/icons/rc';
|
||||||
|
import { cssVar } from '@toeverything/theme';
|
||||||
|
import type { SVGProps } from 'react';
|
||||||
|
|
||||||
|
export const IsFavoriteIcon = ({
|
||||||
|
favorite,
|
||||||
|
style,
|
||||||
|
...props
|
||||||
|
}: { favorite?: boolean } & SVGProps<SVGSVGElement>) => {
|
||||||
|
return favorite ? (
|
||||||
|
<FavoritedIcon
|
||||||
|
style={{ color: cssVar('primaryColor'), ...style }}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<FavoriteIcon style={style} {...props} />
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -1,28 +1 @@
|
|||||||
import {
|
export * from './favorite-icon';
|
||||||
CloudWorkspaceIcon as DefaultCloudWorkspaceIcon,
|
|
||||||
CollaborationIcon as DefaultJoinedWorkspaceIcon,
|
|
||||||
LocalDataIcon as DefaultLocalDataIcon,
|
|
||||||
LocalWorkspaceIcon as DefaultLocalWorkspaceIcon,
|
|
||||||
PublishIcon as DefaultPublishIcon,
|
|
||||||
} from '@blocksuite/icons/rc';
|
|
||||||
|
|
||||||
// Here are some icons with special color or size
|
|
||||||
|
|
||||||
export const JoinedWorkspaceIcon = () => {
|
|
||||||
return <DefaultJoinedWorkspaceIcon style={{ color: '#FF646B' }} />;
|
|
||||||
};
|
|
||||||
export const LocalWorkspaceIcon = () => {
|
|
||||||
return <DefaultLocalWorkspaceIcon style={{ color: '#FDBD32' }} />;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const CloudWorkspaceIcon = () => {
|
|
||||||
return <DefaultCloudWorkspaceIcon style={{ color: '#60A5FA' }} />;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const LocalDataIcon = () => {
|
|
||||||
return <DefaultLocalDataIcon style={{ color: '#62CD80' }} />;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const PublishIcon = () => {
|
|
||||||
return <DefaultPublishIcon style={{ color: '#8699FF' }} />;
|
|
||||||
};
|
|
||||||
|
|||||||
+2
-2
@@ -18,7 +18,7 @@ export const AddWorkspace = ({
|
|||||||
{environment.isDesktop ? (
|
{environment.isDesktop ? (
|
||||||
<MenuItem
|
<MenuItem
|
||||||
block={true}
|
block={true}
|
||||||
preFix={<ImportIcon />}
|
prefixIcon={<ImportIcon />}
|
||||||
onClick={onAddWorkspace}
|
onClick={onAddWorkspace}
|
||||||
data-testid="add-workspace"
|
data-testid="add-workspace"
|
||||||
className={styles.ItemContainer}
|
className={styles.ItemContainer}
|
||||||
@@ -30,7 +30,7 @@ export const AddWorkspace = ({
|
|||||||
) : null}
|
) : null}
|
||||||
<MenuItem
|
<MenuItem
|
||||||
block={true}
|
block={true}
|
||||||
preFix={<PlusIcon />}
|
prefixIcon={<PlusIcon />}
|
||||||
onClick={onNewWorkspace}
|
onClick={onNewWorkspace}
|
||||||
data-testid="new-workspace"
|
data-testid="new-workspace"
|
||||||
className={styles.ItemContainer}
|
className={styles.ItemContainer}
|
||||||
|
|||||||
@@ -4,7 +4,6 @@ import {
|
|||||||
ErrorMessage,
|
ErrorMessage,
|
||||||
IconButton,
|
IconButton,
|
||||||
Menu,
|
Menu,
|
||||||
MenuIcon,
|
|
||||||
MenuItem,
|
MenuItem,
|
||||||
type MenuProps,
|
type MenuProps,
|
||||||
Skeleton,
|
Skeleton,
|
||||||
@@ -100,22 +99,14 @@ const AccountMenu = () => {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<MenuItem
|
<MenuItem
|
||||||
preFix={
|
prefixIcon={<AccountIcon />}
|
||||||
<MenuIcon>
|
|
||||||
<AccountIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
data-testid="workspace-modal-account-settings-option"
|
data-testid="workspace-modal-account-settings-option"
|
||||||
onClick={onOpenAccountSetting}
|
onClick={onOpenAccountSetting}
|
||||||
>
|
>
|
||||||
{t['com.affine.workspace.cloud.account.settings']()}
|
{t['com.affine.workspace.cloud.account.settings']()}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
<MenuItem
|
<MenuItem
|
||||||
preFix={
|
prefixIcon={<SignOutIcon />}
|
||||||
<MenuIcon>
|
|
||||||
<SignOutIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
data-testid="workspace-modal-sign-out-option"
|
data-testid="workspace-modal-sign-out-option"
|
||||||
onClick={onOpenSignOutModal}
|
onClick={onOpenSignOutModal}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -2,7 +2,6 @@ import {
|
|||||||
AnimatedCollectionsIcon,
|
AnimatedCollectionsIcon,
|
||||||
type DropTargetDropEvent,
|
type DropTargetDropEvent,
|
||||||
type DropTargetOptions,
|
type DropTargetOptions,
|
||||||
MenuIcon,
|
|
||||||
MenuItem,
|
MenuItem,
|
||||||
toast,
|
toast,
|
||||||
} from '@affine/component';
|
} from '@affine/component';
|
||||||
@@ -320,11 +319,7 @@ const ExplorerCollectionNodeChildren = ({
|
|||||||
index: 99,
|
index: 99,
|
||||||
view: (
|
view: (
|
||||||
<MenuItem
|
<MenuItem
|
||||||
preFix={
|
prefixIcon={<FilterMinusIcon />}
|
||||||
<MenuIcon>
|
|
||||||
<FilterMinusIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
onClick={() => handleRemoveFromAllowList(doc.id)}
|
onClick={() => handleRemoveFromAllowList(doc.id)}
|
||||||
>
|
>
|
||||||
{t['Remove special filter']()}
|
{t['Remove special filter']()}
|
||||||
|
|||||||
@@ -1,10 +1,10 @@
|
|||||||
import {
|
import {
|
||||||
IconButton,
|
IconButton,
|
||||||
MenuIcon,
|
|
||||||
MenuItem,
|
MenuItem,
|
||||||
MenuSeparator,
|
MenuSeparator,
|
||||||
useConfirmModal,
|
useConfirmModal,
|
||||||
} from '@affine/component';
|
} from '@affine/component';
|
||||||
|
import { IsFavoriteIcon } from '@affine/core/components/pure/icons';
|
||||||
import { useDeleteCollectionInfo } from '@affine/core/hooks/affine/use-delete-collection-info';
|
import { useDeleteCollectionInfo } from '@affine/core/hooks/affine/use-delete-collection-info';
|
||||||
import { track } from '@affine/core/mixpanel';
|
import { track } from '@affine/core/mixpanel';
|
||||||
import { CollectionService } from '@affine/core/modules/collection';
|
import { CollectionService } from '@affine/core/modules/collection';
|
||||||
@@ -13,8 +13,6 @@ import { WorkbenchService } from '@affine/core/modules/workbench';
|
|||||||
import { useI18n } from '@affine/i18n';
|
import { useI18n } from '@affine/i18n';
|
||||||
import {
|
import {
|
||||||
DeleteIcon,
|
DeleteIcon,
|
||||||
FavoritedIcon,
|
|
||||||
FavoriteIcon,
|
|
||||||
FilterIcon,
|
FilterIcon,
|
||||||
OpenInNewIcon,
|
OpenInNewIcon,
|
||||||
PlusIcon,
|
PlusIcon,
|
||||||
@@ -143,14 +141,7 @@ export const useExplorerCollectionNodeOperations = (
|
|||||||
{
|
{
|
||||||
index: 99,
|
index: 99,
|
||||||
view: (
|
view: (
|
||||||
<MenuItem
|
<MenuItem prefixIcon={<FilterIcon />} onClick={handleShowEdit}>
|
||||||
preFix={
|
|
||||||
<MenuIcon>
|
|
||||||
<FilterIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
onClick={handleShowEdit}
|
|
||||||
>
|
|
||||||
{t['com.affine.collection.menu.edit']()}
|
{t['com.affine.collection.menu.edit']()}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
),
|
),
|
||||||
@@ -159,11 +150,7 @@ export const useExplorerCollectionNodeOperations = (
|
|||||||
index: 99,
|
index: 99,
|
||||||
view: (
|
view: (
|
||||||
<MenuItem
|
<MenuItem
|
||||||
preFix={
|
prefixIcon={<PlusIcon />}
|
||||||
<MenuIcon>
|
|
||||||
<PlusIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
onClick={handleAddDocToCollection}
|
onClick={handleAddDocToCollection}
|
||||||
>
|
>
|
||||||
{t['New Page']()}
|
{t['New Page']()}
|
||||||
@@ -174,17 +161,7 @@ export const useExplorerCollectionNodeOperations = (
|
|||||||
index: 99,
|
index: 99,
|
||||||
view: (
|
view: (
|
||||||
<MenuItem
|
<MenuItem
|
||||||
preFix={
|
prefixIcon={<IsFavoriteIcon favorite={favorite} />}
|
||||||
<MenuIcon>
|
|
||||||
{favorite ? (
|
|
||||||
<FavoritedIcon
|
|
||||||
style={{ color: 'var(--affine-primary-color)' }}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<FavoriteIcon />
|
|
||||||
)}
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
onClick={handleToggleFavoriteCollection}
|
onClick={handleToggleFavoriteCollection}
|
||||||
>
|
>
|
||||||
{favorite
|
{favorite
|
||||||
@@ -196,14 +173,7 @@ export const useExplorerCollectionNodeOperations = (
|
|||||||
{
|
{
|
||||||
index: 99,
|
index: 99,
|
||||||
view: (
|
view: (
|
||||||
<MenuItem
|
<MenuItem prefixIcon={<OpenInNewIcon />} onClick={handleOpenInNewTab}>
|
||||||
preFix={
|
|
||||||
<MenuIcon>
|
|
||||||
<OpenInNewIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
onClick={handleOpenInNewTab}
|
|
||||||
>
|
|
||||||
{t['com.affine.workbench.tab.page-menu-open']()}
|
{t['com.affine.workbench.tab.page-menu-open']()}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
),
|
),
|
||||||
@@ -214,11 +184,7 @@ export const useExplorerCollectionNodeOperations = (
|
|||||||
index: 99,
|
index: 99,
|
||||||
view: (
|
view: (
|
||||||
<MenuItem
|
<MenuItem
|
||||||
preFix={
|
prefixIcon={<SplitViewIcon />}
|
||||||
<MenuIcon>
|
|
||||||
<SplitViewIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
onClick={handleOpenInSplitView}
|
onClick={handleOpenInSplitView}
|
||||||
>
|
>
|
||||||
{t['com.affine.workbench.split-view.page-menu-open']()}
|
{t['com.affine.workbench.split-view.page-menu-open']()}
|
||||||
@@ -236,11 +202,7 @@ export const useExplorerCollectionNodeOperations = (
|
|||||||
view: (
|
view: (
|
||||||
<MenuItem
|
<MenuItem
|
||||||
type={'danger'}
|
type={'danger'}
|
||||||
preFix={
|
prefixIcon={<DeleteIcon />}
|
||||||
<MenuIcon>
|
|
||||||
<DeleteIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
onClick={handleDeleteCollection}
|
onClick={handleDeleteCollection}
|
||||||
>
|
>
|
||||||
{t['Delete']()}
|
{t['Delete']()}
|
||||||
|
|||||||
@@ -1,11 +1,11 @@
|
|||||||
import {
|
import {
|
||||||
IconButton,
|
IconButton,
|
||||||
MenuIcon,
|
|
||||||
MenuItem,
|
MenuItem,
|
||||||
MenuSeparator,
|
MenuSeparator,
|
||||||
toast,
|
toast,
|
||||||
useConfirmModal,
|
useConfirmModal,
|
||||||
} from '@affine/component';
|
} from '@affine/component';
|
||||||
|
import { IsFavoriteIcon } from '@affine/core/components/pure/icons';
|
||||||
import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
|
import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
|
||||||
import { track } from '@affine/core/mixpanel';
|
import { track } from '@affine/core/mixpanel';
|
||||||
import { CompatibleFavoriteItemsAdapter } from '@affine/core/modules/properties';
|
import { CompatibleFavoriteItemsAdapter } from '@affine/core/modules/properties';
|
||||||
@@ -13,8 +13,6 @@ import { WorkbenchService } from '@affine/core/modules/workbench';
|
|||||||
import { useI18n } from '@affine/i18n';
|
import { useI18n } from '@affine/i18n';
|
||||||
import {
|
import {
|
||||||
DeleteIcon,
|
DeleteIcon,
|
||||||
FavoritedIcon,
|
|
||||||
FavoriteIcon,
|
|
||||||
InformationIcon,
|
InformationIcon,
|
||||||
LinkedPageIcon,
|
LinkedPageIcon,
|
||||||
OpenInNewIcon,
|
OpenInNewIcon,
|
||||||
@@ -147,11 +145,7 @@ export const useExplorerDocNodeOperations = (
|
|||||||
index: 50,
|
index: 50,
|
||||||
view: (
|
view: (
|
||||||
<MenuItem
|
<MenuItem
|
||||||
preFix={
|
prefixIcon={<InformationIcon />}
|
||||||
<MenuIcon>
|
|
||||||
<InformationIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
onClick={handleOpenInfoModal}
|
onClick={handleOpenInfoModal}
|
||||||
>
|
>
|
||||||
{t['com.affine.page-properties.page-info.view']()}
|
{t['com.affine.page-properties.page-info.view']()}
|
||||||
@@ -164,11 +158,7 @@ export const useExplorerDocNodeOperations = (
|
|||||||
index: 99,
|
index: 99,
|
||||||
view: (
|
view: (
|
||||||
<MenuItem
|
<MenuItem
|
||||||
preFix={
|
prefixIcon={<LinkedPageIcon />}
|
||||||
<MenuIcon>
|
|
||||||
<LinkedPageIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
onClick={handleAddLinkedPage}
|
onClick={handleAddLinkedPage}
|
||||||
>
|
>
|
||||||
{t['com.affine.page-operation.add-linked-page']()}
|
{t['com.affine.page-operation.add-linked-page']()}
|
||||||
@@ -178,14 +168,7 @@ export const useExplorerDocNodeOperations = (
|
|||||||
{
|
{
|
||||||
index: 99,
|
index: 99,
|
||||||
view: (
|
view: (
|
||||||
<MenuItem
|
<MenuItem prefixIcon={<OpenInNewIcon />} onClick={handleOpenInNewTab}>
|
||||||
preFix={
|
|
||||||
<MenuIcon>
|
|
||||||
<OpenInNewIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
onClick={handleOpenInNewTab}
|
|
||||||
>
|
|
||||||
{t['com.affine.workbench.tab.page-menu-open']()}
|
{t['com.affine.workbench.tab.page-menu-open']()}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
),
|
),
|
||||||
@@ -196,11 +179,7 @@ export const useExplorerDocNodeOperations = (
|
|||||||
index: 100,
|
index: 100,
|
||||||
view: (
|
view: (
|
||||||
<MenuItem
|
<MenuItem
|
||||||
preFix={
|
prefixIcon={<SplitViewIcon />}
|
||||||
<MenuIcon>
|
|
||||||
<SplitViewIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
onClick={handleOpenInSplitView}
|
onClick={handleOpenInSplitView}
|
||||||
>
|
>
|
||||||
{t['com.affine.workbench.split-view.page-menu-open']()}
|
{t['com.affine.workbench.split-view.page-menu-open']()}
|
||||||
@@ -213,17 +192,7 @@ export const useExplorerDocNodeOperations = (
|
|||||||
index: 199,
|
index: 199,
|
||||||
view: (
|
view: (
|
||||||
<MenuItem
|
<MenuItem
|
||||||
preFix={
|
prefixIcon={<IsFavoriteIcon favorite={favorite} />}
|
||||||
<MenuIcon>
|
|
||||||
{favorite ? (
|
|
||||||
<FavoritedIcon
|
|
||||||
style={{ color: 'var(--affine-primary-color)' }}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<FavoriteIcon />
|
|
||||||
)}
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
onClick={handleToggleFavoriteDoc}
|
onClick={handleToggleFavoriteDoc}
|
||||||
>
|
>
|
||||||
{favorite
|
{favorite
|
||||||
@@ -241,11 +210,7 @@ export const useExplorerDocNodeOperations = (
|
|||||||
view: (
|
view: (
|
||||||
<MenuItem
|
<MenuItem
|
||||||
type={'danger'}
|
type={'danger'}
|
||||||
preFix={
|
prefixIcon={<DeleteIcon />}
|
||||||
<MenuIcon>
|
|
||||||
<DeleteIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
onClick={handleMoveToTrash}
|
onClick={handleMoveToTrash}
|
||||||
>
|
>
|
||||||
{t['com.affine.moveToTrash.title']()}
|
{t['com.affine.moveToTrash.title']()}
|
||||||
|
|||||||
@@ -4,7 +4,6 @@ import {
|
|||||||
type DropTargetDropEvent,
|
type DropTargetDropEvent,
|
||||||
type DropTargetOptions,
|
type DropTargetOptions,
|
||||||
IconButton,
|
IconButton,
|
||||||
MenuIcon,
|
|
||||||
MenuItem,
|
MenuItem,
|
||||||
MenuSeparator,
|
MenuSeparator,
|
||||||
MenuSub,
|
MenuSub,
|
||||||
@@ -632,14 +631,7 @@ export const ExplorerFolderNodeFolder = ({
|
|||||||
{
|
{
|
||||||
index: 100,
|
index: 100,
|
||||||
view: (
|
view: (
|
||||||
<MenuItem
|
<MenuItem prefixIcon={<FolderIcon />} onClick={handleCreateSubfolder}>
|
||||||
preFix={
|
|
||||||
<MenuIcon>
|
|
||||||
<FolderIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
onClick={handleCreateSubfolder}
|
|
||||||
>
|
|
||||||
{t['com.affine.rootAppSidebar.organize.folder.create-subfolder']()}
|
{t['com.affine.rootAppSidebar.organize.folder.create-subfolder']()}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
),
|
),
|
||||||
@@ -648,11 +640,7 @@ export const ExplorerFolderNodeFolder = ({
|
|||||||
index: 101,
|
index: 101,
|
||||||
view: (
|
view: (
|
||||||
<MenuItem
|
<MenuItem
|
||||||
preFix={
|
prefixIcon={<PageIcon />}
|
||||||
<MenuIcon>
|
|
||||||
<PageIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
onClick={() => handleAddToFolder('doc')}
|
onClick={() => handleAddToFolder('doc')}
|
||||||
>
|
>
|
||||||
{t['com.affine.rootAppSidebar.organize.folder.add-docs']()}
|
{t['com.affine.rootAppSidebar.organize.folder.add-docs']()}
|
||||||
@@ -664,31 +652,19 @@ export const ExplorerFolderNodeFolder = ({
|
|||||||
view: (
|
view: (
|
||||||
<MenuSub
|
<MenuSub
|
||||||
triggerOptions={{
|
triggerOptions={{
|
||||||
preFix: (
|
prefixIcon: <PlusThickIcon />,
|
||||||
<MenuIcon>
|
|
||||||
<PlusThickIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
),
|
|
||||||
}}
|
}}
|
||||||
items={
|
items={
|
||||||
<>
|
<>
|
||||||
<MenuItem
|
<MenuItem
|
||||||
onClick={() => handleAddToFolder('tag')}
|
onClick={() => handleAddToFolder('tag')}
|
||||||
preFix={
|
prefixIcon={<TagsIcon />}
|
||||||
<MenuIcon>
|
|
||||||
<TagsIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
{t['com.affine.rootAppSidebar.organize.folder.add-tags']()}
|
{t['com.affine.rootAppSidebar.organize.folder.add-tags']()}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
<MenuItem
|
<MenuItem
|
||||||
onClick={() => handleAddToFolder('collection')}
|
onClick={() => handleAddToFolder('collection')}
|
||||||
preFix={
|
prefixIcon={<AnimatedCollectionsIcon closed={false} />}
|
||||||
<MenuIcon>
|
|
||||||
<AnimatedCollectionsIcon closed={false} />
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
{t[
|
{t[
|
||||||
'com.affine.rootAppSidebar.organize.folder.add-collections'
|
'com.affine.rootAppSidebar.organize.folder.add-collections'
|
||||||
@@ -716,11 +692,7 @@ export const ExplorerFolderNodeFolder = ({
|
|||||||
view: (
|
view: (
|
||||||
<MenuItem
|
<MenuItem
|
||||||
type={'danger'}
|
type={'danger'}
|
||||||
preFix={
|
prefixIcon={<DeleteIcon />}
|
||||||
<MenuIcon>
|
|
||||||
<DeleteIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
onClick={handleDelete}
|
onClick={handleDelete}
|
||||||
>
|
>
|
||||||
{t['com.affine.rootAppSidebar.organize.delete']()}
|
{t['com.affine.rootAppSidebar.organize.delete']()}
|
||||||
@@ -754,11 +726,7 @@ export const ExplorerFolderNodeFolder = ({
|
|||||||
view: (
|
view: (
|
||||||
<MenuItem
|
<MenuItem
|
||||||
type={'danger'}
|
type={'danger'}
|
||||||
preFix={
|
prefixIcon={<RemoveFolderIcon />}
|
||||||
<MenuIcon>
|
|
||||||
<RemoveFolderIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
data-event-props="$.navigationPanel.organize.deleteOrganizeItem"
|
data-event-props="$.navigationPanel.organize.deleteOrganizeItem"
|
||||||
data-event-args-type={node.type$.value}
|
data-event-args-type={node.type$.value}
|
||||||
onClick={() => node.delete()}
|
onClick={() => node.delete()}
|
||||||
|
|||||||
@@ -1,9 +1,8 @@
|
|||||||
import { MenuIcon, MenuItem } from '@affine/component';
|
import { MenuItem } from '@affine/component';
|
||||||
|
import { IsFavoriteIcon } from '@affine/core/components/pure/icons';
|
||||||
import { CompatibleFavoriteItemsAdapter } from '@affine/core/modules/properties';
|
import { CompatibleFavoriteItemsAdapter } from '@affine/core/modules/properties';
|
||||||
import { useI18n } from '@affine/i18n';
|
import { useI18n } from '@affine/i18n';
|
||||||
import { FavoritedIcon, FavoriteIcon } from '@blocksuite/icons/rc';
|
|
||||||
import { useLiveData, useService } from '@toeverything/infra';
|
import { useLiveData, useService } from '@toeverything/infra';
|
||||||
import { cssVar } from '@toeverything/theme';
|
|
||||||
import { useMemo } from 'react';
|
import { useMemo } from 'react';
|
||||||
|
|
||||||
export const FavoriteFolderOperation = ({ id }: { id: string }) => {
|
export const FavoriteFolderOperation = ({ id }: { id: string }) => {
|
||||||
@@ -20,15 +19,7 @@ export const FavoriteFolderOperation = ({ id }: { id: string }) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<MenuItem
|
<MenuItem
|
||||||
preFix={
|
prefixIcon={<IsFavoriteIcon favorite={favorite} />}
|
||||||
<MenuIcon>
|
|
||||||
{favorite ? (
|
|
||||||
<FavoritedIcon style={{ color: cssVar('primaryColor') }} />
|
|
||||||
) : (
|
|
||||||
<FavoriteIcon />
|
|
||||||
)}
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
onClick={() => compatibleFavoriteItemsAdapter.toggle(id, 'folder')}
|
onClick={() => compatibleFavoriteItemsAdapter.toggle(id, 'folder')}
|
||||||
>
|
>
|
||||||
{favorite
|
{favorite
|
||||||
|
|||||||
@@ -1,10 +1,5 @@
|
|||||||
import {
|
import { IconButton, MenuItem, MenuSeparator, toast } from '@affine/component';
|
||||||
IconButton,
|
import { IsFavoriteIcon } from '@affine/core/components/pure/icons';
|
||||||
MenuIcon,
|
|
||||||
MenuItem,
|
|
||||||
MenuSeparator,
|
|
||||||
toast,
|
|
||||||
} from '@affine/component';
|
|
||||||
import { track } from '@affine/core/mixpanel';
|
import { track } from '@affine/core/mixpanel';
|
||||||
import { FavoriteService } from '@affine/core/modules/favorite';
|
import { FavoriteService } from '@affine/core/modules/favorite';
|
||||||
import { TagService } from '@affine/core/modules/tag';
|
import { TagService } from '@affine/core/modules/tag';
|
||||||
@@ -12,8 +7,6 @@ import { WorkbenchService } from '@affine/core/modules/workbench';
|
|||||||
import { useI18n } from '@affine/i18n';
|
import { useI18n } from '@affine/i18n';
|
||||||
import {
|
import {
|
||||||
DeleteIcon,
|
DeleteIcon,
|
||||||
FavoritedIcon,
|
|
||||||
FavoriteIcon,
|
|
||||||
OpenInNewIcon,
|
OpenInNewIcon,
|
||||||
PlusIcon,
|
PlusIcon,
|
||||||
SplitViewIcon,
|
SplitViewIcon,
|
||||||
@@ -114,14 +107,7 @@ export const useExplorerTagNodeOperations = (
|
|||||||
{
|
{
|
||||||
index: 50,
|
index: 50,
|
||||||
view: (
|
view: (
|
||||||
<MenuItem
|
<MenuItem prefixIcon={<OpenInNewIcon />} onClick={handleOpenInNewTab}>
|
||||||
preFix={
|
|
||||||
<MenuIcon>
|
|
||||||
<OpenInNewIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
onClick={handleOpenInNewTab}
|
|
||||||
>
|
|
||||||
{t['com.affine.workbench.tab.page-menu-open']()}
|
{t['com.affine.workbench.tab.page-menu-open']()}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
),
|
),
|
||||||
@@ -132,11 +118,7 @@ export const useExplorerTagNodeOperations = (
|
|||||||
index: 100,
|
index: 100,
|
||||||
view: (
|
view: (
|
||||||
<MenuItem
|
<MenuItem
|
||||||
preFix={
|
prefixIcon={<SplitViewIcon />}
|
||||||
<MenuIcon>
|
|
||||||
<SplitViewIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
onClick={handleOpenInSplitView}
|
onClick={handleOpenInSplitView}
|
||||||
>
|
>
|
||||||
{t['com.affine.workbench.split-view.page-menu-open']()}
|
{t['com.affine.workbench.split-view.page-menu-open']()}
|
||||||
@@ -149,17 +131,7 @@ export const useExplorerTagNodeOperations = (
|
|||||||
index: 199,
|
index: 199,
|
||||||
view: (
|
view: (
|
||||||
<MenuItem
|
<MenuItem
|
||||||
preFix={
|
prefixIcon={<IsFavoriteIcon favorite={!!favorite} />}
|
||||||
<MenuIcon>
|
|
||||||
{favorite ? (
|
|
||||||
<FavoritedIcon
|
|
||||||
style={{ color: 'var(--affine-primary-color)' }}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<FavoriteIcon />
|
|
||||||
)}
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
onClick={handleToggleFavoriteTag}
|
onClick={handleToggleFavoriteTag}
|
||||||
>
|
>
|
||||||
{favorite
|
{favorite
|
||||||
@@ -177,11 +149,7 @@ export const useExplorerTagNodeOperations = (
|
|||||||
view: (
|
view: (
|
||||||
<MenuItem
|
<MenuItem
|
||||||
type={'danger'}
|
type={'danger'}
|
||||||
preFix={
|
prefixIcon={<DeleteIcon />}
|
||||||
<MenuIcon>
|
|
||||||
<DeleteIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
onClick={handleMoveToTrash}
|
onClick={handleMoveToTrash}
|
||||||
>
|
>
|
||||||
{t['Delete']()}
|
{t['Delete']()}
|
||||||
|
|||||||
@@ -5,7 +5,6 @@ import {
|
|||||||
type DropTargetTreeInstruction,
|
type DropTargetTreeInstruction,
|
||||||
IconButton,
|
IconButton,
|
||||||
Menu,
|
Menu,
|
||||||
MenuIcon,
|
|
||||||
MenuItem,
|
MenuItem,
|
||||||
useDraggable,
|
useDraggable,
|
||||||
useDropTarget,
|
useDropTarget,
|
||||||
@@ -246,11 +245,7 @@ export const ExplorerTreeNode = ({
|
|||||||
<MenuItem
|
<MenuItem
|
||||||
key={'explorer-tree-rename'}
|
key={'explorer-tree-rename'}
|
||||||
type={'default'}
|
type={'default'}
|
||||||
preFix={
|
prefixIcon={<EditIcon />}
|
||||||
<MenuIcon>
|
|
||||||
<EditIcon />
|
|
||||||
</MenuIcon>
|
|
||||||
}
|
|
||||||
onClick={() => setRenaming(true)}
|
onClick={() => setRenaming(true)}
|
||||||
>
|
>
|
||||||
{t['com.affine.menu.rename']()}
|
{t['com.affine.menu.rename']()}
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { MenuIcon, MenuItem } from '@affine/component';
|
import { MenuItem } from '@affine/component';
|
||||||
import { useI18n } from '@affine/i18n';
|
import { useI18n } from '@affine/i18n';
|
||||||
import {
|
import {
|
||||||
ExpandCloseIcon,
|
ExpandCloseIcon,
|
||||||
@@ -137,30 +137,21 @@ const SplitViewMenu = ({ view }: { view: View }) => {
|
|||||||
|
|
||||||
const CloseItem =
|
const CloseItem =
|
||||||
views.length > 1 ? (
|
views.length > 1 ? (
|
||||||
<MenuItem
|
<MenuItem prefixIcon={<ExpandCloseIcon />} onClick={handleClose}>
|
||||||
preFix={<MenuIcon icon={<ExpandCloseIcon />} />}
|
|
||||||
onClick={handleClose}
|
|
||||||
>
|
|
||||||
{t['com.affine.workbench.split-view-menu.close']()}
|
{t['com.affine.workbench.split-view-menu.close']()}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
) : null;
|
) : null;
|
||||||
|
|
||||||
const MoveLeftItem =
|
const MoveLeftItem =
|
||||||
viewIndex > 0 && views.length > 1 ? (
|
viewIndex > 0 && views.length > 1 ? (
|
||||||
<MenuItem
|
<MenuItem onClick={handleMoveLeft} prefixIcon={<MoveToLeftDuotoneIcon />}>
|
||||||
onClick={handleMoveLeft}
|
|
||||||
preFix={<MenuIcon icon={<MoveToLeftDuotoneIcon />} />}
|
|
||||||
>
|
|
||||||
{t['com.affine.workbench.split-view-menu.move-left']()}
|
{t['com.affine.workbench.split-view-menu.move-left']()}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
) : null;
|
) : null;
|
||||||
|
|
||||||
const FullScreenItem =
|
const FullScreenItem =
|
||||||
views.length > 1 ? (
|
views.length > 1 ? (
|
||||||
<MenuItem
|
<MenuItem onClick={handleCloseOthers} prefixIcon={<SoloViewIcon />}>
|
||||||
onClick={handleCloseOthers}
|
|
||||||
preFix={<MenuIcon icon={<SoloViewIcon />} />}
|
|
||||||
>
|
|
||||||
{t['com.affine.workbench.split-view-menu.keep-this-one']()}
|
{t['com.affine.workbench.split-view-menu.keep-this-one']()}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
) : null;
|
) : null;
|
||||||
@@ -169,7 +160,7 @@ const SplitViewMenu = ({ view }: { view: View }) => {
|
|||||||
viewIndex < views.length - 1 ? (
|
viewIndex < views.length - 1 ? (
|
||||||
<MenuItem
|
<MenuItem
|
||||||
onClick={handleMoveRight}
|
onClick={handleMoveRight}
|
||||||
preFix={<MenuIcon icon={<MoveToRightDuotoneIcon />} />}
|
prefixIcon={<MoveToRightDuotoneIcon />}
|
||||||
>
|
>
|
||||||
{t['com.affine.workbench.split-view-menu.move-right']()}
|
{t['com.affine.workbench.split-view-menu.move-right']()}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
|
|||||||
@@ -38,10 +38,15 @@ export interface Scalars {
|
|||||||
Upload: { input: File; output: File };
|
Upload: { input: File; output: File };
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface AlreadyInSpaceDataType {
|
||||||
|
__typename?: 'AlreadyInSpaceDataType';
|
||||||
|
spaceId: Scalars['String']['output'];
|
||||||
|
}
|
||||||
|
|
||||||
export interface BlobNotFoundDataType {
|
export interface BlobNotFoundDataType {
|
||||||
__typename?: 'BlobNotFoundDataType';
|
__typename?: 'BlobNotFoundDataType';
|
||||||
blobId: Scalars['String']['output'];
|
blobId: Scalars['String']['output'];
|
||||||
workspaceId: Scalars['String']['output'];
|
spaceId: Scalars['String']['output'];
|
||||||
}
|
}
|
||||||
|
|
||||||
export enum ChatHistoryOrder {
|
export enum ChatHistoryOrder {
|
||||||
@@ -221,14 +226,14 @@ export interface DeleteSessionInput {
|
|||||||
export interface DocAccessDeniedDataType {
|
export interface DocAccessDeniedDataType {
|
||||||
__typename?: 'DocAccessDeniedDataType';
|
__typename?: 'DocAccessDeniedDataType';
|
||||||
docId: Scalars['String']['output'];
|
docId: Scalars['String']['output'];
|
||||||
workspaceId: Scalars['String']['output'];
|
spaceId: Scalars['String']['output'];
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface DocHistoryNotFoundDataType {
|
export interface DocHistoryNotFoundDataType {
|
||||||
__typename?: 'DocHistoryNotFoundDataType';
|
__typename?: 'DocHistoryNotFoundDataType';
|
||||||
docId: Scalars['String']['output'];
|
docId: Scalars['String']['output'];
|
||||||
|
spaceId: Scalars['String']['output'];
|
||||||
timestamp: Scalars['Int']['output'];
|
timestamp: Scalars['Int']['output'];
|
||||||
workspaceId: Scalars['String']['output'];
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface DocHistoryType {
|
export interface DocHistoryType {
|
||||||
@@ -241,10 +246,11 @@ export interface DocHistoryType {
|
|||||||
export interface DocNotFoundDataType {
|
export interface DocNotFoundDataType {
|
||||||
__typename?: 'DocNotFoundDataType';
|
__typename?: 'DocNotFoundDataType';
|
||||||
docId: Scalars['String']['output'];
|
docId: Scalars['String']['output'];
|
||||||
workspaceId: Scalars['String']['output'];
|
spaceId: Scalars['String']['output'];
|
||||||
}
|
}
|
||||||
|
|
||||||
export type ErrorDataUnion =
|
export type ErrorDataUnion =
|
||||||
|
| AlreadyInSpaceDataType
|
||||||
| BlobNotFoundDataType
|
| BlobNotFoundDataType
|
||||||
| CopilotMessageNotFoundDataType
|
| CopilotMessageNotFoundDataType
|
||||||
| CopilotPromptNotFoundDataType
|
| CopilotPromptNotFoundDataType
|
||||||
@@ -256,27 +262,28 @@ export type ErrorDataUnion =
|
|||||||
| InvalidPasswordLengthDataType
|
| InvalidPasswordLengthDataType
|
||||||
| InvalidRuntimeConfigTypeDataType
|
| InvalidRuntimeConfigTypeDataType
|
||||||
| MissingOauthQueryParameterDataType
|
| MissingOauthQueryParameterDataType
|
||||||
| NotInWorkspaceDataType
|
| NotInSpaceDataType
|
||||||
| RuntimeConfigNotFoundDataType
|
| RuntimeConfigNotFoundDataType
|
||||||
| SameSubscriptionRecurringDataType
|
| SameSubscriptionRecurringDataType
|
||||||
|
| SpaceAccessDeniedDataType
|
||||||
|
| SpaceNotFoundDataType
|
||||||
|
| SpaceOwnerNotFoundDataType
|
||||||
| SubscriptionAlreadyExistsDataType
|
| SubscriptionAlreadyExistsDataType
|
||||||
| SubscriptionNotExistsDataType
|
| SubscriptionNotExistsDataType
|
||||||
| SubscriptionPlanNotFoundDataType
|
| SubscriptionPlanNotFoundDataType
|
||||||
| UnknownOauthProviderDataType
|
| UnknownOauthProviderDataType
|
||||||
| VersionRejectedDataType
|
| VersionRejectedDataType;
|
||||||
| WorkspaceAccessDeniedDataType
|
|
||||||
| WorkspaceNotFoundDataType
|
|
||||||
| WorkspaceOwnerNotFoundDataType;
|
|
||||||
|
|
||||||
export enum ErrorNames {
|
export enum ErrorNames {
|
||||||
ACCESS_DENIED = 'ACCESS_DENIED',
|
ACCESS_DENIED = 'ACCESS_DENIED',
|
||||||
ACTION_FORBIDDEN = 'ACTION_FORBIDDEN',
|
ACTION_FORBIDDEN = 'ACTION_FORBIDDEN',
|
||||||
|
ALREADY_IN_SPACE = 'ALREADY_IN_SPACE',
|
||||||
AUTHENTICATION_REQUIRED = 'AUTHENTICATION_REQUIRED',
|
AUTHENTICATION_REQUIRED = 'AUTHENTICATION_REQUIRED',
|
||||||
BLOB_NOT_FOUND = 'BLOB_NOT_FOUND',
|
BLOB_NOT_FOUND = 'BLOB_NOT_FOUND',
|
||||||
BLOB_QUOTA_EXCEEDED = 'BLOB_QUOTA_EXCEEDED',
|
BLOB_QUOTA_EXCEEDED = 'BLOB_QUOTA_EXCEEDED',
|
||||||
CANNOT_DELETE_ALL_ADMIN_ACCOUNT = 'CANNOT_DELETE_ALL_ADMIN_ACCOUNT',
|
CANNOT_DELETE_ALL_ADMIN_ACCOUNT = 'CANNOT_DELETE_ALL_ADMIN_ACCOUNT',
|
||||||
CANNOT_DELETE_OWN_ACCOUNT = 'CANNOT_DELETE_OWN_ACCOUNT',
|
CANNOT_DELETE_OWN_ACCOUNT = 'CANNOT_DELETE_OWN_ACCOUNT',
|
||||||
CANT_CHANGE_WORKSPACE_OWNER = 'CANT_CHANGE_WORKSPACE_OWNER',
|
CANT_CHANGE_SPACE_OWNER = 'CANT_CHANGE_SPACE_OWNER',
|
||||||
CANT_UPDATE_LIFETIME_SUBSCRIPTION = 'CANT_UPDATE_LIFETIME_SUBSCRIPTION',
|
CANT_UPDATE_LIFETIME_SUBSCRIPTION = 'CANT_UPDATE_LIFETIME_SUBSCRIPTION',
|
||||||
COPILOT_ACTION_TAKEN = 'COPILOT_ACTION_TAKEN',
|
COPILOT_ACTION_TAKEN = 'COPILOT_ACTION_TAKEN',
|
||||||
COPILOT_FAILED_TO_CREATE_MESSAGE = 'COPILOT_FAILED_TO_CREATE_MESSAGE',
|
COPILOT_FAILED_TO_CREATE_MESSAGE = 'COPILOT_FAILED_TO_CREATE_MESSAGE',
|
||||||
@@ -299,6 +306,8 @@ export enum ErrorNames {
|
|||||||
EXPECT_TO_PUBLISH_PAGE = 'EXPECT_TO_PUBLISH_PAGE',
|
EXPECT_TO_PUBLISH_PAGE = 'EXPECT_TO_PUBLISH_PAGE',
|
||||||
EXPECT_TO_REVOKE_PUBLIC_PAGE = 'EXPECT_TO_REVOKE_PUBLIC_PAGE',
|
EXPECT_TO_REVOKE_PUBLIC_PAGE = 'EXPECT_TO_REVOKE_PUBLIC_PAGE',
|
||||||
FAILED_TO_CHECKOUT = 'FAILED_TO_CHECKOUT',
|
FAILED_TO_CHECKOUT = 'FAILED_TO_CHECKOUT',
|
||||||
|
FAILED_TO_SAVE_UPDATES = 'FAILED_TO_SAVE_UPDATES',
|
||||||
|
FAILED_TO_UPSERT_SNAPSHOT = 'FAILED_TO_UPSERT_SNAPSHOT',
|
||||||
INTERNAL_SERVER_ERROR = 'INTERNAL_SERVER_ERROR',
|
INTERNAL_SERVER_ERROR = 'INTERNAL_SERVER_ERROR',
|
||||||
INVALID_EMAIL = 'INVALID_EMAIL',
|
INVALID_EMAIL = 'INVALID_EMAIL',
|
||||||
INVALID_EMAIL_TOKEN = 'INVALID_EMAIL_TOKEN',
|
INVALID_EMAIL_TOKEN = 'INVALID_EMAIL_TOKEN',
|
||||||
@@ -311,7 +320,7 @@ export enum ErrorNames {
|
|||||||
MEMBER_QUOTA_EXCEEDED = 'MEMBER_QUOTA_EXCEEDED',
|
MEMBER_QUOTA_EXCEEDED = 'MEMBER_QUOTA_EXCEEDED',
|
||||||
MISSING_OAUTH_QUERY_PARAMETER = 'MISSING_OAUTH_QUERY_PARAMETER',
|
MISSING_OAUTH_QUERY_PARAMETER = 'MISSING_OAUTH_QUERY_PARAMETER',
|
||||||
NOT_FOUND = 'NOT_FOUND',
|
NOT_FOUND = 'NOT_FOUND',
|
||||||
NOT_IN_WORKSPACE = 'NOT_IN_WORKSPACE',
|
NOT_IN_SPACE = 'NOT_IN_SPACE',
|
||||||
NO_COPILOT_PROVIDER_AVAILABLE = 'NO_COPILOT_PROVIDER_AVAILABLE',
|
NO_COPILOT_PROVIDER_AVAILABLE = 'NO_COPILOT_PROVIDER_AVAILABLE',
|
||||||
OAUTH_ACCOUNT_ALREADY_CONNECTED = 'OAUTH_ACCOUNT_ALREADY_CONNECTED',
|
OAUTH_ACCOUNT_ALREADY_CONNECTED = 'OAUTH_ACCOUNT_ALREADY_CONNECTED',
|
||||||
OAUTH_STATE_EXPIRED = 'OAUTH_STATE_EXPIRED',
|
OAUTH_STATE_EXPIRED = 'OAUTH_STATE_EXPIRED',
|
||||||
@@ -321,6 +330,9 @@ export enum ErrorNames {
|
|||||||
SAME_EMAIL_PROVIDED = 'SAME_EMAIL_PROVIDED',
|
SAME_EMAIL_PROVIDED = 'SAME_EMAIL_PROVIDED',
|
||||||
SAME_SUBSCRIPTION_RECURRING = 'SAME_SUBSCRIPTION_RECURRING',
|
SAME_SUBSCRIPTION_RECURRING = 'SAME_SUBSCRIPTION_RECURRING',
|
||||||
SIGN_UP_FORBIDDEN = 'SIGN_UP_FORBIDDEN',
|
SIGN_UP_FORBIDDEN = 'SIGN_UP_FORBIDDEN',
|
||||||
|
SPACE_ACCESS_DENIED = 'SPACE_ACCESS_DENIED',
|
||||||
|
SPACE_NOT_FOUND = 'SPACE_NOT_FOUND',
|
||||||
|
SPACE_OWNER_NOT_FOUND = 'SPACE_OWNER_NOT_FOUND',
|
||||||
SUBSCRIPTION_ALREADY_EXISTS = 'SUBSCRIPTION_ALREADY_EXISTS',
|
SUBSCRIPTION_ALREADY_EXISTS = 'SUBSCRIPTION_ALREADY_EXISTS',
|
||||||
SUBSCRIPTION_EXPIRED = 'SUBSCRIPTION_EXPIRED',
|
SUBSCRIPTION_EXPIRED = 'SUBSCRIPTION_EXPIRED',
|
||||||
SUBSCRIPTION_HAS_BEEN_CANCELED = 'SUBSCRIPTION_HAS_BEEN_CANCELED',
|
SUBSCRIPTION_HAS_BEEN_CANCELED = 'SUBSCRIPTION_HAS_BEEN_CANCELED',
|
||||||
@@ -332,9 +344,6 @@ export enum ErrorNames {
|
|||||||
USER_AVATAR_NOT_FOUND = 'USER_AVATAR_NOT_FOUND',
|
USER_AVATAR_NOT_FOUND = 'USER_AVATAR_NOT_FOUND',
|
||||||
USER_NOT_FOUND = 'USER_NOT_FOUND',
|
USER_NOT_FOUND = 'USER_NOT_FOUND',
|
||||||
VERSION_REJECTED = 'VERSION_REJECTED',
|
VERSION_REJECTED = 'VERSION_REJECTED',
|
||||||
WORKSPACE_ACCESS_DENIED = 'WORKSPACE_ACCESS_DENIED',
|
|
||||||
WORKSPACE_NOT_FOUND = 'WORKSPACE_NOT_FOUND',
|
|
||||||
WORKSPACE_OWNER_NOT_FOUND = 'WORKSPACE_OWNER_NOT_FOUND',
|
|
||||||
WRONG_SIGN_IN_CREDENTIALS = 'WRONG_SIGN_IN_CREDENTIALS',
|
WRONG_SIGN_IN_CREDENTIALS = 'WRONG_SIGN_IN_CREDENTIALS',
|
||||||
WRONG_SIGN_IN_METHOD = 'WRONG_SIGN_IN_METHOD',
|
WRONG_SIGN_IN_METHOD = 'WRONG_SIGN_IN_METHOD',
|
||||||
}
|
}
|
||||||
@@ -749,9 +758,9 @@ export interface MutationVerifyEmailArgs {
|
|||||||
token: Scalars['String']['input'];
|
token: Scalars['String']['input'];
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface NotInWorkspaceDataType {
|
export interface NotInSpaceDataType {
|
||||||
__typename?: 'NotInWorkspaceDataType';
|
__typename?: 'NotInSpaceDataType';
|
||||||
workspaceId: Scalars['String']['output'];
|
spaceId: Scalars['String']['output'];
|
||||||
}
|
}
|
||||||
|
|
||||||
export enum OAuthProviderType {
|
export enum OAuthProviderType {
|
||||||
@@ -977,6 +986,21 @@ export interface ServerServiceConfig {
|
|||||||
name: Scalars['String']['output'];
|
name: Scalars['String']['output'];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface SpaceAccessDeniedDataType {
|
||||||
|
__typename?: 'SpaceAccessDeniedDataType';
|
||||||
|
spaceId: Scalars['String']['output'];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SpaceNotFoundDataType {
|
||||||
|
__typename?: 'SpaceNotFoundDataType';
|
||||||
|
spaceId: Scalars['String']['output'];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SpaceOwnerNotFoundDataType {
|
||||||
|
__typename?: 'SpaceOwnerNotFoundDataType';
|
||||||
|
spaceId: Scalars['String']['output'];
|
||||||
|
}
|
||||||
|
|
||||||
export interface SubscriptionAlreadyExistsDataType {
|
export interface SubscriptionAlreadyExistsDataType {
|
||||||
__typename?: 'SubscriptionAlreadyExistsDataType';
|
__typename?: 'SubscriptionAlreadyExistsDataType';
|
||||||
plan: Scalars['String']['output'];
|
plan: Scalars['String']['output'];
|
||||||
@@ -1152,26 +1176,11 @@ export interface VersionRejectedDataType {
|
|||||||
version: Scalars['String']['output'];
|
version: Scalars['String']['output'];
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface WorkspaceAccessDeniedDataType {
|
|
||||||
__typename?: 'WorkspaceAccessDeniedDataType';
|
|
||||||
workspaceId: Scalars['String']['output'];
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface WorkspaceBlobSizes {
|
export interface WorkspaceBlobSizes {
|
||||||
__typename?: 'WorkspaceBlobSizes';
|
__typename?: 'WorkspaceBlobSizes';
|
||||||
size: Scalars['SafeInt']['output'];
|
size: Scalars['SafeInt']['output'];
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface WorkspaceNotFoundDataType {
|
|
||||||
__typename?: 'WorkspaceNotFoundDataType';
|
|
||||||
workspaceId: Scalars['String']['output'];
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface WorkspaceOwnerNotFoundDataType {
|
|
||||||
__typename?: 'WorkspaceOwnerNotFoundDataType';
|
|
||||||
workspaceId: Scalars['String']['output'];
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface WorkspacePage {
|
export interface WorkspacePage {
|
||||||
__typename?: 'WorkspacePage';
|
__typename?: 'WorkspacePage';
|
||||||
id: Scalars['String']['output'];
|
id: Scalars['String']['output'];
|
||||||
|
|||||||
@@ -310,6 +310,7 @@ __metadata:
|
|||||||
"@radix-ui/react-popover": "npm:^1.0.7"
|
"@radix-ui/react-popover": "npm:^1.0.7"
|
||||||
"@radix-ui/react-radio-group": "npm:^1.1.3"
|
"@radix-ui/react-radio-group": "npm:^1.1.3"
|
||||||
"@radix-ui/react-scroll-area": "npm:^1.0.5"
|
"@radix-ui/react-scroll-area": "npm:^1.0.5"
|
||||||
|
"@radix-ui/react-slot": "npm:^1.1.0"
|
||||||
"@radix-ui/react-tabs": "npm:^1.1.0"
|
"@radix-ui/react-tabs": "npm:^1.1.0"
|
||||||
"@radix-ui/react-toast": "npm:^1.1.5"
|
"@radix-ui/react-toast": "npm:^1.1.5"
|
||||||
"@radix-ui/react-toolbar": "npm:^1.0.4"
|
"@radix-ui/react-toolbar": "npm:^1.0.4"
|
||||||
@@ -325,7 +326,7 @@ __metadata:
|
|||||||
"@storybook/react": "npm:^8.2.9"
|
"@storybook/react": "npm:^8.2.9"
|
||||||
"@storybook/react-vite": "npm:^8.2.9"
|
"@storybook/react-vite": "npm:^8.2.9"
|
||||||
"@testing-library/react": "npm:^16.0.0"
|
"@testing-library/react": "npm:^16.0.0"
|
||||||
"@toeverything/theme": "npm:^1.0.4"
|
"@toeverything/theme": "npm:^1.0.5"
|
||||||
"@types/bytes": "npm:^3.1.4"
|
"@types/bytes": "npm:^3.1.4"
|
||||||
"@types/react": "npm:^18.2.75"
|
"@types/react": "npm:^18.2.75"
|
||||||
"@types/react-dnd": "npm:^3.0.2"
|
"@types/react-dnd": "npm:^3.0.2"
|
||||||
@@ -421,7 +422,7 @@ __metadata:
|
|||||||
"@sgtpooki/file-type": "npm:^1.0.1"
|
"@sgtpooki/file-type": "npm:^1.0.1"
|
||||||
"@swc/core": "npm:^1.4.13"
|
"@swc/core": "npm:^1.4.13"
|
||||||
"@testing-library/react": "npm:^16.0.0"
|
"@testing-library/react": "npm:^16.0.0"
|
||||||
"@toeverything/theme": "npm:^1.0.4"
|
"@toeverything/theme": "npm:^1.0.5"
|
||||||
"@types/animejs": "npm:^3.1.12"
|
"@types/animejs": "npm:^3.1.12"
|
||||||
"@types/bytes": "npm:^3.1.4"
|
"@types/bytes": "npm:^3.1.4"
|
||||||
"@types/image-blob-reduce": "npm:^4.1.4"
|
"@types/image-blob-reduce": "npm:^4.1.4"
|
||||||
@@ -13857,7 +13858,7 @@ __metadata:
|
|||||||
languageName: unknown
|
languageName: unknown
|
||||||
linkType: soft
|
linkType: soft
|
||||||
|
|
||||||
"@toeverything/theme@npm:^1.0.2, @toeverything/theme@npm:^1.0.4":
|
"@toeverything/theme@npm:^1.0.2, @toeverything/theme@npm:^1.0.5":
|
||||||
version: 1.0.5
|
version: 1.0.5
|
||||||
resolution: "@toeverything/theme@npm:1.0.5"
|
resolution: "@toeverything/theme@npm:1.0.5"
|
||||||
checksum: 10/26f177192c546b8b6c953a4d75da5520486fa92c872b889052861cd121ef9840b5006e2f1513988117290066812e08015aa99b025d13c01ca50563a9ba26a732
|
checksum: 10/26f177192c546b8b6c953a4d75da5520486fa92c872b889052861cd121ef9840b5006e2f1513988117290066812e08015aa99b025d13c01ca50563a9ba26a732
|
||||||
@@ -14624,12 +14625,12 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"@types/node@npm:*, @types/node@npm:>=10.0.0, @types/node@npm:>=13.7.0, @types/node@npm:>=8.1.0":
|
"@types/node@npm:*, @types/node@npm:>=10.0.0, @types/node@npm:>=13.7.0, @types/node@npm:>=8.1.0, @types/node@npm:^20.12.7, @types/node@npm:^20.14.9, @types/node@npm:^20.9.0":
|
||||||
version: 22.4.1
|
version: 20.16.1
|
||||||
resolution: "@types/node@npm:22.4.1"
|
resolution: "@types/node@npm:20.16.1"
|
||||||
dependencies:
|
dependencies:
|
||||||
undici-types: "npm:~6.19.2"
|
undici-types: "npm:~6.19.2"
|
||||||
checksum: 10/cce9221aea24688bccc3d7c25afd26d95c1bdab73a32ee5c43bb456e070116abf6ba537a9ff19c728bc06fe054e69a2c7ec8e5d818e34a3bf9567eae2cb20059
|
checksum: 10/9bae1dffd2094694147a91ebec51dc89a60a607d16d47a0d770320f1a75d3ba58663708fd93c37954a63acb701a4e0fd64245139c57ae810d3ad524e75481d4e
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
@@ -14642,15 +14643,6 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"@types/node@npm:^20.12.7, @types/node@npm:^20.14.9, @types/node@npm:^20.9.0":
|
|
||||||
version: 20.16.1
|
|
||||||
resolution: "@types/node@npm:20.16.1"
|
|
||||||
dependencies:
|
|
||||||
undici-types: "npm:~6.19.2"
|
|
||||||
checksum: 10/9bae1dffd2094694147a91ebec51dc89a60a607d16d47a0d770320f1a75d3ba58663708fd93c37954a63acb701a4e0fd64245139c57ae810d3ad524e75481d4e
|
|
||||||
languageName: node
|
|
||||||
linkType: hard
|
|
||||||
|
|
||||||
"@types/nodemailer@npm:^6.4.14":
|
"@types/nodemailer@npm:^6.4.14":
|
||||||
version: 6.4.15
|
version: 6.4.15
|
||||||
resolution: "@types/nodemailer@npm:6.4.15"
|
resolution: "@types/nodemailer@npm:6.4.15"
|
||||||
|
|||||||
Reference in New Issue
Block a user