diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss index 0eee48966..eaea3ef45 100644 --- a/app/src/assets/scss/business/_av.scss +++ b/app/src/assets/scss/business/_av.scss @@ -116,17 +116,6 @@ &--header { z-index: 3; - - .av__cell { - padding: 0; - transition: background 20ms ease-in 0s; - display: flex; - overflow: inherit; // 保证列宽和顺序调整的拖拽点样式 - - &:hover { - background-color: var(--b3-av-hover); - } - } } &--header, @@ -262,6 +251,37 @@ background-color: var(--b3-menu-background); } + &--header { + padding: 5px; + display: flex; + align-items: center; + transition: background 20ms ease-in 0s; + overflow: inherit; // 保证列宽和顺序调整的拖拽点样式 + + &:hover { + background-color: var(--b3-av-hover); + } + + .av__celltext { + white-space: nowrap; + text-overflow: ellipsis; + } + + .av__cellheadericon { + height: 1em; + width: 1em; + color: var(--b3-theme-on-surface); + margin: 0 5px 0 0; + flex-shrink: 0; + line-height: 1em; + font-size: inherit; + + &--pin { + margin: 0 0 0 5px; + } + } + } + .block__icon { position: absolute; right: 5px; @@ -291,24 +311,6 @@ cursor: ns-resize; } - &__cellheader { - padding: 5px; - display: flex; - align-items: center; - flex: 1; - overflow: hidden; - - .av__cellheadericon { - height: 1em; - width: 1em; - color: var(--b3-theme-on-surface); - margin: 0 5px 0 0; - flex-shrink: 0; - line-height: 1em; - font-size: inherit; - } - } - &__celltext { overflow: hidden; diff --git a/app/src/block/popover.ts b/app/src/block/popover.ts index 75af593cc..581b325fe 100644 --- a/app/src/block/popover.ts +++ b/app/src/block/popover.ts @@ -5,6 +5,7 @@ import {hideTooltip, showTooltip} from "../dialog/tooltip"; import {getIdFromSYProtocol} from "../util/pathName"; import {App} from "../index"; import {Constants} from "../constants"; +import {getCellText} from "../protyle/render/av/cell"; let popoverTargetElement: HTMLElement; export const initBlockPopover = (app: App) => { @@ -17,19 +18,26 @@ export const initBlockPopover = (app: App) => { } const aElement = hasClosestByAttribute(event.target, "data-type", "a", true) || hasClosestByAttribute(event.target, "data-type", "tab-header") || - hasClosestByClassName(event.target, "av__celltext") || + hasClosestByClassName(event.target, "av__cell") || hasClosestByClassName(event.target, "ariaLabel") || hasClosestByAttribute(event.target, "data-type", "inline-memo"); if (aElement) { let tip = aElement.getAttribute("aria-label") || aElement.getAttribute("data-inline-memo-content"); - if (aElement.classList.contains("av__celltext")) { - if (aElement.offsetWidth > aElement.parentElement.clientWidth - (aElement.classList.contains("fn__flex-shrink") ? 24 : 5)) { // 只能减左边 padding，换行时字体会穿透到右侧 padding - if (aElement.querySelector(".av__cellicon")) { - tip = `${aElement.firstChild.textContent} → ${aElement.lastChild.textContent}`; - } else { - tip = aElement.textContent; + if (aElement.classList.contains("av__cell")) { + if (aElement.classList.contains("av__cell--header")) { + const textElement = aElement.querySelector(".av__celltext"); + if (textElement.scrollWidth > textElement.clientWidth + 2) { + tip = getCellText(aElement) } - } else { + } else if (aElement.dataset.wrap !== "true") { + aElement.style.overflow = "auto"; + if (aElement.scrollWidth > aElement.clientWidth + 2) { + tip = getCellText(aElement) + } + aElement.style.overflow = ""; + } + if (!tip) { + hideTooltip(); return; } } @@ -206,7 +214,7 @@ const getTarget = (event: MouseEvent & { target: HTMLElement }, aElement: false } if (!popoverTargetElement && aElement && ( (aElement.getAttribute("data-href")?.startsWith("siyuan://blocks") && aElement.getAttribute("prevent-popover") !== "true") || - (aElement.classList.contains("av__celltext") && aElement.dataset.type === "url"))) { + (aElement.classList.contains("av__cell") && aElement.firstElementChild?.getAttribute("data-type") === "url"))) { popoverTargetElement = aElement; } if (!popoverTargetElement || window.siyuan.altIsPressed || diff --git a/app/src/protyle/render/av/action.ts b/app/src/protyle/render/av/action.ts index ab8b2fdc6..2d79966b2 100644 --- a/app/src/protyle/render/av/action.ts +++ b/app/src/protyle/render/av/action.ts @@ -197,8 +197,8 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle event.preventDefault(); event.stopPropagation(); return true; - } else if (target.classList.contains("av__cellheader")) { - showColMenu(protyle, blockElement, target.parentElement); + } else if (target.classList.contains("av__cell--header")) { + showColMenu(protyle, blockElement, target); 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 0c5be5c5c..d62206189 100644 --- a/app/src/protyle/render/av/cell.ts +++ b/app/src/protyle/render/av/cell.ts @@ -18,13 +18,16 @@ export const getCellText = (cellElement: HTMLElement | false) => { return ""; } let cellText = ""; - const textElement = cellElement.querySelector(".av__celltext"); - if (textElement) { - if (textElement.querySelector(".av__cellicon")) { - cellText = `${textElement.firstChild.textContent} → ${textElement.lastChild.textContent}`; - } else { - cellText = textElement.textContent; - } + const textElements = cellElement.querySelectorAll(".b3-chip, .av__celltext--ref, .av__celltext"); + if (textElements.length > 0) { + textElements.forEach(item => { + if (item.querySelector(".av__cellicon")) { + cellText += `${item.firstChild.textContent} → ${item.lastChild.textContent}, `; + } else if (item.getAttribute("data-type") !== "block-more") { + cellText += item.textContent + ", "; + } + }) + cellText = cellText.substring(0, cellText.length - 2); } else { cellText = cellElement.textContent; } @@ -531,7 +534,7 @@ export const renderCell = (cellValue: IAVCellValue, wrap: boolean) => { ${window.siyuan.languages.update}`; } } else if (cellValue.type === "number") { - text = `${cellValue?.number.formattedContent || cellValue?.number.content || ""}`; + text = `${cellValue?.number.formattedContent || cellValue?.number.content || ""}`; } else if (cellValue.type === "mSelect" || cellValue.type === "select") { cellValue?.mSelect?.forEach((item) => { text += `${item.content}`; @@ -636,14 +639,11 @@ export const updateHeaderCell = (cellElement: HTMLElement, headerValue: { if (typeof headerValue.pin !== "undefined") { const textElement = cellElement.querySelector(".av__celltext"); if (headerValue.pin) { - if (!textElement.nextElementSibling) { - textElement.insertAdjacentHTML("afterend", '
'); + if (!cellElement.querySelector(".av__cellheadericon--pin")) { + textElement.insertAdjacentHTML("afterend", ''); } } else { - if (textElement.nextElementSibling) { - textElement.nextElementSibling.nextElementSibling.remove(); - textElement.nextElementSibling.remove(); - } + cellElement.querySelector(".av__cellheadericon--pin")?.remove() } } }; diff --git a/app/src/protyle/render/av/col.ts b/app/src/protyle/render/av/col.ts index 432d329dd..f5fb09df2 100644 --- a/app/src/protyle/render/av/col.ts +++ b/app/src/protyle/render/av/col.ts @@ -439,11 +439,9 @@ const addAttrViewColAnimation = (options: { } let html = ""; if (index === 0) { - html = `
-
- ${options.icon ? unicode2Emoji(options.icon, "av__cellheadericon", true) : ``} - ${options.name} -
+ html = `
+ ${options.icon ? unicode2Emoji(options.icon, "av__cellheadericon", true) : ``} + ${options.name}
`; } else { diff --git a/app/src/protyle/render/av/render.ts b/app/src/protyle/render/av/render.ts index 4a8cbfc98..6f6a3cd5e 100644 --- a/app/src/protyle/render/av/render.ts +++ b/app/src/protyle/render/av/render.ts @@ -93,14 +93,12 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: () => void, v if (column.hidden) { return; } - tableHTML += `
-
- ${column.icon ? unicode2Emoji(column.icon, "av__cellheadericon", true) : ``} - ${column.name} - ${column.pin ? '
' : ""} -
+ ${column.icon ? unicode2Emoji(column.icon, "av__cellheadericon", true) : ``} + ${column.name} + ${column.pin ? '' : ""}
`; if (pinIndex === index) { @@ -135,6 +133,7 @@ style="width: ${column.width || "200px"}">${getCalcValue(column) || '${renderCell(cell.value, data.columns[index].wrap)}
`; diff --git a/app/src/protyle/render/av/row.ts b/app/src/protyle/render/av/row.ts index 24d69246b..f3d3a786f 100644 --- a/app/src/protyle/render/av/row.ts +++ b/app/src/protyle/render/av/row.ts @@ -87,7 +87,9 @@ export const insertAttrViewBlockAnimation = (protyle: IProtyle, blockElement: El colHTML = '
'; } previousElement.querySelectorAll(".av__cell").forEach((item: HTMLElement, index) => { - colHTML += `
`; + colHTML += `
`; if (pinIndex === index) { colHTML += "
"; } diff --git a/app/src/protyle/util/editorCommonEvent.ts b/app/src/protyle/util/editorCommonEvent.ts index f0487f38a..49f3f7da3 100644 --- a/app/src/protyle/util/editorCommonEvent.ts +++ b/app/src/protyle/util/editorCommonEvent.ts @@ -721,10 +721,10 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => { event.dataTransfer.setData(`${Constants.SIYUAN_DROP_GUTTER}NodeListItem${Constants.ZWSP}${target.parentElement.getAttribute("data-subtype")}${Constants.ZWSP}${[target.parentElement.getAttribute("data-node-id")]}`, protyle.wysiwyg.element.innerHTML); return; - } else if (target.classList.contains("av__cellheader")) { - window.siyuan.dragElement = target.parentElement; - event.dataTransfer.setData(`${Constants.SIYUAN_DROP_GUTTER}NodeAttributeView${Constants.ZWSP}Col${Constants.ZWSP}${[target.parentElement.getAttribute("data-col-id")]}`, - target.innerHTML); + } else if (target.classList.contains("av__cell--header")) { + window.siyuan.dragElement = target; + event.dataTransfer.setData(`${Constants.SIYUAN_DROP_GUTTER}NodeAttributeView${Constants.ZWSP}Col${Constants.ZWSP}${[target.getAttribute("data-col-id")]}`, + target.outerHTML); return; } } diff --git a/app/src/protyle/wysiwyg/index.ts b/app/src/protyle/wysiwyg/index.ts index 33add3079..5a564bf12 100644 --- a/app/src/protyle/wysiwyg/index.ts +++ b/app/src/protyle/wysiwyg/index.ts @@ -381,7 +381,7 @@ export class WYSIWYG { } const target = event.target as HTMLElement; if (hasClosestByClassName(target, "protyle-action") || - hasClosestByClassName(target, "av__cellheader")) { + (hasClosestByClassName(target, "av__cell--header") && !hasClosestByClassName(target, "av__widthdrag"))) { return; } const documentSelf = document; @@ -435,7 +435,6 @@ export class WYSIWYG { }]); }; this.preventClick = true; - event.stopPropagation(); event.preventDefault(); return; } @@ -493,8 +492,6 @@ export class WYSIWYG { } return false; }; - event.stopPropagation(); - event.preventDefault(); return false; } // 图片、iframe、video 缩放 @@ -1449,9 +1446,9 @@ export class WYSIWYG { if (!nodeElement) { return false; } - const avCellHeaderElement = hasClosestByClassName(target, "av__cellheader"); + const avCellHeaderElement = hasClosestByClassName(target, "av__cell--header"); if (avCellHeaderElement) { - showColMenu(protyle, nodeElement, avCellHeaderElement.parentElement); + showColMenu(protyle, nodeElement, avCellHeaderElement); event.stopPropagation(); event.preventDefault(); return;