network + applet tabs looking + fitting better

diff --git a/client/assets/css/style.css b/client/assets/css/style.css
index e11828fb7be870f8c322d170f1ac2e4d402601b9..46556ce9792c517bdcaef9c6062f31e3901fc028 100644 (file)
--- a/client/assets/css/style.css
+++ b/client/assets/css/style.css
@@ -31,7 +31,7 @@ html, body { height:100%; }
     overflow: hidden;
     display:block;
 }
-#kiwi #toolbar .panellist .connection li {
+#kiwi #toolbar .panellist li {
     float: left; list-style: inline;
     display:inline; position:relative;
     padding:5px; margin:3px;
@@ -43,11 +43,16 @@ html, body { height:100%; }
 #kiwi #toolbar .panellist .alert_activity { font-weight: bold; }
 #kiwi #toolbar .panellist .alert_action { font-weight: bold; }
 
-#kiwi #toolbar .panellist .connection { display: inline; }
-#kiwi #toolbar .panellist .connection li .part { position: absolute; top: 5px; right: 5px; }
-#kiwi #toolbar .panellist .connection li .part:before { content:"[x]"; }
-#kiwi #toolbar .panellist .connection li .part:hover { color: #900; }
-#kiwi #toolbar .panellist .connection li img.icon { left:5px; top:2px; height:auto; width:auto; }
+#kiwi #toolbar .panellist li { width: auto; text-align: left; }
+#kiwi #toolbar .panellist li .part { position: absolute; top: 5px; right: 5px; }
+#kiwi #toolbar .panellist li .part:before { content:"[x]"; }
+#kiwi #toolbar .panellist li .part:hover { color: #900; }
+#kiwi #toolbar .panellist li img.icon { left:5px; top:2px; height:auto; width:auto; }
+
+#kiwi #toolbar .connections { overflow:hidden; }
+#kiwi #toolbar .connections .connection { float:left; }
+#kiwi #toolbar .connections .panellist { display:inline; }
+#kiwi #toolbar .connections .panellist:after { content:""; }
 
 #kiwi #status_message {
     background: #FFF;
@@ -302,7 +307,7 @@ html, body { height:100%; }
 #kiwi.theme_relaxed #memberlists_resize_handle {
     /*background:url('../img/resize_handle.png') no-repeat; background-position:center;*/
 }
-#kiwi.theme_relaxed #toolbar .panellist .connection li {
+#kiwi.theme_relaxed #toolbar .panellist li {
     line-height: 1.4em;
     vertical-align: middle;
     
@@ -329,23 +334,23 @@ html, body { height:100%; }
     background-color: #eee;
 }
 
-#kiwi.theme_relaxed #toolbar .panellist .connection .alert_highlight { /*background: #990000;*/ }
-#kiwi.theme_relaxed #toolbar .panellist .connection .alert_activity { font-weight:normal; }
-#kiwi.theme_relaxed #toolbar .panellist .connection .alert_action { font-weight:normal; }
+#kiwi.theme_relaxed #toolbar .panellist .alert_highlight { /*background: #990000;*/ }
+#kiwi.theme_relaxed #toolbar .panellist .alert_activity { font-weight:normal; }
+#kiwi.theme_relaxed #toolbar .panellist .alert_action { font-weight:normal; }
 
-#kiwi.theme_relaxed #toolbar .panellist .connection .active { padding-right:23px; }
-#kiwi.theme_relaxed #toolbar .panellist .connection li .part:before { content:"\f00d"; }
+#kiwi.theme_relaxed #toolbar .panellist .active { padding-right:23px; }
+#kiwi.theme_relaxed #toolbar .panellist li .part:before { content:"\f00d"; }
 
-#kiwi.theme_relaxed #toolbar .panellist .connection li.server span { padding-left: 5px; }
-#kiwi.theme_relaxed.connected #toolbar .panellist .connection li.server:before { content: "\f0ec"; color:#3F9532; }
+#kiwi.theme_relaxed #toolbar .panellist li.server span { padding-left: 5px; }
+#kiwi.theme_relaxed.connected #toolbar .panellist li.server:before { content: "\f0ec"; color:#3F9532; }
 #kiwi.theme_relaxed #toolbar .panellist li.server:before { content: "\f06a"; color:#900; font-size:1.5em; line-height:1em; vertical-align:middle; }
 
 /* Tab texts are within a span */
