From feb2bc9a0d20b9eb78929fd7ca213190993bade9 Mon Sep 17 00:00:00 2001 From: Vanessa Date: Tue, 31 May 2022 17:51:34 +0800 Subject: [PATCH] :art: outline add emoji --- app/src/assets/scss/base.scss | 6 ------ app/src/editor/util.ts | 2 +- app/src/emoji/index.ts | 9 +++++++++ app/src/layout/dock/Outline.ts | 25 +++++++++++++++++++------ app/src/layout/dock/index.ts | 2 +- app/src/protyle/header/Background.ts | 3 ++- 6 files changed, 32 insertions(+), 15 deletions(-) diff --git a/app/src/assets/scss/base.scss b/app/src/assets/scss/base.scss index 4e948c4eb..0f1b70ee5 100644 --- a/app/src/assets/scss/base.scss +++ b/app/src/assets/scss/base.scss @@ -62,12 +62,6 @@ progressLoading: 400 // 需大于 .b3-dialog } } -.outline__title { - padding: 0 8px; - white-space: nowrap; - line-height: 30px; -} - .fullscreen { position: fixed; top: 0; diff --git a/app/src/editor/util.ts b/app/src/editor/util.ts index 8e153b29a..326edb87c 100644 --- a/app/src/editor/util.ts +++ b/app/src/editor/util.ts @@ -441,7 +441,7 @@ const updateOutline = (models: IModels, protyle: IProtyle, reload = false) => { }, response => { item.update(response, blockId); if (protyle) { - item.updateDocTitle(protyle.title.editElement.textContent); + item.updateDocTitle(protyle.background.ial); if (getSelection().rangeCount > 0) { const startContainer = getSelection().getRangeAt(0).startContainer; if (protyle.wysiwyg.element.contains(startContainer)) { diff --git a/app/src/emoji/index.ts b/app/src/emoji/index.ts index 61d61c00b..0662b25f1 100644 --- a/app/src/emoji/index.ts +++ b/app/src/emoji/index.ts @@ -266,6 +266,7 @@ export const openEmojiPanel = (id: string, target: HTMLElement, isNotebook = fal addEmoji(unicode); updateFileTreeEmoji(unicode, id); updateFileEmoji(unicode, id); + updateOutlineEmoji(unicode); }); } return; @@ -344,6 +345,7 @@ ${unicode2Emoji(emoji.unicode)}`; window.siyuan.menus.menu.remove(); updateFileTreeEmoji("", id); updateFileEmoji("", id); + updateOutlineEmoji(""); }); } return; @@ -373,6 +375,7 @@ ${unicode2Emoji(emoji.unicode)}`; addEmoji(unicode); updateFileTreeEmoji(unicode, id); updateFileEmoji(unicode, id); + updateOutlineEmoji(unicode); }); } return; @@ -380,6 +383,12 @@ ${unicode2Emoji(emoji.unicode)}`; }); }; +export const updateOutlineEmoji = (unicode: string) => { + getAllModels().outline.forEach(model => { + model.headerElement.nextElementSibling.firstElementChild.innerHTML = unicode2Emoji(unicode || Constants.SIYUAN_IMAGE_FILE); + }); +} + export const updateFileTreeEmoji = (unicode: string, id: string, icon = "iconFile") => { let emojiElement; if (isMobile()) { diff --git a/app/src/layout/dock/Outline.ts b/app/src/layout/dock/Outline.ts index 53b45bc00..ec6da7627 100644 --- a/app/src/layout/dock/Outline.ts +++ b/app/src/layout/dock/Outline.ts @@ -11,11 +11,12 @@ import {Constants} from "../../constants"; import {focusBlock} from "../../protyle/util/selection"; import {pushBack} from "../../util/backForward"; import {escapeHtml} from "../../util/escape"; +import {unicode2Emoji} from "../../emoji"; export class Outline extends Model { private tree: Tree; public element: HTMLElement; - private headerElement: HTMLElement; + public headerElement: HTMLElement; public type: "pin" | "local"; public blockId: string; private openNodes: { [key: string]: string[] } = {}; @@ -46,7 +47,9 @@ export class Outline extends Model { if (this.type === "local" && this.blockId === data.data.id) { this.parent.updateTitle(data.data.title); } else { - this.updateDocTitle(data.data.title); + this.updateDocTitle({ + title: data.data.title + }); } break; case "unmount": @@ -81,7 +84,7 @@ export class Outline extends Model { -
+
`; this.element = options.tab.panelElement.lastElementChild as HTMLElement; this.headerElement = options.tab.panelElement.firstElementChild as HTMLElement; @@ -160,10 +163,20 @@ export class Outline extends Model { } } - public updateDocTitle(title = "") { + public updateDocTitle(ial?:IObject) { if (this.type === "pin") { - this.headerElement.nextElementSibling.innerHTML = escapeHtml(title); - this.headerElement.nextElementSibling.setAttribute("title", title); + if (ial) { + let iconHTML = `${unicode2Emoji(ial.icon || Constants.SIYUAN_IMAGE_FILE)}` + if (typeof ial.icon === "undefined" && this.headerElement.nextElementSibling.firstElementChild) { + iconHTML = this.headerElement.nextElementSibling.firstElementChild.outerHTML; + } + this.headerElement.nextElementSibling.innerHTML = `${iconHTML} +${escapeHtml(ial.title)}`; + this.headerElement.nextElementSibling.setAttribute("title", ial.title); + } else { + this.headerElement.nextElementSibling.innerHTML = ""; + this.headerElement.nextElementSibling.removeAttribute("title"); + } } } diff --git a/app/src/layout/dock/index.ts b/app/src/layout/dock/index.ts index 9f412055b..f3060a215 100644 --- a/app/src/layout/dock/index.ts +++ b/app/src/layout/dock/index.ts @@ -168,7 +168,7 @@ export class Dock { blockId: editor?.protyle?.block?.rootID, }); if (editor?.protyle?.title?.editElement) { - outline.updateDocTitle(editor.protyle.title.editElement.textContent); + outline.updateDocTitle(editor.protyle?.background?.ial); } tab.addModel(outline); } diff --git a/app/src/protyle/header/Background.ts b/app/src/protyle/header/Background.ts index ee1bda96e..6849e8e48 100644 --- a/app/src/protyle/header/Background.ts +++ b/app/src/protyle/header/Background.ts @@ -4,7 +4,7 @@ import {hideElements} from "../ui/hideElements"; import {uploadFiles} from "../upload"; import {hideMessage} from "../../dialog/message"; import {fetchPost} from "../../util/fetch"; -import {getRandomEmoji, openEmojiPanel, unicode2Emoji, updateFileTreeEmoji} from "../../emoji"; +import {getRandomEmoji, openEmojiPanel, unicode2Emoji, updateFileTreeEmoji, updateOutlineEmoji} from "../../emoji"; import {upDownHint} from "../../util/upDownHint"; import {setPosition} from "../../util/setPosition"; import {openGlobalSearch} from "../../search/util"; @@ -232,6 +232,7 @@ export class Background { this.ial.icon = emoji; this.render(this.ial, protyle.block.rootID); updateFileTreeEmoji(emoji, protyle.block.rootID); + updateOutlineEmoji(emoji); fetchPost("/api/attr/setBlockAttrs", { id: protyle.block.rootID, attrs: {"icon": emoji}