From ce35191bf5c03720344ee2566469ff8a9e7b9d67 Mon Sep 17 00:00:00 2001 From: Vanessa Date: Thu, 5 Oct 2023 12:03:38 +0800 Subject: [PATCH] :sparkles: https://github.com/siyuan-note/siyuan/issues/9304 --- app/src/assets/scss/business/_av.scss | 10 ++++----- app/src/protyle/render/av/col.ts | 21 ++++++++++------- app/src/protyle/render/av/openMenuPanel.ts | 26 +++++++++++++++++++--- app/src/protyle/render/av/render.ts | 2 +- 4 files changed, 42 insertions(+), 17 deletions(-) diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss index cdcaa19db..35418fd20 100644 --- a/app/src/assets/scss/business/_av.scss +++ b/app/src/assets/scss/business/_av.scss @@ -225,13 +225,13 @@ flex: 1; overflow: hidden; - & > svg, - & > img { - height: 12px; - width: 12px; + & > .av__cellicon { + height: 1em; + width: 1em; color: var(--b3-theme-on-surface); - margin-right: 5px; + margin: 0 5px 0 0; flex-shrink: 0; + line-height: 1em; } } diff --git a/app/src/protyle/render/av/col.ts b/app/src/protyle/render/av/col.ts index 4d3dabd2e..732c5c927 100644 --- a/app/src/protyle/render/av/col.ts +++ b/app/src/protyle/render/av/col.ts @@ -6,8 +6,8 @@ import {getDefaultOperatorByType, setFilter} from "./filter"; import {genCellValue} from "./cell"; import {openMenuPanel} from "./openMenuPanel"; import {getLabelByNumberFormat} from "./number"; -import {removeAttrViewColAnimation} from "./action"; -import {openEmojiPanel} from "../../../emoji"; +import {removeAttrViewColAnimation, updateAttrViewCellAnimation} from "./action"; +import {openEmojiPanel, unicode2Emoji} from "../../../emoji"; export const duplicateCol = (options: { protyle: IProtyle, @@ -103,7 +103,7 @@ export const getEditHTML = (options: { `; if (colData.options && colData.options.length > 0) { @@ -179,6 +179,7 @@ export const bindEditEvent = (options: { protyle: IProtyle, data: IAV, menuEleme type: colData.type, }]); colData.name = newValue; + updateAttrViewCellAnimation(options.protyle.wysiwyg.element.querySelector(`.av__row--header .av__cell[data-col-id="${colId}"]`)); }); nameElement.addEventListener("keydown", (event: KeyboardEvent) => { if (event.isComposing) { @@ -367,9 +368,10 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen const type = cellElement.getAttribute("data-dtype") as TAVCol; const colId = cellElement.getAttribute("data-col-id"); const avID = blockElement.getAttribute("data-av-id"); + const oldValue = cellElement.querySelector(".av__celltext").textContent.trim(); 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()) { + if (newValue === oldValue) { return; } transaction(protyle, [{ @@ -382,14 +384,15 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen action: "updateAttrViewCol", id: colId, avID, - name: cellElement.textContent.trim(), + name: oldValue, type, }]); + updateAttrViewCellAnimation(cellElement); }); menu.addItem({ - iconHTML: ``, + iconHTML: `${cellElement.dataset.icon ? unicode2Emoji(cellElement.dataset.icon) : ``}`, type: "readonly", - label: ``, + label: ``, bind(element) { const iconElement = element.querySelector(".block__icon") as HTMLElement iconElement.addEventListener("click", (event) => { @@ -411,6 +414,8 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen avID, data: cellElement.dataset.icon, }]); + iconElement.innerHTML = unicode ? unicode2Emoji(unicode) : `` + updateAttrViewCellAnimation(cellElement); }); event.preventDefault(); event.stopPropagation(); @@ -564,7 +569,7 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen avID, }], [{ action: "addAttrViewCol", - name: cellElement.textContent.trim(), + name: oldValue, avID, type: type, id: colId diff --git a/app/src/protyle/render/av/openMenuPanel.ts b/app/src/protyle/render/av/openMenuPanel.ts index 56498e67f..4c5313864 100644 --- a/app/src/protyle/render/av/openMenuPanel.ts +++ b/app/src/protyle/render/av/openMenuPanel.ts @@ -9,12 +9,12 @@ import {addFilter, getFiltersHTML, setFilter} from "./filter"; import {addSort, bindSortsEvent, getSortsHTML} from "./sort"; import {bindDateEvent, getDateHTML, setDateValue} from "./date"; import {formatNumber} from "./number"; -import {removeAttrViewColAnimation} from "./action"; +import {removeAttrViewColAnimation, updateAttrViewCellAnimation} from "./action"; import {addAssetLink, bindAssetEvent, editAssetItem, getAssetHTML, updateAssetCell} from "./asset"; import {Constants} from "../../../constants"; import {hideElements} from "../../ui/hideElements"; import {pathPosix} from "../../../util/pathName"; -import {openEmojiPanel} from "../../../emoji"; +import {openEmojiPanel, unicode2Emoji} from "../../../emoji"; export const openMenuPanel = (options: { protyle: IProtyle, @@ -509,6 +509,21 @@ export const openMenuPanel = (options: { y: rect.bottom, h: rect.height, w: rect.width + }, (unicode) => { + const colId = menuElement.querySelector(".b3-menu__item").getAttribute("data-col-id"); + transaction(options.protyle, [{ + action: "setAttrViewColIcon", + id: colId, + avID, + data: unicode, + }], [{ + action: "setAttrViewColIcon", + id: colId, + avID, + data: target.dataset.icon, + }]); + target.innerHTML = unicode ? unicode2Emoji(unicode) : `` + updateAttrViewCellAnimation(options.blockElement.querySelector(`.av__row--header .av__cell[data-col-id="${colId}"]`)) }); event.preventDefault(); event.stopPropagation(); @@ -693,7 +708,12 @@ export const openMenuPanel = (options: { break; } else if (type === "addAssetExist") { const rect = target.getBoundingClientRect(); - options.protyle.toolbar.showAssets(options.protyle, {x: rect.right, y: rect.bottom, w: target.parentElement.clientWidth + 8, h: rect.height}, (url) => { + options.protyle.toolbar.showAssets(options.protyle, { + x: rect.right, + y: rect.bottom, + w: target.parentElement.clientWidth + 8, + h: rect.height + }, (url) => { let value: IAVCellAssetValue; if (Constants.SIYUAN_ASSETS_IMAGE.includes(pathPosix().extname(url).toLowerCase())) { value = { diff --git a/app/src/protyle/render/av/render.ts b/app/src/protyle/render/av/render.ts index dd71482ec..2ce4ed074 100644 --- a/app/src/protyle/render/av/render.ts +++ b/app/src/protyle/render/av/render.ts @@ -37,7 +37,7 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: () => void) = style="width: ${column.width || "200px"}; ${column.wrap ? "" : "white-space: nowrap;"}">
- ${column.icon ? unicode2Emoji(column.icon) : ``} + ${column.icon ? unicode2Emoji(column.icon, "av__cellicon", true) : ``} ${column.name}