-#kiwi.theme_relaxed #toolbar .panellist .connection li span  { line-height:20px; vertical-align:middle; display:inline-block; }
+#kiwi.theme_relaxed #toolbar .panellist li span  { line-height:20px; vertical-align:middle; display:inline-block; }
 
-#kiwi.theme_relaxed #toolbar .panellist .connection li.active .activity { display:none; }
-#kiwi.theme_relaxed #toolbar .panellist .connection li .activity.zero { visibility:hidden; }
-#kiwi.theme_relaxed #toolbar .panellist .connection li .activity {
+#kiwi.theme_relaxed #toolbar .panellist li.active .activity { display:none; }
+#kiwi.theme_relaxed #toolbar .panellist li .activity.zero { visibility:hidden; }
+#kiwi.theme_relaxed #toolbar .panellist li .activity {
     padding: 1px 3px; margin-left:1em;
     border-radius: 4px;
     background: #3F9532; color:#000; /*color: #ff5300;*/
@@ -353,7 +358,7 @@ html, body { height:100%; }
     display:inline-block;
     width:2em;
 }
-#kiwi.theme_relaxed #toolbar .panellist .connection li.alert_highlight .activity {
+#kiwi.theme_relaxed #toolbar .panellist li.alert_highlight .activity {
     color: #fff; background: #a60400;
 }
 
@@ -1372,4 +1377,4 @@ html, body { height:100%; }
 
 
 #kiwi.theme_basic .ui_menu .ui_menu_foot .close { float:right; font-size:0.9em; margin-right:1em; color: #999; }
-#kiwi.theme_basic .ui_menu .ui_menu_foot .close:hover { color: #222; }
+#kiwi.theme_basic .ui_menu .ui_menu_foot .close:hover { color: #222; }
\ No newline at end of file

