🎨 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 top = targetRect.bottom;
const position = target.getAttribute("data-position")
const parentRect = target.parentElement.getBoundingClientRect();
if (position === "right") {
// block icon
left = targetRect.right - messageElement.clientWidth;
} else if (position === "parentE") {
// tree and outline
const parentRect = target.parentElement.getBoundingClientRect();
// file tree and outline、backlink
top = parentRect.top;
left = parentRect.right + 8;
}
const topHeight = position === "parentE" ? top : targetRect.top;
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";
messageElement.style.maxHeight = Math.max(topHeight, bottomHeight) + "px";
if (top + messageElement.clientHeight > window.innerHeight && topHeight > bottomHeight) {
messageElement.style.top = ((position === "parentE" ? parentRect.bottom : targetRect.top) - messageElement.clientHeight) + "px";
} else {
messageElement.style.top = top + "px";
}

View file

@ -4,6 +4,7 @@ import {isMobile} from "./functions";
import {mathRender} from "../protyle/render/mathRender";
import {unicode2Emoji} from "../emoji";
import {Constants} from "../constants";
import {escapeAriaLabel} from "./escape";
export class Tree {
public element: HTMLElement;
@ -63,10 +64,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 = ` 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>`;
} 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>`;
}
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>
</span>
${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}
${this.blockExtHTML || ""}
</li>`;