Memberlist resizing #56

diff --git a/client_backbone/css/style.css b/client_backbone/css/style.css
index f7e92cc2eb8b669d274425a64494d437e49fa38e..bc3e3aec29724ae48b61f79d10fe8912257a6ee4 100644 (file)
--- a/client_backbone/css/style.css
+++ b/client_backbone/css/style.css
@@ -20,7 +20,10 @@ a { color:#36C; text-decoration:none; cursor:pointer; }
 #panels { position:absolute; left:0px; right:200px; bottom:100px; top:100px; }
 #memberlists { position:absolute; right:0px; width:200px; bottom:100px; top:100px; overflow-y:auto; }
 #controlbox { position: absolute; bottom:0px; width:100%; background-color:#1B1B1B; display:none; }
-
+#memberlists_resize_handle {
+    position: absolute; width:10px; z-index:1; cursor:w-resize;
+    background:url('../img/resize_handle.png') no-repeat; background-position:center;
+}
 
 
 #toolbar #tabs { margin-right: 200px; }

diff --git a/client_backbone/dev/model_application.js b/client_backbone/dev/model_application.js
index 48dc8a3cd01a9fad8e58ab5d72f310a4480fd140..64ed872b7f078cd9c107b85e56403d530e6f1d06 100755 (executable)
--- a/client_backbone/dev/model_application.js
+++ b/client_backbone/dev/model_application.js
@@ -99,6 +99,7 @@ kiwi.model.Application = Backbone.Model.extend(new (function () {
 \r
         this.message = new kiwi.view.StatusMessage({el: $('#status_message')[0]});\r
 \r
+        this.resize_handle = new kiwi.view.ResizeHandler({el: $('#memberlists_resize_handle')[0]});\r
         \r
         this.panels.server.view.show();\r
 \r

diff --git a/client_backbone/dev/view.js b/client_backbone/dev/view.js
index 13fffa37f78386fa23ead8588eaef413fab29ac7..277eebb1417b7e0d012419dac19365ba76d6c357 100755 (executable)
--- a/client_backbone/dev/view.js
+++ b/client_backbone/dev/view.js
@@ -348,13 +348,13 @@ kiwi.view.Panel = Backbone.View.extend({
         if (members) {\r
             $('#memberlists').show();\r
             members.view.show();\r
-            this.$container.parent().css('right', '200px');\r
         } else {\r
             // Memberlist not found for this panel, hide any active ones\r
             $('#memberlists').hide().children().removeClass('active');\r
-            this.$container.parent().css('right', '0');\r
         }\r
 \r
+        kiwi.app.view.doLayout();\r
+\r
         this.scrollToBottom();\r
         this.alert('none');\r
 \r
@@ -817,6 +817,38 @@ kiwi.view.StatusMessage = Backbone.View.extend({
 \r
 \r
 \r
+kiwi.view.ResizeHandler = Backbone.View.extend({\r
+    events: {\r
+        'mousedown': 'startDrag',\r
+        'mouseup': 'stopDrag'\r
+    },\r
+\r
+    dragging: false,\r
+    starting_width: {},\r
+\r
+    initialize: function () {\r
+        $(window).on('mousemove', $.proxy(this.onDrag, this));\r
+    },\r
+\r
+    startDrag: function (event) {\r
+        this.dragging = true;\r
+    },\r
+\r
+    stopDrag: function (event) {\r
+        this.dragging = false;\r
+    },\r
+\r
+    onDrag: function (event) {\r
+        if (!this.dragging) return;\r
+\r
+        this.$el.css('left', event.clientX - (this.$el.outerWidth(true) / 2));\r
+        $('#memberlists').css('width', this.$el.parent().width() - (this.$el.position().left + this.$el.outerWidth()));\r
+        kiwi.app.view.doLayout();\r
+    }\r
+});\r
+\r
+\r
+\r
 kiwi.view.Application = Backbone.View.extend({\r
     initialize: function () {\r
         $(window).resize(this.doLayout);\r
@@ -850,6 +882,7 @@ kiwi.view.Application = Backbone.View.extend({
         var el_memberlists = $('#memberlists');\r
         var el_toolbar = $('#toolbar');\r
         var el_controlbox = $('#controlbox');\r
+        var el_resize_handle = $('#memberlists_resize_handle');\r
 \r
         var css_heights = {\r
             top: el_toolbar.outerHeight(true),\r
@@ -858,6 +891,17 @@ kiwi.view.Application = Backbone.View.extend({
 \r
         el_panels.css(css_heights);\r
         el_memberlists.css(css_heights);\r
+        el_resize_handle.css(css_heights);\r
+\r
+        if (el_memberlists.css('display') != 'none') {\r
+            // Handle + panels to the side of the memberlist\r
+            el_panels.css('right', el_memberlists.outerWidth(true) + el_resize_handle.outerWidth(true));\r
+            el_resize_handle.css('left', el_memberlists.position().left - el_resize_handle.outerWidth(true));\r
+        } else {\r
+            // Memberlist is hidden so handle + panels to the right edge\r
+            el_panels.css('right', el_resize_handle.outerWidth(true));\r
+            el_resize_handle.css('left', el_panels.outerWidth(true));\r
+        }\r
     },\r
 \r
 \r

diff --git a/client_backbone/img/scroll_handle.png b/client_backbone/img/resize_handle.png
similarity index 100%
rename from client_backbone/img/scroll_handle.png
rename to client_backbone/img/resize_handle.png

diff --git a/client_backbone/index.html b/client_backbone/index.html
index 9fb30ddcc63e11d4fb7c51d782c5321063345f05..b3cd01ed25036a19e09af1bb25b1af609f5de8aa 100755 (executable)
--- a/client_backbone/index.html
+++ b/client_backbone/index.html
@@ -27,6 +27,8 @@
             <div id="status_message"></div>
         </div>
 
+        <div id="memberlists_resize_handle"></div>
+
         <div id="panels">
             <div class="panel_container container1"></div>
         </div>
@@ -186,7 +188,7 @@
                 // Override the kiwi_server to use. (Think: running on standalone client..)
                 //kiwi_server: 'http://kiwiirc.com:80'
             };
-            
+
             // Start the app by either the dev or closed environment
             (kiwi && kiwi.global && kiwi.global.start(opts)) || (kiwi && kiwi.start(opts));
         }