diff --git a/app/src/assets/scss/component/_list.scss b/app/src/assets/scss/component/_list.scss index 3767a2269..1735bbb4a 100644 --- a/app/src/assets/scss/component/_list.scss +++ b/app/src/assets/scss/component/_list.scss @@ -287,7 +287,6 @@ &--warning:hover { color: var(--b3-theme-error); - background-color: var(--b3-list-icon-hover); } } diff --git a/app/src/assets/scss/component/_tooltips.scss b/app/src/assets/scss/component/_tooltips.scss index adb18604e..87b076b5f 100644 --- a/app/src/assets/scss/component/_tooltips.scss +++ b/app/src/assets/scss/component/_tooltips.scss @@ -37,12 +37,6 @@ } } -.clonedTooltip { - animation: unset; - opacity: 0; - pointer-events: none; -} - .b3-tooltips { position: relative; cursor: pointer; diff --git a/app/src/assets/template/app/window.tpl b/app/src/assets/template/app/window.tpl index 1b83eb91f..a3a8b1a59 100644 --- a/app/src/assets/template/app/window.tpl +++ b/app/src/assets/template/app/window.tpl @@ -23,5 +23,6 @@
+
diff --git a/app/src/assets/template/desktop/index.tpl b/app/src/assets/template/desktop/index.tpl index 648314b21..9f4ba442d 100644 --- a/app/src/assets/template/desktop/index.tpl +++ b/app/src/assets/template/desktop/index.tpl @@ -32,5 +32,6 @@
+
diff --git a/app/src/assets/template/mobile/index.tpl b/app/src/assets/template/mobile/index.tpl index 40439b22a..2f4cc85cb 100644 --- a/app/src/assets/template/mobile/index.tpl +++ b/app/src/assets/template/mobile/index.tpl @@ -65,6 +65,7 @@
+
diff --git a/app/src/block/popover.ts b/app/src/block/popover.ts index 0f7fede89..12bb40cee 100644 --- a/app/src/block/popover.ts +++ b/app/src/block/popover.ts @@ -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") || ""; diff --git a/app/src/dialog/tooltip.ts b/app/src/dialog/tooltip.ts index b5f0da3b5..5c316a716 100644 --- a/app/src/dialog/tooltip.ts +++ b/app/src/dialog/tooltip.ts @@ -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; + // 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 - messageElement.clientHeight; + } + } 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; + } 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; - } 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; - } + 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 { + 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; - 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; - } - - if (left + clonedTooltip.clientWidth > window.innerWidth) { - if (position === "parentE") { - left = parentRect.left - 8 - clonedTooltip.clientWidth - 1; - } else { - left = window.innerWidth - 1 - clonedTooltip.clientWidth; + 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"; + } + } + if (left + messageElement.clientWidth > window.innerWidth) { + left = window.innerWidth - messageElement.clientWidth; } } - - // 确保不会超出屏幕 - if (top < 0 || left < 0) { - top = targetRect.bottom + 1; - left = targetRect.left; - } - - 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 (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"); }; diff --git a/app/src/history/history.ts b/app/src/history/history.ts index 015d39c79..b087df9d4 100644 --- a/app/src/history/history.ts +++ b/app/src/history/history.ts @@ -636,10 +636,10 @@ const bindEvent = (app: App, element: Element, dialog?: Dialog) => { ariaLabel = window.siyuan.languages.historyOutline; } html += `
  • - ${docItem.op.substring(0, 1).toUpperCase()} + ${docItem.op.substring(0, 1).toUpperCase()} ${escapeHtml(docItem.title)} - +
    • `; diff --git a/app/src/layout/dock/Files.ts b/app/src/layout/dock/Files.ts index cc751bd17..95b826041 100644 --- a/app/src/layout/dock/Files.ts +++ b/app/src/layout/dock/Files.ts @@ -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); } diff --git a/app/src/protyle/gutter/index.ts b/app/src/protyle/gutter/index.ts index a933864e5..4b53b75e0 100644 --- a/app/src/protyle/gutter/index.ts +++ b/app/src/protyle/gutter/index.ts @@ -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("`; + html = ``; if (!protyle.disabled) { - html = `${html}`; + html = `${html}`; } break; } @@ -2377,7 +2377,7 @@ export class Gutter { if (protyle.options.backlinkData) { popoverHTML = `class="popover__block" data-id="${dataNodeId}"`; } - const buttonHTML = ``; } if (type === "NodeListItem" || type === "NodeList") { diff --git a/app/src/protyle/header/Background.ts b/app/src/protyle/header/Background.ts index 406cba6a5..3a12296a8 100644 --- a/app/src/protyle/header/Background.ts +++ b/app/src/protyle/header/Background.ts @@ -110,12 +110,12 @@ export class Background { this.element.innerHTML = `
    - - - - - - + + + + + +
    ${window.siyuan.languages.dragPosition}
    diff --git a/app/src/protyle/header/Title.ts b/app/src/protyle/header/Title.ts index 56f16e433..8b3bd80b2 100644 --- a/app/src/protyle/header/Title.ts +++ b/app/src/protyle/header/Title.ts @@ -40,7 +40,7 @@ export class Title { } /// #if !MOBILE // 标题内需要一个空格，避免首次加载出现`请输入文档名`干扰 - this.element.innerHTML = ` + this.element.innerHTML = `
    `; this.editElement = this.element.querySelector(".protyle-title__input"); this.editElement.addEventListener("paste", (event: ClipboardEvent) => { diff --git a/app/src/protyle/render/av/col.ts b/app/src/protyle/render/av/col.ts index 8a8f426fb..2dc5e3776 100644 --- a/app/src/protyle/render/av/col.ts +++ b/app/src/protyle/render/av/col.ts @@ -93,7 +93,7 @@ export const getEditHTML = (options: { ${colData.icon ? unicode2Emoji(colData.icon) : ``}
    - +
    @@ -123,7 +123,7 @@ export const getEditHTML = (options: { const airaLabel = item.desc ? `${escapeAriaLabel(item.name)}
    ${escapeAriaLabel(item.desc || "")}
    ` : ""; html += ``; } if (type == "unselect") { - return ``; @@ -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 += ``; }); 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 += ``; }); 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 = ``; if (!separatorElement.nextElementSibling) { separatorElement.insertAdjacentHTML("afterend", genSelectItemHTML("empty")); @@ -437,8 +437,8 @@ draggable="true">${genSelectItemHTML("selected", targetId, !target.querySelector }, isDetached: true }); - separatorElement.insertAdjacentHTML("beforebegin", ``); + separatorElement.insertAdjacentHTML("beforebegin", ``); } 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"); diff --git a/app/src/protyle/render/av/render.ts b/app/src/protyle/render/av/render.ts index 33a2676d1..0617dc39f 100644 --- a/app/src/protyle/render/av/render.ts +++ b/app/src/protyle/render/av/render.ts @@ -134,7 +134,7 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: () => void, v } tableHTML += `
    ${column.icon ? unicode2Emoji(column.icon, "av__cellheadericon", true) : ``} ${escapeHtml(column.name)} @@ -163,7 +163,7 @@ style="width: ${column.width || "200px"}">${getCalcValue(column) || `
    -
    +
    `; // 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 += `
    + tabHTML += `
    ${item.icon ? unicode2Emoji(item.icon, "item__graphic", true) : ''} ${escapeHtml(item.name)}
    `; @@ -236,7 +236,7 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value, rowIndex)} ${tabHTML}
    - +
    @@ -266,11 +266,11 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value, rowIndex)}
    - +
    - ${response.data.isMirror ? ` + ${response.data.isMirror ? `
    ` : ""}
    ${response.data.name || ""}
    diff --git a/app/src/protyle/render/av/select.ts b/app/src/protyle/render/av/select.ts index 14f48ee50..fa5ec852c 100644 --- a/app/src/protyle/render/av/select.ts +++ b/app/src/protyle/render/av/select.ts @@ -31,7 +31,7 @@ const filterSelectHTML = (key: string, options: { const airaLabel = item.desc ? `${escapeAriaLabel(item.name)}
    ${escapeAriaLabel(item.desc || "")}
    ` : ""; html += ``; + colorHTML += ``; }); 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 += ``; + bgHTML += ``; }); 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 += ``; + lastColorHTML += ``; break; case "backgroundColor": - lastColorHTML += ``; + lastColorHTML += ``; break; case "style2": lastColorHTML += ``; @@ -86,7 +86,7 @@ export const appearanceMenu = (protyle: IProtyle, nodeElements?: Element[]) => { } break; case "style1": - lastColorHTML += ``; + lastColorHTML += ``; break; case "clear": lastColorHTML += ``; @@ -113,7 +113,7 @@ export const appearanceMenu = (protyle: IProtyle, nodeElements?: Element[]) => {
    ${window.siyuan.languages.color}
    - + diff --git a/app/src/search/assets.ts b/app/src/search/assets.ts index 3535ef064..bdcf569d1 100644 --- a/app/src/search/assets.ts +++ b/app/src/search/assets.ts @@ -28,18 +28,18 @@ export const openSearchAsset = (element: HTMLElement, isStick: boolean) => { enterTip = `${window.siyuan.languages.enterKey}/${window.siyuan.languages.doubleClick} ${window.siyuan.languages.showInFolder}`; /// #endif element.innerHTML = `
    - + - + - + - +
    @@ -52,15 +52,15 @@ export const openSearchAsset = (element: HTMLElement, isStick: boolean) => {
    - + - + - +
    diff --git a/app/src/search/menu.ts b/app/src/search/menu.ts index d1a375202..912dd4bb9 100644 --- a/app/src/search/menu.ts +++ b/app/src/search/menu.ts @@ -643,7 +643,7 @@ export const initCriteriaMenu = (element: HTMLElement, data: Config.IUILayoutTab - + `; /// #endif }); diff --git a/app/src/search/util.ts b/app/src/search/util.ts index 14e4042f1..5706bf2e5 100644 --- a/app/src/search/util.ts +++ b/app/src/search/util.ts @@ -108,39 +108,39 @@ export const genSearch = (app: App, config: Config.IUILayoutTabSearchConfig, ele const unRefLocal = window.siyuan.storage[Constants.LOCAL_SEARCHUNREF]; element.innerHTML = `
    - + - + - + ${escapeHtml(config.hPath)} - + - + - + - + - + - +
    @@ -153,28 +153,28 @@ export const genSearch = (app: App, config: Config.IUILayoutTabSearchConfig, ele
    - + - + - + - +
    - + - +
    @@ -190,7 +190,7 @@ export const genSearch = (app: App, config: Config.IUILayoutTabSearchConfig, ele
    - + @@ -217,18 +217,18 @@ export const genSearch = (app: App, config: Config.IUILayoutTabSearchConfig, ele
    - + - + - + - +