diff --git a/src/public/app/dialogs/options/appearance.js b/src/public/app/dialogs/options/appearance.js index d2385ec9c..3fc914498 100644 --- a/src/public/app/dialogs/options/appearance.js +++ b/src/public/app/dialogs/options/appearance.js @@ -163,7 +163,23 @@ const TPL = `
To apply font changes, click on - + +
+ +Trilium by default limits max content width to improve readability for maximized screens on wide screens.
+ ++ To content width changes, click on +
`; @@ -192,7 +208,7 @@ export default class ApperanceOptions { this.$monospaceFontSize = $("#monospace-font-size"); this.$monospaceFontFamily = $("#monospace-font-family"); - $("#reload-frontend-button").on("click", () => utils.reloadFrontendApp("font changes")); + $(".reload-frontend-button").on("click", () => utils.reloadFrontendApp("changes from appearance options")); this.$body = $("body"); @@ -238,6 +254,14 @@ export default class ApperanceOptions { for (const optionName of optionsToSave) { this['$' + optionName].on('change', () => server.put(`options/${optionName}/${this['$' + optionName].val()}`)); } + + this.$maxContentWidth = $("#max-content-width"); + + this.$maxContentWidth.on('change', async () => { + const maxContentWidth = this.$maxContentWidth.val(); + + await server.put('options/maxContentWidth/' + maxContentWidth); + }) } toggleBodyClass(prefix, value) { @@ -292,6 +316,8 @@ export default class ApperanceOptions { this.$monospaceFontSize.val(options.monospaceFontSize); this.fillFontFamilyOptions(this.$monospaceFontFamily, options.monospaceFontFamily); + + this.$maxContentWidth.val(options.maxContentWidth); } fillFontFamilyOptions($select, currentValue) { diff --git a/src/public/app/widgets/containers/split_note_container.js b/src/public/app/widgets/containers/split_note_container.js index 7042c7ff0..992cc0876 100644 --- a/src/public/app/widgets/containers/split_note_container.js +++ b/src/public/app/widgets/containers/split_note_container.js @@ -19,7 +19,7 @@ export default class SplitNoteContainer extends FlexContainer { const $renderedWidget = widget.render(); $renderedWidget.attr("data-ntx-id", noteContext.ntxId); - $renderedWidget.css("flex-basis", "0"); // so that each split has same width + $renderedWidget.addClass("note-split"); $renderedWidget.on('click', () => appContext.tabManager.activateNoteContext(noteContext.ntxId)); diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css index 711a6691b..616a489c1 100644 --- a/src/public/stylesheets/style.css +++ b/src/public/stylesheets/style.css @@ -950,3 +950,9 @@ input { white-space: nowrap; text-overflow: ellipsis; } + +.note-split { + flex-basis: 0; /* so that each split has same width */ + margin-left: auto; + margin-right: auto; +} diff --git a/src/routes/api/options.js b/src/routes/api/options.js index 6d7780df1..8464c8604 100644 --- a/src/routes/api/options.js +++ b/src/routes/api/options.js @@ -54,6 +54,7 @@ const ALLOWED_OPTIONS = new Set([ 'dailyBackupEnabled', 'weeklyBackupEnabled', 'monthlyBackupEnabled', + 'maxContentWidth' ]); function getOptions() { diff --git a/src/routes/index.js b/src/routes/index.js index 1cc668a32..0265278bd 100644 --- a/src/routes/index.js +++ b/src/routes/index.js @@ -35,7 +35,8 @@ function index(req, res) { isDev: env.isDev(), isMainWindow: !req.query.extra, extraHoistedNoteId: req.query.extraHoistedNoteId, - isProtectedSessionAvailable: protectedSessionService.isProtectedSessionAvailable() + isProtectedSessionAvailable: protectedSessionService.isProtectedSessionAvailable(), + maxContentWidth: parseInt(options.maxContentWidth) }); } diff --git a/src/services/options_init.js b/src/services/options_init.js index b6cb1db7b..6c77c6207 100644 --- a/src/services/options_init.js +++ b/src/services/options_init.js @@ -89,7 +89,8 @@ const defaultOptions = [ { name: 'autoReadonlySizeCode', value: '30000', isSynced: false }, { name: 'dailyBackupEnabled', value: 'true', isSynced: false }, { name: 'weeklyBackupEnabled', value: 'true', isSynced: false }, - { name: 'monthlyBackupEnabled', value: 'true', isSynced: false } + { name: 'monthlyBackupEnabled', value: 'true', isSynced: false }, + { name: 'maxContentWidth', value: '1200', isSynced: false }, ]; function initStartupOptions() { diff --git a/src/views/desktop.ejs b/src/views/desktop.ejs index 23b054942..cbbd92538 100644 --- a/src/views/desktop.ejs +++ b/src/views/desktop.ejs @@ -58,6 +58,12 @@ }; + +