From bac3c32ee9b2cc28d457e1a6dcd71cb395be77f1 Mon Sep 17 00:00:00 2001
From: Darren <darren@darrenwhitlen.com>
Date: Wed, 5 Dec 2012 21:37:00 +0000
Subject: [PATCH] Server selection dialog UI refactor

---
 client/assets/css/style.css       | 14 ++++---
 client/assets/dev/index.html.tmpl | 66 +++++++++++++++++++++----------
 client/assets/dev/view.js         | 44 +++++++++++++--------
 3 files changed, 81 insertions(+), 43 deletions(-)

diff --git a/client/assets/css/style.css b/client/assets/css/style.css
index b3e8769..80cff29 100644
--- a/client/assets/css/style.css
+++ b/client/assets/css/style.css
@@ -158,7 +158,7 @@ html, body { height:100%; }
 #kiwi .server_select .more { display: none; }
 #kiwi .server_select button {  }
 #kiwi .server_select input { }
-#kiwi .server_select label { float:left; width:5em; }
+#kiwi .server_select label { }
 #kiwi .server_select br { clear:both; }
 #kiwi .server_select .basic input { }
 #kiwi .server_select .basic label { }
@@ -470,15 +470,19 @@ html, body { height:100%; }
 /* The server select dialog */
 #kiwi.theme_relaxed .server_select { width:730px;  padding:3em 0 2em 0; margin: 0 auto; }
 #kiwi.theme_relaxed .server_select .more { display: none; width:270px; margin:0 auto; }
-#kiwi.theme_relaxed .server_select button { float:right; padding:3px 7px; margin-top:10px; }
-#kiwi.theme_relaxed .server_select input { float:right; margin-bottom:5px; padding:3px 7px; width:150px; }
-#kiwi.theme_relaxed .server_select label { float:left; width:5em; padding-top:3px }
+#kiwi.theme_relaxed .server_select table tr td { padding:5px; }
+#kiwi.theme_relaxed .server_select button { float:right; padding:3px 7px; }
+#kiwi.theme_relaxed .server_select input { padding:3px 7px; width:150px; }
+#kiwi.theme_relaxed .server_select label { }
 #kiwi.theme_relaxed .server_select br { clear:both; }
 #kiwi.theme_relaxed .server_select .basic input, .server_select .basic button { font-size:1em; padding:0.5em 1em; }
 #kiwi.theme_relaxed .server_select .basic input { width:170px; }
 #kiwi.theme_relaxed .server_select .basic label { font-size:1.3em; margin-top:4px; }
+#kiwi.theme_relaxed .server_select .basic tr.have_pass { font-size:0.8em; }
+#kiwi.theme_relaxed .server_select .basic tr.pass { display:none; }
+#kiwi.theme_relaxed .server_select .basic tr.channel td { padding-top:1em; }
 #kiwi.theme_relaxed .server_select .basic { border-bottom: 1px dashed gray; margin-bottom:1em; }
-#kiwi.theme_relaxed .server_select .basic .show_more { display: block; width:40px; margin:10px 0 0 0; font-size:0.8em; background: url(../img/more.png) no-repeat right 7px; }
+#kiwi.theme_relaxed .server_select .basic .show_more { display: block; width:110px; margin:10px 0 0 0; font-size:0.8em; background: url(../img/more.png) no-repeat right 7px; }
 #kiwi.theme_relaxed .server_select.single_server .basic { border:none; }
 #kiwi.theme_relaxed .server_select .status { text-align: center; font-weight: bold; padding:1em; }
 #kiwi.theme_relaxed .server_select .status.ok { }
diff --git a/client/assets/dev/index.html.tmpl b/client/assets/dev/index.html.tmpl
index 7a0f85a..baa6527 100644
--- a/client/assets/dev/index.html.tmpl
+++ b/client/assets/dev/index.html.tmpl
@@ -79,30 +79,54 @@
 
                 <form>
                     <div class="basic">
-                        <label for="server_select_nick">Nickname</label>
-                        <input type="text" class="nick" id="server_select_nick"> <br />
-
-                        <label for="server_select_channel">Channel</label>
-                        <input type="text" class="channel" id="server_select_channel"> <br />
-                        <input type="hidden" class="channel_key">
-
-                        <button type="submit">Start..</button> <br />
-                        <a href="" onclick="return false;" class="show_more">More</a>
+                        <table>
+                            <tr class="nick">
+                                <td><label for="server_select_nick">Nickname</label></td>
+                                <td><input type="text" class="nick" id="server_select_nick"></td>
+                            </tr>
+
+                            <tr class="have_pass">
+                                <td colspan="2">
+                                    <label for="server_select_show_pass">I have a password</label> <input type="checkbox" id="server_select_show_pass" style="width:auto;" />
+                                </td>
+                            </tr>
+
+                            <tr class="pass">
+                                <td><label for="server_select_password">Password</label></td>
+                                <td><input type="password" class="password" id="server_select_password"></td>
+                            </tr>
+
+                            <tr class="channel">
+                                <td><label for="server_select_channel">Channel</label></td>
+                                <td><input type="text" class="channel" id="server_select_channel"><input type="hidden" class="channel_key"></td>
+                            </tr>
+
+                            <tr class="start">
+                                <td colspan="2"><button type="submit">Start..</button></td>
+                            </tr>
+                        </table>
+
+                        <a href="" onclick="return false;" class="show_more">Server and network</a>
                     </div>
 
