[WIP ]space view

Document list renders as per design

gui/app/components/folder/sidebar-folders-list.js

@@ -1,105 +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 { schedule } from '@ember/runloop';
-
-import Component from '@ember/component';
-import constants from '../../utils/constants';
-import TooltipMixin from '../../mixins/tooltip';
-import NotifierMixin from '../../mixins/notifier';
-import AuthMixin from '../../mixins/auth';
-
-export default Component.extend(TooltipMixin, NotifierMixin, AuthMixin, {
-	publicFolders: [],
-	protectedFolders: [],
-	privateFolders: [],
-	hasPublicFolders: false,
-	hasProtectedFolders: false,
-	hasPrivateFolders: false,
-	newFolder: '',
-	copyTemplate: true,
-	copyPermission: true,
-	copyDocument: false,
-	clonedSpace: { id: "" },
-	showSpace: false,
-	showClone: false,
-
-	didReceiveAttrs() {
-		let folders = this.get('folders');
-		let publicFolders = [];
-		let protectedFolders = [];
-		let privateFolders = [];
-
-		_.each(folders, folder => {
-			if (folder.get('folderType') === constants.FolderType.Public) {
-				publicFolders.pushObject(folder);
-			}
-			if (folder.get('folderType') === constants.FolderType.Private) {
-				privateFolders.pushObject(folder);
-			}
-			if (folder.get('folderType') === constants.FolderType.Protected) {
-				protectedFolders.pushObject(folder);
-			}
-		});
-
-		this.set('publicFolders', publicFolders);
-		this.set('protectedFolders', protectedFolders);
-		this.set('privateFolders', privateFolders);
-		this.set('hasPublicFolders', this.get('publicFolders.length') > 0);
-		this.set('hasPrivateFolders', this.get('privateFolders.length') > 0);
-		this.set('hasProtectedFolders', this.get('protectedFolders.length') > 0);
-	},
-
-	actions: {
-		onToggleCloneOptions() {
-			this.set('showClone', !this.get('showClone'));
-		},
-
-		onToggleNewSpace() {
-			let val = !this.get('showSpace');
-			this.set('showSpace', val);
-
-			if (val) {
-				schedule('afterRender', () => {
-					$("#new-folder-name").focus();
-				});
-			}
-		},
-
-		onCloneSpaceSelect(sp) {
-			this.set('clonedSpace', sp)
-		},
-
-		onAdd() {
-			let folderName = this.get('newFolder');
-			let clonedId = this.get('clonedSpace.id');
-
-			if (is.empty(folderName)) {
-				$("#new-folder-name").addClass("error").focus();
-				return false;
-			}
-
-			let payload = {
-				name: folderName,
-				CloneID: clonedId,
-				copyTemplate: this.get('copyTemplate'),
-				copyPermission: this.get('copyPermission'),
-				copyDocument: this.get('copyDocument'),
-			}
-
-			this.attrs.onAddSpace(payload);
-			this.set('showSpace', false);
-			this.set('newFolder', '');
-
-			return true;
-		}
-	}
-});

gui/app/components/folder/sidebar-zone.js

@@ -1,38 +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 Component from '@ember/component';
-import TooltipMixin from '../../mixins/tooltip';
-import NotifierMixin from '../../mixins/notifier';
-import AuthMixin from '../../mixins/auth';
-
-export default Component.extend(TooltipMixin, NotifierMixin, AuthMixin, {
-	tab: '',
-
-	init() {
-		this._super(...arguments);
-
-		if (is.empty(this.get('tab')) || is.undefined(this.get('tab'))) {
-			this.set('tab', 'index');
-		}
-	},
-
-	actions: {
-		onAddSpace(m) {
-			this.attrs.onAddSpace(m);
-			return true;
-		},
-
-		onChangeTab(tab) {
-			this.set('tab', tab);
-		},
-	}
-});

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

