Skip to content

Commit

Permalink
🎨 fix #11295
Browse files Browse the repository at this point in the history
  • Loading branch information
@Vanessa219
Vanessa219 committed May 7, 2024
1 parent 1ff02ee commit 47a1484
Show file tree
Hide file tree
Showing 2 changed files with 47 additions and 36 deletions.
12 changes: 7 additions & 5 deletions app/src/protyle/preview/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {processRender} from "../util/processCode";
import {highlightRender} from "../render/highlightRender";
import {speechRender} from "../render/speechRender";
import {avRender} from "../render/av/render";
import {getPadding} from "../ui/initUI";

export class Preview {
public element: HTMLElement;
Expand All @@ -33,10 +34,6 @@ export class Preview {
if (protyle.options.classes.preview) {
previewElement.classList.add(protyle.options.classes.preview);
}
if (protyle.wysiwyg.element.style.padding) {
previewElement.style.padding = protyle.wysiwyg.element.style.padding;
}

const actions = protyle.options.preview.actions;
const actionElement = document.createElement("div");
actionElement.className = "protyle-preview__action";
Expand All @@ -49,7 +46,7 @@ export class Preview {
}
switch (action) {
case "desktop":
actionHtml.push(`<button type="button"${protyle.wysiwyg.element.style.padding ? ' class="protyle-preview__action--current"' : ""} data-type="desktop">Desktop</button>`);
actionHtml.push('<button type="button" class="protyle-preview__action--current" data-type="desktop">Desktop</button>');
break;
case "tablet":
actionHtml.push('<button type="button" data-type="tablet">Tablet</button>');
Expand Down Expand Up @@ -153,6 +150,11 @@ export class Preview {
if (this.element.style.display === "none") {
return;
}
if (this.element.querySelector('.protyle-preview__action [data-type="desktop"]')?.classList.contains("protyle-preview__action--current")) {
const padding = getPadding(protyle);
this.previewElement.style.padding = `${padding.top}px ${padding.left}px ${padding.bottom}px ${padding.right}px`;
}

let loadingElement = this.element.querySelector(".fn__loading");
if (!loadingElement) {
this.element.insertAdjacentHTML("beforeend", `<div style="flex-direction: column;" class="fn__loading">
Expand Down
71 changes: 40 additions & 31 deletions app/src/protyle/ui/initUI.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {lineNumberRender} from "../render/highlightRender";
export const initUI = (protyle: IProtyle) => {
protyle.contentElement = document.createElement("div");
protyle.contentElement.className = "protyle-content";
protyle.contentElement.innerHTML = "<div class=\"protyle-top\"></div>";
protyle.contentElement.innerHTML = '<div class="protyle-top"></div>';
if (protyle.options.render.background) {
protyle.contentElement.firstElementChild.appendChild(protyle.background.element);
}
Expand Down Expand Up @@ -108,39 +108,13 @@ export const setPadding = (protyle: IProtyle) => {
};
}
const oldLeft = parseInt(protyle.wysiwyg.element.style.paddingLeft);
let left = 16;
let right = 24;
if (!isMobile()) {
let isFullWidth = protyle.wysiwyg.element.getAttribute(Constants.CUSTOM_SY_FULLWIDTH);
if (!isFullWidth) {
isFullWidth = window.siyuan.config.editor.fullWidth ? "true" : "false";
}
let padding = (protyle.element.clientWidth - Constants.SIZE_EDITOR_WIDTH) / 2;
if (isFullWidth === "false" && padding > 96) {
if (padding > Constants.SIZE_EDITOR_WIDTH) {
// 超宽屏调整 https://ld246.com/article/1668266637363
padding = protyle.element.clientWidth * .382 / 1.382;
}
padding = Math.ceil(padding);
left = padding;
right = padding;
} else if (protyle.element.clientWidth > Constants.SIZE_EDITOR_WIDTH) {
left = 96;
right = 96;
}
}
let bottomHeight = "16px";
if (protyle.options.typewriterMode) {
if (isMobile()) {
bottomHeight = window.innerHeight / 5 + "px";
} else {
bottomHeight = protyle.element.clientHeight / 2 + "px";
}
}
const padding = getPadding(protyle);
const left = padding.left;
const right = padding.right;
if (protyle.options.backlinkData) {
protyle.wysiwyg.element.style.padding = `4px ${left}px 4px ${right}px`;
} else {
protyle.wysiwyg.element.style.padding = `16px ${left}px ${bottomHeight} ${right}px`;
protyle.wysiwyg.element.style.padding = `${padding.top}px ${left}px ${padding.bottom}px ${right}px`;
}
if (protyle.options.render.background) {
protyle.background.element.querySelector(".protyle-background__ia").setAttribute("style", `margin-left:${left}px;margin-right:${left}px`);
Expand All @@ -162,3 +136,38 @@ export const setPadding = (protyle: IProtyle) => {
padding: Math.abs(oldLeft - parseInt(protyle.wysiwyg.element.style.paddingLeft))
};
};

export const getPadding = (protyle: IProtyle) => {
let left = 16;
let right = 24;
let bottom = 16;
if (protyle.options.typewriterMode) {
if (isMobile()) {
bottom = window.innerHeight / 5;
} else {
bottom = protyle.element.clientHeight / 2;
}
}
if (!isMobile()) {
let isFullWidth = protyle.wysiwyg.element.getAttribute(Constants.CUSTOM_SY_FULLWIDTH);
if (!isFullWidth) {
isFullWidth = window.siyuan.config.editor.fullWidth ? "true" : "false";
}
let padding = (protyle.element.clientWidth - Constants.SIZE_EDITOR_WIDTH) / 2;
if (isFullWidth === "false" && padding > 96) {
if (padding > Constants.SIZE_EDITOR_WIDTH) {
// 超宽屏调整 https://ld246.com/article/1668266637363
padding = protyle.element.clientWidth * .382 / 1.382;
}
padding = Math.ceil(padding);
left = padding;
right = padding;
} else if (protyle.element.clientWidth > Constants.SIZE_EDITOR_WIDTH) {
left = 96;
right = 96;
}
}
return {
left, right, bottom, top: 16
}
}

0 comments on commit 47a1484

Please sign in to comment.