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

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

Browse source
This commit is contained in:
Vanessa 2023-06-08 10:07:26 +08:00
parent c0b8211eb3
commit c927bf193c
2 changed files with 73 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

79
app/src/protyle/render/av/index.ts
View file

@ -1,4 +1,3 @@
export const avRender = (element: Element) => {
let avElements: Element[] = [];
if (element.getAttribute("data-type") === "NodeAttributeView") {
@ -16,23 +15,77 @@ export const avRender = (element: Element) => {
return;
}
const data = {
filter:{},
title: "table",
filter: {},
sorts: {},
columns:[{
width: "",
icon:"",
id:"",
name:"",
wrap:"",
type:"",
columns: [{
width: 500,
icon: "",
id: "",
name: "columnA",
wrap: false,
type: "",
}, {
width: 500,
icon: "",
id: "",
name: "columnB",
wrap: false,
type: "",
}],
rows:[{
id:"",
cells:[{
value:"",
rows: [{
id: "",
cells: [{
value: "a",
}, {
color: "var(--b3-card-error-color)",
bgColor: "var(--b3-card-error-background)",
value: "a1",
}]
}, {
id: "",
cells: [{
color: "var(--b3-card-success-color)",
bgColor: "var(--b3-card-success-background)",
value: "b",
}, {
value: "b1",
}]
}]
};
let tableHTML = "<div class='fn__flex'>";
data.columns.forEach((column) => {
tableHTML += `<div style="flex-shrink: 0;width: ${column.width}px;">${column.name}</div>`
});
tableHTML += "</div>";
data.rows.forEach((row) => {
tableHTML += "<div class='fn__flex'>";
row.cells.forEach((cell, index) => {
tableHTML += `<div style="flex-shrink: 0;width: ${data.columns[index].width}px;background-color: ${cell.bgColor};color: ${cell.color}">${cell.value}</div>`
});
tableHTML += "</div>";
});
const paddingLeft = e.parentElement.style.paddingLeft;
const paddingRight = e.parentElement.style.paddingRight;
// 10: ::-webkit-scrollbar width
e.style.width = (e.parentElement.clientWidth - 10) + "px";
e.style.alignSelf = "center";
e.firstElementChild.outerHTML = `<div>
<div style="padding-left: ${paddingLeft};padding-right: ${paddingRight}">
<div>
<div>tab1</div>
</div>
<div contenteditable="true">
${data.title}
</div>
</div>
<div class="av__scroll">
<div style="padding-left: ${paddingLeft};padding-right: ${paddingRight};min-width: 100%;float: left;">
${tableHTML}
<div>add</div>
</div>
</div>
</div>`;
e.setAttribute("data-render", "true");
});
}