diff --git a/app/appearance/themes/daylight/theme.css b/app/appearance/themes/daylight/theme.css index cad40f575..eba11625e 100644 --- a/app/appearance/themes/daylight/theme.css +++ b/app/appearance/themes/daylight/theme.css @@ -51,7 +51,7 @@ /* 提示 */ --b3-tooltips-background: rgba(0, 0, 0, .9); - --b3-tooltips-color: #bababa; + --b3-tooltips-color: var(--b3-theme-background-light); --b3-tooltips-shadow: 0 2px 8px rgba(0, 0, 0, .1); /* 遮罩 */ diff --git a/app/src/protyle/render/av/action.ts b/app/src/protyle/render/av/action.ts index 749585444..3e7358c11 100644 --- a/app/src/protyle/render/av/action.ts +++ b/app/src/protyle/render/av/action.ts @@ -3,8 +3,8 @@ import {hasClosestBlock, hasClosestByAttribute, hasClosestByClassName} from "../ import {transaction} from "../../wysiwyg/transaction"; import {openEditorTab} from "../../../menus/util"; import {copySubMenu} from "../../../menus/commonMenuItem"; -import {popTextCell, showHeaderCellMenu} from "./cell"; -import {getColIconByType, updateHeader} from "./col"; +import {popTextCell} from "./cell"; +import {getColIconByType, showColMenu, updateHeader} from "./col"; import {emitOpenMenu} from "../../../plugin/EventBus"; import {addCol} from "./addCol"; import {openMenuPanel} from "./openMenuPanel"; @@ -102,7 +102,7 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle const cellHeaderElement = hasClosestByClassName(event.target, "av__cellheader"); if (cellHeaderElement) { - showHeaderCellMenu(protyle, blockElement, cellHeaderElement.parentElement); + showColMenu(protyle, blockElement, cellHeaderElement.parentElement); event.preventDefault(); event.stopPropagation(); return true; diff --git a/app/src/protyle/render/av/cell.ts b/app/src/protyle/render/av/cell.ts index c51602224..61260b7c8 100644 --- a/app/src/protyle/render/av/cell.ts +++ b/app/src/protyle/render/av/cell.ts @@ -75,185 +75,3 @@ const updateCellValue = (protyle: IProtyle, cellElement: HTMLElement, type: TAVC avMaskElement.remove(); }); }; - -const removeCol = (cellElement: HTMLElement) => { - const index = cellElement.getAttribute("data-index"); - const blockElement = hasClosestBlock(cellElement); - if (!blockElement) { - return false; - } - blockElement.querySelectorAll(".av__row").forEach((item) => { - item.querySelector(`[data-index="${index}"]`).remove(); - }); -}; - -export const showHeaderCellMenu = (protyle: IProtyle, blockElement: HTMLElement, cellElement: HTMLElement) => { - const type = cellElement.getAttribute("data-dtype") as TAVCol; - const colId = cellElement.getAttribute("data-id"); - const avId = blockElement.getAttribute("data-av-id"); - const menu = new Menu("av-header-cell", () => { - const newValue = (window.siyuan.menus.menu.element.querySelector(".b3-text-field") as HTMLInputElement).value; - if (newValue === cellElement.textContent.trim()) { - return; - } - transaction(protyle, [{ - action: "updateAttrViewCol", - id: colId, - parentID: avId, - name: newValue, - type, - }], [{ - action: "updateAttrViewCol", - id: colId, - parentID: avId, - name: cellElement.textContent.trim(), - type, - }]); - }); - menu.addItem({ - icon: getColIconByType(type), - label: ``, - }); - if (type !== "block") { - menu.addItem({ - icon: "iconEdit", - label: window.siyuan.languages.edit, - click() { - - } - }); - } - menu.addSeparator(); - menu.addItem({ - icon: "iconUp", - label: window.siyuan.languages.asc, - click() { - fetchPost("/api/av/renderAttributeView", {id: avId}, (response) => { - transaction(protyle, [{ - action: "setAttrView", - id: avId, - data: { - sorts: [{ - column: colId, - order: "ASC" - }] - } - }], [{ - action: "setAttrView", - id: avId, - data: { - sorts: response.data.av.sorts - } - }]); - }); - } - }); - menu.addItem({ - icon: "iconDown", - label: window.siyuan.languages.desc, - click() { - fetchPost("/api/av/renderAttributeView", {id: avId}, (response) => { - transaction(protyle, [{ - action: "setAttrView", - id: avId, - data: { - sorts: [{ - column: colId, - order: "DESC" - }] - } - }], [{ - action: "setAttrView", - id: avId, - data: { - sorts: response.data.av.sorts - } - }]); - }); - } - }); - menu.addItem({ - icon: "iconFilter", - label: window.siyuan.languages.filter, - click() { - - } - }); - menu.addSeparator(); - if (type !== "block") { - menu.addItem({ - icon: "iconEyeoff", - label: window.siyuan.languages.hide, - click() { - transaction(protyle, [{ - action: "setAttrViewColHidden", - id: colId, - parentID: avId, - data: true - }], [{ - action: "setAttrViewColHidden", - id: colId, - parentID: avId, - data: false - }]); - } - }); - menu.addItem({ - icon: "iconCopy", - label: window.siyuan.languages.duplicate, - click() { - - } - }); - menu.addItem({ - icon: "iconTrashcan", - label: window.siyuan.languages.delete, - click() { - transaction(protyle, [{ - action: "removeAttrViewCol", - id: colId, - parentID: avId, - }], [{ - action: "addAttrViewCol", - name: cellElement.textContent.trim(), - parentID: avId, - type: type, - id: colId - }]); - removeCol(cellElement); - } - }); - menu.addSeparator(); - } - menu.addItem({ - label: `
${window.siyuan.languages.wrap} -
`, - bind(element) { - const inputElement = element.querySelector("input") as HTMLInputElement; - inputElement.addEventListener("change", () => { - transaction(protyle, [{ - action: "setAttrViewColWrap", - id: colId, - parentID: avId, - data: inputElement.checked - }], [{ - action: "setAttrViewColWrap", - id: colId, - parentID: avId, - data: !inputElement.checked - }]); - }); - } - }); - const cellRect = cellElement.getBoundingClientRect(); - menu.open({ - x: cellRect.left, - y: cellRect.bottom, - h: cellRect.height - }); - const inputElement = window.siyuan.menus.menu.element.querySelector(".b3-text-field") as HTMLInputElement; - if (inputElement) { - inputElement.select(); - inputElement.focus(); - } -}; diff --git a/app/src/protyle/render/av/col.ts b/app/src/protyle/render/av/col.ts index 26d9bfc52..aebcb6366 100644 --- a/app/src/protyle/render/av/col.ts +++ b/app/src/protyle/render/av/col.ts @@ -1,4 +1,8 @@ import {hasClosestBlock} from "../../util/hasClosest"; +import {Menu} from "../../../plugin/Menu"; +import {transaction} from "../../wysiwyg/transaction"; +import {fetchPost} from "../../../util/fetch"; +import {setFilter} from "./openMenuPanel"; export const getColIconByType = (type: TAVCol) => { switch (type) { @@ -45,3 +49,211 @@ export const updateHeader = (rowElement: HTMLElement) => { counterElement.innerHTML = `${selectCount} selected`; avHeadElement.style.position = "sticky"; }; + +const removeCol = (cellElement: HTMLElement) => { + const index = cellElement.getAttribute("data-index"); + const blockElement = hasClosestBlock(cellElement); + if (!blockElement) { + return false; + } + blockElement.querySelectorAll(".av__row").forEach((item) => { + item.querySelector(`[data-index="${index}"]`).remove(); + }); +}; + +export const showColMenu = (protyle: IProtyle, blockElement: HTMLElement, cellElement: HTMLElement) => { + const type = cellElement.getAttribute("data-dtype") as TAVCol; + const colId = cellElement.getAttribute("data-id"); + const avId = blockElement.getAttribute("data-av-id"); + const menu = new Menu("av-header-cell", () => { + const newValue = (window.siyuan.menus.menu.element.querySelector(".b3-text-field") as HTMLInputElement).value; + if (newValue === cellElement.textContent.trim()) { + return; + } + transaction(protyle, [{ + action: "updateAttrViewCol", + id: colId, + parentID: avId, + name: newValue, + type, + }], [{ + action: "updateAttrViewCol", + id: colId, + parentID: avId, + name: cellElement.textContent.trim(), + type, + }]); + }); + menu.addItem({ + icon: getColIconByType(type), + label: ``, + }); + if (type !== "block") { + menu.addItem({ + icon: "iconEdit", + label: window.siyuan.languages.edit, + click() { + + } + }); + } + menu.addSeparator(); + menu.addItem({ + icon: "iconUp", + label: window.siyuan.languages.asc, + click() { + fetchPost("/api/av/renderAttributeView", {id: avId}, (response) => { + transaction(protyle, [{ + action: "setAttrView", + id: avId, + data: { + sorts: [{ + column: colId, + order: "ASC" + }] + } + }], [{ + action: "setAttrView", + id: avId, + data: { + sorts: response.data.av.sorts + } + }]); + }); + } + }); + menu.addItem({ + icon: "iconDown", + label: window.siyuan.languages.desc, + click() { + fetchPost("/api/av/renderAttributeView", {id: avId}, (response) => { + transaction(protyle, [{ + action: "setAttrView", + id: avId, + data: { + sorts: [{ + column: colId, + order: "DESC" + }] + } + }], [{ + action: "setAttrView", + id: avId, + data: { + sorts: response.data.av.sorts + } + }]); + }); + } + }); + menu.addItem({ + icon: "iconFilter", + label: window.siyuan.languages.filter, + click() { + fetchPost("/api/av/renderAttributeView", {id: avId}, (response) => { + const avData = response.data.av as IAV + let filter: IAVFilter + avData.filters.find((item) => { + if (item.column === colId) { + filter = item + return true; + } + }); + if (!filter) { + filter = { + column: colId, + operator: "Contains", + value: { + [type]: { + content: "" + } + } + } + } + setFilter({ + filter, + protyle, + data: avData, + target: cellElement, + }); + }); + } + }); + menu.addSeparator(); + if (type !== "block") { + menu.addItem({ + icon: "iconEyeoff", + label: window.siyuan.languages.hide, + click() { + transaction(protyle, [{ + action: "setAttrViewColHidden", + id: colId, + parentID: avId, + data: true + }], [{ + action: "setAttrViewColHidden", + id: colId, + parentID: avId, + data: false + }]); + } + }); + menu.addItem({ + icon: "iconCopy", + label: window.siyuan.languages.duplicate, + click() { + + } + }); + menu.addItem({ + icon: "iconTrashcan", + label: window.siyuan.languages.delete, + click() { + transaction(protyle, [{ + action: "removeAttrViewCol", + id: colId, + parentID: avId, + }], [{ + action: "addAttrViewCol", + name: cellElement.textContent.trim(), + parentID: avId, + type: type, + id: colId + }]); + removeCol(cellElement); + } + }); + menu.addSeparator(); + } + menu.addItem({ + label: `
${window.siyuan.languages.wrap} +
`, + bind(element) { + const inputElement = element.querySelector("input") as HTMLInputElement; + inputElement.addEventListener("change", () => { + transaction(protyle, [{ + action: "setAttrViewColWrap", + id: colId, + parentID: avId, + data: inputElement.checked + }], [{ + action: "setAttrViewColWrap", + id: colId, + parentID: avId, + data: !inputElement.checked + }]); + }); + } + }); + const cellRect = cellElement.getBoundingClientRect(); + menu.open({ + x: cellRect.left, + y: cellRect.bottom, + h: cellRect.height + }); + const inputElement = window.siyuan.menus.menu.element.querySelector(".b3-text-field") as HTMLInputElement; + if (inputElement) { + inputElement.select(); + inputElement.focus(); + } +}; diff --git a/app/src/protyle/render/av/openMenuPanel.ts b/app/src/protyle/render/av/openMenuPanel.ts index 795ece7fd..4e2463cd0 100644 --- a/app/src/protyle/render/av/openMenuPanel.ts +++ b/app/src/protyle/render/av/openMenuPanel.ts @@ -142,6 +142,7 @@ export const openMenuPanel = (protyle: IProtyle, blockElement: HTMLElement, type event.stopPropagation(); break; } else if (type === "removeFilter") { + window.siyuan.menus.menu.remove(); const oldFilters = Object.assign([], data.filters); data.filters.find((item: IAVFilter, index: number) => { if (item.column === target.parentElement.dataset.id) { @@ -167,7 +168,19 @@ export const openMenuPanel = (protyle: IProtyle, blockElement: HTMLElement, type event.stopPropagation(); break; } else if (type === "setFilter") { - setFilter(protyle, data, target); + const colType = target.getAttribute("data-coltype") as TAVCol; + setFilter({ + filter: { + operator: target.dataset.op as TAVFilterOperator, + column: target.parentElement.parentElement.dataset.id, + value: { + [colType]: {content: target.dataset.value} + } + }, + protyle, + data, + target + }); event.stopPropagation(); break; } else if (type === "newCol") { @@ -407,13 +420,18 @@ ${html} `; }; -const setFilter = (protyle: IProtyle, data: IAV, target: HTMLElement) => { - const colType = target.getAttribute("data-coltype") as TAVCol; - const menu = new Menu(undefined, () => { - const colId = target.parentElement.parentElement.getAttribute("data-id"); - const oldFilters = JSON.parse(JSON.stringify(data.filters)); - data.filters.find((filter) => { - if (filter.column === colId) { +export const setFilter = (options: { + filter: IAVFilter, + protyle: IProtyle, + data: IAV, + target: HTMLElement, +}) => { + const colType = Object.keys(options.filter.value)[0] as TAVCol; + const rectTarget = options.target.getBoundingClientRect(); + const menu = new Menu("set-filter-" + options.filter.column, () => { + const oldFilters = JSON.parse(JSON.stringify(options.data.filters)); + options.data.filters.find((filter) => { + if (filter.column === options.filter.column) { filter.value[colType] = { content: textElement.value }; @@ -421,36 +439,38 @@ const setFilter = (protyle: IProtyle, data: IAV, target: HTMLElement) => { return true; } }); - transaction(protyle, [{ + transaction(options.protyle, [{ action: "setAttrView", - id: data.id, + id: options.data.id, data: { - filters: data.filters + filters: options.data.filters } }], [{ action: "setAttrView", - id: data.id, + id: options.data.id, data: { filters: oldFilters } }]); - const menuElement = hasClosestByClassName(target, "b3-menu"); + const menuElement = hasClosestByClassName(options.target, "b3-menu"); if (menuElement) { - menuElement.innerHTML = getFiltersHTML(data); + menuElement.innerHTML = getFiltersHTML(options.data); } }); + if (menu.isOpen) { + return; + } let selectHTML = ""; - const filterOperation = target.getAttribute("data-op"); switch (colType) { case "text": - selectHTML = ` - - - - - - - + selectHTML = ` + + + + + + + `; break; } @@ -460,7 +480,7 @@ const setFilter = (protyle: IProtyle, data: IAV, target: HTMLElement) => { }); menu.addItem({ iconHTML: "", - label: `` + label: `` }); const textElement = (window.siyuan.menus.menu.element.querySelector(".b3-text-field") as HTMLInputElement); textElement.addEventListener("keydown", (event) => { @@ -473,7 +493,6 @@ const setFilter = (protyle: IProtyle, data: IAV, target: HTMLElement) => { event.preventDefault(); } }); - const rectTarget = target.getBoundingClientRect(); menu.open({x: rectTarget.left, y: rectTarget.bottom}); textElement.select(); }; @@ -525,7 +544,20 @@ const addFilter = (options: { }]); options.menuElement.innerHTML = getFiltersHTML(options.data); setPosition(options.menuElement, options.tabRect.right - options.menuElement.clientWidth, options.tabRect.bottom, options.tabRect.height); - setFilter(options.protyle, options.data, options.menuElement.querySelector(`[data-id="${column.id}"] .b3-chip`)); + const filterElement = options.menuElement.querySelector(`[data-id="${column.id}"] .b3-chip`) as HTMLElement; + const colType = filterElement.getAttribute("data-coltype") as TAVCol; + setFilter({ + filter: { + operator: filterElement.dataset.op as TAVFilterOperator, + column: filterElement.parentElement.parentElement.dataset.id, + value: { + [colType]: {content: filterElement.dataset.value} + } + }, + protyle: options.protyle, + data: options.data, + target: filterElement + }); } }); } diff --git a/app/src/protyle/render/av/render.ts b/app/src/protyle/render/av/render.ts index e63a9fd31..4a165aa1f 100644 --- a/app/src/protyle/render/av/render.ts +++ b/app/src/protyle/render/av/render.ts @@ -1,6 +1,5 @@ import {fetchPost} from "../../../util/fetch"; -import {getColIconByType} from "./col"; -import {showHeaderCellMenu} from "./cell"; +import {getColIconByType, showColMenu} from "./col"; import {Constants} from "../../../constants"; export const avRender = (element: Element, cb?: () => void) => { @@ -142,7 +141,7 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => { Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-av-id="${avId}"]`)).forEach((item: HTMLElement) => { item.removeAttribute("data-render"); avRender(item, () => { - showHeaderCellMenu(protyle, item, item.querySelector(".av__row--header").lastElementChild.previousElementSibling as HTMLElement); + showColMenu(protyle, item, item.querySelector(".av__row--header").lastElementChild.previousElementSibling as HTMLElement); }); }); } else if (operation.action === "setAttrViewColWidth") {