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

toeverything · Jan 9, 2025 · 20ca4f3 · 20ca4f3
1 parent 8e8058a
commit 20ca4f3
Showing 1 changed file with 29 additions and 2 deletions.
diff --git a/blocksuite/affine/data-view/src/core/group-by/group-title.ts b/blocksuite/affine/data-view/src/core/group-by/group-title.ts
@@ -41,6 +41,13 @@ const GroupTitleMobile = (
     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`
     <style>
       .group-header-count {
@@ -83,11 +90,17 @@ const GroupTitleMobile = (
         font-size: 16px;
         color: ${unsafeCSSVarV2('icon/primary')};
       }
+
+      .group-header-title {
+        color: ${unsafeCSSVarV2('text/primary')};
+        font-size: var(--data-view-cell-text-size);
+      }
     </style>
     <div
       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>
     ${ops.readonly
       ? nothing
@@ -131,6 +144,13 @@ export const GroupTitle = (
     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`
     <style>
       .group-header-count {
@@ -190,11 +210,18 @@ export const GroupTitle = (
         fill: 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>
     <div
       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>
     ${ops.readonly
       ? nothing