Channel tabs/list switching on supported themes

diff --git a/client/assets/css/style.css b/client/assets/css/style.css
index 01e303ed312405dd8e433d97096a5365905d97d4..34595736b7c3dad909f3a25af3fc56051e7b5875 100644 (file)
--- a/client/assets/css/style.css
+++ b/client/assets/css/style.css
@@ -562,7 +562,20 @@ html, body { height:100%; }
 }
 
 
+#kiwi.theme_relaxed .applet > div.settings button.save {
+    padding:1em 2em;
+    border:1px solid gray; border-radius:3px;
+}
+#kiwi.theme_relaxed .applet > div.settings tr {
+    border-bottom: 1px dashed black;
+}
 
+#kiwi.theme_relaxed .applet > div.settings td.label {
+    font-weight: bold;
+}
+#kiwi.theme_relaxed .applet > div.settings tr.save {
+    text-align: right;
+}
 
 
 /**

diff --git a/client/assets/dev/applet_settings.js b/client/assets/dev/applet_settings.js
index 8b9a06166f257eec5ec7222d48b860ddbcec012b..93a222f762684ea6d4d82b80735d7c554f637599 100644 (file)
--- a/client/assets/dev/applet_settings.js
+++ b/client/assets/dev/applet_settings.js
@@ -20,7 +20,17 @@
         loadSettings: function () {\r
             var settings = _kiwi.global.settings;\r
 \r
-            this.$el.find('.setting-theme').val(settings.get('theme') || 'relaxed');\r
+            // TODO: Tidy this up\r
+            var theme = settings.get('theme') || 'relaxed';\r
+            this.$el.find('.setting-theme option').filter(function() {\r
+                return $(this).val() === theme;\r
+            }).attr('selected', true);\r
+\r
+            var list_style = settings.get('channel_list_style') || 'tabs';\r
+            this.$el.find('.setting-channel_list_style option').filter(function() {\r
+                return $(this).val() === list_style;\r
+            }).attr('selected', true);\r
+\r
             this.$el.find('.setting-scrollback').val(settings.get('scrollback') || '250');\r
 \r
             if (typeof settings.get('show_joins_parts') === 'undefined' || settings.get('show_joins_parts')) {\r
@@ -34,11 +44,18 @@
         saveSettings: function () {\r
             var settings = _kiwi.global.settings;\r
 \r
+            // Stop settings being updated while we're saving one by one\r
+            _kiwi.global.settings.off('change', this.loadSettings, this);\r
+\r
             settings.set('theme', $('.setting-theme', this.$el).val());\r
+            settings.set('channel_list_style', $('.setting-channel_list_style', this.$el).val());\r
             settings.set('scrollback', $('.setting-scrollback', this.$el).val());\r
             settings.set('show_joins_parts', $('.setting-show_joins_parts', this.$el).is(':checked'));\r
 \r
             settings.save();\r
+\r
+            // Continue listening for setting changes\r
+            _kiwi.global.settings.on('change', this.loadSettings, this);\r
         }\r
     });\r
 \r

diff --git a/client/assets/dev/index.html.tmpl b/client/assets/dev/index.html.tmpl
index bb82c6aaa54c6ebecdefb2fe22e2a81ddfee7e01..c1a85c241b22d4d96b45eb39e7dbe35b7cb2742a 100644 (file)
--- a/client/assets/dev/index.html.tmpl
+++ b/client/assets/dev/index.html.tmpl
@@ -151,8 +151,8 @@
         <div class="settings">\r
             ​<table>\r
                 <tr>\r
-                    <td>Theme</td>\r
-                    <td>\r
+                    <td class="label">Theme</td>\r
+                    <td class="setting">\r
                         <select class="setting-theme">\r
                             <option value="relaxed">Relaxed</option>\r
                             <option value="mini">Mini</option>\r
@@ -161,17 +161,30 @@
                     </td>\r
                 </tr>\r
                 <tr>\r
-                    <td>Scrollback</td>\r
-                    <td><input type="text" class="setting-scrollback" value="150" /></td>\r
+                    <td class="label">Channel list</td>\r
+                    <td class="setting">\r
+                        <select class="setting-channel_list_style">\r
+                            <option value="list">List</option>\r
+                            <option value="tabs">Tabs</option>\r
+                        </select>\r
+\r
+                        <i style="font-size:0.9em;">Lots of channels? `List` may be more suited</i>\r
+                    </td>\r
+                </tr>\r
+                <tr>\r
+                    <td class="label">Scrollback</td>\r
+                    <td class="setting"><input type="text" class="setting-scrollback" value="150" /></td>\r
                 </tr>\r
 \r
                 <tr>\r
-                    <td>Show joins/parts</td>\r
-                    <td><input type="checkbox" class="setting-show_joins_parts" /></td>\r
+                    <td class="label">Show joins/parts</td>\r
+                    <td class="setting"><input type="checkbox" class="setting-show_joins_parts" /></td>\r
                 </tr>\r
-            </table>\r
 \r
-            <button class="save">Save</button>​​​​​​​​​\r
+                <tr class="save">\r
+                    <td colspan="2"><button class="save">Save</button>​​​​​​​​​</td>\r
+                </tr>\r
+            </table>\r
         </div>\r
     </script>\r
 \r

diff --git a/client/assets/dev/view.js b/client/assets/dev/view.js
index 01eb9a8f358374bd43955ed07590e306fbe5bfa0..f8c173249b0230ca355034f1c57588473af7bf36 100644 (file)
--- a/client/assets/dev/view.js
+++ b/client/assets/dev/view.js
@@ -1057,6 +1057,9 @@ _kiwi.view.Application = Backbone.View.extend({
         _kiwi.global.settings.on('change:theme', this.updateTheme, this);\r
         this.updateTheme(getQueryVariable('theme'));\r
 \r
+        _kiwi.global.settings.on('change:channel_list_style', this.setTabLayout, this);\r
+        this.setTabLayout(_kiwi.global.settings.get('channel_list_style'));\r
+\r
         this.doLayout();\r
 \r
         $(document).keydown(this.setKeyFocus);\r
@@ -1090,6 +1093,22 @@ _kiwi.view.Application = Backbone.View.extend({
     },\r
 \r
 \r
+    setTabLayout: function (layout_style) {\r
+        // If called by the settings callback, get the correct new_value\r
+        if (layout_style === _kiwi.global.settings) {\r
+            layout_style = arguments[1];\r
+        }\r
+        \r
+        if (layout_style == 'list') {\r
+            this.$el.addClass('chanlist_treeview');\r
+        } else {\r
+            this.$el.removeClass('chanlist_treeview');\r
+        }\r
+        \r
+        this.doLayout();\r
+    },\r
+\r
+\r
     // Globally shift focus to the command input box on a keypress\r
     setKeyFocus: function (ev) {\r
         // If we're copying text, don't shift focus\r
@@ -1161,12 +1180,6 @@ _kiwi.view.Application = Backbone.View.extend({
     },\r
 \r
 \r
-    toggleLayout: function () {\r
-        this.$el.toggleClass('chanlist_treeview');\r
-        this.doLayout();\r
-    },\r
-\r
-\r
     alertWindow: function (title) {\r
         if (!this.alertWindowTimer) {\r
             this.alertWindowTimer = new (function () {\r