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

🎨 Use HTML attributes data-wrap to set the cell wrapping style (#9814)

Browse source
This commit is contained in:
Yingyi / 颖逸 2023-12-05 22:41:12 +08:00 • committed by GitHub
parent 7c69313a23
commit 1b89dc0ee2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

12
app/src/assets/scss/business/_av.scss
View file

@ -95,6 +95,10 @@
cursor: pointer;
}
&__body {
float: left;
}
&__row {
display: flex;
border-bottom: 1px solid var(--b3-theme-surface-lighter);
@ -244,6 +248,14 @@
top: 5.5px;
}
&[data-wrap="true"] {
white-space: pre-wrap;
}
&[data-wrap="false"] {
white-space: nowrap;
}
&.dragover__right {
border-right-color: var(--b3-theme-primary-lighter);
}

4
app/src/protyle/render/av/col.ts
View file

@ -386,7 +386,7 @@ export const addAttrViewColAnimation = (options: {
}
let html = "";
if (index === 0) {
html = `<div class="av__cell" data-icon="${options.icon || ""}" data-col-id="${options.id}" data-dtype="${options.type}" style="width: 200px;white-space: nowrap;">
html = `<div class="av__cell" data-icon="${options.icon || ""}" data-col-id="${options.id}" data-dtype="${options.type}" data-wrap="false" style="width: 200px;">
<div draggable="true" class="av__cellheader">
${options.icon ? unicode2Emoji(options.icon, "av__cellheadericon", true) : `<svg class="av__cellheadericon"><use xlink:href="#${getColIconByType(options.type)}"></use></svg>`}
<span class="av__celltext">${options.name}</span>
@ -642,7 +642,7 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
}
menu.addItem({
label: `<label 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"}></label>`,
<input type="checkbox" class="b3-switch fn__flex-center"${cellElement.dataset.wrap === "true" ? " checked" : ""}></label>`,
bind(element) {
const inputElement = element.querySelector("input") as HTMLInputElement;
inputElement.addEventListener("change", () => {

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

@ -93,9 +93,8 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: () => void, v
return;
}
tableHTML += `<div class="av__cell" data-col-id="${column.id}"
data-icon="${column.icon}" data-dtype="${column.type}" data-pin="${column.pin}"
style="width: ${column.width || "200px"};
${column.wrap ? "" : "white-space: nowrap;"}">
data-icon="${column.icon}" data-dtype="${column.type}" data-wrap="${column.wrap}" data-pin="${column.pin}"
style="width: ${column.width || "200px"};">
<div draggable="true" class="av__cellheader">
${column.icon ? unicode2Emoji(column.icon, "av__cellheadericon", true) : `<svg class="av__cellheadericon"><use xlink:href="#${getColIconByType(column.type)}"></use></svg>`}
<span class="av__celltext">${column.name}</span>
@ -192,11 +191,10 @@ style="width: ${column.width || "200px"}">${getCalcValue(column) || '<svg><use x
text += `<span ${cell.valueType !== "number" ? "" : 'style="right:auto;left:5px"'} data-type="copy" class="block__icon"><svg><use xlink:href="#iconCopy"></use></svg></span>`;
}
tableHTML += `<div class="av__cell" data-id="${cell.id}" data-col-id="${data.columns[index].id}"
${cell.valueType === "block" ? 'data-block-id="' + (cell.value.block.id || "") + '"' : ""}
${cell.valueType === "block" ? 'data-block-id="' + (cell.value.block.id || "") + '"' : ""} data-wrap="${data.columns[index].wrap}"
${cell.value?.isDetached ? ' data-detached="true"' : ""}
style="width: ${data.columns[index].width || "200px"};
${cell.bgColor ? `background-color:${cell.bgColor};` : ""}
white-space: ${data.columns[index].wrap ? "pre-wrap" : "nowrap"};
${cell.color ? `color:${cell.color};` : ""}">${text}</div>`;
if (pinIndex === index) {
@ -248,7 +246,7 @@ ${cell.color ? `color:${cell.color};` : ""}">${text}</div>`;
<div class="av__counter fn__none"></div>
</div>
<div class="av__scroll">
<div style="float: left;">
<div class="av__body">
${tableHTML}
<div class="av__row--add">
<div class="av__colsticky">