diff --git a/src/public/app/dialogs/options/appearance.js b/src/public/app/dialogs/options/appearance.js index 31052c020..5720121e8 100644 --- a/src/public/app/dialogs/options/appearance.js +++ b/src/public/app/dialogs/options/appearance.js @@ -1,7 +1,31 @@ import server from "../../services/server.js"; import utils from "../../services/utils.js"; import appContext from "../../services/app_context.js"; -import libraryLoader from "../../services/library_loader.js"; + +const FONT_FAMILIES = [ + { value: "theme", label: "Theme defined" }, + { value: "serif", label: "Serif" }, + { value: "sans-serif", label: "Sans Serif" }, + { value: "monospace", label: "Monospace" }, + { value: "Arial", label: "Arial" }, + { value: "Verdana", label: "Verdana" }, + { value: "Helvetica", label: "Helvetica" }, + { value: "Tahoma", label: "Tahoma" }, + { value: "Trebuchet MS", label: "Trebuchet MS" }, + { value: "Times New Roman", label: "Times New Roman" }, + { value: "Georgia", label: "Georgia" }, + { value: "Garamond", label: "Garamond" }, + { value: "Courier New", label: "Courier New" }, + { value: "Brush Script MT", label: "Brush Script MT" }, + { value: "Impact", label: "Impact" }, + { value: "American Typewriter", label: "American Typewriter" }, + { value: "Andalé Mono", label: "Andalé Mono" }, + { value: "Lucida Console", label: "Lucida Console" }, + { value: "Monaco", label: "Monaco" }, + { value: "Bradley Hand", label: "Bradley Hand" }, + { value: "Luminari", label: "Luminari" }, + { value: "Comic Sans MS", label: "Comic Sans MS" }, +]; const TPL = `

Settings on this options tab are saved automatically after each change.

@@ -9,10 +33,14 @@ const TPL = `
- - + +
- +
@@ -28,71 +56,144 @@ const TPL = `
- -
-
- - -
-
- +

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

-

Font sizes

+

Theme

- - -
- -
- % -
-
+ +
- +
- - -
- -
- % -
-
-
- -
- - -
- -
- % -
-
+ +
-

Note that tree and detail font sizing is relative to the main font size setting.

+
+

Fonts

+ +
Main font
+ +
+
+ + +
+ +
+ + +
+ +
+ % +
+
+
+
+ +
Note tree font
+ +
+
+ + +
+ +
+ + +
+ +
+ % +
+
+
+
+ +
Note detail font
+ +
+
+ + +
+ +
+ + +
+ +
+ % +
+
+
+
+ +
Monospace font
+ +
+
+ + +
+ +
+ + +
+ +
+ % +
+
+
+
+ +

Note that tree and detail font sizing is relative to the main font size setting.

+ +

Not all listed fonts may be available on your system.

+
+ +

+ To apply font changes, click on + +

`; export default class ApperanceOptions { constructor() { $("#options-appearance").html(TPL); - this.$themeSelect = $("#theme-select"); this.$zoomFactorSelect = $("#zoom-factor-select"); this.$nativeTitleBarSelect = $("#native-title-bar-select"); this.$headingStyle = $("#heading-style"); + + this.$themeSelect = $("#theme-select"); + this.$overrideThemeFonts = $("#override-theme-fonts"); + + this.$overridenFontSettings = $("#overriden-font-settings"); + this.$mainFontSize = $("#main-font-size"); + this.$mainFontFamily = $("#main-font-family"); + this.$treeFontSize = $("#tree-font-size"); + this.$treeFontFamily = $("#tree-font-family"); + this.$detailFontSize = $("#detail-font-size"); + this.$detailFontFamily = $("#detail-font-family"); + + this.$monospaceFontSize = $("#monospace-font-size"); + this.$monospaceFontFamily = $("#monospace-font-family"); + + $("#reload-frontend-button").on("click", () => utils.reloadFrontendApp("font changes")); + this.$body = $("body"); this.$themeSelect.on('change', async () => { @@ -103,6 +204,14 @@ export default class ApperanceOptions { utils.reloadFrontendApp("theme change"); }); + this.$overrideThemeFonts.on('change', async () => { + const isOverriden = this.$overrideThemeFonts.is(":checked"); + + await server.put('options/overrideThemeFonts/' + isOverriden.toString()); + + this.$overridenFontSettings.toggle(isOverriden); + }); + this.$zoomFactorSelect.on('change', () => { appContext.triggerCommand('setZoomFactorAndSave', {zoomFactor: this.$zoomFactorSelect.val()}); }); this.$nativeTitleBarSelect.on('change', () => { @@ -119,23 +228,16 @@ export default class ApperanceOptions { server.put('options/headingStyle/' + newHeadingStyle); }); - this.$mainFontSize.on('change', async () => { - await server.put('options/mainFontSize/' + this.$mainFontSize.val()); + const optionsToSave = [ + 'mainFontFamily', 'mainFontSize', + 'treeFontFamily', 'treeFontSize', + 'detailFontFamily', 'detailFontSize', + 'monospaceFontFamily', 'monospaceFontSize' + ]; - this.applyFontSizes(); - }); - - this.$treeFontSize.on('change', async () => { - await server.put('options/treeFontSize/' + this.$treeFontSize.val()); - - this.applyFontSizes(); - }); - - this.$detailFontSize.on('change', async () => { - await server.put('options/detailFontSize/' + this.$detailFontSize.val()); - - this.applyFontSizes(); - }); + for (const optionName of optionsToSave) { + this['$' + optionName].on('change', () => server.put(`options/${optionName}/${this['$' + optionName].val()}`)); + } } toggleBodyClass(prefix, value) { @@ -149,6 +251,17 @@ export default class ApperanceOptions { } async optionsLoaded(options) { + if (utils.isElectron()) { + this.$zoomFactorSelect.val(options.zoomFactor); + } + else { + this.$zoomFactorSelect.prop('disabled', true); + } + + this.$nativeTitleBarSelect.val(options.nativeTitleBarVisible === 'true' ? 'show' : 'hide'); + + this.$headingStyle.val(options.headingStyle); + const themes = [ { val: 'white', title: 'White' }, { val: 'dark', title: 'Dark' } @@ -165,25 +278,32 @@ export default class ApperanceOptions { this.$themeSelect.val(options.theme); - if (utils.isElectron()) { - this.$zoomFactorSelect.val(options.zoomFactor); - } - else { - this.$zoomFactorSelect.prop('disabled', true); - } - - this.$nativeTitleBarSelect.val(options.nativeTitleBarVisible === 'true' ? 'show' : 'hide'); - - this.$headingStyle.val(options.headingStyle); + this.$overrideThemeFonts.prop('checked', options.overrideThemeFonts); + this.$overridenFontSettings.toggle(options.overrideThemeFonts === 'true'); this.$mainFontSize.val(options.mainFontSize); + this.fillFontFamilyOptions(this.$mainFontFamily, options.mainFontFamily); + this.$treeFontSize.val(options.treeFontSize); + this.fillFontFamilyOptions(this.$treeFontFamily, options.treeFontFamily); + this.$detailFontSize.val(options.detailFontSize); + this.fillFontFamilyOptions(this.$detailFontFamily, options.detailFontFamily); + + console.log(options); + + this.$monospaceFontSize.val(options.monospaceFontSize); + this.fillFontFamilyOptions(this.$monospaceFontFamily, options.monospaceFontFamily); } - applyFontSizes() { - this.$body.get(0).style.setProperty("--main-font-size", this.$mainFontSize.val() + "%"); - this.$body.get(0).style.setProperty("--tree-font-size", this.$treeFontSize.val() + "%"); - this.$body.get(0).style.setProperty("--detail-font-size", this.$detailFontSize.val() + "%"); + fillFontFamilyOptions($select, currentValue) { + $select.empty(); + + for (const {value, label} of FONT_FAMILIES) { + $select.append($("