diff --git a/app/src/assets/scss/component/_tooltips.scss b/app/src/assets/scss/component/_tooltips.scss index c1d6c2a58..09abc9137 100644 --- a/app/src/assets/scss/component/_tooltips.scss +++ b/app/src/assets/scss/component/_tooltips.scss @@ -17,6 +17,7 @@ animation-name: zoomIn; max-height: 90vh; overflow: auto; + box-sizing: border-box; a { color: var(--b3-theme-secondary); diff --git a/app/src/config/account.ts b/app/src/config/account.ts index 3712e7ced..bbb73bf28 100644 --- a/app/src/config/account.ts +++ b/app/src/config/account.ts @@ -411,24 +411,24 @@ ${renewHTML} let html = ""; if (window.siyuan.config.account.displayVIP && window.siyuan.user) { if (window.siyuan.user.userSiYuanProExpireTime === -1) { - html = `
${Constants.SIYUAN_IMAGE_VIP}
`; + html = `
${Constants.SIYUAN_IMAGE_VIP}
`; } else if (window.siyuan.user.userSiYuanProExpireTime > 0) { if (window.siyuan.user.userSiYuanSubscriptionPlan === 2) { - html = `
`; + html = `
`; } else { - html = `
`; + html = `
`; } } if (window.siyuan.user.userSiYuanOneTimePayStatus === 1) { - html += `
`; + html += `
`; } } if (!window.siyuan.user || (window.siyuan.user && window.siyuan.user.userSiYuanSubscriptionStatus === -1)) { - html = `
`; + html = `
`; } if (window.siyuan.config.account.displayTitle && window.siyuan.user) { window.siyuan.user.userTitles.forEach(item => { - html += `
${item.icon}
`; + html += `
${item.icon}
`; }); } document.getElementById("toolbarVIP").innerHTML = html; diff --git a/app/src/dialog/tooltip.ts b/app/src/dialog/tooltip.ts index e0c7c4f4d..c9d5b95af 100644 --- a/app/src/dialog/tooltip.ts +++ b/app/src/dialog/tooltip.ts @@ -29,18 +29,25 @@ export const showTooltip = (message: string, target: Element, error = false) => } if (target.getAttribute("data-inline-memo-content")) { messageElement.classList.add("tooltip--memo"); // 为行级备注添加 class https://github.com/siyuan-note/siyuan/issues/6161 + } else { + messageElement.classList.remove("tooltip--memo"); } let left = targetRect.left; - let topSpace = 8; - const position = target.getAttribute("data-position"); - if (position === "right") { + if (target.getAttribute("data-position") === "right") { left = targetRect.right - messageElement.clientWidth; - } else if (position === "center") { - left = targetRect.left + (targetRect.width - messageElement.clientWidth) / 2; - } else if (position === "top") { - topSpace = 0; } - setPosition(messageElement, left, targetRect.top + targetRect.height + topSpace, targetRect.height * 2 + 8); + const bottomHeight = window.innerHeight - targetRect.bottom + messageElement.style.maxHeight = Math.max(targetRect.top, bottomHeight) + "px"; + if (targetRect.top > bottomHeight) { + messageElement.style.top = (targetRect.top - messageElement.clientHeight) + "px"; + } else { + messageElement.style.top = targetRect.bottom + "px"; + } + if (left + messageElement.clientWidth > window.innerWidth) { + messageElement.style.left = (window.innerWidth - messageElement.clientWidth) + "px"; + } else { + messageElement.style.left = Math.max(0, left) + "px"; + } }; export const hideTooltip = () => { diff --git a/app/src/layout/Tab.ts b/app/src/layout/Tab.ts index 7b4a99201..01b4516b6 100644 --- a/app/src/layout/Tab.ts +++ b/app/src/layout/Tab.ts @@ -36,7 +36,6 @@ export class Tab { this.headElement.setAttribute("data-type", "tab-header"); this.headElement.setAttribute("draggable", "true"); this.headElement.setAttribute("data-id", this.id); - this.headElement.setAttribute("data-position", "center"); // showTooltip 位置标识 this.headElement.classList.add("item", "item--focus"); let iconHTML = ""; if (options.icon) { diff --git a/app/src/layout/Wnd.ts b/app/src/layout/Wnd.ts index 000430f87..97bc887e2 100644 --- a/app/src/layout/Wnd.ts +++ b/app/src/layout/Wnd.ts @@ -63,7 +63,7 @@ export class Wnd {
  • - +
    • diff --git a/app/src/layout/status.ts b/app/src/layout/status.ts index ac1dd1d9e..b00e709b0 100644 --- a/app/src/layout/status.ts +++ b/app/src/layout/status.ts @@ -16,7 +16,7 @@ export const initStatus = (isWindow = false) => { /// #if !MOBILE let barDockHTML = ""; if (!isWindow) { - barDockHTML = `
    + barDockHTML = `
    @@ -27,7 +27,7 @@ export const initStatus = (isWindow = false) => {
    -
    +
    `; document.querySelector("#status").addEventListener("click", (event) => { diff --git a/app/src/layout/topBar.ts b/app/src/layout/topBar.ts index be59e0885..3e279e2f6 100644 --- a/app/src/layout/topBar.ts +++ b/app/src/layout/topBar.ts @@ -23,37 +23,37 @@ import {commandPanel} from "../plugin/commandPanel"; export const initBar = (app: App) => { const toolbarElement = document.getElementById("toolbar"); toolbarElement.innerHTML = ` -
    +
    ${getWorkspaceName()}
    -
    +
    - -
    开发版，使用前请进行备份 Development version, please backup before use
    -
    +
    -
    +
    -
    +
    -
    +
    -
    +
    -
    +
    `; diff --git a/app/src/plugin/index.ts b/app/src/plugin/index.ts index b289b5ac2..80bdb4167 100644 --- a/app/src/plugin/index.ts +++ b/app/src/plugin/index.ts @@ -105,7 +105,7 @@ export class Plugin { iconElement.innerHTML = (options.icon.startsWith("icon") ? `` : options.icon) + `${options.title}`; } else if (!isWindow()) { - iconElement.className = "toolbar__item b3-tooltips b3-tooltips__sw"; + iconElement.className = "toolbar__item ariaLabel"; iconElement.setAttribute("aria-label", options.title); iconElement.innerHTML = options.icon.startsWith("icon") ? `` : options.icon; iconElement.addEventListener("click", options.callback); diff --git a/app/src/protyle/breadcrumb/index.ts b/app/src/protyle/breadcrumb/index.ts index ea5c6173f..c42304f67 100644 --- a/app/src/protyle/breadcrumb/index.ts +++ b/app/src/protyle/breadcrumb/index.ts @@ -46,12 +46,12 @@ export class Breadcrumb { '
    '} - + - + - -`; + +`; this.element = element.firstElementChild as HTMLElement; element.addEventListener("click", (event) => { diff --git a/app/src/protyle/header/Title.ts b/app/src/protyle/header/Title.ts index b559b4346..d1e629eff 100644 --- a/app/src/protyle/header/Title.ts +++ b/app/src/protyle/header/Title.ts @@ -41,8 +41,8 @@ export class Title { this.element.classList.add("protyle-wysiwyg--attr"); } // 标题内需要一个空格，避免首次加载出现`请输入文档名`干扰 - this.element.innerHTML = ` -
    `; + this.element.innerHTML = ` +
    `; this.editElement = this.element.querySelector(".protyle-title__input"); this.editElement.addEventListener("paste", (event: ClipboardEvent) => { event.stopPropagation();