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

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

Browse source
This commit is contained in:
Vanessa 2023-06-11 22:01:30 +08:00
parent d74dbaa87e
commit 5cad47203a
3 changed files with 41 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,15 @@
.av { .av {
user-select: none; user-select: none;
box-sizing: border-box;
&__gutters {
@extend .protyle-gutters;
position: absolute;
top: 5px;
left: -26px;
opacity: 0;
padding-right: 4px;
}
&__mask { &__mask {
position: fixed; position: fixed;
@ -18,6 +28,11 @@
&__row { &__row {
display: flex; display: flex;
border-bottom: 1px solid var(--b3-theme-surface-lighter); border-bottom: 1px solid var(--b3-theme-surface-lighter);
position: relative;
&:hover .av__gutters {
opacity: 1;
}
&--header .av__cell { &--header .av__cell {
display: flex; display: flex;

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

@ -49,19 +49,22 @@ export const avRender = (element: Element) => {
// body // body
data.rows.forEach((row: IAVRow) => { data.rows.forEach((row: IAVRow) => {
tableHTML += `<div class="av__row" data-id="${row.id}"><div class="av__firstcol"><svg><use xlink:href="#iconUncheck"></use></svg></div>`; tableHTML += `<div class="av__row" data-id="${row.id}">
<div class="av__gutters">
<button><svg><use xlink:href="#iconLine"></use></svg></button>
</div>
<div class="av__firstcol"><svg><use xlink:href="#iconUncheck"></use></svg></div>`;
row.cells.forEach((cell, index) => { row.cells.forEach((cell, index) => {
tableHTML += `<div class="av__cell" data-index="${index}" style="width: ${data.columns[index].width || 200}px;${cell.bgColor ? `background-color:${cell.bgColor};` : ""}${cell.color ? `color:${cell.color};` : ""}">${cell.renderValue?.content || ""}</div>`; tableHTML += `<div class="av__cell" data-index="${index}" style="width: ${data.columns[index].width || 200}px;${cell.bgColor ? `background-color:${cell.bgColor};` : ""}${cell.color ? `color:${cell.color};` : ""}">${cell.renderValue?.content || ""}</div>`;
}); });
tableHTML += "<div></div></div>"; tableHTML += "<div></div></div>";
}); });
const paddingLeft = parseInt(e.parentElement.style.paddingLeft) - 20; const paddingLeft = e.parentElement.style.paddingLeft;
const paddingRight = parseInt(e.parentElement.style.paddingRight) - 20 const paddingRight = e.parentElement.style.paddingRight;
// 48: padding for gutter icon e.style.width = e.parentElement.clientWidth + "px";
e.style.width = (e.parentElement.clientWidth - 48) + "px";
e.style.alignSelf = "center"; e.style.alignSelf = "center";
e.firstElementChild.outerHTML = `<div> e.firstElementChild.outerHTML = `<div>
<div style="padding-left: ${paddingLeft}px;padding-right: ${paddingRight}px"> <div style="padding-left: ${paddingLeft};padding-right: ${paddingRight};">
<div> <div>
<div>tab1</div> <div>tab1</div>
</div> </div>
@ -70,7 +73,7 @@ export const avRender = (element: Element) => {
</div> </div>
</div> </div>
<div class="av__scroll"> <div class="av__scroll">
<div style="padding-left: ${paddingLeft}px;padding-right: ${paddingRight}px;float: left;"> <div style="padding-left: ${paddingLeft};padding-right: ${paddingRight};float: left;">
${tableHTML} ${tableHTML}
<div class="block__icon block__icon--show"> <div class="block__icon block__icon--show">
<div class="fn__space"></div> <div class="fn__space"></div>

17
app/src/protyle/util/resize.ts
View file

@ -3,10 +3,12 @@ import {setPadding} from "../ui/initUI";
import {hasClosestBlock} from "./hasClosest"; import {hasClosestBlock} from "./hasClosest";
import {Constants} from "../../constants"; import {Constants} from "../../constants";
let resizeTimeout: number;
export const resize = (protyle: IProtyle) => { export const resize = (protyle: IProtyle) => {
hideElements(["gutter"], protyle); hideElements(["gutter"], protyle);
setPadding(protyle); setPadding(protyle);
setTimeout(() => { clearTimeout(resizeTimeout);
resizeTimeout = window.setTimeout(() => {
if (typeof echarts !== "undefined") { if (typeof echarts !== "undefined") {
protyle.wysiwyg.element.querySelectorAll('[data-subtype="echarts"], [data-subtype="mindmap"]').forEach((chartItem: HTMLElement) => { protyle.wysiwyg.element.querySelectorAll('[data-subtype="echarts"], [data-subtype="mindmap"]').forEach((chartItem: HTMLElement) => {
const chartInstance = echarts.getInstanceById(chartItem.firstElementChild.nextElementSibling.getAttribute("_echarts_instance_")); const chartInstance = echarts.getInstanceById(chartItem.firstElementChild.nextElementSibling.getAttribute("_echarts_instance_"));
@ -15,6 +17,19 @@ export const resize = (protyle: IProtyle) => {
} }
}); });
} }
protyle.wysiwyg.element.querySelectorAll(".av").forEach((item: HTMLElement) => {
item.style.width = item.parentElement.clientWidth + "px";
if (item.getAttribute("data-render") === "true") {
const paddingLeft = item.parentElement.style.paddingLeft;
const paddingRight = item.parentElement.style.paddingRight;
const avHeaderElement = item.firstElementChild.firstElementChild as HTMLElement;
avHeaderElement.style.paddingLeft = paddingLeft;
avHeaderElement.style.paddingRight = paddingRight;
const avBodyElement = item.querySelector(".av__scroll").firstElementChild as HTMLElement
avBodyElement.style.paddingLeft = paddingLeft;
avBodyElement.style.paddingRight = paddingRight;
}
});
// 保持光标位置不变 https://ld246.com/article/1673704873983/comment/1673765814595#comments // 保持光标位置不变 https://ld246.com/article/1673704873983/comment/1673765814595#comments
if (!protyle.disabled && protyle.toolbar.range) { if (!protyle.disabled && protyle.toolbar.range) {
let rangeRect = protyle.toolbar.range.getBoundingClientRect(); let rangeRect = protyle.toolbar.range.getBoundingClientRect();