feat(core): add tooltips to the doc properties in the sidebar (#8684)

close AF-1597
toeverything · Nov 4, 2024 · 0469675 · 0469675
1 parent 763537d
commit 0469675
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 38 deletions.
diff --git a/packages/frontend/core/src/components/doc-properties/sidebar/index.tsx b/packages/frontend/core/src/components/doc-properties/sidebar/index.tsx
@@ -1,4 +1,4 @@
-import { Divider, IconButton } from '@affine/component';
+import { Divider, IconButton, Tooltip } from '@affine/component';
 import { generateUniqueNameInSequence } from '@affine/core/utils/unique-name';
 import { useI18n } from '@affine/i18n';
 import { PlusIcon } from '@blocksuite/icons/rc';
@@ -77,27 +77,32 @@ export const DocPropertySidebar = () => {
                 meta => meta.id === value.uniqueId
               );
               return (
-                <div
-                  className={styles.itemContainer}
+                <Tooltip
                   key={key}
-                  onClick={() => {
-                    onAddProperty({
-                      type: key,
-                      name,
-                    });
-                  }}
-                  data-disabled={isUniqueExist}
+                  content={t.t(value.description || value.name)}
+                  side="left"
                 >
-                  <Icon className={styles.itemIcon} />
-                  <span className={styles.itemName}>{t.t(value.name)}</span>
-                  {isUniqueExist ? (
-                    <span className={styles.itemAdded}>Added</span>
-                  ) : (
-                    <IconButton size={20} iconClassName={styles.itemAdd}>
-                      <PlusIcon />
-                    </IconButton>
-                  )}
-                </div>
+                  <div
+                    className={styles.itemContainer}
+                    onClick={() => {
+                      onAddProperty({
+                        type: key,
+                        name,
+                      });
+                    }}
+                    data-disabled={isUniqueExist}
+                  >
+                    <Icon className={styles.itemIcon} />
+                    <span className={styles.itemName}>{t.t(value.name)}</span>
+                    {isUniqueExist ? (
+                      <span className={styles.itemAdded}>Added</span>
+                    ) : (
+                      <IconButton size={20} iconClassName={styles.itemAdd}>
+                        <PlusIcon />
+                      </IconButton>
+                    )}
+                  </div>
+                </Tooltip>
               );
             })}
           </div>

