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

🎨 关联字段选项文本过长的条目加上悬浮提示

Browse source
This commit is contained in:
Jeffrey Chen 2024-12-25 14:57:38 +08:00
parent 0949efbe9d
commit 88a3ffc488
3 changed files with 13 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -23,7 +23,8 @@ export const initBlockPopover = (app: App) => {
hasClosestByClassName(event.target, "ariaLabel") ||
hasClosestByAttribute(event.target, "data-type", "inline-memo") ||
hasClosestByClassName(event.target, "av__calc--ashow") ||
hasClosestByClassName(event.target, "av__cell");
hasClosestByClassName(event.target, "av__cell")||
hasClosestByAttribute(event.target, "data-type", "setRelationCell");
if (aElement) {
const tooltipClasses: string[] = [];
let tip = aElement.getAttribute("aria-label") || "";
@ -72,6 +73,11 @@ export const initBlockPopover = (app: App) => {
tooltipClasses.push("href");
} else if (aElement.classList.contains("av__calc--ashow") && aElement.clientWidth + 2 < aElement.scrollWidth) {
tip = aElement.lastChild.textContent + " " + aElement.firstElementChild.textContent;
} else if (aElement.getAttribute("data-type") === "setRelationCell") {
const childElement = aElement.querySelector(".b3-menu__label");
if (childElement && childElement.clientWidth < childElement.scrollWidth) {
tip = childElement.textContent;
}
}
if (!tip) {
tip = aElement.getAttribute("data-inline-memo-content");

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

@ -67,7 +67,7 @@ export const showTooltip = (message: string, target: Element, tooltipClasses?: s
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";
messageElement.style.top = ((position === "parentE" || position === "west" ? parentRect.bottom : targetRect.top) - messageElement.clientHeight) + "px";
} else {
messageElement.style.top = top + "px";
}

10
app/src/protyle/render/av/relation.ts
View file

@ -224,7 +224,7 @@ const genSelectItemHTML = (type: "selected" | "empty" | "unselect", id?: string,
</button>`;
}
if (type == "unselect") {
return `<button data-id="${id}" class="b3-menu__item" data-type="setRelationCell">
return `<button data-id="${id}" class="b3-menu__item" data-position="west" data-type="setRelationCell">
<span class="b3-menu__label fn__ellipsis${isDetached ? "" : " popover__block"}" ${isDetached ? "" : 'style="color:var(--b3-protyle-inline-blockref-color)"'} data-id="${id}">${text}</span>
<svg class="b3-menu__action"><use xlink:href="#iconAdd"></use></svg>
</button>`;
@ -242,7 +242,7 @@ const filterItem = (menuElement: Element, cellElement: HTMLElement, keyword: str
const hasIds: string[] = [];
cellElement.querySelectorAll("span").forEach((item) => {
hasIds.push(item.dataset.id);
selectHTML += `<button data-id="${item.dataset.id}" data-type="setRelationCell" class="b3-menu__item${item.textContent.indexOf(keyword) > -1 ? "" : " fn__none"}" draggable="true">${genSelectItemHTML("selected", item.dataset.id, !item.classList.contains("av__celltext--ref"), item.textContent || window.siyuan.languages.untitled)}</button>`;
selectHTML += `<button data-id="${item.dataset.id}" data-position="west" data-type="setRelationCell" class="b3-menu__item${item.textContent.indexOf(keyword) > -1 ? "" : " fn__none"}" draggable="true">${genSelectItemHTML("selected", item.dataset.id, !item.classList.contains("av__celltext--ref"), item.textContent || window.siyuan.languages.untitled)}</button>`;
});
cells.forEach((item) => {
if (!hasIds.includes(item.block.id)) {
@ -273,7 +273,7 @@ export const bindRelationEvent = (options: {
const hasIds: string[] = [];
options.cellElements[0].querySelectorAll("span").forEach((item) => {
hasIds.push(item.dataset.id);
selectHTML += `<button data-id="${item.dataset.id}" data-type="setRelationCell" class="b3-menu__item" draggable="true">${genSelectItemHTML("selected", item.dataset.id, !item.classList.contains("av__celltext--ref"), item.textContent || window.siyuan.languages.untitled)}</button>`;
selectHTML += `<button data-id="${item.dataset.id}" data-position="west" data-type="setRelationCell" class="b3-menu__item" draggable="true">${genSelectItemHTML("selected", item.dataset.id, !item.classList.contains("av__celltext--ref"), item.textContent || window.siyuan.languages.untitled)}</button>`;
});
cells.forEach((item) => {
if (!hasIds.includes(item.block.id)) {
@ -399,7 +399,7 @@ export const setRelationCell = (protyle: IProtyle, nodeElement: HTMLElement, tar
isDetached: !target.firstElementChild.getAttribute("style")
});
separatorElement.before(target);
target.outerHTML = `<button data-id="${targetId}" data-type="setRelationCell" class="b3-menu__item" draggable="true">${genSelectItemHTML("selected", targetId, !target.querySelector(".popover__block"), target.querySelector(".b3-menu__label").textContent)}</button>`;
target.outerHTML = `<button data-id="${targetId}" data-position="west" data-type="setRelationCell" class="b3-menu__item" draggable="true">${genSelectItemHTML("selected", targetId, !target.querySelector(".popover__block"), target.querySelector(".b3-menu__label").textContent)}</button>`;
if (!separatorElement.nextElementSibling) {
separatorElement.insertAdjacentHTML("afterend", genSelectItemHTML("empty"));
}
@ -431,7 +431,7 @@ export const setRelationCell = (protyle: IProtyle, nodeElement: HTMLElement, tar
},
isDetached: true
});
separatorElement.insertAdjacentHTML("beforebegin", `<button data-id="${rowId}" data-type="setRelationCell" class="b3-menu__item" draggable="true">${genSelectItemHTML("selected", rowId, true, content)}</button>`);
separatorElement.insertAdjacentHTML("beforebegin", `<button data-id="${rowId}" data-position="west" data-type="setRelationCell" class="b3-menu__item" draggable="true">${genSelectItemHTML("selected", rowId, true, content)}</button>`);
}
menuElement.querySelector(".b3-menu__item--current")?.classList.remove("b3-menu__item--current");
menuElement.querySelector(".b3-menu__items .b3-menu__item:not(.fn__none)").classList.add("b3-menu__item--current");