diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss index 2782b72eb..668ea5e1c 100644 --- a/app/src/assets/scss/business/_av.scss +++ b/app/src/assets/scss/business/_av.scss @@ -270,6 +270,7 @@ border-radius: var(--b3-border-radius); display: flex; flex-direction: column; + position: relative; &:hover { .av__gallery-cover { @@ -279,6 +280,10 @@ .av__gallery-fields { background-color: var(--b3-theme-surface); } + + .av__gallery-actions { + opacity: 1; + } } &--select { @@ -329,6 +334,12 @@ border-radius: 0 0 var(--b3-border-radius) var(--b3-border-radius); flex: 1; transition: background 100ms ease-out; + white-space: nowrap; + + &--wrap { + word-break: break-all; + white-space: pre-wrap; + } } &-add { @@ -351,6 +362,15 @@ border-top: 1px solid var(--b3-border-color); margin-top: 5px; } + + &-actions { + position: absolute; + right: 8px; + top: 8px; + display: flex; + opacity: 0; + transition: var(--b3-transition); + } } &__layout { diff --git a/app/src/protyle/render/av/action.ts b/app/src/protyle/render/av/action.ts index 1458e9369..d9d47f1b5 100644 --- a/app/src/protyle/render/av/action.ts +++ b/app/src/protyle/render/av/action.ts @@ -258,6 +258,14 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle event.preventDefault(); event.stopPropagation(); return true; + } else if (type === "av-gallery-edit") { + event.preventDefault(); + event.stopPropagation(); + return true; + } else if (type === "av-gallery-more") { + event.preventDefault(); + event.stopPropagation(); + return true; } target = target.parentElement; } diff --git a/app/src/protyle/render/av/cell.ts b/app/src/protyle/render/av/cell.ts index a5ccce07a..ee9d78c26 100644 --- a/app/src/protyle/render/av/cell.ts +++ b/app/src/protyle/render/av/cell.ts @@ -893,7 +893,7 @@ export const renderCellAttr = (cellElement: Element, value: IAVCellValue) => { } }; -export const renderCell = (cellValue: IAVCellValue, rowIndex = 0) => { +export const renderCell = (cellValue: IAVCellValue, rowIndex = 0, showIcon = true) => { let text = ""; if ("template" === cellValue.type) { text = `${cellValue ? (cellValue.template.content || "") : ""}`; @@ -908,7 +908,7 @@ export const renderCell = (cellValue: IAVCellValue, rowIndex = 0) => { if (cellValue?.isDetached) { text = `${Lute.EscapeHTMLStr(cellValue.block.content || "")}${window.siyuan.languages.more}`; } else { - text = `${unicode2Emoji(cellValue.block.icon || window.siyuan.storage[Constants.LOCAL_IMAGES].file)}${Lute.EscapeHTMLStr(cellValue.block.content)}${window.siyuan.languages.update}`; + text = `${unicode2Emoji(cellValue.block.icon || window.siyuan.storage[Constants.LOCAL_IMAGES].file)}${Lute.EscapeHTMLStr(cellValue.block.content)}${window.siyuan.languages.update}`; } } else if (cellValue.type === "number") { text = `${cellValue?.number.formattedContent || cellValue?.number.content || ""}`; @@ -966,7 +966,7 @@ export const renderCell = (cellValue: IAVCellValue, rowIndex = 0) => { text += `➖ ${Lute.EscapeHTMLStr(item.block.content || window.siyuan.languages.untitled)}`; } else { // data-block-id 用于更新 emoji - text += `${unicode2Emoji(item.block.icon || window.siyuan.storage[Constants.LOCAL_IMAGES].file)}${Lute.EscapeHTMLStr(item.block.content || window.siyuan.languages.untitled)}`; + text += `${unicode2Emoji(item.block.icon || window.siyuan.storage[Constants.LOCAL_IMAGES].file)}${Lute.EscapeHTMLStr(item.block.content || window.siyuan.languages.untitled)}`; } } }); diff --git a/app/src/protyle/render/av/gallery/render.ts b/app/src/protyle/render/av/gallery/render.ts index e57a7ef83..ac46c6089 100644 --- a/app/src/protyle/render/av/gallery/render.ts +++ b/app/src/protyle/render/av/gallery/render.ts @@ -86,7 +86,7 @@ export const renderGallery = (options: { } } - galleryHTML += '
'; + galleryHTML += `
`; item.values.forEach((cell, fieldsIndex) => { if (view.fields[fieldsIndex].hidden) { return; @@ -100,9 +100,14 @@ ${cell.valueType === "block" ? 'data-block-id="' + (cell.value.block.id || "") + data-dtype="${cell.valueType}" ${cell.value?.isDetached ? ' data-detached="true"' : ""} style="${cell.bgColor ? `background-color:${cell.bgColor};` : ""} -${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value, rowIndex)}
`; +${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value, rowIndex, view.showIcon)}
`; }); - galleryHTML += ""; + galleryHTML += ` +
+ + +
+`; }); galleryHTML += `
${window.siyuan.languages.addCard}
`; let tabHTML = ""; diff --git a/app/src/protyle/render/av/layout.ts b/app/src/protyle/render/av/layout.ts index 1999f86cf..90516800c 100644 --- a/app/src/protyle/render/av/layout.ts +++ b/app/src/protyle/render/av/layout.ts @@ -165,6 +165,13 @@ export const bindLayoutEvent = (options: { blockID, data: !checked }]); + options.blockElement.querySelectorAll('.av__cell[data-dtype="block"] .b3-menu__avemoji').forEach(item => { + if (checked) { + item.classList.remove("fn__none"); + } else { + item.classList.add("fn__none"); + } + }); }); const toggleWrapElement = options.menuElement.querySelector('.b3-switch[data-type="toggle-gallery-wrap"]') as HTMLInputElement; toggleWrapElement.addEventListener("change", () => { @@ -182,6 +189,13 @@ export const bindLayoutEvent = (options: { blockID, data: !checked }]); + options.blockElement.querySelectorAll('.av__gallery-fields').forEach(item => { + if (checked) { + item.classList.add("av__gallery-fields--wrap"); + } else { + item.classList.remove("av__gallery-fields--wrap"); + } + }); }); }; diff --git a/app/src/protyle/wysiwyg/transaction.ts b/app/src/protyle/wysiwyg/transaction.ts index c1a39f817..897e1ac1d 100644 --- a/app/src/protyle/wysiwyg/transaction.ts +++ b/app/src/protyle/wysiwyg/transaction.ts @@ -849,9 +849,9 @@ export const onTransaction = (protyle: IProtyle, operation: IOperation, isUndo: "setAttrViewSorts", "setAttrViewColCalc", "removeAttrViewCol", "updateAttrViewColNumberFormat", "removeAttrViewBlock", "replaceAttrViewBlock", "updateAttrViewColTemplate", "setAttrViewColPin", "addAttrViewView", "setAttrViewColIcon", "removeAttrViewView", "setAttrViewViewName", "setAttrViewViewIcon", "duplicateAttrViewView", "sortAttrViewView", - "updateAttrViewColRelation", "setAttrViewPageSize", "updateAttrViewColRollup", "sortAttrViewKey", - "duplicateAttrViewKey", "setAttrViewViewDesc", "setAttrViewColDesc", "setAttrViewCoverFrom", "setAttrViewShowIcon", - "setAttrViewCoverFromAssetKeyID", "changeAttrViewLayout"].includes(operation.action)) { + "updateAttrViewColRelation", "setAttrViewPageSize", "updateAttrViewColRollup", "sortAttrViewKey", "setAttrViewColDesc", + "duplicateAttrViewKey", "setAttrViewViewDesc", "setAttrViewCoverFrom", "setAttrViewCoverFromAssetKeyID", + "changeAttrViewLayout"].includes(operation.action)) { if (!isUndo) { // 撤销 transaction 会进行推送，需使用推送来进行刷新最新数据 https://github.com/siyuan-note/siyuan/issues/13607 refreshAV(protyle, operation);