🎨 https://github.com/siyuan-note/siyuan/issues/7536

2023-07-02 21:53:02 +08:00 · 2023-07-02 21:53:02 +08:00 · 2caa3b657c
commit 2caa3b657c
parent 11d582f39d
8 changed files with 191 additions and 83 deletions
--- a/app/appearance/langs/zh_CN.json
+++ b/app/appearance/langs/zh_CN.json
@ -1,4 +1,6 @@
 {
+  "hideAll": "隐藏全部",
+  "showAll": "显示全部",
  "number": "数字",
  "date": "日期",
  "select": "单选",
--- a/app/src/assets/scss/business/_av.scss
+++ b/app/src/assets/scss/business/_av.scss
@ -114,8 +114,16 @@
    z-index: 504;
    position: relative;

+    .b3-menu {
+      width: 300px;
+    }
+
    .b3-menu__item:not([data-type="title"]):hover {
      background-color: var(--b3-list-hover);
+
+      .b3-menu__action {
+        opacity: 1;
+      }
    }
  }

--- a/app/src/protyle/hint/extend.ts
+++ b/app/src/protyle/hint/extend.ts
@ -46,11 +46,11 @@ export const hintSlash = (key: string, protyle: IProtyle) => {
        filter: ["ai chat"],
        value: Constants.ZWSP + 5,
        html: '<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconSparkles"></use></svg><span class="b3-list-item__text">AI Chat</span></div>',
-    }, /*{
+    }, {
        filter: ["属性视图", "shuxingshitu", "sxst", "attribute view"],
        value: '<div data-type="NodeAttributeView" data-av-type="table"></div>',
        html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconDatabase"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.attributeView}</span></div>`,
-    },*/ {
+    }, {
        filter: ["文档", "子文档", "wendang", "wd", "ziwendang", "zwd", "xjwd"],
        value: Constants.ZWSP + 4,
        html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconFile"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.newFile}</span><span class="b3-menu__accelerator">${updateHotkeyTip(window.siyuan.config.keymap.general.newFile.custom)}</span></div>`,
--- a/app/src/protyle/render/av/action.ts
+++ b/app/src/protyle/render/av/action.ts
@ -16,7 +16,13 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
    }
    const addElement = hasClosestByAttribute(event.target, "data-type", "av-header-add");
    if (addElement) {
-        addCol(protyle, blockElement, addElement);
+        const addMenu = addCol(protyle, blockElement);
+        const addRect = addElement.getBoundingClientRect()
+        addMenu.open({
+            x: addRect.left,
+            y: addRect.bottom,
+            h: addRect.height
+        });
        event.preventDefault();
        event.stopPropagation();
        return true;
--- a/app/src/protyle/render/av/addCol.ts
+++ b/app/src/protyle/render/av/addCol.ts
@ -1,7 +1,7 @@
 import {Menu} from "../../../plugin/Menu";
 import {transaction} from "../../wysiwyg/transaction";

-export const addCol = (protyle:IProtyle, blockElement:HTMLElement, addElement:HTMLElement) => {
+export const addCol = (protyle: IProtyle, blockElement: HTMLElement) => {
    const menu = new Menu("av-header-add");
    menu.addItem({
        icon: "iconAlignLeft",
@ -98,10 +98,5 @@ export const addCol = (protyle:IProtyle, blockElement:HTMLElement, addElement:HT
            }]);
        }
    });
-    const addRect = addElement.getBoundingClientRect();
-    menu.open({
-        x: addRect.left,
-        y: addRect.bottom,
-        h: addRect.height
-    });
+    return menu;
 }
--- a/app/src/protyle/render/av/col.ts
+++ b/app/src/protyle/render/av/col.ts
@ -6,6 +6,14 @@ export const getColIconByType = (type: TAVCol) => {
            return "iconAlignLeft";
        case "block":
            return "iconParagraph";
+        case "number":
+            return "iconNumber";
+        case "select":
+            return "iconListItem";
+        case "mSelect":
+            return "iconList";
+        case "date":
+            return "iconCalendar";
    }
 };

--- a/app/src/protyle/render/av/openMenuPanel.ts
+++ b/app/src/protyle/render/av/openMenuPanel.ts
@ -1,7 +1,7 @@
-import {Menu} from "../../../plugin/Menu";
 import {transaction} from "../../wysiwyg/transaction";
 import {fetchPost} from "../../../util/fetch";
