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 {
padding: 5px;
flex-shrink: 0;
overflow: hidden;
border-right: 1px solid var(--b3-theme-surface-lighter)
}
@ -116,6 +117,7 @@
.b3-menu {
width: 300px;
max-height: 70vh;
.block__icon {
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.addItem({
label: `<div class="fn__flex" style="margin-bottom: 4px"><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>`,
click() {
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.style.whiteSpace === "nowrap" ? "" : " checked"}></div>`,
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();

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

@ -28,7 +28,9 @@ export const avRender = (element: Element, cb?: () => void) => {
if (column.hidden) {
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>
<span>${column.name}</span>
</div>`;
@ -66,7 +68,12 @@ export const avRender = (element: Element, cb?: () => void) => {
} else if (cell.valueType === "date") {
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>";
});