From c966123adffe03d432c148732c19ad8eec267ebf Mon Sep 17 00:00:00 2001 From: Darren Date: Thu, 25 Apr 2013 15:44:59 +0100 Subject: [PATCH] network + applet tabs looking + fitting better --- client/assets/css/style.css | 45 +++++++++++---------- client/assets/dev/model_applet.js | 4 +- client/assets/dev/model_application.js | 23 +++++++++-- client/assets/dev/model_gateway.js | 7 +++- client/assets/dev/model_network.js | 2 +- client/assets/dev/model_panellist.js | 6 ++- client/assets/dev/view.js | 55 ++++++++++++++++---------- 7 files changed, 91 insertions(+), 51 deletions(-) diff --git a/client/assets/css/style.css b/client/assets/css/style.css index e11828f..46556ce 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 .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 90204e8..0dca637 100644 --- 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) { // See if we have an instance loaded already - var applet = _.find(_kiwi.app.panels.models, function(panel) { + var applet = _.find(_kiwi.app.panels('applets'), function(panel) { // Ignore if it's not an applet if (!panel.isApplet()) return; @@ -122,7 +122,7 @@ _kiwi.model.Applet = _kiwi.model.Panel.extend({ applet.load(new _kiwi.applets[applet_name]({_applet_name: applet_name})); // Add it into the tab list - _kiwi.app.panels.add(applet); + _kiwi.app.applet_panels.add(applet); return applet; diff --git a/client/assets/dev/model_application.js b/client/assets/dev/model_application.js index 3825f61..caf879b 100644 --- a/client/assets/dev/model_application.js +++ b/client/assets/dev/model_application.js @@ -106,7 +106,11 @@ _kiwi.model.Application = function () { this.initializeClient = function () { this.view = new _kiwi.view.Application({model: this, el: this.get('container')}); - + + this.applet_panels = new _kiwi.model.PanelList(); + this.applet_panels.view.$el.addClass('panellist applets'); + this.view.$el.find('#tabs').append(this.applet_panels.view.$el); + /** * This is temporary. * While multiple server support is being worked on, @@ -289,9 +293,20 @@ _kiwi.model.Application = function () { this.panels = (function() { - var fn = function() { - // Get a complete list of panels - var panels = this.connections.panels(); + var fn = function(panel_type) { + var panels; + + // Default panel type + panel_type = panel_type || 'connections'; + + switch (panel_type) { + case 'connections': + panels = this.connections.panels(); + break; + case 'applets': + panels = this.applet_panels.models; + break; + } // Active panels / server panels.active = this.connections.active_panel; diff --git a/client/assets/dev/model_gateway.js b/client/assets/dev/model_gateway.js index 000aa88..abe95d8 100644 --- 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; 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) { + var connection; + if (!err) { // 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})); + connection = new _kiwi.model.Network({connection_id: server_num}); + _kiwi.app.connections.add(connection); } console.log("_kiwi.gateway.socket.on('connect')"); - callback_fn && callback_fn(err); + callback_fn && callback_fn(err, connection); } else { console.log("_kiwi.gateway.socket.on('error')", {reason: err}); diff --git a/client/assets/dev/model_network.js b/client/assets/dev/model_network.js index b48fdf2..9bc709b 100644 --- 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 a6cd9e1..39d1a1a 100644 --- 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) { var that = this; - // The network this PanelList is associated with - this.network = network; + // If this PanelList is associated with a network/connection + if (network) { + this.network = network; + } this.view = new _kiwi.view.Tabs({model: this}); diff --git a/client/assets/dev/view.js b/client/assets/dev/view.js index eed81b4..1d24cc0 100644 --- 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 _kiwi.view.NetworkTabs = Backbone.View.extend({ tagName: 'ul', - className: 'panellist channels', + className: 'connections', initialize: function() { this.model.on('add', this.networkAdded, this); @@ -714,6 +714,7 @@ _kiwi.view.NetworkTabs = Backbone.View.extend({ // Model for this = _kiwi.model.PanelList _kiwi.view.Tabs = Backbone.View.extend({ tagName: 'ul', + className: 'panellist', events: { 'click li': 'tabClick', @@ -727,9 +728,16 @@ _kiwi.view.Tabs = Backbone.View.extend({ this.model.on('active', this.panelActive, this); - this.model.network.on('change:name', function (network, new_val) { - $('span', this.model.server.tab).text(new_val); - }, this); + // Network tabs start with a server, so determine what we are now + this.is_network = false; + + if (this.model.network) { + this.is_network = true; + + this.model.network.on('change:name', function (network, new_val) { + $('span', this.model.server.tab).text(new_val); + }, this); + } }, render: function () { @@ -737,21 +745,26 @@ _kiwi.view.Tabs = Backbone.View.extend({ this.$el.empty(); - // Add the server tab first - this.model.server.tab - .data('panel', this.model.server) - .data('connection_id', this.model.network.get('connection_id')) - .appendTo(this.$el); + if (this.is_network) { + // Add the server tab first + this.model.server.tab + .data('panel', this.model.server) + .data('connection_id', this.model.network.get('connection_id')) + .appendTo(this.$el); + } // Go through each panel adding its tab this.model.forEach(function (panel) { // If this is the server panel, ignore as it's already added - if (panel == that.model.server) return; + if (this.is_network && panel == that.model.server) + return; + + panel.tab.data('panel', panel); + + if (this.is_network) + panel.tab.data('connection_id', this.model.network.get('connection_id')); - panel.tab - .data('panel', panel) - .appendTo(that.$el); - //.appendTo(panel.isApplet() ? this.tabs_applets : this.tabs_msg); + panel.tab.appendTo(that.$el); }); _kiwi.app.view.doLayout(); @@ -770,10 +783,12 @@ _kiwi.view.Tabs = Backbone.View.extend({ panel.tab.addClass('icon-nonexistant'); } - panel.tab.data('panel', panel) - .data('connection_id', this.model.network.get('connection_id')) - .appendTo(this.$el); - //.appendTo(panel.isApplet() ? this.tabs_applets : this.tabs_msg); + panel.tab.data('panel', panel); + + if (this.is_network) + panel.tab.data('connection_id', this.model.network.get('connection_id')); + + panel.tab.appendTo(this.$el); panel.bind('change:title', this.updateTabTitle); _kiwi.app.view.doLayout(); @@ -787,8 +802,8 @@ _kiwi.view.Tabs = Backbone.View.extend({ panelActive: function (panel, previously_active_panel) { // Remove any existing tabs or part images - $('.part', this.$el).remove(); - this.$el.parent().find('.active').removeClass('active'); + _kiwi.app.view.$el.find('.panellist .part').remove(); + _kiwi.app.view.$el.find('.panellist .active').removeClass('active'); panel.tab.addClass('active'); -- 2.25.1