diff --git a/app/src/assets/scss/business/_color.scss b/app/src/assets/scss/business/_color.scss index 026656211..033f60c7f 100644 --- a/app/src/assets/scss/business/_color.scss +++ b/app/src/assets/scss/business/_color.scss @@ -21,7 +21,8 @@ margin: 0 8px 0 0; } - &:hover:not(.color__square--list) { + &:hover:not(.color__square--list), + &--current { box-shadow: 0 0 0 1px var(--b3-list-hover) inset, 0 0 0 4px var(--b3-theme-background); } } diff --git a/app/src/assets/scss/business/_emojis.scss b/app/src/assets/scss/business/_emojis.scss index c8f8d265e..78371e91f 100644 --- a/app/src/assets/scss/business/_emojis.scss +++ b/app/src/assets/scss/business/_emojis.scss @@ -30,6 +30,14 @@ width: 73px; margin: 8px; cursor: pointer; + transition: var(--b3-transition); + + &:hover, + &--current { + background-color: var(--b3-theme-background); + border-radius: var(--b3-border-radius); + box-shadow: 0 0 0 1px var(--b3-list-hover) inset, 0 0 0 4px var(--b3-theme-background); + } } &-color { diff --git a/app/src/assets/scss/business/_layout.scss b/app/src/assets/scss/business/_layout.scss index 9d68ab0ef..eb3033003 100644 --- a/app/src/assets/scss/business/_layout.scss +++ b/app/src/assets/scss/business/_layout.scss @@ -294,7 +294,6 @@ float: left; height: 18px; width: 18px; - border-radius: var(--b3-border-radius); margin-top: 1px; } } diff --git a/app/src/emoji/index.ts b/app/src/emoji/index.ts index 8d6810195..bca3c54d0 100644 --- a/app/src/emoji/index.ts +++ b/app/src/emoji/index.ts @@ -27,7 +27,7 @@ export const unicode2Emoji = (unicode: string, className = "", needSpan = false, } let emoji = ""; if (unicode.startsWith("api/icon/getDynamicIcon")) { - emoji = ``; + emoji = ``; } else if (unicode.indexOf(".") > -1) { emoji = ``; } else { @@ -194,7 +194,29 @@ export const addEmoji = (unicode: string) => { fetchPost("/api/setting/setEmoji", {emoji: window.siyuan.config.editor.emoji}); }; -export const openEmojiPanel = (id: string, type: "doc" | "notebook" | "av", position: IPosition, avCB?: (emoji: string) => void) => { +const genWeekdayOptions = (lang: string, weekdayType: string) => { + const dynamicWeekdayLang = { + "1": ["Sun", "周日", "週日"], + "2": ["SUN", "周天", "週天"], + "3": ["Sunday", "星期日", "星期日"], + "4": ["SUNDAY", "星期天", "星期天"], + }; + let currentLang = 0 + if (lang === "") { + lang = window.siyuan.config.lang; + } + if (lang === "zh_CN") { + currentLang = 1; + } else if (lang === "zh_CHT") { + currentLang = 2; + } + return ` + + +` +} + +export const openEmojiPanel = (id: string, type: "doc" | "notebook" | "av", position: IPosition, avCB?: (emoji: string) => void, dynamicImgElement?: HTMLElement) => { if (type !== "av") { window.siyuan.menus.menu.remove(); } else { @@ -202,6 +224,24 @@ export const openEmojiPanel = (id: string, type: "doc" | "notebook" | "av", posi } const dynamicURL = "api/icon/getDynamicIcon?"; + const dynamicCurrentObj: IObject = { + color: "#d23f31", + lang: "", + date: "", + weekdayType: "1", + type: "1", + content: "SiYuan", + }; + if (dynamicImgElement && dynamicImgElement.getAttribute("src").startsWith(dynamicURL)) { + const dynamicCurrentUrl = new URLSearchParams(dynamicImgElement.getAttribute("src").replace(dynamicURL, "")); + dynamicCurrentObj.color = dynamicCurrentUrl.get("color") || "#d23f31"; + dynamicCurrentObj.lang = dynamicCurrentUrl.get("lang") || ""; + dynamicCurrentObj.date = dynamicCurrentUrl.get("date") || ""; + dynamicCurrentObj.weekdayType = dynamicCurrentUrl.get("weekdayType") || "1"; + dynamicCurrentObj.type = dynamicCurrentUrl.get("type") || "1"; + dynamicCurrentObj.content = dynamicCurrentUrl.get("content") || "SiYuan"; + } + const dialog = new Dialog({ disableAnimation: true, transparent: true, @@ -249,69 +289,66 @@ export const openEmojiPanel = (id: string, type: "doc" | "notebook" | "av", posi
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
- +
- ${window.siyuan.languages.language} + ${window.siyuan.languages.language}
- ${window.siyuan.languages.date} + ${window.siyuan.languages.date} - +
- ${window.siyuan.languages.format} + ${window.siyuan.languages.format}
- - - - - - - + + + + + + +
- ${window.siyuan.languages.custom} + ${window.siyuan.languages.custom} - +
- +
@@ -526,11 +563,10 @@ ${unicode2Emoji(emoji.unicode)}`; let unicode = ""; if (target.classList.contains("emojis__item")) { unicode = target.getAttribute("data-unicode"); - if (type !== "av") { - dialog.destroy(); - } + dialog.destroy(); } else if (target.classList.contains("emoji__dynamic-item")) { unicode = target.getAttribute("src"); + dialog.destroy(); } else { // 随机 unicode = getRandomEmoji(); @@ -593,6 +629,7 @@ ${unicode2Emoji(emoji.unicode)}`; url.delete("lang"); } item.setAttribute("src", dynamicURL + url.toString()); + dynamicLangElements[1].innerHTML = genWeekdayOptions(dynamicLangElements[0].value, dynamicLangElements[1].value) }); }); dynamicLangElements[1].addEventListener("change", () => { @@ -619,6 +656,13 @@ ${unicode2Emoji(emoji.unicode)}`; item.setAttribute("src", dynamicURL + url.toString()); dynamicTextElements[0].style.backgroundColor = dynamicTextElements[0].value; }); + dialog.element.querySelectorAll(".color__square").forEach((item: HTMLElement) => { + if (item.style.backgroundColor === dynamicTextElements[0].value) { + item.classList.add("color__square--current"); + } else { + item.classList.remove("color__square--current"); + } + }); }); dynamicTextElements[1].addEventListener("input", () => { const url = new URLSearchParams(dynamicTextImgElement.getAttribute("src").replace(dynamicURL, "")); diff --git a/app/src/layout/dock/Files.ts b/app/src/layout/dock/Files.ts index 85d49c032..b6447b87a 100644 --- a/app/src/layout/dock/Files.ts +++ b/app/src/layout/dock/Files.ts @@ -147,7 +147,7 @@ export class Files extends Model { y: rect.bottom, h: rect.height, w: rect.width, - }); + }, undefined, target.querySelector("img")); break; } else if (type === "toggle") { const svgElement = target.querySelector("svg"); @@ -274,14 +274,14 @@ export class Files extends Model { y: rect.bottom, h: rect.height, w: rect.width, - }); + }, undefined, target.querySelector("img")); } else { openEmojiPanel(target.parentElement.parentElement.getAttribute("data-url"), "notebook", { x: rect.left, y: rect.bottom, h: rect.height, w: rect.width, - }); + }, undefined, target.querySelector("img")); } break; } else if (isNotCtrl(event) && target.classList.contains("b3-list-item__toggle")) { diff --git a/app/src/protyle/header/Background.ts b/app/src/protyle/header/Background.ts index 2febb9670..74efd7faf 100644 --- a/app/src/protyle/header/Background.ts +++ b/app/src/protyle/header/Background.ts @@ -258,7 +258,7 @@ export class Background { y: rect.bottom, h: rect.height, w: rect.width - }); + }, undefined, target.querySelector("img")); event.preventDefault(); event.stopPropagation(); break; diff --git a/app/src/protyle/render/av/col.ts b/app/src/protyle/render/av/col.ts index 7e176cd20..58d1db549 100644 --- a/app/src/protyle/render/av/col.ts +++ b/app/src/protyle/render/av/col.ts @@ -626,7 +626,7 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen iconElement.setAttribute("data-icon", unicode); iconElement.innerHTML = unicode ? unicode2Emoji(unicode) : ``; updateAttrViewCellAnimation(blockElement.querySelector(`.av__row--header .av__cell[data-col-id="${colId}"]`), undefined, {icon: unicode}); - }); + }, iconElement.querySelector("img")); event.preventDefault(); event.stopPropagation(); }); diff --git a/app/src/protyle/render/av/openMenuPanel.ts b/app/src/protyle/render/av/openMenuPanel.ts index 2bb39916c..fcd42edf2 100644 --- a/app/src/protyle/render/av/openMenuPanel.ts +++ b/app/src/protyle/render/av/openMenuPanel.ts @@ -724,7 +724,7 @@ export const openMenuPanel = (options: { }]); target.innerHTML = unicode ? unicode2Emoji(unicode) : ''; target.dataset.icon = unicode; - }); + }, target.querySelector("img")); event.preventDefault(); event.stopPropagation(); break; @@ -796,7 +796,7 @@ export const openMenuPanel = (options: { updateAttrViewCellAnimation(options.blockElement.querySelector(`.av__row--header .av__cell[data-col-id="${colId}"]`), undefined, {icon: unicode}); } target.dataset.icon = unicode; - }); + }, target.querySelector("img")); event.preventDefault(); event.stopPropagation(); break; diff --git a/app/src/protyle/wysiwyg/index.ts b/app/src/protyle/wysiwyg/index.ts index 8476253e1..29fd85509 100644 --- a/app/src/protyle/wysiwyg/index.ts +++ b/app/src/protyle/wysiwyg/index.ts @@ -2616,7 +2616,9 @@ export class WYSIWYG { emojiElement.insertAdjacentHTML("afterend", ""); const oldHTML = nodeElement.outerHTML; let emojiHTML; - if (unicode.indexOf(".") > -1) { + if (unicode.startsWith("api/icon/getDynamicIcon")) { + emojiHTML = ``; + } else if (unicode.indexOf(".") > -1) { const emojiList = unicode.split("."); emojiHTML = `${emojiList[0]}`; } else { @@ -2626,7 +2628,7 @@ export class WYSIWYG { hideElements(["dialog"]); updateTransaction(protyle, nodeElement.getAttribute("data-node-id"), nodeElement.outerHTML, oldHTML); focusByWbr(nodeElement, range); - }); + }, emojiElement); } return; }