Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-22 09:30:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

🎨 https://github.com/siyuan-note/siyuan/issues/10414

Browse source
This commit is contained in:
Vanessa 2025-06-10 22:47:29 +08:00
parent 4222102c32
commit 1b6d831a07
2 changed files with 41 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

46
app/src/protyle/render/av/layout.ts
View file

@ -56,12 +56,12 @@ export const getLayoutHTML = (data: IAV) => {
<button class="b3-menu__separator"></button> <button class="b3-menu__separator"></button>
<button class="b3-menu__item" data-type="nobg"> <button class="b3-menu__item" data-type="nobg">
<div class="av__layout"> <div class="av__layout">
<div data-type="set-layoyt" data-view-type="${data.viewType}" class="av__layout-item${data.viewType === "table" ? " av__layout-item--select" : ""}"> <div data-type="set-layout" data-view-type="table" class="av__layout-item${data.viewType === "table" ? " av__layout-item--select" : ""}">
<svg><use xlink:href="#iconTable"></use></svg> <svg><use xlink:href="#iconTable"></use></svg>
<div class="fn__hr"></div> <div class="fn__hr"></div>
<div>${window.siyuan.languages.table}</div> <div>${window.siyuan.languages.table}</div>
</div> </div>
<div data-type="set-layoyt" data-view-type="${data.viewType}" class="av__layout-item${data.viewType === "gallery" ? " av__layout-item--select" : ""}"> <div data-type="set-layout" data-view-type="gallery" class="av__layout-item${data.viewType === "gallery" ? " av__layout-item--select" : ""}">
<svg><use xlink:href="#iconGallery"></use></svg> <svg><use xlink:href="#iconGallery"></use></svg>
<div class="fn__hr"></div> <div class="fn__hr"></div>
<div>${window.siyuan.languages.gallery}</div> <div>${window.siyuan.languages.gallery}</div>
@ -134,13 +134,13 @@ export const bindLayoutEvent = (options: {
blockID, blockID,
data: !checked data: !checked
}]); }]);
options.blockElement.querySelectorAll(".av__gallery-img").forEach(item => { options.blockElement.querySelectorAll(".av__gallery-img").forEach(item => {
if (checked) { if (checked) {
item.classList.add("av__gallery-img--fit"); item.classList.add("av__gallery-img--fit");
} else { } else {
item.classList.remove("av__gallery-img--fit"); item.classList.remove("av__gallery-img--fit");
} }
}) });
}); });
const toggleIconElement = options.menuElement.querySelector('.b3-switch[data-type="toggle-gallery-icon"]') as HTMLInputElement; const toggleIconElement = options.menuElement.querySelector('.b3-switch[data-type="toggle-gallery-icon"]') as HTMLInputElement;
toggleIconElement.addEventListener("change", () => { toggleIconElement.addEventListener("change", () => {
@ -177,3 +177,31 @@ export const bindLayoutEvent = (options: {
}]); }]);
}); });
}; };
export const updateLayout = (options: {
view: IAVGallery
nodeElement: Element,
protyle: IProtyle,
target: HTMLElement
}) => {
if (options.target.classList.contains("av__layout-item--select")) {
return;
}
const avID = options.nodeElement.getAttribute("data-av-id");
const blockID = options.nodeElement.getAttribute("data-node-id");
const layout = options.target.getAttribute("data-view-type");
transaction(options.protyle, [{
action: "changeAttrViewLayout",
avID,
blockID,
layout
}], [{
action: "changeAttrViewLayout",
avID,
blockID,
layout: options.view.type
}]);
options.nodeElement.setAttribute("data-view-type", layout);
options.target.parentElement.querySelector(".av__layout-item--select").classList.remove("av__layout-item--select");
options.target.classList.add("av__layout-item--select");
};

8
app/src/protyle/render/av/openMenuPanel.ts
View file

@ -37,7 +37,7 @@ import {updateCellsValue} from "./cell";
import {openCalcMenu} from "./calc"; import {openCalcMenu} from "./calc";
import {escapeAttr, escapeHtml} from "../../../util/escape"; import {escapeAttr, escapeHtml} from "../../../util/escape";
import {Dialog} from "../../../dialog"; import {Dialog} from "../../../dialog";
import {bindLayoutEvent, getLayoutHTML} from "./layout"; import {bindLayoutEvent, getLayoutHTML, updateLayout} from "./layout";
import {setGalleryCover, setGallerySize} from "./gallery/util"; import {setGalleryCover, setGallerySize} from "./gallery/util";
export const openMenuPanel = (options: { export const openMenuPanel = (options: {
@ -1382,11 +1382,11 @@ export const openMenuPanel = (options: {
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "set-layout") { } else if (type === "set-layout") {
setPageSize({ updateLayout({
target, target,
protyle: options.protyle, protyle: options.protyle,
avID, nodeElement: options.blockElement,
nodeElement: options.blockElement view: data.view as IAVGallery
}); });
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();