From 039a31561b15aa059baae22bfd0e0d2f351abed1 Mon Sep 17 00:00:00 2001
From: Darren <darren@darrenwhitlen.com>
Date: Sun, 17 Feb 2013 17:24:55 +0000
Subject: [PATCH] Channel tabs/list switching on supported themes

---
 client/assets/css/style.css          | 13 +++++++++++++
 client/assets/dev/applet_settings.js | 19 +++++++++++++++++-
 client/assets/dev/index.html.tmpl    | 29 ++++++++++++++++++++--------
 client/assets/dev/view.js            | 25 ++++++++++++++++++------
 4 files changed, 71 insertions(+), 15 deletions(-)

diff --git a/client/assets/css/style.css b/client/assets/css/style.css
index 01e303e..3459573 100644
--- 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 8b9a061..93a222f 100644
--- a/client/assets/dev/applet_settings.js
+++ b/client/assets/dev/applet_settings.js
@@ -20,7 +20,17 @@
         loadSettings: function () {
             var settings = _kiwi.global.settings;
 
-            this.$el.find('.setting-theme').val(settings.get('theme') || 'relaxed');
+            // TODO: Tidy this up
+            var theme = settings.get('theme') || 'relaxed';
+            this.$el.find('.setting-theme option').filter(function() {
+                return $(this).val() === theme;
+            }).attr('selected', true);
+
+            var list_style = settings.get('channel_list_style') || 'tabs';
+            this.$el.find('.setting-channel_list_style option').filter(function() {
+                return $(this).val() === list_style;
+            }).attr('selected', true);
+
             this.$el.find('.setting-scrollback').val(settings.get('scrollback') || '250');
 
             if (typeof settings.get('show_joins_parts') === 'undefined' || settings.get('show_joins_parts')) {
@@ -34,11 +44,18 @@
         saveSettings: function () {
             var settings = _kiwi.global.settings;
 
+            // Stop settings being updated while we're saving one by one
+            _kiwi.global.settings.off('change', this.loadSettings, this);
+
             settings.set('theme', $('.setting-theme', this.$el).val());
+            settings.set('channel_list_style', $('.setting-channel_list_style', this.$el).val());
             settings.set('scrollback', $('.setting-scrollback', this.$el).val());
             settings.set('show_joins_parts', $('.setting-show_joins_parts', this.$el).is(':checked'));
 
             settings.save();
+
+            // Continue listening for setting changes
+            _kiwi.global.settings.on('change', this.loadSettings, this);
         }
     });
 
diff --git a/client/assets/dev/index.html.tmpl b/client/assets/dev/index.html.tmpl
index bb82c6a..c1a85c2 100644
--- a/client/assets/dev/index.html.tmpl
+++ b/client/assets/dev/index.html.tmpl
@@ -151,8 +151,8 @@
         <div class="settings">
             ​<table>
                 <tr>
-                    <td>Theme</td>
-                    <td>
+                    <td class="label">Theme</td>
+                    <td class="setting">
                         <select class="setting-theme">
                             <option value="relaxed">Relaxed</option>
                             <option value="mini">Mini</option>
@@ -161,17 +161,30 @@
                     </td>
                 </tr>
                 <tr>
-                    <td>Scrollback</td>
-                    <td><input type="text" class="setting-scrollback" value="150" /></td>
+                    <td class="label">Channel list</td>
+                    <td class="setting">
+                        <select class="setting-channel_list_style">
+                            <option value="list">List</option>
+                            <option value="tabs">Tabs</option>
+                        </select>
+
+                        <i style="font-size:0.9em;">Lots of channels? `List` may be more suited</i>
+                    </td>
+                </tr>
+                <tr>
+                    <td class="label">Scrollback</td>
+                    <td class="setting"><input type="text" class="setting-scrollback" value="150" /></td>
                 </tr>
 
                 <tr>
-                    <td>Show joins/parts</td>
-                    <td><input type="checkbox" class="setting-show_joins_parts" /></td>
+                    <td class="label">Show joins/parts</td>
+                    <td class="setting"><input type="checkbox" class="setting-show_joins_parts" /></td>
                 </tr>
-            </table>
 
-            <button class="save">Save</button>​​​​​​​​​
+                <tr class="save">
+                    <td colspan="2"><button class="save">Save</button>​​​​​​​​​</td>
+                </tr>
+            </table>
         </div>
     </script>
 
diff --git a/client/assets/dev/view.js b/client/assets/dev/view.js
index 01eb9a8..f8c1732 100644
--- 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);
         this.updateTheme(getQueryVariable('theme'));
 
+        _kiwi.global.settings.on('change:channel_list_style', this.setTabLayout, this);
+        this.setTabLayout(_kiwi.global.settings.get('channel_list_style'));
+
         this.doLayout();
 
         $(document).keydown(this.setKeyFocus);
@@ -1090,6 +1093,22 @@ _kiwi.view.Application = Backbone.View.extend({
     },
 
 
+    setTabLayout: function (layout_style) {
+        // If called by the settings callback, get the correct new_value
+        if (layout_style === _kiwi.global.settings) {
+            layout_style = arguments[1];
+        }
+        
+        if (layout_style == 'list') {
+            this.$el.addClass('chanlist_treeview');
+        } else {
+            this.$el.removeClass('chanlist_treeview');
+        }
+        
+        this.doLayout();
+    },
+
+
     // Globally shift focus to the command input box on a keypress
     setKeyFocus: function (ev) {
         // If we're copying text, don't shift focus
@@ -1161,12 +1180,6 @@ _kiwi.view.Application = Backbone.View.extend({
     },
 
 
-    toggleLayout: function () {
-        this.$el.toggleClass('chanlist_treeview');
-        this.doLayout();
-    },
-
-
     alertWindow: function (title) {
         if (!this.alertWindowTimer) {
             this.alertWindowTimer = new (function () {
-- 
2.25.1