From: Darren <darren@Darrens-MacBook-Pro.local>
Date: Sat, 20 Apr 2013 16:06:06 +0000 (+0100)
Subject: MenuBox UI component
X-Git-Url: https://vcs.fsf.org/?a=commitdiff_plain;h=e1fb4c61f220b826bba5fe21b0a0f8c55aa2f15f;p=KiwiIRC.git

MenuBox UI component
---

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 = $('<div class="ui_menu"></div>');
+
+        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) {
+            $('<div class="ui_menu_title"></div>')
+                .text(this._title)
+                .appendTo(this.$el);
+        }
+
+
+        _.each(this._items, function(item) {
+            var $item = $('<div class="ui_menu_content hover"></div>')
+                .append(item);
+
+            that.$el.append($item);
+        });
+
+        if (this._display_footer)
+            this.$el.append('<div class="ui_menu_foot"><a class="close" onclick="">Close <i class="icon-remove"></i></a></div>');
+    },
+
+
+    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);
+    }
+});