new UX for category management

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

@@ -10,7 +10,6 @@
 // https://documize.com
 
 import Component from '@ember/component';
-
 import { inject as service } from '@ember/service';
 import NotifierMixin from '../../mixins/notifier';
 import TooltipMixin from '../../mixins/tooltip';
@@ -22,19 +21,20 @@ export default Component.extend(NotifierMixin, TooltipMixin, DropdownMixin, {
 	appMeta: service(),
 	store: service(),
 	newCategory: '',
+	deleteId: '',
 	dropdown: null,
 	users: [],
 
 	didReceiveAttrs() {
 		this._super(...arguments);
-
+		this.renderTooltips();
 		this.load();
 	},
 
+
 	willDestroyElement() {
 		this._super(...arguments);
-
+		this.removeTooltips();
-		this.destroyDropdown();
 	},
 
 	load() {
@@ -88,15 +88,17 @@ export default Component.extend(NotifierMixin, TooltipMixin, DropdownMixin, {
 	},
 
 	actions: {
-		onAdd() {
+		onAdd(e) {
+			e.preventDefault();
+
 			let cat = this.get('newCategory');
 
 			if (cat === '') {
-				$('#new-category-name').addClass('error').focus();
+				$('#new-category-name').addClass('is-invalid').focus();
 				return;
 			}
 
-			$('#new-category-name').removeClass('error').focus();
+			$('#new-category-name').removeClass('is-invalid').focus();
 			this.set('newCategory', '');
 
 			let c = {
@@ -109,8 +111,19 @@ export default Component.extend(NotifierMixin, TooltipMixin, DropdownMixin, {
 			});
 		},
 
-		onDelete(id) {
+		onShowDelete(id) {
-			this.get('categoryService').delete(id).then(() => {
+			let cat = this.get('category').findBy('id', id);
+			this.set('deleteId', cat.get('id'));
+
+			$('#category-delete-modal').modal('dispose');
+			$('#category-delete-modal').modal({show: true});
+		},
+
+		onDelete() {
+			$('#category-delete-modal').modal('hide');
+			$('#category-delete-modal').modal('dispose');
+
+			this.get('categoryService').delete(this.get('deleteId')).then(() => {
 				this.load();
 			});
 		},
@@ -127,12 +140,12 @@ export default Component.extend(NotifierMixin, TooltipMixin, DropdownMixin, {
 		onSave(id) {
 			let cat = this.setEdit(id, true);
 			if (cat.get('category') === '') {
-				$('#edit-category-' + cat.get('id')).addClass('error').focus();
+				$('#edit-category-' + cat.get('id')).addClass('is-invalid').focus();
-				return;
+				return false;
 			}
 
 			cat = this.setEdit(id, false);
-			$('#edit-category-' + cat.get('id')).removeClass('error');
+			$('#edit-category-' + cat.get('id')).removeClass('is-invalid');
 
 			this.get('categoryService').save(cat).then(() => {
 				this.load();
@@ -140,7 +153,8 @@ export default Component.extend(NotifierMixin, TooltipMixin, DropdownMixin, {
 		},
 
 		onShowAccessPicker(catId) {
-			this.closeDropdown();
+			this.set('showCategoryAccess', true);
+
 			let users = this.get('users');
 			let category = this.get('category').findBy('id', catId);
 
@@ -155,26 +169,12 @@ export default Component.extend(NotifierMixin, TooltipMixin, DropdownMixin, {
 
 				this.set('categoryUsers', users);
 				this.set('currentCategory', category);
-
-				$(".category-access-dialog").css("display", "block");
-
-				let dropOptions = Object.assign(this.get('dropDefaults'), {
-					target: $("#category-access-button-" + catId)[0],
-					content: $(".category-access-dialog")[0],
-					classes: 'drop-theme-basic',
-					position: "bottom right",
-					remove: false});
-
-				let drop = new Drop(dropOptions);
-				this.set('dropdown', drop);
 			});
 		},
 
-		onGrantCancel() {
-			this.closeDropdown();
-		},
-
 		onGrantAccess() {
+			this.set('showCategoryAccess', false);
+
 			let folder = this.get('folder');
 			let category = this.get('currentCategory');
 			let users = this.get('categoryUsers').filterBy('selected', true);
@@ -196,8 +196,6 @@ export default Component.extend(NotifierMixin, TooltipMixin, DropdownMixin, {
 			this.get('categoryService').setViewers(folder.get('id'), category.get('id'), viewers).then(() => {
 				this.load();
 			});
-
-			this.closeDropdown();
 		}
 	}
 });

gui/app/components/folder/space-view.js

@@ -14,6 +14,7 @@ import { inject as service } from '@ember/service';
 import { all } from 'rsvp';
 import { schedule } from '@ember/runloop';
 import { gt } from '@ember/object/computed';
+import { computed } from '@ember/object';
 import AuthMixin from '../../mixins/auth';
 
 export default Component.extend(AuthMixin, {
@@ -23,6 +24,10 @@ export default Component.extend(AuthMixin, {
 	localStorage: service('localStorage'),
 	hasCategories: gt('categories.length', 0),
 	filteredDocs: [],
+	categoryLinkName: 'Manage',
+	spaceSettings: computed('permissions', function() {
+		return this.get('permissions.spaceOwner') || this.get('permissions.spaceManage');
+	}),
 
 	didReceiveAttrs() {
 		this._super(...arguments);
@@ -50,6 +55,7 @@ export default Component.extend(AuthMixin, {
 		});
 
 		this.set('categories', categories);
+		this.set('categoryLinkName', categories.length > 0 ? 'manage' : 'add');
 
 		schedule('afterRender', () => {
 			if (this.get('rootDocCount') > 0) {

gui/app/components/toolbar/for-space.js

@@ -14,9 +14,10 @@ import { schedule } from '@ember/runloop';
 import { computed } from '@ember/object';
 import { inject as service } from '@ember/service';
 import NotifierMixin from '../../mixins/notifier';
+import TooltipMixin from '../../mixins/tooltip';
 import AuthMixin from '../../mixins/auth';
 
-export default Component.extend(NotifierMixin, AuthMixin, {
+export default Component.extend(NotifierMixin, TooltipMixin, AuthMixin, {
 	spaceService: service('folder'),
 	session: service(),
 	appMeta: service(),
@@ -75,15 +76,7 @@ export default Component.extend(NotifierMixin, AuthMixin, {
 
 	willDestroyElement() {
 		this._super(...arguments);
-
+		this.removeTooltips();
-		$('[data-toggle="tooltip"]').tooltip('dispose');
-	},
-
-	renderTooltips() {
-		schedule('afterRender', () => {
-			$('[data-toggle="tooltip"]').tooltip('dispose');
-			$('body').tooltip({selector: '[data-toggle="tooltip"]', delay: 250});
-		});
 	},
 
 	getDefaultInvitationMessage() {

gui/app/mixins/tooltip.js

@@ -10,9 +10,21 @@
 // https://documize.com
 
 import Mixin from '@ember/object/mixin';
+import { schedule } from '@ember/runloop';
 
 export default Mixin.create({
-    tooltips: [],
+	tooltips: [],
+
+	renderTooltips() {
+		schedule('afterRender', () => {
+			$('[data-toggle="tooltip"]').tooltip('dispose');
+			$('body').tooltip({selector: '[data-toggle="tooltip"]', delay: 250});
+		});
+	},
+
+	removeTooltips() {
+		$('[data-toggle="tooltip"]').tooltip('dispose');
+	},
 
     addTooltip(elem) {
         if (elem == null) {

gui/app/pods/folder/category/route.js

@@ -21,7 +21,8 @@ export default Route.extend(AuthenticatedRouteMixin, {
 		return hash({
 			folder: this.modelFor('folder').folder,
 			permissions: this.modelFor('folder').permissions,
-			folders: this.modelFor('folder').folders
+			folders: this.modelFor('folder').folders,
+			templates: this.modelFor('folder').templates,
 		});
 	}
 });

gui/app/pods/folder/category/template.hbs

@@ -0,0 +1,12 @@
+{{layout/nav-bar}}
+
+<div class="container">
+	{{#toolbar/t-toolbar}}
+		{{#toolbar/t-links}}
+			{{#link-to "folders" class="link" tagName="li"}}SPACES{{/link-to}}
+			{{#link-to "folder" model.folder.id model.folder.slug class="link" tagName="li"}}{{model.folder.name}}{{/link-to}}
+		{{/toolbar/t-links}}
+	{{/toolbar/t-toolbar}}
+
+	{{folder/category-admin folders=model.folders folder=model.folder}}
+</div>

gui/app/pods/folder/settings/category/template.hbs

@@ -1 +0,0 @@
-{{folder/category-admin folders=model.folders folder=model.folder}}

gui/app/pods/folder/settings/controller.js

@@ -1,22 +0,0 @@
-// 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 { inject as service } from '@ember/service';
-
-import Controller from '@ember/controller';
-import NotifierMixin from '../../../mixins/notifier';
-import AuthProvider from '../../../mixins/auth';
-
-export default Controller.extend(AuthProvider, NotifierMixin, {
-	documentService: service('document'),
-	folderService: service('folder'),
-	localStorage: service('localStorage'),
-});

gui/app/pods/folder/settings/invitation/controller.js

@@ -1,15 +0,0 @@
-// 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 Controller from '@ember/controller';
-
-export default Controller.extend({
-});

gui/app/pods/folder/settings/invitation/route.js

@@ -1,27 +0,0 @@
-// 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 { hash } from 'rsvp';
-
-import Route from '@ember/routing/route';
-import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
-
-export default Route.extend(AuthenticatedRouteMixin, {
-	model() {
-		this.get('browser').setTitle(this.modelFor('folder').folder.get('name'));
-
-		return hash({
-			folder: this.modelFor('folder').folder,
-			permissions: this.modelFor('folder').permissions,
-			folders: this.modelFor('folder').folders
-		});
-	}
-});

gui/app/pods/folder/settings/invitation/template.hbs

@@ -1 +0,0 @@
-{{folder/invite-user folders=model.folders folder=model.folder}}

gui/app/pods/folder/settings/route.js

@@ -1,33 +0,0 @@
-// 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 { hash } from 'rsvp';
-
-import Route from '@ember/routing/route';
-import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
-
-export default Route.extend(AuthenticatedRouteMixin, {
-	beforeModel: function (transition) {
-		if (is.equal(transition.targetName, 'folder.settings.index')) {
-			this.transitionTo('folder.settings.security');
-		}
-	},
-
-	model() {
-		this.get('browser').setTitle(this.modelFor('folder').folder.get('name'));
-
-		return hash({
-			folder: this.modelFor('folder').folder,
-			permissions: this.modelFor('folder').permissions,
-			folders: this.modelFor('folder').folders
-		});
-	}
-});

gui/app/pods/folder/settings/security/controller.js

@@ -1,15 +0,0 @@
-// 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 Controller from '@ember/controller';
-
-export default Controller.extend({
-});

gui/app/pods/folder/settings/security/route.js

@@ -1,27 +0,0 @@
-// 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 { hash } from 'rsvp';
-
-import Route from '@ember/routing/route';
-import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
-
-export default Route.extend(AuthenticatedRouteMixin, {
-	model() {
-		this.get('browser').setTitle(this.modelFor('folder').folder.get('name'));
-
-		return hash({
-			folder: this.modelFor('folder').folder,
-			permissions: this.modelFor('folder').permissions,
-			folders: this.modelFor('folder').folders
-		});
-	}
-});

gui/app/pods/folder/settings/security/template.hbs

@@ -1 +0,0 @@
-{{folder/permission-admin folders=model.folders folder=model.folder}}

gui/app/pods/folder/settings/template.hbs

@@ -1,33 +0,0 @@
-{{#layout/zone-container}}
-	{{#layout/zone-sidebar}}
-		<div class="sidebar-common">
-			{{layout/sidebar-intro title="Space Settings" message="Invite users, configure space permissions, and set up categories to sub-divide the space."}}
-		</div>
-		<div class="sidebar-wrapper">
-			<div class="sidebar-menu">
-				<ul class="options">
-					{{#if isAuthProviderDocumize}}
-						{{#link-to 'folder.settings.invitation' activeClass='selected' class="option" tagName="li"}}Invite{{/link-to}}
-					{{/if}}
-					{{#link-to 'folder.settings.security' activeClass='selected' class="option" tagName="li"}}Permissions{{/link-to}}
-					{{#link-to 'folder.settings.category' activeClass='selected' class="option" tagName="li"}}Categories{{/link-to}}
-				</ul>
-			</div>
-		</div>
-	{{/layout/zone-sidebar}}
-	{{#layout/zone-content}}
-		<div class="back-to-space">
-			{{#link-to 'folder' model.folder.id model.folder.slug}}
-				<div class="regular-button button-nav">
-					<i class="material-icons">arrow_back</i>
-					<div class="name">{{model.folder.name}}</div>
-				</div>
-			{{/link-to}}
-		</div>
-		<div class="margin-top-30" />
-
-		{{outlet}}
-
-		<div class="margin-top-50" />
-	{{/layout/zone-content}}
-{{/layout/zone-container}}

gui/app/router.js

@@ -24,18 +24,8 @@ export default Router.map(function () {
     this.route('folder', {
 		path: 's/:folder_id/:folder_slug'
 	}, function() {
-		this.route('settings', {
+		this.route('category', {
-			path: 'settings'
+			path: 'category'
-		}, function () {
-			this.route('security', {
-				path: 'security'
-			});
-			this.route('invitation', {
-				path: 'invitation'
-			});
-			this.route('category', {
-				path: 'category'
-			});
 		})
 	});
 

gui/app/styles/app.scss

@@ -22,7 +22,6 @@
 @import "view/page-auth.scss";
 @import "view/page-onboard.scss";
 @import "view/page-exceptions.scss";
-@import "view/folder/all.scss";
 @import "view/document/all.scss";
 @import "view/common.scss";
 

gui/app/styles/base.scss

@@ -25,12 +25,24 @@ body {
 }
 
 a {
+	@include ease-in();
 	color: $color-link;
 	text-decoration: none;
 	cursor: pointer;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
-	text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
+	// text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
+
+	a:focus,
+	a:hover {
+		text-decoration: none;
+	}
+}
+
+a.admin-link {
+	// color: $color-gray;
+	text-decoration: none;
+	font-weight: bold;
 
 	a:focus,
 	a:hover {

gui/app/styles/mixins.scss

@@ -55,3 +55,13 @@
 		color: $color-link;
 	}
 }
+
+@mixin card-theme() {
+	background-color: $color-primary-light;
+	box-shadow: 1px 1px 3px 0px rgba(211,211,211,1);
+
+	&:hover {
+		background-color: darken($color-primary-light, 5%);
+		color: $color-primary;
+	}
+}

gui/app/styles/view/folder/all.scss

@@ -1 +0,0 @@
-@import "settings.scss";

gui/app/styles/view/folder/settings.scss

@@ -1,51 +0,0 @@
-.space-settings {
-	.category-table {
-        padding: 0;
-        margin: 0 0 0 20px;
-		width: 60%;
-
-		> .row {
-			margin: 15px 0;
-			padding: 15px;
-			background-color: $color-off-white;
-			@include border-radius(2px);
-
-			> .category {
-				display: inline-block;
-
-				> .name {
-					font-size: 1.2rem;
-				}
-
-				> .info {
-					font-size: 0.9rem;
-					margin-top: 8px;
-					color: $color-gray;
-				}
-			}
-
-			> .buttons {
-				margin-top: 5px;
-			}
-
-			> .action {
-				display: inline-block;
-			}
-
-			> .input-control {
-				margin: 0;
-				display: inline-block;
-
-				> input {
-					margin: 0 0 8px 0;
-					padding: 0;
-					font-size: 1.2rem;
-				}
-			}
-		}
-	}
-}
-
-.category-access-dialog {
-	display: none;
-}

gui/app/styles/view/space.scss

@@ -119,10 +119,18 @@
 }
 
 .space-admin {
-	> .permission-table {
+	> .title {
-		// width: 100%;
+		font-size: 1.5rem;
-		// overflow-x: auto;
+		font-weight: bold;
+		color: $color-dark;
+	}
 
+	> .sub-title {
+		font-size: 1.1rem;
+		color: $color-gray;
+	}
+
+	> .permission-table {
 		> tbody, > thead {
 			> tr, > th {
 				> td, > th {
@@ -151,4 +159,50 @@
 			}
 		}
 	}
+
+	> .categories {
+        padding: 0;
+        margin: 0;
+
+		> .item {
+			margin: 15px 0;
+			padding: 15px;
+			@include card-theme();
+			@include ease-in();
+
+			> .category {
+				display: inline-block;
+
+				> .name {
+					font-size: 1.2rem;
+					color: $color-primary;
+				}
+
+				> .info {
+					font-size: 0.9rem;
+					margin-top: 8px;
+					color: $color-gray;
+				}
+			}
+
+			> .buttons {
+				margin-top: 5px;
+			}
+
+			> .action {
+				display: inline-block;
+			}
+
+			> .input-control {
+				margin: 0;
+				display: inline-block;
+
+				> input {
+					margin: 0 0 8px 0;
+					padding: 0;
+					font-size: 1.2rem;
+				}
+			}
+		}
+	}
 }

gui/app/styles/view/toolbar.scss

@@ -12,7 +12,7 @@
 			margin-right: 30px;
 			cursor: pointer;
 			@include ease-in();
-			border-bottom: 2px solid $color-gray-light;
+			// border-bottom: 2px solid $color-gray-light;
 
 			&:hover {
 				color: $color-link;

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

@@ -452,6 +452,24 @@
 	}
 }
 
+.button-icon-black {
+	display: inline-block;
+	cursor: default;
+	@include ease-in();
+
+	> i {
+		color: $color-off-black;
+		font-size: 2rem;
+		@include ease-in();
+	}
+
+	&:hover {
+		> i {
+			color: darken($color-off-black, 5%);
+		}
+	}
+}
+
 .button-icon-small {
 	> i {
 		font-size: 1.3rem;

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

@@ -1,74 +1,77 @@
-<div class="space-settings">
+<div class="row">
-	<div class="panel">
+	<div class="col">
-		<div class="form-header">
+		<div class="space-admin mt-4 mb-5">
-			<div class="title">Categories</div>
+			<h1 class="title">Categories</h1>
-			<div class="tip">Sub-divide spaces and secure document access with categories</div>
+			<p class="sub-title">Sub-divide spaces into categories which can contain documents with restricted access.</p>
+			<form class="form-inline" onsubmit={{action 'onAdd'}}>
+				<div class="form-group mr-3">
+					{{input id="new-category-name" type='text' class="form-control mousetrap" placeholder="Category name" value=newCategory}}
+				</div>
+				<button type="button" class="btn btn-success" onclick={{action 'onAdd'}}>Add</button>
+			</form>
 		</div>
-		<form id="category-form" {{action 'onAdd' on='submit'}}>
-			<div class="input-control">
-				<div class="category-table">
-					{{#each category as |cat|}}
-						<div class="row">
-							{{#if cat.editMode}}
-								<div class="input-control input-transparent width-60">
-									{{focus-input id=(concat 'edit-category-' cat.id) type="text" value=cat.category class="input-inline"}}
-								</div>
-							{{else}}
-								<div class="category">
-									<div class="name">{{cat.category}}</div>
-									<div class="info">
-										{{cat.documents}} {{if (eq cat.documents 1) 'document' 'documents' }}, {{cat.users}} {{if (eq cat.users 1) 'person' 'people' }}</div>
-								</div>
-							{{/if}}
-							<div class="pull-right buttons">
-								{{#if cat.editMode}}
-									<button type="submit" class="round-button-mono" {{action 'onSave' cat.id}}>
-										<i class="material-icons color-green">check</i>
-									</button>
-									<div class="round-button-mono" {{action 'onEditCancel' cat.id}}>
-										<i class="material-icons color-gray">close</i>
-									</div>
-								{{else}}
-									<div class="">
-										<div id="category-access-button-{{cat.id}}" data-tooltip="Set user access" data-tooltip-position="top center"  class="action round-button-mono button-white" {{action 'onShowAccessPicker' cat.id}}>
-											<i class="material-icons">person</i>
-										</div>
-										<div {{action 'onEdit' cat.id}} class="action round-button-mono button-white">
-											<i class="material-icons">edit</i>
-										</div>
-										<div id="{{concat 'delete-category-' cat.id}}" class="action round-button-mono button-white">
-											<i class="material-icons">delete</i>
-										</div>
-										{{#dropdown-dialog target=(concat 'delete-category-' cat.id) position="bottom right" button="Delete" color="flat-red" onAction=(action 'onDelete' cat.id)}}
-											<p>Are you sure you want to delete category <b>{{cat.category}}?</b></p>
-										{{/dropdown-dialog}}
-									</div>
-								{{/if}}
-							</div>
-						</div>
-					{{else}}
-						<div class="margin-top-30"><i>No categories defined yet</i></div>
-					{{/each}}
-				</div>
-				<div class="input-control margin-top-50 width-60">
-					<label>Add Category</label>
-					<div class="tip">Provide a short name</div>
-					{{focus-input id="new-category-name" type="text" value=newCategory}}
-				</div>
-			</div>
-			<div class="regular-button button-blue" {{action 'onAdd'}}>add</div>
-		</form>
 	</div>
 </div>
 
-<div class="dropdown-dialog category-access-dialog">
+<div class="row">
-	<div class="content">
+	<div class="col">
-		<p class="heading">Select who can view documents within category</p>
+		<div class="space-admin mt-4 mb-5">
-		{{ui/ui-list-picker items=categoryUsers nameField='fullname'}}
+			<div class="categories">
+				{{#each category as |cat|}}
+					<div class="item row">
+						{{#if cat.editMode}}
+							<form onsubmit={{action 'onSave' cat.id bubbles=false}} class="col-8">
+								{{focus-input id=(concat 'edit-category-' cat.id) type="text" value=cat.category class="form-control"}}
+							</form>
+						{{else}}
+							<div class="category col-8">
+								<div class="name">{{cat.category}}</div>
+								<div class="info">{{cat.documents}} {{if (eq cat.documents 1) 'document' 'documents' }}, {{cat.users}} {{if (eq cat.users 1) 'person' 'people' }}</div>
+							</div>
+						{{/if}}
+						<div class="col-4 buttons text-right">
+							{{#if cat.editMode}}
+								<button type="button" class="btn btn-outline-secondary" {{action 'onEditCancel' cat.id}}>Cancel</button>
+								<button type="button" class="btn btn-outline-success"  {{action 'onSave' cat.id}}>Save</button>
+							{{else}}
+								<div id="category-access-button-{{cat.id}}" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Category access" {{action 'onShowAccessPicker' cat.id}}>
+									<i class="material-icons">security</i>
+								</div>
+								<div class="button-icon-gap" />
+								<div class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Rename" {{action 'onEdit' cat.id}} >
+									<i class="material-icons">edit</i>
+								</div>
+								<div class="button-icon-gap" />
+								<div id="{{concat 'delete-category-' cat.id}}" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Delete" {{action 'onShowDelete' cat.id}}>
+									<i class="material-icons">delete</i>
+								</div>
+							{{/if}}
+						</div>
+					</div>
+				{{else}}
+					<div class="margin-top-30"><i>No categories defined yet</i></div>
+				{{/each}}
+			</div>
+		</div>
 	</div>
-	<div class="actions">
-		<div class="flat-button" {{action 'onGrantCancel'}}>cancel</div>
-		<div class="flat-button flat-blue" {{action 'onGrantAccess'}}>set access</div>
-	</div>
-	<div class="clearfix"></div>
 </div>
+
+<div id="category-delete-modal" class="modal" tabindex="-1" role="dialog">
+	<div class="modal-dialog" role="document">
+		<div class="modal-content">
+			<div class="modal-header">Category Deletion</div>
+			<div class="modal-body">
+				<p>Are you sure you want to delete this category?</p>
+			</div>
+			<div class="modal-footer">
+				<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
+				<button type="button" class="btn btn-danger" onclick={{action 'onDelete'}}>Delete</button>
+			</div>
+		</div>
+	</div>
+</div>
+
+{{#ui/ui-dialog title="Set Cateogory Access" confirmCaption="Save" buttonType="btn-outline-success" show=showCategoryAccess onAction=(action 'onGrantAccess')}}
+	<p>Select who can view documents within category</p>
+	{{ui/ui-list-picker items=categoryUsers nameField='fullname' singleSelect=false}}
+{{/ui/ui-dialog}}

gui/app/templates/components/folder/space-view.hbs

@@ -1,34 +1,43 @@
 {{folder/space-heading space=space permissions=permissions }}
 
-{{#if hasCategories}}
+<div class="clearfix">
-	<div class="clearfix">
+	<div class="float-left mr-5">
-		<div class="float-left mr-5">
+		<div class="view-space">
-			<div class="view-space">
+			<div class="filter-caption mt-4">{{documents.length}} documents</div>
-				<div class="filter-caption mt-4">{{documents.length}} documents</div>
+			<ul class="tabnav-control">
-				<ul class="tabnav-control">
+				<li class="tab {{if spaceSelected 'selected'}}" {{action 'onDocumentFilter' 'space' space.id}}>All ({{documents.length}})</li>
-					<li class="tab {{if spaceSelected 'selected'}}" {{action 'onDocumentFilter' 'space' space.id}}>All ({{documents.length}})</li>
+				{{#if hasCategories}}
 					{{#if (gt rootDocCount 0)}}
 						<li class="tab {{if uncategorizedSelected 'selected'}}" {{action 'onDocumentFilter' 'uncategorized' space.id}}>Uncategorized ({{rootDocCount}})</li>
 					{{/if}}
-				</ul>
+				{{/if}}
-			</div>
+			</ul>
-		</div>
-		<div class="float-left">
-			<div class="view-space">
-				<div class="filter-caption mt-4">{{categories.length}} categories</div>
-				<ul class="tabnav-control">
-					{{#each categories as |cat index|}}
-						<li class="tab {{if cat.selected 'selected'}}" {{action 'onDocumentFilter' 'category' cat.id}}>{{cat.category}} ({{cat.docCount}})</li>
-					{{/each}}
-				</ul>
-			</div>
 		</div>
 	</div>
-{{else}}
+	<div class="float-left">
-	<div class="view-space">
+		<div class="view-space">
-		<div class="filter-caption">{{documents.length}} documents</div>
+			<div class="filter-caption mt-4">
+				{{categories.length}} categories
+				{{#if hasCategories}}
+					{{#if spaceSettings}}
+						&nbsp;&nbsp;{{#link-to 'folder.category' space.id space.slug class="admin-link margin-top-5"}}{{categoryLinkName}}&nbsp;&rarr;{{/link-to}}
+					{{/if}}
+				{{/if}}
+			</div>
+			<ul class="tabnav-control">
+				{{#each categories as |cat index|}}
+					<li class="tab {{if cat.selected 'selected'}}" {{action 'onDocumentFilter' 'category' cat.id}}>{{cat.category}} ({{cat.docCount}})</li>
+				{{/each}}
+			</ul>
+
+			{{#unless hasCategories}}
+				{{#if spaceSettings}}
+					{{#link-to 'folder.category' space.id space.slug class="admin-link margin-top-5"}}{{categoryLinkName}}&nbsp;&rarr;{{/link-to}}
+				{{/if}}
+			{{/unless}}
+		</div>
 	</div>
-{{/if}}
+</div>
 
 {{folder/documents-list documents=filteredDocs spaces=spaces space=space
 	templates=templates permissions=permissions

gui/app/templates/components/toolbar/for-space.hbs

@@ -3,24 +3,7 @@
 		{{#link-to "folders" class="link" tagName="li"}}SPACES{{/link-to}}
 	{{/toolbar/t-links}}
 	{{#toolbar/t-actions}}
-		{{#if pinState.isPinned}}
-			<div id="space-pin-button" class="button-icon-gold align-middle" data-toggle="tooltip" data-placement="top" title="Remove favorite" {{action 'onUnpin'}}>
-				<i class="material-icons">star</i>
-			</div>
-			<div class="button-icon-gap" />
-		{{else if session.authenticated}}
-			<div id="space-pin-button" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Save favorite" {{action 'onPin'}}>
-				<i class="material-icons">star</i>
-			</div>
-			<div class="button-icon-gap" />
-		{{/if}}
-
 		{{#if spaceSettings}}
-			<div id="space-settings-button" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Set permissions">
-				<i class="material-icons" data-toggle="modal" data-target="#space-permission-modal" data-backdrop="static">security</i>
-			</div>
-			<div class="button-icon-gap" />
-
 			<div id="space-invite-button" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Invite to space">
 				<i class="material-icons" data-toggle="modal" data-target="#space-invite-modal" data-backdrop="static">person_add</i>
 			</div>
@@ -49,6 +32,11 @@
 					</div>
 				</div>
 			</div>
+
+			<div id="space-settings-button" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Set permissions">
+				<i class="material-icons" data-toggle="modal" data-target="#space-permission-modal" data-backdrop="static">security</i>
+			</div>
+			<div class="button-icon-gap" />
 		{{/if}}
 
 		{{#if permissions.spaceOwner}}
@@ -79,6 +67,18 @@
 			</div>
 		{{/if}}
 
+		{{#if pinState.isPinned}}
+			<div id="space-pin-button" class="button-icon-gold align-middle" data-toggle="tooltip" data-placement="top" title="Remove favorite" {{action 'onUnpin'}}>
+				<i class="material-icons">star</i>
+			</div>
+			<div class="button-icon-gap" />
+		{{else if session.authenticated}}
+			<div id="space-pin-button" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Save favorite" {{action 'onPin'}}>
+				<i class="material-icons">star</i>
+			</div>
+			<div class="button-icon-gap" />
+		{{/if}}
+
 		{{#if permissions.documentAdd}}
 			<button type="button" class="btn btn-success font-weight-bold" data-toggle="modal" data-target="#add-space-modal" data-backdrop="static">+ DOCUMENT</button>
 			<div id="add-space-modal" class="modal" tabindex="-1" role="dialog">
@@ -103,4 +103,4 @@
 	{{/toolbar/t-actions}}
 {{/toolbar/t-toolbar}}
 
-{{folder/permission-admin folders=spaces folder=space}}
+{{folder/permission-admin folders=spaces folder=space}}