Auto-generate 'thumbnail' previews of themes in settings applet

diff --git a/client/assets/src/app.js b/client/assets/src/app.js
index 7002e0b66f04ea4de3ba65abc4d468e8084c3ac6..d70e0abb2ab8c166169b64c11461868b41656fec 100644 (file)
--- a/client/assets/src/app.js
+++ b/client/assets/src/app.js
@@ -116,7 +116,7 @@ _kiwi.global = {
 \r
         if (opts.server_settings.client.themes) {\r
             _.each(opts.server_settings.client.themes, function (theme) {\r
-                link = $.parseHTML('<link rel="alternate stylesheet" type="text/css" data-theme href="'+ opts.base_path + '/assets/src/themes/' + theme + '/style.css" title="' + theme.toLowerCase() + '" disabled/>');\r
+                link = $.parseHTML('<link rel="alternate stylesheet" type="text/css" data-theme href="'+ opts.base_path + '/assets/src/themes/' + theme.name.toLowerCase() + '/style.css" title="' + theme.name.toLowerCase() + '" disabled/>');\r
                 link.disabled = true;\r
                 $(link).appendTo($('head'));\r
             });\r

diff --git a/client/assets/src/applets/settings.js b/client/assets/src/applets/settings.js
index 32bf8554b8e31a8fb55ef91f7b75eddb253b823c..6fb7cb166e234e111c7dbf5785add54be98c7bc7 100644 (file)
--- a/client/assets/src/applets/settings.js
+++ b/client/assets/src/applets/settings.js
@@ -8,24 +8,28 @@
         },\r
 \r
         initialize: function (options) {\r
-            var text = {\r
-                tabs: _kiwi.global.i18n.translate('client_applets_settings_channelview_tabs').fetch(),\r
-                list: _kiwi.global.i18n.translate('client_applets_settings_channelview_list').fetch(),\r
-                large_amounts_of_chans: _kiwi.global.i18n.translate('client_applets_settings_channelview_list_notice').fetch(),\r
-                join_part: _kiwi.global.i18n.translate('client_applets_settings_notification_joinpart').fetch(),\r
-                timestamps: _kiwi.global.i18n.translate('client_applets_settings_timestamp').fetch(),\r
-                mute: _kiwi.global.i18n.translate('client_applets_settings_notification_sound').fetch(),\r
-                emoticons: _kiwi.global.i18n.translate('client_applets_settings_emoticons').fetch(),\r
-                scroll_history: _kiwi.global.i18n.translate('client_applets_settings_history_length').fetch(),\r
-                languages: _kiwi.app.translations,\r
-                default_client: _kiwi.global.i18n.translate('client_applets_settings_default_client').fetch(),\r
-                make_default: _kiwi.global.i18n.translate('client_applets_settings_default_client_enable').fetch(),\r
-                locale_restart_needed: _kiwi.global.i18n.translate('client_applets_settings_locale_restart_needed').fetch(),\r
-                default_note: _kiwi.global.i18n.translate('client_applets_settings_default_client_notice').fetch('<a href="chrome://settings/handlers">chrome://settings/handlers</a>'),\r
-                html5_notifications: _kiwi.global.i18n.translate('client_applets_settings_html5_notifications').fetch(),\r
-                enable_notifications: _kiwi.global.i18n.translate('client_applets_settings_enable_notifications').fetch()\r
-            };\r
-            this.$el = $(_.template($('#tmpl_applet_settings').html().trim(), text));\r
+            var template_vars = {\r
+                    tabs: _kiwi.global.i18n.translate('client_applets_settings_channelview_tabs').fetch(),\r
+                    list: _kiwi.global.i18n.translate('client_applets_settings_channelview_list').fetch(),\r
+                    large_amounts_of_chans: _kiwi.global.i18n.translate('client_applets_settings_channelview_list_notice').fetch(),\r
+                    join_part: _kiwi.global.i18n.translate('client_applets_settings_notification_joinpart').fetch(),\r
+                    timestamps: _kiwi.global.i18n.translate('client_applets_settings_timestamp').fetch(),\r
+                    mute: _kiwi.global.i18n.translate('client_applets_settings_notification_sound').fetch(),\r
+                    emoticons: _kiwi.global.i18n.translate('client_applets_settings_emoticons').fetch(),\r
+                    scroll_history: _kiwi.global.i18n.translate('client_applets_settings_history_length').fetch(),\r
+                    languages: _kiwi.app.translations,\r
+                    default_client: _kiwi.global.i18n.translate('client_applets_settings_default_client').fetch(),\r
+                    make_default: _kiwi.global.i18n.translate('client_applets_settings_default_client_enable').fetch(),\r
+                    locale_restart_needed: _kiwi.global.i18n.translate('client_applets_settings_locale_restart_needed').fetch(),\r
+                    default_note: _kiwi.global.i18n.translate('client_applets_settings_default_client_notice').fetch('<a href="chrome://settings/handlers">chrome://settings/handlers</a>'),\r
+                    html5_notifications: _kiwi.global.i18n.translate('client_applets_settings_html5_notifications').fetch(),\r
+                    enable_notifications: _kiwi.global.i18n.translate('client_applets_settings_enable_notifications').fetch(),\r
+                    theme_thumbnails: _.map(_kiwi.app.server_settings.client.themes, function (theme) {\r
+                        return _.template($('#tmpl_theme_thumbnail').html().trim(), theme);\r
+                    })\r
+                };\r
+\r
+            this.$el = $(_.template($('#tmpl_applet_settings').html().trim(), template_vars));\r
 \r
             if (!navigator.registerProtocolHandler) {\r
                 this.$el.find('.protocol_handler').remove();\r

diff --git a/client/assets/src/index.html.tmpl b/client/assets/src/index.html.tmpl
index 61c6efc710e0fa5e7ce1164bf27d5fc51ace6ad5..ba206e419e8e40772bada72aa0b314203790fff2 100644 (file)
--- a/client/assets/src/index.html.tmpl
+++ b/client/assets/src/index.html.tmpl
@@ -173,28 +173,22 @@
         </div>\r
     </script>\r
 \r
+    <script type="text/html" id="tmpl_theme_thumbnail">\r
+        <a class="thumbnail" data-setting="theme" data-value="<%= name.toLowerCase() %>" href="#">\r
+            <div class="thumbnail_wrapper"><div class="theme_color" style="background-color: <%= thumbnail_colour %>;"></div></div>\r
+            <div class="caption"><u><%= name %></u></div>\r
+        </a>\r
+    </script>\r
+\r
     <script type="text/html" id="tmpl_applet_settings">\r
         <div class="settings_container">\r
             <section>\r
                 <h6>Theme</h6>\r
                 <div class="control-group">\r
                     <div class="thumbnails">\r
-                        <a class="thumbnail" data-setting="theme" data-value="relaxed" href="#">\r
-                            <div class="thumbnail_wrapper"><div class="theme_color" style="background-color: #e7e7e7;"></div></div>\r
-                            <div class="caption"><u>Relaxed</u></div>\r
-                        </a>\r
-                        <a class="thumbnail" data-setting="theme" data-value="mini" href="#">\r
-                            <div class="thumbnail_wrapper"><div class="theme_color" style="background-color: #fff;"></div></div>\r
-                            <div class="caption"><u>Mini</u></div>\r
-                        </a>\r
-                        <a class="thumbnail" data-setting="theme" data-value="cli" href="#">\r
-                            <div class="thumbnail_wrapper"><div class="theme_color" style="background-color: #222;"></div></div>\r
-                            <div class="caption"><u>CLI</u></div>\r
-                        </a>\r
-                        <a class="thumbnail" data-setting="theme" data-value="basic" href="#">\r
-                            <div class="thumbnail_wrapper"><div class="theme_color" style="background-color: #e7e7e7;"></div></div>\r
-                            <div class="caption"><u>Basic</u></div>\r
-                        </a>\r
+                        <% _.forEach(theme_thumbnails, function(thumbnail) { %>\r
+                            <%= thumbnail %>\r
+                        <% }); %>\r
                     </div>\r
                 </div>\r
             </section>\r

diff --git a/client/assets/src/themes/basic/theme.json b/client/assets/src/themes/basic/theme.json
new file mode 100644 (file)
index 0000000..f88b50d
--- /dev/null
+++ b/client/assets/src/themes/basic/theme.json
@@ -0,0 +1,4 @@
+{
+       "name": "Basic",
+       "thumbnail_colour": "#e7e7e7"
+}
\ No newline at end of file

diff --git a/client/assets/src/themes/cli/theme.json b/client/assets/src/themes/cli/theme.json
new file mode 100644 (file)
index 0000000..e70afca
--- /dev/null
+++ b/client/assets/src/themes/cli/theme.json
@@ -0,0 +1,4 @@
+{
+       "name": "CLI",
+       "thumbnail_colour": "#222"
+}
\ No newline at end of file

diff --git a/client/assets/src/themes/mini/theme.json b/client/assets/src/themes/mini/theme.json
new file mode 100644 (file)
index 0000000..47c54ff
--- /dev/null
+++ b/client/assets/src/themes/mini/theme.json
@@ -0,0 +1,4 @@
+{
+       "name": "Mini",
+       "thumbnail_colour": "#fff"
+}
\ No newline at end of file

diff --git a/client/assets/src/themes/relaxed/theme.json b/client/assets/src/themes/relaxed/theme.json
new file mode 100644 (file)
index 0000000..3535a1a
--- /dev/null
+++ b/client/assets/src/themes/relaxed/theme.json
@@ -0,0 +1,4 @@
+{
+       "name": "Relaxed",
+       "thumbnail_colour": "#e7e7e7"
+}
\ No newline at end of file

diff --git a/server/httphandler.js b/server/httphandler.js
index bed9b4926d01613d153f7951a1551f3942f52326..80bec4c3c525376af6f467dad90b379f1b4adf78 100644 (file)
--- a/server/httphandler.js
+++ b/server/httphandler.js
@@ -308,33 +308,70 @@ function generateSettings(request, debug, callback) {
         vars.client_plugins = config.get().client_plugins;
     }
 
-    // Get a list of available translations
-    fs.readFile(__dirname + '/../client/assets/src/translations/translations.json', function (err, translations) {
+    // Read theme information
+    readThemeInfo(vars.server_settings.client.themes, function (err, themes) {
         if (err) {
             return callback(err);
         }
+        
+        vars.server_settings.client.themes = themes;
 
-        var translation_files;
-        translations = JSON.parse(translations);
-        fs.readdir(__dirname + '/../client/assets/src/translations/', function (err, pofiles) {
-            var hash, settings;
+        // Get a list of available translations
+        fs.readFile(__dirname + '/../client/assets/src/translations/translations.json', function (err, translations) {
             if (err) {
                 return callback(err);
             }
 
-            pofiles.forEach(function (file) {
-                var locale = file.slice(0, -3);
-                if ((file.slice(-3) === '.po') && (locale !== 'template')) {
-                    vars.translations.push({tag: locale, language: translations[locale]});
+            translations = JSON.parse(translations);
+            fs.readdir(__dirname + '/../client/assets/src/translations/', function (err, pofiles) {
+                var settings;
+                if (err) {
+                    return callback(err);
                 }
-            });
 
-            settings = cached_settings[debug?'debug':'production'];
-            settings.settings = JSON.stringify(vars);
-            settings.hash = crypto.createHash('md5').update(settings.settings).digest('hex');
+                pofiles.forEach(function (file) {
+                    var locale = file.slice(0, -3);
+                    if ((file.slice(-3) === '.po') && (locale !== 'template')) {
+                        vars.translations.push({tag: locale, language: translations[locale]});
+                    }
+                });
+
+                settings = cached_settings[debug?'debug':'production'];
+                settings.settings = JSON.stringify(vars);
+                settings.hash = crypto.createHash('md5').update(settings.settings).digest('hex');
 
-            return callback(null, settings);
+                return callback(null, settings);
+            });
         });
     });
 }
 
+function readThemeInfo(themes, prev, callback) {
+    "use strict";
+    var theme = themes.shift();
+
+    if (typeof prev === 'function') {
+        callback = prev;
+        prev = [];
+    }
+
+    fs.readFile(__dirname + '/../client/assets/src/themes/' + theme.toLowerCase() + '/theme.json', function (err, theme_json) {
+        if (err) {
+            return callback(err);
+        }
+
+        try {
+            theme_json = JSON.parse(theme_json);
+        } catch (e) {
+            return callback(e);
+        }
+
+        prev.push(theme_json);
+
+        if (themes.length > 0) {
+            return readThemeInfo(themes, prev, callback);
+        }
+
+        callback(null, prev);
+    });
+}