MenuBox UI component

diff --git a/client/assets/css/style.css b/client/assets/css/style.css
index 0fc4437ee25805458a73a90f2d2c5bdd068120f8..e48a7c8cfaf46db61e20dbc14db6d1df5ab69242 100644 (file)
--- 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 df3ca247312856484cb00f0f04b9631a25455446..7f916a86f937df2f13c905501daa48e7aa5b649b 100644 (file)
--- 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);\r
         });\r
     },\r
-    nickClick: function (x) {\r
-        var $target = $(x.currentTarget).parent('li'),\r
+    nickClick: function (event) {\r
+        var $target = $(event.currentTarget).parent('li'),\r
             member = $target.data('member'),\r
             userbox;\r
         \r
+        event.stopPropagation();\r
+\r
         // If the userbox already exists here, hide it\r
         if ($target.find('.userbox').length > 0) {\r
             $('.userbox', this.$el).remove();\r
@@ -35,13 +37,31 @@ _kiwi.view.MemberList = Backbone.View.extend({
         userbox.member = member;\r
         userbox.channel = this.model.channel;\r
 \r
-        // Remove any existing userboxes\r
-        $('.userbox', this.$el).remove();\r
-\r
         if (!this.model.getByNick(_kiwi.gateway.get('nick')).get('is_op')) {\r
             userbox.$el.children('.if_op').remove();\r
         }\r
-        $target.append(userbox.$el);\r
+\r
+        var menu = new _kiwi.view.MenuBox(member.get('nick') || 'User');\r
+        menu.addItem('userbox', userbox.$el);\r
+        menu.show();\r
+\r
+        // Position the userbox + menubox\r
+        (function() {\r
+            var t = event.pageY,\r
+                m_bottom = t + menu.$el.outerHeight(),  // Where the bottom of menu will be\r
+                memberlist_bottom = this.$el.parent().offset().top + this.$el.parent().outerHeight();\r
+\r
+            // If the bottom of the userbox is going to be too low.. raise it\r
+            if (m_bottom > memberlist_bottom){\r
+                t = memberlist_bottom - menu.$el.outerHeight();\r
+            }\r
+\r
+            // Set the new positon\r
+            menu.$el.offset({\r
+                left: _kiwi.app.view.$el.width() - menu.$el.outerWidth() - 20,\r
+                top: t\r
+            });\r
+        }).call(this);\r
     },\r
     show: function () {\r
         $('#memberlists').children().removeClass('active');\r
@@ -1555,3 +1575,95 @@ _kiwi.view.MediaMessage = Backbone.View.extend({
         return html;\r
     }\r
 });\r
+\r
+\r
+\r
+_kiwi.view.MenuBox = Backbone.View.extend({\r
+    events: {\r
+        'click .ui_menu_foot .close': 'dispose'\r
+    },\r
+\r
+    initialize: function(title) {\r
+        var that = this;\r
+\r
+        this.$el = $('<div class="ui_menu"></div>');\r
+\r
+        this._title = title || '';\r
+        this._items = {};\r
+        this._display_footer = true;\r
+\r
+        this._close_proxy = function(event) {\r
+            that.onDocumentClick(event);\r
+        };\r
+        $(document).on('click', this._close_proxy);\r
+    },\r
+\r
+\r
+    render: function() {\r
+        var that = this;\r
+\r
+        this.$el.find('*').remove();\r
+\r
+        if (this._title) {\r
+            $('<div class="ui_menu_title"></div>')\r
+                .text(this._title)\r
+                .appendTo(this.$el);\r
+        }\r
+\r
+\r
+        _.each(this._items, function(item) {\r
+            var $item = $('<div class="ui_menu_content hover"></div>')\r
+                .append(item);\r
+\r
+            that.$el.append($item);\r
+        });\r
+\r
+        if (this._display_footer)\r
+            this.$el.append('<div class="ui_menu_foot"><a class="close" onclick="">Close <i class="icon-remove"></i></a></div>');\r
+    },\r
+\r
+\r
+    onDocumentClick: function(event) {\r
+        var $target = $(event.target);\r
+\r
+        // If this is not itself AND we don't contain this element, dispose $el\r
+        if ($target[0] != this.$el[0] && this.$el.has($target).length === 0)\r
+            this.dispose();\r
+    },\r
+\r
+\r
+    dispose: function() {\r
+        _.each(this._items, function(item) {\r
+            item.dispose && item.dispose();\r
+            item.remove && item.remove();\r
+        });\r
+\r
+        this._items = null;\r
+        this.remove();\r
+\r
+        $(document).off('click', this._close_proxy);\r
+    },\r
+\r
+\r
+    addItem: function(item_name, $item) {\r
+        $item = $($item);\r
+        if ($item.is('a')) $item.addClass('icon-chevron-right');\r
+        this._items[item_name] = $item;\r
+    },\r
+\r
+\r
+    removeItem: function(item_name) {\r
+        delete this._items[item_name];\r
+    },\r
+\r
+\r
+    showFooter: function(show) {\r
+        this._show_footer = show;\r
+    },\r
+\r
+\r
+    show: function() {\r
+        this.render();\r
+        this.$el.appendTo(_kiwi.app.view.$el);\r
+    }\r
+});\r