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

🎨 数据库块适配外观和宽度调整

Browse Source
This commit is contained in:
Vanessa 2023-10-14 10:49:35 +08:00
parent ab67389650
commit 25109b906f
3 changed files with 67 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
app/src/protyle/gutter/index.ts
View File

@ -38,6 +38,7 @@ import {appearanceMenu} from "../toolbar/Font";
import {setPosition} from "../../util/setPosition"; import {setPosition} from "../../util/setPosition";
import {avRender} from "../render/av/render"; import {avRender} from "../render/av/render";
import {emitOpenMenu} from "../../plugin/EventBus"; import {emitOpenMenu} from "../../plugin/EventBus";
import {resizeAV} from "../util/resize";
export class Gutter { export class Gutter {
public element: HTMLElement; public element: HTMLElement;
@ -710,12 +711,7 @@ export class Gutter {
if (!isMobile()) { if (!isMobile()) {
appearanceElement.lastElementChild.classList.add("b3-menu__submenu--row"); appearanceElement.lastElementChild.classList.add("b3-menu__submenu--row");
} }
selectsElement.find((item) => {
if (!item.classList.contains("NodeAttributeView")) {
this.genAlign(selectsElement, protyle); this.genAlign(selectsElement, protyle);
return true;
}
});
this.genWidths(selectsElement, protyle); this.genWidths(selectsElement, protyle);
window.siyuan.menus.menu.append(new MenuItem({type: "separator"}).element); window.siyuan.menus.menu.append(new MenuItem({type: "separator"}).element);
window.siyuan.menus.menu.append(new MenuItem({ window.siyuan.menus.menu.append(new MenuItem({
@ -1515,9 +1511,7 @@ export class Gutter {
if (!isMobile()) { if (!isMobile()) {
appearanceElement.lastElementChild.classList.add("b3-menu__submenu--row"); appearanceElement.lastElementChild.classList.add("b3-menu__submenu--row");
} }
if (type !== "NodeAttributeView") {
this.genAlign([nodeElement], protyle); this.genAlign([nodeElement], protyle);
}
this.genWidths([nodeElement], protyle); this.genWidths([nodeElement], protyle);
} }
window.siyuan.menus.menu.append(new MenuItem({type: "separator"}).element); window.siyuan.menus.menu.append(new MenuItem({type: "separator"}).element);
@ -1621,7 +1615,10 @@ export class Gutter {
accelerator: window.siyuan.config.keymap.editor.general.alignLeft.custom, accelerator: window.siyuan.config.keymap.editor.general.alignLeft.custom,
click: () => { click: () => {
this.genClick(nodeElements, protyle, (e: HTMLElement) => { this.genClick(nodeElements, protyle, (e: HTMLElement) => {
if (!e.classList.contains("NodeAttributeView")) { if (e.classList.contains("av")) {
e.style.margin = ""
resizeAV(e);
} else {
e.style.textAlign = "left"; e.style.textAlign = "left";
} }
}); });
@ -1632,7 +1629,10 @@ export class Gutter {
accelerator: window.siyuan.config.keymap.editor.general.alignCenter.custom, accelerator: window.siyuan.config.keymap.editor.general.alignCenter.custom,
click: () => { click: () => {
this.genClick(nodeElements, protyle, (e: HTMLElement) => { this.genClick(nodeElements, protyle, (e: HTMLElement) => {
if (!e.classList.contains("NodeAttributeView")) { if (e.classList.contains("av")) {
e.style.margin = "0 auto";
resizeAV(e);
} else {
e.style.textAlign = "center"; e.style.textAlign = "center";
} }
}); });
@ -1643,7 +1643,10 @@ export class Gutter {
accelerator: window.siyuan.config.keymap.editor.general.alignRight.custom, accelerator: window.siyuan.config.keymap.editor.general.alignRight.custom,
click: () => { click: () => {
this.genClick(nodeElements, protyle, (e: HTMLElement) => { this.genClick(nodeElements, protyle, (e: HTMLElement) => {
if (!e.classList.contains("NodeAttributeView")) { if (e.classList.contains("av")) {
e.style.margin = "0 0 0 auto";
resizeAV(e);
} else {
e.style.textAlign = "right"; e.style.textAlign = "right";
} }
}); });
@ -1653,9 +1656,7 @@ export class Gutter {
icon: "iconMenu", icon: "iconMenu",
click: () => { click: () => {
this.genClick(nodeElements, protyle, (e: HTMLElement) => { this.genClick(nodeElements, protyle, (e: HTMLElement) => {
if (!e.classList.contains("NodeAttributeView")) {
e.style.textAlign = "justify"; e.style.textAlign = "justify";
}
}); });
} }
}, { }, {
@ -1665,9 +1666,7 @@ export class Gutter {
icon: "iconLtr", icon: "iconLtr",
click: () => { click: () => {
this.genClick(nodeElements, protyle, (e: HTMLElement) => { this.genClick(nodeElements, protyle, (e: HTMLElement) => {
if (!e.classList.contains("NodeAttributeView")) {
e.style.direction = "ltr"; e.style.direction = "ltr";
}
}); });
} }
}, { }, {
@ -1675,7 +1674,7 @@ export class Gutter {
icon: "iconRtl", icon: "iconRtl",
click: () => { click: () => {
this.genClick(nodeElements, protyle, (e: HTMLElement) => { this.genClick(nodeElements, protyle, (e: HTMLElement) => {
if (!e.classList.contains("NodeAttributeView")) { if (!e.classList.contains("av")) {
e.style.direction = "rtl"; e.style.direction = "rtl";
} }
}); });
@ -1687,8 +1686,13 @@ export class Gutter {
icon: "iconTrashcan", icon: "iconTrashcan",
click: () => { click: () => {
this.genClick(nodeElements, protyle, (e: HTMLElement) => { this.genClick(nodeElements, protyle, (e: HTMLElement) => {
if (e.classList.contains("av")) {
e.style.margin = "";
resizeAV(e);
} else {
e.style.textAlign = ""; e.style.textAlign = "";
e.style.direction = ""; e.style.direction = "";
}
}); });
} }
}] }]
@ -1704,6 +1708,7 @@ export class Gutter {
this.genClick(nodeElements, protyle, (e: HTMLElement) => { this.genClick(nodeElements, protyle, (e: HTMLElement) => {
e.style.width = item; e.style.width = item;
e.style.flex = "none"; e.style.flex = "none";
resizeAV(e);
}); });
} }
}); });
@ -1743,12 +1748,13 @@ export class Gutter {
}); });
}); });
rangeElement.addEventListener("change", () => { rangeElement.addEventListener("change", () => {
nodeElements.forEach((e) => { nodeElements.forEach((e: HTMLElement) => {
operations.push({ operations.push({
action: "update", action: "update",
id: e.getAttribute("data-node-id"), id: e.getAttribute("data-node-id"),
data: e.outerHTML data: e.outerHTML
}); });
resizeAV(e);
}); });
transaction(protyle, operations, undoOperations); transaction(protyle, operations, undoOperations);
window.siyuan.menus.menu.remove(); window.siyuan.menus.menu.remove();
@ -1765,6 +1771,7 @@ export class Gutter {
if (e.style.width) { if (e.style.width) {
e.style.width = ""; e.style.width = "";
e.style.flex = ""; e.style.flex = "";
resizeAV(e);
} }
}); });
} }

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

@ -5,6 +5,7 @@ import {getCalcValue} from "./cell";
import * as dayjs from "dayjs"; import * as dayjs from "dayjs";
import {unicode2Emoji} from "../../../emoji"; import {unicode2Emoji} from "../../../emoji";
import {focusBlock} from "../../util/selection"; import {focusBlock} from "../../util/selection";
import {resizeAV} from "../../util/resize";
export const avRender = (element: Element, protyle: IProtyle, cb?: () => void) => { export const avRender = (element: Element, protyle: IProtyle, cb?: () => void) => {
let avElements: Element[] = []; let avElements: Element[] = [];
@ -169,12 +170,9 @@ ${cell.color ? `color:${cell.color};` : ""}">${text}</div>`;
<span class="item__text">${item.name}</span> <span class="item__text">${item.name}</span>
</div>`; </div>`;
}); });
const setWidth = e.style.width.endsWith("%");
const paddingLeft = setWidth ? "" : e.parentElement.style.paddingLeft;
const paddingRight = setWidth ? "" : e.parentElement.style.paddingRight;
setTimeout(() => { setTimeout(() => {
e.firstElementChild.outerHTML = `<div> e.firstElementChild.outerHTML = `<div>
<div class="av__header" style="padding-left: ${paddingLeft};padding-right: ${paddingRight};"> <div class="av__header">
<div class="layout-tab-bar fn__flex"> <div class="layout-tab-bar fn__flex">
${tabHTML} ${tabHTML}
<div class="fn__flex-1"></div> <div class="fn__flex-1"></div>
@ -195,7 +193,7 @@ ${cell.color ? `color:${cell.color};` : ""}">${text}</div>`;
<div class="av__counter fn__none"></div> <div class="av__counter fn__none"></div>
</div> </div>
<div class="av__scroll"> <div class="av__scroll">
<div style="padding-left: ${paddingLeft};padding-right: ${paddingRight};float: left;"> <div style="float: left;">
${tableHTML} ${tableHTML}
<div class="av__row--add"> <div class="av__row--add">
<svg><use xlink:href="#iconAdd"></use></svg> <svg><use xlink:href="#iconAdd"></use></svg>
@ -205,16 +203,8 @@ ${cell.color ? `color:${cell.color};` : ""}">${text}</div>`;
</div> </div>
</div> </div>
</div>`; </div>`;
if (e.parentElement.clientWidth > 0) {
e.style.maxWidth = e.parentElement.clientWidth + "px";
}
if (setWidth) {
e.style.alignSelf = "";
} else {
e.style.width = "";
e.style.alignSelf = "center";
}
e.setAttribute("data-render", "true"); e.setAttribute("data-render", "true");
resizeAV(e);
if (left) { if (left) {
e.querySelector(".av__scroll").scrollLeft = left; e.querySelector(".av__scroll").scrollLeft = left;
} }

33
app/src/protyle/util/resize.ts
View File

@ -44,8 +44,29 @@ export const resize = (protyle: IProtyle) => {
} }
if (abs.padding > MIN_ABS || abs.width > MIN_ABS || isNaN(abs.padding)) { if (abs.padding > MIN_ABS || abs.width > MIN_ABS || isNaN(abs.padding)) {
protyle.wysiwyg.element.querySelectorAll(".av").forEach((item: HTMLElement) => { protyle.wysiwyg.element.querySelectorAll(".av").forEach((item: HTMLElement) => {
item.style.maxWidth = item.parentElement.clientWidth + "px"; resizeAV(item);
if (item.getAttribute("data-render") === "true" && !item.style.width.endsWith("%")) { });
}
}, Constants.TIMEOUT_TRANSITION); // 等待 setPadding 动画结束
};
export const resizeAV = (item: HTMLElement) => {
if (!item.classList.contains("av") || item.getAttribute("data-render") !== "true") {
return
}
if (item.style.width.endsWith("%") || item.style.margin) {
const avHeaderElement = item.firstElementChild.firstElementChild as HTMLElement;
avHeaderElement.style.paddingLeft = "";
avHeaderElement.style.paddingRight = "";
const avBodyElement = item.querySelector(".av__scroll").firstElementChild as HTMLElement;
avBodyElement.style.paddingLeft = "";
avBodyElement.style.paddingRight = "";
item.style.alignSelf = "";
if (!item.style.width.endsWith("%")) {
item.style.width = ""
item.style.maxWidth = "100%";
}
} else {
const paddingLeft = item.parentElement.style.paddingLeft; const paddingLeft = item.parentElement.style.paddingLeft;
const paddingRight = item.parentElement.style.paddingRight; const paddingRight = item.parentElement.style.paddingRight;
const avHeaderElement = item.firstElementChild.firstElementChild as HTMLElement; const avHeaderElement = item.firstElementChild.firstElementChild as HTMLElement;
@ -54,8 +75,10 @@ export const resize = (protyle: IProtyle) => {
const avBodyElement = item.querySelector(".av__scroll").firstElementChild as HTMLElement; const avBodyElement = item.querySelector(".av__scroll").firstElementChild as HTMLElement;
avBodyElement.style.paddingLeft = paddingLeft; avBodyElement.style.paddingLeft = paddingLeft;
avBodyElement.style.paddingRight = paddingRight; avBodyElement.style.paddingRight = paddingRight;
item.style.alignSelf = "center";
if (item.parentElement.clientWidth > 0) {
item.style.width = item.parentElement.clientWidth + "px";
item.style.maxWidth = "";
}
} }
});
} }
}, Constants.TIMEOUT_TRANSITION); // 等待 setPadding 动画结束
};