Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-21 20:16:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(core): new empty states for doc/collection/tag (#8197)

Browse Source 
AF-1329, AF-1330
This commit is contained in:
CatsJuice
2024-09-11 10:48:52 +00:00
parent f12655655e
commit b7d05d2078
49 changed files with 656 additions and 456 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend/core/src/modules/explorer/views/nodes/collection/index.tsx
+21 -25
View File
@@ -62,8 +62,7 @@ export const ExplorerCollectionNode = ({
const { globalContextService } = useServices({
GlobalContextService,
});
const { open: openEditCollectionModal, node: editModal } =
useEditCollection();
const { open: openEditCollectionModal } = useEditCollection();
const active =
useLiveData(globalContextService.globalContext.collectionId.$) ===
collectionId;
@@ -211,29 +210,26 @@ export const ExplorerCollectionNode = ({
}
return (
<>
<ExplorerTreeNode
icon={CollectionIcon}
name={collection.name || t['Untitled']()}
dndData={dndData}
onDrop={handleDropOnCollection}
renameable
collapsed={collapsed}
setCollapsed={setCollapsed}
to={`/collection/${collection.id}`}
active={active}
canDrop={handleCanDrop}
reorderable={reorderable}
onRename={handleRename}
childrenPlaceholder={<Empty onDrop={handleDropOnPlaceholder} />}
operations={finalOperations}
dropEffect={handleDropEffectOnCollection}
data-testid={`explorer-collection-${collectionId}`}
>
<ExplorerCollectionNodeChildren collection={collection} />
</ExplorerTreeNode>
{editModal}
</>
<ExplorerTreeNode
icon={CollectionIcon}
name={collection.name || t['Untitled']()}
dndData={dndData}
onDrop={handleDropOnCollection}
renameable
collapsed={collapsed}
setCollapsed={setCollapsed}
to={`/collection/${collection.id}`}
active={active}
canDrop={handleCanDrop}
reorderable={reorderable}
onRename={handleRename}
childrenPlaceholder={<Empty onDrop={handleDropOnPlaceholder} />}
operations={finalOperations}
dropEffect={handleDropEffectOnCollection}
data-testid={`explorer-collection-${collectionId}`}
>
<ExplorerCollectionNodeChildren collection={collection} />
</ExplorerTreeNode>
);
};
packages/frontend/core/src/modules/explorer/views/sections/collections/index.tsx
+32 -35
View File
@@ -25,7 +25,7 @@ export const ExplorerCollections = () => {
});
const explorerSection = explorerService.sections.collections;
const collections = useLiveData(collectionService.collections$);
const { node, open: openCreateCollectionModel } = useEditCollectionName({
const { open: openCreateCollectionModel } = useEditCollectionName({
title: t['com.affine.editCollection.createCollection'](),
showTips: true,
});
@@ -52,40 +52,37 @@ export const ExplorerCollections = () => {
]);
return (
<>
<CollapsibleSection
name="collections"
testId="explorer-collections"
title={t['com.affine.rootAppSidebar.collections']()}
actions={
<IconButton
data-testid="explorer-bar-add-collection-button"
onClick={handleCreateCollection}
size="16"
tooltip={t[
'com.affine.rootAppSidebar.explorer.collection-section-add-tooltip'
]()}
>
<PlusIcon />
</IconButton>
}
>
<ExplorerTreeRoot
placeholder={<RootEmpty onClickCreate={handleCreateCollection} />}
<CollapsibleSection
name="collections"
testId="explorer-collections"
title={t['com.affine.rootAppSidebar.collections']()}
actions={
<IconButton
data-testid="explorer-bar-add-collection-button"
onClick={handleCreateCollection}
size="16"
tooltip={t[
'com.affine.rootAppSidebar.explorer.collection-section-add-tooltip'
]()}
>
{collections.map(collection => (
<ExplorerCollectionNode
key={collection.id}
collectionId={collection.id}
reorderable={false}
location={{
at: 'explorer:collection:list',
}}
/>
))}
</ExplorerTreeRoot>
</CollapsibleSection>
{node}
</>
<PlusIcon />
</IconButton>
}
>
<ExplorerTreeRoot
placeholder={<RootEmpty onClickCreate={handleCreateCollection} />}
>
{collections.map(collection => (
<ExplorerCollectionNode
key={collection.id}
collectionId={collection.id}
reorderable={false}
location={{
at: 'explorer:collection:list',
}}
/>
))}
</ExplorerTreeRoot>
</CollapsibleSection>
);
};