From c62a9570926d37833208ca316b12bb84c176527d Mon Sep 17 00:00:00 2001 From: Darren Date: Wed, 24 Apr 2013 19:33:17 +0100 Subject: [PATCH] Tabs now a list of network tabs --- client/assets/css/style.css | 39 +++++++++++++------------- client/assets/dev/model_application.js | 2 +- client/assets/dev/model_gateway.js | 4 +-- client/assets/dev/model_network.js | 3 +- client/assets/dev/model_panellist.js | 2 ++ client/assets/dev/view.js | 38 +++++++++++++++++++++---- 6 files changed, 59 insertions(+), 29 deletions(-) diff --git a/client/assets/css/style.css b/client/assets/css/style.css index e48a7c8..e11828f 100644 --- 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 li { +#kiwi #toolbar .panellist .connection li { float: left; list-style: inline; display:inline; position:relative; padding:5px; margin:3px; @@ -43,10 +43,11 @@ html, body { height:100%; } #kiwi #toolbar .panellist .alert_activity { font-weight: bold; } #kiwi #toolbar .panellist .alert_action { font-weight: bold; } -#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 .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 #status_message { background: #FFF; @@ -301,14 +302,14 @@ 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 li { +#kiwi.theme_relaxed #toolbar .panellist .connection li { line-height: 1.4em; vertical-align: middle; - border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; + border-radius:5px; behavior: url(border-radius.htc); background-image: -webkit-gradient( @@ -328,23 +329,23 @@ html, body { height:100%; } background-color: #eee; } -#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 .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 .active { padding-right:23px; } -#kiwi.theme_relaxed #toolbar .panellist li .part:before { content:"\f00d"; } +#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 li.server span { padding-left: 5px; } -#kiwi.theme_relaxed.connected #toolbar .panellist li.server:before { content: "\f0ec"; color:#3F9532; } +#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: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 li span { line-height:20px; vertical-align:middle; display:inline-block; } +#kiwi.theme_relaxed #toolbar .panellist .connection li span { line-height:20px; vertical-align:middle; display:inline-block; } -#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 { +#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 { padding: 1px 3px; margin-left:1em; border-radius: 4px; background: #3F9532; color:#000; /*color: #ff5300;*/ @@ -352,7 +353,7 @@ html, body { height:100%; } display:inline-block; width:2em; } -#kiwi.theme_relaxed #toolbar .panellist li.alert_highlight .activity { +#kiwi.theme_relaxed #toolbar .panellist .connection li.alert_highlight .activity { color: #fff; background: #a60400; } diff --git a/client/assets/dev/model_application.js b/client/assets/dev/model_application.js index dcae63f..c5ff111 100644 --- a/client/assets/dev/model_application.js +++ b/client/assets/dev/model_application.js @@ -758,7 +758,7 @@ _kiwi.model.Application = function () { _.each(this.connections.models, function(connection) { _.each(connection.panels.model, fn); }); - } + }; }; diff --git a/client/assets/dev/model_gateway.js b/client/assets/dev/model_gateway.js index d1e7faa..9db724b 100644 --- a/client/assets/dev/model_gateway.js +++ b/client/assets/dev/model_gateway.js @@ -238,14 +238,14 @@ _kiwi.model.Gateway = function () { 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) { if (!err) { - that.server_num = server_num; - // TODO: Remove this whole premature connection thing when panel code is tidied if (server_num != 0 && !_kiwi.app.connections.getByConnectionId(server_num)){ _kiwi.app.connections.add(new _kiwi.model.Network({connection_id: server_num})); } console.log("_kiwi.gateway.socket.on('connect')"); + callback_fn && callback_fn(err); + } else { console.log("_kiwi.gateway.socket.on('error')", {reason: err}); callback_fn && callback_fn(err); diff --git a/client/assets/dev/model_network.js b/client/assets/dev/model_network.js index 854a9e1..b48fdf2 100644 --- a/client/assets/dev/model_network.js +++ b/client/assets/dev/model_network.js @@ -39,8 +39,9 @@ this.gateway = _kiwi.global.components.Network(this.get('connection_id')); this.bindGatewayEvents(); + // Create our panel list (tabs) this.panels = new _kiwi.model.PanelList([], this); - this.panels.network = this; + //this.panels.network = this; // Automatically create a server tab var server_panel = new _kiwi.model.Server({name: 'Server'}); diff --git a/client/assets/dev/model_panellist.js b/client/assets/dev/model_panellist.js index 46cdaeb..929c291 100644 --- a/client/assets/dev/model_panellist.js +++ b/client/assets/dev/model_panellist.js @@ -37,6 +37,8 @@ _kiwi.model.NetworkPanelList = Backbone.Collection.extend({ model: _kiwi.model.Network, initialize: function() { + this.view = new _kiwi.view.NetworkTabs({model: this}); + this.on('add', this.onNetworkAdd, this); this.on('remove', this.onNetworkRemove, this); diff --git a/client/assets/dev/view.js b/client/assets/dev/view.js index fdb9584..f84b7ed 100644 --- a/client/assets/dev/view.js +++ b/client/assets/dev/view.js @@ -669,7 +669,7 @@ _kiwi.view.Channel = _kiwi.view.Panel.extend({ if (typeof topic !== 'string' || !topic) { topic = this.model.get("topic"); } - + this.model.addMsg('', '== Topic for ' + this.model.get('name') + ' is: ' + topic, 'topic'); // If this is the active channel then update the topic bar @@ -679,6 +679,35 @@ _kiwi.view.Channel = _kiwi.view.Panel.extend({ } }); + + +// Model for this = _kiwi.model.NetworkPanelList +_kiwi.view.NetworkTabs = Backbone.View.extend({ + tagName: 'ul', + className: 'panellist channels', + + initialize: function() { + this.model.on('add', this.networkAdded, this); + this.model.on('remove', this.networkRemoved, this); + + this.$el.appendTo($('#kiwi #tabs')); + }, + + networkAdded: function(network) { + $('
  • ') + .append(network.panels.view.$el) + .appendTo(this.$el); + }, + + networkRemoved: function(network) { + network.panels.view.remove(); + + _kiwi.app.view.doLayout(); + } +}); + + + // Model for this = _kiwi.model.PanelList _kiwi.view.Tabs = Backbone.View.extend({ tagName: 'ul', @@ -698,9 +727,6 @@ _kiwi.view.Tabs = Backbone.View.extend({ this.model.network.on('change:name', function (network, new_val) { $('span', this.model.server.tab).text(new_val); }, this); - - this.$tab_container = $('#kiwi .panellist.channels'); - this.$tab_container.append(this.$el); }, render: function () { @@ -759,7 +785,7 @@ _kiwi.view.Tabs = Backbone.View.extend({ panelActive: function (panel, previously_active_panel) { // Remove any existing tabs or part images $('.part', this.$el).remove(); - this.$tab_container.find('.active').removeClass('active'); + this.$el.parent().find('.active').removeClass('active'); panel.tab.addClass('active'); @@ -771,7 +797,7 @@ _kiwi.view.Tabs = Backbone.View.extend({ tabClick: function (e) { var tab = $(e.currentTarget); - + var panel = tab.data('panel'); if (!panel) { // A panel wasn't found for this tab... wadda fuck -- 2.25.1