Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-22 09:30:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

🎨 fix https://github.com/siyuan-note/siyuan/issues/9170

Browse source
This commit is contained in:
Vanessa 2023-09-13 09:36:50 +08:00
parent 021e09e444
commit bff2a4f8c9
10 changed files with 42 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -17,6 +17,7 @@
animation-name: zoomIn;
max-height: 90vh;
overflow: auto;
box-sizing: border-box;
a {
color: var(--b3-theme-secondary);

12
app/src/config/account.ts
View file

@ -411,24 +411,24 @@ ${renewHTML}
let html = "";
if (window.siyuan.config.account.displayVIP && window.siyuan.user) {
if (window.siyuan.user.userSiYuanProExpireTime === -1) {
html = `<div class="toolbar__item b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.account12}">${Constants.SIYUAN_IMAGE_VIP}</div>`;
html = `<div class="toolbar__item ariaLabel" aria-label="${window.siyuan.languages.account12}">${Constants.SIYUAN_IMAGE_VIP}</div>`;
} else if (window.siyuan.user.userSiYuanProExpireTime > 0) {
if (window.siyuan.user.userSiYuanSubscriptionPlan === 2) {
html = `<div class="toolbar__item b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.account3}"><svg><use xlink:href="#iconVIP"></use></svg></div>`;
html = `<div class="toolbar__item ariaLabel" aria-label="${window.siyuan.languages.account3}"><svg><use xlink:href="#iconVIP"></use></svg></div>`;
} else {
html = `<div class="toolbar__item b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.account10}"><svg class="ft__secondary"><use xlink:href="#iconVIP"></use></svg></div>`;
html = `<div class="toolbar__item ariaLabel" aria-label="${window.siyuan.languages.account10}"><svg class="ft__secondary"><use xlink:href="#iconVIP"></use></svg></div>`;
}
}
if (window.siyuan.user.userSiYuanOneTimePayStatus === 1) {
html += `<div class="toolbar__item b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.onepay}"><svg><use xlink:href="#iconVIP"></use></svg></div>`;
html += `<div class="toolbar__item ariaLabel" aria-label="${window.siyuan.languages.onepay}"><svg><use xlink:href="#iconVIP"></use></svg></div>`;
}
}
if (!window.siyuan.user || (window.siyuan.user && window.siyuan.user.userSiYuanSubscriptionStatus === -1)) {
html = `<div class="toolbar__item b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.freeSub}"><svg class="ft__error"><use xlink:href="#iconVIP"></use></svg></div>`;
html = `<div class="toolbar__item ariaLabel" aria-label="${window.siyuan.languages.freeSub}"><svg class="ft__error"><use xlink:href="#iconVIP"></use></svg></div>`;
}
if (window.siyuan.config.account.displayTitle && window.siyuan.user) {
window.siyuan.user.userTitles.forEach(item => {
html += `<div class="toolbar__item b3-tooltips b3-tooltips__sw" aria-label="${item.name}：${item.desc}">${item.icon}</div>`;
html += `<div class="toolbar__item ariaLabel" aria-label="${item.name}：${item.desc}">${item.icon}</div>`;
});
}
document.getElementById("toolbarVIP").innerHTML = html;

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

@ -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 = () => {

1
app/src/layout/Tab.ts
View file

@ -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) {

2
app/src/layout/Wnd.ts
View file

@ -63,7 +63,7 @@ export class Wnd {
<li class="item item--readonly">
<span data-type="new" class="block__icon block__icon--show ariaLabel" aria-label="${window.siyuan.languages.newFile}"><svg><use xlink:href="#iconAdd"></use></svg></span>
<span class="fn__flex-1"></span>
<span data-type="more" data-menu="true" data-position="right" class="block__icon block__icon--show ariaLabel" aria-label="${window.siyuan.languages.switchTab}"><svg><use xlink:href="#iconDown"></use></svg></span>
<span data-type="more" data-menu="true" class="block__icon block__icon--show ariaLabel" aria-label="${window.siyuan.languages.switchTab}"><svg><use xlink:href="#iconDown"></use></svg></span>
</li>
</ul>
</div>

4
app/src/layout/status.ts
View file

@ -16,7 +16,7 @@ export const initStatus = (isWindow = false) => {
/// #if !MOBILE
let barDockHTML = "";
if (!isWindow) {
barDockHTML = `<div id="barDock" class="toolbar__item b3-tooltips b3-tooltips__e${window.siyuan.config.readonly || isWindow ? " fn__none" : ""}" aria-label="${window.siyuan.languages.toggleDock} ${updateHotkeyTip(window.siyuan.config.keymap.general.toggleDock.custom)}">
barDockHTML = `<div id="barDock" class="toolbar__item ariaLabel${window.siyuan.config.readonly || isWindow ? " fn__none" : ""}" aria-label="${window.siyuan.languages.toggleDock} ${updateHotkeyTip(window.siyuan.config.keymap.general.toggleDock.custom)}">
<svg>
<use xlink:href="#${window.siyuan.config.uiLayout.hideDock ? "iconDock" : "iconHideDock"}"></use>
</svg>
@ -27,7 +27,7 @@ export const initStatus = (isWindow = false) => {
<div class="fn__flex-1"></div>
<div class="status__backgroundtask fn__none"></div>
<div class="status__counter"></div>
<div id="statusHelp" class="toolbar__item b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.help}">
<div id="statusHelp" class="toolbar__item ariaLabel" aria-label="${window.siyuan.languages.help}">
<svg><use xlink:href="#iconHelp"></use></svg>
</div>`;
document.querySelector("#status").addEventListener("click", (event) => {

20
app/src/layout/topBar.ts
View file

@ -23,37 +23,37 @@ import {commandPanel} from "../plugin/commandPanel";
export const initBar = (app: App) => {
const toolbarElement = document.getElementById("toolbar");
toolbarElement.innerHTML = `
<div id="barWorkspace" aria-label="${window.siyuan.languages.mainMenu} ${updateHotkeyTip(window.siyuan.config.keymap.general.mainMenu.custom)}" class="b3-tooltips b3-tooltips__e toolbar__item toolbar__item--active">
<div id="barWorkspace" aria-label="${window.siyuan.languages.mainMenu} ${updateHotkeyTip(window.siyuan.config.keymap.general.mainMenu.custom)}" class="ariaLabel toolbar__item toolbar__item--active">
<span class="toolbar__text">${getWorkspaceName()}</span>
<svg class="toolbar__svg"><use xlink:href="#iconDown"></use></svg>
</div>
<div id="barSync" data-position="top" data-type="a" class="toolbar__item${window.siyuan.config.readonly ? " fn__none" : ""}">
<div id="barSync" class="ariaLabel toolbar__item${window.siyuan.config.readonly ? " fn__none" : ""}">
<svg><use xlink:href="#iconCloudSucc"></use></svg>
</div>
<button id="barBack" data-type="a" class="toolbar__item toolbar__item--disabled" aria-label="${window.siyuan.languages.goBack} ${updateHotkeyTip(window.siyuan.config.keymap.general.goBack.custom)}">
<button id="barBack" class="ariaLabel toolbar__item toolbar__item--disabled" aria-label="${window.siyuan.languages.goBack} ${updateHotkeyTip(window.siyuan.config.keymap.general.goBack.custom)}">
<svg><use xlink:href="#iconBack"></use></svg>
</button>
<button id="barForward" data-type="a" class="toolbar__item toolbar__item--disabled" aria-label="${window.siyuan.languages.goForward} ${updateHotkeyTip(window.siyuan.config.keymap.general.goForward.custom)}">
<button id="barForward" class="ariaLabel toolbar__item toolbar__item--disabled" aria-label="${window.siyuan.languages.goForward} ${updateHotkeyTip(window.siyuan.config.keymap.general.goForward.custom)}">
<svg><use xlink:href="#iconForward"></use></svg>
</button>
<div class="fn__flex-1 fn__ellipsis" id="drag"><span class="fn__none">开发版，使用前请进行备份 Development version, please backup before use</span></div>
<div id="toolbarVIP" class="fn__flex${window.siyuan.config.readonly ? " fn__none" : ""}"></div>
<div id="barPlugins" class="toolbar__item b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.plugin}">
<div id="barPlugins" class="toolbar__item ariaLabel" aria-label="${window.siyuan.languages.plugin}">
<svg><use xlink:href="#iconPlugin"></use></svg>
</div>
<div id="barSearch" class="toolbar__item b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.globalSearch} ${updateHotkeyTip(window.siyuan.config.keymap.general.globalSearch.custom)}">
<div id="barSearch" class="toolbar__item ariaLabel" aria-label="${window.siyuan.languages.globalSearch} ${updateHotkeyTip(window.siyuan.config.keymap.general.globalSearch.custom)}">
<svg><use xlink:href="#iconSearch"></use></svg>
</div>
<div id="barZoom" class="toolbar__item b3-tooltips b3-tooltips__sw${(window.siyuan.storage[Constants.LOCAL_ZOOM] === 1 || isBrowser()) ? " fn__none" : ""}" aria-label="${window.siyuan.languages.zoom}">
<div id="barZoom" class="toolbar__item ariaLabel${(window.siyuan.storage[Constants.LOCAL_ZOOM] === 1 || isBrowser()) ? " fn__none" : ""}" aria-label="${window.siyuan.languages.zoom}">
<svg><use xlink:href="#iconZoom${window.siyuan.storage[Constants.LOCAL_ZOOM] > 1 ? "In" : "Out"}"></use></svg>
</div>
<div id="barMode" class="toolbar__item b3-tooltips b3-tooltips__sw${window.siyuan.config.readonly ? " fn__none" : ""}" aria-label="${window.siyuan.languages.appearanceMode}">
<div id="barMode" class="toolbar__item ariaLabel${window.siyuan.config.readonly ? " fn__none" : ""}" aria-label="${window.siyuan.languages.appearanceMode}">
<svg><use xlink:href="#icon${window.siyuan.config.appearance.modeOS ? "Mode" : (window.siyuan.config.appearance.mode === 0 ? "Light" : "Dark")}"></use></svg>
</div>
<div id="barExit" class="toolbar__item b3-tooltips b3-tooltips__sw${(isInIOS() || isInAndroid()) ? "" : " fn__none"}" aria-label="${window.siyuan.languages.safeQuit}">
<div id="barExit" class="toolbar__item ariaLabel${(isInIOS() || isInAndroid()) ? "" : " fn__none"}" aria-label="${window.siyuan.languages.safeQuit}">
<svg><use xlink:href="#iconQuit"></use></svg>
</div>
<div id="barMore" class="toolbar__item">
<div id="barMore" class="toolbar__item ariaLabel" aria-label="${window.siyuan.languages.more}">
<svg><use xlink:href="#iconMore"></use></svg>
</div>
<div class="fn__flex" id="windowControls"></div>`;

2
app/src/plugin/index.ts
View file

@ -105,7 +105,7 @@ export class Plugin {
iconElement.innerHTML = (options.icon.startsWith("icon") ? `<svg class="b3-menu__icon"><use xlink:href="#${options.icon}"></use></svg>` : options.icon) +
`<span class="b3-menu__label">${options.title}</span>`;
} 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") ? `<svg><use xlink:href="#${options.icon}"></use></svg>` : options.icon;
iconElement.addEventListener("click", options.callback);

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

@ -46,12 +46,12 @@ export class Breadcrumb {
'<div class="protyle-breadcrumb__bar"></div>'}
<span class="protyle-breadcrumb__space"></span>
<button class="protyle-breadcrumb__icon fn__none" data-type="exit-focus">${window.siyuan.languages.exitFocus}</button>
<button class="block__icon block__icon--show fn__flex-center ariaLabel" data-position="right" aria-label="${window.siyuan.languages.lockEdit}" data-type="readonly"><svg><use xlink:href="#iconUnlock"></use></svg></button>
<button class="block__icon block__icon--show fn__flex-center ariaLabel" aria-label="${window.siyuan.languages.lockEdit}" data-type="readonly"><svg><use xlink:href="#iconUnlock"></use></svg></button>
<span class="fn__space"></span>
<button class="block__icon block__icon--show fn__flex-center ariaLabel" data-position="right" data-type="doc" aria-label="${window.siyuan.languages.gutterTip2}"><svg><use xlink:href="#iconFile"></use></svg></button>
<button class="block__icon block__icon--show fn__flex-center ariaLabel" data-type="doc" aria-label="${window.siyuan.languages.gutterTip2}"><svg><use xlink:href="#iconFile"></use></svg></button>
<span class="fn__space"></span>
<button class="block__icon block__icon--show fn__flex-center ariaLabel" data-position="right" data-type="more" aria-label="${window.siyuan.languages.more}"><svg><use xlink:href="#iconMore"></use></svg></button>
<button class="block__icon block__icon--show fn__flex-center fn__none ariaLabel" style="margin-left: 8px" data-position="right" data-type="context" aria-label="${window.siyuan.languages.context}"><svg><use xlink:href="#iconAlignCenter"></use></svg></button>`;
<button class="block__icon block__icon--show fn__flex-center ariaLabel" data-type="more" aria-label="${window.siyuan.languages.more}"><svg><use xlink:href="#iconMore"></use></svg></button>
<button class="block__icon block__icon--show fn__flex-center fn__none ariaLabel" style="margin-left: 8px" data-type="context" aria-label="${window.siyuan.languages.context}"><svg><use xlink:href="#iconAlignCenter"></use></svg></button>`;
this.element = element.firstElementChild as HTMLElement;
element.addEventListener("click", (event) => {

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

@ -41,8 +41,8 @@ export class Title {
this.element.classList.add("protyle-wysiwyg--attr");
}
// 标题内需要一个空格，避免首次加载出现`请输入文档名`干扰
this.element.innerHTML = `<span aria-label="${window.siyuan.languages.gutterTip2}" class="protyle-title__icon" data-type="a" data-position="right"><svg><use xlink:href="#iconFile"></use></svg></span>
<div contenteditable="true" data-position="center" spellcheck="${window.siyuan.config.editor.spellcheck}" class="protyle-title__input" data-tip="${window.siyuan.languages._kernel[16]}"> </div><div class="protyle-attr"></div>`;
this.element.innerHTML = `<span aria-label="${window.siyuan.languages.gutterTip2}" data-position="right" 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) => {
event.stopPropagation();