From 3010df69b46e49a7cbf41c16e03b06f94746c637 Mon Sep 17 00:00:00 2001 From: Vanessa Date: Tue, 10 Jun 2025 22:29:50 +0800 Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/10414 --- app/src/assets/scss/business/_av.scss | 9 +- app/src/protyle/render/av/gallery/render.ts | 11 +- app/src/protyle/render/av/gallery/util.ts | 171 ++++++++++++++++++++ app/src/protyle/render/av/layout.ts | 163 +++++++++++++++---- app/src/protyle/render/av/openMenuPanel.ts | 31 ++++ app/src/protyle/wysiwyg/transaction.ts | 3 +- app/src/types/index.d.ts | 14 +- 7 files changed, 360 insertions(+), 42 deletions(-) create mode 100644 app/src/protyle/render/av/gallery/util.ts diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss index 5066cb6d7..b9d14208d 100644 --- a/app/src/assets/scss/business/_av.scss +++ b/app/src/assets/scss/business/_av.scss @@ -277,6 +277,10 @@ gap: 16px; width: 100%; + &--top { + margin-top: 16px; + } + &--small { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } @@ -293,11 +297,11 @@ &:hover { .av__gallery-cover { - background-color: var(--b3-theme-surface-lighter); + background-color: var(--b3-list-hover); } .av__gallery-fields { - background-color: var(--b3-theme-surface-light); + background-color: var(--b3-theme-surface); } } @@ -336,6 +340,7 @@ } &-fields { + border-radius: 0 0 var(--b3-border-radius) var(--b3-border-radius); flex: 1; transition: background 100ms ease-out; } diff --git a/app/src/protyle/render/av/gallery/render.ts b/app/src/protyle/render/av/gallery/render.ts index d6132aa9c..4dba36b26 100644 --- a/app/src/protyle/render/av/gallery/render.ts +++ b/app/src/protyle/render/av/gallery/render.ts @@ -153,13 +153,20 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value, rowIndex)}
${response.data.name || ""}
-
+
${galleryHTML}
${Constants.ZWSP}
`; } else { - options.blockElement.firstElementChild.querySelector(".av__gallery").innerHTML = galleryHTML; + const galleryElement = options.blockElement.firstElementChild.querySelector(".av__gallery"); + galleryElement.innerHTML = galleryHTML; + if (view.hideAttrViewName) { + galleryElement.classList.add("av__gallery--top"); + } else { + galleryElement.classList.remove("av__gallery--top"); + } } options.blockElement.setAttribute("data-render", "true"); if (alignSelf) { diff --git a/app/src/protyle/render/av/gallery/util.ts b/app/src/protyle/render/av/gallery/util.ts new file mode 100644 index 000000000..dfa9c340d --- /dev/null +++ b/app/src/protyle/render/av/gallery/util.ts @@ -0,0 +1,171 @@ +import {transaction} from "../../../wysiwyg/transaction"; +import {Menu} from "../../../../plugin/Menu"; + +export const setGalleryCover = (options: { + view: IAVGallery + nodeElement: Element, + protyle: IProtyle, + target: HTMLElement +}) => { + const avID = options.nodeElement.getAttribute("data-av-id"); + const blockID = options.nodeElement.getAttribute("data-node-id"); + const targetNameElement = options.target.querySelector(".b3-menu__accelerator"); + const menu = new Menu(); + menu.addItem({ + iconHTML: "", + checked: options.view.coverFrom === 0, + label: window.siyuan.languages.calcOperatorNone, + click() { + transaction(options.protyle, [{ + action: "setAttrViewCoverFrom", + avID, + blockID, + data: 0 + }], [{ + action: "setAttrViewCoverFrom", + avID, + blockID, + data: options.view.coverFrom + }]); + options.view.coverFrom = 0; + targetNameElement.textContent = window.siyuan.languages.calcOperatorNone; + } + }); + menu.addItem({ + iconHTML: "", + checked: options.view.coverFrom === 1, + label: window.siyuan.languages.contentImage, + click() { + transaction(options.protyle, [{ + action: "setAttrViewCoverFrom", + avID, + blockID, + data: 1 + }], [{ + action: "setAttrViewCoverFrom", + avID, + blockID, + data: options.view.coverFrom + }]); + options.view.coverFrom = 1; + targetNameElement.textContent = window.siyuan.languages.contentImage; + } + }); + options.view.fields.forEach(item => { + if (item.type === "mAsset") { + menu.addItem({ + iconHTML: "", + checked: options.view.coverFromAssetKeyID === item.id, + label: item.name, + click() { + transaction(options.protyle, [{ + action: "setAttrViewCoverFrom", + avID, + blockID, + data: 2 + }, { + action: "setAttrViewCoverFromAssetKeyID", + avID, + blockID, + keyID: item.id + }], [{ + action: "setAttrViewCoverFrom", + avID, + blockID, + data: options.view.coverFrom + }, { + action: "setAttrViewCoverFromAssetKeyID", + avID, + blockID, + keyID: options.view.coverFromAssetKeyID + }]); + options.view.coverFrom = 2; + options.view.coverFromAssetKeyID = item.id; + targetNameElement.textContent = item.name; + } + }); + } + }); + const rect = options.target.getBoundingClientRect(); + menu.open({x: rect.left, y: rect.bottom}); +}; + +export const setGallerySize = (options: { + view: IAVGallery + nodeElement: Element, + protyle: IProtyle, + target: HTMLElement +}) => { + const menu = new Menu(); + const avID = options.nodeElement.getAttribute("data-av-id"); + const blockID = options.nodeElement.getAttribute("data-node-id"); + const galleryElement = options.nodeElement.querySelector(".av__gallery"); + const targetNameElement = options.target.querySelector(".b3-menu__accelerator"); + menu.addItem({ + iconHTML: "", + checked: options.view.cardSize === 0, + label: window.siyuan.languages.small, + click() { + transaction(options.protyle, [{ + action: "setAttrViewCardSize", + avID, + blockID, + data: 0 + }], [{ + action: "setAttrViewCardSize", + avID, + blockID, + data: options.view.cardSize + }]); + options.view.cardSize = 0; + galleryElement.classList.add("av__gallery--small"); + galleryElement.classList.remove("av__gallery--big"); + targetNameElement.textContent = window.siyuan.languages.small; + } + }); + menu.addItem({ + iconHTML: "", + checked: options.view.cardSize === 1, + label: window.siyuan.languages.medium, + click() { + transaction(options.protyle, [{ + action: "setAttrViewCardSize", + avID, + blockID, + data: 1 + }], [{ + action: "setAttrViewCardSize", + avID, + blockID, + data: options.view.cardSize + }]); + options.view.cardSize = 1; + galleryElement.classList.remove("av__gallery--big", "av__gallery--small"); + targetNameElement.textContent = window.siyuan.languages.medium; + } + }); + menu.addItem({ + iconHTML: "", + checked: options.view.cardSize === 2, + label: window.siyuan.languages.large, + click() { + transaction(options.protyle, [{ + action: "setAttrViewCardSize", + avID, + blockID, + data: 2 + }], [{ + action: "setAttrViewCardSize", + avID, + blockID, + data: options.view.cardSize + }]); + options.view.cardSize = 2; + galleryElement.classList.remove("av__gallery--small"); + galleryElement.classList.add("av__gallery--big"); + targetNameElement.textContent = window.siyuan.languages.large; + } + }); + const rect = options.target.getBoundingClientRect(); + menu.open({x: rect.left, y: rect.bottom}); +}; diff --git a/app/src/protyle/render/av/layout.ts b/app/src/protyle/render/av/layout.ts index 527af02e5..0e885ce21 100644 --- a/app/src/protyle/render/av/layout.ts +++ b/app/src/protyle/render/av/layout.ts @@ -2,13 +2,48 @@ import {transaction} from "../../wysiwyg/transaction"; export const getLayoutHTML = (data: IAV) => { let html = ""; + const view = data.view as IAVGallery; if (data.viewType === "gallery") { - html = ` + +`; } return `
@@ -21,12 +56,12 @@ export const getLayoutHTML = (data: IAV) => {