🎨 resize

This commit is contained in:
Vanessa 2023-09-14 10:37:01 +08:00
parent fa8033d3e8
commit ecf2e9af31
2 changed files with 10 additions and 8 deletions

View file

@ -30,19 +30,20 @@ export const showTooltip = (message: string, target: Element, error = false) =>
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();
if (position === "right") { if (position === "right") {
// block icon // block icon
left = targetRect.right - messageElement.clientWidth; left = targetRect.right - messageElement.clientWidth;
} else if (position === "parentE") { } else if (position === "parentE") {
// tree and outline // file tree and outline、backlink
const parentRect = target.parentElement.getBoundingClientRect();
top = parentRect.top; top = parentRect.top;
left = parentRect.right + 8; left = parentRect.right + 8;
} }
const topHeight = position === "parentE" ? top : targetRect.top;
const bottomHeight = window.innerHeight - top; const bottomHeight = window.innerHeight - top;
messageElement.style.maxHeight = Math.max(targetRect.top, bottomHeight) + "px"; messageElement.style.maxHeight = Math.max(topHeight, bottomHeight) + "px";
if (targetRect.top > bottomHeight) { if (top + messageElement.clientHeight > window.innerHeight && topHeight > bottomHeight) {
messageElement.style.top = (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";
} }

View file

@ -4,6 +4,7 @@ import {isMobile} from "./functions";
import {mathRender} from "../protyle/render/mathRender"; import {mathRender} from "../protyle/render/mathRender";
import {unicode2Emoji} from "../emoji"; import {unicode2Emoji} from "../emoji";
import {Constants} from "../constants"; import {Constants} from "../constants";
import {escapeAriaLabel} from "./escape";
export class Tree { export class Tree {
public element: HTMLElement; public element: HTMLElement;
@ -63,10 +64,10 @@ export class Tree {
} else if (item.type === "tag") { } else if (item.type === "tag") {
iconHTML = '<svg class="b3-list-item__graphic"><use xlink:href="#iconTags"></use></svg>'; iconHTML = '<svg class="b3-list-item__graphic"><use xlink:href="#iconTags"></use></svg>';
} else if (item.type === "backlink") { } else if (item.type === "backlink") {
titleTip = ` aria-label="${item.hPath}"`; titleTip = ` aria-label="${escapeAriaLabel(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>`; 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") { } else if (item.type === "outline") {
titleTip = ` aria-label="${Lute.EscapeHTMLStr(Lute.BlockDOM2Content(item.name))}"`; titleTip = ` aria-label="${escapeAriaLabel(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>`; 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 = ""; let countHTML = "";
@ -148,7 +149,7 @@ data-def-path="${item.defPath}">
<svg data-id="${item.id}" class="b3-list-item__arrow"><use xlink:href="#iconRight"></use></svg> <svg data-id="${item.id}" class="b3-list-item__arrow"><use xlink:href="#iconRight"></use></svg>
</span> </span>
${iconHTML} ${iconHTML}
<span class="b3-list-item__text ariaLabel" data-position="parentE" ${type === "outline" ? ' aria-label="' + Lute.EscapeHTMLStr(Lute.BlockDOM2Content(item.content)) + '"' : ""}>${item.content}</span> <span class="b3-list-item__text ariaLabel" data-position="parentE" ${type === "outline" ? ' aria-label="' + escapeAriaLabel(Lute.BlockDOM2Content(item.content)) + '"' : ""}>${item.content}</span>
${countHTML} ${countHTML}
${this.blockExtHTML || ""} ${this.blockExtHTML || ""}
</li>`; </li>`;