From 89a5cab98f79a957951d4bc84b1f58b7d0e922ad Mon Sep 17 00:00:00 2001 From: azivner Date: Fri, 8 Jun 2018 23:18:53 -0400 Subject: [PATCH] added too options new tab appearance with possibility to change theme (white, black, dark) and zoom factor --- db/migrations/0099__add_theme_option.sql | 2 ++ src/public/javascripts/dialogs/options.js | 31 +++++++++++++++++- src/public/javascripts/services/zoom.js | 9 +++++- src/public/stylesheets/style.css | 22 +++++++++++++ src/routes/api/options.js | 2 +- src/routes/index.js | 2 ++ src/services/app_info.js | 2 +- src/services/options.js | 1 + src/views/index.ejs | 39 ++++++++++++++++++++++- 9 files changed, 105 insertions(+), 5 deletions(-) create mode 100644 db/migrations/0099__add_theme_option.sql diff --git a/db/migrations/0099__add_theme_option.sql b/db/migrations/0099__add_theme_option.sql new file mode 100644 index 000000000..e41fc4bcc --- /dev/null +++ b/db/migrations/0099__add_theme_option.sql @@ -0,0 +1,2 @@ +INSERT INTO options (optionId, name, value, dateCreated, dateModified, isSynced) +VALUES ('theme_key', 'theme', 'white', '2018-06-01T03:35:55.041Z', '2018-06-01T03:35:55.041Z', 0); \ No newline at end of file diff --git a/src/public/javascripts/dialogs/options.js b/src/public/javascripts/dialogs/options.js index 92bcc3ead..4a9e692b0 100644 --- a/src/public/javascripts/dialogs/options.js +++ b/src/public/javascripts/dialogs/options.js @@ -1,9 +1,9 @@ "use strict"; import protectedSessionHolder from '../services/protected_session_holder.js'; -import utils from '../services/utils.js'; import server from '../services/server.js'; import infoService from "../services/info.js"; +import zoomService from "../services/zoom.js"; const $dialog = $("#options-dialog"); const $tabs = $("#options-tabs"); @@ -44,6 +44,35 @@ export default { saveOptions }; +addTabHandler((function() { + const $themeSelect = $("#theme-select"); + const $zoomFactorSelect = $("#zoom-factor-select"); + const $html = $("html"); + + function optionsLoaded(options) { + $zoomFactorSelect.val(options.zoomFactor); + $themeSelect.val(options.theme); + } + + $themeSelect.change(function() { + const newTheme = $(this).val(); + + $html.attr("class", "theme-" + newTheme); + + server.put('options/theme/' + newTheme); + }); + + $zoomFactorSelect.change(function() { + const newZoomFactor = $(this).val(); + + zoomService.setZoomFactorAndSave(newZoomFactor); + }); + + return { + optionsLoaded + }; +})()); + addTabHandler((function() { const $form = $("#change-password-form"); const $oldPassword = $("#old-password"); diff --git a/src/public/javascripts/services/zoom.js b/src/public/javascripts/services/zoom.js index 8a99b5737..de0875f02 100644 --- a/src/public/javascripts/services/zoom.js +++ b/src/public/javascripts/services/zoom.js @@ -31,6 +31,12 @@ function setZoomFactor(zoomFactor) { webFrame.setZoomFactor(zoomFactor); } +async function setZoomFactorAndSave(zoomFactor) { + setZoomFactor(zoomFactor); + + await server.put('options/zoomFactor/' + zoomFactor); +} + if (utils.isElectron()) { optionsInitService.optionsReady.then(options => setZoomFactor(options.zoomFactor)) } @@ -38,5 +44,6 @@ if (utils.isElectron()) { export default { decreaseZoomFactor, increaseZoomFactor, - setZoomFactor + setZoomFactor, + setZoomFactorAndSave } \ No newline at end of file diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css index 2ef4bc183..b91dc19e6 100644 --- a/src/public/stylesheets/style.css +++ b/src/public/stylesheets/style.css @@ -386,4 +386,26 @@ div.ui-tooltip { button.icon-button { padding: 4px; +} + +/* Themes */ + +html.theme-black, html.theme-black img, html.theme-black video { + filter: invert(100%) hue-rotate(180deg); +} + +html.theme-black body { + background: black; +} + +html.theme-dark { + filter: invert(90%) hue-rotate(180deg); +} + +html.theme-dark img, html.theme-dark video { + filter: invert(100%) hue-rotate(180deg); +} + +html.theme-dark body { + background: #191819; } \ No newline at end of file diff --git a/src/routes/api/options.js b/src/routes/api/options.js index 9402a98a5..bde6d3e5d 100644 --- a/src/routes/api/options.js +++ b/src/routes/api/options.js @@ -5,7 +5,7 @@ const optionService = require('../../services/options'); const log = require('../../services/log'); // options allowed to be updated directly in options dialog -const ALLOWED_OPTIONS = ['protectedSessionTimeout', 'noteRevisionSnapshotTimeInterval', 'zoomFactor']; +const ALLOWED_OPTIONS = ['protectedSessionTimeout', 'noteRevisionSnapshotTimeInterval', 'zoomFactor', 'theme']; async function getOptions() { const options = await sql.getMap("SELECT name, value FROM options WHERE name IN (" diff --git a/src/routes/index.js b/src/routes/index.js index d31138446..93aef7d4d 100644 --- a/src/routes/index.js +++ b/src/routes/index.js @@ -4,9 +4,11 @@ const sourceIdService = require('../services/source_id'); const sql = require('../services/sql'); const labelService = require('../services/labels'); const config = require('../services/config'); +const optionService = require('../services/options'); async function index(req, res) { res.render('index', { + theme: await optionService.getOption('theme'), sourceId: await sourceIdService.generateSourceId(), maxSyncIdAtLoad: await sql.getValue("SELECT MAX(id) FROM sync"), instanceName: config.General ? config.General.instanceName : null, diff --git a/src/services/app_info.js b/src/services/app_info.js index 884724796..5a63ee9d3 100644 --- a/src/services/app_info.js +++ b/src/services/app_info.js @@ -3,7 +3,7 @@ const build = require('./build'); const packageJson = require('../../package'); -const APP_DB_VERSION = 98; +const APP_DB_VERSION = 99; module.exports = { appVersion: packageJson.version, diff --git a/src/services/options.js b/src/services/options.js index 8668a9e2f..f0d56a70d 100644 --- a/src/services/options.js +++ b/src/services/options.js @@ -55,6 +55,7 @@ async function initOptions(startNotePath) { await createOption('lastSyncedPush', 0, false); await createOption('zoomFactor', 1.0, false); + await createOption('theme', 'white', false); } module.exports = { diff --git a/src/views/index.ejs b/src/views/index.ejs index b1224dee5..2d43eb41c 100644 --- a/src/views/index.ejs +++ b/src/views/index.ejs @@ -1,5 +1,5 @@ - + Trilium Notes @@ -343,12 +343,49 @@