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/8765

Browse source
This commit is contained in:
Vanessa 2023-07-31 23:58:45 +08:00
parent 78c2cfe206
commit 9e57253528
2 changed files with 64 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

24
app/src/assets/scss/business/_custom.scss
View file

@ -28,9 +28,31 @@
}
.b3-text-field--text {
background-color: transparent;
cursor: pointer;
transition: var(--b3-transition);
height: 34px;
background-color: transparent;
&:hover {
background-color: var(--b3-theme-background);
}
}
.custom-attr__avarrow {
height: 12px;
width: 12px;
color: var(--b3-theme-on-surface);
margin: 0 5px;
flex-shrink: 0;
align-self: center;
}
.custom-attr__avvalue {
cursor: pointer;
transition: var(--b3-transition);
border-radius: var(--b3-border-radius);
padding: 4px 8px;
line-height: 26px;
&:hover {
background-color: var(--b3-theme-background);

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

@ -20,7 +20,10 @@ export const avRender = (element: Element, cb?: () => void) => {
if (e.getAttribute("data-render") === "true") {
return;
}
fetchPost("/api/av/renderAttributeView", {id: e.getAttribute("data-av-id"), nodeID: e.getAttribute("data-node-id")}, (response) => {
fetchPost("/api/av/renderAttributeView", {
id: e.getAttribute("data-av-id"),
nodeID: e.getAttribute("data-node-id")
}, (response) => {
const data = response.data.view as IAVTable;
// header
let tableHTML = '<div class="av__row av__row--header"><div class="av__firstcol"><svg style="height: 32px"><use xlink:href="#iconUncheck"></use></svg></div>';
@ -215,10 +218,9 @@ const genAVValueHTML = (value: IAVCellValue) => {
});
break;
case "date":
html = `<input value="${dayjs(value.date.content).format("YYYY-MM-DD HH:mm")}" type="datetime-local" class="b3-text-field b3-text-field--text fn__flex-1">`;
html = `${dayjs(value.date.content).format("YYYY-MM-DD HH:mm")}`;
if (value.date.hasEndDate) {
html += `<span class="fn__space"></span>
<input value="${dayjs(value.date.content2).format("YYYY-MM-DD HH:mm")}" type="datetime-local" class="b3-text-field b3-text-field--text fn__flex-1">`;
html += `<svg class="custom-attr__avarrow"><use xlink:href="#iconForward"></use></svg>${dayjs(value.date.content2).format("YYYY-MM-DD HH:mm")}`;
}
break;
case "url":
@ -237,8 +239,9 @@ export const renderAVAttribute = (element: HTMLElement, id: string) => {
type: TAVCol,
name: string
},
values: IAVCellValue[]
values: { keyID: string, id: string, blockID: string, type?: TAVCol & IAVCellValue } []
}[],
avID: string
avName: string
}) => {
html += `<div class="block__logo custom-attr__avheader">
@ -251,12 +254,44 @@ export const renderAVAttribute = (element: HTMLElement, id: string) => {
<svg><use xlink:href="#${getColIconByType(item.key.type)}"></use></svg>
<span>${item.key.name}</span>
</div>
<div class="fn__flex-1 fn__flex">
<div data-av-id="${table.avID}" data-key-id="${item.values[0].keyID}" data-block-id="${item.values[0].blockID}" data-block-id="${item.values[0].id}" data-type="${item.values[0].type}"
class="fn__flex-1 fn__flex${["url", "text", "number"].includes(item.values[0].type) ? "" : " custom-attr__avvalue"}">
${genAVValueHTML(item.values[0])}
</div>
</div>`;
});
});
element.innerHTML = html;
element.querySelectorAll(".b3-text-field--text").forEach((item: HTMLInputElement) => {
item.addEventListener("change", () => {
let value
if (item.parentElement.dataset.type === "url") {
value = {
url: {
content: item.value
}
}
} else if (item.parentElement.dataset.type === "text") {
value = {
text: {
content: item.value
}
}
} else if (item.parentElement.dataset.type === "number") {
value = {
number: {
content: parseFloat(item.value)
}
}
}
fetchPost("/api/av/setAttributeViewBlockAttr", {
avID: item.parentElement.dataset.avId,
keyID: item.parentElement.dataset.keyId,
rowID: item.parentElement.dataset.blockId,
cellID: id,
value
})
})
})
});
};