🎨 #13262

siyuan-note · Dec 5, 2024 · e191446 · e191446
1 parent 83c44cf
commit e191446
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 6 deletions.
diff --git a/app/src/block/popover.ts b/app/src/block/popover.ts
@@ -7,6 +7,7 @@ import {App} from "../index";
 import {Constants} from "../constants";
 import {getCellText} from "../protyle/render/av/cell";
 import {isTouchDevice} from "../util/functions";
+import {escapeAriaLabel} from "../util/escape";
 
 let popoverTargetElement: HTMLElement;
 let notebookItemElement: HTMLElement | false;
@@ -28,7 +29,17 @@ export const initBlockPopover = (app: App) => {
             let tooltipClass = "";
             let tip = aElement.getAttribute("aria-label");
             if (aElement.classList.contains("av__cell")) {
-                if (!aElement.classList.contains("av__cell--header")) {
+                if (aElement.classList.contains("av__cell--header")) {
+                    const textElement = aElement.querySelector(".av__celltext");
+                    const desc = aElement.getAttribute("data-desc")
+                    if (textElement.scrollWidth > textElement.clientWidth + 2 || desc) {
+                        if (desc) {
+                            tip = `${getCellText(aElement)}<div class='ft__on-surface'>${escapeAriaLabel(desc)}</div>`;
+                        } else {
+                            tip = getCellText(aElement);
+                        }
+                    }
+                } else {
                     if (aElement.firstElementChild?.getAttribute("data-type") === "url") {
                         if (aElement.firstElementChild.textContent.indexOf("...") > -1) {
                             tip = Lute.EscapeHTMLStr(aElement.firstElementChild.getAttribute("data-href"));
@@ -43,6 +54,16 @@ export const initBlockPopover = (app: App) => {
                         aElement.style.overflow = "";
                     }
                 }
+            } else if (aElement.parentElement.parentElement.classList.contains("av__views")) {
+                const textElement = aElement.querySelector(".item__text");
+                const desc = aElement.getAttribute("data-desc")
+                if (textElement.scrollWidth > textElement.clientWidth + 2 || desc) {
+                    if (desc) {
+                        tip = `${textElement.textContent}<div class='ft__on-surface'>${escapeAriaLabel(desc)}</div>`;
+                    } else {
+                        tip = textElement.textContent;
+                    }
+                }
             } else if (aElement.classList.contains("av__celltext--url")) {
                 tip = tip ? `<span style="word-break: break-all">${tip.substring(0, Constants.SIZE_TITLE)}</span><div class="fn__hr"></div>${aElement.getAttribute("data-name")}` : aElement.getAttribute("data-name");
                 tooltipClass = "href";

diff --git a/app/src/protyle/render/av/render.ts b/app/src/protyle/render/av/render.ts
@@ -131,10 +131,9 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: () => void, v
                     if (column.hidden) {
                         return;
                     }
-                    tableHTML += `<div class="av__cell av__cell--header ariaLabel" data-col-id="${column.id}"  draggable="true" 
+                    tableHTML += `<div class="av__cell av__cell--header" data-col-id="${column.id}"  draggable="true" 
 data-icon="${column.icon}" data-dtype="${column.type}" data-wrap="${column.wrap}" data-pin="${column.pin}" 
 data-desc="${escapeAttr(column.desc)}" data-position="top"
-aria-label="${escapeAriaLabel(column.name)}<div class='ft__on-surface'>${escapeAriaLabel(column.desc || "")}</div>"
 style="width: ${column.width || "200px"};">
     ${column.icon ? unicode2Emoji(column.icon, "av__cellheadericon", true) : `<svg class="av__cellheadericon"><use xlink:href="#${getColIconByType(column.type)}"></use></svg>`}
     <span class="av__celltext fn__flex-1">${escapeHtml(column.name)}</span>
@@ -202,7 +201,7 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value, rowIndex)}
                 let tabHTML = "";
                 let viewData: IAVView;
                 response.data.views.forEach((item: IAVView) => {
-                    tabHTML += `<div data-position="top" data-id="${item.id}" data-page="${item.pageSize}" aria-label="${escapeAriaLabel(item.name)}<div class='ft__on-surface'>${escapeAriaLabel(item.desc || "")}</div>" class="ariaLabel item${item.id === response.data.viewID ? " item--focus" : ""}">
+                    tabHTML += `<div data-position="top" data-id="${item.id}" data-page="${item.pageSize}" data-desc="${escapeAriaLabel(item.desc || "")}" class="ariaLabel item${item.id === response.data.viewID ? " item--focus" : ""}">
     ${item.icon ? unicode2Emoji(item.icon, "item__graphic", true) : '<svg class="item__graphic"><use xlink:href="#iconTable"></use></svg>'}
     <span class="item__text">${escapeHtml(item.name)}</span>
 </div>`;

diff --git a/app/src/protyle/render/av/view.ts b/app/src/protyle/render/av/view.ts
@@ -319,7 +319,7 @@ export const getSwitcherHTML = (views: IAVView[], viewId: string) => {
     <svg class="b3-menu__icon fn__grab"><use xlink:href="#iconDrag"></use></svg>
     <div class="b3-menu__label fn__flex" data-type="av-view-switch">
         ${item.icon ? unicode2Emoji(item.icon, "b3-menu__icon", true) : '<svg class="b3-menu__icon"><use xlink:href="#iconTable"></use></svg>'}
-        ${item.name}
+        <span class="fn__ellipsis">${item.name}</span>
     </div>
     <svg class="b3-menu__action" data-type="av-view-edit"><use xlink:href="#iconEdit"></use></svg>
 </button>`;
@@ -330,7 +330,7 @@ export const getSwitcherHTML = (views: IAVView[], viewId: string) => {
     <span class="b3-menu__label">${window.siyuan.languages.newView}</span>
 </button>
 <button class="b3-menu__separator"></button>
-<div class="b3-menu__item b3-menu__item--readonly fn__flex-shrink" data-type="nobg">
+<div class="b3-menu__item fn__flex-shrink" data-type="nobg">
     <input class="b3-text-field fn__block" type="text" style="margin: 4px 0" placeholder="${window.siyuan.languages.search}">
 </div>
 <div class="fn__flex-1" style="overflow: auto">