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

🎨 tooltip

Browse source
This commit is contained in:
Vanessa 2023-09-13 18:50:51 +08:00
parent cf1464e2ef
commit 64fdb274fb
3 changed files with 16 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -17,11 +17,6 @@ export const showTooltip = (message: string, target: Element, error = false) =>
} else {
messageElement.innerHTML = message;
}
if (target.parentElement.getAttribute("data-type") === "navigation-file") {
const parentRect = target.parentElement.getBoundingClientRect();
setPosition(messageElement, parentRect.right + 8, parentRect.top);
return;
}
if (error) {
messageElement.classList.add("tooltip--error");
} else {
@ -33,15 +28,23 @@ export const showTooltip = (message: string, target: Element, error = false) =>
messageElement.classList.remove("tooltip--memo");
}
let left = targetRect.left;
if (target.getAttribute("data-position") === "right") {
let top = targetRect.bottom;
const position = target.getAttribute("data-position")
if (position === "right") {
// block icon
left = targetRect.right - messageElement.clientWidth;
} else if (position === "parentE") {
// tree and outline
const parentRect = target.parentElement.getBoundingClientRect();
top = parentRect.top;
left = parentRect.right + 8;
}
const bottomHeight = window.innerHeight - targetRect.bottom;
const bottomHeight = window.innerHeight - top;
messageElement.style.maxHeight = Math.max(targetRect.top, bottomHeight) + "px";
if (targetRect.top > bottomHeight) {
messageElement.style.top = (targetRect.top - messageElement.clientHeight) + "px";
} else {
messageElement.style.top = targetRect.bottom + "px";
messageElement.style.top = top + "px";
}
if (left + messageElement.clientWidth > window.innerWidth) {
messageElement.style.left = (window.innerWidth - messageElement.clientWidth) + "px";

2
app/src/layout/dock/Files.ts
View file

@ -1004,7 +1004,7 @@ class="b3-list-item b3-list-item--hide-action" data-path="${item.path}">
<svg class="b3-list-item__arrow"><use xlink:href="#iconRight"></use></svg>
</span>
<span class="b3-list-item__icon b3-tooltips b3-tooltips__n" aria-label="${window.siyuan.languages.changeIcon}">${unicode2Emoji(item.icon || (item.subFileCount === 0 ? Constants.SIYUAN_IMAGE_FILE : Constants.SIYUAN_IMAGE_FOLDER))}</span>
<span class="b3-list-item__text ariaLabel"
<span class="b3-list-item__text ariaLabel" data-position="parentE"
aria-label="${escapeHtml(ariaLabel)}">${getDisplayName(item.name, true, true)}</span>
<span data-type="more-file" class="b3-list-item__action b3-tooltips b3-tooltips__nw" aria-label="${window.siyuan.languages.more}">
<svg><use xlink:href="#iconMore"></use></svg>

8
app/src/util/Tree.ts
View file

@ -63,10 +63,10 @@ export class Tree {
} else if (item.type === "tag") {
iconHTML = '<svg class="b3-list-item__graphic"><use xlink:href="#iconTags"></use></svg>';
} else if (item.type === "backlink") {
titleTip = ` title="${item.hPath}"`;
titleTip = ` aria-label="${item.hPath}"`;
iconHTML = `<svg class="b3-list-item__graphic popover__block" data-id="${item.id}"><use xlink:href="#${getIconByType(item.nodeType, item.subType)}"></use></svg>`;
} else if (item.type === "outline") {
titleTip = ` title="${Lute.EscapeHTMLStr(Lute.BlockDOM2Content(item.name))}"`;
titleTip = ` aria-label="${Lute.EscapeHTMLStr(Lute.BlockDOM2Content(item.name))}"`;
iconHTML = `<svg class="b3-list-item__graphic popover__block" data-id="${item.id}"><use xlink:href="#${getIconByType(item.nodeType, item.subType)}"></use></svg>`;
}
let countHTML = "";
@ -94,7 +94,7 @@ ${item.label ? "data-label='" + item.label + "'" : ""}>
<svg data-id="${encodeURIComponent(item.name + item.depth)}" class="b3-list-item__arrow${hasChild ? " b3-list-item__arrow--open" : ""}"><use xlink:href="#iconRight"></use></svg>
</span>
${iconHTML}
<span class="b3-list-item__text"${titleTip}>${item.name}</span>
<span class="b3-list-item__text ariaLabel" data-position="parentE"${titleTip}>${item.name}</span>
${this.topExtHTML || ""}
${countHTML}
</li>`;
@ -148,7 +148,7 @@ data-def-path="${item.defPath}">
<svg data-id="${item.id}" class="b3-list-item__arrow"><use xlink:href="#iconRight"></use></svg>
</span>
${iconHTML}
<span class="b3-list-item__text" ${type === "outline" ? ' title="' + Lute.EscapeHTMLStr(Lute.BlockDOM2Content(item.content)) + '"' : ""}>${item.content}</span>
<span class="b3-list-item__text ariaLabel" data-position="parentE" ${type === "outline" ? ' aria-label="' + Lute.EscapeHTMLStr(Lute.BlockDOM2Content(item.content)) + '"' : ""}>${item.content}</span>
${countHTML}
${this.blockExtHTML || ""}
</li>`;