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

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

Browse source
This commit is contained in:
Vanessa 2023-04-09 11:41:02 +08:00
parent 1bc838aa88
commit 5e9a6d9106
13 changed files with 130 additions and 104 deletions
Download patch file Download diff file Expand all files Collapse all files

23
app/src/assets/scss/component/_menu.scss
View file

@ -29,16 +29,19 @@
}
&--fullscreen {
top: 0;
top: 100vh;
left: 0;
width: 100%;
border: 0;
box-shadow: none;
bottom: 0;
right: 0;
max-height: none;
height: 100vh;
padding: 0;
border-radius: 0;
transition: transform 0.15s cubic-bezier(0, 0, 0.2, 1) 0ms;
display: flex;
flex-direction: column;
.b3-menu {
&__submenu {
@ -49,21 +52,27 @@
right: 0;
box-shadow: none;
border: 0;
padding: 27px 0 0 0;
padding: 24px 0;
& > .b3-menu__item:first-child {
border-top: .5px solid var(--b3-theme-background-light);
}
}
&__items {
flex: 1;
overflow: auto;
padding: 24px 0;
}
&__item {
border-bottom: .5px solid var(--b3-theme-background-light);
line-height: 42px;
background-color: var(--b3-theme-background);
text-decoration: none;
&:last-child {
margin-bottom: 24px;
&:first-child {
border-top: .5px solid var(--b3-theme-background-light);
}
&--show > .b3-menu__submenu--row {
@ -88,9 +97,7 @@
padding: 0 8px;
display: flex;
background-color: var(--b3-theme-background);
position: sticky;
top: 0;
z-index: 1;
height: 48.5px;
}
&__separator {

2
app/src/assets/scss/mobile.scss
View file

@ -241,9 +241,9 @@
}
#menu {
transition: transform 0.15s cubic-bezier(0, 0, 0.2, 1) 0ms;
z-index: 220;
transform: translateX(100vw);
top: 0;
}
.keyboard {

8
app/src/assets/template/app/index.tpl
View file

@ -24,7 +24,13 @@
</div>
<div id="dockBottom" class="dock fn__none"></div>
<div id="status" class="fn__flex status"></div>
<div id="commonMenu" class="b3-menu fn__none"></div>
<div id="commonMenu" class="b3-menu fn__none">
<div class="b3-menu__title fn__none">
<svg class="b3-menu__icon"><use xlink:href="#iconLeft"></use></svg>
<span class="b3-menu__label"></span>
</div>
<div class="b3-menu__items"></div>
</div>
<div id="message" class="b3-snackbars"></div>
<script>
setTimeout(() => {

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

@ -15,7 +15,13 @@
<div id="layouts" class="layout fn__flex-1"></div>
</div>
<div id="status" class="fn__flex status"></div>
<div id="commonMenu" class="b3-menu fn__none"></div>
<div id="commonMenu" class="b3-menu fn__none">
<div class="b3-menu__title fn__none">
<svg class="b3-menu__icon"><use xlink:href="#iconLeft"></use></svg>
<span class="b3-menu__label"></span>
</div>
<div class="b3-menu__items"></div>
</div>
<div id="message" class="b3-snackbars"></div>
</body>
</html>

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

@ -23,7 +23,13 @@
</div>
<div id="dockBottom" class="dock fn__none"></div>
<div id="status" class="fn__flex status"></div>
<div id="commonMenu" class="b3-menu fn__none"></div>
<div id="commonMenu" class="b3-menu fn__none">
<div class="b3-menu__title fn__none">
<svg class="b3-menu__icon"><use xlink:href="#iconLeft"></use></svg>
<span class="b3-menu__label"></span>
</div>
<div class="b3-menu__items"></div>
</div>
<div id="message" class="b3-snackbars"></div>
</body>
</html>

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

@ -56,7 +56,13 @@
</div>
<div id="modelMain" class="fn__flex-1"></div>
</div>
<div id="commonMenu" class="b3-menu fn__none"></div>
<div id="commonMenu" class="b3-menu fn__none">
<div class="b3-menu__title fn__none">
<svg class="b3-menu__icon"><use xlink:href="#iconLeft"></use></svg>
<span class="b3-menu__label"></span>
</div>
<div class="b3-menu__items"></div>
</div>
<div id="message" class="b3-snackbars"></div>
<div id="status" class="status status--hide"></div>
<div id="keyboardToolbar" class="keyboard fn__none"></div>

12
app/src/emoji/index.ts
View file

@ -193,7 +193,7 @@ export const addEmoji = (unicode: string) => {
export const openEmojiPanel = (id: string, target: HTMLElement, isNotebook = false) => {
window.siyuan.menus.menu.remove();
window.siyuan.menus.menu.element.innerHTML = `<div class="emojis" style="width: ${isMobile() ? "80vw" : "360px"}">
window.siyuan.menus.menu.element.lastElementChild.innerHTML = `<div class="emojis" style="width: ${isMobile() ? "80vw" : "360px"}">
<div class="fn__flex">
<span class="fn__space"></span>
<label class="b3-form__icon fn__flex-1">
@ -220,7 +220,7 @@ export const openEmojiPanel = (id: string, target: HTMLElement, isNotebook = fal
<div data-type="9" class="emojis__type" aria-label="${window.siyuan.emojis[8][window.siyuan.config.lang === "zh_CN" ? "title_zh_cn" : "title"]}">${unicode2Emoji("1f6a9")}</div>
</div>
</div>`;
window.siyuan.menus.menu.element.firstElementChild.querySelector(".emojis__item").classList.add("emojis__item--current");
window.siyuan.menus.menu.element.querySelector(".emojis__item").classList.add("emojis__item--current");
const rect = target.getBoundingClientRect();
window.siyuan.menus.menu.popup({x: rect.left, y: rect.top + rect.height});
const inputElement = window.siyuan.menus.menu.element.querySelector(".b3-text-field") as HTMLInputElement;
@ -233,7 +233,7 @@ export const openEmojiPanel = (id: string, target: HTMLElement, isNotebook = fal
emojisContentElement.nextElementSibling.classList.remove("fn__none");
}
emojisContentElement.scrollTop = 0;
window.siyuan.menus.menu.element.firstElementChild.querySelector(".emojis__item")?.classList.add("emojis__item--current");
window.siyuan.menus.menu.element.querySelector(".emojis__item")?.classList.add("emojis__item--current");
if (inputElement.value === "") {
lazyLoadEmoji(window.siyuan.menus.menu.element);
}
@ -250,7 +250,7 @@ export const openEmojiPanel = (id: string, target: HTMLElement, isNotebook = fal
emojisContentElement.nextElementSibling.classList.remove("fn__none");
}
emojisContentElement.scrollTop = 0;
window.siyuan.menus.menu.element.firstElementChild.querySelector(".emojis__item")?.classList.add("emojis__item--current");
window.siyuan.menus.menu.element.querySelector(".emojis__item")?.classList.add("emojis__item--current");
if (inputElement.value === "") {
lazyLoadEmoji(window.siyuan.menus.menu.element);
}
@ -263,7 +263,7 @@ export const openEmojiPanel = (id: string, target: HTMLElement, isNotebook = fal
if (event.key.indexOf("Arrow") === -1 && event.key !== "Enter") {
return;
}
const currentElement = window.siyuan.menus.menu.element.firstElementChild.querySelector(".emojis__item--current");
const currentElement = window.siyuan.menus.menu.element.querySelector(".emojis__item--current");
if (!currentElement) {
return;
}
@ -335,7 +335,7 @@ export const openEmojiPanel = (id: string, target: HTMLElement, isNotebook = fal
lazyLoadEmoji(window.siyuan.menus.menu.element);
lazyLoadEmojiImg(window.siyuan.menus.menu.element);
// 不能使用 getEventName 否则 https://github.com/siyuan-note/siyuan/issues/5472
window.siyuan.menus.menu.element.firstElementChild.addEventListener("click", (event) => {
window.siyuan.menus.menu.element.lastElementChild.firstElementChild.addEventListener("click", (event) => {
const eventTarget = event.target as HTMLElement;
const typeElement = hasClosestByClassName(eventTarget, "emojis__type");
if (typeElement) {

2
app/src/index.ts
View file

@ -131,7 +131,6 @@ class App {
}
}
}),
menus: new Menus()
};
fetchPost("/api/system/getConf", {}, response => {
window.siyuan.config = response.data.conf;
@ -153,6 +152,7 @@ class App {
getLocalStorage(() => {
fetchGet(`/appearance/langs/${window.siyuan.config.appearance.lang}.json?v=${Constants.SIYUAN_VERSION}`, (lauguages) => {
window.siyuan.languages = lauguages;
window.siyuan.menus = new Menus();
bootSync();
fetchPost("/api/setting/getCloudUser", {}, userResponse => {
window.siyuan.user = userResponse.data;

36
app/src/menus/Menu.ts
View file

@ -12,6 +12,7 @@ export class Menu {
this.wheelEvent = "onwheel" in document.createElement("div") ? "wheel" : "mousewheel";
this.element = document.getElementById("commonMenu");
this.element.querySelector(".b3-menu__title .b3-menu__label").innerHTML = window.siyuan.languages.back;
this.element.addEventListener(isMobile() ? "click" : "mouseover", (event) => {
const target = event.target as Element;
if (isMobile()) {
@ -92,7 +93,8 @@ export class Menu {
window.removeEventListener(this.wheelEvent, this.preventDefault, false);
}
this.element.innerHTML = "";
this.element.firstElementChild.classList.add("fn__none");
this.element.lastElementChild.innerHTML = "";
this.element.classList.add("fn__none");
this.element.classList.remove("b3-menu--list", "b3-menu--fullscreen");
this.element.removeAttribute("style"); // zIndex
@ -103,11 +105,11 @@ export class Menu {
if (!element) {
return;
}
this.element.append(element);
this.element.lastElementChild.append(element);
}
public popup(options: { x: number, y: number, h?: number, w?: number }, isLeft = false) {
if (this.element.innerHTML === "") {
if (this.element.lastElementChild.innerHTML === "") {
return;
}
if (isMobile()) {
@ -122,27 +124,19 @@ export class Menu {
public fullscreen(position: "bottom" | "all" = "all") {
this.element.classList.add("b3-menu--fullscreen");
this.element.insertAdjacentHTML("afterbegin", `<div class="b3-menu__title">
<svg class="b3-menu__icon"><use xlink:href="#iconLeft"></use></svg>
<span class="b3-menu__label">${window.siyuan.languages.back}</span>
</div><button class="b3-menu__separator"></button>`);
if (isMobile()) {
window.addEventListener("touchmove", this.preventDefault, {passive: false});
} else {
window.addEventListener(this.wheelEvent, this.preventDefault, {passive: false});
}
this.element.firstElementChild.classList.remove("fn__none");
this.element.classList.remove("fn__none");
this.element.style.left = "0";
window.addEventListener("touchmove", this.preventDefault, {passive: false});
setTimeout(() => {
if (position === "bottom") {
this.element.querySelectorAll(".b3-menu__submenu").forEach((item: HTMLElement) => {
item.style.top = "calc(50vh + 48.5px)";
});
this.element.style.top = "50vh";
this.element.style.transform = "translateY(-50vh)";
this.element.style.height = "50vh";
} else {
this.element.style.top = "0";
this.element.style.transform = "translateY(-100vh)";
}
this.element.scrollTop = 0;
})
this.element.lastElementChild.scrollTop = 0;
}
}
@ -232,9 +226,9 @@ export const bindMenuKeydown = (event: KeyboardEvent) => {
let actionMenuElement;
if (!currentElement) {
if (event.code === "ArrowUp") {
actionMenuElement = getActionMenu(window.siyuan.menus.menu.element.lastElementChild, false);
actionMenuElement = getActionMenu(window.siyuan.menus.menu.element.lastElementChild.lastElementChild, false);
} else {
actionMenuElement = getActionMenu(window.siyuan.menus.menu.element.firstElementChild, true);
actionMenuElement = getActionMenu(window.siyuan.menus.menu.element.lastElementChild.firstElementChild, true);
}
} else {
currentElement.classList.remove("b3-menu__item--current", "b3-menu__item--show");

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

@ -34,7 +34,6 @@ class App {
dialogs: [],
blockPanels: [],
mobile: {},
menus: new Menus(),
ws: new Model({
id: genUUID(),
type: "main",
@ -55,6 +54,7 @@ class App {
getLocalStorage(() => {
fetchGet(`/appearance/langs/${window.siyuan.config.appearance.lang}.json?v=${Constants.SIYUAN_VERSION}`, (lauguages) => {
window.siyuan.languages = lauguages;
window.siyuan.menus = new Menus();
document.title = window.siyuan.languages.siyuanNote;
bootSync();
loadAssets(confResponse.data.conf.appearance);

5
app/src/mobile/menu/index.ts
View file

@ -39,7 +39,7 @@ export const initRightMenu = () => {
<svg class="b3-menu__icon"><use xlink:href="#iconLeft"></use></svg>
<span class="b3-menu__label">${window.siyuan.languages.back}</span>
</div>
<div class="b3-menu__separator"></div>
<div class="b3-menu__items">
${accountHTML}
<div id="menuRecent" class="b3-menu__item">
<svg class="b3-menu__icon"><use xlink:href="#iconList"></use></svg><span class="b3-menu__label">${window.siyuan.languages.recentDocs}</span>
@ -95,7 +95,8 @@ ${accountHTML}
<a class="b3-menu__item" href="${"zh_CN" === window.siyuan.config.lang ? "https://ld246.com/article/1649901726096" : "https://github.com/siyuan-note/siyuan/issues"}" target="_blank">
<svg class="b3-menu__icon"><use xlink:href="#iconHeart"></use></svg>
<span class="b3-menu__label">${window.siyuan.languages.feedback}</span>
</a>`;
</a>
</div>`;
processSync();
// 只能用 click，否则无法上下滚动 https://github.com/siyuan-note/siyuan/issues/6628
menuElement.addEventListener("click", (event) => {

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

@ -409,7 +409,7 @@ export class Background {
html += `<div class="b3-list-item${index === 0 ? " b3-list-item--focus" : ""}">${item}</div>`;
});
window.siyuan.menus.menu.remove();
window.siyuan.menus.menu.element.innerHTML = `<div class="fn__flex-column" style="max-height:50vh"><input style="margin: 4px 8px 8px 8px" class="b3-text-field"/>
window.siyuan.menus.menu.element.lastElementChild.innerHTML = `<div class="fn__flex-column" style="max-height:50vh"><input style="margin: 4px 8px 8px 8px" class="b3-text-field"/>
<div class="b3-list fn__flex-1 b3-list--background" style="position: relative">${html}</div>
</div>`;

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

@ -119,13 +119,13 @@ class App {
}
}
}),
menus: new Menus()
};
fetchPost("/api/system/getConf", {}, response => {
window.siyuan.config = response.data.conf;
getLocalStorage(() => {
fetchGet(`/appearance/langs/${window.siyuan.config.appearance.lang}.json?v=${Constants.SIYUAN_VERSION}`, (lauguages) => {
window.siyuan.languages = lauguages;
window.siyuan.menus = new Menus();
fetchPost("/api/setting/getCloudUser", {}, userResponse => {
window.siyuan.user = userResponse.data;
init();