diff --git a/app/src/protyle/render/av/gallery/render.ts b/app/src/protyle/render/av/gallery/render.ts
index 3ed56ceab..bf99c0d5f 100644
--- a/app/src/protyle/render/av/gallery/render.ts
+++ b/app/src/protyle/render/av/gallery/render.ts
@@ -61,16 +61,17 @@ export const renderGallery = (options: {
view.cards.forEach((item: IAVGalleryItem, rowIndex: number) => {
galleryHTML += `
`;
if (view.coverFrom !== 0) {
+ const coverClass= "av__gallery-cover av__gallery-cover--" + view.cardAspectRatio
if (item.coverURL) {
if (item.coverURL.startsWith("background")) {
- galleryHTML += `
`;
+ galleryHTML += `
`;
} else {
- galleryHTML += `
`;
+ galleryHTML += `
`;
}
} else if (item.coverContent) {
- galleryHTML += `
`;
+ galleryHTML += `
`;
} else {
- galleryHTML += '
';
+ galleryHTML += '
';
}
}
galleryHTML += `
`;
diff --git a/app/src/protyle/render/av/gallery/util.ts b/app/src/protyle/render/av/gallery/util.ts
index c72374d65..f412149a5 100644
--- a/app/src/protyle/render/av/gallery/util.ts
+++ b/app/src/protyle/render/av/gallery/util.ts
@@ -102,7 +102,6 @@ export const setGallerySize = (options: {
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: "",
@@ -121,8 +120,6 @@ export const setGallerySize = (options: {
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;
}
});
@@ -143,7 +140,6 @@ export const setGallerySize = (options: {
data: options.view.cardSize
}]);
options.view.cardSize = 1;
- galleryElement.classList.remove("av__gallery--big", "av__gallery--small");
targetNameElement.textContent = window.siyuan.languages.medium;
}
});
@@ -164,8 +160,6 @@ export const setGallerySize = (options: {
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;
}
});
@@ -173,6 +167,60 @@ export const setGallerySize = (options: {
menu.open({x: rect.left, y: rect.bottom});
};
+export const getCardAspectRatio = (ratio: number) => {
+ switch (ratio) {
+ case 0:
+ return "16:9";
+ case 1:
+ return "9:16";
+ case 2:
+ return "4:3";
+ case 3:
+ return "3:4";
+ case 4:
+ return "3:2";
+ case 5:
+ return "3:2";
+ case 6:
+ return "1:1";
+ }
+ return "16:9";
+};
+
+export const setGalleryRatio = (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 targetNameElement = options.target.querySelector(".b3-menu__accelerator");
+ menu.addItem({
+ iconHTML: "",
+ checked: options.view.cardAspectRatio === 0,
+ label: "16:9",
+ click() {
+ transaction(options.protyle, [{
+ action: "setAttrViewCardAspectRatio",
+ avID,
+ blockID,
+ data: 0
+ }], [{
+ action: "setAttrViewCardAspectRatio",
+ avID,
+ blockID,
+ data: options.view.cardSize
+ }]);
+ options.view.cardAspectRatio = 0;
+ targetNameElement.textContent = getCardAspectRatio(0);
+ }
+ });
+ const rect = options.target.getBoundingClientRect();
+ menu.open({x: rect.left, y: rect.bottom});
+};
+
export const openGalleryItemMenu = (options: {
target: HTMLElement,
blockElement: HTMLElement,
diff --git a/app/src/protyle/render/av/layout.ts b/app/src/protyle/render/av/layout.ts
index bcc17e911..f53bab280 100644
--- a/app/src/protyle/render/av/layout.ts
+++ b/app/src/protyle/render/av/layout.ts
@@ -1,6 +1,7 @@
import {transaction} from "../../wysiwyg/transaction";
import {Constants} from "../../../constants";
import {fetchPost} from "../../../util/fetch";
+import {getCardAspectRatio} from "./gallery/util";
export const getLayoutHTML = (data: IAV) => {
let html = "";
@@ -31,6 +32,12 @@ export const getLayoutHTML = (data: IAV) => {
+