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

2026-01-03 23:38:49 +01:00 · 2022-11-27 16:48:43 +08:00 · 2022-11-27 16:48:43 +08:00 · 81224760da
commit 81224760da
parent 77ac563117
7 changed files with 27 additions and 13 deletions
--- a/app/src/assets/scss/_list.scss
+++ b/app/src/assets/scss/_list.scss
@ -159,7 +159,7 @@
      padding: 0 2px;
      flex-shrink: 0;
      height: 14px;
-      width: 12px;
+      width: 14px;
      line-height: 14px;
      font-size: 12px;

--- a/app/src/assets/scss/_search.scss
+++ b/app/src/assets/scss/_search.scss
@ -70,4 +70,11 @@
    background-color: var(--b3-theme-background);
    border-top: 1px solid var(--b3-theme-surface-lighter);
  }
+
+  &__list {
+    position: relative;
+    height: calc(50% - 69px);
+    overflow: auto;
+    padding-bottom: 8px;
+  }
 }
--- a/app/src/emoji/index.ts
+++ b/app/src/emoji/index.ts
@ -17,13 +17,13 @@ export const getRandomEmoji = () => {
    return emojis.items[getRandom(0, emojis.items.length - 1)].unicode;
 };

-export const unicode2Emoji = (unicode: string, assic = false) => {
+export const unicode2Emoji = (unicode: string, assic = false, className = "", needSpan = false) => {
    if (!unicode) {
        return "";
    }
    let emoji = "";
    if (unicode.indexOf(".") > -1) {
-        emoji = `<img src="/emojis/${unicode}"/>`;
+        emoji = `<img class="${className}" src="/emojis/${unicode}"/>`;
    } else if (isMobile() || window.siyuan.config.appearance.nativeEmoji || assic) {
        try {
            unicode.split("-").forEach(item => {
@ -33,12 +33,15 @@ export const unicode2Emoji = (unicode: string, assic = false) => {
                    emoji += String.fromCodePoint(parseInt(item, 16));
                }
            });
+            if (needSpan) {
+                emoji = `<span class="${className}">${emoji}</span>`
+            }
        } catch (e) {
            // 自定义表情搜索报错 https://github.com/siyuan-note/siyuan/issues/5883
            // 这里忽略错误不做处理
        }
    } else {
-        emoji = `<svg class="custom-icon"><use xlink:href="#icon-${unicode}"></use></svg>`;
+        emoji = `<svg class="${className || "custom-icon"}"><use xlink:href="#icon-${unicode}"></use></svg>`;
    }
    return emoji;
 };
@ -395,11 +398,11 @@ ${unicode2Emoji(emoji.unicode)}</button>`;
    });
 };

-export const updateOutlineEmoji = (unicode: string, id:string) => {
+export const updateOutlineEmoji = (unicode: string, id: string) => {
    /// #if !MOBILE
    getAllModels().outline.forEach(model => {
        if (model.blockId === id) {
-            model.headerElement.nextElementSibling.firstElementChild.innerHTML = unicode2Emoji(unicode || Constants.SIYUAN_IMAGE_FILE);
+            model.headerElement.nextElementSibling.firstElementChild.outerHTML = unicode2Emoji(unicode || Constants.SIYUAN_IMAGE_FILE, false, "b3-list-item__graphic", true);
        }
    });
    /// #endif
--- a/app/src/layout/dock/Outline.ts
+++ b/app/src/layout/dock/Outline.ts
@ -175,7 +175,7 @@ export class Outline extends Model {
    public updateDocTitle(ial?: IObject) {
        if (this.type === "pin") {
            if (ial) {
-                let iconHTML = `<span class="b3-list-item__graphic">${unicode2Emoji(ial.icon || Constants.SIYUAN_IMAGE_FILE)}</span>`;
+                let iconHTML = `${unicode2Emoji(ial.icon || Constants.SIYUAN_IMAGE_FILE, false, "b3-list-item__graphic", true)}`;
                if (ial.icon === Constants.ZWSP && this.headerElement.nextElementSibling.firstElementChild) {
                    iconHTML = this.headerElement.nextElementSibling.firstElementChild.outerHTML;
                }
--- a/app/src/search/util.ts
+++ b/app/src/search/util.ts
@ -129,7 +129,7 @@ export const genSearch = (config: ISearchOption, element: Element, closeCB?: ()
        <span class="fn__space"></span>
        <button id="searchSyntaxCheck" class="b3-button b3-button--small${config.querySyntax ? "" : " b3-button--cancel"}">${window.siyuan.languages.querySyntax}</button>
    </div>
-    <div id="searchList" style="position:relative;height:calc(50% - 69px);overflow: auto;padding-bottom: 8px" class="b3-list b3-list--background search__list"></div>
+    <div id="searchList" class="search__list b3-list b3-list--background search__list"></div>
    <div id="searchPreview" class="fn__flex-1 search__preview"></div>
 </div>
 <div class="fn__loading fn__loading--top"><img width="120px" src="/stage/loading-pure.svg"></div>`
@ -284,7 +284,7 @@ export const genSearch = (config: ISearchOption, element: Element, closeCB?: ()
                break;
            } else if (target.classList.contains("b3-list-item__toggle")) {
                target.parentElement.nextElementSibling.classList.toggle("fn__none");
-                target.firstElementChild.classList.toggle("b3-list-item__arrow");
+                target.firstElementChild.classList.toggle("b3-list-item__arrow--open");
                event.stopPropagation();
                event.preventDefault();
                break;
@ -338,6 +338,9 @@ export const genSearch = (config: ISearchOption, element: Element, closeCB?: ()
                        });
                    }
                    window.siyuan.menus.menu.remove();
