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