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

✨ https://github.com/siyuan-note/siyuan/issues/9304

Browse source
This commit is contained in:
Vanessa 2023-10-04 21:35:40 +08:00
parent 61ee5676c4
commit 3ffc7b249b
8 changed files with 54 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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

5
app/src/dialog/index.ts
View file

@ -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 = `<div class="b3-dialog" style="z-index: ${++window.siyuan.zIndex};">
<div class="b3-dialog__scrim"${options.transparent ? 'style="background-color:transparent"' : ""}></div>
<div class="b3-dialog__container" style="width:${options.width || "auto"};height:${options.height || "auto"}">
<svg ${(isMobile() && options.title) ? 'style="top:0;right:0;"' : ""} class="b3-dialog__close${this.disableClose ? " fn__none" : ""}"><use xlink:href="#iconCloseRound"></use></svg>
<svg ${(isMobile() && options.title) ? 'style="top:0;right:0;"' : ""} class="b3-dialog__close${(this.disableClose||options.hideCloseIcon) ? " fn__none" : ""}"><use xlink:href="#iconCloseRound"></use></svg>
<div class="resize__move b3-dialog__header${options.title ? "" : " fn__none"}" onselectstart="return false;">${options.title || ""}</div>
<div class="b3-dialog__body">${options.content}</div>
<div class="resize__rd"></div><div class="resize__ld"></div><div class="resize__lt"></div><div class="resize__rt"></div><div class="resize__r"></div><div class="resize__d"></div><div class="resize__t"></div><div class="resize__l"></div>
@ -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) => {

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

@ -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: `<div class="emojis" data-menu="true">
@ -223,6 +230,9 @@ export const openEmojiPanel = (id: string, type: "doc" | "notebook" | "av", posi
</div>
</div>`
});
(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)}</button>`;
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") {

12
app/src/layout/dock/Files.ts
View file

@ -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;

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

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

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

@ -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;

12
app/src/protyle/render/av/col.ts
View file

@ -391,6 +391,18 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
type: "readonly",
label: `<input style="margin: 4px 0" class="b3-text-field" type="text" value="${cellElement.innerText.trim()}">`,
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;

5
app/src/protyle/wysiwyg/index.ts
View file

@ -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();