-import {hideElements} from "../../ui/hideElements";
+import {addCol} from "./addCol";
+import {getColIconByType} from "./col";

 export const openMenuPanel = (protyle: IProtyle, blockElement: HTMLElement, type: "properties" | "config" = "config") => {
    let avMenuPanel = document.querySelector(".av__panel");
@ -10,90 +10,88 @@ export const openMenuPanel = (protyle: IProtyle, blockElement: HTMLElement, type
        return;
    }
    window.siyuan.menus.menu.remove();
-    fetchPost("/api/av/renderAttributeView", {id: blockElement.getAttribute("data-av-id")}, (response) => {
-        const data = response.data.av;
+    const avId = blockElement.getAttribute("data-av-id")
+    fetchPost("/api/av/renderAttributeView", {id: avId}, (response) => {
+        const data = response.data.av as IAV;
        const tabRect = blockElement.querySelector(".layout-tab-bar").getBoundingClientRect()
        let html
        if (type === "config") {
-            html = `<div class="av__panel">
-    <div class="b3-dialog__scrim" data-type="close"></div>
-    <div class="b3-menu" style="width: 300px;right:${window.innerWidth - tabRect.right}px;top:${tabRect.bottom}px">
-        <button class="b3-menu__item" data-type="title">
-            <span class="b3-menu__label">${window.siyuan.languages.config}</span>
-            <svg class="b3-menu__action" data-type="close" style="opacity: 1"><use xlink:href="#iconCloseRound"></use></svg>
-        </button>
-        <button class="b3-menu__item">
-            <svg class="b3-menu__icon"></svg>
-            <span class="b3-menu__label">${window.siyuan.languages.attr}</span>
-            <span class="b3-menu__accelerator">${data.columns.filter((item: IAVColumn) => !item.hidden).length}/${data.columns.length}</span>
-            <svg class="b3-menu__icon b3-menu__icon--arrow"><use xlink:href="#iconRight"></use></svg>
-        </button>
-        <button class="b3-menu__item">
-            <svg class="b3-menu__icon"><use xlink:href="#iconFilter"></use></svg>
-            <span class="b3-menu__label">${window.siyuan.languages.filter}</span>
-            <span class="b3-menu__accelerator">${data.filters.length}</span>
-            <svg class="b3-menu__icon b3-menu__icon--arrow"><use xlink:href="#iconRight"></use></svg>
-        </button>
-        <button class="b3-menu__item">
-            <svg class="b3-menu__icon"><use xlink:href="#iconSort"></use></svg>
-            <span class="b3-menu__label">${window.siyuan.languages.sort}</span>
-            <span class="b3-menu__accelerator">${data.sorts.length}</span>
-            <svg class="b3-menu__icon b3-menu__icon--arrow"><use xlink:href="#iconRight"></use></svg>
-        </button>
-        <button class="b3-menu__item">
-            <svg class="b3-menu__icon"></svg>
-            <span class="b3-menu__label">${window.siyuan.languages.pageCount}</span>
-            <span class="b3-menu__accelerator">50</span>
-            <svg class="b3-menu__icon b3-menu__icon--arrow"><use xlink:href="#iconRight"></use></svg>
-        </button>
-    </div>
-</div>`
+            html = getConfigHTML(data, tabRect);
        } else if (type === "properties") {
-            html = `<div class="av__panel">
-    <div class="b3-dialog__scrim" data-type="close"></div>
-    <div class="b3-menu" style="width: 300px;right:${window.innerWidth - tabRect.right}px;top:${tabRect.bottom}px">
-        <button class="b3-menu__item">
-            <svg class="b3-menu__icon"><use xlink:href="#iconLeft"></use></svg>
-            <span class="b3-menu__label">${window.siyuan.languages.attr}</span>
-            <svg class="b3-menu__action" data-type="close" style="opacity: 1"><use xlink:href="#iconCloseRound"></use></svg>
-        </button>
-        <button class="b3-menu__item">
-            <svg class="b3-menu__icon"></svg>
-            <span class="b3-menu__label">${window.siyuan.languages.attr}</span>
-            <span class="b3-menu__accelerator">${data.columns.filter((item: IAVColumn) => !item.hidden).length}/${data.columns.length}</span>
-            <svg class="b3-menu__icon b3-menu__icon--arrow"><use xlink:href="#iconRight"></use></svg>
-        </button>
-        <button class="b3-menu__item">
-            <svg class="b3-menu__icon"><use xlink:href="#iconFilter"></use></svg>
-            <span class="b3-menu__label">${window.siyuan.languages.filter}</span>
-            <span class="b3-menu__accelerator">${data.filters.length}</span>
-            <svg class="b3-menu__icon b3-menu__icon--arrow"><use xlink:href="#iconRight"></use></svg>
-        </button>
-        <button class="b3-menu__item">
-            <svg class="b3-menu__icon"><use xlink:href="#iconSort"></use></svg>
-            <span class="b3-menu__label">${window.siyuan.languages.sort}</span>
-            <span class="b3-menu__accelerator">${data.sorts.length}</span>
-            <svg class="b3-menu__icon b3-menu__icon--arrow"><use xlink:href="#iconRight"></use></svg>
-        </button>
-        <button class="b3-menu__item">
-            <svg class="b3-menu__icon"></svg>
-            <span class="b3-menu__label">${window.siyuan.languages.pageCount}</span>
-            <span class="b3-menu__accelerator">50</span>
-            <svg class="b3-menu__icon b3-menu__icon--arrow"><use xlink:href="#iconRight"></use></svg>
-        </button>
-    </div>
-</div>`
+            html = getPropertiesHTML(data, tabRect);
        }
-        document.body.insertAdjacentHTML("beforeend", html);
+        document.body.insertAdjacentHTML("beforeend", `<div class="av__panel">${html}</div>`);
        avMenuPanel = document.querySelector(".av__panel");
        avMenuPanel.addEventListener("click", (event) => {
            event.preventDefault();
-            event.stopPropagation();
            let target = event.target as HTMLElement;
            while (target && !target.isSameNode(avMenuPanel)) {
                const type = target.dataset.type;
                if (type === "close") {
                    avMenuPanel.remove();
+                    event.stopPropagation();
+                    break;
+                } else if (type === "goConfig") {
+                    avMenuPanel.innerHTML = getConfigHTML(data, tabRect);
+                    event.stopPropagation();
+                    break;
+                } else if (type === "goProperties") {
+                    avMenuPanel.innerHTML = getPropertiesHTML(data, tabRect);
+                    event.stopPropagation();
+                    break;
+                } else if (type === "newCol") {
+                    avMenuPanel.remove();
+                    const addMenu = addCol(protyle, blockElement);
+                    addMenu.open({
+                        x: tabRect.right,
+                        y: tabRect.bottom,
+                        h: tabRect.height,
+                        isLeft: true
+                    });
+                    event.stopPropagation();
+                    break;
+                } else if (type === "showAllCol") {
+// showAllCol(data);
+                    avMenuPanel.innerHTML = getPropertiesHTML(data, tabRect);
+                    event.stopPropagation();
+                    break;
+                } else if (type === "hideAllCol") {
+
+                    event.stopPropagation();
+                    break;
+                } else if (type === "hideCol") {
+                    const colId = target.getAttribute("data-id");
+                    transaction(protyle, [{
+                        action: "setAttrViewColHidden",
+                        id: colId,
+                        parentID: avId,
+                        data: true
+                    }], [{
+                        action: "setAttrViewColHidden",
+                        id: colId,
+                        parentID: avId,
+                        data: false
+                    }]);
+                    data.columns.find((item: IAVColumn) => item.id === colId).hidden = true;
+                    avMenuPanel.innerHTML = getPropertiesHTML(data, tabRect);
+                    event.stopPropagation();
+                    break;
+                } else if (type === "showCol") {
+                    const colId = target.getAttribute("data-id");
+                    transaction(protyle, [{
+                        action: "setAttrViewColHidden",
+                        id: colId,
+                        parentID: avId,
+                        data: false
+                    }], [{
+                        action: "setAttrViewColHidden",
+                        id: colId,
+                        parentID: avId,
+                        data: true
+                    }]);
+                    data.columns.find((item: IAVColumn) => item.id === colId).hidden = false;
+                    avMenuPanel.innerHTML = getPropertiesHTML(data, tabRect);
+                    event.stopPropagation();
                    break;
                }
                target = target.parentElement;
@ -101,3 +99,88 @@ export const openMenuPanel = (protyle: IProtyle, blockElement: HTMLElement, type
        });
    });
 }
+
+const getConfigHTML = (data: IAV, tabRect: DOMRect) => {
+    return `<div class="b3-dialog__scrim" data-type="close"></div>
+ <div class="b3-menu" style="right:${window.innerWidth - tabRect.right}px;top:${tabRect.bottom}px">
+    <button class="b3-menu__item" data-type="title">
+        <span class="b3-menu__label">${window.siyuan.languages.config}</span>
+        <svg class="b3-menu__action" data-type="close" style="opacity: 1"><use xlink:href="#iconCloseRound"></use></svg>
+    </button>
+    <button class="b3-menu__separator"></button>
+    <button class="b3-menu__item" data-type="goProperties">
+        <svg class="b3-menu__icon"></svg>
+        <span class="b3-menu__label">${window.siyuan.languages.attr}</span>
+        <span class="b3-menu__accelerator">${data.columns.filter((item: IAVColumn) => !item.hidden).length}/${data.columns.length}</span>
+        <svg class="b3-menu__icon b3-menu__icon--arrow"><use xlink:href="#iconRight"></use></svg>
+    </button>
+    <button class="b3-menu__item">
+        <svg class="b3-menu__icon"><use xlink:href="#iconFilter"></use></svg>
+        <span class="b3-menu__label">${window.siyuan.languages.filter}</span>
+        <span class="b3-menu__accelerator">${data.filters.length}</span>
+        <svg class="b3-menu__icon b3-menu__icon--arrow"><use xlink:href="#iconRight"></use></svg>
+    </button>
+    <button class="b3-menu__item">
+        <svg class="b3-menu__icon"><use xlink:href="#iconSort"></use></svg>
+        <span class="b3-menu__label">${window.siyuan.languages.sort}</span>
+        <span class="b3-menu__accelerator">${data.sorts.length}</span>
+        <svg class="b3-menu__icon b3-menu__icon--arrow"><use xlink:href="#iconRight"></use></svg>
+    </button>
+    <button class="b3-menu__item">
+        <svg class="b3-menu__icon"></svg>
+        <span class="b3-menu__label">${window.siyuan.languages.pageCount}</span>
+        <span class="b3-menu__accelerator">50</span>
+        <svg class="b3-menu__icon b3-menu__icon--arrow"><use xlink:href="#iconRight"></use></svg>
+    </button>
+</div>`
+}
+
+const getPropertiesHTML = (data: IAV, tabRect: DOMRect) => {
+    let showHTML = "";
+    let hideHTML = "";
+    data.columns.forEach((item: IAVColumn) => {
+        if (item.hidden) {
+            hideHTML += `<button class="b3-menu__item">
+    <svg class="b3-menu__icon"><use xlink:href="#${getColIconByType(item.type)}"></use></svg>
+    <span class="b3-menu__label">${item.name}</span>
+    <svg class="b3-menu__action" data-type="showCol" data-id="${item.id}"><use xlink:href="#iconEyeoff"></use></svg>
+</button>`
+        } else {
+            showHTML += `<button class="b3-menu__item">
+    <svg class="b3-menu__icon"><use xlink:href="#${getColIconByType(item.type)}"></use></svg>
+    <span class="b3-menu__label">${item.name}</span>
+    <svg class="b3-menu__action${item.type === "block" ? " fn__none" : ""}" data-type="hideCol" data-id="${item.id}"><use xlink:href="#iconEye"></use></svg>
+</button>`
+        }
+    });
+    if (hideHTML) {
+        hideHTML = `<button class="b3-menu__separator"></button>
+<button class="b3-menu__item" data-type="hideAllCol">
+    <svg class="b3-menu__icon"><use xlink:href="#iconEyeoff"></use></svg>
+    <span class="b3-menu__label">${window.siyuan.languages.hideAll}</span>
+    <span class="b3-menu__accelerator">${data.columns.filter((item: IAVColumn) => item.hidden).length}</span>
+</button>
+${hideHTML}`;
+    }
+    return `<div class="b3-dialog__scrim" data-type="close"></div>
+ <div class="b3-menu" style="right:${window.innerWidth - tabRect.right}px;top:${tabRect.bottom}px">
+    <button class="b3-menu__item" data-type="goConfig">
+        <svg class="b3-menu__icon"><use xlink:href="#iconLeft"></use></svg>
+        <span class="b3-menu__label">${window.siyuan.languages.back}</span>
+        <svg class="b3-menu__action" data-type="close" style="opacity: 1"><use xlink:href="#iconCloseRound"></use></svg>
+    </button>
+    <button class="b3-menu__separator"></button>
+    <button class="b3-menu__item" data-type="showAllCol">
+        <svg class="b3-menu__icon"><use xlink:href="#iconEye"></use></svg>
+        <span class="b3-menu__label">${window.siyuan.languages.showAll}</span>
+        <span class="b3-menu__accelerator">${data.columns.filter((item: IAVColumn) => !item.hidden).length}</span>
+    </button>
+    ${showHTML}
+    ${hideHTML}
+    <button class="b3-menu__separator"></button>
+    <button class="b3-menu__item" data-type="newCol">
+        <svg class="b3-menu__icon"><use xlink:href="#iconAdd"></use></svg>
+        <span class="b3-menu__label">${window.siyuan.languages.new}</span>
+    </button>
+</div>`
+}
--- a/app/src/types/index.d.ts
+++ b/app/src/types/index.d.ts
@ -823,6 +823,12 @@ interface IBazaarItem {
    preferredFunding: string
 }

+interface IAV {
+    columns: IAVColumn[],
+    filters: [],
+    sorts: [],
+}
+
 interface IAVColumn {
    width: number,
    icon: string,