github/siyuan
4
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-05-20 19:10:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

Improve .protyle-scroll tooltip (#12700)

Browse Source 
* Update tooltip.ts

* Update tooltip.ts

* Update index.ts
This commit is contained in:
Jeffrey Chen 2024-10-08 17:13:44 +08:00 committed by GitHub
parent d2c1603647
commit 61e07a1ed1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 14 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/src/dialog/tooltip.ts
View File

@ -26,16 +26,23 @@ export const showTooltip = (message: string, target: Element, error = false) =>
} else { } else {
messageElement.classList.remove("tooltip--memo"); messageElement.classList.remove("tooltip--memo");
} }
let left = targetRect.left; let left = targetRect.left;
let top = targetRect.bottom; let top = targetRect.bottom;
const position = target.getAttribute("data-position"); const position = target.getAttribute("data-position");
const parentRect = target.parentElement.getBoundingClientRect(); const parentRect = target.parentElement.getBoundingClientRect();
if (position?.startsWith("right")) { if (position?.startsWith("right")) {
// block icon and background icon // block icon and background icon
left = targetRect.right - messageElement.clientWidth; left = targetRect.right - messageElement.clientWidth;
} else if (position?.startsWith("left")) {
left = targetRect.left;
} }
if (position?.endsWith("bottom")) { if (position?.endsWith("bottom")) {
top += parseInt(position.replace("right", "")); top += parseInt(position.replace("right", "").replace("left", ""));
} else if (position?.endsWith("top")) {
top = targetRect.top - messageElement.clientHeight;
} else if (position === "parentE") { } else if (position === "parentE") {
// file tree and outline、backlink // file tree and outline、backlink
top = parentRect.top; top = parentRect.top;
@ -45,14 +52,18 @@ export const showTooltip = (message: string, target: Element, error = false) =>
top = parentRect.top + 8; top = parentRect.top + 8;
left = parentRect.left - messageElement.clientWidth; left = parentRect.left - messageElement.clientWidth;
} }
const topHeight = position === "parentE" ? top : targetRect.top; const topHeight = position === "parentE" ? top : targetRect.top;
const bottomHeight = window.innerHeight - top; const bottomHeight = window.innerHeight - top;
messageElement.style.maxHeight = Math.max(topHeight, bottomHeight) + "px"; messageElement.style.maxHeight = Math.max(topHeight, bottomHeight) + "px";
if (top + messageElement.clientHeight > window.innerHeight && topHeight > bottomHeight) { 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" ? parentRect.bottom : targetRect.top) - messageElement.clientHeight) + "px";
} else { } else {
messageElement.style.top = top + "px"; messageElement.style.top = top + "px";
} }
if (left + messageElement.clientWidth > window.innerWidth) { if (left + messageElement.clientWidth > window.innerWidth) {
if (position === "parentE") { if (position === "parentE") {
messageElement.style.left = (parentRect.left - 8 - messageElement.clientWidth) + "px"; messageElement.style.left = (parentRect.left - 8 - messageElement.clientWidth) + "px";

4
app/src/protyle/scroll/index.ts
View File

@ -20,13 +20,13 @@ export class Scroll {
if (!isMobile()) { if (!isMobile()) {
this.parentElement.style.right = "10px"; this.parentElement.style.right = "10px";
} }
this.parentElement.innerHTML = `<div class="b3-tooltips b3-tooltips__w protyle-scroll__up" aria-label="${updateHotkeyTip("⌘Home")}"> this.parentElement.innerHTML = `<div class="protyle-scroll__up ariaLabel" data-position="right4top" aria-label="${updateHotkeyTip("⌘Home")}">
<svg><use xlink:href="#iconUp"></use></svg> <svg><use xlink:href="#iconUp"></use></svg>
</div> </div>
<div class="fn__none protyle-scroll__bar ariaLabel" data-position="right18bottom" aria-label="Blocks 1/1"> <div class="fn__none protyle-scroll__bar ariaLabel" data-position="right18bottom" aria-label="Blocks 1/1">
<input class="b3-slider" type="range" max="1" min="1" step="1" value="1" /> <input class="b3-slider" type="range" max="1" min="1" step="1" value="1" />
</div> </div>
<div class="b3-tooltips b3-tooltips__w protyle-scroll__down" aria-label="${updateHotkeyTip("⌘End")}"> <div class="protyle-scroll__down ariaLabel" data-position="right4bottom" aria-label="${updateHotkeyTip("⌘End")}">
<svg><use xlink:href="#iconDown"></use></svg> <svg><use xlink:href="#iconDown"></use></svg>
</div>`; </div>`;