From 06d56c904345a707d74471f7c7bc2d2c559caead Mon Sep 17 00:00:00 2001 From: Darren Date: Tue, 29 Apr 2014 15:45:43 +0100 Subject: [PATCH] Moving nick list toggle into the right bar --- client/assets/css/style.css | 27 ++++++++++++++---- client/assets/themes/basic/style.css | 2 +- client/assets/themes/cli/style.css | 2 +- client/assets/themes/relaxed/style.css | 2 +- client/src/views/apptoolbar.js | 10 +------ client/src/views/rightbar.js | 39 +++++++++++++++++++++++++- 6 files changed, 64 insertions(+), 18 deletions(-) diff --git a/client/assets/css/style.css b/client/assets/css/style.css index 00de461..0364b19 100644 --- a/client/assets/css/style.css +++ b/client/assets/css/style.css @@ -39,7 +39,8 @@ html, body { height:100%; } */ #kiwi .toolbar { position:absolute; top:0px; width:100%; display:none; } #kiwi .panels { position:absolute; left:0px; right:200px; bottom:100px; top:100px; } -#kiwi .right_bar { position:absolute; right:0px; width:200px; bottom:100px; top:100px; overflow-y:auto; } +#kiwi .right_bar { position:absolute; right:0px; width:200px; bottom:100px; top:100px; overflow:visible; } +#kiwi .right-bar-content { overflow-y:auto; position:relative; height:100% ;} #kiwi .controlbox { position: absolute; bottom:0px; width:100%; display:none; } #kiwi .memberlists_resize_handle { position: absolute; width:10px; z-index:1; cursor:w-resize; @@ -84,7 +85,7 @@ html, body { height:100%; } #kiwi .channel_tools { } #kiwi .channel_tools i { - width: 49%; + width: 32%; display: inline-block; text-align: center; cursor: pointer; @@ -127,12 +128,28 @@ html, body { height:100%; } #kiwi .messages .msg .media .media_content { white-space: normal; } -/* A member/nick list per channel */ #kiwi .right_bar { border-left: 1px solid #8A8A8A; } -#kiwi .right_bar.disabled { display:none; } -#kiwi .memberlists ul { display:none; } +#kiwi .right_bar.disabled { width:0; } +#kiwi .right_bar.disabled .channel_tools, +#kiwi .right_bar.disabled .memberlists { display:none; } + +#kiwi .right-bar-toggle { + position: absolute; + top: 10px; + left: -2.3em; + width: 1.3em; + font-size: 25px; + font-weight: bold; + text-align: center; + line-height: 1.3em; + background: #e3e3e3; + border: 1px solid; + border-radius: 50%; + cursor: pointer; +} /* The active channels nicklist */ +#kiwi .memberlists ul { display:none; } #kiwi .memberlists ul.active { display:block; } #kiwi .memberlists ul li { overflow-y:auto; overflow-x:hidden; cursor:pointer; } #kiwi .memberlists ul li a.nick { } diff --git a/client/assets/themes/basic/style.css b/client/assets/themes/basic/style.css index 2ca440b..dd5565b 100644 --- a/client/assets/themes/basic/style.css +++ b/client/assets/themes/basic/style.css @@ -79,7 +79,7 @@ padding: 0 5%; } #kiwi .channel_tools i { - width: 47%; + width: 30%; font-size: 1.6em; line-height: 1.6em; } diff --git a/client/assets/themes/cli/style.css b/client/assets/themes/cli/style.css index f321a04..e86ea47 100644 --- a/client/assets/themes/cli/style.css +++ b/client/assets/themes/cli/style.css @@ -118,7 +118,7 @@ padding: 0 5%; } #kiwi .channel_tools i { - width: 47%; + width: 30%; font-size: 1.6em; line-height: 1.6em; } diff --git a/client/assets/themes/relaxed/style.css b/client/assets/themes/relaxed/style.css index 783abc6..56d7b8d 100644 --- a/client/assets/themes/relaxed/style.css +++ b/client/assets/themes/relaxed/style.css @@ -104,7 +104,7 @@ padding: 0 5%; } #kiwi .channel_tools i { - width: 47%; + width: 30%; font-size: 1.6em; line-height: 1.6em; } diff --git a/client/src/views/apptoolbar.js b/client/src/views/apptoolbar.js index 82b4965..fd097c8 100644 --- a/client/src/views/apptoolbar.js +++ b/client/src/views/apptoolbar.js @@ -1,8 +1,7 @@ _kiwi.view.AppToolbar = Backbone.View.extend({ events: { 'click .settings': 'clickSettings', - 'click .startup': 'clickStartup' , - 'click .hiderightbar': 'clickHideRightBar' + 'click .startup': 'clickStartup' }, initialize: function () { @@ -20,12 +19,5 @@ _kiwi.view.AppToolbar = Backbone.View.extend({ clickStartup: function (event) { event.preventDefault(); _kiwi.app.startup_applet.view.show(); - }, - - clickHideRightBar: function (event) { - event.preventDefault(); - - _kiwi.app.rightbar.toggle(); - _kiwi.app.view.doLayout(); } }); diff --git a/client/src/views/rightbar.js b/client/src/views/rightbar.js index 67c5c2f..1f1b4ed 100644 --- a/client/src/views/rightbar.js +++ b/client/src/views/rightbar.js @@ -1,13 +1,22 @@ _kiwi.view.RightBar = Backbone.View.extend({ + events: { + 'click .right-bar-toggle': 'onClickToggle', + 'click .right-bar-toggle-inner': 'onClickToggle' + }, + initialize: function() { this.keep_hidden = false; - this.hidden = false; + this.hidden = this.$el.hasClass('disabled'); + + this.updateIcon(); }, hide: function() { this.hidden = true; this.$el.addClass('disabled'); + + this.updateIcon(); }, @@ -16,6 +25,8 @@ _kiwi.view.RightBar = Backbone.View.extend({ if (!this.keep_hidden) this.$el.removeClass('disabled'); + + this.updateIcon(); }, @@ -28,5 +39,31 @@ _kiwi.view.RightBar = Backbone.View.extend({ } else { this.$el.removeClass('disabled'); } + + this.updateIcon(); + }, + + + updateIcon: function() { + var $toggle = this.$('.right-bar-toggle'), + $icon = $toggle.find('i'); + + if (!this.hidden && this.keep_hidden) { + $toggle.show(); + } else { + $toggle.hide(); + } + + if (this.keep_hidden) { + $icon.removeClass('icon-double-angle-right').addClass('icon-user'); + } else { + $icon.removeClass('icon-user').addClass('icon-double-angle-right'); + } + }, + + + onClickToggle: function(event) { + this.toggle(); + _kiwi.app.view.doLayout(); } }); \ No newline at end of file -- 2.25.1