diff --git a/app/src/protyle/render/av/action.ts b/app/src/protyle/render/av/action.ts index 635ba75e0..990f59c91 100644 --- a/app/src/protyle/render/av/action.ts +++ b/app/src/protyle/render/av/action.ts @@ -17,6 +17,7 @@ import {isLocalPath, pathPosix} from "../../../util/pathName"; import {Constants} from "../../../constants"; import {openAsset} from "../../../editor/util"; import {getSearch, isMobile} from "../../../util/functions"; +import {unicode2Emoji} from "../../../emoji"; export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLElement }) => { const blockElement = hasClosestBlock(event.target); @@ -301,10 +302,12 @@ export const avContextmenu = (protyle: IProtyle, event: MouseEvent & { detail: a } }); } - if (!hideBlock) { + const type = cellElement.getAttribute("data-dtype") as TAVCol; + if (!hideBlock && !["updated", "created", "template"].includes(type)) { + const icon = cellElement.dataset.icon; editAttrSubmenu.push({ - icon: getColIconByType(cellElement.getAttribute("data-dtype") as TAVCol), - label: cellElement.textContent.trim(), + iconHTML: icon ? unicode2Emoji(icon, "b3-menu__icon", true) : ``, + label: cellElement.querySelector(".av__celltext").textContent.trim(), click() { popTextCell(protyle, selectElements); } @@ -338,19 +341,20 @@ export const avContextmenu = (protyle: IProtyle, event: MouseEvent & { detail: a export const updateAVName = (protyle: IProtyle, blockElement: Element) => { const avId = blockElement.getAttribute("data-av-id"); const nameElement = blockElement.querySelector(".av__title") as HTMLElement; - if (nameElement.textContent.trim() === nameElement.dataset.title.trim()) { + const newData = nameElement.textContent.trim(); + if (newData === nameElement.dataset.title.trim()) { return; } transaction(protyle, [{ action: "setAttrViewName", id: avId, - data: nameElement.textContent.trim(), + data: newData, }], [{ action: "setAttrViewName", id: avId, name: nameElement.dataset.title, }]); - nameElement.dataset.title = nameElement.textContent.trim(); + nameElement.dataset.title = newData; }; export const updateAttrViewCellAnimation = (cellElement: HTMLElement) => { diff --git a/app/src/protyle/render/av/cell.ts b/app/src/protyle/render/av/cell.ts index 1fdbf07cf..0db8ddcb4 100644 --- a/app/src/protyle/render/av/cell.ts +++ b/app/src/protyle/render/av/cell.ts @@ -352,10 +352,24 @@ export const popTextCell = (protyle: IProtyle, cellElements: HTMLElement[], type if (type === "block" && (cellElements.length > 1 || !cellElements[0].getAttribute("data-detached"))) { return; } - const cellRect = cellElements[0].getBoundingClientRect(); + const blockElement = hasClosestBlock(cellElements[0]); + let cellRect = cellElements[0].getBoundingClientRect(); + if (blockElement) { + const avScrollElement = blockElement.querySelector(".av__scroll"); + const avScrollRect = avScrollElement.getBoundingClientRect(); + if (avScrollRect.left > cellRect.left) { + avScrollElement.scrollLeft = avScrollElement.scrollLeft + cellRect.left - avScrollRect.left; + } else if (avScrollRect.right < cellRect.right) { + avScrollElement.scrollLeft = avScrollElement.scrollLeft + cellRect.right - avScrollRect.right; + } + const avHeaderRect = blockElement.querySelector(".av__header").getBoundingClientRect() + if (avHeaderRect.bottom > cellRect.top) { + protyle.contentElement.scrollTop = protyle.contentElement.scrollTop + cellRect.top - avHeaderRect.bottom; + } + } + cellRect = cellElements[0].getBoundingClientRect(); let html = ""; const style = `style="position:absolute;left: ${cellRect.left}px;top: ${cellRect.top}px;width:${Math.max(cellRect.width, 100)}px;height: ${cellRect.height}px"`; - const blockElement = hasClosestBlock(cellElements[0]); if (["text", "url", "email", "phone", "block"].includes(type)) { html = ``; } else if (type === "number") { diff --git a/app/src/protyle/render/av/filter.ts b/app/src/protyle/render/av/filter.ts index 8cdfde735..862896911 100644 --- a/app/src/protyle/render/av/filter.ts +++ b/app/src/protyle/render/av/filter.ts @@ -322,7 +322,7 @@ export const addFilter = (options: { if (!hasFilter && column.type !== "mAsset") { menu.addItem({ label: column.name, - iconHTML: `${column.icon ? unicode2Emoji(column.icon) : ``}`, + iconHTML: column.icon ? unicode2Emoji(column.icon, "b3-menu__icon", true) : ``, click: () => { const oldFilters = Object.assign([], options.data.view.filters); const cellValue = genCellValue(column.type, ""); diff --git a/app/src/protyle/render/av/sort.ts b/app/src/protyle/render/av/sort.ts index 834b5a66c..8dc14fc11 100644 --- a/app/src/protyle/render/av/sort.ts +++ b/app/src/protyle/render/av/sort.ts @@ -24,7 +24,7 @@ export const addSort = (options: { if (!hasSort) { menu.addItem({ label: column.name, - iconHTML: `${column.icon ? unicode2Emoji(column.icon) : ``}`, + iconHTML: column.icon ? unicode2Emoji(column.icon, "b3-menu__icon", true) : ``, click: () => { const oldSorts = Object.assign([], options.data.view.sorts); options.data.view.sorts.push({