github/siyuan
4
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-05-08 00:49:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Vanessa 2023-07-02 22:37:17 +08:00
parent 739bdc22b9
commit 0ec64b577f
3 changed files with 28 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/src/assets/scss/business/_av.scss
View File

@ -91,6 +91,7 @@
&__cell { &__cell {
padding: 5px; padding: 5px;
flex-shrink: 0; flex-shrink: 0;
overflow: hidden;
border-right: 1px solid var(--b3-theme-surface-lighter) border-right: 1px solid var(--b3-theme-surface-lighter)
} }
@ -116,6 +117,7 @@
.b3-menu { .b3-menu {
width: 300px; width: 300px;
max-height: 70vh;
.block__icon { .block__icon {
line-height: 20px; line-height: 20px;

21
app/src/protyle/render/av/cell.ts
View File

@ -192,10 +192,23 @@ export const showHeaderCellMenu = (protyle: IProtyle, blockElement: HTMLElement,
menu.addSeparator(); menu.addSeparator();
} }
menu.addItem({ menu.addItem({
label: `<div class="fn__flex" style="margin-bottom: 4px"><span>${window.siyuan.languages.wrap}</span><span class="fn__space fn__flex-1"></span> label: `<div class="fn__flex" style="margin: 4px 0"><span>${window.siyuan.languages.wrap}</span><span class="fn__space fn__flex-1"></span>
<input type="checkbox" class="b3-switch fn__flex-center"${cellElement.getAttribute("data-wrap") === "true" ? " checked" : ""}></div>`, <input type="checkbox" class="b3-switch fn__flex-center"${cellElement.style.whiteSpace === "nowrap" ? "" : " checked"}></div>`,
click() { bind(element) {
const inputElement = element.querySelector("input") as HTMLInputElement;
inputElement.addEventListener("change", () => {
transaction(protyle, [{
action: "setAttrViewColWrap",
id: colId,
parentID: avId,
data: inputElement.checked
}], [{
action: "setAttrViewColWrap",
id: colId,
parentID: avId,
data: !inputElement.checked
}]);
});
} }
}); });
const cellRect = cellElement.getBoundingClientRect(); const cellRect = cellElement.getBoundingClientRect();

11
app/src/protyle/render/av/render.ts
View File

@ -28,7 +28,9 @@ export const avRender = (element: Element, cb?: () => void) => {
if (column.hidden) { if (column.hidden) {
return; return;
} }
tableHTML += `<div draggable="true" class="av__cell" data-index="${index}" data-id="${column.id}" data-dtype="${column.type}" data-wrap="${column.wrap}" style="width: ${column.width || 200}px;"> tableHTML += `<div draggable="true" class="av__cell" data-index="${index}" data-id="${column.id}" data-dtype="${column.type}"
style="width: ${column.width || 200}px;
${column.wrap ? "" : "white-space: nowrap;"}">
<svg><use xlink:href="#${column.icon || getColIconByType(column.type)}"></use></svg> <svg><use xlink:href="#${column.icon || getColIconByType(column.type)}"></use></svg>
<span>${column.name}</span> <span>${column.name}</span>
</div>`; </div>`;
@ -66,7 +68,12 @@ export const avRender = (element: Element, cb?: () => void) => {
} else if (cell.valueType === "date") { } else if (cell.valueType === "date") {
text = cell.value?.date.content || ""; text = cell.value?.date.content || "";
} }
tableHTML += `<div class="av__cell" ${cell.valueType === "block" ? 'data-block-id="' + (cell.value.block.id || "") + '"' : ""} data-id="${cell.id}" data-index="${index}" style="width: ${data.columns[index].width || 200}px;${cell.bgColor ? `background-color:${cell.bgColor};` : ""}${cell.color ? `color:${cell.color};` : ""}">${text}</div>`; tableHTML += `<div class="av__cell" data-id="${cell.id}" data-index="${index}"
${cell.valueType === "block" ? 'data-block-id="' + (cell.value.block.id || "") + '"' : ""}
style="width: ${data.columns[index].width || 200}px;
${data.columns[index].wrap ? "" : "white-space: nowrap;"}
${cell.bgColor ? `background-color:${cell.bgColor};` : ""}
${cell.color ? `color:${cell.color};` : ""}">${text}</div>`;
}); });
tableHTML += "<div></div></div>"; tableHTML += "<div></div></div>";
}); });