More UI conversion to new framework

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

@@ -0,0 +1,45 @@
+// 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 $ from 'jquery';
+import Component from '@ember/component';
+
+export default Component.extend({
+	newCategory: '',
+
+	actions: {
+		didInsertElement() {
+			this._super(...arguments);
+			$('#new-category-name').focus();
+		},
+
+		onAdd(e) {
+			e.preventDefault();
+
+			let cat = this.get('newCategory');
+
+			if (cat === '') {
+				$('#new-category-name').addClass('is-invalid').focus();
+				return;
+			}
+
+			$('#new-category-name').removeClass('is-invalid').focus();
+			this.set('newCategory', '');
+
+			let c = {
+				category: cat,
+				folderId: this.get('space.id')
+			};
+
+			this.get('onAdd')(c);
+		}
+	}
+});

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

@@ -22,7 +22,6 @@ export default Component.extend(ModalMixin, TooltipMixin, {
 	categorySvc: service('category'),
 	appMeta: service(),
 	store: service(),
-	newCategory: '',
 	deleteId: '',
 	dropdown: null,
 
@@ -92,29 +91,6 @@ export default Component.extend(ModalMixin, TooltipMixin, {
 	},
 
 	actions: {
-		onAdd(e) {
-			e.preventDefault();
-
-			let cat = this.get('newCategory');
-
-			if (cat === '') {
-				$('#new-category-name').addClass('is-invalid').focus();
-				return;
-			}
-
-			$('#new-category-name').removeClass('is-invalid').focus();
-			this.set('newCategory', '');
-
-			let c = {
-				category: cat,
-				folderId: this.get('folder.id')
-			};
-
-			this.get('categorySvc').add(c).then(() => {
-				this.load();
-			});
-		},
-
 		onShowDelete(id) {
 			let cat = this.get('category').findBy('id', id);
 			this.set('deleteId', cat.get('id'));

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

@@ -9,13 +9,12 @@
 //
 // https://documize.com
 
-import Component from '@ember/component';
 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';
+import Component from '@ember/component';
 
 export default Component.extend(AuthMixin, {
 	router: service(),
@@ -30,7 +29,7 @@ export default Component.extend(AuthMixin, {
 
 	init() {
 		this._super(...arguments);
-		this.filteredDocs = [];
+		// this.filteredDocs = [];
 		this.setup();
 	},
 
@@ -39,11 +38,6 @@ export default Component.extend(AuthMixin, {
 		this.setup();
 	},
 
-	didUpdateAttrs() {
-		this._super(...arguments);
-		// this.setup();
-	},
-
 	setup() {
 		let categories = this.get('categories');
 		let categorySummary = this.get('categorySummary');
@@ -59,7 +53,7 @@ export default Component.extend(AuthMixin, {
 		});
 
 		this.set('categories', categories);
-		this.set('categoryLinkName', categories.length > 0 ? 'manage' : 'add');
+		this.set('categoryLinkName', categories.length > 0 ? 'Manage' : 'Add');
 
 		schedule('afterRender', () => {
 			if (this.get('categoryFilter') !== '') {
@@ -75,50 +69,6 @@ export default Component.extend(AuthMixin, {
 	},
 
 	actions: {
-		onMoveDocument(documents, targetSpaceId) {
-			let self = this;
-			let promises1 = [];
-			let promises2 = [];
-
-			documents.forEach(function(documentId, index) {
-				promises1[index] = self.get('documentService').getDocument(documentId);
-			});
-
-			all(promises1).then(() => {
-				promises1.forEach(function(doc, index) {
-					doc.then((d) => {
-						d.set('folderId', targetSpaceId);
-						d.set('selected', false);
-						promises2[index] = self.get('documentService').save(d);
-					});
-				});
-
-				all(promises2).then(() => {
-					self.attrs.onRefresh();
-				});
-			});
-		},
-
-		onDeleteDocument(documents) {
-			let self = this;
-			let promises = [];
-
-			documents.forEach(function (document, index) {
-				promises[index] = self.get('documentService').deleteDocument(document);
-			});
-
-			all(promises).then(() => {
-				let documents = this.get('documents');
-				documents.forEach(function (document) {
-					document.set('selected', false);
-				});
-
-				this.set('documents', documents);
-				let cb = this.get('onRefresh');
-				cb();
-			});
-		},
-
 		onDocumentFilter(filter, id) {
 			let docs = this.get('documents');
 			let categories = this.get('categories');
@@ -170,7 +120,7 @@ export default Component.extend(AuthMixin, {
 			});
 
 			this.set('categories', categories);
-			this.set('filteredDocs', filtered);
+			this.get('onFiltered')(filtered);
 		}
 	}
 });

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

@@ -9,7 +9,18 @@
 //
 // https://documize.com
 
+import { inject as service } from '@ember/service';
 import Controller from '@ember/controller';
 
 export default Controller.extend({
+	categorySvc: service('category'),
+	refresh: 0,
+
+	actions: {
+		onAdd(c) {
+			this.get('categorySvc').add(c).then(() => {
+				this.set('refresh', this.get('refresh')+1);
+			});
+		}
+	}
 });

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

@@ -10,9 +10,8 @@
 // https://documize.com
 
 import { hash } from 'rsvp';
-
-import Route from '@ember/routing/route';
 import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
+import Route from '@ember/routing/route';
 
 export default Route.extend(AuthenticatedRouteMixin, {
 	model() {

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

@@ -1,9 +1,22 @@
-{{toolbar/nav-bar}}
+{{#layout/top-bar}}
+	<li class="item">
+		{{#link-to "folder.index" model.folder.id model.folder.slug class='link selected'}}
+			{{model.folder.name}}
+		{{/link-to}}
+	</li>
+{{/layout/top-bar}}
 
-{{#toolbar/t-toolbar}}
+{{#layout/middle-zone}}
-	{{#toolbar/t-links}}
+	{{#layout/middle-zone-content}}
-		{{#link-to "folder" model.folder.id model.folder.slug class="link selected" tagName="li"}}{{model.folder.name}}{{/link-to}}
+		{{folder/category-admin folders=model.folders folder=model.folder refresh=refresh}}
-	{{/toolbar/t-links}}
+	{{/layout/middle-zone-content}}
-{{/toolbar/t-toolbar}}
 
-{{folder/category-admin folders=model.folders folder=model.folder}}
+	{{#layout/middle-zone-sidebar}}
+		<div id="sidebar" class="sidebar">
+			{{folder/category-admin-sidebar space=model.folder onAdd=(action 'onAdd')}}
+		</div>
+	{{/layout/middle-zone-sidebar}}
+{{/layout/middle-zone}}
+
+{{#layout/bottom-bar}}
+{{/layout/bottom-bar}}

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

@@ -9,9 +9,10 @@
 //
 // https://documize.com
 
-import Controller from '@ember/controller';
+import { all } from 'rsvp';
 import { inject as service } from '@ember/service';
 import NotifierMixin from '../../../mixins/notifier';
+import Controller from '@ember/controller';
 
 export default Controller.extend(NotifierMixin, {
 	documentService: service('document'),
@@ -19,6 +20,7 @@ export default Controller.extend(NotifierMixin, {
 	localStorage: service('localStorage'),
 	queryParams: ['category'],
 	category: '',
+	filteredDocs: null,
 
 	actions: {
 		onAddSpace(payload) {
@@ -38,6 +40,53 @@ export default Controller.extend(NotifierMixin, {
 
 		onRefresh() {
 			this.get('target._routerMicrolib').refresh();
+		},
+
+		onMoveDocument(documents, targetSpaceId) {
+			let self = this;
+			let promises1 = [];
+			let promises2 = [];
+
+			documents.forEach(function(documentId, index) {
+				promises1[index] = self.get('documentService').getDocument(documentId);
+			});
+
+			all(promises1).then(() => {
+				promises1.forEach(function(doc, index) {
+					doc.then((d) => {
+						d.set('folderId', targetSpaceId);
+						d.set('selected', false);
+						promises2[index] = self.get('documentService').save(d);
+					});
+				});
+
+				all(promises2).then(() => {
+					self.send('onRefresh');
+				});
+			});
+		},
+
+		onDeleteDocument(documents) {
+			let self = this;
+			let promises = [];
+
+			documents.forEach(function (document, index) {
+				promises[index] = self.get('documentService').deleteDocument(document);
+			});
+
+			all(promises).then(() => {
+				let documents = this.get('documents');
+				documents.forEach(function (document) {
+					document.set('selected', false);
+				});
+
+				this.set('documents', documents);
+				this.send('onRefresh');
+			});
+		},
+
+		onFiltered(docs) {
+			this.set('filteredDocs', docs);
 		}
 	}
 });

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

@@ -1,22 +1,53 @@
-{{toolbar/nav-bar}}
+{{#layout/top-bar}}
+	<li class="item">
+		{{#link-to "folder.index" model.folder.id model.folder.slug class='link selected'}}
+			{{model.folder.name}}
+		{{/link-to}}
+	</li>
+{{/layout/top-bar}}
+
+{{#layout/middle-zone}}
+	{{#layout/middle-zone-content}}
+		{{toolbar/for-space
+			spaces=model.folders
+			space=model.folder
+			permissions=model.permissions
+			templates=model.templates
+			onRefresh=(action 'onRefresh')
+			onDeleteSpace=(action 'onDeleteSpace')}}
+
+		{{folder/documents-list
+			documents=filteredDocs
+			spaces=model.folders
+			space=model.folder
+			templates=model.templates
+			permissions=model.permissions
+			onDeleteDocument=(action 'onDeleteDocument')
+			onMoveDocument=(action 'onMoveDocument')}}
+	{{/layout/middle-zone-content}}
+
+	{{#layout/middle-zone-sidebar}}
+		<div id="sidebar" class="sidebar">
+			{{folder/space-heading space=model.folder permissions=model.permissions}}
+
+			{{folder/space-view
+				spaces=model.folders
+				space=model.folder
+				templates=model.templates
+				permissions=model.permissions
+				documents=model.documents
+				categories=model.categories
+				categorySummary=model.categorySummary
+				categoryMembers=model.categoryMembers
+				rootDocCount=model.rootDocCount
+				categoryFilter=category
+				onFiltered=(action 'onFiltered')
+				onRefresh=(action 'onRefresh')}}
+		</div>
+	{{/layout/middle-zone-sidebar}}
+{{/layout/middle-zone}}
+
+{{#layout/bottom-bar}}
+{{/layout/bottom-bar}}
 
-{{toolbar/for-space
-	spaces=model.folders
-	space=model.folder
-	permissions=model.permissions
-	templates=model.templates
-	onRefresh=(action 'onRefresh')
-	onDeleteSpace=(action 'onDeleteSpace')}}
 
-{{folder/space-view
-	spaces=model.folders
-	space=model.folder
-	templates=model.templates
-	permissions=model.permissions
-	documents=model.documents
-	categories=model.categories
-	categorySummary=model.categorySummary
-	categoryMembers=model.categoryMembers
-	rootDocCount=model.rootDocCount
-	categoryFilter=category
-	onRefresh=(action 'onRefresh')}}

gui/app/pods/folders/template.hbs

@@ -1,4 +1,4 @@
-{{#layout/top-bar}}
+{{#layout/top-bar selectItem="spaces"}}
 {{/layout/top-bar}}
 
 {{#layout/middle-zone}}

gui/app/styles/layout/layout-master.scss

@@ -23,8 +23,13 @@
 
 footer {
 	margin: auto auto 0 auto;
-	position: sticky;
     bottom: 0;
+	position: -webkit-sticky;
+	position: -moz-sticky;
+	position: -ms-sticky;
+	position: -o-sticky;
+	position: -webkit-sticky;
+	position: sticky;
 }
 
 @media (min-width: 720px) {

gui/app/styles/view/space.scss

@@ -1,18 +1,10 @@
 .view-space {
-	> .heading {
-		height: 10px;
-
-		> .view-heading {
-			font-size: 1.5rem;
-			font-weight: bold;
-			color: $color-dark;
-		}
-	}
-
 	> .filter-caption {
+		margin: 10px 0;
 		color: $color-gray;
-		font-size: 1.0rem;
+		font-size: 1.1rem;
-		margin: 0 0 10px 0;
+		font-weight: 500;
+		text-align: center;
 	}
 
 	> .documents {
@@ -27,7 +19,6 @@
 			position: relative;
 			margin: 0 0 30px 0;
 			width: 100%;
-			// height: 150px;
 
 			&:hover {
 				> .checkbox {
@@ -55,14 +46,6 @@
 
 				&:hover {
 					color: $color-gray;
-
-					> .title {
-						color: $color-link;
-					}
-
-					> .snippet {
-						color: $color-link;
-					}
 				}
 			}
 

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

@@ -11,7 +11,7 @@
 		background-color: $color-white;
 		color: $color-primary;
 		border: 1px solid $color-border;
-		font-weight: bold;
+		font-weight: 500;
 		font-size: 1.1rem;
 		text-align: center;
 		cursor: pointer;
@@ -48,6 +48,7 @@
 
 	> .selected {
 		background-color: $color-primary-light;
+		font-weight: 700;
 	}
 }
 

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

@@ -0,0 +1,10 @@
+<div class="space-admin">
+	<h1>Categories</h1>
+	<p>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">
+			{{focus-input id="new-category-name" type='text' class="form-control mousetrap" placeholder="Category name" value=newCategory}}
+		</div>
+		<button type="button" class="btn btn-success font-weight-bold" onclick={{action 'onAdd'}}>Add</button>
+	</form>
+</div>

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

@@ -1,111 +1,90 @@
-<div class="container">
+<div class="space-admin">
-	<div class="row">
+	<div class="categories">
-		<div class="col">
+		{{#each category as |cat|}}
-			<div class="space-admin mt-4 mb-5">
+			<div class="item row">
-				<h1 class="title">Categories</h1>
+				{{#if cat.editMode}}
-				<p class="sub-title">Sub-divide spaces into categories which can contain documents with restricted access.</p>
+					<form onsubmit={{action 'onSave' cat.id bubbles=false}} class="col-8">
-				<form class="form-inline" onsubmit={{action 'onAdd'}}>
+						{{focus-input id=(concat 'edit-category-' cat.id) type="text" value=cat.category class="form-control"}}
-					<div class="form-group mr-3">
+					</form>
-						{{focus-input id="new-category-name" type='text' class="form-control mousetrap" placeholder="Category name" value=newCategory}}
+				{{else}}
+					<div class="category col-8">
+						<div class="name">{{cat.category}}</div>
+						<div class="info">{{cat.documents}} {{if (eq cat.documents 1) 'document' 'documents' }} &middot; {{cat.users}} users/groups</div>
 					</div>
-					<button type="button" class="btn btn-success" onclick={{action 'onAdd'}}>Add</button>
+				{{/if}}
-				</form>
+				<div class="col-4 buttons text-right">
-			</div>
+					{{#if cat.editMode}}
-		</div>
+						<button type="button" class="btn btn-outline-secondary" {{action 'onEditCancel' cat.id}}>Cancel</button>
-	</div>
+						<button type="button" class="btn btn-success"  {{action 'onSave' cat.id}}>Save</button>
-
-	<div class="row">
-		<div class="col">
-			<div class="space-admin mt-4 mb-5">
-				<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' }} &middot; {{cat.users}} users/groups</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-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-danger 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</i></div>
+						<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}}>
-					{{/each}}
+							<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-danger 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</i></div>
+		{{/each}}
+	</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>
 
-	<div id="category-delete-modal" class="modal" tabindex="-1" role="dialog">
+{{#ui/ui-dialog title="Set Category Access" confirmCaption="Save" buttonType="btn-success" show=showCategoryAccess onAction=(action 'onGrantAccess')}}
-		<div class="modal-dialog" role="document">
+	<p>Select who can view documents within category</p>
-			<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 Category Access" confirmCaption="Save" buttonType="btn-success" show=showCategoryAccess onAction=(action 'onGrantAccess')}}
+	<div class="widget-list-picker">
-		<p>Select who can view documents within category</p>
+		<ul class="options">
-
+			{{#each categoryPermissions as |permission|}}
-		<div class="widget-list-picker">
+				<li class="option {{if permission.selected 'selected'}}" {{action 'onToggle' permission}}>
-			<ul class="options">
+					<div class="text text-truncate">
-				{{#each categoryPermissions as |permission|}}
+						{{#if (eq permission.who "role")}}
-					<li class="option {{if permission.selected 'selected'}}" {{action 'onToggle' permission}}>
+							<span class="button-icon-gray button-icon-small align-middle">
-						<div class="text text-truncate">
+								<i class="material-icons">people</i>
-							{{#if (eq permission.who "role")}}
+							</span>
+						{{else}}
+							{{#if (eq permission.whoId constants.EveryoneUserId)}}
 								<span class="button-icon-gray button-icon-small align-middle">
-									<i class="material-icons">people</i>
+									<i class="material-icons">language</i>
 								</span>
 							{{else}}
-								{{#if (eq permission.whoId constants.EveryoneUserId)}}
+								<span class="button-icon-gray button-icon-small align-middle">
-									<span class="button-icon-gray button-icon-small align-middle">
+									<i class="material-icons">person</i>
-										<i class="material-icons">language</i>
+								</span>
-									</span>
-								{{else}}
-									<span class="button-icon-gray button-icon-small align-middle">
-										<i class="material-icons">person</i>
-									</span>
-								{{/if}}
 							{{/if}}
-							&nbsp;{{permission.name}} 
-							{{#if (eq permission.whoId session.user.id)}}
-								<small class="form-text text-muted d-inline-block">(you)</small>
-							{{/if}}
-						</div>
-						{{#if permission.selected}}
-							<i class="material-icons">check</i>
 						{{/if}}
-					</li>
+						&nbsp;{{permission.name}}
-				{{/each}}
+						{{#if (eq permission.whoId session.user.id)}}
-			</ul>
+							<small class="form-text text-muted d-inline-block">(you)</small>
-		</div>
+						{{/if}}
-	{{/ui/ui-dialog}}
+					</div>
-</div>
+					{{#if permission.selected}}
+						<i class="material-icons">check</i>
+					{{/if}}
+				</li>
+			{{/each}}
+		</ul>
+	</div>
+{{/ui/ui-dialog}}

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

@@ -1,28 +1,20 @@
-<div class="container">
+{{#unless editMode}}
-	<div class="row">
+	<div class="view-space">
-		<div class="col">
+		<div class="heading">
-			<div class="mt-4 mb-5">
+			<h1 class="view-heading {{if permissions.spaceOwner 'cursor-pointer'}}" onclick={{if permissions.spaceOwner (action 'toggleEdit')}}>
-				{{#unless editMode}}
+				{{space.name}}
-					<div class="view-space">
+			</h1>
-						<div class="heading">
-							<h1 class="view-heading {{if permissions.spaceOwner 'cursor-pointer'}}" onclick={{if permissions.spaceOwner (action 'toggleEdit')}}>
-								{{space.name}}
-							</h1>
-						</div>
-					</div>
-				{{else}}
-					<form {{action "onSave" on="submit"}}>
-						<div class="view-space">
-							<div class="heading">
-								<div class="form-group">
-									{{focus-input id="space-name" type="text" value=spaceName class=(if hasNameError 'form-control is-invalid' 'form-control') placeholder="Space name" autocomplete="off"}}
-									<small class="form-text text-muted">Press Enter to save or Escape to cancel</small>
-								</div>
-							</div>
-						</div>
-					</form>
-				{{/unless}}
-			</div>
 		</div>
 	</div>
-</div>
+{{else}}
+	<form {{action "onSave" on="submit"}}>
+		<div class="view-space">
+			<div class="heading">
+				<div class="form-group">
+					{{focus-input id="space-name" type="text" value=spaceName class=(if hasNameError 'form-control is-invalid' 'form-control') placeholder="Space name" autocomplete="off"}}
+					<small class="form-text text-muted">Press Enter to save or Escape to cancel</small>
+				</div>
+			</div>
+		</div>
+	</form>
+{{/unless}}

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

@@ -1,52 +1,35 @@
-{{folder/space-heading space=space permissions=permissions }}
+<div class="view-space">
-
+	<div class="filter-caption mt-4">{{documents.length}} documents</div>
-<div class="container">
+	<ul class="tabnav-control tabnav-control-centered w-75">
-	<div class="row">
+		<li class="tab tab-vertical {{if spaceSelected 'selected'}}" {{action 'onDocumentFilter' 'space' space.id}}>All ({{documents.length}})</li>
-		<div class="col-12 clearfix">
+		{{#if hasCategories}}
-			<div class="float-left mr-5">
+			{{#if (gt rootDocCount 0)}}
-				<div class="view-space">
+				<li class="tab tab-vertical {{if uncategorizedSelected 'selected'}}" {{action 'onDocumentFilter' 'uncategorized' space.id}}>Uncategorized ({{rootDocCount}})</li>
-					<div class="filter-caption mt-4">{{documents.length}} documents</div>
+			{{/if}}
-					<ul class="tabnav-control">
+		{{/if}}
-						<li class="tab {{if spaceSelected 'selected'}}" {{action 'onDocumentFilter' 'space' space.id}}>All ({{documents.length}})</li>
+	</ul>
-						{{#if hasCategories}}
-							{{#if (gt rootDocCount 0)}}
-								<li class="tab {{if uncategorizedSelected 'selected'}}" {{action 'onDocumentFilter' 'uncategorized' space.id}}>Uncategorized ({{rootDocCount}})</li>
-							{{/if}}
-						{{/if}}
-					</ul>
-				</div>
-			</div>
-			<div class="float-left">
-				<div class="view-space">
-					<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>
-		</div>
-	</div>
-	<div class="row">
-		<div class="col-12">
-			{{folder/documents-list documents=filteredDocs spaces=spaces space=space
-				templates=templates permissions=permissions
-				onDeleteDocument=(action 'onDeleteDocument') onMoveDocument=(action 'onMoveDocument')}}
-		</div>
-	</div>
 </div>
 
+<div class="view-space">
+	<div class="filter-caption mt-5">
+		{{categories.length}}
+		{{#if (gt categories.length 1) }}
+			categories
+		{{else if (eq categories.length 0) }}
+			categories
+		{{else}}
+			category
+		{{/if}}
+	</div>
+	<ul class="tabnav-control tabnav-control-centered w-75">
+		{{#each categories as |cat index|}}
+			<li class="tab tab-vertical {{if cat.selected 'selected'}}" {{action 'onDocumentFilter' 'category' cat.id}}>{{cat.category}} ({{cat.docCount}})</li>
+		{{/each}}
+	</ul>
+
+	{{#if spaceSettings}}
+		<div class="text-center {{if (gt categories.length 0) 'mt-4'}}">
+			{{#link-to 'folder.category' space.id space.slug class="btn btn-secondary font-weight-bold"}}{{categoryLinkName}}{{/link-to}}
+		</div>
+	{{/if}}
+</div>

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

@@ -1,11 +1,101 @@
-{{#toolbar/t-toolbar}}
+<div class="row justify-content-between no-gutters">
 
-	{{#toolbar/t-links selectItem="spaces"}}
+	<div class="col-6">
-	{{/toolbar/t-links}}
+		{{#if permissions.documentAdd}}
+			<div class="btn-group" role="group">
+				<button id="btnGroupDocument" type="button" class="btn btn-success font-weight-bold dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">+ CONTENT</button>
+				<div class="dropdown-menu dropdown-menu-right" aria-labelledby="btnGroupDocument">
+					<a class="dropdown-item" href="#" {{action 'onShowEmptyDocModal'}}>Blank canvas</a>
+					{{#if hasTemplates}}
+						<a class="dropdown-item" href="#" {{action 'onShowTemplateDocModal'}}>From template</a>
+					{{/if}}
+					<a class="dropdown-item" href="#" {{action 'onShowImportDocModal'}}>Import files</a>
+				</div>
+			</div>
+			<div id="empty-doc-modal" class="modal" tabindex="-1" role="dialog">
+				<div class="modal-dialog" role="document">
+					<div class="modal-content">
+						<div class="modal-header">Blank Canvas</div>
+						<div class="modal-body">
+							<form onsubmit={{action 'onAddEmptyDoc'}}>
+								<div class="form-group">
+									<label for="empty-doc-name">Document Name</label>
+									{{input id="empty-doc-name" type="text" value=emptyDocName placeholder="Enter name" class=(if emptyDocNameError 'form-control mousetrap is-invalid' 'form-control mousetrap') autocomplete="off"}}
+								</div>
+							</form>
+						</div>
+						<div class="modal-footer">
+							<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
+							<button type="button" class="btn btn-success" onclick={{action 'onAddEmptyDoc'}}>Add</button>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div id="template-doc-modal" class="modal" tabindex="-1" role="dialog">
+				<div class="modal-dialog" role="document">
+					<div class="modal-content">
+						<div class="modal-header">From Template</div>
+						<div class="modal-body">
+							<form onsubmit={{action 'onAddTemplateDoc'}}>
+								<div class="form-group">
+									<label for="template-doc-name">Document Name</label>
+									{{input id="template-doc-name" type="text" value=templateDocName placeholder="Enter name" class=(if templateDocNameError 'form-control mousetrap is-invalid' 'form-control mousetrap') autocomplete="off"}}
+								</div>
+								<div class="widget-list-picker">
+									<ul class="options">
+										{{#each templates as |item|}}
+											<li class="option {{if item.selected 'selected'}}" {{action 'onSelectTemplate' item}}>
+												<div class="text text-truncate">
+													{{item.title}}<br/>{{item.description}}
+												</div>
+												{{#if item.selected}}
+													<i class="material-icons">check</i>
+												{{/if}}
+											</li>
+										{{/each}}
+									</ul>
+								</div>
+							</form>
+						</div>
+						<div class="modal-footer">
+							<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
+							<button type="button" class="btn btn-success" onclick={{action 'onAddTemplateDoc'}}>Add</button>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div id="import-doc-modal" class="modal" tabindex="-1" role="dialog">
+				<div class="modal-dialog" role="document">
+					<div class="modal-content">
+						<div class="modal-header">Import Files</div>
+						<div class="modal-body">
+							<div class="import-zone">
+								<button id="import-document-button" type="button" class="btn btn-outline-secondary btn-lg btn-block">
+									<br/>
+									Click to select files or drag-drop files
+									<br/><br/>
+									.doc, .docx, .md, .markdown
+									<br/><br/>
+								</button>
+								<div class="import-status">
+									{{#each importStatus as |status|}}
+										<p>{{status}}</p>
+									{{/each}}
+								</div>
+							</div>
+						</div>
+						<div class="modal-footer">
+							<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+						</div>
+					</div>
+				</div>
+			</div>
+		{{/if}}
+	</div>
 
-	{{#toolbar/t-actions}}
+	<div class="col-6 text-right">
 		{{#if spaceSettings}}
-			<div id="space-settings-button" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Set permissions">
+			<div id="space-permissions-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" />
@@ -77,34 +167,6 @@
 			</div>
 		{{/if}}
 
-		{{#if permissions.spaceOwner}}
-			<div id="space-delete-button" class="button-icon-danger align-middle" data-toggle="tooltip" data-placement="top" title="Delete space">
-				<i class="material-icons" data-toggle="modal" data-target="#space-delete-modal" data-backdrop="static">delete</i>
-			</div>
-			<div class="button-icon-gap" />
-			<div id="space-delete-modal" class="modal" tabindex="-1" role="dialog">
-				<div class="modal-dialog" role="document">
-					<div class="modal-content">
-						<div class="modal-header">Space Deletion</div>
-						<div class="modal-body">
-							<form onsubmit={{action 'onSpaceDelete'}}>
-								<p>Are you sure you want to delete this space and all documents?</p>
-								<div class="form-group">
-									<label for="delete-space-name">Please type space name to confirm</label>
-									{{input type='text' id="delete-space-name" class="form-control mousetrap" placeholder="Space name" value=deleteSpaceName}}
-									<small class="form-text text-muted">This will delete all documents and templates within this space!</small>
-								</div>
-							</form>
-						</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 'onSpaceDelete'}}>Delete</button>
-						</div>
-					</div>
-				</div>
-			</div>
-		{{/if}}
-
 		{{#if (or permissions.spaceOwner permissions.spaceManage)}}
 			<div id="space-settings-button" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Settings">
 				<i class="material-icons" data-toggle="modal" data-target="#space-settings-modal" data-backdrop="static">settings</i>
@@ -158,98 +220,35 @@
 			<div class="button-icon-gap" />
 		{{/if}}
 
-		{{#if permissions.documentAdd}}
+		{{#if permissions.spaceOwner}}
-			<div class="btn-group" role="group">
+			<div id="space-delete-button" class="button-icon-danger align-middle" data-toggle="tooltip" data-placement="top" title="Delete space">
-				<button id="btnGroupDocument" type="button" class="btn btn-success font-weight-bold dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">+ DOCUMENT</button>
+				<i class="material-icons" data-toggle="modal" data-target="#space-delete-modal" data-backdrop="static">delete</i>
-				<div class="dropdown-menu dropdown-menu-right" aria-labelledby="btnGroupDocument">
-					<a class="dropdown-item" href="#" {{action 'onShowEmptyDocModal'}}>Empty document</a>
-					{{#if hasTemplates}}
-						<a class="dropdown-item" href="#" {{action 'onShowTemplateDocModal'}}>From template</a>
-					{{/if}}
-					<a class="dropdown-item" href="#" {{action 'onShowImportDocModal'}}>Import files</a>
-				</div>
 			</div>
-			<div id="empty-doc-modal" class="modal" tabindex="-1" role="dialog">
+			<div class="button-icon-gap" />
+			<div id="space-delete-modal" class="modal" tabindex="-1" role="dialog">
 				<div class="modal-dialog" role="document">
 					<div class="modal-content">
-						<div class="modal-header">Empty Document</div>
+						<div class="modal-header">Space Deletion</div>
 						<div class="modal-body">
-							<form onsubmit={{action 'onAddEmptyDoc'}}>
+							<form onsubmit={{action 'onSpaceDelete'}}>
+								<p>Are you sure you want to delete this space and all documents?</p>
 								<div class="form-group">
-									<label for="empty-doc-name">Document Name</label>
+									<label for="delete-space-name">Please type space name to confirm</label>
-									{{input id="empty-doc-name" type="text" value=emptyDocName placeholder="Enter name" class=(if emptyDocNameError 'form-control mousetrap is-invalid' 'form-control mousetrap') autocomplete="off"}}
+									{{input type='text' id="delete-space-name" class="form-control mousetrap" placeholder="Space name" value=deleteSpaceName}}
+									<small class="form-text text-muted">This will delete all documents and templates within this space!</small>
 								</div>
 							</form>
 						</div>
 						<div class="modal-footer">
 							<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
-							<button type="button" class="btn btn-success" onclick={{action 'onAddEmptyDoc'}}>Add</button>
+							<button type="button" class="btn btn-danger" onclick={{action 'onSpaceDelete'}}>Delete</button>
-						</div>
-					</div>
-				</div>
-			</div>
-			<div id="template-doc-modal" class="modal" tabindex="-1" role="dialog">
-				<div class="modal-dialog" role="document">
-					<div class="modal-content">
-						<div class="modal-header">Document From Template</div>
-						<div class="modal-body">
-							<form onsubmit={{action 'onAddTemplateDoc'}}>
-								<div class="form-group">
-									<label for="template-doc-name">Document Name</label>
-									{{input id="template-doc-name" type="text" value=templateDocName placeholder="Enter name" class=(if templateDocNameError 'form-control mousetrap is-invalid' 'form-control mousetrap') autocomplete="off"}}
-								</div>
-								<div class="widget-list-picker">
-									<ul class="options">
-										{{#each templates as |item|}}
-											<li class="option {{if item.selected 'selected'}}" {{action 'onSelectTemplate' item}}>
-												<div class="text text-truncate">
-													{{item.title}}<br/>{{item.description}}
-												</div>
-												{{#if item.selected}}
-													<i class="material-icons">check</i>
-												{{/if}}
-											</li>
-										{{/each}}
-									</ul>
-								</div>
-							</form>
-						</div>
-						<div class="modal-footer">
-							<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
-							<button type="button" class="btn btn-success" onclick={{action 'onAddTemplateDoc'}}>Add</button>
-						</div>
-					</div>
-				</div>
-			</div>
-			<div id="import-doc-modal" class="modal" tabindex="-1" role="dialog">
-				<div class="modal-dialog" role="document">
-					<div class="modal-content">
-						<div class="modal-header">Import Documents</div>
-						<div class="modal-body">
-							<div class="import-zone">
-								<button id="import-document-button" type="button" class="btn btn-outline-secondary btn-lg btn-block">
-									<br/>
-									Click to select files or drag-drop files
-									<br/><br/>
-									.doc, .docx, .md, .markdown
-									<br/><br/>
-								</button>
-								<div class="import-status">
-									{{#each importStatus as |status|}}
-										<p>{{status}}</p>
-									{{/each}}
-								</div>
-							</div>
-						</div>
-						<div class="modal-footer">
-							<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
 						</div>
 					</div>
 				</div>
 			</div>
 		{{/if}}
-	{{/toolbar/t-actions}}
 
-{{/toolbar/t-toolbar}}
+	</div>
+</div>
 
 {{folder/permission-admin folders=spaces folder=space onRefresh=onRefresh}}