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

feat(editor): improve group title display for checkbox columns (#9622)

Browse Source 
close: BS-1977
This commit is contained in:
zzj3720
2025-01-10 14:01:11 +00:00
parent 7d2ee8d742
commit cc08094b17
1 changed files with 29 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
blocksuite/affine/data-view/src/core/group-by/group-title.ts
+29 -2
View File
@@ -41,6 +41,13 @@ const GroupTitleMobile = (
readonly: ops.readonly, readonly: ops.readonly,
}; };
const showColumnName = groupData.property.type$.value === 'checkbox';
const columnName = showColumnName
? html`<span class="group-header-title"
>${groupData.property.name$.value}</span
>`
: nothing;
return html` return html`
<style> <style>
.group-header-count { .group-header-count {
@@ -83,11 +90,17 @@ const GroupTitleMobile = (
font-size: 16px; font-size: 16px;
color: ${unsafeCSSVarV2('icon/primary')}; color: ${unsafeCSSVarV2('icon/primary')};
} }
.group-header-title {
color: ${unsafeCSSVarV2('text/primary')};
font-size: var(--data-view-cell-text-size);
}
</style> </style>
<div <div
style="display:flex;align-items:center;gap: 8px;overflow: hidden;height: 22px;" style="display:flex;align-items:center;gap: 8px;overflow: hidden;height: 22px;"
> >
${icon} ${renderUniLit(data.view, props)} ${GroupHeaderCount(groupData)} ${icon} ${renderUniLit(data.view, props)} ${columnName}
${GroupHeaderCount(groupData)}
</div> </div>
${ops.readonly ${ops.readonly
? nothing ? nothing
@@ -131,6 +144,13 @@ export const GroupTitle = (
readonly: ops.readonly, readonly: ops.readonly,
}; };
const showColumnName = groupData.property.type$.value === 'checkbox';
const columnName = showColumnName
? html`<span class="group-header-title"
>${groupData.property.name$.value}</span
>`
: nothing;
return html` return html`
<style> <style>
.group-header-count { .group-header-count {
@@ -190,11 +210,18 @@ export const GroupTitle = (
fill: var(--affine-icon-color); fill: var(--affine-icon-color);
color: var(--affine-icon-color); color: var(--affine-icon-color);
} }
.group-header-title {
color: ${unsafeCSSVarV2('text/primary')};
font-size: var(--data-view-cell-text-size);
margin-left: 4px;
}
</style> </style>
<div <div
style="display:flex;align-items:center;gap: 8px;overflow: hidden;height: 22px;" style="display:flex;align-items:center;gap: 8px;overflow: hidden;height: 22px;"
> >
${icon} ${renderUniLit(data.view, props)} ${GroupHeaderCount(groupData)} ${icon} ${renderUniLit(data.view, props)} ${columnName}
${GroupHeaderCount(groupData)}
</div> </div>
${ops.readonly ${ops.readonly
? nothing ? nothing