diff --git a/client/assets/dev/model_applet.js b/client/assets/dev/model_applet.js
index 90204e8af337ac9c8bbcc3f7448a245852fdd951..0dca6377fd21776d18a62797659fcdd47174956d 100644 (file)
--- a/client/assets/dev/model_applet.js
+++ b/client/assets/dev/model_applet.js
@@ -91,7 +91,7 @@ _kiwi.model.Applet = _kiwi.model.Panel.extend({
     loadOnce: function (applet_name) {\r
 \r
         // See if we have an instance loaded already\r
-        var applet = _.find(_kiwi.app.panels.models, function(panel) {\r
+        var applet = _.find(_kiwi.app.panels('applets'), function(panel) {\r
             // Ignore if it's not an applet\r
             if (!panel.isApplet()) return;\r
 \r
@@ -122,7 +122,7 @@ _kiwi.model.Applet = _kiwi.model.Panel.extend({
         applet.load(new _kiwi.applets[applet_name]({_applet_name: applet_name}));\r
 \r
         // Add it into the tab list\r
-        _kiwi.app.panels.add(applet);\r
+        _kiwi.app.applet_panels.add(applet);\r
 \r
 \r
         return applet;\r

diff --git a/client/assets/dev/model_application.js b/client/assets/dev/model_application.js
index 3825f61fd64d4161423f447ef3bddbf71f59dfff..caf879b0a81e1801ea73aeed4500c590497d2c1c 100644 (file)
--- a/client/assets/dev/model_application.js
+++ b/client/assets/dev/model_application.js
@@ -106,7 +106,11 @@ _kiwi.model.Application = function () {
 \r
         this.initializeClient = function () {\r
             this.view = new _kiwi.view.Application({model: this, el: this.get('container')});\r
-            \r
+\r
+            this.applet_panels = new _kiwi.model.PanelList();\r
+            this.applet_panels.view.$el.addClass('panellist applets');\r
+            this.view.$el.find('#tabs').append(this.applet_panels.view.$el);\r
+\r
             /**\r
              * This is temporary.\r
              * While multiple server support is being worked on,\r
@@ -289,9 +293,20 @@ _kiwi.model.Application = function () {
 \r
 \r
         this.panels = (function() {\r
-            var fn = function() {\r
-                // Get a complete list of panels\r
-                var panels = this.connections.panels();\r
+            var fn = function(panel_type) {\r
+                var panels;\r
+\r
+                // Default panel type\r
+                panel_type = panel_type || 'connections';\r
+\r
+                switch (panel_type) {\r
+                case 'connections':\r
+                    panels = this.connections.panels();\r
+                    break;\r
+                case 'applets':\r
+                    panels = this.applet_panels.models;\r
+                    break;\r
+                }\r
 \r
                 // Active panels / server\r
                 panels.active = this.connections.active_panel;\r

diff --git a/client/assets/dev/model_gateway.js b/client/assets/dev/model_gateway.js
index 000aa8868f5073fdde35b560bb9ded2143b64556..abe95d882b64b358904ad8371590c8e0418a3cae 100644 (file)
--- a/client/assets/dev/model_gateway.js
+++ b/client/assets/dev/model_gateway.js
@@ -240,14 +240,17 @@ _kiwi.model.Gateway = function () {
             h = connection_info;\r
 \r
         this.socket.emit('kiwi', {command: 'connect', nick: h.nick, hostname: h.host, port: h.port, ssl: h.ssl, password: h.password}, function (err, server_num) {\r
+            var connection;\r
+\r
             if (!err) {\r
                 // TODO: Remove this whole premature connection thing when panel code is tidied\r
                 if (server_num != 0 && !_kiwi.app.connections.getByConnectionId(server_num)){\r
-                    _kiwi.app.connections.add(new _kiwi.model.Network({connection_id: server_num}));\r
+                    connection = new _kiwi.model.Network({connection_id: server_num});\r
+                    _kiwi.app.connections.add(connection);\r
                 }\r
 \r
                 console.log("_kiwi.gateway.socket.on('connect')");\r
-                callback_fn && callback_fn(err);\r
+                callback_fn && callback_fn(err, connection);\r
                 \r
             } else {\r
                 console.log("_kiwi.gateway.socket.on('error')", {reason: err});\r

diff --git a/client/assets/dev/model_network.js b/client/assets/dev/model_network.js
index b48fdf23df689ead793b1091b01066fc975df286..9bc709bf5f423404adfa7cd5d308fdf3e163273b 100644 (file)
--- a/client/assets/dev/model_network.js
+++ b/client/assets/dev/model_network.js
@@ -46,7 +46,7 @@
             // Automatically create a server tab
             var server_panel = new _kiwi.model.Server({name: 'Server'});
             this.panels.add(server_panel);
-            this.panels.server = server_panel;
+            this.panels.server = this.panels.active = server_panel;
         },
 
 

diff --git a/client/assets/dev/model_panellist.js b/client/assets/dev/model_panellist.js
index a6cd9e1af10bc60d0eecd5c5d30d38a3cba736e7..39d1a1afe9a6aa8a059e715940e373fa12bbf65d 100644 (file)
--- a/client/assets/dev/model_panellist.js
+++ b/client/assets/dev/model_panellist.js
@@ -7,8 +7,10 @@ _kiwi.model.PanelList = Backbone.Collection.extend({
     initialize: function (elements, network) {\r
         var that = this;\r
 \r
-        // The network this PanelList is associated with\r
-        this.network = network;\r
+        // If this PanelList is associated with a network/connection\r
+        if (network) {\r
+            this.network = network;\r
+        }\r
 \r
         this.view = new _kiwi.view.Tabs({model: this});\r
 \r

diff --git a/client/assets/dev/view.js b/client/assets/dev/view.js
index eed81b4149b8b8285a7e626581b7254e41acf193..1d24cc039a3839f584774f72955957ed021be765 100644 (file)
--- a/client/assets/dev/view.js
+++ b/client/assets/dev/view.js
@@ -687,7 +687,7 @@ _kiwi.view.Channel = _kiwi.view.Panel.extend({
 // Model for this = _kiwi.model.NetworkPanelList\r
 _kiwi.view.NetworkTabs = Backbone.View.extend({\r
     tagName: 'ul',\r
-    className: 'panellist channels',\r
+    className: 'connections',\r
 \r
     initialize: function() {\r
         this.model.on('add', this.networkAdded, this);\r
@@ -714,6 +714,7 @@ _kiwi.view.NetworkTabs = Backbone.View.extend({
 // Model for this = _kiwi.model.PanelList\r
 _kiwi.view.Tabs = Backbone.View.extend({\r
     tagName: 'ul',\r
+    className: 'panellist',\r
 \r
     events: {\r
         'click li': 'tabClick',\r
@@ -727,9 +728,16 @@ _kiwi.view.Tabs = Backbone.View.extend({
 \r
         this.model.on('active', this.panelActive, this);\r
 \r
-        this.model.network.on('change:name', function (network, new_val) {\r
-            $('span', this.model.server.tab).text(new_val);\r
-        }, this);\r
+        // Network tabs start with a server, so determine what we are now\r
+        this.is_network = false;\r
+\r
+        if (this.model.network) {\r
+            this.is_network = true;\r
+\r
+            this.model.network.on('change:name', function (network, new_val) {\r
+                $('span', this.model.server.tab).text(new_val);\r
+            }, this);\r
+        }\r
     },\r
 \r
     render: function () {\r
@@ -737,21 +745,26 @@ _kiwi.view.Tabs = Backbone.View.extend({
 \r
         this.$el.empty();\r
         \r
-        // Add the server tab first\r
-        this.model.server.tab\r
-            .data('panel', this.model.server)\r
-            .data('connection_id', this.model.network.get('connection_id'))\r
-            .appendTo(this.$el);\r
+        if (this.is_network) {\r
+            // Add the server tab first\r
+            this.model.server.tab\r
+                .data('panel', this.model.server)\r
+                .data('connection_id', this.model.network.get('connection_id'))\r
+                .appendTo(this.$el);\r
+        }\r
 \r
         // Go through each panel adding its tab\r
         this.model.forEach(function (panel) {\r
             // If this is the server panel, ignore as it's already added\r
-            if (panel == that.model.server) return;\r
+            if (this.is_network && panel == that.model.server)\r
+                return;\r
+\r
+            panel.tab.data('panel', panel);\r
+\r
+            if (this.is_network)\r
+                panel.tab.data('connection_id', this.model.network.get('connection_id'));\r
 \r
-            panel.tab\r
-                .data('panel', panel)\r
-                .appendTo(that.$el);\r
-                //.appendTo(panel.isApplet() ? this.tabs_applets : this.tabs_msg);\r
+            panel.tab.appendTo(that.$el);\r
         });\r
 \r
         _kiwi.app.view.doLayout();\r
@@ -770,10 +783,12 @@ _kiwi.view.Tabs = Backbone.View.extend({
             panel.tab.addClass('icon-nonexistant');\r
         }\r
 \r
-        panel.tab.data('panel', panel)\r
-            .data('connection_id', this.model.network.get('connection_id'))\r
-            .appendTo(this.$el);\r
-            //.appendTo(panel.isApplet() ? this.tabs_applets : this.tabs_msg);\r
+        panel.tab.data('panel', panel);\r
+\r
+        if (this.is_network)\r
+            panel.tab.data('connection_id', this.model.network.get('connection_id'));\r
+\r
+        panel.tab.appendTo(this.$el);\r
 \r
         panel.bind('change:title', this.updateTabTitle);\r
         _kiwi.app.view.doLayout();\r
@@ -787,8 +802,8 @@ _kiwi.view.Tabs = Backbone.View.extend({
 \r
     panelActive: function (panel, previously_active_panel) {\r
         // Remove any existing tabs or part images\r
-        $('.part', this.$el).remove();\r
-        this.$el.parent().find('.active').removeClass('active');\r
+        _kiwi.app.view.$el.find('.panellist .part').remove();\r
+        _kiwi.app.view.$el.find('.panellist .active').removeClass('active');\r
 \r
         panel.tab.addClass('active');\r
 \r