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 { .b3-text-field--text {
background-color: transparent;
cursor: pointer; cursor: pointer;
transition: var(--b3-transition); 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 { &:hover {
background-color: var(--b3-theme-background); 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") { if (e.getAttribute("data-render") === "true") {
return; 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; const data = response.data.view as IAVTable;
// header // 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>'; 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; break;
case "date": 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) { if (value.date.hasEndDate) {
html += `<span class="fn__space"></span> html += `<svg class="custom-attr__avarrow"><use xlink:href="#iconForward"></use></svg>${dayjs(value.date.content2).format("YYYY-MM-DD HH:mm")}`;
<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">`;
} }
break; break;
case "url": case "url":
@ -237,8 +239,9 @@ export const renderAVAttribute = (element: HTMLElement, id: string) => {
type: TAVCol, type: TAVCol,
name: string name: string
}, },
values: IAVCellValue[] values: { keyID: string, id: string, blockID: string, type?: TAVCol & IAVCellValue } []
}[], }[],
avID: string
avName: string avName: string
}) => { }) => {
html += `<div class="block__logo custom-attr__avheader"> 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> <svg><use xlink:href="#${getColIconByType(item.key.type)}"></use></svg>
<span>${item.key.name}</span> <span>${item.key.name}</span>
</div> </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])} ${genAVValueHTML(item.values[0])}
</div> </div>
</div>`; </div>`;
}); });
}); });
element.innerHTML = html; 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
})
})
})
}); });
}; };