Server selection dialog UI refactor

diff --git a/client/assets/css/style.css b/client/assets/css/style.css
index b3e87697e96574d0c28f33474d7c1c97932634a4..80cff29f1c04d6f74b88422b1a00a79162c59048 100644 (file)
--- 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 7a0f85a891dabb4edcb2d2451c511bd7dfcd2635..baa65277707aed22e93637aeb702270b42825892 100644 (file)
--- a/client/assets/dev/index.html.tmpl
+++ b/client/assets/dev/index.html.tmpl
@@ -79,30 +79,54 @@
 \r
                 <form>\r
                     <div class="basic">\r
-                        <label for="server_select_nick">Nickname</label>\r
-                        <input type="text" class="nick" id="server_select_nick"> <br />\r
-\r
-                        <label for="server_select_channel">Channel</label>\r
-                        <input type="text" class="channel" id="server_select_channel"> <br />\r
-                        <input type="hidden" class="channel_key">\r
-\r
-                        <button type="submit">Start..</button> <br />\r
-                        <a href="" onclick="return false;" class="show_more">More</a>\r
+                        <table>\r
+                            <tr class="nick">\r
+                                <td><label for="server_select_nick">Nickname</label></td>\r
+                                <td><input type="text" class="nick" id="server_select_nick"></td>\r
+                            </tr>\r
+\r
+                            <tr class="have_pass">\r
+                                <td colspan="2">\r
+                                    <label for="server_select_show_pass">I have a password</label> <input type="checkbox" id="server_select_show_pass" style="width:auto;" />\r
+                                </td>\r
+                            </tr>\r
+\r
+                            <tr class="pass">\r
+                                <td><label for="server_select_password">Password</label></td>\r
+                                <td><input type="password" class="password" id="server_select_password"></td>\r
+                            </tr>\r
+\r
+                            <tr class="channel">\r
+                                <td><label for="server_select_channel">Channel</label></td>\r
+                                <td><input type="text" class="channel" id="server_select_channel"><input type="hidden" class="channel_key"></td>\r
+                            </tr>\r
+\r
+                            <tr class="start">\r
+                                <td colspan="2"><button type="submit">Start..</button></td>\r
+                            </tr>\r
+                        </table>\r
+\r
+                        <a href="" onclick="return false;" class="show_more">Server and network</a>\r
                     </div>\r
 \r
-                    <div class="more">\r
-                        <label for="server_select_server">Server</label>\r
-                        <input type="text" class="server" id="server_select_server"> <br />\r
-\r
-                        <label for="server_select_port">Port</label>\r
-                        <input type="text" class="port" id="server_select_port"> <br />\r
-\r
-                        <label for="server_select_ssl">SSL</label>\r
-                        <input type="checkbox" class="ssl" id="server_select_ssl"> <br />\r
 \r
-                        <br />\r
-                        <label for="server_select_password">Password</label>\r
-                        <input type="text" class="password" id="server_select_password"> <br />\r
+                    <div class="more">\r
+                        <table>\r
+                            <tr class="server">\r
+                                <td><label for="server_select_server">Server</label></td>\r
+                                <td><input type="text" class="server" id="server_select_server"></td>\r
+                            <tr>\r
+\r
+                            <tr class="port">\r
+                                <td><label for="server_select_port">Port</label></td>\r
+                                <td><input type="text" class="port" id="server_select_port"></td>\r
+                            </tr>\r
+\r
+                            <tr class="ssl">\r
+                                <td><label for="server_select_ssl">SSL</label></td>\r
+                                <td><input type="checkbox" class="ssl" id="server_select_ssl"></td>\r
+                            </tr>\r
+                        </table>\r
                     </div>\r
                 </form>\r
 \r

diff --git a/client/assets/dev/view.js b/client/assets/dev/view.js
index 0d6ca8e7368abe0546240d521bbc75268e938ece..422aafe0ffdfc51d8daa911ca62eda5bc6ec6256 100644 (file)
--- 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({\r
         events: {\r
             'submit form': 'submitForm',\r
-            'click .show_more': 'showMore'\r
+            'click .show_more': 'showMore',\r
+            'change .have_pass input': 'showPass'\r
         },\r
 \r
         initialize: function () {\r
@@ -145,26 +146,34 @@ _kiwi.view.ServerSelect = function () {
             if ($('button', this.$el).attr('disabled')) return;\r
             \r
             var values = {\r
-                nick: $('.nick', this.$el).val(),\r
-                server: $('.server', this.$el).val(),\r
-                port: $('.port', this.$el).val(),\r
-                ssl: $('.ssl', this.$el).prop('checked'),\r
-                password: $('.password', this.$el).val(),\r
-                channel: $('.channel', this.$el).val(),\r
-                channel_key: $('.channel_key', this.$el).val()\r
+                nick: $('input.nick', this.$el).val(),\r
+                server: $('input.server', this.$el).val(),\r
+                port: $('input.port', this.$el).val(),\r
+                ssl: $('input.ssl', this.$el).prop('checked'),\r
+                password: $('input.password', this.$el).val(),\r
+                channel: $('input.channel', this.$el).val(),\r
+                channel_key: $('input.channel_key', this.$el).val()\r
             };\r
 \r
             this.trigger('server_connect', values);\r
         },\r
 \r
         submitNickChange: function (event) {\r
-            _kiwi.gateway.changeNick($('.nick', this.$el).val());\r
+            _kiwi.gateway.changeNick($('input.nick', this.$el).val());\r
             this.networkConnecting();\r
         },\r
 \r
+        showPass: function (event) {\r
+            if (this.$el.find('tr.have_pass input').is(':checked')) {\r
+                this.$el.find('tr.pass').show().find('input').focus();\r
+            } else {\r
+                this.$el.find('tr.pass').hide().find('input').val('');\r
+            }\r
+        },\r
+\r
         showMore: function (event) {\r
             $('.more', this.$el).slideDown('fast');\r
-            $('.server', this.$el).select();\r
+            $('input.server', this.$el).select();\r
         },\r
 \r
         populateFields: function (defaults) {\r
@@ -180,13 +189,13 @@ _kiwi.view.ServerSelect = function () {
             channel = defaults.channel || '';\r
             channel_key = defaults.channel_key || '';\r
 \r
-            $('.nick', this.$el).val(nick);\r
-            $('.server', this.$el).val(server);\r
-            $('.port', this.$el).val(port);\r
-            $('.ssl', this.$el).prop('checked', ssl);\r
-            $('.password', this.$el).val(password);\r
-            $('.channel', this.$el).val(channel);\r
-            $('.channel_key', this.$el).val(channel_key);\r
+            $('input.nick', this.$el).val(nick);\r
+            $('input.server', this.$el).val(server);\r
+            $('input.port', this.$el).val(port);\r
+            $('input.ssl', this.$el).prop('checked', ssl);\r
+            $('input.password', this.$el).val(password);\r
+            $('input.channel', this.$el).val(channel);\r
+            $('input.channel_key', this.$el).val(channel_key);\r
         },\r
 \r
         hide: function () {\r
@@ -207,6 +216,7 @@ _kiwi.view.ServerSelect = function () {
             } else if (new_state === 'nick_change') {\r
                 $('.more', this.$el).hide();\r
                 $('.show_more', this.$el).hide();\r
+                $('input.nick', this.$el).select();\r
             }\r
 \r
             state = new_state;\r