From 9936359c416408ca7bf570ede53388d63a519e81 Mon Sep 17 00:00:00 2001 From: Darren Date: Sun, 9 Feb 2014 12:22:04 +0000 Subject: [PATCH] Channel tools box; memberlist/right bar structure refactor --- client/assets/css/style.css | 14 +++++++++++--- client/assets/themes/basic/style.css | 16 +++++++++++++++- client/assets/themes/cli/style.css | 16 +++++++++++++++- client/assets/themes/mini/style.css | 2 +- client/assets/themes/relaxed/style.css | 19 +++++++++++++++++-- client/build.js | 1 + client/src/index.html.tmpl | 8 +++++++- client/src/models/application.js | 1 + client/src/views/application.js | 12 ++++++------ client/src/views/channeltools.js | 16 ++++++++++++++++ client/src/views/memberlist.js | 11 ++++++++++- client/src/views/panel.js | 4 ++-- client/src/views/resizehandler.js | 2 +- server/settingsgenerator.js | 1 + 14 files changed, 104 insertions(+), 19 deletions(-) create mode 100644 client/src/views/channeltools.js diff --git a/client/assets/css/style.css b/client/assets/css/style.css index 475450d..27680ef 100644 --- a/client/assets/css/style.css +++ b/client/assets/css/style.css @@ -39,7 +39,7 @@ 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 .memberlists { 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-y:auto; } #kiwi .controlbox { position: absolute; bottom:0px; width:100%; display:none; } #kiwi .memberlists_resize_handle { position: absolute; width:10px; z-index:1; cursor:w-resize; @@ -81,6 +81,14 @@ html, body { height:100%; } text-align: center; } +#kiwi .channel_tools { +} +#kiwi .channel_tools i { + width: 49%; + display: inline-block; + text-align: center; + cursor: pointer; +} #kiwi .panel_container { overflow-y:auto; height:100%; } #kiwi .panel { @@ -120,8 +128,8 @@ html, body { height:100%; } /* A member/nick list per channel */ -#kiwi .memberlists { border-left: 1px solid #8A8A8A; } -#kiwi .memberlists.disabled { display:none; } +#kiwi .right_bar { border-left: 1px solid #8A8A8A; } +#kiwi .right_bar.disabled { display:none; } #kiwi .memberlists ul { display:none; } /* The active channels nicklist */ diff --git a/client/assets/themes/basic/style.css b/client/assets/themes/basic/style.css index f676b3c..e0aae24 100644 --- a/client/assets/themes/basic/style.css +++ b/client/assets/themes/basic/style.css @@ -73,6 +73,20 @@ } #kiwi .status_message.err { color:#D8000C; background:#FFBABA; } +#kiwi .channel_tools { + margin-bottom: 5px; + padding: 0 5%; +} +#kiwi .channel_tools i { + width: 47%; + font-size: 1.6em; + line-height: 1.6em; +} +#kiwi .channel_tools i:hover { + transition: color 0.3s; + color: #88C56A; +} + #kiwi .messages { } #kiwi .messages.active { } #kiwi .messages a { text-decoration:underline; } @@ -150,7 +164,7 @@ -#kiwi .memberlists { +#kiwi .right_bar { background-color: #DADADA; border-left: 1px dashed #8A8A8A; } diff --git a/client/assets/themes/cli/style.css b/client/assets/themes/cli/style.css index e85c6e5..a800c3c 100644 --- a/client/assets/themes/cli/style.css +++ b/client/assets/themes/cli/style.css @@ -94,7 +94,7 @@ } -#kiwi .memberlists { background:#252525; } +#kiwi .right_bar { background:#252525; } #kiwi .memberlists ul li { padding: 0.2em 1em; } #kiwi .memberlists ul li a.nick { color:#6d6d6d; } #kiwi .memberlists ul li:hover { @@ -111,6 +111,20 @@ #kiwi .userbox a i { font-size:1.1em; margin-right:5px; } #kiwi .userbox .divider-horizontal { display:none; } +#kiwi .channel_tools { + border-bottom: 1px solid #8A8A8A; + margin-bottom: 10px; + padding: 0 5%; +} +#kiwi .channel_tools i { + width: 47%; + font-size: 1.6em; + line-height: 1.6em; +} +#kiwi .channel_tools i:hover { + transition: color 0.3s; + color: #88C56A; +} #kiwi .messages .msg > div { color:#6d6d6d; font-family: Inconsolata, Consolas, 'courier new', monospace; } #kiwi .messages .msg { border: none; padding: 2px 5px; } diff --git a/client/assets/themes/mini/style.css b/client/assets/themes/mini/style.css index c181abc..24f8ab6 100644 --- a/client/assets/themes/mini/style.css +++ b/client/assets/themes/mini/style.css @@ -117,7 +117,7 @@ -#kiwi .memberlists { +#kiwi .right_bar { background-color: #DADADA; border-left: 1px solid #8A8A8A; display:none; diff --git a/client/assets/themes/relaxed/style.css b/client/assets/themes/relaxed/style.css index 7e9f65d..a9d7367 100644 --- a/client/assets/themes/relaxed/style.css +++ b/client/assets/themes/relaxed/style.css @@ -98,6 +98,21 @@ } #kiwi .status_message.err { color:#D8000C; background:#FFBABA; } +#kiwi .channel_tools { + border-bottom: 1px solid #8A8A8A; + margin-bottom: 10px; + padding: 0 5%; +} +#kiwi .channel_tools i { + width: 47%; + font-size: 1.6em; + line-height: 1.6em; +} +#kiwi .channel_tools i:hover { + transition: color 0.3s; + color: #88C56A; +} + #kiwi .messages { color: #333333; } #kiwi .messages.active { } #kiwi .messages a { text-decoration:none; } @@ -175,11 +190,11 @@ #kiwi .messages .msg .media.reddit .thumbnail { float:left; margin-right: 0.5em; } -#kiwi .memberlists { +#kiwi .right_bar { background-color: #DADADA; border-left: 1px solid #8A8A8A; } -#kiwi.narrow .memberlists { display:none; } +#kiwi.narrow .right_bar { display:none; } #kiwi .memberlists ul { list-style: none; } #kiwi .memberlists ul.active { } #kiwi .memberlists ul li { padding: 0.2em 1em; } diff --git a/client/build.js b/client/build.js index 8bb25dc..aaa06f4 100644 --- a/client/build.js +++ b/client/build.js @@ -82,6 +82,7 @@ var source_files = [ __dirname + '/src/views/tabs.js', __dirname + '/src/views/topicbar.js', __dirname + '/src/views/userbox.js', + __dirname + '/src/views/channeltools.js', __dirname + '/src/views/channelinfo.js' ]; diff --git a/client/src/index.html.tmpl b/client/src/index.html.tmpl index f0d82f5..43a09ff 100644 --- a/client/src/index.html.tmpl +++ b/client/src/index.html.tmpl @@ -42,7 +42,13 @@
-
+
+
+ + +
+
+
diff --git a/client/src/models/application.js b/client/src/models/application.js index ebf8edb..4a43c08 100644 --- a/client/src/models/application.js +++ b/client/src/models/application.js @@ -123,6 +123,7 @@ _kiwi.model.Application = function () { this.topicbar = new _kiwi.view.TopicBar({el: this.view.$el.find('.topic')[0]}); new _kiwi.view.AppToolbar({el: _kiwi.app.view.$el.find('.toolbar .app_tools')[0]}); + new _kiwi.view.ChannelTools({el: _kiwi.app.view.$el.find('.channel_tools')[0]}); this.message = new _kiwi.view.StatusMessage({el: this.view.$el.find('.status_message')[0]}); diff --git a/client/src/views/application.js b/client/src/views/application.js index 1825af7..5d6a045 100644 --- a/client/src/views/application.js +++ b/client/src/views/application.js @@ -9,7 +9,7 @@ _kiwi.view.Application = Backbone.View.extend({ this.elements = { panels: this.$el.find('.panels'), - memberlists: this.$el.find('.memberlists'), + right_bar: this.$el.find('.right_bar'), toolbar: this.$el.find('.toolbar'), controlbox: this.$el.find('.controlbox'), resize_handle: this.$el.find('.memberlists_resize_handle') @@ -134,7 +134,7 @@ _kiwi.view.Application = Backbone.View.extend({ doLayout: function () { var el_kiwi = this.$el; var el_panels = this.elements.panels; - var el_memberlists = this.elements.memberlists; + var el_right_bar = this.elements.right_bar; var el_toolbar = this.elements.toolbar; var el_controlbox = this.elements.controlbox; var el_resize_handle = this.elements.resize_handle; @@ -160,7 +160,7 @@ _kiwi.view.Application = Backbone.View.extend({ // Apply the CSS sizes el_panels.css(css_heights); - el_memberlists.css(css_heights); + el_right_bar.css(css_heights); el_resize_handle.css(css_heights); // If we have channel tabs on the side, adjust the height @@ -176,11 +176,11 @@ _kiwi.view.Application = Backbone.View.extend({ } // Set the panels width depending on the memberlist visibility - if (el_memberlists.css('display') != 'none') { + if (el_right_bar.css('display') != 'none') { // Panels to the side of the memberlist - el_panels.css('right', el_memberlists.outerWidth(true)); + el_panels.css('right', el_right_bar.outerWidth(true)); // The resize handle sits overlapping the panels and memberlist - el_resize_handle.css('left', el_memberlists.position().left - (el_resize_handle.outerWidth(true) / 2)); + el_resize_handle.css('left', el_right_bar.position().left - (el_resize_handle.outerWidth(true) / 2)); } else { // Memberlist is hidden so panels to the right edge el_panels.css('right', 0); diff --git a/client/src/views/channeltools.js b/client/src/views/channeltools.js new file mode 100644 index 0000000..ffbfda0 --- /dev/null +++ b/client/src/views/channeltools.js @@ -0,0 +1,16 @@ +_kiwi.view.ChannelTools = Backbone.View.extend({ + events: { + 'click .channel_info': 'infoClick', + 'click .channel_part': 'partClick' + }, + + initialize: function () {}, + + infoClick: function (event) { + new _kiwi.model.ChannelInfo({channel: _kiwi.app.panels().active}); + }, + + partClick: function (event) { + _kiwi.gateway.part(null, _kiwi.app.panels().active.get('name')); + } +}); \ No newline at end of file diff --git a/client/src/views/memberlist.js b/client/src/views/memberlist.js index fb262ce..1453855 100644 --- a/client/src/views/memberlist.js +++ b/client/src/views/memberlist.js @@ -1,8 +1,10 @@ _kiwi.view.MemberList = Backbone.View.extend({ tagName: "ul", events: { - "click .nick": "nickClick" + "click .nick": "nickClick", + "click .channel_info": "channelInfoClick" }, + initialize: function (options) { this.model.bind('all', this.render, this); $(this.el).appendTo('#kiwi .memberlists'); @@ -59,6 +61,13 @@ _kiwi.view.MemberList = Backbone.View.extend({ }); }).call(this); }, + + + channelInfoClick: function(event) { + new _kiwi.model.ChannelInfo({channel: this.model.channel}); + }, + + show: function () { $('#kiwi .memberlists').children().removeClass('active'); $(this.el).addClass('active'); diff --git a/client/src/views/panel.js b/client/src/views/panel.js index 34b5bd9..3827def 100644 --- a/client/src/views/panel.js +++ b/client/src/views/panel.js @@ -41,11 +41,11 @@ _kiwi.view.Panel = Backbone.View.extend({ // Show this panels memberlist var members = this.model.get("members"); if (members) { - $('#kiwi .memberlists').removeClass('disabled'); + $('#kiwi .right_bar').removeClass('disabled'); members.view.show(); } else { // Memberlist not found for this panel, hide any active ones - $('#kiwi .memberlists').addClass('disabled').children().removeClass('active'); + $('#kiwi .right_bar').addClass('disabled').children().removeClass('active'); } // Remove any alerts and activity counters for this panel diff --git a/client/src/views/resizehandler.js b/client/src/views/resizehandler.js index d03455c..96400a8 100644 --- a/client/src/views/resizehandler.js +++ b/client/src/views/resizehandler.js @@ -23,7 +23,7 @@ _kiwi.view.ResizeHandler = Backbone.View.extend({ if (!this.dragging) return; this.$el.css('left', event.clientX - (this.$el.outerWidth(true) / 2)); - $('#kiwi .memberlists').css('width', this.$el.parent().width() - (this.$el.position().left + this.$el.outerWidth())); + $('#kiwi .right_bar').css('width', this.$el.parent().width() - (this.$el.position().left + this.$el.outerWidth())); _kiwi.app.view.doLayout(); } }); \ No newline at end of file diff --git a/server/settingsgenerator.js b/server/settingsgenerator.js index 076a9b7..d797535 100644 --- a/server/settingsgenerator.js +++ b/server/settingsgenerator.js @@ -248,6 +248,7 @@ function addScripts(vars, debug) { 'src/views/tabs.js', 'src/views/topicbar.js', 'src/views/userbox.js', + 'src/views/channeltools.js', 'src/views/channelinfo.js' ] ]); -- 2.25.1