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

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

Browse source
This commit is contained in:
Vanessa 2025-11-05 12:08:17 +08:00
parent 404068b91b
commit f58587fc09
4 changed files with 52 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

1
app/src/assets/scss/business/_av.scss
View file

@ -978,6 +978,7 @@
gap: 16px;
padding: 16px 1px;
display: flex;
align-items: flex-start;
&-group {
width: 260px;

6
app/src/protyle/render/av/kanban/render.ts
View file

@ -50,8 +50,6 @@ const getKanbanHTML = (data: IAVKanban) => {
}
} else if (item.coverContent) {
galleryHTML += `<div class="${coverClass}"><div class="av__gallery-content">${item.coverContent}</div><div></div></div>`;
} else {
galleryHTML += `<div class="${coverClass}"></div>`;
}
}
galleryHTML += '<div class="av__gallery-fields">';
@ -108,7 +106,7 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value, rowIndex,
</div>`;
});
galleryHTML += `<div class="av__gallery-add" data-type="av-add-bottom"><svg class="svg"><use xlink:href="#iconAdd"></use></svg><span class="fn__space"></span>${window.siyuan.languages.newRow}</div>`;
return `<div class="av__gallery${data.cardSize === 0 ? " av__gallery--small" : (data.cardSize === 2 ? " av__gallery--big" : "")}">
return `<div class="av__gallery av__gallery--small">
${galleryHTML}
</div>
<div class="av__gallery-load${data.cardCount > data.cards.length ? "" : " fn__none"}">
@ -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 += `<div class="av__kanban-group"${selectBg}>
bodyHTML += `<div class="av__kanban-group${group.cardSize === 0 ? " av__kanban-group--small" : (group.cardSize === 2 ? " av__kanban-group--big" : "")}"${selectBg}>
${getKanbanTitleHTML(group, group.cards.length)}
<div data-group-id="${group.id}" data-page-size="${group.pageSize}" data-dtype="${group.groupKey.type}" data-content="${Lute.EscapeHTMLStr(group.groupValue.text?.content)}" class="av__body${group.groupFolded ? " fn__none" : ""}">${getKanbanHTML(group)}</div>
</div>`;

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

@ -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");

47
app/src/protyle/render/av/render.ts
View file

@ -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;