Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-17 01:56:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(component): mobile menu support (#7892)

Browse Source
This commit is contained in:
Cats Juice
2024-08-21 17:05:05 +08:00
committed by GitHub
parent 182b2fd62d
commit 23b0db36b9
57 changed files with 988 additions and 1482 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend/core/src/modules/explorer/views/nodes/collection/index.tsx
+1 -6
View File
@@ -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']()}
packages/frontend/core/src/modules/explorer/views/nodes/collection/operations.tsx
+7 -45
View File
@@ -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']()}
packages/frontend/core/src/modules/explorer/views/nodes/doc/operations.tsx
+7 -42
View File
@@ -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']()}
packages/frontend/core/src/modules/explorer/views/nodes/folder/index.tsx
+7 -39
View File
@@ -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()}
packages/frontend/core/src/modules/explorer/views/nodes/folder/operations.tsx
+3 -12
View File
@@ -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
packages/frontend/core/src/modules/explorer/views/nodes/tag/operations.tsx
+6 -38
View File
@@ -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']()}
packages/frontend/core/src/modules/explorer/views/tree/node.tsx
+1 -6
View File
@@ -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']()}
packages/frontend/core/src/modules/workbench/view/split-view/panel.tsx
+5 -14
View File
@@ -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>