Skip to content

Commit

Permalink
🎨 数据库块适配外观和宽度调整
Browse files Browse the repository at this point in the history
  • Loading branch information
@Vanessa219
Vanessa219 committed Oct 14, 2023
1 parent ab67389 commit 25109b9
Show file tree
Hide file tree
Showing 3 changed files with 67 additions and 47 deletions.
51 changes: 29 additions & 22 deletions app/src/protyle/gutter/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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({
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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";
}
});
Expand All @@ -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";
}
});
Expand All @@ -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";
}
});
Expand All @@ -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";
});
}
}, {
Expand All @@ -1665,17 +1666,15 @@ 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";
});
}
}, {
label: window.siyuan.languages.rtl,
icon: "iconRtl",
click: () => {
this.genClick(nodeElements, protyle, (e: HTMLElement) => {
if (!e.classList.contains("NodeAttributeView")) {
if (!e.classList.contains("av")) {
e.style.direction = "rtl";
}
});
Expand All @@ -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 = "";
}
});
}
}]
Expand All @@ -1704,6 +1708,7 @@ export class Gutter {
this.genClick(nodeElements, protyle, (e: HTMLElement) => {
e.style.width = item;
e.style.flex = "none";
resizeAV(e);
});
}
});
Expand Down Expand Up @@ -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();
Expand All @@ -1765,6 +1771,7 @@ export class Gutter {
if (e.style.width) {
e.style.width = "";
e.style.flex = "";
resizeAV(e);
}
});
}
Expand Down
18 changes: 4 additions & 14 deletions app/src/protyle/render/av/render.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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[] = [];
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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;
}
Expand Down
45 changes: 34 additions & 11 deletions app/src/protyle/util/resize.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = "";
}
}
}

0 comments on commit 25109b9

Please sign in to comment.