diff --git a/app/src/protyle/render/av/action.ts b/app/src/protyle/render/av/action.ts index 7455e66dd..e0e051d5d 100644 --- a/app/src/protyle/render/av/action.ts +++ b/app/src/protyle/render/av/action.ts @@ -7,7 +7,7 @@ import {openCalcMenu, popTextCell} from "./cell"; import {getColIconByType, showColMenu} from "./col"; import {insertAttrViewBlockAnimation, updateHeader} from "./row"; import {emitOpenMenu} from "../../../plugin/EventBus"; -import {addCol} from "./addCol"; +import {addCol} from "./col"; import {openMenuPanel} from "./openMenuPanel"; import {hintRef} from "../../hint/extend"; import {focusByRange} from "../../util/selection"; diff --git a/app/src/protyle/render/av/addCol.ts b/app/src/protyle/render/av/addCol.ts deleted file mode 100644 index 9a9d7de64..000000000 --- a/app/src/protyle/render/av/addCol.ts +++ /dev/null @@ -1,309 +0,0 @@ -import {Menu} from "../../../plugin/Menu"; -import {transaction} from "../../wysiwyg/transaction"; -import {addAttrViewColAnimation} from "./col"; - -export const addCol = (protyle: IProtyle, blockElement: Element) => { - const menu = new Menu("av-header-add"); - const avID = blockElement.getAttribute("data-av-id"); - menu.addItem({ - icon: "iconAlignLeft", - label: window.siyuan.languages.text, - click() { - const id = Lute.NewNodeID(); - transaction(protyle, [{ - action: "addAttrViewCol", - name: window.siyuan.languages.text, - avID, - type: "text", - id - }], [{ - action: "removeAttrViewCol", - id, - avID, - }]); - addAttrViewColAnimation({ - blockElement: blockElement, - protyle: protyle, - type: "text", - name: window.siyuan.languages.text, - id - }); - } - }); - menu.addItem({ - icon: "iconNumber", - label: window.siyuan.languages.number, - click() { - const id = Lute.NewNodeID(); - transaction(protyle, [{ - action: "addAttrViewCol", - name: window.siyuan.languages.number, - avID, - type: "number", - id - }], [{ - action: "removeAttrViewCol", - id, - avID, - }]); - addAttrViewColAnimation({ - blockElement: blockElement, - protyle: protyle, - type: "number", - name: window.siyuan.languages.number, - id - }); - } - }); - menu.addItem({ - icon: "iconListItem", - label: window.siyuan.languages.select, - click() { - const id = Lute.NewNodeID(); - transaction(protyle, [{ - action: "addAttrViewCol", - name: window.siyuan.languages.select, - avID, - type: "select", - id - }], [{ - action: "removeAttrViewCol", - id, - avID, - }]); - addAttrViewColAnimation({ - blockElement: blockElement, - protyle: protyle, - type: "select", - name: window.siyuan.languages.select, - id - }); - } - }); - menu.addItem({ - icon: "iconList", - label: window.siyuan.languages.multiSelect, - click() { - const id = Lute.NewNodeID(); - transaction(protyle, [{ - action: "addAttrViewCol", - name: window.siyuan.languages.multiSelect, - avID, - type: "mSelect", - id - }], [{ - action: "removeAttrViewCol", - id, - avID, - }]); - addAttrViewColAnimation({ - blockElement: blockElement, - protyle: protyle, - type: "mSelect", - name: window.siyuan.languages.multiSelect, - id - }); - } - }); - menu.addItem({ - icon: "iconCalendar", - label: window.siyuan.languages.date, - click() { - const id = Lute.NewNodeID(); - transaction(protyle, [{ - action: "addAttrViewCol", - name: window.siyuan.languages.date, - avID, - type: "date", - id - }], [{ - action: "removeAttrViewCol", - id, - avID, - }]); - addAttrViewColAnimation({ - blockElement: blockElement, - protyle: protyle, - type: "date", - name: window.siyuan.languages.date, - id - }); - } - }); - menu.addItem({ - icon: "iconImage", - label: window.siyuan.languages.assets, - click() { - const id = Lute.NewNodeID(); - transaction(protyle, [{ - action: "addAttrViewCol", - name: window.siyuan.languages.assets, - avID, - type: "mAsset", - id - }], [{ - action: "removeAttrViewCol", - id, - avID, - }]); - addAttrViewColAnimation({ - blockElement: blockElement, - protyle: protyle, - type: "mAsset", - name: window.siyuan.languages.assets, - id - }); - } - }); - menu.addItem({ - icon: "iconLink", - label: window.siyuan.languages.link, - click() { - const id = Lute.NewNodeID(); - transaction(protyle, [{ - action: "addAttrViewCol", - name: window.siyuan.languages.link, - avID, - type: "url", - id - }], [{ - action: "removeAttrViewCol", - id, - avID, - }]); - addAttrViewColAnimation({ - blockElement: blockElement, - protyle: protyle, - type: "url", - name: window.siyuan.languages.link, - id - }); - } - }); - menu.addItem({ - icon: "iconEmail", - label: window.siyuan.languages.email, - click() { - const id = Lute.NewNodeID(); - transaction(protyle, [{ - action: "addAttrViewCol", - name: window.siyuan.languages.email, - avID, - type: "email", - id - }], [{ - action: "removeAttrViewCol", - id, - avID, - }]); - addAttrViewColAnimation({ - blockElement: blockElement, - protyle: protyle, - type: "email", - name: window.siyuan.languages.email, - id - }); - } - }); - menu.addItem({ - icon: "iconPhone", - label: window.siyuan.languages.phone, - click() { - const id = Lute.NewNodeID(); - transaction(protyle, [{ - action: "addAttrViewCol", - name: window.siyuan.languages.phone, - avID, - type: "phone", - id - }], [{ - action: "removeAttrViewCol", - id, - avID, - }]); - addAttrViewColAnimation({ - blockElement: blockElement, - protyle: protyle, - type: "phone", - name: window.siyuan.languages.phone, - id - }); - } - }); - menu.addItem({ - icon: "iconMath", - label: window.siyuan.languages.template, - click() { - const id = Lute.NewNodeID(); - transaction(protyle, [{ - action: "addAttrViewCol", - name: window.siyuan.languages.template, - avID, - type: "template", - id - }], [{ - action: "removeAttrViewCol", - id, - avID, - }]); - addAttrViewColAnimation({ - blockElement: blockElement, - protyle: protyle, - type: "template", - name: window.siyuan.languages.template, - id - }); - } - }); - menu.addItem({ - icon: "iconClock", - label: window.siyuan.languages.createdTime, - click() { - const id = Lute.NewNodeID(); - transaction(protyle, [{ - action: "addAttrViewCol", - name: window.siyuan.languages.createdTime, - avID, - type: "created", - id - }], [{ - action: "removeAttrViewCol", - id, - avID, - }]); - addAttrViewColAnimation({ - blockElement: blockElement, - protyle: protyle, - type: "created", - name: window.siyuan.languages.createdTime, - id - }); - } - }); - menu.addItem({ - icon: "iconClock", - label: window.siyuan.languages.updatedTime, - click() { - const id = Lute.NewNodeID(); - transaction(protyle, [{ - action: "addAttrViewCol", - name: window.siyuan.languages.updatedTime, - avID, - type: "updated", - id - }], [{ - action: "removeAttrViewCol", - id, - avID, - }]); - addAttrViewColAnimation({ - blockElement: blockElement, - protyle: protyle, - type: "updated", - name: window.siyuan.languages.updatedTime, - id - }); - } - }); - return menu; -}; diff --git a/app/src/protyle/render/av/col.ts b/app/src/protyle/render/av/col.ts index 7f7b2e21c..b3531c227 100644 --- a/app/src/protyle/render/av/col.ts +++ b/app/src/protyle/render/av/col.ts @@ -108,6 +108,13 @@ export const getEditHTML = (options: { +`; if (colData.options && colData.options.length > 0) { html += ` @@ -141,20 +148,42 @@ export const getEditHTML = (options: { `; } return `
-${html} - - - - + ${html} + + + + +
+
+ + + ${genUpdateColItem("text", colData.type, colData.name)} + ${genUpdateColItem("number", colData.type, colData.name)} + ${genUpdateColItem("select", colData.type, colData.name)} + ${genUpdateColItem("mSelect", colData.type, colData.name)} + ${genUpdateColItem("mSelect", colData.type, colData.name)} + ${genUpdateColItem("date", colData.type, colData.name)} + ${genUpdateColItem("mAsset", colData.type, colData.name)} + ${genUpdateColItem("url", colData.type, colData.name)} + ${genUpdateColItem("email", colData.type, colData.name)} + ${genUpdateColItem("phone", colData.type, colData.name)} + ${genUpdateColItem("template", colData.type, colData.name)} + ${genUpdateColItem("created", colData.type, colData.name)} + ${genUpdateColItem("updated", colData.type, colData.name)}
`; }; @@ -275,6 +304,29 @@ export const bindEditEvent = (options: { protyle: IProtyle, data: IAV, menuEleme }); }; +export const getColNameByType = (type: TAVCol) => { + switch (type) { + case "text": + case "number": + case "select": + case "date": + case "phone": + case "email": + case "template": + return window.siyuan.languages[type]; + case "mSelect": + return window.siyuan.languages.multiSelect; + case "updated": + return window.siyuan.languages.updatedTime; + case "created": + return window.siyuan.languages.createdTime; + case "url": + return window.siyuan.languages.link; + case "mAsset": + return window.siyuan.languages.assets; + } +} + export const getColIconByType = (type: TAVCol) => { switch (type) { case "text": @@ -592,3 +644,317 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen inputElement.focus(); } }; + +const genUpdateColItem = (type: TAVCol, oldType: TAVCol, name: string) => { + return `` +} + +export const addCol = (protyle: IProtyle, blockElement: Element) => { + const menu = new Menu("av-header-add"); + const avID = blockElement.getAttribute("data-av-id"); + menu.addItem({ + icon: "iconAlignLeft", + label: window.siyuan.languages.text, + click() { + const id = Lute.NewNodeID(); + transaction(protyle, [{ + action: "addAttrViewCol", + name: window.siyuan.languages.text, + avID, + type: "text", + id + }], [{ + action: "removeAttrViewCol", + id, + avID, + }]); + addAttrViewColAnimation({ + blockElement: blockElement, + protyle: protyle, + type: "text", + name: window.siyuan.languages.text, + id + }); + } + }); + menu.addItem({ + icon: "iconNumber", + label: window.siyuan.languages.number, + click() { + const id = Lute.NewNodeID(); + transaction(protyle, [{ + action: "addAttrViewCol", + name: window.siyuan.languages.number, + avID, + type: "number", + id + }], [{ + action: "removeAttrViewCol", + id, + avID, + }]); + addAttrViewColAnimation({ + blockElement: blockElement, + protyle: protyle, + type: "number", + name: window.siyuan.languages.number, + id + }); + } + }); + menu.addItem({ + icon: "iconListItem", + label: window.siyuan.languages.select, + click() { + const id = Lute.NewNodeID(); + transaction(protyle, [{ + action: "addAttrViewCol", + name: window.siyuan.languages.select, + avID, + type: "select", + id + }], [{ + action: "removeAttrViewCol", + id, + avID, + }]); + addAttrViewColAnimation({ + blockElement: blockElement, + protyle: protyle, + type: "select", + name: window.siyuan.languages.select, + id + }); + } + }); + menu.addItem({ + icon: "iconList", + label: window.siyuan.languages.multiSelect, + click() { + const id = Lute.NewNodeID(); + transaction(protyle, [{ + action: "addAttrViewCol", + name: window.siyuan.languages.multiSelect, + avID, + type: "mSelect", + id + }], [{ + action: "removeAttrViewCol", + id, + avID, + }]); + addAttrViewColAnimation({ + blockElement: blockElement, + protyle: protyle, + type: "mSelect", + name: window.siyuan.languages.multiSelect, + id + }); + } + }); + menu.addItem({ + icon: "iconCalendar", + label: window.siyuan.languages.date, + click() { + const id = Lute.NewNodeID(); + transaction(protyle, [{ + action: "addAttrViewCol", + name: window.siyuan.languages.date, + avID, + type: "date", + id + }], [{ + action: "removeAttrViewCol", + id, + avID, + }]); + addAttrViewColAnimation({ + blockElement: blockElement, + protyle: protyle, + type: "date", + name: window.siyuan.languages.date, + id + }); + } + }); + menu.addItem({ + icon: "iconImage", + label: window.siyuan.languages.assets, + click() { + const id = Lute.NewNodeID(); + transaction(protyle, [{ + action: "addAttrViewCol", + name: window.siyuan.languages.assets, + avID, + type: "mAsset", + id + }], [{ + action: "removeAttrViewCol", + id, + avID, + }]); + addAttrViewColAnimation({ + blockElement: blockElement, + protyle: protyle, + type: "mAsset", + name: window.siyuan.languages.assets, + id + }); + } + }); + menu.addItem({ + icon: "iconLink", + label: window.siyuan.languages.link, + click() { + const id = Lute.NewNodeID(); + transaction(protyle, [{ + action: "addAttrViewCol", + name: window.siyuan.languages.link, + avID, + type: "url", + id + }], [{ + action: "removeAttrViewCol", + id, + avID, + }]); + addAttrViewColAnimation({ + blockElement: blockElement, + protyle: protyle, + type: "url", + name: window.siyuan.languages.link, + id + }); + } + }); + menu.addItem({ + icon: "iconEmail", + label: window.siyuan.languages.email, + click() { + const id = Lute.NewNodeID(); + transaction(protyle, [{ + action: "addAttrViewCol", + name: window.siyuan.languages.email, + avID, + type: "email", + id + }], [{ + action: "removeAttrViewCol", + id, + avID, + }]); + addAttrViewColAnimation({ + blockElement: blockElement, + protyle: protyle, + type: "email", + name: window.siyuan.languages.email, + id + }); + } + }); + menu.addItem({ + icon: "iconPhone", + label: window.siyuan.languages.phone, + click() { + const id = Lute.NewNodeID(); + transaction(protyle, [{ + action: "addAttrViewCol", + name: window.siyuan.languages.phone, + avID, + type: "phone", + id + }], [{ + action: "removeAttrViewCol", + id, + avID, + }]); + addAttrViewColAnimation({ + blockElement: blockElement, + protyle: protyle, + type: "phone", + name: window.siyuan.languages.phone, + id + }); + } + }); + menu.addItem({ + icon: "iconMath", + label: window.siyuan.languages.template, + click() { + const id = Lute.NewNodeID(); + transaction(protyle, [{ + action: "addAttrViewCol", + name: window.siyuan.languages.template, + avID, + type: "template", + id + }], [{ + action: "removeAttrViewCol", + id, + avID, + }]); + addAttrViewColAnimation({ + blockElement: blockElement, + protyle: protyle, + type: "template", + name: window.siyuan.languages.template, + id + }); + } + }); + menu.addItem({ + icon: "iconClock", + label: window.siyuan.languages.createdTime, + click() { + const id = Lute.NewNodeID(); + transaction(protyle, [{ + action: "addAttrViewCol", + name: window.siyuan.languages.createdTime, + avID, + type: "created", + id + }], [{ + action: "removeAttrViewCol", + id, + avID, + }]); + addAttrViewColAnimation({ + blockElement: blockElement, + protyle: protyle, + type: "created", + name: window.siyuan.languages.createdTime, + id + }); + } + }); + menu.addItem({ + icon: "iconClock", + label: window.siyuan.languages.updatedTime, + click() { + const id = Lute.NewNodeID(); + transaction(protyle, [{ + action: "addAttrViewCol", + name: window.siyuan.languages.updatedTime, + avID, + type: "updated", + id + }], [{ + action: "removeAttrViewCol", + id, + avID, + }]); + addAttrViewColAnimation({ + blockElement: blockElement, + protyle: protyle, + type: "updated", + name: window.siyuan.languages.updatedTime, + id + }); + } + }); + return menu; +}; diff --git a/app/src/protyle/render/av/openMenuPanel.ts b/app/src/protyle/render/av/openMenuPanel.ts index 8c80d506b..2d1b4a7e5 100644 --- a/app/src/protyle/render/av/openMenuPanel.ts +++ b/app/src/protyle/render/av/openMenuPanel.ts @@ -1,9 +1,9 @@ import {transaction} from "../../wysiwyg/transaction"; import {fetchPost} from "../../../util/fetch"; -import {addCol} from "./addCol"; +import {addCol} from "./col"; import {bindEditEvent, duplicateCol, getColIconByType, getEditHTML} from "./col"; import {setPosition} from "../../../util/setPosition"; -import {hasClosestByAttribute} from "../../util/hasClosest"; +import {hasClosestByAttribute, hasClosestByClassName} from "../../util/hasClosest"; import {bindSelectEvent, getSelectHTML, addColOptionOrCell, setColOption, removeCellOption} from "./select"; import {addFilter, getFiltersHTML, setFilter} from "./filter"; import {addSort, bindSortsEvent, getSortsHTML} from "./sort"; @@ -599,6 +599,47 @@ export const openMenuPanel = (options: { event.preventDefault(); event.stopPropagation(); break; + } else if (type === "updateColType") { + if (target.dataset.newType !== target.dataset.oldType) { + const name = target.dataset.name + transaction(options.protyle, [{ + action: "updateAttrViewCol", + id: options.colId, + avID, + name, + type: target.dataset.newType as TAVCol, + }], [{ + action: "updateAttrViewCol", + id: options.colId, + avID, + name, + type: target.dataset.oldType as TAVCol, + }]); + } + avPanelElement.remove(); + event.preventDefault(); + event.stopPropagation(); + break; + } else if (type === "goUpdateColType") { + const editMenuElement = hasClosestByClassName(target, "b3-menu") + if (editMenuElement) { + editMenuElement.firstElementChild.classList.add("fn__none"); + editMenuElement.lastElementChild.classList.remove("fn__none"); + } + setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height); + event.preventDefault(); + event.stopPropagation(); + break; + } else if (type === "goEditCol") { + const editMenuElement = hasClosestByClassName(target, "b3-menu") + if (editMenuElement) { + editMenuElement.firstElementChild.classList.remove("fn__none"); + editMenuElement.lastElementChild.classList.add("fn__none"); + } + setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height); + event.preventDefault(); + event.stopPropagation(); + break; } else if (type === "hideCol") { const isEdit = menuElement.querySelector('[data-type="goProperties"]'); const colId = isEdit ? menuElement.querySelector(".b3-menu__item").getAttribute("data-col-id") : target.parentElement.getAttribute("data-id");