UI changes on nickchange (#78)

diff --git a/client_backbone/css/style.css b/client_backbone/css/style.css
index b171bd3b625a4eeca0f885302c50c464ad8d478c..dc240feffe7ef87f5d449edc264e1a3fa3d50861 100644 (file)
--- a/client_backbone/css/style.css
+++ b/client_backbone/css/style.css
@@ -141,7 +141,7 @@ a { color:#36C; text-decoration:none; cursor:pointer; }
     -webkit-border-radius:5px;
     -khtml-border-radius:5px;
 }
-#controlbox .input .nick { text-align: right; width:11em; left:0px; position:absolute; padding:2px; }
+#controlbox .input .nick { text-align: right; width:11em; left:0px; position:absolute; padding:2px; cursor: pointer; }
 #controlbox .input .nick a { text-decoration:none; color:black; }
 #controlbox .input .input_wrap {
     position:absolute;
@@ -158,7 +158,11 @@ a { color:#36C; text-decoration:none; cursor:pointer; }
 #controlbox .nickchange {
     position: absolute;
     left: 0px;
+    background: #1B1B1B; color:#eeeeee;
+    padding:10px;
 }
+#controlbox .nickchange input { padding:0.3em 0.5em; }
+#controlbox .nickchange button { padding:0.5em; }
 
 
 

diff --git a/client_backbone/dev/view.js b/client_backbone/dev/view.js
index 1940fe6ca548000fa8725b4896a9bc2eef910eea..944df04383943e18f091012432b7a55aa477adcc 100755 (executable)
--- a/client_backbone/dev/view.js
+++ b/client_backbone/dev/view.js
@@ -61,7 +61,8 @@ kiwi.view.UserBox = Backbone.View.extend({
 \r
 kiwi.view.NickChangeBox = Backbone.View.extend({\r
     events: {\r
-        'click .btn_nickchange': 'changeNick'\r
+        'submit': 'changeNick',\r
+        'click .cancel': 'close'\r
     },\r
     \r
     initialize: function () {\r
@@ -69,15 +70,24 @@ kiwi.view.NickChangeBox = Backbone.View.extend({
     },\r
     \r
     render: function () {\r
-        $('#controlbox').prepend(this.$el);\r
-        this.$el.css('bottom', $('#controlbox').height());\r
+        // Add the UI component and give it focus\r
+        kiwi.app.controlbox.$el.prepend(this.$el);\r
+        this.$el.find('input').focus();\r
+\r
+        this.$el.css('bottom', kiwi.app.controlbox.$el.outerHeight(true));\r
     },\r
     \r
-    changeNick: function (event) {;\r
-        var el = this.$el;\r
-        kiwi.gateway.changeNick($('#nickchange', this.$el).val(), function (err, val) {\r
-            el.remove();\r
+    close: function () {\r
+        this.$el.remove();\r
+\r
+    },\r
+\r
+    changeNick: function (event) {\r
+        var that = this;\r
+        kiwi.gateway.changeNick(this.$el.find('input').val(), function (err, val) {\r
+            that.close();\r
         });\r
+        return false;\r
     }\r
 });\r
 \r
@@ -327,7 +337,6 @@ kiwi.view.Panel = Backbone.View.extend({
         }\r
 \r
         // Only 'upgrade' the alert. Never down (unless clearing)\r
-        console.log(type_idx, this.alert_level);\r
         if (type_idx !== 0 && type_idx <= this.alert_level) {\r
             return;\r
         }\r
@@ -543,7 +552,7 @@ kiwi.view.ControlBox = Backbone.View.extend({
     preprocessor: null,\r
 \r
     events: {\r
-        'keydown input': 'process',\r
+        'keydown input.inp': 'process',\r
         'click .nick': 'showNickChange'\r
     },\r
 \r

diff --git a/client_backbone/index.html b/client_backbone/index.html
index 68fb9bda71c97265ab4a02bfe3ebc67e55fd5be1..374fd9bbb4b0d6797fc727a55572ed47c07d709c 100755 (executable)
--- a/client_backbone/index.html
+++ b/client_backbone/index.html
@@ -45,9 +45,9 @@
     </script>
     
     <script type="text/x-jquery-tmpl" id="tmpl_nickchange">
-        <div class="nickchange">
-            <label for="nickchange">New nick:</label> <input id="nickchange" type="text" mozactionhint="done" autocomplete="off" spellcheck="false"/> <input type="button" class="btn_nickchange" value="Change Nick" />
-        </div>
+        <form class="nickchange">
+            <label for="nickchange">New nick:</label> <input type="text" mozactionhint="done" autocomplete="off" spellcheck="false"/> <button>Change</button> <a class="cancel">Cancel</a>
+        </form>
     </script>
 
     <script type="text/x-jquery-tmpl" id="tmpl_server_select">