0ct0pu5/siyuan
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

🎨 Improve tooltip

Browse source 
- 优化元素更新
- 改变 hideTooltip() 的方式为添加类名 .fn__none
- 增加 .tooltip--tab_header
This commit is contained in:
Jeffrey Chen 2024-12-15 23:28:39 +08:00
parent a8f088cb5e
commit d036d822e6
3 changed files with 9 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/src/block/popover.ts
View file

@ -28,7 +28,9 @@ export const initBlockPopover = (app: App) => {
if (aElement) {
let tooltipClass = "";
let tip = aElement.getAttribute("aria-label");
if (aElement.classList.contains("av__cell")) {
if (aElement.getAttribute("data-type") === "tab-header") {
tooltipClass = "tab_header";
} else if (aElement.classList.contains("av__cell")) {
if (aElement.classList.contains("av__cell--header")) {
const textElement = aElement.querySelector(".av__celltext");
const desc = aElement.getAttribute("data-desc");

11
app/src/dialog/tooltip.ts
View file

@ -19,12 +19,13 @@ export const showTooltip = (message: string, target: Element, tooltipClass?: str
} else {
if (messageElement.className !== className) {
messageElement.className = className;
// 避免原本的 top 和 left 影响计算
messageElement.removeAttribute("style");
}
if (messageElement.innerHTML !== message) {
messageElement.innerHTML = message;
messageElement.removeAttribute("style");
}
// 避免原本的 top 和 left 影响计算
messageElement.removeAttribute("style");
}
let left = targetRect.left;
@ -60,10 +61,6 @@ export const showTooltip = (message: string, target: Element, tooltipClass?: str
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";
} else {
@ -84,6 +81,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");
}
};

3
app/src/layout/Tab.ts
View file

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