@@ -0,0 +1,70 @@
+// 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 Component from '@ember/component';
+import { schedule } from '@ember/runloop';
+import { notEmpty } from '@ember/object/computed';
+import NotifierMixin from '../../mixins/notifier';
+import AuthMixin from '../../mixins/auth';
+
+export default Component.extend(NotifierMixin, AuthMixin, {
+	spaceName: '',
+	copyTemplate: true,
+	copyPermission: true,
+	copyDocument: false,
+	clonedSpace: { id: '' },
+	hasClone: notEmpty('clonedSpace.id'),
+
+	didInsertElement() {
+		this._super(...arguments);
+
+		$('#add-space-modal').on('show.bs.modal', function(event) { // eslint-disable-line no-unused-vars
+			schedule('afterRender', () => {
+				$("#new-space-name").focus();
+			});
+		});
+	},
+
+	actions: {
+		onCloneSpaceSelect(sp) {
+			this.set('clonedSpace', sp)
+		},
+
+		onAddSpace(e) {
+			e.preventDefault();
+
+			let spaceName = this.get('spaceName');
+			let clonedId = this.get('clonedSpace.id');
+
+			if (is.empty(spaceName)) {
+				$("#new-space-name").addClass("is-invalid").focus();
+				return false;
+			}
+
+			let payload = {
+				name: spaceName,
+				CloneID: clonedId,
+				copyTemplate: this.get('copyTemplate'),
+				copyPermission: this.get('copyPermission'),
+				copyDocument: this.get('copyDocument'),
+			}
+
+			this.set('spaceName', '');
+			this.set('clonedSpace.id', '');
+			$("#new-space-name").removeClass("is-invalid");
+
+			$('#add-space-modal').modal('hide');
+			$('#add-space-modal').modal('dispose');
+
+			this.attrs.onAddSpace(payload);
+		}
+	}
+});

gui/app/components/toolbar/t-actions.js

@@ -0,0 +1,16 @@
+// 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 Component from '@ember/component';
+
+export default Component.extend({
+	classNames: ['col', 'col-sm-4']
+});

gui/app/components/toolbar/t-links.js

@@ -0,0 +1,16 @@
+// 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 Component from '@ember/component';
+
+export default Component.extend({
+	classNames: ['col', 'col-sm-8']
+});

gui/app/components/toolbar/t-toolbar.js

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

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

