Adjusted more-actions menu and button to use guidelines.

js/app.js

@@ -211,6 +211,8 @@
 
 			this._rooms = new OCA.SpreedMe.Models.RoomCollection();
 			this.listenTo(roomChannel, 'active', this._setRoomActive);
+
+			$(document).on('click', this.onDocumentClick);
 		},
 		onStart: function() {
 			console.log('Starting spreed …');
@@ -231,6 +233,11 @@
 
 			this._pollForRoomChanges();
 			this._startPing();
+		},
+		onDocumentClick: function(event) {
+			var uiChannel = Backbone.Radio.channel('ui');
+
+			uiChannel.trigger('document:click', event);
 		}
 	});
 

js/rooms.js

@@ -62,20 +62,6 @@
 		}
 	};
 
-	$(document).click(function(e) {
-	    var target = e.target;
-	    // Hide all more-actions menus
-	    $('.app-navigation-entry-menu').each(function() {
-			$(this).removeClass("open");
-		});
-	    // Open more-actions menu from selected row
-	    if ($(target).is('.icon-more')) {
-	    	if (!$(target).parent().parent().find('.app-navigation-entry-menu').hasClass("open")) {
-	    		$(target).parent().parent().find('.app-navigation-entry-menu').addClass("open");
-	    	};
-	    }
-	});
-
 	OCA.SpreedMe.initRooms = initRooms;
 
 })(OCA, OC, $);

js/views/roomlistview.js

@@ -36,36 +36,61 @@
 		}
 	});
 
+	var uiChannel = Backbone.Radio.channel('ui');
+
 	var ITEM_TEMPLATE = '<a href="#{{id}}"><div class="avatar" data-userName="{{name}}"></div> {{displayName}}</a>'+
-						'<span class="utils">'+
-									'{{#isGroupCall}}<span class="action">{{count}}</span>{{/isGroupCall}}'+
-									'<span class="action icon-more" href="#" title="More" role="button"></span>'+
-								'</span>'+
-								'<div id="more-actions-{{name}}" class="app-navigation-entry-menu">'+
-									'<ul>'+
-										'<li><button>'+
-												'<span class="icon-add svg"></span>'+
-												'<span>Add person</span>'+
-											'</button>'+
-										'</li>'+
-										'<li><button>'+
-												'<span class="icon-share svg"></span>'+
-												'<span>Share group</span>'+
-											'</button>'+
-										'</li>'+
-										'<li><button>'+
-												'<span class="icon-close svg"></span>'+
-												'<span>Leave group</span>'+
-											'</button>'+
-										'</li>'+
-									'</ul>'+
-								'</div>';
+						'<div class="app-navigation-entry-utils">'+
+							'<ul>'+
+								'{{#isGroupCall}}<li class="app-navigation-entry-utils-counter">{{count}}</li>{{/isGroupCall}}'+
+								'<li class="app-navigation-entry-utils-menu-button svg"><button></button></li>'+
+							'</ul>'+
+						'</div>'+
+						'<div class="app-navigation-entry-menu">'+
+							'<ul>'+
+								'<li>'+
+									'<button>'+
+										'<span class="icon-add svg"></span>'+
+										'<span>'+t('spreedMe', 'Add person')+'</span>'+
+									'</button>'+
+								'</li>'+
+							'</ul>'+
+							'<ul>'+
+								'<li>'+
+									'<button>'+
+										'<span class="icon-share svg"></span>'+
+										'<span>'+t('spreedMe', 'Share group')+'</span>'+
+									'</button>'+
+								'</li>'+
+							'</ul>'+
+							'<ul>'+
+								'<li>'+
+									'<button>'+
+										'<span class="icon-close svg"></span>'+
+										'<span>'+t('spreedMe', 'Leave group')+'</span>'+
+									'</button>'+
+								'</li>'+
+							'</ul>'+
+						'</div>';
 
 	var RoomItenView = Marionette.View.extend({
 		tagName: 'li',
 		modelEvents: {
 			change: 'render'
 		},
+		initialize: function() {
+			// Add class to every room list item to detect it on click.
+			this.$el.addClass('room-list-item');
+
+			this.listenTo(uiChannel, 'document:click', function(event) {
+				var target = $(event.target);
+
+				if (!this.$el.is(target.closest('li.room-list-item'))) {
+					// Click was not triggered by this element -> close menu
+					this.menuShown = false;
+					this.toggleMenuClass();
+				}
+			});
+		},
 		onRender: function() {
 			if (this.model.get('active')) {
 				this.$el.addClass('active');
@@ -77,7 +102,22 @@
 				$(a).avatar($(a).data('username'), 32);
 			});
 		},
-		template: Handlebars.compile(ITEM_TEMPLATE)
+		events: {
+			'click .app-navigation-entry-utils-menu-button button': 'toggleMenu',
+		},
+		ui: {
+			'menu': 'div.app-navigation-entry-menu',
+		},
+		template: Handlebars.compile(ITEM_TEMPLATE),
+		menuShown: false,
+		toggleMenu: function(e) {
+			e.preventDefault();
+			this.menuShown = !this.menuShown;
+			this.toggleMenuClass();
+		},
+		toggleMenuClass: function() {
+			this.ui.menu.toggleClass('open', this.menuShown);
+		}
 	});
 
 	var RoomListView = Marionette.CollectionView.extend({