dropdown mixin to handle dialog open/close lifecycle

gui/app/components/folder/category-admin.js

@@ -12,18 +12,19 @@
 import Ember from 'ember';
 import NotifierMixin from '../../mixins/notifier';
 import TooltipMixin from '../../mixins/tooltip';
+import DropdownMixin from '../../mixins/dropdown';
 
 const {
 	inject: { service }
 } = Ember;
 
-export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
+export default Ember.Component.extend(NotifierMixin, TooltipMixin, DropdownMixin, {
 	userService: service('user'),
 	categoryService: service('category'),
 	appMeta: service(),
 	store: service(),
 	newCategory: '',
-	drop: null,
+	dropdown: null,
 	users: [],
 
 	didReceiveAttrs() {
@@ -35,11 +36,7 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
 	},
 
 	willDestroyElement() {
-		let drop = this.get('drop');
+		this.destroyDropdown();
-
-		if (is.not.null(drop)) {
-			drop.destroy();
-		}
 	},
 
 	load() {
@@ -131,13 +128,13 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
 		},
 
 		onShowAccessPicker(catId) {
+			this.closeDropdown();
 			let users = this.get('users');
 			let category = this.get('category').findBy('id', catId);
 
 			this.get('categoryService').getViewers(category.get('id')).then((viewers) => {
 				// mark those users as selected that have already been given permission
 				// to see the current category;
-				console.log(viewers);
 
 				users.forEach((user) => {
 					let selected = viewers.isAny('id', user.get('id'));
@@ -162,13 +159,12 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
 					remove: false
 				});
 
-				this.set('drop', drop);
+				this.set('dropdown', drop);
 			});
 		},
 
 		onGrantCancel() {
-			let drop = this.get('drop');
+			this.closeDropdown();
-			drop.close();
 		},
 
 		onGrantAccess() {
@@ -189,8 +185,7 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
 
 			this.get('categoryService').setViewers(category.get('id'), viewers).then( () => {});
 
-			let drop = this.get('drop');
+			this.closeDropdown();
-			drop.close();
 		}
 	}
 });

gui/app/mixins/dropdown.js

@@ -0,0 +1,30 @@
+// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
+//
+// This software (Documize Community Edition) is licensed under
+// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
+//
+// You can operate outside the AGPL restrictions by purchasing
+// Documize Enterprise Edition and obtaining a commercial license
+// by contacting <sales@documize.com>.
+//
+// https://documize.com
+
+import Ember from 'ember';
+
+export default Ember.Mixin.create({
+	closeDropdown() {
+		let drop = this.get('dropdown');
+
+		if (is.not.null(drop) && is.not.null(drop.drop)) {
+			drop.close();
+		}
+	},
+
+	destroyDropdown() {
+		let drop = this.get('dropdown');
+
+		if (is.not.null(drop) && is.not.null(drop.drop)) {
+			drop.destroy();
+		}
+	}
+});

gui/app/styles/widget/widget-dropdown.scss

@@ -40,11 +40,12 @@
 				.content {
 					> p {
 	                    margin: 7px 0;
-	                    font-size: 0.9em;
+	                    font-size: 1rem;
 	                }
 
 					> .heading {
-						font-weight: bold;
+						line-height: 3rem;
+						font-size: 1.2rem;
 					}
 				}
 

gui/app/styles/widget/widget-list-picker.scss

@@ -4,6 +4,7 @@
 	> .options {
 		width: 300px;
 		max-height: 400px;
+		margin: 0 auto;
 		overflow: auto;
 
 		> .option {

gui/app/templates/components/folder/category-admin.hbs

@@ -62,6 +62,7 @@
 
 <div class="dropdown-dialog category-access-dialog">
 	<div class="content">
+		<p class="heading">Select who can view documents within category</p>
 		{{ui/ui-list-picker items=categoryUsers nameField='fullname'}}
 	</div>
 	<div class="actions">