From 3ffc7b249b13881ae752509d455e532a63c1f92a Mon Sep 17 00:00:00 2001 From: Vanessa Date: Wed, 4 Oct 2023 21:35:40 +0800 Subject: [PATCH] :sparkles: https://github.com/siyuan-note/siyuan/issues/9304 --- app/src/assets/scss/component/_menu.scss | 5 ++--- app/src/dialog/index.ts | 5 ++--- app/src/emoji/index.ts | 15 ++++++++++++++- app/src/layout/dock/Files.ts | 12 +++++++++--- app/src/menus/Menu.ts | 17 ++++++----------- app/src/protyle/header/Background.ts | 7 ++++++- app/src/protyle/render/av/col.ts | 12 ++++++++++++ app/src/protyle/wysiwyg/index.ts | 5 +++-- 8 files changed, 54 insertions(+), 24 deletions(-) diff --git a/app/src/assets/scss/component/_menu.scss b/app/src/assets/scss/component/_menu.scss index 275df69a8..28ba84173 100644 --- a/app/src/assets/scss/component/_menu.scss +++ b/app/src/assets/scss/component/_menu.scss @@ -319,14 +319,13 @@ white-space: normal; display: flex; flex-direction: column; - max-height: 386px; padding: 8px 0; height: 100%; box-sizing: border-box; &__item { font-size: 24px; - line-height: 24px; + line-height: 28px; font-family: var(--b3-font-family-emoji); text-align: center; height: 28px; @@ -336,7 +335,7 @@ transition: var(--b3-transition); background-color: transparent; border: 0; - margin: 0; + margin: 1px; overflow: hidden; img, svg { diff --git a/app/src/dialog/index.ts b/app/src/dialog/index.ts index 8309e813f..77cdc383f 100644 --- a/app/src/dialog/index.ts +++ b/app/src/dialog/index.ts @@ -21,6 +21,7 @@ export class Dialog { height?: string, destroyCallback?: (options?: IObject) => void, disableClose?: boolean, + hideCloseIcon?: boolean, disableAnimation?: boolean, resizeCallback?: (type: string) => void }) { @@ -33,7 +34,7 @@ export class Dialog { this.element.innerHTML = `
- +
${options.title || ""}
${options.content}
@@ -45,8 +46,6 @@ export class Dialog { } event.preventDefault(); event.stopPropagation(); - // https://ld246.com/article/1657969292700/comment/1658147006669#comments - window.siyuan.menus.menu.remove(); }); if (!this.disableClose) { this.element.querySelector(".b3-dialog__close").addEventListener("click", (event) => { diff --git a/app/src/emoji/index.ts b/app/src/emoji/index.ts index c0d624c7e..2285d8b5d 100644 --- a/app/src/emoji/index.ts +++ b/app/src/emoji/index.ts @@ -9,6 +9,7 @@ import {getAllModels} from "../layout/getAll"; /// #endif import {setNoteBook} from "../util/pathName"; import {Dialog} from "../dialog"; +import {setPosition} from "../util/setPosition"; export const getRandomEmoji = () => { const emojis = window.siyuan.emojis[getRandom(0, window.siyuan.emojis.length - 1)]; @@ -191,8 +192,14 @@ export const addEmoji = (unicode: string) => { }; export const openEmojiPanel = (id: string, type: "doc" | "notebook" | "av", position: IPosition) => { + if (type !== "av") { + window.siyuan.menus.menu.remove(); + } else { + window.siyuan.menus.menu.removeScrollEvent(); + } const dialog = new Dialog({ transparent: true, + hideCloseIcon: true, width: isMobile() ? "80vw" : "360px", height: "50vh", content: `
@@ -223,6 +230,9 @@ export const openEmojiPanel = (id: string, type: "doc" | "notebook" | "av", posi
` }); + (dialog.element.firstElementChild as HTMLElement).style.justifyContent = "inherit"; + (dialog.element.firstElementChild as HTMLElement).style.alignItems = "inherit"; + setPosition(dialog.element.querySelector(".b3-dialog__container"), position.x, position.y, position.h, position.w); dialog.element.querySelector(".emojis__item").classList.add("emojis__item--current"); const inputElement = dialog.element.querySelector(".b3-text-field") as HTMLInputElement; const emojisContentElement = dialog.element.querySelector(".emojis__panel"); @@ -391,8 +401,11 @@ ${unicode2Emoji(emoji.unicode)}`; let unicode = ""; if (emojiElement) { unicode = emojiElement.getAttribute("data-unicode"); - window.siyuan.menus.menu.remove(); + if (type !== "av") { + dialog.destroy() + } } else { + // 随机 unicode = getRandomEmoji(); } if (type === "notebook") { diff --git a/app/src/layout/dock/Files.ts b/app/src/layout/dock/Files.ts index fb5735d7c..437ce2b1d 100644 --- a/app/src/layout/dock/Files.ts +++ b/app/src/layout/dock/Files.ts @@ -125,7 +125,9 @@ export class Files extends Model { const rect = target.getBoundingClientRect(); openEmojiPanel(target.parentElement.getAttribute("data-url"), "notebook", { x: rect.left, - y: rect.bottom + y: rect.bottom, + h: rect.height, + w: rect.width, }); break; } else if (type === "toggle") { @@ -247,12 +249,16 @@ export class Files extends Model { if (target.parentElement.getAttribute("data-type") === "navigation-file") { openEmojiPanel(target.parentElement.getAttribute("data-node-id"), "doc", { x: rect.left, - y: rect.bottom + y: rect.bottom, + h: rect.height, + w: rect.width, }); } else { openEmojiPanel(target.parentElement.parentElement.getAttribute("data-url"), "notebook", { x: rect.left, - y: rect.bottom + y: rect.bottom, + h: rect.height, + w: rect.width, }); } break; diff --git a/app/src/menus/Menu.ts b/app/src/menus/Menu.ts index 36f6c4d8a..1ab21339f 100644 --- a/app/src/menus/Menu.ts +++ b/app/src/menus/Menu.ts @@ -92,17 +92,16 @@ export class Menu { return menuItem.element; } + public removeScrollEvent() { + window.removeEventListener(isMobile() ? "touchmove" : this.wheelEvent, this.preventDefault, false); + } + public remove() { if (window.siyuan.menus.menu.removeCB) { window.siyuan.menus.menu.removeCB(); window.siyuan.menus.menu.removeCB = undefined; } - if (isMobile()) { - window.removeEventListener("touchmove", this.preventDefault, false); - } else { - window.removeEventListener(this.wheelEvent, this.preventDefault, false); - } - + this.removeScrollEvent(); this.element.firstElementChild.classList.add("fn__none"); this.element.lastElementChild.innerHTML = ""; this.element.classList.add("fn__none"); @@ -129,11 +128,7 @@ export class Menu { if (this.element.lastElementChild.innerHTML === "") { return; } - if (isMobile()) { - window.addEventListener("touchmove", this.preventDefault, {passive: false}); - } else { - window.addEventListener(this.wheelEvent, this.preventDefault, {passive: false}); - } + window.addEventListener(isMobile() ? "touchmove" : this.wheelEvent, this.preventDefault, {passive: false}); this.element.style.zIndex = (++window.siyuan.zIndex).toString(); this.element.classList.remove("fn__none"); setPosition(this.element, options.x - (options.isLeft ? window.siyuan.menus.menu.element.clientWidth : 0), options.y, options.h, options.w); diff --git a/app/src/protyle/header/Background.ts b/app/src/protyle/header/Background.ts index 81956c152..cf9f0cefb 100644 --- a/app/src/protyle/header/Background.ts +++ b/app/src/protyle/header/Background.ts @@ -178,7 +178,12 @@ export class Background { break; } else if (type === "open-emoji") { const rect = this.iconElement.getBoundingClientRect(); - openEmojiPanel(protyle.block.rootID, "doc", {x: rect.left, y: rect.bottom}); + openEmojiPanel(protyle.block.rootID, "doc", { + x: rect.left, + y: rect.bottom, + h: rect.height, + w: rect.width + }); event.preventDefault(); event.stopPropagation(); break; diff --git a/app/src/protyle/render/av/col.ts b/app/src/protyle/render/av/col.ts index 02a36c927..ae4121df3 100644 --- a/app/src/protyle/render/av/col.ts +++ b/app/src/protyle/render/av/col.ts @@ -391,6 +391,18 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen type: "readonly", label: ``, bind(element) { + const iconElement = element.querySelector(".block__icon") as HTMLElement + iconElement.addEventListener("click", (event) => { + const rect = iconElement.getBoundingClientRect(); + openEmojiPanel("", "av", { + x: rect.left, + y: rect.bottom, + h: rect.height, + w: rect.width + }); + event.preventDefault(); + event.stopPropagation(); + }); element.querySelector("input").addEventListener("keydown", (event: KeyboardEvent) => { if (event.isComposing) { return; diff --git a/app/src/protyle/wysiwyg/index.ts b/app/src/protyle/wysiwyg/index.ts index a60748821..060a4ddc2 100644 --- a/app/src/protyle/wysiwyg/index.ts +++ b/app/src/protyle/wysiwyg/index.ts @@ -1903,8 +1903,9 @@ export class WYSIWYG { const rect = menuElement.getBoundingClientRect(); window.siyuan.menus.menu.popup({ x: rect.left, - y: rect.top - }, true); + y: rect.top, + isLeft: true + }); /// #endif event.stopPropagation(); event.preventDefault();