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

🎨 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; gap: 16px;
padding: 16px 1px; padding: 16px 1px;
display: flex; display: flex;
align-items: flex-start;
&-group { &-group {
width: 260px; 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) { } else if (item.coverContent) {
galleryHTML += `<div class="${coverClass}"><div class="av__gallery-content">${item.coverContent}</div><div></div></div>`; 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">'; galleryHTML += '<div class="av__gallery-fields">';
@ -108,7 +106,7 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value, rowIndex,
</div>`; </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>`; 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} ${galleryHTML}
</div> </div>
<div class="av__gallery-load${data.cardCount > data.cards.length ? "" : " fn__none"}"> <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;"`; 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)} ${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 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>`; </div>`;

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

@ -154,24 +154,6 @@ export const bindLayoutEvent = (options: {
}]); }]);
options.data.view.showIcon = checked; 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; const toggleWrapElement = options.menuElement.querySelector('.b3-switch[data-type="toggle-entries-wrap"]') as HTMLInputElement;
toggleWrapElement.addEventListener("change", () => { toggleWrapElement.addEventListener("change", () => {
const avID = options.blockElement.getAttribute("data-av-id"); const avID = options.blockElement.getAttribute("data-av-id");
@ -193,9 +175,27 @@ export const bindLayoutEvent = (options: {
}); });
options.data.view.wrapField = checked; options.data.view.wrapField = checked;
}); });
if (options.data.viewType !== "gallery") { if (options.data.viewType === "table") {
return; 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; const toggleFitElement = options.menuElement.querySelector('.b3-switch[data-type="toggle-gallery-fit"]') as HTMLInputElement;
toggleFitElement.addEventListener("change", () => { toggleFitElement.addEventListener("change", () => {
const avID = options.blockElement.getAttribute("data-av-id"); 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") { if (operation.action === "setAttrViewCardSize") {
Array.from(protyle.wysiwyg.element.querySelectorAll(`.av[data-av-id="${operation.avID}"]`)).forEach((item: HTMLElement) => { Array.from(protyle.wysiwyg.element.querySelectorAll(`.av[data-av-id="${operation.avID}"]`)).forEach((item: HTMLElement) => {
item.querySelectorAll(".av__gallery").forEach(galleryItem => { if (item.getAttribute("data-av-type") === "kanban") {
galleryItem.classList.remove("av__gallery--small", "av__gallery--big"); item.querySelectorAll(".av__kanban-group").forEach(galleryItem => {
if (operation.data === 0) { galleryItem.classList.remove("av__kanban-group--small", "av__kanban-group--big");
galleryItem.classList.add("av__gallery--small"); if (operation.data === 0) {
} else if (operation.data === 2) { galleryItem.classList.add("av__kanban-group--small");
galleryItem.classList.add("av__gallery--big"); } 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; return;
} }
@ -691,16 +702,18 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
if (operation.action === "setAttrViewFillColBackgroundColor") { if (operation.action === "setAttrViewFillColBackgroundColor") {
Array.from(protyle.wysiwyg.element.querySelectorAll(`.av[data-av-id="${operation.avID}"]`)).forEach((avItem: HTMLElement) => { Array.from(protyle.wysiwyg.element.querySelectorAll(`.av[data-av-id="${operation.avID}"]`)).forEach((avItem: HTMLElement) => {
avItem.querySelectorAll(".av__kanban-group").forEach(item => { avItem.querySelectorAll(".av__kanban-group").forEach(item => {
if (item.getAttribute("style")) { if (!operation.data) {
let selectBg; item.removeAttribute("style");
const nameElement = item.querySelector(".av__group-title .b3-chip") as HTMLElement; return;
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;`);
} }
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; return;