diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss index 1be477f9f..e39449c6d 100644 --- a/app/src/assets/scss/business/_av.scss +++ b/app/src/assets/scss/business/_av.scss @@ -4,6 +4,10 @@ display: flex; max-width: 100%; + &:hover .block__icon { + opacity: 1; + } + &__container { overflow: auto; } diff --git a/app/src/protyle/render/av/action.ts b/app/src/protyle/render/av/action.ts index 4a070612c..6859332cf 100644 --- a/app/src/protyle/render/av/action.ts +++ b/app/src/protyle/render/av/action.ts @@ -25,6 +25,7 @@ import {selectRow} from "./row"; import * as dayjs from "dayjs"; import {openCalcMenu} from "./calc"; import {avRender} from "./render"; +import {openViewMenu} from "./view"; export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLElement }) => { const blockElement = hasClosestBlock(event.target); @@ -240,7 +241,9 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle event.stopPropagation(); return true; } else if (target.classList.contains("item") && target.parentElement.classList.contains("layout-tab-bar")) { - if (!target.classList.contains("item--focus")) { + if (target.classList.contains("item--focus")) { + openViewMenu(target) + } else { blockElement.removeAttribute("data-render"); avRender(blockElement, protyle, undefined, target.dataset.id); } diff --git a/app/src/protyle/render/av/openMenuPanel.ts b/app/src/protyle/render/av/openMenuPanel.ts index 93ceeb140..1286c3b1b 100644 --- a/app/src/protyle/render/av/openMenuPanel.ts +++ b/app/src/protyle/render/av/openMenuPanel.ts @@ -21,6 +21,7 @@ import {openAsset} from "../../../editor/util"; /// #endif import {previewImage} from "../../preview/image"; import {assetMenu} from "../../../menus/protyle"; +import {bindViewEvent, getViewHTML} from "./view"; export const openMenuPanel = (options: { protyle: IProtyle, @@ -42,7 +43,7 @@ export const openMenuPanel = (options: { const data = response.data as IAV; let html; if (options.type === "config") { - html = getConfigHTML(data.view); + html = getViewHTML(data.view); } else if (options.type === "properties") { html = getPropertiesHTML(data.view); } else if (options.type === "sorts") { @@ -90,6 +91,8 @@ export const openMenuPanel = (options: { bindSortsEvent(options.protyle, menuElement, data); } else if (options.type === "edit") { bindEditEvent({protyle: options.protyle, data, menuElement}); + } else if (options.type === "config") { + bindViewEvent({protyle: options.protyle, data, menuElement}); } } avPanelElement.addEventListener("dragstart", (event: DragEvent) => { @@ -345,8 +348,9 @@ export const openMenuPanel = (options: { event.stopPropagation(); break; } else if (type === "goConfig") { - menuElement.innerHTML = getConfigHTML(data.view); + menuElement.innerHTML = getViewHTML(data.view); setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height); + bindViewEvent({protyle: options.protyle, data, menuElement}); event.preventDefault(); event.stopPropagation(); break; @@ -511,6 +515,11 @@ export const openMenuPanel = (options: { event.preventDefault(); event.stopPropagation(); break; + } else if (type === "update-view-icon") { + // TODO + event.preventDefault(); + event.stopPropagation(); + break; } else if (type === "update-icon") { const rect = target.getBoundingClientRect(); openEmojiPanel("", "av", { @@ -918,35 +927,3 @@ ${hideHTML} `; }; -const getConfigHTML = (data: IAVTable) => { - return `
- - - - - - -
`; -}; diff --git a/app/src/protyle/render/av/render.ts b/app/src/protyle/render/av/render.ts index 18316cbb9..218a55135 100644 --- a/app/src/protyle/render/av/render.ts +++ b/app/src/protyle/render/av/render.ts @@ -212,26 +212,26 @@ ${cell.color ? `color:${cell.color};` : ""}">${text}`;
${tabHTML}
- + -
- ${response.data.isMirror ? ` -
` : ""} - +
+
- +
- +
+ ${!response.data.isMirror ? ` +
` : ""}
-
${response.data.name || ""}
+
${response.data.name || ""}
diff --git a/app/src/protyle/render/av/view.ts b/app/src/protyle/render/av/view.ts new file mode 100644 index 000000000..72f019890 --- /dev/null +++ b/app/src/protyle/render/av/view.ts @@ -0,0 +1,104 @@ +import {Menu} from "../../../plugin/Menu"; +import {unicode2Emoji} from "../../../emoji"; + +export const openViewMenu = (element:HTMLElement) => { + const menu = new Menu("av-view", () => { + + }); + if (menu.isOpen) { + return; + } + menu.addItem({ + icon: "iconEdit", + label: window.siyuan.languages.rename, + click () { + + } + }) + menu.addItem({ + icon: "iconSettings", + label: window.siyuan.languages.config, + click () { + + } + }) + menu.addSeparator(); + menu.addItem({ + icon: "iconCopy", + label: window.siyuan.languages.duplicate, + click () { + + } + }) + menu.addItem({ + icon: "iconTrashcan", + label: window.siyuan.languages.delete, + click () { + + } + }) + const rect = element.getBoundingClientRect() + menu.open({ + x: rect.left, + y: rect.bottom + }) +} + +export const bindViewEvent = (options: { + protyle: IProtyle, + data: IAV, + menuElement: HTMLElement +}) => { + options.menuElement.querySelector('.b3-text-field[data-type="name"]').addEventListener("blur", (event) => { + + }) +} + +export const getViewHTML = (data: IAVTable) => { + return `
+ + + + + + + + + + + +
`; +}; diff --git a/app/src/types/index.d.ts b/app/src/types/index.d.ts index 2231427f4..9e122d0f4 100644 --- a/app/src/types/index.d.ts +++ b/app/src/types/index.d.ts @@ -43,6 +43,7 @@ type TOperation = | "updateAttrViewColNumberFormat" | "replaceAttrViewBlock" | "addAttrViewView" + | "setAttrViewViewName" | "removeAttrViewView" type TBazaarType = "templates" | "icons" | "widgets" | "themes" | "plugins" type TCardType = "doc" | "notebook" | "all" @@ -1022,6 +1023,7 @@ interface IAVTable { type: "table" rows: IAVRow[], id: string + icon: string } interface IAVFilter {