🎨 数据库块适配外观和宽度调整
This commit is contained in:
Vanessa
parent
ab67389650
commit
25109b906f
3 changed files with 67 additions and 47 deletions
|
|
@ -38,6 +38,7 @@ import {appearanceMenu} from "../toolbar/Font";
|
|||
import {setPosition} from "../../util/setPosition";
|
||||
import {avRender} from "../render/av/render";
|
||||
import {emitOpenMenu} from "../../plugin/EventBus";
|
||||
import {resizeAV} from "../util/resize";
|
||||
|
||||
export class Gutter {
|
||||
public element: HTMLElement;
|
||||
|
|
@ -710,12 +711,7 @@ export class Gutter {
|
|||
if (!isMobile()) {
|
||||
appearanceElement.lastElementChild.classList.add("b3-menu__submenu--row");
|
||||
}
|
||||
selectsElement.find((item) => {
|
||||
if (!item.classList.contains("NodeAttributeView")) {
|
||||
this.genAlign(selectsElement, protyle);
|
||||
return true;
|
||||
}
|
||||
});
|
||||
this.genAlign(selectsElement, protyle);
|
||||
this.genWidths(selectsElement, protyle);
|
||||
window.siyuan.menus.menu.append(new MenuItem({type: "separator"}).element);
|
||||
window.siyuan.menus.menu.append(new MenuItem({
|
||||
|
|
@ -1515,9 +1511,7 @@ export class Gutter {
|
|||
if (!isMobile()) {
|
||||
appearanceElement.lastElementChild.classList.add("b3-menu__submenu--row");
|
||||
}
|
||||
if (type !== "NodeAttributeView") {
|
||||
this.genAlign([nodeElement], protyle);
|
||||
}
|
||||
this.genAlign([nodeElement], protyle);
|
||||
this.genWidths([nodeElement], protyle);
|
||||
}
|
||||
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,
|
||||
click: () => {
|
||||
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";
|
||||
}
|
||||
});
|
||||
|
|
@ -1632,7 +1629,10 @@ export class Gutter {
|
|||
accelerator: window.siyuan.config.keymap.editor.general.alignCenter.custom,
|
||||
click: () => {
|
||||
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";
|
||||
}
|
||||
});
|
||||
|
|
@ -1643,7 +1643,10 @@ export class Gutter {
|
|||
accelerator: window.siyuan.config.keymap.editor.general.alignRight.custom,
|
||||
click: () => {
|
||||
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";
|
||||
}
|
||||
});
|
||||
|
|
@ -1653,9 +1656,7 @@ export class Gutter {
|
|||
icon: "iconMenu",
|
||||
click: () => {
|
||||
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",
|
||||
click: () => {
|
||||
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",
|
||||
click: () => {
|
||||
this.genClick(nodeElements, protyle, (e: HTMLElement) => {
|
||||
if (!e.classList.contains("NodeAttributeView")) {
|
||||
if (!e.classList.contains("av")) {
|
||||
e.style.direction = "rtl";
|
||||
}
|
||||
});
|
||||
|
|
@ -1687,8 +1686,13 @@ export class Gutter {
|
|||
icon: "iconTrashcan",
|
||||
click: () => {
|
||||
this.genClick(nodeElements, protyle, (e: HTMLElement) => {
|
||||
e.style.textAlign = "";
|
||||
e.style.direction = "";
|
||||
if (e.classList.contains("av")) {
|
||||
e.style.margin = "";
|
||||
resizeAV(e);
|
||||
} else {
|
||||
e.style.textAlign = "";
|
||||
e.style.direction = "";
|
||||
}
|
||||
});
|
||||
}
|
||||
}]
|
||||
|
|
@ -1704,6 +1708,7 @@ export class Gutter {
|
|||
this.genClick(nodeElements, protyle, (e: HTMLElement) => {
|
||||
e.style.width = item;
|
||||
e.style.flex = "none";
|
||||
resizeAV(e);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -1743,12 +1748,13 @@ export class Gutter {
|
|||
});
|
||||
});
|
||||
rangeElement.addEventListener("change", () => {
|
||||
nodeElements.forEach((e) => {
|
||||
nodeElements.forEach((e: HTMLElement) => {
|
||||
operations.push({
|
||||
action: "update",
|
||||
id: e.getAttribute("data-node-id"),
|
||||
data: e.outerHTML
|
||||
});
|
||||
resizeAV(e);
|
||||
});
|
||||
transaction(protyle, operations, undoOperations);
|
||||
window.siyuan.menus.menu.remove();
|
||||
|
|
@ -1765,6 +1771,7 @@ export class Gutter {
|
|||
if (e.style.width) {
|
||||
e.style.width = "";
|
||||
e.style.flex = "";
|
||||
resizeAV(e);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import {getCalcValue} from "./cell";
|
|||
import * as dayjs from "dayjs";
|
||||
import {unicode2Emoji} from "../../../emoji";
|
||||
import {focusBlock} from "../../util/selection";
|
||||
import {resizeAV} from "../../util/resize";
|
||||
|
||||
export const avRender = (element: Element, protyle: IProtyle, cb?: () => void) => {
|
||||
let avElements: Element[] = [];
|
||||
|
|
@ -169,12 +170,9 @@ ${cell.color ? `color:${cell.color};` : ""}">${text}</div>`;
|
|||
<span class="item__text">${item.name}</span>
|
||||
</div>`;
|
||||
});
|
||||
const setWidth = e.style.width.endsWith("%");
|
||||
const paddingLeft = setWidth ? "" : e.parentElement.style.paddingLeft;
|
||||
const paddingRight = setWidth ? "" : e.parentElement.style.paddingRight;
|
||||
setTimeout(() => {
|
||||
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">
|
||||
${tabHTML}
|
||||
<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>
|
||||
<div class="av__scroll">
|
||||
<div style="padding-left: ${paddingLeft};padding-right: ${paddingRight};float: left;">
|
||||
<div style="float: left;">
|
||||
${tableHTML}
|
||||
<div class="av__row--add">
|
||||
<svg><use xlink:href="#iconAdd"></use></svg>
|
||||
|
|
@ -205,16 +203,8 @@ ${cell.color ? `color:${cell.color};` : ""}">${text}</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");
|
||||
resizeAV(e);
|
||||
if (left) {
|
||||
e.querySelector(".av__scroll").scrollLeft = left;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,18 +44,41 @@ export const resize = (protyle: IProtyle) => {
|
|||
}
|
||||
if (abs.padding > MIN_ABS || abs.width > MIN_ABS || isNaN(abs.padding)) {
|
||||
protyle.wysiwyg.element.querySelectorAll(".av").forEach((item: HTMLElement) => {
|
||||
item.style.maxWidth = item.parentElement.clientWidth + "px";
|
||||
if (item.getAttribute("data-render") === "true" && !item.style.width.endsWith("%")) {
|
||||
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;
|
||||
}
|
||||
resizeAV(item);
|
||||
});
|
||||
}
|
||||
}, 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 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;
|
||||
item.style.alignSelf = "center";
|
||||
if (item.parentElement.clientWidth > 0) {
|
||||
item.style.width = item.parentElement.clientWidth + "px";
|
||||
item.style.maxWidth = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue