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

✨ https://github.com/siyuan-note/siyuan/issues/8694

Browse source
This commit is contained in:
Vanessa 2023-07-09 23:54:32 +08:00
parent eb65bb4ec0
commit cb907abf9a
12 changed files with 742 additions and 393 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -22,12 +22,11 @@ export const avRender = (element: Element, cb?: () => void) => {
const data = response.data.av as IAV;
// header
let tableHTML = '<div class="av__row av__row--header"><div class="av__firstcol"><svg style="height: 42px"><use xlink:href="#iconUncheck"></use></svg></div>';
let index = 0;
data.columns.forEach((column: IAVColumn) => {
if (column.hidden) {
return;
}
tableHTML += `<div class="av__cell" data-index="${index}" data-id="${column.id}" data-dtype="${column.type}"
tableHTML += `<div class="av__cell" data-col-id="${column.id}" data-dtype="${column.type}"
style="width: ${column.width || "200px"};
${column.wrap ? "" : "white-space: nowrap;"}">
<div draggable="true" class="av__cellheader">
@ -36,7 +35,6 @@ ${column.wrap ? "" : "white-space: nowrap;"}">
</div>
<div class="av__widthdrag"></div>
</div>`;
index++;
});
tableHTML += `<div class="block__icons">
<div class="block__icon block__icon--show" data-type="av-header-add"><svg><use xlink:href="#iconAdd"></use></svg></div>
@ -58,24 +56,28 @@ ${column.wrap ? "" : "white-space: nowrap;"}">
}
let text: string;
if (cell.valueType === "text") {
text = cell.value?.text.content || "";
text = `<span class="av__celltext">${cell.value?.text.content || ""}</span>`;
} else if (cell.valueType === "block") {
text = cell.value?.block.content || "";
text = `<span class="av__celltext">${cell.value?.block.content || ""}</span>`;
} else if (cell.valueType === "number") {
text = cell.value?.number.content || "";
text = `<span class="av__celltext">${cell.value?.number.content || ""}</span>`;
} else if (cell.valueType === "select") {
text = cell.value?.select.content || "";
if (cell.value?.select.content) {
text = `<span class="av__celltext"><span class="b3-chip b3-chip--middle" style="background-color:var(--b3-font-background${cell.value.select.color});color:var(--b3-font-color${cell.value.select.color})">${cell.value.select.content}</span></span>`;
} else {
text = `<span class="av__celltext"></span>`;
}
} else if (cell.valueType === "mSelect") {
text = cell.value?.mSelect.content || "";
text = `<span class="av__celltext">${cell.value?.mSelect.content || ""}</span>`;
} else if (cell.valueType === "date") {
text = cell.value?.date.content || "";
text = `<span class="av__celltext">${cell.value?.date.content || ""}</span>`;
}
tableHTML += `<div class="av__cell" data-id="${cell.id}" data-index="${index}"
tableHTML += `<div class="av__cell" data-id="${cell.id}" data-col-id="${data.columns[index].id}"
${cell.valueType === "block" ? 'data-block-id="' + (cell.value.block.id || "") + '"' : ""}
style="width: ${data.columns[index].width || "200px"};
${cell.bgColor ? `background-color:${cell.bgColor};` : ""}
${data.columns[index].wrap ? "" : "white-space: nowrap;"}
${cell.color ? `color:${cell.color};` : ""}"><span class="av__celltext">${text}</span></div>`;
${cell.color ? `color:${cell.color};` : ""}">${text}</div>`;
});
tableHTML += "<div></div></div>";
});
@ -146,13 +148,12 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
});
} else if (operation.action === "setAttrViewColWidth") {
Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-av-id="${avId}"]`)).forEach((item: HTMLElement) => {
const cellElement = item.querySelector(`.av__cell[data-id="${operation.id}"]`) as HTMLElement;
const cellElement = item.querySelector(`.av__cell[data-col-id="${operation.id}"]`) as HTMLElement;
if (!cellElement || cellElement.style.width === operation.data) {
return;
}
const index = cellElement.dataset.index;
item.querySelectorAll(".av__row").forEach(rowItem => {
(rowItem.querySelector(`[data-index="${index}"]`) as HTMLElement).style.width = operation.data;
(rowItem.querySelector(`[data-col-id="${operation.id}"]`) as HTMLElement).style.width = operation.data;
});
});
} else if (operation.action === "setAttrView" && typeof operation.data.name === "string") {