Skip to content

Commit

Permalink
Improve tooltip
Browse files Browse the repository at this point in the history
  • Loading branch information
@TCOTC
TCOTC committed Jan 29, 2025
1 parent d9d4827 commit d1fb87c
Show file tree
Hide file tree
Showing 8 changed files with 47 additions and 27 deletions.
5 changes: 5 additions & 0 deletions app/src/assets/scss/component/_list.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -284,6 +284,11 @@
color: var(--b3-theme-on-background);
background-color: var(--b3-list-icon-hover);
}

&--warning:hover {
color: var(--b3-theme-error);
background-color: var(--b3-list-icon-hover);
}
}

.counter {
Expand Down
1 change: 1 addition & 0 deletions app/src/assets/template/app/index.tpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
<div class="b3-menu__items"></div>
</div>
<div id="message" class="b3-snackbars"></div>
<div id="tooltip" class="tooltip fn__none"></div>
<script>
setTimeout(() => {
const refreshElement = document.getElementById("loadingRefresh")
Expand Down
21 changes: 13 additions & 8 deletions app/src/block/popover.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,11 @@ export const initBlockPopover = (app: App) => {
hasClosestByAttribute(event.target, "data-type", "tab-header") ||
hasClosestByAttribute(event.target, "data-type", "inline-memo") ||
hasClosestByClassName(event.target, "av__calc--ashow") ||
hasClosestByClassName(event.target, "av__cell");
hasClosestByClassName(event.target, "av__cell") ||
hasClosestByAttribute(event.target, "data-type", "setRelationCell");
if (aElement) {
let tooltipClass = "";
let tip = aElement.getAttribute("aria-label");
let tip = aElement.getAttribute("aria-label") || "";
if (aElement.classList.contains("av__cell")) {
if (aElement.classList.contains("av__cell--header")) {
const textElement = aElement.querySelector(".av__celltext");
Expand Down Expand Up @@ -65,10 +66,16 @@ export const initBlockPopover = (app: App) => {
}
}
} 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");
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";
} else if (aElement.classList.contains("av__calc--ashow") && aElement.clientWidth + 2 < aElement.scrollWidth) {
tip = aElement.lastChild.textContent + " " + aElement.firstElementChild.textContent;
} else if (aElement.getAttribute("data-type") === "setRelationCell") {
const childElement = aElement.querySelector(".b3-menu__label");
if (childElement && childElement.clientWidth < childElement.scrollWidth) {
tip = childElement.textContent;
}
}
if (!tip) {
tip = aElement.getAttribute("data-inline-memo-content");
Expand All @@ -82,25 +89,23 @@ export const initBlockPopover = (app: App) => {
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
} else {
tip = "";
}
const title = aElement.getAttribute("data-title");
if (tip && isLocalPath(href) && !aElement.classList.contains("b3-tooltips")) {
let assetTip = tip;
fetchPost("/api/asset/statAsset", {path: href}, (response) => {
if (response.code === 1) {
if (title) {
assetTip += '<div class="fn__hr"></div>' + title;
assetTip += '<div class="fn__hr"></div><span>' + title + "</span>";
}
} else {
assetTip += ` ${response.data.hSize}${title ? '<div class="fn__hr"></div>' + title : ""}<br>${window.siyuan.languages.modifiedAt} ${response.data.hUpdated}<br>${window.siyuan.languages.createdAt} ${response.data.hCreated}`;
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);
});
tip = "";
} else if (title) {
tip += '<div class="fn__hr"></div>' + title;
tip += '<div class="fn__hr"></div><span>' + title + "</span>";
}
}
if (tip && !aElement.classList.contains("b3-tooltips")) {
Expand Down
2 changes: 1 addition & 1 deletion app/src/card/makeCard.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export const genCardItem = (item: ICardPackage) => {
<span data-type="view" class="b3-list-item__action b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.cardPreview}">
<svg><use xlink:href="#iconEye"></use></svg>
</span>
<span data-type="remove" class="b3-list-item__action b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.removeDeck}">
<span data-type="remove" class="b3-list-item__action b3-list-item__action--warning b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.removeDeck}">
<svg><use xlink:href="#iconMin"></use></svg>
</span>
<span data-type="add" style="display: flex" class="b3-list-item__action b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.addDeck}">
Expand Down
4 changes: 2 additions & 2 deletions app/src/card/viewCards.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -264,7 +264,7 @@ ${unicode2Emoji(item.ial.icon, "b3-list-item__graphic", true)}
<span data-position="parentE" data-type="reset" data-id="${item.id}" class="b3-list-item__action ariaLabel" aria-label="${window.siyuan.languages.reset}">
<svg><use xlink:href="#iconUndo"></use></svg>
</span>
<span data-position="parentE" data-type="remove" data-id="${item.id}" class="b3-list-item__action ariaLabel" aria-label="${window.siyuan.languages.removeDeck}">
<span data-position="parentE" data-type="remove" data-id="${item.id}" class="b3-list-item__action b3-list-item__action--warning ariaLabel" aria-label="${window.siyuan.languages.removeDeck}">
<svg><use xlink:href="#iconTrashcan"></use></svg>
</span>
</div>`;
Expand All @@ -273,7 +273,7 @@ ${unicode2Emoji(item.ial.icon, "b3-list-item__graphic", true)}
// 块被删除的情况
listHTML += `<div data-type="card-item" class="b3-list-item${isMobile() ? "" : " b3-list-item--hide-action"}">
<span class="b3-list-item__text">${item.content}</span>
<span data-position="parentE" data-type="remove" data-id="${item.id}" class="b3-list-item__action ariaLabel" aria-label="${window.siyuan.languages.removeDeck}">
<span data-position="parentE" data-type="remove" data-id="${item.id}" class="b3-list-item__action b3-list-item__action--warning ariaLabel" aria-label="${window.siyuan.languages.removeDeck}">
<svg><use xlink:href="#iconTrashcan"></use></svg>
</span>
</div>`;
Expand Down
24 changes: 14 additions & 10 deletions app/src/dialog/tooltip.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import {isMobile} from "../util/functions";
import {Constants} from "../constants";

export const showTooltip = (message: string, target: Element, tooltipClass?: string) => {
if (isMobile()) {
Expand All @@ -14,17 +13,22 @@ export const showTooltip = (message: string, target: Element, tooltipClass?: str
const className = tooltipClass ? `tooltip tooltip--${tooltipClass}` : "tooltip";
let messageElement = document.getElementById("tooltip");
if (!messageElement) {
document.body.insertAdjacentHTML("beforeend", `<div class="${className}" id="tooltip">${message}</div>`);
document.body.insertAdjacentHTML("beforeend", `<div id="tooltip" class="${className}">${message}</div>`);
messageElement = document.getElementById("tooltip");
} else {
let needsRemoveStyle = false;
if (messageElement.className !== className) {
messageElement.className = className;
needsRemoveStyle = true;
}
if (messageElement.innerHTML !== message) {
messageElement.innerHTML = message;
needsRemoveStyle = true;
}
if (needsRemoveStyle) {
// 避免原本的 top 和 left 影响计算
Object.assign(messageElement.style, { top: "0", left: "0" });
}
// 避免原本的 top 和 left 影响计算
messageElement.removeAttribute("style");
}

let left = targetRect.left;
Expand Down Expand Up @@ -53,19 +57,19 @@ export const showTooltip = (message: string, target: Element, tooltipClass?: str
} else if (position?.endsWith("top")) {
// 编辑器动态滚动条
top = targetRect.top - messageElement.clientHeight;
} else if (position === "west") {
// 数据库属性视图 移除条目按钮
top = targetRect.top + (parseInt(position) || 0);
left = targetRect.left - messageElement.clientWidth - 8;
}

const topHeight = position === "parentE" ? top : targetRect.top;
const bottomHeight = window.innerHeight - top;

messageElement.style.maxHeight = Math.max(topHeight, bottomHeight) + "px";

// 避免原本的 top 和 left 影响计算
messageElement.style.top = "0px";
messageElement.style.left = "0px";

if (top + messageElement.clientHeight > window.innerHeight && topHeight > bottomHeight) {
messageElement.style.top = ((position === "parentE" ? parentRect.bottom : targetRect.top) - messageElement.clientHeight) + "px";
messageElement.style.top = ((position === "parentE" || position === "west" ? parentRect.bottom : targetRect.top) - messageElement.clientHeight) + "px";
} else {
messageElement.style.top = top + "px";
}
Expand All @@ -84,6 +88,6 @@ export const showTooltip = (message: string, target: Element, tooltipClass?: str
export const hideTooltip = () => {
const messageElement = document.getElementById("tooltip");
if (messageElement) {
messageElement.remove();
messageElement.classList.add("fn__none");
}
};
2 changes: 1 addition & 1 deletion app/src/layout/dock/Files.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -446,7 +446,7 @@ export class Files extends Model {
item.style.opacity = "";
// https://github.com/siyuan-note/siyuan/issues/11587
if (index === 0) {
const airaLabelElement = item.querySelector(".ariaLabel");
const airaLabelElement = item.querySelector(".ariaLabel") || item.querySelector(".b3-list-item__text");
if (airaLabelElement) {
showTooltip(airaLabelElement.getAttribute("aria-label"), airaLabelElement);
}
Expand Down
15 changes: 10 additions & 5 deletions app/src/protyle/render/av/relation.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -224,7 +224,7 @@ const genSelectItemHTML = (type: "selected" | "empty" | "unselect", id?: string,
</button>`;
}
if (type == "unselect") {
return `<button data-id="${id}" class="b3-menu__item" data-type="setRelationCell">
return `<button data-id="${id}" class="b3-menu__item" data-position="west" data-type="setRelationCell">
<span class="b3-menu__label fn__ellipsis${isDetached ? "" : " popover__block"}" ${isDetached ? "" : 'style="color:var(--b3-protyle-inline-blockref-color)"'} data-id="${id}">${text}</span>
<svg class="b3-menu__action"><use xlink:href="#iconAdd"></use></svg>
</button>`;
Expand All @@ -243,7 +243,9 @@ const filterItem = (menuElement: Element, cellElement: HTMLElement, keyword: str
cellElement.querySelectorAll(".av__cell--relation").forEach((relationItem: HTMLElement) => {
const item = relationItem.querySelector(".av__celltext") as HTMLElement;
hasIds.push(item.dataset.id);
selectHTML += `<button data-id="${item.dataset.id}" data-type="setRelationCell" class="b3-menu__item${item.textContent.indexOf(keyword) > -1 ? "" : " fn__none"}" draggable="true">${genSelectItemHTML("selected", item.dataset.id, !item.classList.contains("av__celltext--ref"), Lute.EscapeHTMLStr(item.textContent || window.siyuan.languages.untitled))}</button>`;
selectHTML += `<button data-id="${item.dataset.id}" data-position="west" data-type="setRelationCell"
class="b3-menu__item${item.textContent.indexOf(keyword) > -1 ? "" : " fn__none"}"
draggable="true">${genSelectItemHTML("selected", item.dataset.id, !item.classList.contains("av__celltext--ref"), Lute.EscapeHTMLStr(item.textContent || window.siyuan.languages.untitled))}</button>`;
});
cells.forEach((item) => {
if (!hasIds.includes(item.block.id)) {
Expand Down Expand Up @@ -275,7 +277,8 @@ export const bindRelationEvent = (options: {
options.cellElements[0].querySelectorAll(".av__cell--relation").forEach((relationItem: HTMLElement) => {
const item = relationItem.querySelector(".av__celltext") as HTMLElement;
hasIds.push(item.dataset.id);
selectHTML += `<button data-id="${item.dataset.id}" data-type="setRelationCell" class="b3-menu__item" draggable="true">${genSelectItemHTML("selected", item.dataset.id, !item.classList.contains("av__celltext--ref"), Lute.EscapeHTMLStr(item.textContent || window.siyuan.languages.untitled))}</button>`;
selectHTML += `<button data-id="${item.dataset.id}" data-position="west" data-type="setRelationCell" class="b3-menu__item"
draggable="true">${genSelectItemHTML("selected", item.dataset.id, !item.classList.contains("av__celltext--ref"), Lute.EscapeHTMLStr(item.textContent || window.siyuan.languages.untitled))}</button>`;
});
cells.forEach((item) => {
if (!hasIds.includes(item.block.id)) {
Expand Down Expand Up @@ -401,7 +404,8 @@ export const setRelationCell = (protyle: IProtyle, nodeElement: HTMLElement, tar
isDetached: !target.firstElementChild.getAttribute("style")
});
separatorElement.before(target);
target.outerHTML = `<button data-id="${targetId}" data-type="setRelationCell" class="b3-menu__item" draggable="true">${genSelectItemHTML("selected", targetId, !target.querySelector(".popover__block"), Lute.EscapeHTMLStr(target.querySelector(".b3-menu__label").textContent))}</button>`;
target.outerHTML = `<button data-id="${targetId}" data-type="setRelationCell" class="b3-menu__item"
draggable="true">${genSelectItemHTML("selected", targetId, !target.querySelector(".popover__block"), Lute.EscapeHTMLStr(target.querySelector(".b3-menu__label").textContent))}</button>`;
if (!separatorElement.nextElementSibling) {
separatorElement.insertAdjacentHTML("afterend", genSelectItemHTML("empty"));
}
Expand Down Expand Up @@ -433,7 +437,8 @@ export const setRelationCell = (protyle: IProtyle, nodeElement: HTMLElement, tar
},
isDetached: true
});
separatorElement.insertAdjacentHTML("beforebegin", `<button data-id="${rowId}" data-type="setRelationCell" class="b3-menu__item" draggable="true">${genSelectItemHTML("selected", rowId, true, Lute.EscapeHTMLStr(content))}</button>`);
separatorElement.insertAdjacentHTML("beforebegin", `<button data-id="${rowId}" data-position="west" data-type="setRelationCell"
class="b3-menu__item" draggable="true">${genSelectItemHTML("selected", rowId, true, Lute.EscapeHTMLStr(content))}</button>`);
}
menuElement.querySelector(".b3-menu__item--current")?.classList.remove("b3-menu__item--current");
menuElement.querySelector(".b3-menu__items .b3-menu__item:not(.fn__none)").classList.add("b3-menu__item--current");
Expand Down

0 comments on commit d1fb87c

Please sign in to comment.