@@ -1,15 +1,8 @@
-{{#layout/zone-container}}
+{{layout/nav-bar}}
 
-	{{#layout/zone-sidebar}}
+<div class="container">
-		{{folder/sidebar-zone
+	{{toolbar/for-space spaces=model.folders space=model.folder permissions=model.permissions}}
-			folders=model.folders
-			folder=model.folder
-			permissions=model.permissions
-			tab=tab
-			onAddSpace=(action 'onAddSpace')}}
-	{{/layout/zone-sidebar}}
 
-	{{#layout/zone-content}}
 	{{folder/space-view
 		folders=model.folders
 		folder=model.folder
@@ -21,6 +14,4 @@
 		categoryMembers=model.categoryMembers
 		rootDocCount=model.rootDocCount
 		onRefresh=(action 'onRefresh')}}
-	{{/layout/zone-content}}
+</div>
-
-{{/layout/zone-container}}

gui/app/styles/color.scss

@@ -9,39 +9,49 @@
 //
 // https://documize.com
 
-// Theme colors
+
+// theme
 $color-primary: #290F3F; //#351056;
 $color-primary-light: #F7F2FF;
 $color-link: #1b701e;
 
-// Theme-neutral colors
+// black/white/gray
 $color-black: #000000;
 $color-off-black: #111111;
-$color-dark: #434343;
-$color-gray: #8b9096;
-
 $color-white: #ffffff;
 $color-off-white: #f5f5f5;
 
+$color-dark: #434343;
+$color-gray: #8b9096;
+$color-border: #d3d3d3;
+
+// colors
 $color-red: #b1251b;
 $color-green: #1b701e;
 $color-blue: #2667af;
 $color-goldy: #cc9933;
 
+// widgets
+$color-checkbox: #2667af;
+
+
+
+
+
+
+
 $color-table-border: #e1e1e1;
 $color-table-header: #f5f5f5;
 $color-toolbar: #eeeeee;
 $color-wysiwyg: #3c3c3c;
 
 $color-card: #F9F9F9;
-$color-border: #f3f5f8;
 $color-input: #5a5a5a;
 $color-stroke: #e1e1e1;
 $color-tooltip: #a1a1a1;
 $color-toast: #4c4c4c;
 $color-symbol-box: #dce5e8;
 $color-symbol-icon: #a4b8be;
-$color-checkbox: #0092d3;
 
 // gray sidebar -- DEAD
 $color-sidebar: #f5f5f5;

gui/app/styles/mixins.scss

@@ -18,6 +18,18 @@
 	border-radius: $radius;
 }
 
+@mixin border-radius-left($radius)
+{
+	border-top-left-radius: $radius;
+	border-bottom-left-radius: $radius;
+}
+
+@mixin border-radius-right($radius)
+{
+	border-top-right-radius: $radius;
+	border-bottom-right-radius: $radius;
+}
+
 @mixin ease-in()
 {
 	-webkit-transition: all 0.30s ease-in-out;

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

@@ -1,121 +1,3 @@
-.space-heading {
-	margin: 0 0 55px 0;
-
-	.space-name {
-		font-size: 2rem;
-		margin: 0 0 10px 0;
-		font-weight: normal;
-		// color: $color-primary;
-	}
-
-	.space-summary {
-		font-size: 1.2rem;
-		color: $color-gray;
-		margin: 0 0 45px;
-	}
-}
-
-.edit-space-heading {
-	margin: 0 0 10px 0;
-
-	.edit-space-name {
-		> input {
-			font-size: 2rem;
-			font-weight: normal;
-			margin: 0 0 40px 0;
-			color: $color-wysiwyg;
-		}
-	}
-}
-
-.documents-list {
-	margin-bottom: 50px;
-
-	> .caption {
-		text-transform: uppercase;
-		color: $color-gray;
-		font-weight: bold;
-		font-size: 1.0rem;
-		margin: 0 0 10px 0;
-	}
-
-	.document-item {
-		margin: 0 0 25px 0;
-		padding: 25px 15px;
-		position: relative;
-		transition: 0.3s;
-		@include content-container();
-
-		&:hover {
-			> .link {
-				> .title {
-					color: $color-link;
-				}
-
-				> .snippet {
-					color: $color-gray;
-				}
-			}
-
-			> .checkbox {
-				display: block;
-			}
-		}
-
-		> .checkbox {
-			position: absolute;
-			display: none;
-			top: 10px;
-			right: 20px;
-			cursor: pointer;
-
-			> .material-icons {
-				width: 10px;
-				margin: 0;
-				padding: 0;
-				color: $color-checkbox;
-			}
-		}
-
-		.link {
-			text-decoration: none;
-			color: $color-off-black;
-			cursor: pointer;
-
-			&:hover {
-				text-decoration: none;
-				color: $color-link;
-
-				> .title {
-					color: $color-link;
-				}
-
-				> .snippet {
-					color: $color-link;
-				}
-			}
-
-			> .title {
-				font-size: 18px;
-				margin-bottom: 10px;
-			}
-
-			> .snippet {
-				color: $color-gray;
-				font-size: 14px;
-				line-height: 24px;
-			}
-		}
-	}
-
-	.selected-card {
-		background-color: $color-selected-item !important;
-
-		> .checkbox {
-			display: block;
-		}
-	}
-}
 
 .move-document-options {
 	height: 200px;
@@ -140,38 +22,3 @@
 		color: $color-link;
 	}
 }
-
-.space-filter {
-	display: inline-block;
-	margin: 0 30px 30px 0;
-
-	> .caption {
-		text-transform: uppercase;
-		color: $color-gray;
-		font-weight: bold;
-		font-size: 1.0rem;
-		margin: 0 0 10px 0;
-	}
-
-	> .regular-button {
-		margin-bottom: 10px;
-	}
-}
-
-.category-filter {
-	display: inline-block;
-	margin: 0 0 30px 0;
-
-	> .regular-button {
-		margin-right: 10px;
-		margin-bottom: 10px;
-	}
-
-	> .caption {
-		text-transform: uppercase;
-		color: $color-gray;
-		font-weight: bold;
-		font-size: 1.0rem;
-		margin: 0 0 10px 0;
-	}
-}

gui/app/styles/view/space.scss

@@ -0,0 +1,109 @@
+.view-space {
+	> .heading {
+		height: 10px;
+
+		> .view-heading {
+			font-size: 1.5rem;
+			font-weight: bold;
+			color: $color-dark;
+		}
+	}
+
+	> .filter-caption {
+		color: $color-gray;
+		font-size: 1.0rem;
+		margin: 0 0 10px 0;
+	}
+
+	> .documents {
+		margin: 60px 0;
+		padding: 0;
+
+		> .document {
+			@include card();
+			@include ease-in();
+			list-style-type: none;
+			overflow: hidden;
+			position: relative;
+			margin: 0 0 30px 0;
+			width: 100%;
+			// height: 150px;
+
+			&:hover {
+				> .checkbox {
+					display: block;
+				}
+			}
+
+			> a {
+				@include ease-in();
+				display: block;
+				position: relative;
+				padding: 15px 20px;
+
+				> .title {
+					color: $color-black;
+					font-size: 1.3rem;
+					margin-bottom: 5px;
+				}
+
+				> .snippet {
+					color: $color-gray;
+					font-size: 1rem;
+					line-height: 24px;
+				}
+
+				&:hover {
+					color: $color-gray;
+
+					> .title {
+						color: $color-link;
+					}
+
+					> .snippet {
+						color: $color-link;
+					}
+				}
+			}
+
+			> .checkbox {
+				position: absolute;
+				display: none;
+				top: 10px;
+				right: 20px;
+				cursor: pointer;
+
+				> .material-icons {
+					width: 10px;
+					margin: 0;
+					padding: 0;
+					color: $color-checkbox;
+				}
+			}
+		}
+
+		> .selected {
+			background-color: $color-primary-light !important;
+
+			> .checkbox {
+				display: block;
+			}
+		}
+	}
+
+	.hashtags {
+		> .hashtag {
+			display: inline-block;
+			margin: 5px 10px 0 5px;
+			color: $color-gray;
+			font-size: 0.875rem;
+			font-style: italic;
+
+			&:hover {
+				color: $color-link;
+			}
+		}
+	}
+}
+
+

gui/app/styles/view/toolbar.scss

@@ -11,6 +11,7 @@
 			display: inline-block;
 			margin-right: 30px;
 			cursor: pointer;
+			@include ease-in();
 
 			&:hover {
 				color: $color-link;

gui/app/styles/view/views.scss

@@ -1 +1,2 @@
 @import "spaces.scss";
+@import "space.scss";

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

@@ -313,6 +313,11 @@
     }
 }
 
+
+//
+// Bootstrap 4 compatible
+//
+
 .button-gap {
 	width: 5px;
 	margin: 0;

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

@@ -256,3 +256,9 @@
 .checkbox-gray {
 	color: $color-gray !important;
 }
+
+
+
+//
+// Bootstrap 4 compatible
+//

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

@@ -0,0 +1,35 @@
+.tabnav-control {
+	padding: 0;
+	margin: 0;
+
+	> .tab {
+		@include ease-in();
+		display: inline-block;
+		margin: 0;
+		padding: 5px 15px;
+		background-color: $color-white;
+		color: $color-primary;
+		font-weight: bold;
+		font-size: 1.1rem;
+		text-align: center;
+		cursor: pointer;
+		border: 1px solid $color-border;
+		margin: -1px 0 0 -5px;				// handles border overlap when tabs wrap onto 2nd line
+
+		&:first-of-type {
+			@include border-radius-left(3px);
+		}
+
+		&:last-of-type {
+			@include border-radius-right(3px);
+		}
+
+		&:hover {
+			background-color: $color-primary-light;
+		}
+	}
+
+	> .selected {
+		background-color: $color-primary-light;
+	}
+}

gui/app/styles/widget/widget.scss

@@ -76,4 +76,5 @@
 @import "widget-symbol";
 @import "widget-tab";
 @import "widget-table";
+@import "widget-tabnav";
 @import "widget-tooltip";

gui/app/templates/components/folder/document-tags.hbs

@@ -1,9 +1,5 @@
-<div class="margin-top-10">
+<div class="hashtags">
 	{{#each tagz as |tg|}}
-		{{#link-to "search" (query-params filter=tg)}}
+		{{#link-to "search" (query-params filter=tg) class="hashtag"}}{{tg}}{{/link-to}}
-			<div class="chip">
-				<span class="chip-text">{{tg}}</span>
-			</div>
-		{{/link-to}}
 	{{/each}}
 </div>

gui/app/templates/components/folder/documents-list.hbs

@@ -1,13 +1,11 @@
-{{#if (gt documents.length 0)}}
+<div class="view-space">
-	<div class="documents-list">
+	<ul class="documents">
-		<div class="caption">Documents</div>
 		{{#each documents key="id" as |document|}}
-			<div id="document-{{document.id}}">
+			<li class="document {{if document.selected "selected"}}" id="document-{{document.id}}">
-				<div class="document-item {{if document.selected "selected-card"}}">
+				{{#link-to 'document.index' folder.id folder.slug document.id document.slug}}
-					{{#link-to 'document.index' folder.id folder.slug document.id document.slug class="link"}}
 					<div class="title">{{ document.name }}</div>
 					<div class="snippet">{{ document.excerpt }}</div>
-						<div class="chips">{{folder/document-tags documentTags=document.tags}}</div>
+					{{folder/document-tags documentTags=document.tags}}
 				{{/link-to}}
 				{{#if session.authenticated}}
 					<div class="checkbox" {{action 'selectDocument' document.id}}>
@@ -18,11 +16,10 @@
 						{{/if}}
 					</div>
 				{{/if}}
-				</div>
+			</li>
-			</div>
 		{{/each}}
+	</ul>
 </div>
-{{/if}}
 
 {{#if showAdd}}
 	{{empty-state icon="direct" message="You can create new documents via the green + button"}}

gui/app/templates/components/folder/sidebar-folders-list.hbs

@@ -1,84 +0,0 @@
-<div class="sidebar-panel">
-	<div class="folders-list">
-
-		{{#if session.isEditor}}
-			{{#unless showSpace}}
-				<div id="add-space-button" class="regular-button button-white" {{action "onToggleNewSpace"}}>
-					<i class="material-icons">add</i>
-					<div class="name">Space</div>
-				</div>
-			{{else}}
-				<div class="comment-box document-sidebar-form-wrapper">
-					<div class="input-control">
-						<label>New Space</label>
-						<div class="tip">Every space contains related documents</div>
-						{{input type='text' id="new-folder-name" class="mousetrap" value=newFolder}}
-						{{#unless showClone}}
-							<div class="margin-top-30">
-								<a {{action "onToggleCloneOptions"}} >Clone existing space &rarr;</a>
-							</div>
-						{{else}}
-							<div class="margin-top-30">
-								<p>Clone existing space</p>
-								{{ui-select id="owners-dropdown" content=folders prompt="select space" action=(action 'onCloneSpaceSelect') optionValuePath="id" optionLabelPath="name" selection=cloneSpace}}
-								<div class="margin-top-20" />
-								{{#ui/ui-checkbox selected=copyTemplate}}Templates{{/ui/ui-checkbox}}
-								{{#ui/ui-checkbox selected=copyPermission}}Permissions{{/ui/ui-checkbox}}
-								{{#ui/ui-checkbox selected=copyDocument}}Documents{{/ui/ui-checkbox}}
-							</div>
-						{{/unless}}
-					</div>
-					<div class="regular-button button-blue" {{action "onAdd"}}>Add</div>
-					<div class="flat-button flat-gray" {{action "onToggleNewSpace"}}>Cancel</div>
-				</div>
-			{{/unless}}
-		{{/if}}
-
-		{{#unless showSpace}}
-			<div class="section">
-				<div class="heading">EVERYONE</div>
-				{{#unless hasPublicFolders}}
-					<div class="message margin-left-15">No global spaces</div>
-				{{/unless}}
-				<ul class="list">
-					{{#each publicFolders as |folder|}}
-						{{#link-to 'folder.index' folder.id folder.slug class="link" activeClass='selected' }}
-							<li class="item">{{ folder.name }}</li>
-						{{/link-to}}
-					{{/each}}
-				</ul>
-			</div>
-
-			{{#if session.authenticated}}
-				<div class="section">
-					<div class="heading">TEAM</div>
-					{{#unless hasProtectedFolders}}
-						<div class="message margin-left-15">No protected spaces</div>
-					{{/unless}}
-					<ul class="list">
-						{{#each protectedFolders as |folder|}}
-							{{#link-to 'folder.index' folder.id folder.slug class="link" activeClass='selected' }}
-								<li class="item">{{ folder.name }}</li>
-							{{/link-to}}
-						{{/each}}
-					</ul>
-				</div>
-
-				<div class="section">
-					<div class="heading">PERSONAL</div>
-					{{#unless hasPrivateFolders}}
-						<div class="message margin-left-15">No private spaces</div>
-					{{/unless}}
-					<ul class="list">
-						{{#each privateFolders as |folder|}}
-							{{#link-to 'folder.index' folder.id folder.slug class="link" activeClass='selected' }}
-								<li class="item">{{ folder.name }}</li>
-							{{/link-to}}
-						{{/each}}
-					</ul>
-				</div>
-			{{/if}}
-		{{/unless}}
-
-	</div>
-</div>

gui/app/templates/components/folder/sidebar-zone.hbs

@@ -1,9 +0,0 @@
-<div class="sidebar-common">
-		{{layout/sidebar-intro title=appMeta.title message=appMeta.message}}
-</div>
-
-<div class="sidebar-wrapper">
-    {{#if (is-equal tab 'index')}}
-		{{folder/sidebar-folders-list folders=folders folder=folder permissions=permissions onAddSpace=(action 'onAddSpace')}}
-    {{/if}}
-</div>

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

@@ -1,28 +1,28 @@
-<div class="pull-left width-60">
+<div class="row">
+	<div class="col">
+		<div class="mt-4 mb-5">
+
 			{{#unless editMode}}
-		<div class="space-heading {{if permissions.spaceOwner 'cursor-pointer'}}" onclick={{if permissions.spaceOwner (action 'toggleEdit')}}>
+				<div class="view-space">
-			<h1 class="space-name">{{folder.name}}</h1>
+					<div class="heading">
-			<div class="space-summary">
+						<h1 class="view-heading {{if permissions.spaceOwner 'cursor-pointer'}}" onclick={{if permissions.spaceOwner (action 'toggleEdit')}}>
-				This space contains {{documents.length}} {{if (eq documents.length 1) 'document' 'documents'}}
+							{{folder.name}}
-				{{if (eq categories.length 1) (concat 'and ' categories.length ' category')}}
+						</h1>
-				{{if (gt categories.length 1) (concat 'and ' categories.length ' categories')}}
 					</div>
 				</div>
 			{{else}}
 				<form {{action "onSave" on="submit"}}>
-			<div class="edit-space-heading">
+					<div class="view-space">
-				<div class="input-inline input-transparent edit-space-name">
+						<div class="heading">
-					{{focus-input id="folder-name" type="text" value=folderName class=(if hasNameError 'error-inline') placeholder="Name" autocomplete="off"}}
+							<div class="form-group">
-				</div>
+								{{input id="folder-name" type="text" value=folderName class=(if hasNameError 'form-control is-invalid' 'form-control') placeholder="Space name" autocomplete="off"}}
-				<div>
+								<small class="form-text text-muted">Press Enter to save or Escape to cancel</small>
-					<button type="submit" class="round-button-mono" {{action 'onSave'}}>
-						<i class="material-icons color-green">check</i>
-					</button>
-					<div class="round-button-mono" {{action 'onCancel'}}>
-						<i class="material-icons color-gray">close</i>
 							</div>
 						</div>
 					</div>
 				</form>
 			{{/unless}}
+
+		</div>
+	</div>
 </div>

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

@@ -1,48 +1,41 @@
-<div class="margin-bottom-20">
+{{folder/space-heading folder=folder permissions=permissions}}
-	{{folder/space-heading folder=folder permissions=permissions documents=documents categories=categories}}
-
-	{{folder/space-toolbar folders=folders folder=folder
-		permissions=permissions hasSelectedDocuments=hasSelectedDocuments
-		onDeleteDocument=(action 'onDeleteDocument') onMoveDocument=(action 'onMoveDocument')
-		onDeleteSpace=(action 'onDeleteSpace') onStartDocument=(action 'onStartDocument')}}
-</div>
-<div class="clearfix" />
-
-{{#if showStartDocument}}
-
-	{{folder/start-document folder=folder templates=templates permissions=permissions
-		onImport=(action 'onImport') onHideStartDocument=(action 'onHideStartDocument')}}
-
-{{else}}
 
 {{#if hasCategories}}
-		{{#if (gt categories.length 0)}}
+	<div class="clearfix">
-			<div class="space-filter">
+		<div class="float-left mr-5">
-				<div class="caption">Space</div>
+			<div class="view-space">
-				<div class="regular-button {{if spaceSelected 'button-blue' 'button-nav'}}" {{action 'onDocumentFilter' 'space' folder.id}}>
+				<div class="filter-caption mt-4">{{documents.length}} documents</div>
-					<div class="name">all ({{documents.length}})</div>
+				<ul class="tabnav-control">
-				</div>
+					<li class="tab {{if spaceSelected 'selected'}}" {{action 'onDocumentFilter' 'space' folder.id}}>All ({{documents.length}})</li>
-			</div>
-
-			<div class="category-filter">
-				<div class="caption">Category</div>
 					{{#if (gt rootDocCount 0)}}
-					<div class="regular-button {{if uncategorizedSelected 'button-blue' 'button-gray'}}" {{action 'onDocumentFilter' 'uncategorized' folder.id}}>
+						<li class="tab {{if uncategorizedSelected 'selected'}}" {{action 'onDocumentFilter' 'uncategorized' folder.id}}>Uncategorized ({{rootDocCount}})</li>
-						<div class="name">uncategorized ({{rootDocCount}})</div>
-					</div>
-					<div class="button-gap"/>
 					{{/if}}
+				</ul>
+			</div>
+		</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|}}
-					<div class="regular-button {{if cat.selected 'button-blue' 'button-gray'}}" {{action 'onDocumentFilter' 'category' cat.id}}>
+						<li class="tab {{if cat.selected 'selected'}}" {{action 'onDocumentFilter' 'category' cat.id}}>{{cat.category}} ({{cat.docCount}})</li>
-						{{cat.category}} ({{cat.docCount}})
-					</div>
-					<div class="button-gap"/>
 					{{/each}}
+				</ul>
+			</div>
+		</div>
 	</div>
-		{{/if}}
 {{/if}}
 
 {{folder/documents-list documents=filteredDocs folders=folders folder=folder
 	templates=templates permissions=permissions selectedDocuments=(mut selectedDocuments)}}
 
+{{#if showStartDocument}}
+	{{folder/start-document folder=folder templates=templates permissions=permissions
+		onImport=(action 'onImport') onHideStartDocument=(action 'onHideStartDocument')}}
 {{/if}}
+
+{{folder/space-toolbar folders=folders folder=folder
+	permissions=permissions hasSelectedDocuments=hasSelectedDocuments
+	onDeleteDocument=(action 'onDeleteDocument') onMoveDocument=(action 'onMoveDocument')
+	onDeleteSpace=(action 'onDeleteSpace') onStartDocument=(action 'onStartDocument')}}
+

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

@@ -0,0 +1,58 @@
+{{#toolbar/t-toolbar}}
+	{{#toolbar/t-links}}
+		{{#link-to "folders" class="link" tagName="li"}}SPACES{{/link-to}}
+	{{/toolbar/t-links}}
+	{{#toolbar/t-actions}}
+		{{#if session.isEditor}}
+			<button type="button" class="btn btn-success font-weight-bold" data-toggle="modal" data-target="#add-space-modal" data-backdrop="static">+ DOCUMENT</button>
+			<div class="modal" tabindex="-1" role="dialog" id="add-space-modal">
+				<div class="modal-dialog" role="document">
+					<div class="modal-content">
+						<div class="modal-header">Add Space</div>
+						<div class="modal-body">
+							<form onsubmit={{action 'onAddSpace'}}>
+								<div class="form-group">
+										<label for="new-space-name">Space Name</label>
+									{{input type='text' id="new-space-name" class="form-control mousetrap" placeholder="Space name" value=spaceName}}
+									<small id="emailHelp" class="form-text text-muted">Characters and numbers only</small>
+								</div>
+								<div class="form-group">
+										<label for="clone-space-dropdown">Clone Space</label>
+									{{ui-select id="clone-space-dropdown" content=spaces prompt="select space" action=(action 'onCloneSpaceSelect') optionValuePath="id" optionLabelPath="name" selection=cloneSpace}}
+									<small id="emailHelp" class="form-text text-muted">Copy templates, permissions, documents from existing space</small>
+									<div class="margin-top-10" />
+									{{#if hasClone}}
+										{{#ui/ui-checkbox selected=copyTemplate}}Copy templates{{/ui/ui-checkbox}}
+										{{#ui/ui-checkbox selected=copyPermission}}Copy permissions{{/ui/ui-checkbox}}
+										{{#ui/ui-checkbox selected=copyDocument}}Copy documents{{/ui/ui-checkbox}}
+									{{/if}}
+								</div>
+							</form>
+						</div>
+						<div class="modal-footer">
+							<button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
+							<button type="button" class="btn btn-success font-weight-bold" onclick={{action 'onAddSpace'}}>Add</button>
+						</div>
+					</div>
+				</div>
+			</div>
+		{{/if}}
+	{{/toolbar/t-actions}}
+{{/toolbar/t-toolbar}}
+
+
+<div class="row">
+	<div class="col col-sm-8">
+		<div class="toolbar">
+			<ul class="links">
+			</ul>
+		</div>
+	</div>
+	<div class="col col-sm-4">
+		<div class="toolbar">
+			<div class="buttons">
+
+			</div>
+		</div>
+	</div>
+</div>

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

@@ -1,14 +1,8 @@
-<div class="row">
+{{#toolbar/t-toolbar}}
-	<div class="col col-sm-8">
+	{{#toolbar/t-links}}
-		<div class="toolbar">
-			<ul class="links">
 		{{#link-to "folders" class="link selected" tagName="li"}}SPACES{{/link-to}}
-			</ul>
+	{{/toolbar/t-links}}
-		</div>
+	{{#toolbar/t-actions}}
-	</div>
-	<div class="col col-sm-4">
-		<div class="toolbar">
-			<div class="buttons">
 		{{#if session.isEditor}}
 			<button type="button" class="btn btn-success font-weight-bold" data-toggle="modal" data-target="#add-space-modal" data-backdrop="static">+ SPACE</button>
 			<div class="modal" tabindex="-1" role="dialog" id="add-space-modal">
@@ -43,6 +37,21 @@
 				</div>
 			</div>
 		{{/if}}
+	{{/toolbar/t-actions}}
+{{/toolbar/t-toolbar}}
+
+
+<div class="row">
+	<div class="col col-sm-8">
+		<div class="toolbar">
+			<ul class="links">
+			</ul>
+		</div>
+	</div>
+	<div class="col col-sm-4">
+		<div class="toolbar">
+			<div class="buttons">
+
 			</div>
 		</div>
 	</div>

gui/app/templates/components/toolbar/t-actions.hbs

@@ -0,0 +1,5 @@
+<div class="toolbar">
+	<div class="buttons">
+		{{yield}}
+	</div>
+</div>

gui/app/templates/components/toolbar/t-links.hbs

@@ -0,0 +1,5 @@
+<div class="toolbar">
+	<ul class="links">
+		{{yield}}
+	</ul>
+</div>

gui/app/templates/components/toolbar/t-toolbar.hbs

@@ -0,0 +1,3 @@
+<div class="row">
+	{{yield}}
+</div>