From e1fb4c61f220b826bba5fe21b0a0f8c55aa2f15f Mon Sep 17 00:00:00 2001 From: Darren Date: Sat, 20 Apr 2013 17:06:06 +0100 Subject: [PATCH] MenuBox UI component --- client/assets/css/style.css | 95 ++++++++++++++++++++++----- client/assets/dev/view.js | 124 ++++++++++++++++++++++++++++++++++-- 2 files changed, 197 insertions(+), 22 deletions(-) diff --git a/client/assets/css/style.css b/client/assets/css/style.css index 0fc4437..e48a7c8 100644 --- a/client/assets/css/style.css +++ b/client/assets/css/style.css @@ -104,9 +104,9 @@ html, body { height:100%; } #kiwi #memberlists ul li a.nick { } /* The userbox shown when clicking a nick */ -#kiwi #memberlists ul li .userbox { position:relative; } -#kiwi #memberlists ul li .userbox a { } -#kiwi #memberlists ul li .userbox a i { } +#kiwi .userbox { position:relative; } +#kiwi .userbox a { } +#kiwi .userbox a i { } @@ -247,6 +247,30 @@ html, body { height:100%; } +#kiwi .ui_menu { + padding: 0; + z-index:10; + position: absolute; + top: 100px; left: 100px; + background: #fff; + border: 1px solid #bbb; + background-clip: padding-box; +} +#kiwi .ui_menu .ui_menu_title { + padding: 5px 10px 5px 10px; font-weight: bold; overflow:hidden; background:#ddd; +} +#kiwi .ui_menu .ui_menu_content { padding: 5px 10px 5px 10px; border-top:1px solid #e9e9e9; overflow:hidden; position:relative; } +#kiwi .ui_menu .ui_menu_content > a { display: block; } +#kiwi .ui_menu .ui_menu_content > a[class^="icon-"]:before, +#kiwi .ui_menu .ui_menu_content > a[class*=" icon-"]:before { margin-right: 5px; color:#666; } +#kiwi .ui_menu .ui_menu_foot { + padding: 5px; border-top:1px solid #e9e9e9; background:#ddd; overflow:hidden; +} +#kiwi .ui_menu .ui_menu_foot .close { } + + + + /** * Themes @@ -434,9 +458,9 @@ html, body { height:100%; } } #kiwi.theme_relaxed #memberlists ul li a.nick { display:block; color:black; } -#kiwi.theme_relaxed #memberlists ul li .userbox { margin:4px 1em 5px 1em; padding-bottom:0.7em; font-size:.9em; } -#kiwi.theme_relaxed #memberlists ul li .userbox a { display:block; text-decoration:none; margin-bottom:2px; } -#kiwi.theme_relaxed #memberlists ul li .userbox a i { font-size:1.1em; margin-right:5px; } +#kiwi.theme_relaxed .userbox { margin:4px 1em 5px 1em; padding-bottom:0.7em; font-size:.9em; } +#kiwi.theme_relaxed .userbox a { display:block; text-decoration:none; margin-bottom:2px; } +#kiwi.theme_relaxed .userbox a i { font-size:1.1em; margin-right:5px; } /* User mode styles */ #kiwi.theme_relaxed #memberlists ul li .prefix { @@ -597,6 +621,28 @@ html, body { height:100%; } } +#kiwi.theme_relaxed .ui_menu { + border-radius: 3px; + color: #333; + box-shadow: 0 3px 8px rgba(0, 0, 0, .25); +} +#kiwi.theme_relaxed .ui_menu .ui_menu_title { + border-top-left-radius: 3px; + border-top-right-radius: 3px; +} +#kiwi.theme_relaxed .ui_menu .ui_menu_content { } +#kiwi.theme_relaxed .ui_menu .ui_menu_content.hover:hover { background:#f7f7f7; } +#kiwi.theme_relaxed .ui_menu .ui_menu_foot { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; +} +#kiwi.theme_relaxed .ui_menu .ui_menu_foot .close { float:right; font-size:0.9em; margin-right:1em; color: #999; } +#kiwi.theme_relaxed .ui_menu .ui_menu_foot .close:hover { color: #222; } + + + + + /** * Mini theme */ @@ -716,9 +762,9 @@ html, body { height:100%; } } #kiwi.theme_mini #memberlists ul li a.nick { display:block; color:black; } -#kiwi.theme_mini #memberlists ul li .userbox { margin:0 1em 5px 1em; padding-bottom:0.7em; font-size:.9em; } -#kiwi.theme_mini #memberlists ul li .userbox a { display:block; text-decoration:none; margin-bottom:2px; } -#kiwi.theme_mini #memberlists ul li .userbox a i { font-size:1.1em; margin-right:5px; } +#kiwi.theme_mini .userbox { margin:0 1em 5px 1em; padding-bottom:0.7em; font-size:.9em; } +#kiwi.theme_mini .userbox a { display:block; text-decoration:none; margin-bottom:2px; } +#kiwi.theme_mini .userbox a i { font-size:1.1em; margin-right:5px; } #kiwi.theme_mini #controlbox .input { @@ -933,10 +979,10 @@ html, body { height:100%; } transition: 0.2s ease; } -#kiwi.theme_cli #memberlists ul li .userbox { margin:0 1em 0 1em; padding-bottom:0.4em; font-size:.9em; } -#kiwi.theme_cli #memberlists ul li .userbox a { display:block; text-decoration:none; margin-bottom:2px; } -#kiwi.theme_cli #memberlists ul li .userbox a i { font-size:1.1em; margin-right:5px; } -#kiwi.theme_cli #memberlists ul li .userbox .divider-horizontal { display:none; } +#kiwi.theme_cli .userbox { margin:0 1em 0 1em; padding-bottom:0.4em; font-size:.9em; } +#kiwi.theme_cli .userbox a { display:block; text-decoration:none; margin-bottom:2px; } +#kiwi.theme_cli .userbox a i { font-size:1.1em; margin-right:5px; } +#kiwi.theme_cli .userbox .divider-horizontal { display:none; } #kiwi.theme_cli .messages .msg > div { color:#6d6d6d; font-family: Inconsolata, Consolas, 'courier new', monospace; } @@ -1060,6 +1106,19 @@ html, body { height:100%; } #kiwi.theme_cli.chanlist_treeview #tabs ul li.active { padding-left:1em; } +#kiwi.theme_cli .ui_menu { + color: #333; +} +#kiwi.theme_cli .ui_menu .ui_menu_title { } +#kiwi.theme_cli .ui_menu .ui_menu_content { } +#kiwi.theme_cli .ui_menu .ui_menu_content.hover:hover { background:#f7f7f7; } +#kiwi.theme_cli .ui_menu .ui_menu_foot { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; +} +#kiwi.theme_cli .ui_menu .ui_menu_foot .close { float:right; font-size:0.9em; margin-right:1em; color: #999; } +#kiwi.theme_cli .ui_menu .ui_menu_foot .close:hover { color: #222; } + @@ -1181,9 +1240,9 @@ html, body { height:100%; } #kiwi.theme_basic #memberlists ul li:hover {} #kiwi.theme_basic #memberlists ul li a.nick { display:block; color:black; } -#kiwi.theme_basic #memberlists ul li .userbox { margin:0 1em 5px 1em; padding-bottom:0.7em; font-size:.9em; } -#kiwi.theme_basic #memberlists ul li .userbox a { display:block; text-decoration:none; margin-bottom:2px; } -#kiwi.theme_basic #memberlists ul li .userbox a i { font-size:1.1em; margin-right:5px; } +#kiwi.theme_basic .userbox { margin:0 1em 5px 1em; padding-bottom:0.7em; font-size:.9em; } +#kiwi.theme_basic .userbox a { display:block; text-decoration:none; margin-bottom:2px; } +#kiwi.theme_basic .userbox a i { font-size:1.1em; margin-right:5px; } #kiwi.theme_basic #controlbox .input { @@ -1309,3 +1368,7 @@ html, body { height:100%; } border-bottom-right-radius:0; border-top-right-radius:0; } + + +#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; } diff --git a/client/assets/dev/view.js b/client/assets/dev/view.js index df3ca24..7f916a8 100644 --- a/client/assets/dev/view.js +++ b/client/assets/dev/view.js @@ -20,11 +20,13 @@ _kiwi.view.MemberList = Backbone.View.extend({ .data('member', member); }); }, - nickClick: function (x) { - var $target = $(x.currentTarget).parent('li'), + nickClick: function (event) { + var $target = $(event.currentTarget).parent('li'), member = $target.data('member'), userbox; + event.stopPropagation(); + // If the userbox already exists here, hide it if ($target.find('.userbox').length > 0) { $('.userbox', this.$el).remove(); @@ -35,13 +37,31 @@ _kiwi.view.MemberList = Backbone.View.extend({ userbox.member = member; userbox.channel = this.model.channel; - // Remove any existing userboxes - $('.userbox', this.$el).remove(); - if (!this.model.getByNick(_kiwi.gateway.get('nick')).get('is_op')) { userbox.$el.children('.if_op').remove(); } - $target.append(userbox.$el); + + var menu = new _kiwi.view.MenuBox(member.get('nick') || 'User'); + menu.addItem('userbox', userbox.$el); + menu.show(); + + // Position the userbox + menubox + (function() { + var t = event.pageY, + m_bottom = t + menu.$el.outerHeight(), // Where the bottom of menu will be + memberlist_bottom = this.$el.parent().offset().top + this.$el.parent().outerHeight(); + + // If the bottom of the userbox is going to be too low.. raise it + if (m_bottom > memberlist_bottom){ + t = memberlist_bottom - menu.$el.outerHeight(); + } + + // Set the new positon + menu.$el.offset({ + left: _kiwi.app.view.$el.width() - menu.$el.outerWidth() - 20, + top: t + }); + }).call(this); }, show: function () { $('#memberlists').children().removeClass('active'); @@ -1555,3 +1575,95 @@ _kiwi.view.MediaMessage = Backbone.View.extend({ return html; } }); + + + +_kiwi.view.MenuBox = Backbone.View.extend({ + events: { + 'click .ui_menu_foot .close': 'dispose' + }, + + initialize: function(title) { + var that = this; + + this.$el = $('
'); + + this._title = title || ''; + this._items = {}; + this._display_footer = true; + + this._close_proxy = function(event) { + that.onDocumentClick(event); + }; + $(document).on('click', this._close_proxy); + }, + + + render: function() { + var that = this; + + this.$el.find('*').remove(); + + if (this._title) { + $('
') + .text(this._title) + .appendTo(this.$el); + } + + + _.each(this._items, function(item) { + var $item = $('
') + .append(item); + + that.$el.append($item); + }); + + if (this._display_footer) + this.$el.append('
Close
'); + }, + + + onDocumentClick: function(event) { + var $target = $(event.target); + + // If this is not itself AND we don't contain this element, dispose $el + if ($target[0] != this.$el[0] && this.$el.has($target).length === 0) + this.dispose(); + }, + + + dispose: function() { + _.each(this._items, function(item) { + item.dispose && item.dispose(); + item.remove && item.remove(); + }); + + this._items = null; + this.remove(); + + $(document).off('click', this._close_proxy); + }, + + + addItem: function(item_name, $item) { + $item = $($item); + if ($item.is('a')) $item.addClass('icon-chevron-right'); + this._items[item_name] = $item; + }, + + + removeItem: function(item_name) { + delete this._items[item_name]; + }, + + + showFooter: function(show) { + this._show_footer = show; + }, + + + show: function() { + this.render(); + this.$el.appendTo(_kiwi.app.view.$el); + } +}); -- 2.25.1