@@ -221,13 +225,19 @@ export const renderKanban = async (options: {
if (options.renderAll) {
options.blockElement.firstElementChild.outerHTML = `
${genTabHeaderHTML(data, resetData.isSearching || !!resetData.query, !options.protyle.disabled && !hasClosestByAttribute(options.blockElement, "data-type", "NodeBlockQueryEmbed"))}
-
+
${bodyHTML}
${Constants.ZWSP}
`;
} else {
- options.blockElement.querySelector(".av__kanban").innerHTML = bodyHTML;
+ const kanbanElement = options.blockElement.querySelector(".av__kanban");
+ kanbanElement.innerHTML = bodyHTML;
+ if (isSelectGroup) {
+ kanbanElement.classList.add("av__kanban--bg");
+ } else {
+ kanbanElement.classList.remove("av__kanban--bg");
+ }
}
afterRenderGallery({
resetData,
diff --git a/app/src/protyle/render/av/render.ts b/app/src/protyle/render/av/render.ts
index 079fc04ab..093653989 100644
--- a/app/src/protyle/render/av/render.ts
+++ b/app/src/protyle/render/av/render.ts
@@ -727,19 +727,23 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
}
if (operation.action === "setAttrViewFillColBackgroundColor") {
getAVElements(protyle, operation.avID, operation.viewID).forEach((avItem: HTMLElement) => {
+ const hasSelect = avItem.querySelector(".av__group-title .b3-chip");
+ const kanbanElement = avItem.querySelector(".av__kanban");
+ if (operation.data && hasSelect) {
+ kanbanElement.classList.add("av__kanban--bg");
+ } else {
+ kanbanElement.classList.remove("av__kanban--bg");
+ }
avItem.querySelectorAll(".av__kanban-group").forEach(item => {
- if (!operation.data) {
- item.removeAttribute("style");
- return;
- }
- const nameElement = item.querySelector(".av__group-title .b3-chip") as HTMLElement;
- if (nameElement) {
- const colorMatch = nameElement.style.backgroundColor.match(/--b3-font-background(\d+)/);
- if (colorMatch) {
- item.setAttribute("style", `--b3-av-kanban-border: var(--b3-font-background${colorMatch[1]}); --b3-av-kanban-content-hover-bg: var(--b3-av-kanban-border);`);
+ if (operation.data && hasSelect) {
+ const nameElement = item.querySelector(".av__group-title .b3-chip") as HTMLElement;
+ if (nameElement) {
+ item.setAttribute("style", `--b3-av-kanban-background:var(--b3-font-background${nameElement.style.backgroundColor.slice(-2, -1)})`);
+ } else {
+ item.setAttribute("style", "--b3-av-kanban-background: var(--b3-border-color)");
}
} else {
- item.setAttribute("style", "--b3-av-kanban-border: var(--b3-border-color); --b3-av-kanban-content-hover-bg: var(--b3-av-kanban-border);");
+ item.removeAttribute("style");
}
});
});
diff --git a/app/src/protyle/util/editorCommonEvent.ts b/app/src/protyle/util/editorCommonEvent.ts
index 56269d4b0..c6bae428e 100644
--- a/app/src/protyle/util/editorCommonEvent.ts
+++ b/app/src/protyle/util/editorCommonEvent.ts
@@ -602,7 +602,7 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
ghostElement.className = "protyle-wysiwyg protyle-wysiwyg--attr";
const isKanban = blockElement.getAttribute("data-av-type") === "kanban";
if (isKanban) {
- ghostElement.innerHTML = "
";
+ ghostElement.innerHTML = `
`;
}
let galleryElement: HTMLElement;
let cloneGalleryElement = document.createElement("div");
@@ -614,7 +614,7 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
if (isKanban) {
cloneGalleryElement.className = "av__kanban-group";
cloneGalleryElement.setAttribute("style", item.parentElement.parentElement.parentElement.getAttribute("style") || "--b3-av-kanban-content-bg: var(--b3-theme-background);");
- cloneGalleryElement.innerHTML = "
";
+ cloneGalleryElement.innerHTML = '
';
ghostElement.firstElementChild.appendChild(cloneGalleryElement);
} else {
cloneGalleryElement.classList.add("av__gallery");
@@ -628,11 +628,10 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
if (isKanban) {
cloneGalleryElement.firstElementChild.appendChild(cloneItem);
} else {
- cloneItem.querySelector(".av__gallery-fields").setAttribute("style", "background-color: var(--b3-theme-background)");
cloneGalleryElement.appendChild(cloneItem);
}
});
- ghostElement.setAttribute("style", "top:100vh;position:fixed;opacity:.1;padding:0;z-index: 8");
+ ghostElement.setAttribute("style", "left: 1px;top:100vh;position:fixed;opacity:.1;padding:0;z-index: 8");
document.body.append(ghostElement);
event.dataTransfer.setDragImage(ghostElement, -10, -10);
setTimeout(() => {