diff --git a/packages/frontend/core/src/components/doc-properties/types/constant.tsx b/packages/frontend/core/src/components/doc-properties/types/constant.tsx
@@ -72,12 +72,14 @@ export const DocPropertyTypes = {
     icon: DateTimeIcon,
     value: UpdatedDateValue,
     name: 'com.affine.page-properties.property.updatedAt',
+    description: 'com.affine.page-properties.property.updatedAt.tooltips',
     renameable: false,
   },
   createdAt: {
     icon: HistoryIcon,
     value: CreateDateValue,
     name: 'com.affine.page-properties.property.createdAt',
+    description: 'com.affine.page-properties.property.createdAt.tooltips',
     renameable: false,
   },
   docPrimaryMode: {

diff --git a/packages/frontend/i18n/src/i18n-completenesses.json b/packages/frontend/i18n/src/i18n-completenesses.json
@@ -1,22 +1,22 @@
 {
-  "ar": 83,
+  "ar": 80,
   "ca": 6,
   "da": 6,
-  "de": 31,
+  "de": 30,
   "en": 100,
-  "es-AR": 15,
-  "es-CL": 17,
-  "es": 15,
-  "fr": 73,
+  "es-AR": 14,
+  "es-CL": 16,
+  "es": 14,
+  "fr": 71,
   "hi": 2,
   "it": 1,
-  "ja": 97,
-  "ko": 86,
+  "ja": 95,
+  "ko": 84,
   "pl": 0,
-  "pt-BR": 95,
-  "ru": 81,
+  "pt-BR": 91,
+  "ru": 78,
   "sv-SE": 5,
   "ur": 3,
-  "zh-Hans": 97,
-  "zh-Hant": 96
+  "zh-Hans": 95,
+  "zh-Hant": 93
 }
diff --git a/packages/frontend/i18n/src/resources/en.json b/packages/frontend/i18n/src/resources/en.json
@@ -678,8 +678,8 @@
   "com.affine.page-properties.property.journal-duplicated": "Duplicated",
   "com.affine.page-properties.property.journal-remove": "Remove journal mark",
   "com.affine.page-properties.property.updatedBy": "Last edited by",
-  "com.affine.page-properties.property.createdAt": "Created at",
-  "com.affine.page-properties.property.updatedAt": "Updated at",
+  "com.affine.page-properties.property.createdAt": "Created",
+  "com.affine.page-properties.property.updatedAt": "Updated",
   "com.affine.page-properties.property.edgelessTheme": "Edgeless theme",
   "com.affine.page-properties.property.tags.tooltips": "Add relevant identifiers or categories to the doc. Useful for organizing content, improving searchability, and grouping related docs together.",
   "com.affine.page-properties.property.journal.tooltips": "Indicates that this doc is a journal entry or daily note. Facilitates easy capture of ideas, quick logging of thoughts, and ongoing personal reflection.",
@@ -694,6 +694,8 @@
   "com.affine.page-properties.property.text.tooltips": "Enter text. Useful for descriptions, comments, notes, or any other free-form text input.",
   "com.affine.page-properties.property.createdBy.tooltips": "Displays the author of the current doc. Useful for tracking doc ownership, accountability, and collaboration.",
   "com.affine.page-properties.property.updatedBy.tooltips": "Displays the last editor of the current doc. Useful for tracking recent changes.",
+  "com.affine.page-properties.property.updatedAt.tooltips": "Record the last modification timestamp. Useful for tracking changes, identifying recent updates, or monitoring content freshness.",
+  "com.affine.page-properties.property.createdAt.tooltips": "Track when a doc was first created. Useful for maintaining record history, sorting by creation date, or auditing content chronologically.",
   "com.affine.page-properties.property.docPrimaryMode.tooltips": "Select the doc mode from Page Mode, Edgeless Mode, or Auto. Useful for choosing the best display for your content.",
   "com.affine.page-properties.property.edgelessTheme.tooltips": "Select the doc theme from Light, Dark, or System. Useful for precise control over content viewing style.",
   "com.affine.propertySidebar.property-list.section": "Properties",

diff --git a/packages/frontend/i18n/src/resources/zh-Hans.json b/packages/frontend/i18n/src/resources/zh-Hans.json
@@ -667,6 +667,8 @@
   "com.affine.page-properties.property.text": "文本",
   "com.affine.page-properties.property.updatedBy": "最后编辑者",
   "com.affine.page-properties.property.edgelessTheme": "无界配色方案",
+  "com.affine.page-properties.property.createdAt": "创建时间",
+  "com.affine.page-properties.property.updatedAt": "更新时间",
   "com.affine.page-properties.property.tags.tooltips": "为文档添加相关标识或类别，有助于组织内容、提高搜索效率并将相关文档归类。",
   "com.affine.page-properties.property.journal.tooltips": "标识此文档为日志条目或日记，方便捕捉灵感、快速记录或自我反省。",
   "com.affine.page-properties.property.checkbox.tooltips": "用于标记该条目完成与否，适合确认选项、切换功能或跟踪任务状态。",
@@ -680,6 +682,8 @@
   "com.affine.page-properties.property.text.tooltips": "输入文字，用于描述、评论或记录笔记。",
   "com.affine.page-properties.property.createdBy.tooltips": "显示当前文档的作者，用于跟踪所有权和协作情况。",
   "com.affine.page-properties.property.updatedBy.tooltips": "显示文档的最后编辑者，方便跟踪最新更改。",
+  "com.affine.page-properties.property.updatedAt.tooltips": "记录最后修改的时间戳。用于跟踪变更、识别最近的更新或监测内容的新鲜度。",
+  "com.affine.page-properties.property.createdAt.tooltips": "跟踪文档首次创建的时间。用于维护记录历史、按创建日期排序或按时间顺序审核内容。",
   "com.affine.page-properties.property.docPrimaryMode.tooltips": "选择页面模式、无边界模式或自动模式，适合根据内容选择最佳显示方式。",
   "com.affine.page-properties.property.edgelessTheme.tooltips": "选择浅色、深色或系统主题，精确控制内容的查看样式。",
   "com.affine.page-properties.settings.title": "自定义属性",

diff --git a/tests/affine-local/e2e/page-properties.spec.ts b/tests/affine-local/e2e/page-properties.spec.ts
@@ -126,8 +126,8 @@ test('property table reordering', async ({ page }) => {
     'Tags',
     'Doc mode',
     'Journal',
-    'Created at',
-    'Updated at',
+    'Created',
+    'Updated',
     'Created by',
     'Edgeless theme',
     'Number',
@@ -170,8 +170,8 @@ test('page info show more will show all properties', async ({ page }) => {
     'Tags',
     'Doc mode',
     'Journal',
-    'Created at',
-    'Updated at',
+    'Created',
+    'Updated',
     'Created by',
     'Edgeless theme',
     'Text',