From b0bbaf100424d86cbc333994c5f5b389c08d9030 Mon Sep 17 00:00:00 2001
From: Darren <darren@darrenwhitlen.com>
Date: Sat, 22 Sep 2012 18:42:35 +0100
Subject: [PATCH] UI changes on nickchange (#78)

---
 client_backbone/css/style.css |  6 +++++-
 client_backbone/dev/view.js   | 27 ++++++++++++++++++---------
 client_backbone/index.html    |  6 +++---
 3 files changed, 26 insertions(+), 13 deletions(-)

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