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

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

Browse source
This commit is contained in:
Vanessa 2023-06-08 12:03:04 +08:00
parent c927bf193c
commit 3791b61059
3 changed files with 56 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

29
app/src/assets/scss/protyle/_wysiwyg.scss
View file

@ -33,8 +33,33 @@
}
&.av {
.av__scroll {
overflow: auto hidden;
.av {
&__scroll {
overflow: auto hidden;
cursor: pointer;
}
&__row {
display: flex;
border-bottom: 1px solid var(--b3-theme-surface-lighter);
}
&__cell {
padding: 5px;
flex-shrink: 0;
border-right: 1px solid var(--b3-theme-surface-lighter)
}
&__firstcol {
input {
margin: 11px 5px;
opacity: 0;
}
&:hover input {
opacity: 1;
}
}
}
}

24
app/src/protyle/render/av/index.ts
View file

@ -53,17 +53,23 @@ export const avRender = (element: Element) => {
}]
}]
};
let tableHTML = "<div class='fn__flex'>";
let tableHTML = '<div class="av__row av__row--header" style="background-color: var(--b3-theme-background)"><div class="av__firstcol"><input style="margin-top: 14px" type="checkbox"></div>';
data.columns.forEach((column) => {
tableHTML += `<div style="flex-shrink: 0;width: ${column.width}px;">${column.name}</div>`
tableHTML += `
<div class="av__cell" style="width: ${column.width}px;">${column.name}</div>`
});
tableHTML += "</div>";
tableHTML += `<div class="block__icons">
<div class="block__icon block__icon--show"><svg><use xlink:href="#iconAdd"></use></svg></div>
<div class="fn__space"></div>
<div class="block__icon block__icon--show"><svg><use xlink:href="#iconMore"></use></svg></div>
</div>
</div>`;
data.rows.forEach((row) => {
tableHTML += "<div class='fn__flex'>";
tableHTML += '<div class="av__row"><div class="av__firstcol"><input type="checkbox"></div>';
row.cells.forEach((cell, index) => {
tableHTML += `<div style="flex-shrink: 0;width: ${data.columns[index].width}px;background-color: ${cell.bgColor};color: ${cell.color}">${cell.value}</div>`
tableHTML += `<div class="av__cell" style="width: ${data.columns[index].width}px;background-color: ${cell.bgColor};color: ${cell.color}">${cell.value}</div>`
});
tableHTML += "</div>";
tableHTML += `<div></div></div>`;
});
const paddingLeft = e.parentElement.style.paddingLeft;
const paddingRight = e.parentElement.style.paddingRight;
@ -82,7 +88,11 @@ export const avRender = (element: Element) => {
<div class="av__scroll">
<div style="padding-left: ${paddingLeft};padding-right: ${paddingRight};min-width: 100%;float: left;">
${tableHTML}
<div>add</div>
<div class="block__icon block__icon--show">
<div class="fn__space"></div>
<svg><use xlink:href="#iconAdd"></use></svg><span class="fn__space"></span>
${window.siyuan.languages.addAttr}
</div>
</div>
</div>
</div>`;

12
app/src/protyle/scroll/event.ts
View file

@ -24,6 +24,18 @@ export const scrollEvent = (protyle: IProtyle, element: HTMLElement) => {
}
}
protyle.wysiwyg.element.querySelectorAll(".av").forEach((item: HTMLElement) => {
if (item.parentElement.classList.contains("protyle-wysiwyg")) {
const headerTop = item.offsetTop - 30 + 56
const headerElement = item.querySelector(".av__row--header") as HTMLElement
if (headerTop < element.scrollTop && headerTop + headerElement.parentElement.clientHeight > element.scrollTop) {
headerElement.style.transform = `translateY(${element.scrollTop - headerTop}px)`;
} else {
headerElement.style.transform = "";
}
}
});
if (!protyle.element.classList.contains("block__edit") && !isMobile()) {
protyle.contentElement.setAttribute("data-scrolltop", element.scrollTop.toString());
}