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

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

Browse source
This commit is contained in:
Vanessa 2023-12-24 22:53:58 +08:00
parent 318156f25d
commit 4e87c679bb
2 changed files with 44 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

6
app/src/protyle/render/av/cell.ts
View file

@ -560,10 +560,10 @@ export const renderCell = (cellValue: IAVCellValue, wrap: boolean) => {
text = `<span class="av__celltext av__celltext--url" data-type="${cellValue.type}"${urlAttr}>${urlContent}</span>`; text = `<span class="av__celltext av__celltext--url" data-type="${cellValue.type}"${urlAttr}>${urlContent}</span>`;
} else if (cellValue.type === "block") { } else if (cellValue.type === "block") {
if (cellValue?.isDetached) { if (cellValue?.isDetached) {
text = `<span class="av__celltext${cellValue?.isDetached ? "" : " av__celltext--ref"}">${cellValue.block.content || ""}</span> text = `<span class="av__celltext">${cellValue.block.content || ""}</span>
<span class="b3-chip b3-chip--info b3-chip--small" data-type="block-more">${window.siyuan.languages.more}</span>`; <span class="b3-chip b3-chip--info b3-chip--small" data-type="block-more">${window.siyuan.languages.more}</span>`;
} else { } else {
text = `<span data-type="block-ref" data-id="${cellValue.block.id}" data-subtype="s" class="av__celltext${cellValue?.isDetached ? "" : " av__celltext--ref"}">${cellValue.block.content || ""}</span> text = `<span data-type="block-ref" data-id="${cellValue.block.id}" data-subtype="s" class="av__celltext av__celltext--ref">${cellValue.block.content || ""}</span>
<span class="b3-chip b3-chip--info b3-chip--small popover__block" data-id="${cellValue.block.id}" data-type="block-more">${window.siyuan.languages.update}</span>`; <span class="b3-chip b3-chip--info b3-chip--small popover__block" data-id="${cellValue.block.id}" data-type="block-more">${window.siyuan.languages.update}</span>`;
} }
} else if (cellValue.type === "number") { } else if (cellValue.type === "number") {
@ -601,7 +601,7 @@ export const renderCell = (cellValue: IAVCellValue, wrap: boolean) => {
text += `<svg class="av__checkbox"><use xlink:href="#icon${cellValue?.checkbox?.checked ? "Check" : "Uncheck"}"></use></svg>`; text += `<svg class="av__checkbox"><use xlink:href="#icon${cellValue?.checkbox?.checked ? "Check" : "Uncheck"}"></use></svg>`;
} else if (cellValue.type === "relation") { } else if (cellValue.type === "relation") {
cellValue?.relation?.contents?.forEach((item, index) => { cellValue?.relation?.contents?.forEach((item, index) => {
text += `<span data-id="${cellValue?.relation?.blockIDs[index]}">${item}</span>`; text += `<span class="av__celltext--ref" style="margin-right: 8px" data-id="${cellValue?.relation?.blockIDs[index]}">${item}</span>`;
}) })
} }
if (["text", "template", "url", "email", "phone", "number", "date", "created", "updated"].includes(cellValue.type) && if (["text", "template", "url", "email", "phone", "number", "date", "created", "updated"].includes(cellValue.type) &&

62
app/src/protyle/render/av/relation.ts
View file

@ -174,6 +174,27 @@ export const toggleUpdateRelationBtn = (menuItemsElement: HTMLElement, avId: str
} }
} }
const genSelectItemHTML = (type: "selected" | "empty" | "unselect", id?: string, text?: string) => {
if (type === "selected") {
return `<button data-id="${id}" data-type="setRelationCell" class="b3-menu__item" draggable="true">
<svg class="b3-menu__icon"><use xlink:href="#iconDrag"></use></svg>
<span class="b3-menu__label">${text}</span>
<svg class="b3-menu__action"><use xlink:href="#iconMin"></use></svg>
</button>`
}
if (type === "empty") {
return `<button class="b3-menu__item">
<span class="b3-menu__label">${window.siyuan.languages.emptyContent}</span>
</button>`
}
if (type == "unselect") {
return `<button data-id="${id}" class="b3-menu__item" data-type="setRelationCell">
<span class="b3-menu__label">${text}</span>
<svg class="b3-menu__action"><use xlink:href="#iconAdd"></use></svg>
</button>`
}
}
export const bindRelationEvent = (options: { export const bindRelationEvent = (options: {
protyle: IProtyle, protyle: IProtyle,
data: IAV, data: IAV,
@ -189,30 +210,29 @@ export const bindRelationEvent = (options: {
avData.view.columns.find((item, index) => { avData.view.columns.find((item, index) => {
if (item.type === "block") { if (item.type === "block") {
cellIndex = index cellIndex = index
return; return true;
} }
}) })
let html = "" let html = ""
let selectHTML = "" let selectHTML = ""
avData.view.rows.forEach((item) => { hasIds.forEach(hasId => {
const text = item.cells[cellIndex].value.block.content || item.cells[cellIndex].value.block.id; if (hasId) {
if (hasIds.includes(item.id)) { avData.view.rows.find((item) => {
selectHTML += `<button data-id="${item.id}" data-type="setRelationCell" data-type="setRelationCell" class="b3-menu__item" draggable="true"> if (item.id === hasId) {
<svg class="b3-menu__icon"><use xlink:href="#iconDrag"></use></svg> selectHTML += genSelectItemHTML("selected", item.id, item.cells[cellIndex].value.block.content || item.cells[cellIndex].value.block.id)
<span class="b3-menu__label">${text}</span> return true
</button>` }
} else { })
html += `<button data-id="${item.id}" class="b3-menu__item" data-type="setRelationCell">
<span class="b3-menu__label">${text}</span>
</button>`
} }
}) })
const empty = `<button class="b3-menu__item"> avData.view.rows.forEach((item) => {
<span class="b3-menu__label">${window.siyuan.languages.emptyContent}</span> if (!hasIds.includes(item.id)) {
</button>` html += genSelectItemHTML("unselect", item.id, item.cells[cellIndex].value.block.content || item.cells[cellIndex].value.block.id)
options.menuElement.innerHTML = `<div class="b3-menu__items">${selectHTML || empty} }
})
options.menuElement.innerHTML = `<div class="b3-menu__items">${selectHTML || genSelectItemHTML("empty")}
<button class="b3-menu__separator"></button> <button class="b3-menu__separator"></button>
${html || empty}</div>` ${html || genSelectItemHTML("empty")}</div>`
}) })
} }
@ -258,9 +278,9 @@ export const setRelationCell = (protyle: IProtyle, data: IAV, nodeElement: HTMLE
} }
ids.splice(ids.indexOf(targetId), 1); ids.splice(ids.indexOf(targetId), 1);
separatorElement.after(target); separatorElement.after(target);
// TODO target.outerHTML = genSelectItemHTML("unselect", targetId, target.querySelector(".b3-menu__label").textContent);
if (!separatorElement.previousElementSibling) { if (!separatorElement.previousElementSibling) {
separatorElement.insertAdjacentHTML("beforebegin", empty); separatorElement.insertAdjacentHTML("beforebegin", genSelectItemHTML("empty"));
} }
} else { } else {
if (!separatorElement.previousElementSibling.getAttribute("data-id")) { if (!separatorElement.previousElementSibling.getAttribute("data-id")) {
@ -268,9 +288,9 @@ export const setRelationCell = (protyle: IProtyle, data: IAV, nodeElement: HTMLE
} }
ids.push(targetId); ids.push(targetId);
separatorElement.before(target); separatorElement.before(target);
// TODO target.outerHTML = genSelectItemHTML("selected", targetId, target.querySelector(".b3-menu__label").textContent);
if (!separatorElement.nextElementSibling) { if (!separatorElement.nextElementSibling) {
separatorElement.insertAdjacentHTML("afterend", empty); separatorElement.insertAdjacentHTML("afterend", genSelectItemHTML("empty"));
} }
} }
updateCellsValue(protyle, nodeElement, ids); updateCellsValue(protyle, nodeElement, ids);