Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-20 16:40:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

🎨 https://github.com/siyuan-note/siyuan/pull/13966

Browse source
This commit is contained in:
Vanessa 2025-02-27 01:02:49 +08:00
parent 0b4cff93ac
commit d00139402e
22 changed files with 152 additions and 154 deletions
Download patch file Download diff file Expand all files Collapse all files

1
app/src/assets/scss/component/_list.scss
View file

@ -287,7 +287,6 @@
&--warning:hover {
color: var(--b3-theme-error);
background-color: var(--b3-list-icon-hover);
}
}

6
app/src/assets/scss/component/_tooltips.scss
View file

@ -37,12 +37,6 @@
}
}
.clonedTooltip {
animation: unset;
opacity: 0;
pointer-events: none;
}
.b3-tooltips {
position: relative;
cursor: pointer;

1
app/src/assets/template/app/window.tpl
View file

@ -23,5 +23,6 @@
<div class="b3-menu__items"></div>
</div>
<div id="message" class="b3-snackbars"></div>
<div id="tooltip" class="tooltip fn__none"></div>
</body>
</html>

1
app/src/assets/template/desktop/index.tpl
View file

@ -32,5 +32,6 @@
<div class="b3-menu__items"></div>
</div>
<div id="message" class="b3-snackbars"></div>
<div id="tooltip" class="tooltip fn__none"></div>
</body>
</html>

1
app/src/assets/template/mobile/index.tpl
View file

@ -65,6 +65,7 @@
<div class="b3-menu__items"></div>
</div>
<div id="message" class="b3-snackbars"></div>
<div id="tooltip" class="tooltip fn__none"></div>
<div id="status" class="status"></div>
<div id="keyboardToolbar" class="keyboard fn__none"></div>
<div class="side-mask fn__none"></div>

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

@ -24,8 +24,7 @@ export const initBlockPopover = (app: App) => {
hasClosestByAttribute(event.target, "data-type", "tab-header") ||
hasClosestByAttribute(event.target, "data-type", "inline-memo") ||
hasClosestByClassName(event.target, "av__calc--ashow") ||
hasClosestByClassName(event.target, "av__cell") ||
hasClosestByAttribute(event.target, "data-type", "setRelationCell");
hasClosestByClassName(event.target, "av__cell");
if (aElement) {
let tooltipClass = "";
let tip = aElement.getAttribute("aria-label") || "";

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

@ -10,93 +10,96 @@ export const showTooltip = (message: string, target: Element, tooltipClass?: str
return;
}
const tooltipElement = document.getElementById("tooltip");
const clonedTooltip = tooltipElement.cloneNode(true) as HTMLElement;
clonedTooltip.id = "clonedTooltip";
clonedTooltip.removeAttribute("style");
clonedTooltip.className = "tooltip";
clonedTooltip.innerHTML = message;
document.body.append(clonedTooltip);
const messageElement = document.getElementById("tooltip");
messageElement.className = tooltipClass ? `tooltip tooltip--${tooltipClass}` : "tooltip";
messageElement.innerHTML = message;
// 避免原本的 top 和 left 影响计算
messageElement.removeAttribute("style");
// position: parentE; parentW; ${number}parentW; ${number}bottom;
// right; right${number}bottom; right${number}top; top;
const position = target.getAttribute("data-position");
const parentRect = target.parentElement.getBoundingClientRect();
let top, left;
let left;
let top;
if (position?.startsWith("right")) {
// block icon and background icon
left = targetRect.right - clonedTooltip.clientWidth + 1;
}
if (position === "parentE") {
// file tree and outline、backlink
top = parentRect.top;
left = parentRect.right + 8;
} else if (position?.endsWith("parentW")) {
// 数据库属性视图
top = parentRect.top + (parseInt(position) || 8);
left = parentRect.left - clonedTooltip.clientWidth;
} else if (position?.endsWith("bottom")) {
top = targetRect.bottom + parseInt(position.replace("right", "")) + 1;
// right${number}bottom - target 右面底对齐; right${number}top - target 右面上对齐;
// scroll & background 无需调整
left = targetRect.right - messageElement.clientWidth;
if (position?.endsWith("bottom")) {
top = targetRect.bottom + parseInt(position.replace("right", "")) || 0;
} else if (position?.endsWith("top")) {
// 数据库视图、编辑器动态滚动条
top = targetRect.top - clonedTooltip.clientHeight - 1;
} else if (position === "directLeft") {
// 关联字段选项
top = targetRect.top + (parseInt(position) || 0);
left = targetRect.left - clonedTooltip.clientWidth - 8 - 1;
top = targetRect.top - messageElement.clientHeight;
}
top = top >= 0 ? top : targetRect.bottom + 1;
left = left >= 0 ? left : targetRect.left;
const topHeight = position === "parentE" ? top : targetRect.top;
const bottomHeight = window.innerHeight - top;
clonedTooltip.style.maxHeight = Math.max(topHeight, bottomHeight) + "px";
if (top + clonedTooltip.clientHeight > window.innerHeight && topHeight > bottomHeight) {
top = (position === "parentE" || position === "directLeft" ? parentRect.bottom : targetRect.top) - clonedTooltip.clientHeight - 1;
} else if (position === "parentE") {
// parentE: file tree and outline、backlink & viewcard
top = Math.max(0, parentRect.top - (messageElement.clientHeight - parentRect.height) / 2);
if (top > window.innerHeight - messageElement.clientHeight) {
top = window.innerHeight - messageElement.clientHeight;
}
if (left + clonedTooltip.clientWidth > window.innerWidth) {
if (position === "parentE") {
left = parentRect.left - 8 - clonedTooltip.clientWidth - 1;
left = parentRect.right + 8;
if (left + messageElement.clientWidth > window.innerWidth) {
left = parentRect.left - messageElement.clientWidth - 8;
}
} else if (position === "parentW") {
// ${number}parentW: av 属性视图 & col & select
top = Math.max(0, parentRect.top - (messageElement.clientHeight - parentRect.height) / 2);
if (top > window.innerHeight - messageElement.clientHeight) {
top = window.innerHeight - messageElement.clientHeight;
}
left = parentRect.left - messageElement.clientWidth;
if (left < 0) {
left = parentRect.right;
}
} else if (position === "west") {
// west: gutter & 标题图标 & av relation
top = Math.max(0, targetRect.top - (messageElement.clientHeight - targetRect.height) / 2);
if (top > window.innerHeight - messageElement.clientHeight) {
top = window.innerHeight - messageElement.clientHeight;
}
left = targetRect.left - messageElement.clientWidth;
if (left < 0) {
left = targetRect.right;
}
} else if (position === "north") {
// north: av 视图，列，多选描述
left = Math.max(0, targetRect.left - (messageElement.clientWidth - targetRect.width) / 2);
top = targetRect.top - messageElement.clientHeight;
if (top < 0) {
if (targetRect.top < window.innerHeight - targetRect.bottom) {
top = targetRect.bottom;
messageElement.style.maxHeight = (window.innerHeight - targetRect.bottom) + "px";
} else {
left = window.innerWidth - 1 - clonedTooltip.clientWidth;
top = 0;
messageElement.style.maxHeight = targetRect.top + "px";
}
}
if (left + messageElement.clientWidth > window.innerWidth) {
left = window.innerWidth - messageElement.clientWidth;
}
} else {
// ${number}south & 默认值
const positionDiff = parseInt(position) || 0;
left = Math.max(0, targetRect.left - (messageElement.clientWidth - targetRect.width) / 2);
top = targetRect.bottom + positionDiff;
// 确保不会超出屏幕
if (top < 0 || left < 0) {
top = targetRect.bottom + 1;
left = targetRect.left;
if (top + messageElement.clientHeight > window.innerHeight) {
if (targetRect.top - positionDiff > window.innerHeight - top) {
top = targetRect.top - positionDiff - messageElement.clientHeight;
messageElement.style.maxHeight = (targetRect.top - positionDiff) + "px";
} else {
messageElement.style.maxHeight = (window.innerHeight - top) + "px";
}
clonedTooltip.style.top = top + "px";
clonedTooltip.style.left = left + "px";
const cloneStyle = clonedTooltip.getAttribute("style");
const className = tooltipClass ? `tooltip tooltip--${tooltipClass}` : "tooltip";
if (tooltipElement.getAttribute("style") !== cloneStyle) {
tooltipElement.setAttribute("style", cloneStyle);
}
if (tooltipElement.className !== className) {
tooltipElement.className = className;
if (left + messageElement.clientWidth > window.innerWidth) {
left = window.innerWidth - messageElement.clientWidth;
}
if (tooltipElement.innerHTML !== clonedTooltip.innerHTML) {
tooltipElement.innerHTML = clonedTooltip.innerHTML;
}
clonedTooltip.remove();
messageElement.style.top = top + "px";
messageElement.style.left = left + "px";
};
export const hideTooltip = () => {
const tooltipElement = document.getElementById("tooltip");
if (tooltipElement && !tooltipElement.classList.contains("fn__none")) {
tooltipElement.classList.add("fn__none");
}
document.getElementById("tooltip").classList.add("fn__none");
};

4
app/src/history/history.ts
View file

@ -636,10 +636,10 @@ const bindEvent = (app: App, element: Element, dialog?: Dialog) => {
ariaLabel = window.siyuan.languages.historyOutline;
}
html += `<li data-notebook-id="${docItem.notebook}" data-created="${created}" data-type="${typeElement.value === "2" ? "assets" : "doc"}" data-path="${docItem.path}" class="b3-list-item b3-list-item--hide-action" style="padding-left: 22px">
<span class="${opElement.value === "all" ? "" : "fn__none"}${chipClass}ariaLabel" data-position="6bottom" aria-label="${ariaLabel}">${docItem.op.substring(0, 1).toUpperCase()}</span>
<span class="${opElement.value === "all" ? "" : "fn__none"}${chipClass}ariaLabel" data-position="6south" aria-label="${ariaLabel}">${docItem.op.substring(0, 1).toUpperCase()}</span>
<span class="b3-list-item__text" title="${escapeAttr(docItem.title)}">${escapeHtml(docItem.title)}</span>
<span class="fn__space"></span>
<span class="b3-list-item__action ariaLabel" data-type="rollback" data-position="6bottom" aria-label="${window.siyuan.languages.rollback}">
<span class="b3-list-item__action ariaLabel" data-type="rollback" data-position="6south" aria-label="${window.siyuan.languages.rollback}">
<svg><use xlink:href="#iconUndo"></use></svg>
</span>
</li>`;

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

@ -453,7 +453,7 @@ export class Files extends Model {
item.style.opacity = "";
// https://github.com/siyuan-note/siyuan/issues/11587
if (index === 0) {
const airaLabelElement = item.querySelector(".ariaLabel") || item.querySelector(".b3-list-item__text");
const airaLabelElement = item.querySelector(".ariaLabel");
if (airaLabelElement) {
showTooltip(airaLabelElement.getAttribute("aria-label"), airaLabelElement);
}

8
app/src/protyle/gutter/index.ts
View file

@ -2338,9 +2338,9 @@ export class Gutter {
} else if (rowElement.querySelector('[data-dtype="block"]')?.getAttribute("data-detached") === "true") {
iconAriaLabel = window.siyuan.languages.rowTip.substring(0, window.siyuan.languages.rowTip.lastIndexOf("<br"));
}
html = `<button data-type="NodeAttributeViewRowMenu" data-node-id="${dataNodeId}" data-row-id="${rowElement.dataset.id}" class="ariaLabel" data-position="right" aria-label="${iconAriaLabel}"><svg><use xlink:href="#iconDrag"></use></svg><span ${protyle.disabled ? "" : 'draggable="true" class="fn__grab"'}></span></button>`;
html = `<button data-type="NodeAttributeViewRowMenu" data-node-id="${dataNodeId}" data-row-id="${rowElement.dataset.id}" class="ariaLabel" data-position="west" aria-label="${iconAriaLabel}"><svg><use xlink:href="#iconDrag"></use></svg><span ${protyle.disabled ? "" : 'draggable="true" class="fn__grab"'}></span></button>`;
if (!protyle.disabled) {
html = `<button data-type="NodeAttributeViewRow" data-node-id="${dataNodeId}" data-row-id="${rowElement.dataset.id}" class="ariaLabel" data-position="right" aria-label="${isMac() ? window.siyuan.languages.addBelowAbove : window.siyuan.languages.addBelowAbove.replace("⌥", "Alt+")}"><svg><use xlink:href="#iconAdd"></use></svg></button>${html}`;
html = `<button data-type="NodeAttributeViewRow" data-node-id="${dataNodeId}" data-row-id="${rowElement.dataset.id}" class="ariaLabel" data-position="west" aria-label="${isMac() ? window.siyuan.languages.addBelowAbove : window.siyuan.languages.addBelowAbove.replace("⌥", "Alt+")}"><svg><use xlink:href="#iconAdd"></use></svg></button>${html}`;
}
break;
}
@ -2377,7 +2377,7 @@ export class Gutter {
if (protyle.options.backlinkData) {
popoverHTML = `class="popover__block" data-id="${dataNodeId}"`;
}
const buttonHTML = `<button class="ariaLabel" data-position="right" aria-label="${gutterTip}"
const buttonHTML = `<button class="ariaLabel" data-position="west" aria-label="${gutterTip}"
data-type="${type}" data-subtype="${nodeElement.getAttribute("data-subtype")}" data-node-id="${dataNodeId}">
<svg><use xlink:href="#${getIconByType(type, nodeElement.getAttribute("data-subtype"))}"></use></svg>
<span ${popoverHTML} ${protyle.disabled ? "" : 'draggable="true"'}></span>
@ -2388,7 +2388,7 @@ data-type="${type}" data-subtype="${nodeElement.getAttribute("data-subtype")}" d
let foldHTML = "";
if (type === "NodeListItem" && nodeElement.childElementCount > 3 || type === "NodeHeading") {
const fold = nodeElement.getAttribute("fold");
foldHTML = `<button class="ariaLabel" data-position="right" aria-label="${window.siyuan.languages.fold}"
foldHTML = `<button class="ariaLabel" data-position="west" aria-label="${window.siyuan.languages.fold}"
data-type="fold" style="cursor:inherit;"><svg style="width: 10px${fold && fold === "1" ? "" : ";transform:rotate(90deg)"}"><use xlink:href="#iconPlay"></use></svg></button>`;
}
if (type === "NodeListItem" || type === "NodeList") {

12
app/src/protyle/header/Background.ts
View file

@ -110,12 +110,12 @@ export class Background {
this.element.innerHTML = `<div class="protyle-background__img">
<img src="${this.transparentData}">
<div class="protyle-icons">
<span class="protyle-icon protyle-icon--first" style="position: relative;overflow: hidden"><input aria-label="${window.siyuan.languages.upload}" class="ariaLabel" data-position="right4bottom" type="file" style="position: absolute;height: 100%;top: 0;right: 0;opacity: .001;overflow: hidden;cursor: pointer;"><svg><use xlink:href="#iconUpload"></use></svg></span>
<span class="protyle-icon ariaLabel" data-position="right4bottom" data-type="link" aria-label="${window.siyuan.languages.link}"><svg><use xlink:href="#iconLink"></use></svg></span>
<span class="protyle-icon ariaLabel" data-position="right4bottom" data-type="asset" aria-label="${window.siyuan.languages.assets}"><svg><use xlink:href="#iconImage"></use></svg></span>
<span class="protyle-icon ariaLabel" data-position="right4bottom" data-type="show-random" aria-label="${window.siyuan.languages.builtIn}"><svg><use xlink:href="#iconRefresh"></use></svg></span>
<span class="protyle-icon ariaLabel fn__none" data-position="right4bottom" data-type="position" aria-label="${window.siyuan.languages.dragPosition}"><svg><use xlink:href="#iconMove"></use></svg></span>
<span class="protyle-icon protyle-icon--last ariaLabel" data-position="right4bottom" data-type="remove" aria-label="${window.siyuan.languages.remove}"><svg><use xlink:href="#iconTrashcan"></use></svg></span>
<span class="protyle-icon protyle-icon--first" style="position: relative;overflow: hidden"><input aria-label="${window.siyuan.languages.upload}" class="ariaLabel" data-position="right2bottom" type="file" style="position: absolute;height: 100%;top: 0;right: 0;opacity: .001;overflow: hidden;cursor: pointer;"><svg><use xlink:href="#iconUpload"></use></svg></span>
<span class="protyle-icon ariaLabel" data-position="right2bottom" data-type="link" aria-label="${window.siyuan.languages.link}"><svg><use xlink:href="#iconLink"></use></svg></span>
<span class="protyle-icon ariaLabel" data-position="right2bottom" data-type="asset" aria-label="${window.siyuan.languages.assets}"><svg><use xlink:href="#iconImage"></use></svg></span>
<span class="protyle-icon ariaLabel" data-position="right2bottom" data-type="show-random" aria-label="${window.siyuan.languages.builtIn}"><svg><use xlink:href="#iconRefresh"></use></svg></span>
<span class="protyle-icon ariaLabel fn__none" data-position="right2bottom" data-type="position" aria-label="${window.siyuan.languages.dragPosition}"><svg><use xlink:href="#iconMove"></use></svg></span>
<span class="protyle-icon protyle-icon--last ariaLabel" data-position="right2bottom" data-type="remove" aria-label="${window.siyuan.languages.remove}"><svg><use xlink:href="#iconTrashcan"></use></svg></span>
</div>
<div class="protyle-icons fn__none"><span class="protyle-icon protyle-icon--text">${window.siyuan.languages.dragPosition}</span></div>
<div class="protyle-icons fn__none" style="opacity: .86;">

2
app/src/protyle/header/Title.ts
View file

@ -40,7 +40,7 @@ export class Title {
}
/// #if !MOBILE
// 标题内需要一个空格，避免首次加载出现`请输入文档名`干扰
this.element.innerHTML = `<span aria-label="${isMac() ? window.siyuan.languages.gutterTip2 : window.siyuan.languages.gutterTip2.replace("⇧", "Shift+")}" data-position="right" class="protyle-title__icon ariaLabel"><svg><use xlink:href="#iconFile"></use></svg></span>
this.element.innerHTML = `<span aria-label="${isMac() ? window.siyuan.languages.gutterTip2 : window.siyuan.languages.gutterTip2.replace("⇧", "Shift+")}" data-position="west" class="protyle-title__icon ariaLabel"><svg><use xlink:href="#iconFile"></use></svg></span>
<div contenteditable="true" spellcheck="${window.siyuan.config.editor.spellcheck}" class="protyle-title__input" data-tip="${window.siyuan.languages._kernel[16]}"> </div><div class="protyle-attr"></div>`;
this.editElement = this.element.querySelector(".protyle-title__input");
this.editElement.addEventListener("paste", (event: ClipboardEvent) => {

6
app/src/protyle/render/av/col.ts
View file

@ -93,7 +93,7 @@ export const getEditHTML = (options: {
<span class="b3-menu__avemoji" data-col-type="${colData.type}" data-icon="${colData.icon}" data-type="update-icon">${colData.icon ? unicode2Emoji(colData.icon) : `<svg style="width: 14px;height: 14px"><use xlink:href="#${getColIconByType(colData.type)}"></use></svg>`}</span>
<div class="b3-form__icona fn__block">
<input data-type="name" class="b3-text-field b3-form__icona-input" type="text">
<svg data-position="top" class="b3-form__icona-icon ariaLabel" aria-label="${colData.desc ? escapeAriaLabel(colData.desc) : window.siyuan.languages.addDesc}"><use xlink:href="#iconInfo"></use></svg>
<svg data-position="north" class="b3-form__icona-icon ariaLabel" aria-label="${colData.desc ? escapeAriaLabel(colData.desc) : window.siyuan.languages.addDesc}"><use xlink:href="#iconInfo"></use></svg>
</div>
</div>
<div class="fn__none">
@ -123,7 +123,7 @@ export const getEditHTML = (options: {
const airaLabel = item.desc ? `${escapeAriaLabel(item.name)}<div class='ft__on-surface'>${escapeAriaLabel(item.desc || "")}</div>` : "";
html += `<button class="b3-menu__item${html ? "" : " b3-menu__item--current"}" draggable="true" data-name="${escapeAttr(item.name)}" data-desc="${escapeAttr(item.desc || "")}" data-color="${item.color}">
<svg class="b3-menu__icon fn__grab"><use xlink:href="#iconDrag"></use></svg>
<div class="fn__flex-1 ariaLabel" data-position="2parentW" aria-label="${airaLabel}">
<div class="fn__flex-1 ariaLabel" data-position="parentW" aria-label="${airaLabel}">
<span class="b3-chip" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">
<span class="fn__ellipsis">${escapeHtml(item.name)}</span>
</span>
@ -673,7 +673,7 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
<span class="b3-menu__avemoji">${cellElement.dataset.icon ? unicode2Emoji(cellElement.dataset.icon) : `<svg style="height: 14px;width: 14px;"><use xlink:href="#${getColIconByType(type)}"></use></svg>`}</span>
<div class="b3-form__icona fn__block">
<input class="b3-text-field b3-form__icona-input" type="text">
<svg data-position="top" class="b3-form__icona-icon ariaLabel" aria-label="${oldDesc ? escapeAriaLabel(oldDesc) : window.siyuan.languages.addDesc}"><use xlink:href="#iconInfo"></use></svg>
<svg data-position="north" class="b3-form__icona-icon ariaLabel" aria-label="${oldDesc ? escapeAriaLabel(oldDesc) : window.siyuan.languages.addDesc}"><use xlink:href="#iconInfo"></use></svg>
</div>
</div>
<div class="fn__none">

14
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-position="directLeft" data-type="setRelationCell">
return `<button data-id="${id}" class="b3-menu__item ariaLabel" 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>`;
@ -243,8 +243,8 @@ const filterItem = (menuElement: Element, cellElement: HTMLElement, keyword: str
cellElement.querySelectorAll(".av__cell--relation").forEach((relationItem: HTMLElement) => {
const item = relationItem.querySelector(".av__celltext") as HTMLElement;
hasIds.push(item.dataset.id);
selectHTML += `<button data-id="${item.dataset.id}" data-position="directLeft" data-type="setRelationCell"
class="b3-menu__item${item.textContent.indexOf(keyword) > -1 ? "" : " fn__none"}"
selectHTML += `<button data-id="${item.dataset.id}" data-position="west" data-type="setRelationCell"
class="b3-menu__item ariaLabel${item.textContent.indexOf(keyword) > -1 ? "" : " fn__none"}"
draggable="true">${genSelectItemHTML("selected", item.dataset.id, !item.classList.contains("av__celltext--ref"), Lute.EscapeHTMLStr(item.textContent || window.siyuan.languages.untitled))}</button>`;
});
cells.forEach((item) => {
@ -277,7 +277,7 @@ export const bindRelationEvent = (options: {
options.cellElements[0].querySelectorAll(".av__cell--relation").forEach((relationItem: HTMLElement) => {
const item = relationItem.querySelector(".av__celltext") as HTMLElement;
hasIds.push(item.dataset.id);
selectHTML += `<button data-id="${item.dataset.id}" data-position="directLeft" data-type="setRelationCell" class="b3-menu__item"
selectHTML += `<button data-id="${item.dataset.id}" data-position="west" data-type="setRelationCell" class="b3-menu__item ariaLabel"
draggable="true">${genSelectItemHTML("selected", item.dataset.id, !item.classList.contains("av__celltext--ref"), Lute.EscapeHTMLStr(item.textContent || window.siyuan.languages.untitled))}</button>`;
});
cells.forEach((item) => {
@ -404,7 +404,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"
target.outerHTML = `<button data-id="${targetId}" data-position="west" data-type="setRelationCell" class="b3-menu__item ariaLabel"
draggable="true">${genSelectItemHTML("selected", targetId, !target.querySelector(".popover__block"), Lute.EscapeHTMLStr(target.querySelector(".b3-menu__label").textContent))}</button>`;
if (!separatorElement.nextElementSibling) {
separatorElement.insertAdjacentHTML("afterend", genSelectItemHTML("empty"));
@ -437,8 +437,8 @@ draggable="true">${genSelectItemHTML("selected", targetId, !target.querySelector
},
isDetached: true
});
separatorElement.insertAdjacentHTML("beforebegin", `<button data-id="${rowId}" data-position="directLeft" data-type="setRelationCell"
class="b3-menu__item" draggable="true">${genSelectItemHTML("selected", rowId, true, Lute.EscapeHTMLStr(content))}</button>`);
separatorElement.insertAdjacentHTML("beforebegin", `<button data-id="${rowId}" data-position="west" data-type="setRelationCell"
class="b3-menu__item ariaLabel" draggable="true">${genSelectItemHTML("selected", rowId, true, Lute.EscapeHTMLStr(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");

12
app/src/protyle/render/av/render.ts
View file

@ -134,7 +134,7 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: () => void, v
}
tableHTML += `<div class="av__cell av__cell--header" data-col-id="${column.id}" draggable="true"
data-icon="${column.icon}" data-dtype="${column.type}" data-wrap="${column.wrap}" data-pin="${column.pin}"
data-desc="${escapeAttr(column.desc)}" data-position="top"
data-desc="${escapeAttr(column.desc)}" data-position="north"
style="width: ${column.width || "200px"};">
${column.icon ? unicode2Emoji(column.icon, "av__cellheadericon", true) : `<svg class="av__cellheadericon"><use xlink:href="#${getColIconByType(column.type)}"></use></svg>`}
<span class="av__celltext fn__flex-1">${escapeHtml(column.name)}</span>
@ -163,7 +163,7 @@ style="width: ${column.width || "200px"}">${getCalcValue(column) || `<svg><use x
tableHTML += `<div class="block__icons" style="min-height: auto">
<div class="block__icon block__icon--show" data-type="av-header-more"><svg><use xlink:href="#iconMore"></use></svg></div>
<div class="fn__space"></div>
<div class="block__icon block__icon--show ariaLabel" aria-label="${window.siyuan.languages.newCol}" data-type="av-header-add" data-position="4bottom"><svg><use xlink:href="#iconAdd"></use></svg></div>
<div class="block__icon block__icon--show ariaLabel" aria-label="${window.siyuan.languages.newCol}" data-type="av-header-add" data-position="4south"><svg><use xlink:href="#iconAdd"></use></svg></div>
</div>
</div>`;
// body
@ -202,7 +202,7 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value, rowIndex)}
let tabHTML = "";
let viewData: IAVView;
response.data.views.forEach((item: IAVView) => {
tabHTML += `<div data-position="top" data-id="${item.id}" data-page="${item.pageSize}" data-desc="${escapeAriaLabel(item.desc || "")}" class="ariaLabel item${item.id === response.data.viewID ? " item--focus" : ""}">
tabHTML += `<div data-position="north" data-id="${item.id}" data-page="${item.pageSize}" data-desc="${escapeAriaLabel(item.desc || "")}" class="ariaLabel item${item.id === response.data.viewID ? " item--focus" : ""}">
${item.icon ? unicode2Emoji(item.icon, "item__graphic", true) : '<svg class="item__graphic"><use xlink:href="#iconTable"></use></svg>'}
<span class="item__text">${escapeHtml(item.name)}</span>
</div>`;
@ -236,7 +236,7 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value, rowIndex)}
${tabHTML}
</div>
<div class="fn__space"></div>
<span data-type="av-add" class="block__icon ariaLabel" data-position="8bottom" aria-label="${window.siyuan.languages.newView}">
<span data-type="av-add" class="block__icon ariaLabel" data-position="8south" aria-label="${window.siyuan.languages.newView}">
<svg><use xlink:href="#iconAdd"></use></svg>
</span>
<div class="fn__flex-1"></div>
@ -266,11 +266,11 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value, rowIndex)}
<svg><use xlink:href="#iconMore"></use></svg>
</span>
<div class="fn__space"></div>
<span data-type="av-add-more" class="block__icon ariaLabel" data-position="8bottom" aria-label="${window.siyuan.languages.newRow}">
<span data-type="av-add-more" class="block__icon ariaLabel" data-position="8south" aria-label="${window.siyuan.languages.newRow}">
<svg><use xlink:href="#iconAdd"></use></svg>
</span>
<div class="fn__space"></div>
${response.data.isMirror ? ` <span data-av-id="${response.data.id}" data-popover-url="/api/av/getMirrorDatabaseBlocks" class="popover__block block__icon block__icon--show ariaLabel" data-position="8bottom" aria-label="${window.siyuan.languages.mirrorTip}">
${response.data.isMirror ? ` <span data-av-id="${response.data.id}" data-popover-url="/api/av/getMirrorDatabaseBlocks" class="popover__block block__icon block__icon--show ariaLabel" data-position="8south" aria-label="${window.siyuan.languages.mirrorTip}">
<svg><use xlink:href="#iconSplitLR"></use></svg></span><div class="fn__space"></div>` : ""}
</div>
<div contenteditable="${protyle.disabled || hasClosestByAttribute(e, "data-type", "NodeBlockQueryEmbed") ? "false" : "true"}" spellcheck="${window.siyuan.config.editor.spellcheck.toString()}" class="av__title${viewData.hideAttrViewName ? " fn__none" : ""}" data-title="${response.data.name || ""}" data-tip="${window.siyuan.languages.title}">${response.data.name || ""}</div>

4
app/src/protyle/render/av/select.ts
View file

@ -31,7 +31,7 @@ const filterSelectHTML = (key: string, options: {
const airaLabel = item.desc ? `${escapeAriaLabel(item.name)}<div class='ft__on-surface'>${escapeAriaLabel(item.desc || "")}</div>` : "";
html += `<button data-type="addColOptionOrCell" class="b3-menu__item" data-name="${escapeAttr(item.name)}" data-desc="${escapeAttr(item.desc || "")}" draggable="true" data-color="${item.color}">
<svg class="b3-menu__icon fn__grab"><use xlink:href="#iconDrag"></use></svg>
<div class="fn__flex-1 ariaLabel" data-position="2parentW" aria-label="${airaLabel}">
<div class="fn__flex-1 ariaLabel" data-position="parentW" aria-label="${airaLabel}">
<span class="b3-chip" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">
<span class="fn__ellipsis">${escapeHtml(item.name)}</span>
</span>
@ -224,7 +224,7 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
label: `<div class="fn__hr"></div>
<div class="b3-form__icona fn__block">
<input class="b3-text-field b3-form__icona-input" type="text">
<svg data-position="top" class="b3-form__icona-icon ariaLabel" aria-label="${desc ? escapeAriaLabel(desc) : window.siyuan.languages.addDesc}"><use xlink:href="#iconInfo"></use></svg>
<svg data-position="north" class="b3-form__icona-icon ariaLabel" aria-label="${desc ? escapeAriaLabel(desc) : window.siyuan.languages.addDesc}"><use xlink:href="#iconInfo"></use></svg>
</div>
<div class="fn__none">
<div class="fn__hr"></div>

2
app/src/protyle/render/av/view.ts
View file

@ -211,7 +211,7 @@ export const getViewHTML = (data: IAV) => {
<span class="b3-menu__avemoji" data-type="update-view-icon">${view.icon ? unicode2Emoji(view.icon) : '<svg style="height: 14px;width: 14px"><use xlink:href="#iconTable"></use></svg>'}</span>
<div class="b3-form__icona fn__block">
<input data-type="name" class="b3-text-field b3-form__icona-input" type="text" data-value="${escapeAttr(view.name)}">
<svg data-position="top" class="b3-form__icona-icon ariaLabel" aria-label="${view.desc ? escapeAriaLabel(view.desc) : window.siyuan.languages.addDesc}"><use xlink:href="#iconInfo"></use></svg>
<svg data-position="north" class="b3-form__icona-icon ariaLabel" aria-label="${view.desc ? escapeAriaLabel(view.desc) : window.siyuan.languages.addDesc}"><use xlink:href="#iconInfo"></use></svg>
</div>
</div>
<div class="fn__none">

2
app/src/protyle/scroll/index.ts
View file

@ -19,7 +19,7 @@ export class Scroll {
this.parentElement.innerHTML = `<div class="protyle-scroll__up ariaLabel" data-position="right4top" aria-label="${updateHotkeyTip("⌘Home")}">
<svg><use xlink:href="#iconUp"></use></svg>
</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="right20bottom" aria-label="Blocks 1/1">
<input class="b3-slider" type="range" max="1" min="1" step="1" value="1" />
</div>
<div class="protyle-scroll__down ariaLabel" data-position="right4bottom" aria-label="${updateHotkeyTip("⌘End")}">

12
app/src/protyle/toolbar/Font.ts
View file

@ -36,14 +36,14 @@ export const appearanceMenu = (protyle: IProtyle, nodeElements?: Element[]) => {
"var(--b3-font-color5)", "var(--b3-font-color6)", "var(--b3-font-color7)", "var(--b3-font-color8)",
"var(--b3-font-color9)", "var(--b3-font-color10)", "var(--b3-font-color11)", "var(--b3-font-color12)",
"var(--b3-font-color13)"].forEach((item) => {
colorHTML += `<button ${item ? `class="color__square" style="color:${item}"` : `class="color__square ariaLabel" data-position="3bottom" aria-label="${window.siyuan.languages.default}"`} data-type="color">A</button>`;
colorHTML += `<button ${item ? `class="color__square" style="color:${item}"` : `class="color__square ariaLabel" data-position="3south" aria-label="${window.siyuan.languages.default}"`} data-type="color">A</button>`;
});
let bgHTML = "";
["", "var(--b3-font-background1)", "var(--b3-font-background2)", "var(--b3-font-background3)", "var(--b3-font-background4)",
"var(--b3-font-background5)", "var(--b3-font-background6)", "var(--b3-font-background7)", "var(--b3-font-background8)",
"var(--b3-font-background9)", "var(--b3-font-background10)", "var(--b3-font-background11)", "var(--b3-font-background12)",
"var(--b3-font-background13)"].forEach((item) => {
bgHTML += `<button ${item ? `class="color__square" style="background-color:${item}"` : `class="color__square ariaLabel" data-position="3bottom" aria-label="${window.siyuan.languages.default}"`} data-type="backgroundColor"></button>`;
bgHTML += `<button ${item ? `class="color__square" style="background-color:${item}"` : `class="color__square ariaLabel" data-position="3south" aria-label="${window.siyuan.languages.default}"`} data-type="backgroundColor"></button>`;
});
const element = document.createElement("div");
@ -69,10 +69,10 @@ export const appearanceMenu = (protyle: IProtyle, nodeElements?: Element[]) => {
const lastFontStatus = item.split(Constants.ZWSP);
switch (lastFontStatus[0]) {
case "color":
lastColorHTML += `<button class="color__square ariaLabel" data-position="3bottom" aria-label="${window.siyuan.languages.colorFont}${lastFontStatus[1] ? "" : " " + window.siyuan.languages.default}" ${lastFontStatus[1] ? `style="color:${lastFontStatus[1]}"` : ""} data-type="${lastFontStatus[0]}">A</button>`;
lastColorHTML += `<button class="color__square ariaLabel" data-position="3south" aria-label="${window.siyuan.languages.colorFont}${lastFontStatus[1] ? "" : " " + window.siyuan.languages.default}" ${lastFontStatus[1] ? `style="color:${lastFontStatus[1]}"` : ""} data-type="${lastFontStatus[0]}">A</button>`;
break;
case "backgroundColor":
lastColorHTML += `<button class="color__square ariaLabel" data-position="3bottom" aria-label="${window.siyuan.languages.colorPrimary}${lastFontStatus[1] ? "" : " " + window.siyuan.languages.default}" ${lastFontStatus[1] ? `style="background-color:${lastFontStatus[1]}"` : ""} data-type="${lastFontStatus[0]}"></button>`;
lastColorHTML += `<button class="color__square ariaLabel" data-position="3south" aria-label="${window.siyuan.languages.colorPrimary}${lastFontStatus[1] ? "" : " " + window.siyuan.languages.default}" ${lastFontStatus[1] ? `style="background-color:${lastFontStatus[1]}"` : ""} data-type="${lastFontStatus[0]}"></button>`;
break;
case "style2":
lastColorHTML += `<button data-type="${lastFontStatus[0]}" class="protyle-font__style" style="-webkit-text-stroke: 0.2px var(--b3-theme-on-background);-webkit-text-fill-color : transparent;">${window.siyuan.languages.hollow}</button>`;
@ -86,7 +86,7 @@ export const appearanceMenu = (protyle: IProtyle, nodeElements?: Element[]) => {
}
break;
case "style1":
lastColorHTML += `<button class="color__square ariaLabel" data-position="3bottom" aria-label="${window.siyuan.languages.color}${lastFontStatus[1] ? "" : " " + window.siyuan.languages.default}" ${lastFontStatus[1] ? `style="background-color:${lastFontStatus[1]};color:${lastFontStatus[2]}"` : ""} data-type="${lastFontStatus[0]}">A</button>`;
lastColorHTML += `<button class="color__square ariaLabel" data-position="3south" aria-label="${window.siyuan.languages.color}${lastFontStatus[1] ? "" : " " + window.siyuan.languages.default}" ${lastFontStatus[1] ? `style="background-color:${lastFontStatus[1]};color:${lastFontStatus[2]}"` : ""} data-type="${lastFontStatus[0]}">A</button>`;
break;
case "clear":
lastColorHTML += `<button style="height: 26px;display: flex;align-items: center;padding: 0 5px;" data-type="${lastFontStatus[0]}" class="protyle-font__style ariaLabel" aria-label="${window.siyuan.languages.clearFontStyle}"><svg class="svg--mid"><use xlink:href="#iconTrashcan"></use></svg></button>`;
@ -113,7 +113,7 @@ export const appearanceMenu = (protyle: IProtyle, nodeElements?: Element[]) => {
<div>${window.siyuan.languages.color}</div>
<div class="fn__hr--small"></div>
<div class="fn__flex fn__flex-wrap">
<button class="color__square ariaLabel" data-position="3bottom" data-type="style1" aria-label="${window.siyuan.languages.default}">A</button>
<button class="color__square ariaLabel" data-position="3south" data-type="style1" aria-label="${window.siyuan.languages.default}">A</button>
<button class="color__square" data-type="style1" style="color: var(--b3-card-error-color);background-color: var(--b3-card-error-background);">A</button>
<button class="color__square" data-type="style1" style="color: var(--b3-card-warning-color);background-color: var(--b3-card-warning-background);">A</button>
<button class="color__square" data-type="style1" style="color: var(--b3-card-info-color);background-color: var(--b3-card-info-background);">A</button>

14
app/src/search/assets.ts
View file

@ -28,18 +28,18 @@ export const openSearchAsset = (element: HTMLElement, isStick: boolean) => {
enterTip = `<kbd>${window.siyuan.languages.enterKey}/${window.siyuan.languages.doubleClick}</kbd> ${window.siyuan.languages.showInFolder}`;
/// #endif
element.innerHTML = `<div class="block__icons">
<span data-type="assetPrevious" class="block__icon block__icon--show ariaLabel" data-position="9bottom" disabled="disabled" aria-label="${window.siyuan.languages.previousLabel}"><svg><use xlink:href='#iconLeft'></use></svg></span>
<span data-type="assetPrevious" class="block__icon block__icon--show ariaLabel" data-position="9south" disabled="disabled" aria-label="${window.siyuan.languages.previousLabel}"><svg><use xlink:href='#iconLeft'></use></svg></span>
<span class="fn__space"></span>
<span data-type="assetNext" class="block__icon block__icon--show ariaLabel" data-position="9bottom" disabled="disabled" aria-label="${window.siyuan.languages.nextLabel}"><svg><use xlink:href='#iconRight'></use></svg></span>
<span data-type="assetNext" class="block__icon block__icon--show ariaLabel" data-position="9south" disabled="disabled" aria-label="${window.siyuan.languages.nextLabel}"><svg><use xlink:href='#iconRight'></use></svg></span>
<span class="fn__space"></span>
<span id="searchAssetResult" class="ft__selectnone"></span>
<span class="fn__flex-1"></span>
<span class="fn__space"></span>
<span id="assetMore" aria-label="${window.siyuan.languages.more}" class="block__icon block__icon--show ariaLabel" data-position="9bottom">
<span id="assetMore" aria-label="${window.siyuan.languages.more}" class="block__icon block__icon--show ariaLabel" data-position="9south">
<svg><use xlink:href="#iconMore"></use></svg>
</span>
<span class="fn__space"></span>
<span id="searchAssetClose" aria-label="${isStick ? window.siyuan.languages.stickSearch : window.siyuan.languages.globalSearch}" class="block__icon block__icon--show ariaLabel" data-position="9bottom">
<span id="searchAssetClose" aria-label="${isStick ? window.siyuan.languages.stickSearch : window.siyuan.languages.globalSearch}" class="block__icon block__icon--show ariaLabel" data-position="9south">
<svg><use xlink:href="#iconBack"></use></svg>
</span>
</div>
@ -52,15 +52,15 @@ export const openSearchAsset = (element: HTMLElement, isStick: boolean) => {
<input id="searchAssetInput" value="${localSearch.k}" class="b3-text-field b3-text-field--text" placeholder="${window.siyuan.languages.keyword}">
</div>
<div class="block__icons">
<span data-type="assetRefresh" aria-label="${window.siyuan.languages.refresh}" class="block__icon ariaLabel" data-position="9bottom">
<span data-type="assetRefresh" aria-label="${window.siyuan.languages.refresh}" class="block__icon ariaLabel" data-position="9south">
<svg><use xlink:href="#iconRefresh"></use></svg>
</span>
<span class="fn__space"></span>
<span id="assetSyntaxCheck" aria-label="${getQueryTip(localSearch.method)}" class="block__icon ariaLabel" data-position="9bottom">
<span id="assetSyntaxCheck" aria-label="${getQueryTip(localSearch.method)}" class="block__icon ariaLabel" data-position="9south">
<svg><use xlink:href="#iconRegex"></use></svg>
</span>
<span class="fn__space"></span>
<span id="assetFilter" aria-label="${window.siyuan.languages.type}" class="block__icon ariaLabel" data-position="9bottom">
<span id="assetFilter" aria-label="${window.siyuan.languages.type}" class="block__icon ariaLabel" data-position="9south">
<svg><use xlink:href="#iconFilter"></use></svg>
</span>
</div>

2
app/src/search/menu.ts
View file

@ -643,7 +643,7 @@ export const initCriteriaMenu = (element: HTMLElement, data: Config.IUILayoutTab
<span class="fn__flex-1"></span>
<button data-type="saveCriterion" class="b3-button b3-button--small b3-button--outline fn__flex-center">${window.siyuan.languages.saveCriterion}</button>
<span class="fn__space"></span>
<button data-type="removeCriterion" aria-label="${window.siyuan.languages.useCriterion}" class="ariaLabel b3-button b3-button--small b3-button--outline fn__flex-center fn__flex-shrink" data-position="9bottom">${window.siyuan.languages.removeCriterion}</button>
<button data-type="removeCriterion" aria-label="${window.siyuan.languages.useCriterion}" class="ariaLabel b3-button b3-button--small b3-button--outline fn__flex-center fn__flex-shrink" data-position="9south">${window.siyuan.languages.removeCriterion}</button>
<span class="fn__space"></span>`;
/// #endif
});

40
app/src/search/util.ts
View file

@ -108,39 +108,39 @@ export const genSearch = (app: App, config: Config.IUILayoutTabSearchConfig, ele
const unRefLocal = window.siyuan.storage[Constants.LOCAL_SEARCHUNREF];
element.innerHTML = `<div class="fn__flex-column" style="height: 100%;${closeCB ? "border-radius: var(--b3-border-radius-b);overflow: hidden;" : ""}">
<div class="block__icons" style="overflow: auto">
<span data-position="9bottom" data-type="previous" class="block__icon block__icon--show ariaLabel" disabled="disabled" aria-label="${window.siyuan.languages.previousLabel}"><svg><use xlink:href='#iconLeft'></use></svg></span>
<span data-position="9south" data-type="previous" class="block__icon block__icon--show ariaLabel" disabled="disabled" aria-label="${window.siyuan.languages.previousLabel}"><svg><use xlink:href='#iconLeft'></use></svg></span>
<span class="fn__space"></span>
<span data-position="9bottom" data-type="next" class="block__icon block__icon--show ariaLabel" disabled="disabled" aria-label="${window.siyuan.languages.nextLabel}"><svg><use xlink:href='#iconRight'></use></svg></span>
<span data-position="9south" data-type="next" class="block__icon block__icon--show ariaLabel" disabled="disabled" aria-label="${window.siyuan.languages.nextLabel}"><svg><use xlink:href='#iconRight'></use></svg></span>
<span class="fn__space"></span>
<span id="searchResult" class="fn__flex-shrink ft__selectnone"></span>
<span class="fn__space"></span>
<span class="fn__flex-1${closeCB ? " resize__move" : ""}" style="min-height: 100%"></span>
<span id="searchPathInput" data-position="9bottom" class="search__path ft__on-surface fn__flex-center ft__smaller fn__ellipsis ariaLabel" aria-label="${escapeAriaLabel(config.hPath)}">
<span id="searchPathInput" data-position="9south" class="search__path ft__on-surface fn__flex-center ft__smaller fn__ellipsis ariaLabel" aria-label="${escapeAriaLabel(config.hPath)}">
${escapeHtml(config.hPath)}
<svg class="search__rmpath${config.hPath ? "" : " fn__none"}"><use xlink:href="#iconCloseRound"></use></svg>
</span>
<span class="fn__space"></span>
<span data-position="9bottom" id="searchInclude" ${enableIncludeChild ? "" : "disabled"} aria-label="${window.siyuan.languages.includeChildDoc}" class="block__icon block__icon--show ariaLabel">
<span data-position="9south" id="searchInclude" ${enableIncludeChild ? "" : "disabled"} aria-label="${window.siyuan.languages.includeChildDoc}" class="block__icon block__icon--show ariaLabel">
<svg${includeChild ? ' class="ft__primary"' : ""}><use xlink:href="#iconCopy"></use></svg>
</span>
<span class="fn__space"></span>
<span id="searchPath" aria-label="${window.siyuan.languages.specifyPath}" class="block__icon block__icon--show ariaLabel" data-position="9bottom">
<span id="searchPath" aria-label="${window.siyuan.languages.specifyPath}" class="block__icon block__icon--show ariaLabel" data-position="9south">
<svg><use xlink:href="#iconFolder"></use></svg>
</span>
<span class="fn__space"></span>
<span id="searchMore" aria-label="${window.siyuan.languages.more}" class="block__icon block__icon--show ariaLabel" data-position="9bottom">
<span id="searchMore" aria-label="${window.siyuan.languages.more}" class="block__icon block__icon--show ariaLabel" data-position="9south">
<svg><use xlink:href="#iconMore"></use></svg>
</span>
<span class="${closeCB ? "" : "fn__none "}fn__space"></span>
<span id="searchOpen" aria-label="${window.siyuan.languages.openInNewTab}" class="${closeCB ? "" : "fn__none "}block__icon block__icon--show ariaLabel" data-position="9bottom">
<span id="searchOpen" aria-label="${window.siyuan.languages.openInNewTab}" class="${closeCB ? "" : "fn__none "}block__icon block__icon--show ariaLabel" data-position="9south">
<svg><use xlink:href="#iconLayoutRight"></use></svg>
</span>
<span class="fn__space"></span>
<span id="searchUnRef" aria-label="${window.siyuan.languages.listInvalidRefBlocks}" class="block__icon block__icon--show ariaLabel" data-position="9bottom">
<span id="searchUnRef" aria-label="${window.siyuan.languages.listInvalidRefBlocks}" class="block__icon block__icon--show ariaLabel" data-position="9south">
<svg><use xlink:href="#iconLinkOff"></use></svg>
</span>
<span class="fn__space"></span>
<span id="searchAsset" aria-label="${window.siyuan.languages.searchAssetContent}" class="block__icon block__icon--show ariaLabel" data-position="9bottom">
<span id="searchAsset" aria-label="${window.siyuan.languages.searchAssetContent}" class="block__icon block__icon--show ariaLabel" data-position="9south">
<svg><use xlink:href="#iconExact"></use></svg>
</span>
</div>
@ -153,28 +153,28 @@ export const genSearch = (app: App, config: Config.IUILayoutTabSearchConfig, ele
<input id="searchInput" class="b3-text-field b3-text-field--text" placeholder="${window.siyuan.languages.showRecentUpdatedBlocks}">
</div>
<div class="block__icons">
<span id="searchFilter" aria-label="${window.siyuan.languages.searchType}" class="block__icon ariaLabel" data-position="9bottom">
<span id="searchFilter" aria-label="${window.siyuan.languages.searchType}" class="block__icon ariaLabel" data-position="9south">
<svg><use xlink:href="#iconFilter"></use></svg>
</span>
<span class="fn__space"></span>
<span id="searchSyntaxCheck" aria-label="${window.siyuan.languages.searchMethod} ${methodText}" class="block__icon ariaLabel" data-position="9bottom">
<span id="searchSyntaxCheck" aria-label="${window.siyuan.languages.searchMethod} ${methodText}" class="block__icon ariaLabel" data-position="9south">
<svg><use xlink:href="#iconRegex"></use></svg>
</span>
<span class="fn__space"></span>
<span id="searchReplace" aria-label="${window.siyuan.languages.replace}" class="block__icon ariaLabel" data-position="9bottom">
<span id="searchReplace" aria-label="${window.siyuan.languages.replace}" class="block__icon ariaLabel" data-position="9south">
<svg><use xlink:href="#iconReplace"></use></svg>
</span>
<span class="fn__space"></span>
<span id="searchRefresh" aria-label="${window.siyuan.languages.refresh}" class="block__icon ariaLabel" data-position="9bottom">
<span id="searchRefresh" aria-label="${window.siyuan.languages.refresh}" class="block__icon ariaLabel" data-position="9south">
<svg><use xlink:href="#iconRefresh"></use></svg>
</span>
<div class="fn__flex${config.group === 0 ? " fn__none" : ""}">
<span class="fn__space"></span>
<span id="searchExpand" class="block__icon block__icon--show ariaLabel" data-position="9bottom" aria-label="${window.siyuan.languages.expand}">
<span id="searchExpand" class="block__icon block__icon--show ariaLabel" data-position="9south" aria-label="${window.siyuan.languages.expand}">
<svg><use xlink:href="#iconExpand"></use></svg>
</span>
<span class="fn__space"></span>
<span id="searchCollapse" class="block__icon block__icon--show ariaLabel" data-position="9bottom" aria-label="${window.siyuan.languages.collapse}">
<span id="searchCollapse" class="block__icon block__icon--show ariaLabel" data-position="9south" aria-label="${window.siyuan.languages.collapse}">
<svg><use xlink:href="#iconContract"></use></svg>
</span>
</div>
@ -190,7 +190,7 @@ export const genSearch = (app: App, config: Config.IUILayoutTabSearchConfig, ele
</div>
<div class="fn__space"></div>
<svg class="fn__rotate fn__none svg" style="padding: 0 8px;align-self: center;margin-right: 8px"><use xlink:href="#iconRefresh"></use></svg>
<span id="replaceFilter" aria-label="${window.siyuan.languages.replaceType}" class="block__icon ariaLabel fn__flex-center" data-position="9bottom">
<span id="replaceFilter" aria-label="${window.siyuan.languages.replaceType}" class="block__icon ariaLabel fn__flex-center" data-position="9south">
<svg><use xlink:href="#iconFilter"></use></svg>
</span>
<span class="fn__space"></span>
@ -217,18 +217,18 @@ export const genSearch = (app: App, config: Config.IUILayoutTabSearchConfig, ele
<div class="fn__flex-column fn__none" id="searchAssets" style="height: 100%;${closeCB ? "border-radius: var(--b3-border-radius-b);overflow: hidden;" : ""}"></div>
<div class="fn__flex-column fn__none" id="searchUnRefPanel" style="height: 100%;${closeCB ? "border-radius: var(--b3-border-radius-b);overflow: hidden;" : ""}">
<div class="block__icons">
<span data-type="unRefPrevious" class="block__icon block__icon--show ariaLabel" data-position="9bottom" disabled="disabled" aria-label="${window.siyuan.languages.previousLabel}"><svg><use xlink:href='#iconLeft'></use></svg></span>
<span data-type="unRefPrevious" class="block__icon block__icon--show ariaLabel" data-position="9south" disabled="disabled" aria-label="${window.siyuan.languages.previousLabel}"><svg><use xlink:href='#iconLeft'></use></svg></span>
<span class="fn__space"></span>
<span data-type="unRefNext" class="block__icon block__icon--show ariaLabel" data-position="9bottom" disabled="disabled" aria-label="${window.siyuan.languages.nextLabel}"><svg><use xlink:href='#iconRight'></use></svg></span>
<span data-type="unRefNext" class="block__icon block__icon--show ariaLabel" data-position="9south" disabled="disabled" aria-label="${window.siyuan.languages.nextLabel}"><svg><use xlink:href='#iconRight'></use></svg></span>
<span class="fn__space"></span>
<span id="searchUnRefResult" class="ft__selectnone"></span>
<span class="fn__flex-1"></span>
<span class="fn__space"></span>
<span id="unRefMore" aria-label="${window.siyuan.languages.more}" class="block__icon block__icon--show ariaLabel" data-position="9bottom">
<span id="unRefMore" aria-label="${window.siyuan.languages.more}" class="block__icon block__icon--show ariaLabel" data-position="9south">
<svg><use xlink:href="#iconMore"></use></svg>
</span>
<span class="fn__space"></span>
<span id="searchUnRefClose" aria-label="${!closeCB ? window.siyuan.languages.stickSearch : window.siyuan.languages.globalSearch}" class="block__icon block__icon--show ariaLabel" data-position="9bottom">
<span id="searchUnRefClose" aria-label="${!closeCB ? window.siyuan.languages.stickSearch : window.siyuan.languages.globalSearch}" class="block__icon block__icon--show ariaLabel" data-position="9south">
<svg><use xlink:href="#iconBack"></use></svg>
</span>
</div>