⚡️ feat: i18n & 优化 arial label

frostime · Jul 21, 2024 · f5edcbb · f5edcbb
1 parent 8100577
commit f5edcbb
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 5 deletions.
diff --git a/public/i18n/en_US.yaml b/public/i18n/en_US.yaml
@@ -27,6 +27,9 @@ setting:
   autoRefreshOnExpand:
     title: Auto Refresh on Expand
     description: Automatically refreshes the items within a dynamic group when it is expanded from a collapsed state.
+  ariaLabel:
+    title: Display Hover Box
+    description: Display full title of the bookmark item in a hover box when the mouse hovers
 viewMode:
   bookmark: Bookmark Style
   card: Card Style

diff --git a/public/i18n/zh_CN.yaml b/public/i18n/zh_CN.yaml
@@ -27,6 +27,9 @@ setting:
   autoRefreshOnExpand:
     title: 展开后刷新
     description: 展开一个被折叠的动态组时，自动刷新其中的内容
+  ariaLabel:
+    title: 显示悬浮框
+    description: 鼠标悬停在书签项目上时，在悬浮框中显示书签项目的完整标题
 viewMode:
   bookmark: 书签样式
   card: 卡片样式

diff --git a/src/components/item.tsx b/src/components/item.tsx
@@ -87,6 +87,14 @@ const Item: Component<IProps> = (props) => {
         }
     });
 
+    const notebook = createMemo(() => {
+        return getNotebook(item().box).name;
+    })
+
+    const hoverContext = createMemo(() => {
+        return `<b>${notebook()}</b><br/>${item().title}`;
+    });
+
     createEffect(() => {
         let value = item();
         if (value) {
@@ -323,7 +331,7 @@ const Item: Component<IProps> = (props) => {
                     ariaLabel: configs.ariaLabel
                 }}
                 data-position="parentE"
-                {...(configs.ariaLabel ? { 'aria-label': item().title } : {})}
+                {...(configs.ariaLabel ? { 'aria-label': hoverContext() } : {})}
                 style={titleStyle()}>
                 {item().title}
             </span>

diff --git a/src/components/setting/index.tsx b/src/components/setting/index.tsx
@@ -83,8 +83,8 @@ const App = () => {
                 />
             </SettingItemWrap>
             <SettingItemWrap
-                title={"悬浮框"}
-                description={"悬浮在图标上，在悬浮框中显示item完整内容"}
+                title={i18n_.ariaLabel.title}
+                description={i18n_.ariaLabel.description}
             >
                 <InputItem
                     type='checkbox'

diff --git a/src/index.ts b/src/index.ts
@@ -3,7 +3,7 @@
  * @Author       : frostime
  * @Date         : 2024-06-12 19:48:53
  * @FilePath     : /src/index.ts
- * @LastEditTime : 2024-07-08 15:35:06
+ * @LastEditTime : 2024-07-21 17:20:44
  * @Description  : 
  */
 import {
@@ -124,7 +124,7 @@ export default class PluginBookmarkPlus extends Plugin {
         simpleDialog({
             title: window.siyuan.languages.config,
             ele: container,
-            width: '600px',
+            width: '700px',
             height: '700px',
             callback: () => {
                 model.save();