Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2026-01-22 08:16:10 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

💄 fix https://github.com/siyuan-note/siyuan/issues/10371

Browse source
This commit is contained in:
Vanessa 2024-02-18 17:11:30 +08:00
parent 6f8c1176f5
commit 8844565d2c
2 changed files with 61 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -132,11 +132,11 @@ ${renewHTML}
</button>
<span class="fn__flex-1"></span>
<button class="b3-button b3-button--cancel b3-tooltips b3-tooltips__n" id="refresh" aria-label="${window.siyuan.languages.refresh}">
<svg><use xlink:href="#iconRefresh"></use></svg>
<svg style="margin-right: 0"><use xlink:href="#iconRefresh"></use></svg>
</button>
</div>
<div class="fn__hr--b"></div>
<div class="fn__flex">
<div class="fn__flex">
<label>
${window.siyuan.languages.accountDisplayTitle}
<input class="b3-switch fn__flex-center" id="displayTitle" type="checkbox"${window.siyuan.config.account.displayTitle ? " checked" : ""}/>

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

@ -15,6 +15,7 @@ import {Dialog} from "../../dialog";
import {Constants} from "../../constants";
import {assetMenu} from "../../menus/protyle";
import {previewImage} from "../preview/image";
import {MenuItem} from "../../menus/Menu";
const bgs = [
"background:radial-gradient(black 3px, transparent 4px),radial-gradient(black 3px, transparent 4px),linear-gradient(#fff 4px, transparent 0),linear-gradient(45deg, transparent 74px, transparent 75px, #a4a4a4 75px, #a4a4a4 76px, transparent 77px, transparent 109px),linear-gradient(-45deg, transparent 75px, transparent 76px, #a4a4a4 76px, #a4a4a4 77px, transparent 78px, transparent 109px),#fff;background-size: 109px 109px, 109px 109px,100% 6px, 109px 109px, 109px 109px;background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;",
@ -480,64 +481,71 @@ export class Background {
}, (response) => {
let html = "";
response.data.tags.forEach((item: string, index: number) => {
html += `<div class="b3-list-item${index === 0 ? " b3-list-item--focus" : ""}">${item}</div>`;
html += `<div class="b3-list-item b3-list-item--narrow${index === 0 ? " b3-list-item--focus" : ""}">${item}</div>`;
});
window.siyuan.menus.menu.remove();
window.siyuan.menus.menu.element.lastElementChild.innerHTML = `<div class="fn__flex-column" style="max-height:50vh;margin: 0 -8px"><input style="margin: 0px 8px 4px 8px" class="b3-text-field"/>
<div class="b3-list fn__flex-1 b3-list--background" style="position: relative">${html}</div>
</div>`;
const listElement = window.siyuan.menus.menu.element.querySelector(".b3-list--background");
const inputElement = window.siyuan.menus.menu.element.querySelector("input");
inputElement.addEventListener("keydown", (event: KeyboardEvent) => {
event.stopPropagation();
if (event.isComposing) {
return;
}
upDownHint(listElement, event);
if (event.key === "Enter") {
const currentElement = listElement.querySelector(".b3-list-item--focus");
if (currentElement) {
this.addTags(currentElement.textContent, protyle);
} else {
this.addTags(inputElement.value, protyle);
}
window.siyuan.menus.menu.remove();
} else if (event.key === "Escape") {
window.siyuan.menus.menu.remove();
}
});
inputElement.addEventListener("input", (event) => {
event.stopPropagation();
fetchPost("/api/search/searchTag", {
k: inputElement.value,
}, (response) => {
let searchHTML = "";
let hasKey = false;
response.data.tags.forEach((item: string) => {
searchHTML += `<div class="b3-list-item">${item}</div>`;
if (item === `<mark>${response.data.k}</mark>`) {
hasKey = true;
window.siyuan.menus.menu.append(new MenuItem({
iconHTML: "",
type: "readonly",
label: `<div class="fn__flex-column" style="max-height: calc(80vh - 8px)">
<input style="margin: 4px 0" class="b3-text-field fn__block" placeholder="${window.siyuan.languages.anchor}">
<div class="b3-menu__separator"></div>
<div class="b3-list fn__flex-1 b3-list--background">${html}</div>
</div>`,
bind: (element) => {
const inputElement = element.querySelector("input");
const listElement = element.querySelector(".b3-list--background");
inputElement.addEventListener("keydown", (event: KeyboardEvent) => {
event.stopPropagation();
if (event.isComposing) {
return;
}
upDownHint(listElement, event);
if (event.key === "Enter") {
const currentElement = listElement.querySelector(".b3-list-item--focus");
if (currentElement) {
this.addTags(currentElement.textContent, protyle);
} else {
this.addTags(inputElement.value, protyle);
}
window.siyuan.menus.menu.remove();
} else if (event.key === "Escape") {
window.siyuan.menus.menu.remove();
}
});
if (!hasKey && response.data.k) {
searchHTML = `<div class="b3-list-item"><mark>${response.data.k}</mark></div>` + searchHTML;
}
listElement.innerHTML = searchHTML;
listElement.firstElementChild.classList.add("b3-list-item--focus");
});
});
listElement.addEventListener("click", (event) => {
const target = event.target as HTMLElement;
const listItemElement = hasClosestByClassName(target, "b3-list-item");
if (!listItemElement) {
return;
inputElement.addEventListener("input", (event) => {
event.stopPropagation();
fetchPost("/api/search/searchTag", {
k: inputElement.value,
}, (response) => {
let searchHTML = "";
let hasKey = false;
response.data.tags.forEach((item: string) => {
searchHTML += `<div class="b3-list-item b3-list-item--narrow">${item}</div>`;
if (item === `<mark>${response.data.k}</mark>`) {
hasKey = true;
}
});
if (!hasKey && response.data.k) {
searchHTML = `<div class="b3-list-item b3-list-item--narrow"><mark>${response.data.k}</mark></div>` + searchHTML;
}
listElement.innerHTML = searchHTML;
listElement.firstElementChild.classList.add("b3-list-item--focus");
});
});
listElement.addEventListener("click", (event) => {
const target = event.target as HTMLElement;
const listItemElement = hasClosestByClassName(target, "b3-list-item");
if (!listItemElement) {
return;
}
this.addTags(listItemElement.textContent, protyle);
});
}
this.addTags(listItemElement.textContent, protyle);
});
}).element);
const rect = this.iconElement.nextElementSibling.getBoundingClientRect();
window.siyuan.menus.menu.popup({x: rect.left, y: rect.top + rect.height});
inputElement.focus();
window.siyuan.menus.menu.element.querySelector("input").focus();
});
}