From f8fb071a6fdfb50e1103e0206dc6270461fac4a0 Mon Sep 17 00:00:00 2001 From: zadam Date: Tue, 9 Mar 2021 22:06:40 +0100 Subject: [PATCH] added option to bring back plain (non-markdown) headings, closes #1678 --- src/public/app/dialogs/options/appearance.js | 39 +++++++++++++++---- .../app/widgets/type_widgets/editable_text.js | 11 +++--- .../widgets/type_widgets/read_only_text.js | 15 +++---- src/routes/api/options.js | 3 +- src/routes/index.js | 1 + src/services/options_init.js | 3 +- src/views/desktop.ejs | 2 +- src/views/mobile.ejs | 2 +- 8 files changed, 50 insertions(+), 26 deletions(-) diff --git a/src/public/app/dialogs/options/appearance.js b/src/public/app/dialogs/options/appearance.js index c4ecfd314..9a4f643df 100644 --- a/src/public/app/dialogs/options/appearance.js +++ b/src/public/app/dialogs/options/appearance.js @@ -28,6 +28,16 @@ const TPL = ` + +
+
+ + +
+

Zooming can be controlled with CTRL+- and CTRL+= shortcuts as well.

@@ -78,6 +88,7 @@ export default class ApperanceOptions { this.$themeSelect = $("#theme-select"); this.$zoomFactorSelect = $("#zoom-factor-select"); this.$nativeTitleBarSelect = $("#native-title-bar-select"); + this.$headingStyle = $("#heading-style"); this.$mainFontSize = $("#main-font-size"); this.$treeFontSize = $("#tree-font-size"); this.$detailFontSize = $("#detail-font-size"); @@ -86,11 +97,7 @@ export default class ApperanceOptions { this.$themeSelect.on('change', () => { const newTheme = this.$themeSelect.val(); - for (const clazz of Array.from(this.$body[0].classList)) { // create copy to safely iterate over while removing classes - if (clazz.startsWith("theme-")) { - this.$body.removeClass(clazz); - } - } + this.toggleBodyClass("theme-", newTheme); const noteId = $(this).find(":selected").attr("data-note-id"); @@ -100,8 +107,6 @@ export default class ApperanceOptions { libraryLoader.requireCss(`api/notes/download/${noteId}`); } - this.$body.addClass("theme-" + newTheme); - server.put('options/theme/' + newTheme); }); @@ -113,6 +118,14 @@ export default class ApperanceOptions { server.put('options/nativeTitleBarVisible/' + nativeTitleBarVisible); }); + this.$headingStyle.on('change', () => { + const newHeadingStyle = this.$headingStyle.val(); + + this.toggleBodyClass("heading-style-", newHeadingStyle); + + server.put('options/headingStyle/' + newHeadingStyle); + }); + this.$mainFontSize.on('change', async () => { await server.put('options/mainFontSize/' + this.$mainFontSize.val()); @@ -132,6 +145,16 @@ export default class ApperanceOptions { }); } + toggleBodyClass(prefix, value) { + for (const clazz of Array.from(this.$body[0].classList)) { // create copy to safely iterate over while removing classes + if (clazz.startsWith(prefix)) { + this.$body.removeClass(clazz); + } + } + + this.$body.addClass(prefix + value); + } + async optionsLoaded(options) { const themes = [ { val: 'white', title: 'White' }, @@ -159,6 +182,8 @@ export default class ApperanceOptions { this.$nativeTitleBarSelect.val(options.nativeTitleBarVisible === 'true' ? 'show' : 'hide'); + this.$headingStyle.val(options.headingStyle); + this.$mainFontSize.val(options.mainFontSize); this.$treeFontSize.val(options.treeFontSize); this.$detailFontSize.val(options.detailFontSize); diff --git a/src/public/app/widgets/type_widgets/editable_text.js b/src/public/app/widgets/type_widgets/editable_text.js index 104fe8d63..e08a56eca 100644 --- a/src/public/app/widgets/type_widgets/editable_text.js +++ b/src/public/app/widgets/type_widgets/editable_text.js @@ -49,15 +49,16 @@ const TPL = ` } .note-detail-editable-text h2 { font-size: 1.8em; } - .note-detail-editable-text h2::before { content: "##\\2004"; color: var(--muted-text-color); } .note-detail-editable-text h3 { font-size: 1.6em; } - .note-detail-editable-text h3::before { content: "###\\2004"; color: var(--muted-text-color); } .note-detail-editable-text h4 { font-size: 1.4em; } - .note-detail-editable-text h4:not(.include-note-title)::before { content: "####\\2004"; color: var(--muted-text-color); } .note-detail-editable-text h5 { font-size: 1.2em; } - .note-detail-editable-text h5::before { content: "#####\\2004"; color: var(--muted-text-color); } .note-detail-editable-text h6 { font-size: 1.1em; } - .note-detail-editable-text h6::before { content: "######\\2004"; color: var(--muted-text-color); } + + body.heading-style-markdown .note-detail-editable-text h2::before { content: "##\\2004"; color: var(--muted-text-color); } + body.heading-style-markdown .note-detail-editable-text h3::before { content: "###\\2004"; color: var(--muted-text-color); } + body.heading-style-markdown .note-detail-editable-text h4:not(.include-note-title)::before { content: "####\\2004"; color: var(--muted-text-color); } + body.heading-style-markdown .note-detail-editable-text h5::before { content: "#####\\2004"; color: var(--muted-text-color); } + body.heading-style-markdown .note-detail-editable-text h6::before { content: "######\\2004"; color: var(--muted-text-color); } .note-detail-editable-text-editor { padding-top: 10px; diff --git a/src/public/app/widgets/type_widgets/read_only_text.js b/src/public/app/widgets/type_widgets/read_only_text.js index c34eb510f..87d36808a 100644 --- a/src/public/app/widgets/type_widgets/read_only_text.js +++ b/src/public/app/widgets/type_widgets/read_only_text.js @@ -14,16 +14,11 @@ const TPL = ` .note-detail-readonly-text h5 { font-size: 1.2em; } .note-detail-readonly-text h6 { font-size: 1.1em; } - .note-detail-readonly-text h2 { font-size: 1.8em; } - .note-detail-readonly-text h2::before { content: "##\\2004"; color: var(--muted-text-color); } - .note-detail-readonly-text h3 { font-size: 1.6em; } - .note-detail-readonly-text h3::before { content: "###\\2004"; color: var(--muted-text-color); } - .note-detail-readonly-text h4 { font-size: 1.4em; } - .note-detail-readonly-text h4:not(.include-note-title)::before { content: "####\\2004"; color: var(--muted-text-color); } - .note-detail-readonly-text h5 { font-size: 1.2em; } - .note-detail-readonly-text h5::before { content: "#####\\2004"; color: var(--muted-text-color); } - .note-detail-readonly-text h6 { font-size: 1.1em; } - .note-detail-readonly-text h6::before { content: "######\\2004"; color: var(--muted-text-color); } + body.heading-style-markdown .note-detail-readonly-text h2::before { content: "##\\2004"; color: var(--muted-text-color); } + body.heading-style-markdown .note-detail-readonly-text h3::before { content: "###\\2004"; color: var(--muted-text-color); } + body.heading-style-markdown .note-detail-readonly-text h4:not(.include-note-title)::before { content: "####\\2004"; color: var(--muted-text-color); } + body.heading-style-markdown .note-detail-readonly-text h5::before { content: "#####\\2004"; color: var(--muted-text-color); } + body.heading-style-markdown .note-detail-readonly-text h6::before { content: "######\\2004"; color: var(--muted-text-color); } .note-detail-readonly-text { padding-left: 22px; diff --git a/src/routes/api/options.js b/src/routes/api/options.js index 092c0c804..d08581037 100644 --- a/src/routes/api/options.js +++ b/src/routes/api/options.js @@ -40,7 +40,8 @@ const ALLOWED_OPTIONS = new Set([ 'nativeTitleBarVisible', 'attributeListExpanded', 'promotedAttributesExpanded', - 'similarNotesExpanded' + 'similarNotesExpanded', + 'headingStyle' ]); function getOptions() { diff --git a/src/routes/index.js b/src/routes/index.js index 1f47b305e..c76e494fa 100644 --- a/src/routes/index.js +++ b/src/routes/index.js @@ -19,6 +19,7 @@ function index(req, res) { res.render(view, { csrfToken: csrfToken, theme: options.theme, + headingStyle: options.headingStyle, mainFontSize: parseInt(options.mainFontSize), treeFontSize: parseInt(options.treeFontSize), detailFontSize: parseInt(options.detailFontSize), diff --git a/src/services/options_init.js b/src/services/options_init.js index cc9b2e3a4..35b2768de 100644 --- a/src/services/options_init.js +++ b/src/services/options_init.js @@ -84,7 +84,8 @@ const defaultOptions = [ { name: 'attributeListExpanded', value: 'false', isSynced: false }, { name: 'promotedAttributesExpanded', value: 'true', isSynced: true }, { name: 'similarNotesExpanded', value: 'true', isSynced: true }, - { name: 'debugModeEnabled', value: 'false', isSynced: false } + { name: 'debugModeEnabled', value: 'false', isSynced: false }, + { name: 'headingStyle', value: 'markdown', isSynced: true }, ]; function initStartupOptions() { diff --git a/src/views/desktop.ejs b/src/views/desktop.ejs index 3b87be91a..950b6591e 100644 --- a/src/views/desktop.ejs +++ b/src/views/desktop.ejs @@ -5,7 +5,7 @@ Trilium Notes - +