-                    <div class="more">
-                        <label for="server_select_server">Server</label>
-                        <input type="text" class="server" id="server_select_server"> <br />
-
-                        <label for="server_select_port">Port</label>
-                        <input type="text" class="port" id="server_select_port"> <br />
-
-                        <label for="server_select_ssl">SSL</label>
-                        <input type="checkbox" class="ssl" id="server_select_ssl"> <br />
 
-                        <br />
-                        <label for="server_select_password">Password</label>
-                        <input type="text" class="password" id="server_select_password"> <br />
+                    <div class="more">
+                        <table>
+                            <tr class="server">
+                                <td><label for="server_select_server">Server</label></td>
+                                <td><input type="text" class="server" id="server_select_server"></td>
+                            <tr>
+
+                            <tr class="port">
+                                <td><label for="server_select_port">Port</label></td>
+                                <td><input type="text" class="port" id="server_select_port"></td>
+                            </tr>
+
+                            <tr class="ssl">
+                                <td><label for="server_select_ssl">SSL</label></td>
+                                <td><input type="checkbox" class="ssl" id="server_select_ssl"></td>
+                            </tr>
+                        </table>
                     </div>
                 </form>
 
diff --git a/client/assets/dev/view.js b/client/assets/dev/view.js
index 0d6ca8e..422aafe 100644
--- a/client/assets/dev/view.js
+++ b/client/assets/dev/view.js
@@ -101,7 +101,8 @@ _kiwi.view.ServerSelect = function () {
     var model = Backbone.View.extend({
         events: {
             'submit form': 'submitForm',
-            'click .show_more': 'showMore'
+            'click .show_more': 'showMore',
+            'change .have_pass input': 'showPass'
         },
 
         initialize: function () {
@@ -145,26 +146,34 @@ _kiwi.view.ServerSelect = function () {
             if ($('button', this.$el).attr('disabled')) return;
             
             var values = {
-                nick: $('.nick', this.$el).val(),
-                server: $('.server', this.$el).val(),
-                port: $('.port', this.$el).val(),
-                ssl: $('.ssl', this.$el).prop('checked'),
-                password: $('.password', this.$el).val(),
-                channel: $('.channel', this.$el).val(),
-                channel_key: $('.channel_key', this.$el).val()
+                nick: $('input.nick', this.$el).val(),
+                server: $('input.server', this.$el).val(),
+                port: $('input.port', this.$el).val(),
+                ssl: $('input.ssl', this.$el).prop('checked'),
+                password: $('input.password', this.$el).val(),
+                channel: $('input.channel', this.$el).val(),
+                channel_key: $('input.channel_key', this.$el).val()
             };
 
             this.trigger('server_connect', values);
         },
 
         submitNickChange: function (event) {
-            _kiwi.gateway.changeNick($('.nick', this.$el).val());
+            _kiwi.gateway.changeNick($('input.nick', this.$el).val());
             this.networkConnecting();
         },
 
+        showPass: function (event) {
+            if (this.$el.find('tr.have_pass input').is(':checked')) {
+                this.$el.find('tr.pass').show().find('input').focus();
+            } else {
+                this.$el.find('tr.pass').hide().find('input').val('');
+            }
+        },
+
         showMore: function (event) {
             $('.more', this.$el).slideDown('fast');
-            $('.server', this.$el).select();
+            $('input.server', this.$el).select();
         },
 
         populateFields: function (defaults) {
@@ -180,13 +189,13 @@ _kiwi.view.ServerSelect = function () {
             channel = defaults.channel || '';
             channel_key = defaults.channel_key || '';
 
-            $('.nick', this.$el).val(nick);
-            $('.server', this.$el).val(server);
-            $('.port', this.$el).val(port);
-            $('.ssl', this.$el).prop('checked', ssl);
-            $('.password', this.$el).val(password);
-            $('.channel', this.$el).val(channel);
-            $('.channel_key', this.$el).val(channel_key);
+            $('input.nick', this.$el).val(nick);
+            $('input.server', this.$el).val(server);
+            $('input.port', this.$el).val(port);
+            $('input.ssl', this.$el).prop('checked', ssl);
+            $('input.password', this.$el).val(password);
+            $('input.channel', this.$el).val(channel);
+            $('input.channel_key', this.$el).val(channel_key);
         },
 
         hide: function () {
@@ -207,6 +216,7 @@ _kiwi.view.ServerSelect = function () {
             } else if (new_state === 'nick_change') {
                 $('.more', this.$el).hide();
                 $('.show_more', this.$el).hide();
+                $('input.nick', this.$el).select();
             }
 
             state = new_state;
-- 
2.25.1