diff --git a/app/appearance/langs/en_US.json b/app/appearance/langs/en_US.json index 88cf44349..d5c53bbdf 100644 --- a/app/appearance/langs/en_US.json +++ b/app/appearance/langs/en_US.json @@ -1,4 +1,5 @@ { + "adaptiveWidth": "Adaptive Width", "tabLimit": "Tab Limit", "tabLimit1": "Sort by opening time, close the earliest opened tab", "pasteEscaped": "Paste escaped text", diff --git a/app/appearance/langs/es_ES.json b/app/appearance/langs/es_ES.json index 2b8c89b3b..826fdc795 100644 --- a/app/appearance/langs/es_ES.json +++ b/app/appearance/langs/es_ES.json @@ -1,4 +1,5 @@ { + "adaptiveWidth": "Ancho adaptable", "tabLimit": "Límite de la pestaña", "tabLimit1": "Ordenar por hora de apertura, cerrar la primera pestaña abierta", "pasteEscaped": "Pegar texto escapado", diff --git a/app/appearance/langs/fr_FR.json b/app/appearance/langs/fr_FR.json index f9787bf7d..340f468a9 100644 --- a/app/appearance/langs/fr_FR.json +++ b/app/appearance/langs/fr_FR.json @@ -1,4 +1,5 @@ { + "adaptiveWidth": "Largeur adaptative", "tabLimit": "Nombre maximum d'onglets ouverts", "tabLimit1": "Trier par heure d'ouverture, fermer le premier onglet ouvert", "pasteEscaped": "Coller le texte échappé", diff --git a/app/appearance/langs/zh_CHT.json b/app/appearance/langs/zh_CHT.json index 355cfd541..c51e5cc19 100644 --- a/app/appearance/langs/zh_CHT.json +++ b/app/appearance/langs/zh_CHT.json @@ -1,4 +1,5 @@ { + "adaptiveWidth": "自適應寬度", "tabLimit": "頁簽打開最大數量", "tabLimit1": "按照打開時間排序,關閉最早打開的頁簽", "pasteEscaped": "粘貼轉義文本", diff --git a/app/appearance/langs/zh_CN.json b/app/appearance/langs/zh_CN.json index eb105f35e..ff3ffa0fc 100644 --- a/app/appearance/langs/zh_CN.json +++ b/app/appearance/langs/zh_CN.json @@ -1,4 +1,5 @@ { + "fullWidth": "自适应宽度", "tabLimit": "页签打开最大数量", "tabLimit1": "按照打开时间排序,关闭最早打开的页签", "pasteEscaped": "粘贴转义文本", diff --git a/app/src/assets/scss/_protyle.scss b/app/src/assets/scss/_protyle.scss index 3f7d6a65d..dda814e82 100644 --- a/app/src/assets/scss/_protyle.scss +++ b/app/src/assets/scss/_protyle.scss @@ -331,6 +331,7 @@ display: flex; position: absolute; height: 80px; + transition: left .15s cubic-bezier(0, 0, .2, 1) 0ms; .protyle-icons { position: initial; @@ -347,6 +348,7 @@ margin: 34px 16px 0 24px; position: relative; font-size: 16px; + transition: margin .15s cubic-bezier(0, 0, .2, 1) 0ms; &:hover .protyle-title__icon { opacity: 1; diff --git a/app/src/assets/scss/_wysiwyg.scss b/app/src/assets/scss/_wysiwyg.scss index f55f25faa..4930fc43f 100644 --- a/app/src/assets/scss/_wysiwyg.scss +++ b/app/src/assets/scss/_wysiwyg.scss @@ -1,6 +1,7 @@ .protyle-wysiwyg { padding: 34px 16px 16px 24px; cursor: text; + transition: padding .15s cubic-bezier(0, 0, .2, 1) 0ms; &:focus { outline: none; diff --git a/app/src/config/editor.ts b/app/src/config/editor.ts index 60bf4f3cf..afaf86bba 100644 --- a/app/src/config/editor.ts +++ b/app/src/config/editor.ts @@ -2,13 +2,20 @@ import {getAllModels} from "../layout/getAll"; import {setInlineStyle} from "../util/assets"; import {fetchPost} from "../util/fetch"; import {confirmDialog} from "../dialog/confirmDialog"; +import {setPadding} from "../protyle/ui/initUI"; export const editor = { element: undefined as Element, genHTML: () => { let fontFamilyHTML = ""; fontFamilyHTML = ''; - return ` + return ` + + ${window.siyuan.languages.fullWidth} + + + + ${window.siyuan.languages.md12} @@ -146,6 +153,7 @@ export const editor = { const setEditor = () => { fetchPost("/api/setting/setEditor", { + fullWidth: (editor.element.querySelector("#fullWidth") as HTMLInputElement).checked, displayBookmarkIcon: (editor.element.querySelector("#displayBookmarkIcon") as HTMLInputElement).checked, displayNetImgMark: (editor.element.querySelector("#displayNetImgMark") as HTMLInputElement).checked, codeSyntaxHighlightLineNum: (editor.element.querySelector("#codeSyntaxHighlightLineNum") as HTMLInputElement).checked, @@ -186,6 +194,7 @@ export const editor = { window.siyuan.config.editor = editor; getAllModels().editor.forEach((item) => { item.editor.reload(); + setPadding(item.editor.protyle); }); setInlineStyle(); } diff --git a/app/src/config/search.ts b/app/src/config/search.ts index 111d26116..bb63c4dbc 100644 --- a/app/src/config/search.ts +++ b/app/src/config/search.ts @@ -11,7 +11,7 @@ const getLang = (keys: string[]) => { export const initConfigSearch = (element: HTMLElement) => { const configIndex = [ // 编辑器 - getLang(["config", + getLang(["config", "fullWidth", "editor", "md2", "md3", "md12", "md16", "md27", "md28", "md29", "md30", "md31", "md32", "md33", "md34", "md39", "fontSizeTip", "fontSize", "font", "font1", "generateHistory", "generateHistoryInterval", "historyRetentionDays", "historyRetentionDaysTip", "clearHistory" diff --git a/app/src/constants.ts b/app/src/constants.ts index c64a295a3..b00684ab2 100644 --- a/app/src/constants.ts +++ b/app/src/constants.ts @@ -36,6 +36,7 @@ export abstract class Constants { public static readonly SIZE_GET_MAX = 102400; public static readonly SIZE_UNDO = 64; public static readonly SIZE_TITLE = 512; + public static readonly SIZE_EDITOR_WIDTH = 760; // ws callback public static readonly CB_MOUNT_HELP = "cb-mount-help"; diff --git a/app/src/protyle/ui/initUI.ts b/app/src/protyle/ui/initUI.ts index 3cb16fd93..d04342486 100644 --- a/app/src/protyle/ui/initUI.ts +++ b/app/src/protyle/ui/initUI.ts @@ -2,6 +2,7 @@ import {setEditMode} from "../util/setEditMode"; import {lineNumberRender} from "../markdown/highlightRender"; import {scrollEvent} from "../scroll/event"; import {isMobile} from "../../util/functions"; +import {Constants} from "../../constants"; export const initUI = (protyle: IProtyle) => { protyle.contentElement = document.createElement("div"); @@ -46,8 +47,18 @@ export const addLoading = (protyle: IProtyle) => { }; export const setPadding = (protyle: IProtyle) => { - const min16 = protyle.element.clientWidth > 888 ? 96 : 16; - const min24 = protyle.element.clientWidth > 888 ? 96 : 24; + let min16 = 16; + let min24 = 24; + if (!isMobile()) { + const padding = (protyle.element.clientWidth - Constants.SIZE_EDITOR_WIDTH) / 2 + if (!window.siyuan.config.editor.fullWidth && padding > 96) { + min16 = padding + min24 = padding + } else if (protyle.element.clientWidth > Constants.SIZE_EDITOR_WIDTH) { + min16 = 96 + min24 = 96 + } + } if (protyle.options.render.background && protyle.options.render.title) { protyle.background.element.lastElementChild.setAttribute("style", `left:${min16}px`); protyle.title.element.style.margin = `16px ${min16}px 0 ${min24}px`; diff --git a/app/src/types/index.d.ts b/app/src/types/index.d.ts index 97b51270f..06e57bef4 100644 --- a/app/src/types/index.d.ts +++ b/app/src/types/index.d.ts @@ -177,6 +177,7 @@ declare interface IExport { } declare interface IEditor { + fullWidth: boolean; fontSize: number; generateHistoryInterval: number; historyRetentionDays: number;