[Feature] Show theme settings

Implement switching themes on settings page.
Laverna · Oct 19, 2017 · 3d79228 · 3d79228
1 parent 7e4592f
commit 3d79228
Show file tree

Hide file tree

Showing 7 changed files with 90 additions and 1 deletion.
diff --git a/app/index.html b/app/index.html
@@ -30,7 +30,7 @@
         <meta name="msapplication-square310x310logo" content="images/icon/icon-310x310.png" />
 
         <link rel="stylesheet" href="styles/core.css">
-        <link rel="stylesheet" href="styles/theme-default.css">
+        <link rel="stylesheet" href="styles/theme-default.css" id="lav--theme">
     </head>
     <body class="-noscroll">
 

diff --git a/app/scripts/collections/configNames.js b/app/scripts/collections/configNames.js
@@ -20,6 +20,7 @@ const configNames = {
      *
      * @prop {Array} appProfiles - profile names stored in JSON format
      * @prop {String} appLang - localization (en|fr...etc)
+     * @prop {String} theme - theme
      * @prop {String} useDefaultConfigs - (0|1) 1 if the profile should
      * use settings from the main profile.
      * @prop {String} pagination - the number of notes shown per page
@@ -31,6 +32,7 @@ const configNames = {
     general: {
         appProfiles        : ['default'],
         appLang            : '',
+        theme              : '',
         useDefaultConfigs  : '1',
 
         pagination         : '10',

diff --git a/app/scripts/components/settings/show/general/View.js b/app/scripts/components/settings/show/general/View.js
@@ -5,7 +5,9 @@ import Mn from 'backbone.marionette';
 import _ from 'underscore';
 import i18n from 'i18next';
 import locales from '../../../../../locales/locales.json';
+import themes from '../../../../../styles/themes.json';
 import Behavior from '../Behavior';
+import Radio from 'backbone.radio';
 
 /**
  * General settings view.
@@ -31,6 +33,25 @@ export default class View extends Mn.View {
         return [Behavior];
     }
 
+    events() {
+        return {
+            'change @ui.theme': 'previewTheme',
+        };
+    }
+
+    ui() {
+        return {
+            theme: '#theme',
+        };
+    }
+
+    /**
+     * Preview a theme.
+     */
+    previewTheme() {
+        Radio.trigger('components/settings', 'changeTheme', {name: this.ui.theme.val()});
+    }
+
     /**
      * serializeData.
      *
@@ -42,7 +63,9 @@ export default class View extends Mn.View {
         return {
             locales,
             models,
+            themes,
             appLang    : (models.appLang || i18n.language) || 'en',
+            theme      : models.theme || 'default',
             profileId  : this.options.profileId,
             useDefault : this.options.useDefault.attributes,
         };
@@ -78,6 +101,18 @@ export default class View extends Mn.View {
                 }
             },
 
+            /**
+             * Select a theme if it's active.
+             *
+             * @param {String} theme - theme name
+             * @returns {String}
+             */
+            selectTheme(theme) {
+                if (this.theme === theme) {
+                    return ' selected';
+                }
+            },
+
         };
     }
 

diff --git a/app/scripts/components/settings/show/general/template.html b/app/scripts/components/settings/show/general/template.html
@@ -27,6 +27,19 @@
     </div>
 </div>
 
+<div class="form-group">
+    <label class="col-sm-2 control-label" for="theme">
+        <i class="fa fa-cloud"></i> {{ _.i18n('Theme') }}
+    </label>
+    <div class="col-sm-10">
+        <select class="form-control" name="theme" id="theme">
+            <% _.forEach(themes, function(name, theme) { %>
+            <option value="{{theme}}"{{ selectTheme(theme) }}>{{name}}</option>
+            <% }); %>
+        </select>
+    </div>
+</div>
+
 <div class="form-group">
     <label class="col-sm-2 control-label" for="pagination">{{ _.i18n('Notes per page') }}</label>
     <div class="col-sm-10">

diff --git a/app/scripts/main.js b/app/scripts/main.js
@@ -13,6 +13,7 @@ import App from './App';
 import './workers/Delegator';
 
 // Utils
+import './utils/theme';
 import './utils/Env';
 import './utils/underscore';
 import './utils/I18n';

diff --git a/app/scripts/utils/theme.js b/app/scripts/utils/theme.js
@@ -0,0 +1,34 @@
+import Radio from 'backbone.radio';
+
+const theme = {
+    /**
+     * Apply a theme.
+     *
+     * @param {Object} data
+     * @param {String} data.name - theme name
+     */
+    applyTheme(data = {}) {
+        const theme = data.name || Radio.request('collections/Configs', 'findConfig', {
+            name: 'theme',
+        });
+
+        $('#lav--theme').attr('href', `styles/theme-${theme || 'default'}.css`);
+    },
+
+    /**
+     * Initializer.
+     */
+    initializer() {
+        Radio.on('components/settings', 'changeTheme', theme.applyTheme);
+        theme.applyTheme();
+    },
+};
+
+Radio.once('App', 'init', () => {
+    Radio.request('utils/Initializer', 'add', {
+        name    : 'App:utils',
+        callback: theme.initializer,
+    });
+});
+
+export default theme;
diff --git a/app/styles/themes.json b/app/styles/themes.json
@@ -0,0 +1,4 @@
+{
+    "default": "Default theme",
+    "dark": "Dark"
+}