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

This commit is contained in:
Jeffrey Chen 2024-12-20 01:02:24 +08:00
parent d9cd42a978
commit cd63a049c8
5 changed files with 24 additions and 15 deletions

View file

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

View file

@ -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 {

View file

@ -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>`);

View file

@ -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"]);
}

View file

@ -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));
});