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

🎨 fix https://github.com/siyuan-note/siyuan/issues/11295

Browse source
This commit is contained in:
Vanessa 2024-05-07 23:13:40 +08:00
parent 1ff02ee9ef
commit 47a14841d8
2 changed files with 47 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

12
app/src/protyle/preview/index.ts
View file

@ -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;
@ -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";
@ -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>');
@ -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">

71
app/src/protyle/ui/initUI.ts
View file

@ -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);
}
@ -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`);
@ -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
}
}