@@ -212,7 +210,7 @@ export const renderKanban = async (options: {
selectBg = `style="--b3-av-kanban-border:${color};--b3-av-kanban-bg:${color}29;--b3-av-kanban-content-bg:${color}47;--b3-av-kanban-content-hover-bg:${color}5c;"`;
}
}
- bodyHTML += `
+ bodyHTML += `
${getKanbanTitleHTML(group, group.cards.length)}
${getKanbanHTML(group)}
`;
diff --git a/app/src/protyle/render/av/layout.ts b/app/src/protyle/render/av/layout.ts
index 1a1f5e28a..8e729579c 100644
--- a/app/src/protyle/render/av/layout.ts
+++ b/app/src/protyle/render/av/layout.ts
@@ -154,24 +154,6 @@ export const bindLayoutEvent = (options: {
}]);
options.data.view.showIcon = checked;
});
- const toggleBgElement = options.menuElement.querySelector('.b3-switch[data-type="toggle-kanban-bg"]') as HTMLInputElement;
- toggleBgElement.addEventListener("change", () => {
- const avID = options.blockElement.getAttribute("data-av-id");
- const blockID = options.blockElement.getAttribute("data-node-id");
- const checked = toggleBgElement.checked;
- transaction(options.protyle, [{
- action: "setAttrViewFillColBackgroundColor",
- avID,
- blockID,
- data: checked
- }], [{
- action: "setAttrViewFillColBackgroundColor",
- avID,
- blockID,
- data: !checked
- }]);
- (options.data.view as IAVKanban).fillColBackgroundColor = checked;
- })
const toggleWrapElement = options.menuElement.querySelector('.b3-switch[data-type="toggle-entries-wrap"]') as HTMLInputElement;
toggleWrapElement.addEventListener("change", () => {
const avID = options.blockElement.getAttribute("data-av-id");
@@ -193,9 +175,27 @@ export const bindLayoutEvent = (options: {
});
options.data.view.wrapField = checked;
});
- if (options.data.viewType !== "gallery") {
+ if (options.data.viewType === "table") {
return;
}
+ const toggleBgElement = options.menuElement.querySelector('.b3-switch[data-type="toggle-kanban-bg"]') as HTMLInputElement;
+ toggleBgElement.addEventListener("change", () => {
+ const avID = options.blockElement.getAttribute("data-av-id");
+ const blockID = options.blockElement.getAttribute("data-node-id");
+ const checked = toggleBgElement.checked;
+ transaction(options.protyle, [{
+ action: "setAttrViewFillColBackgroundColor",
+ avID,
+ blockID,
+ data: checked
+ }], [{
+ action: "setAttrViewFillColBackgroundColor",
+ avID,
+ blockID,
+ data: !checked
+ }]);
+ (options.data.view as IAVKanban).fillColBackgroundColor = checked;
+ })
const toggleFitElement = options.menuElement.querySelector('.b3-switch[data-type="toggle-gallery-fit"]') as HTMLInputElement;
toggleFitElement.addEventListener("change", () => {
const avID = options.blockElement.getAttribute("data-av-id");
diff --git a/app/src/protyle/render/av/render.ts b/app/src/protyle/render/av/render.ts
index 8dede213c..e8195464e 100644
--- a/app/src/protyle/render/av/render.ts
+++ b/app/src/protyle/render/av/render.ts
@@ -638,14 +638,25 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
}
if (operation.action === "setAttrViewCardSize") {
Array.from(protyle.wysiwyg.element.querySelectorAll(`.av[data-av-id="${operation.avID}"]`)).forEach((item: HTMLElement) => {
- item.querySelectorAll(".av__gallery").forEach(galleryItem => {
- galleryItem.classList.remove("av__gallery--small", "av__gallery--big");
- if (operation.data === 0) {
- galleryItem.classList.add("av__gallery--small");
- } else if (operation.data === 2) {
- galleryItem.classList.add("av__gallery--big");
- }
- });
+ if (item.getAttribute("data-av-type") === "kanban") {
+ item.querySelectorAll(".av__kanban-group").forEach(galleryItem => {
+ galleryItem.classList.remove("av__kanban-group--small", "av__kanban-group--big");
+ if (operation.data === 0) {
+ galleryItem.classList.add("av__kanban-group--small");
+ } else if (operation.data === 2) {
+ galleryItem.classList.add("av__kanban-group--big");
+ }
+ });
+ } else {
+ item.querySelectorAll(".av__gallery").forEach(galleryItem => {
+ galleryItem.classList.remove("av__gallery--small", "av__gallery--big");
+ if (operation.data === 0) {
+ galleryItem.classList.add("av__gallery--small");
+ } else if (operation.data === 2) {
+ galleryItem.classList.add("av__gallery--big");
+ }
+ });
+ }
});
return;
}
@@ -691,16 +702,18 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
if (operation.action === "setAttrViewFillColBackgroundColor") {
Array.from(protyle.wysiwyg.element.querySelectorAll(`.av[data-av-id="${operation.avID}"]`)).forEach((avItem: HTMLElement) => {
avItem.querySelectorAll(".av__kanban-group").forEach(item => {
- if (item.getAttribute("style")) {
- let selectBg;
- const nameElement = item.querySelector(".av__group-title .b3-chip") as HTMLElement;
- if (nameElement) {
- selectBg = getComputedStyle(document.documentElement).getPropertyValue(`--b3-font-background${nameElement.style.backgroundColor.slice(-2, -1)}`);
- } else {
- selectBg = getComputedStyle(document.documentElement).getPropertyValue("--b3-border-color");
- }
- item.setAttribute("style", `--b3-av-kanban-border:${selectBg};--b3-av-kanban-bg:${selectBg}29;--b3-av-kanban-content-bg:${selectBg}47;--b3-av-kanban-content-hover-bg:${selectBg}5c;`);
+ if (!operation.data) {
+ item.removeAttribute("style");
+ return;
}
+ let selectBg;
+ const nameElement = item.querySelector(".av__group-title .b3-chip") as HTMLElement;
+ if (nameElement) {
+ selectBg = getComputedStyle(document.documentElement).getPropertyValue(`--b3-font-background${nameElement.style.backgroundColor.slice(-2, -1)}`);
+ } else {
+ selectBg = getComputedStyle(document.documentElement).getPropertyValue("--b3-border-color");
+ }
+ item.setAttribute("style", `--b3-av-kanban-border:${selectBg};--b3-av-kanban-bg:${selectBg}29;--b3-av-kanban-content-bg:${selectBg}47;--b3-av-kanban-content-hover-bg:${selectBg}5c;`);
});
});
return;