+                } else if (target.querySelector(".b3-list-item__toggle")) {
+                    target.nextElementSibling.classList.toggle("fn__none");
+                    target.firstElementChild.firstElementChild.classList.toggle("b3-list-item__arrow--open");
                }
                event.stopPropagation();
                event.preventDefault();
@ -617,10 +620,11 @@ const onSearch = (data: IBlock[], edit: Protyle, element: Element) => {
 <span class="b3-list-item__toggle b3-list-item__toggle--hl">
    <svg class="b3-list-item__arrow b3-list-item__arrow--open"><use xlink:href="#iconRight"></use></svg>
 </span>
-<span class="b3-list-item__text ft__on-surface">${unicode2Emoji(getNotebookIcon(item.box) || Constants.SIYUAN_IMAGE_NOTE)}${escapeHtml(getNotebookName(item.box))}/${unicode2Emoji(item.ial.icon)}${item.ial.icon ? "&nbsp;" : ""}${item.content}</span>
+${unicode2Emoji(getNotebookIcon(item.box) || Constants.SIYUAN_IMAGE_NOTE, false, "b3-list-item__graphic")}
+<span class="b3-list-item__text">${escapeHtml(getNotebookName(item.box))}${item.hPath}</span>
 </div><div>`;
            item.children.forEach((childItem, childIndex) => {
-                resultHTML += `<div style="padding-left: 22px" data-type="search-item" class="b3-list-item${childIndex === 0 ? " b3-list-item--focus" : ""}" data-node-id="${childItem.id}" data-root-id="${childItem.rootID}">
+                resultHTML += `<div style="padding-left: 22px" data-type="search-item" class="b3-list-item${childIndex === 0 && index === 0 ? " b3-list-item--focus" : ""}" data-node-id="${childItem.id}" data-root-id="${childItem.rootID}">
 <svg class="b3-list-item__graphic"><use xlink:href="#${getIconByType(childItem.type)}"></use></svg>
 <span class="b3-list-item__text">${unicode2Emoji(childItem.ial.icon)}${childItem.ial.icon ? "&nbsp;" : ""}${childItem.content}</span>
 </div>`;
--- a/app/src/util/globalShortcut.ts
+++ b/app/src/util/globalShortcut.ts
@ -382,7 +382,7 @@ export const globalShortcut = () => {
                    let rootId = "";
                    if (item.model instanceof Editor) {
                        rootId = ` data-node-id="${item.model.editor.protyle.block.rootID}"`;
-                        icon = `<span class="b3-list-item__graphic">${unicode2Emoji(item.docIcon || Constants.SIYUAN_IMAGE_FILE)}</span>`;
+                        icon = unicode2Emoji(item.docIcon || Constants.SIYUAN_IMAGE_FILE, false, "b3-list-item__graphic", true);
                    }
                    tabHtml += `<li data-id="${item.id}"${rootId} class="b3-list-item${currentId === item.id ? " b3-list-item--focus" : ""}"${currentId === item.id ? ' data-original="true"' : ""}>${icon}<span class="b3-list-item__text">${escapeHtml(item.title)}</span></li>`;
                });
--- a/app/src/util/pathName.ts
+++ b/app/src/util/pathName.ts
@ -399,7 +399,7 @@ data-box="${notebookId}" class="b3-list-item" data-path="${item.path}">
    <span style="padding-left: ${(item.path.split("/").length - 2) * 18 + 22}px" class="b3-list-item__toggle b3-list-item__toggle--hl${item.subFileCount === 0 ? " fn__hidden" : ""}">
        <svg class="b3-list-item__arrow"><use xlink:href="#iconRight"></use></svg>
    </span>
-    <span class="b3-list-item__graphic">${unicode2Emoji(item.icon || (item.subFileCount === 0 ? Constants.SIYUAN_IMAGE_FILE : Constants.SIYUAN_IMAGE_FOLDER))}</span>
+    ${unicode2Emoji(item.icon || (item.subFileCount === 0 ? Constants.SIYUAN_IMAGE_FILE : Constants.SIYUAN_IMAGE_FOLDER), false, "b3-list-item__graphic", true)}
    <span class="b3-list-item__text">${getDisplayName(item.name, true, true)}</span>
    ${countHTML}
 </li>`;