Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-04 08:38:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(core): correct card view properties display (#12401)

Browse Source 
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **Refactor**
  - Improved the layout of property display in the card view by consolidating all properties into a single container and streamlining the rendering structure.
  - Updated filtering to exclude properties of type "tags" from stack properties.
- **Style**
  - Simplified the visual structure for properties, removing unnecessary nested containers for a cleaner appearance.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
CatsJuice
2025-05-20 14:50:45 +00:00
parent 3f762cc87b
commit 0737cef9b2
1 changed files with 44 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
packages/frontend/core/src/components/explorer/docs-view/properties.tsx
View File

@@ -36,14 +36,16 @@ const useProperties = (view: 'list' | 'card') => {
const stackProperties = useMemo(
() =>
explorerPropertyList.filter(
property =>
(property.systemProperty &&
property.systemProperty.showInDocList === 'stack') ||
(property.workspaceProperty &&
WorkspacePropertyTypes[property.workspaceProperty.type]
.showInDocList === 'stack')
),
explorerPropertyList
.filter(
property =>
(property.systemProperty &&
property.systemProperty.showInDocList === 'stack') ||
(property.workspaceProperty &&
WorkspacePropertyTypes[property.workspaceProperty.type]
.showInDocList === 'stack')
)
.filter(p => p.systemProperty?.type !== 'tags'),
[explorerPropertyList]
);
@@ -191,50 +193,7 @@ export const CardViewProperties = ({ docId }: { docId: string }) => {
}
return (
<>
{/* stack properties */}
<div className={styles.stackContainer}>
<div className={styles.stackProperties}>
{stackProperties.map(({ systemProperty, workspaceProperty }) => {
const displayKeys = [
systemProperty ? `system:${systemProperty.type}` : null,
workspaceProperty ? `property:${workspaceProperty.id}` : null,
];
if (
!displayKeys.some(key => key && displayProperties?.includes(key))
) {
return null;
}
if (systemProperty) {
return (
<SystemPropertyRenderer
doc={doc}
config={SystemPropertyTypes[systemProperty.type]}
key={systemProperty.type}
/>
);
} else if (workspaceProperty) {
return (
<WorkspacePropertyRenderer
key={workspaceProperty.id}
doc={doc}
property={workspaceProperty}
config={WorkspacePropertyTypes[workspaceProperty.type]}
/>
);
}
return null;
})}
</div>
{displayProperties?.includes('system:tags') ? (
<div className={styles.stackProperties}>
<SystemPropertyRenderer
doc={doc}
config={SystemPropertyTypes.tags}
/>
</div>
) : null}
</div>
<div className={styles.cardProperties}>
{/* inline properties */}
{inlineProperties.map(({ systemProperty, workspaceProperty }) => {
const displayKeys = [
@@ -265,7 +224,39 @@ export const CardViewProperties = ({ docId }: { docId: string }) => {
}
return null;
})}
</>
{/* stack properties */}
{stackProperties.map(({ systemProperty, workspaceProperty }) => {
const displayKeys = [
systemProperty ? `system:${systemProperty.type}` : null,
workspaceProperty ? `property:${workspaceProperty.id}` : null,
];
if (!displayKeys.some(key => key && displayProperties?.includes(key))) {
return null;
}
if (systemProperty) {
return (
<SystemPropertyRenderer
doc={doc}
config={SystemPropertyTypes[systemProperty.type]}
key={systemProperty.type}
/>
);
} else if (workspaceProperty) {
return (
<WorkspacePropertyRenderer
key={workspaceProperty.id}
doc={doc}
property={workspaceProperty}
config={WorkspacePropertyTypes[workspaceProperty.type]}
/>
);
}
return null;
})}
{displayProperties?.includes('system:tags') ? (
<SystemPropertyRenderer doc={doc} config={SystemPropertyTypes.tags} />
) : null}
</div>
);
};