Forráskód Böngészése

tooltip 支持多个类名、添加警告提示 https://github.com/siyuan-note/siyuan/issues/13536

Jeffrey Chen 6 hónapja
szülő
commit
cd63a049c8

+ 4 - 0
app/src/assets/scss/business/_custom.scss

@@ -40,6 +40,10 @@
         opacity: 1;
       }
     }
+
+    .block__icon[data-type="remove"]:hover {
+      color: var(--b3-theme-error);
+    }
   }
 
   .b3-label {

+ 12 - 9
app/src/block/popover.ts

@@ -26,10 +26,13 @@ export const initBlockPopover = (app: App) => {
             hasClosestByClassName(event.target, "av__calc--ashow") ||
             hasClosestByClassName(event.target, "av__cell");
         if (aElement) {
-            let tooltipClass = "";
+            const tooltipClasses: string[] = [];
             let tip = aElement.getAttribute("aria-label");
+            if (aElement.classList.contains("ariaLabel--warning")) {
+                tooltipClasses.push("error");
+            }
             if (aElement.getAttribute("data-type") === "tab-header") {
-                tooltipClass = "tab_header";
+                tooltipClasses.push("tab_header");
             } else if (aElement.classList.contains("av__cell")) {
                 if (aElement.classList.contains("av__cell--header")) {
                     const textElement = aElement.querySelector(".av__celltext");
@@ -45,7 +48,7 @@ export const initBlockPopover = (app: App) => {
                     if (aElement.firstElementChild?.getAttribute("data-type") === "url") {
                         if (aElement.firstElementChild.textContent.indexOf("...") > -1) {
                             tip = Lute.EscapeHTMLStr(aElement.firstElementChild.getAttribute("data-href"));
-                            tooltipClass = "href";
+                            tooltipClasses.push("href");
                         }
                     }
                     if (!tip && aElement.dataset.wrap !== "true" && event.target.dataset.type !== "block-more" && !hasClosestByClassName(event.target, "block__icon")) {
@@ -69,14 +72,14 @@ export const initBlockPopover = (app: App) => {
             } else if (aElement.classList.contains("av__celltext--url")) {
                 const title = aElement.getAttribute("data-name") || "";
                 tip = tip ? `<span style="word-break: break-all">${tip.substring(0, Constants.SIZE_TITLE)}</span>${title ? '<div class="fn__hr"></div><span>' + title + "</span>" : ""}` : title;
-                tooltipClass = "href";
+                tooltipClasses.push("href");
             } else if (aElement.classList.contains("av__calc--ashow") && aElement.clientWidth + 2 < aElement.scrollWidth) {
                 tip = aElement.lastChild.textContent + " " + aElement.firstElementChild.textContent;
             }
             if (!tip) {
                 tip = aElement.getAttribute("data-inline-memo-content");
                 if (tip) {
-                    tooltipClass = "memo"; // 为行级备注添加 class https://github.com/siyuan-note/siyuan/issues/6161
+                    tooltipClasses.push("memo"); // 为行级备注添加 class https://github.com/siyuan-note/siyuan/issues/6161
                 }
             }
             if (!tip) {
@@ -84,7 +87,7 @@ export const initBlockPopover = (app: App) => {
                 // 链接地址强制换行 https://github.com/siyuan-note/siyuan/issues/11539
                 if (href) {
                     tip = `<span style="word-break: break-all">${href.substring(0, Constants.SIZE_TITLE)}</span>`;
-                    tooltipClass = "href"; // 为超链接添加 class https://github.com/siyuan-note/siyuan/issues/11440#issuecomment-2119080691
+                    tooltipClasses.push("href"); // 为超链接添加 class https://github.com/siyuan-note/siyuan/issues/11440#issuecomment-2119080691
                 }
                 const title = aElement.getAttribute("data-title");
                 if (tip && isLocalPath(href) && !aElement.classList.contains("b3-tooltips")) {
@@ -97,7 +100,7 @@ export const initBlockPopover = (app: App) => {
                         } else {
                             assetTip += ` ${response.data.hSize}${title ? '<div class="fn__hr"></div><span>' + title + "</span>" : ""}<br>${window.siyuan.languages.modifiedAt} ${response.data.hUpdated}<br>${window.siyuan.languages.createdAt} ${response.data.hCreated}`;
                         }
-                        showTooltip(assetTip, aElement, tooltipClass);
+                        showTooltip(assetTip, aElement, tooltipClasses);
                     });
                     tip = "";
                 } else if (title) {
@@ -107,10 +110,10 @@ export const initBlockPopover = (app: App) => {
             if (tip && !aElement.classList.contains("b3-tooltips")) {
                 // https://github.com/siyuan-note/siyuan/issues/11294
                 try {
-                    showTooltip(decodeURIComponent(tip), aElement, tooltipClass);
+                    showTooltip(decodeURIComponent(tip), aElement, tooltipClasses);
                 } catch (e) {
                     // https://ld246.com/article/1718235737991
-                    showTooltip(tip, aElement, tooltipClass);
+                    showTooltip(tip, aElement, tooltipClasses);
                 }
                 event.stopPropagation();
             } else {

+ 5 - 2
app/src/dialog/tooltip.ts

@@ -1,7 +1,7 @@
 import {isMobile} from "../util/functions";
 import {Constants} from "../constants";
 
-export const showTooltip = (message: string, target: Element, tooltipClass?: string) => {
+export const showTooltip = (message: string, target: Element, tooltipClasses?: string[]) => {
     if (isMobile()) {
         return;
     }
@@ -11,7 +11,10 @@ export const showTooltip = (message: string, target: Element, tooltipClass?: str
         return;
     }
 
-    const className = tooltipClass ? `tooltip tooltip--${tooltipClass}` : "tooltip";
+    // 合并默认类名和额外类名
+    const additionalClasses = tooltipClasses ? tooltipClasses.map(cls => `tooltip--${cls}`).join(" ") : "";
+    const className = ["tooltip ", additionalClasses].filter(Boolean).join("");
+
     let messageElement = document.getElementById("tooltip");
     if (!messageElement) {
         document.body.insertAdjacentHTML("beforeend", `<div class="${className}" id="tooltip">${message}</div>`);

+ 2 - 2
app/src/editor/rename.ts

@@ -16,7 +16,7 @@ import {getAllEditor} from "../layout/getAll";
 export const validateName = (name: string, targetElement?: HTMLElement) => {
     if (/\r\n|\r|\n|\u2028|\u2029|\t|\//.test(name)) {
         if (targetElement) {
-            showTooltip(window.siyuan.languages.fileNameRule, targetElement, "error");
+            showTooltip(window.siyuan.languages.fileNameRule, targetElement, ["error"]);
         } else {
             showMessage(window.siyuan.languages.fileNameRule);
         }
@@ -24,7 +24,7 @@ export const validateName = (name: string, targetElement?: HTMLElement) => {
     }
     if (name.length > Constants.SIZE_TITLE) {
         if (targetElement) {
-            showTooltip(window.siyuan.languages["_kernel"]["106"], targetElement, "error");
+            showTooltip(window.siyuan.languages["_kernel"]["106"], targetElement, ["error"]);
         } else {
             showMessage(window.siyuan.languages["_kernel"]["106"]);
         }

+ 1 - 2
app/src/layout/Tab.ts

@@ -62,8 +62,7 @@ export class Tab {
                         id
                     }, (response) => {
                         if (!this.headElement.getAttribute("aria-label")) {
-                            const tooltipClass = "tab_header";
-                            showTooltip(escapeGreat(response.data), this.headElement, tooltipClass);
+                            showTooltip(escapeGreat(response.data), this.headElement, ["tab_header"]);
                         }
                         this.headElement.setAttribute("aria-label", escapeGreat(response.data));
                     });