Update Space view to use new layout

domain/template/endpoint.go

@@ -36,7 +36,7 @@ import (
 	"github.com/documize/community/model/doc"
 	"github.com/documize/community/model/page"
 	pm "github.com/documize/community/model/permission"
-	"github.com/documize/community/model/template"
+	// "github.com/documize/community/model/template"
 	"github.com/documize/community/model/workflow"
 	uuid "github.com/nu7hatch/gouuid"
 )
@@ -66,23 +66,23 @@ func (h *Handler) SavedList(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	templates := []template.Template{}
+	// templates := []template.Template{}
 
-	for _, d := range documents {
+	// for _, d := range documents {
-		var t = template.Template{}
+	// 	var t = template.Template{}
-		t.ID = d.RefID
+	// 	t.ID = d.RefID
-		t.Title = d.Name
+	// 	t.Title = d.Name
-		t.Description = d.Excerpt
+	// 	t.Description = d.Excerpt
-		t.Author = ""
+	// 	t.Author = ""
-		t.Dated = d.Created
+	// 	t.Dated = d.Created
-		t.Type = template.TypePrivate
+	// 	t.Type = template.TypePrivate
 
-		if d.SpaceID == spaceID {
+	// 	if d.SpaceID == spaceID {
-			templates = append(templates, t)
+	// 		templates = append(templates, t)
-		}
+	// 	}
-	}
+	// }
 
-	response.WriteJSON(w, templates)
+	response.WriteJSON(w, documents)
 }
 
 // SaveAs saves existing document as a template.

gui/app/components/folder/document-tags.js

@@ -12,6 +12,8 @@
 import Component from '@ember/component';
 
 export default Component.extend({
+	classNames: ['hashtags'],
+
 	init() {
 		this._super(...arguments);
         let tagz = [];
@@ -20,7 +22,7 @@ export default Component.extend({
             let tags = this.get('documentTags').split('#');
             _.each(tags, function(tag) {
                 if (tag.length > 0) {
-                    tagz.pushObject("#" + tag);
+                    tagz.pushObject(tag);
                 }
             });
         }

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

@@ -17,6 +17,7 @@ import AuthMixin from '../../mixins/auth';
 import Component from '@ember/component';
 
 export default Component.extend(AuthMixin, {
+	classNames: ["section"],
 	router: service(),
 	documentService: service('document'),
 	folderService: service('folder'),
@@ -26,6 +27,7 @@ export default Component.extend(AuthMixin, {
 	spaceSettings: computed('permissions', function() {
 		return this.get('permissions.spaceOwner') || this.get('permissions.spaceManage');
 	}),
+	selectedFilter: '',
 
 	init() {
 		this._super(...arguments);
@@ -81,8 +83,6 @@ export default Component.extend(AuthMixin, {
 					});
 
 					this.set('categoryFilter', id);
-					this.set('spaceSelected', false);
-					this.set('uncategorizedSelected', false);
 					break;
 
 				case 'uncategorized':
@@ -94,19 +94,29 @@ export default Component.extend(AuthMixin, {
 					});
 
 					this.set('categoryFilter', '');
-					this.set('spaceSelected', false);
-					this.set('uncategorizedSelected', true);
 					break;
 
 				case 'space':
-					allowed = _.pluck(categoryMembers, 'documentId');
 					docs.forEach((d) => {
 						filtered.pushObject(d);
 					});
 
 					this.set('categoryFilter', '');
-					this.set('spaceSelected', true);
+					break;
-					this.set('uncategorizedSelected', false);
+
+				case 'template':
+					filtered.pushObjects(this.get('templates'));
+					this.set('categoryFilter', '');
+					break;
+
+				case 'draft':
+					filtered = this.get('documentsDraft');
+					this.set('categoryFilter', '');
+					break;
+
+				case 'live':
+					filtered = this.get('documentsLive');
+					this.set('categoryFilter', '');
 					break;
 			}
 
@@ -114,6 +124,7 @@ export default Component.extend(AuthMixin, {
 				cat.set('selected', cat.get('id') === id);
 			});
 
+			this.set('selectedFilter', filter);
 			this.set('categories', categories);
 			this.get('onFiltered')(filtered);
 		}

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

@@ -19,6 +19,7 @@ import Notifier from '../../mixins/notifier';
 import Component from '@ember/component';
 
 export default Component.extend(ModalMixin, AuthMixin, Notifier, {
+	classNames: ["display-inline-block"],
 	spaceService: service('folder'),
 	localStorage: service(),
 	templateService: service('template'),

gui/app/constants/constants.js

@@ -209,7 +209,10 @@ let constants = EmberObject.extend({
 		Attachment: 'dicon-attachment',
 		BarChart: 'dicon-chart-bar-2',
 		Bookmark: 'dicon-bookmark',
-		ButtonAction: 'button-2',
+		BookmarkAdd: 'dicon-bookmark-add',
+		BookmarkDelete: 'dicon-bookmark-delete',
+		ButtonAction: 'dicon-button-2',
+		Category: 'dicon-flag',
 		Checkbox: 'dicon-shape-rectangle',
 		CheckboxChecked: 'dicon-i-check',
 		Database: 'dicon-database',

gui/app/models/template.js

@@ -10,21 +10,73 @@
 // https://documize.com
 
 import { computed } from '@ember/object';
-import Model from 'ember-data/model';
 import attr from 'ember-data/attr';
 import stringUtil from '../utils/string';
-// import { belongsTo, hasMany } from 'ember-data/relationships';
+import Model from 'ember-data/model';
+
 
 export default Model.extend({
-	author: attr('string'),
+	name: attr('string'),
-	dated: attr(),
+	excerpt: attr('string'),
-	description: attr('string'),
+	job: attr('string'),
-	title: attr('string'),
+	location: attr('string'),
-	type: attr('number', { defaultValue: 0 }),
+	orgId: attr('string'),
+	spaceId: attr('string'),
+	userId: attr('string'),
+	tags: attr('string'),
+	template: attr('boolean'),
+	protection: attr('number', { defaultValue: 0 }),
+	approval: attr('number', { defaultValue: 0 }),
+	lifecycle: attr('number', { defaultValue: 1 }),
+	versioned: attr('boolean'),
+	versionId: attr('string'),
+	versionOrder: attr('number', { defaultValue: 0 }),
+	groupId: attr('string'),
 
-	slug: computed('title', function () {
+	// client-side property
-		return stringUtil.makeSlug(this.get('title'));
+	selected: attr('boolean', { defaultValue: false }),
+	slug: computed('name', function () {
+		return stringUtil.makeSlug(this.get('name'));
 	}),
 	created: attr(),
-	revised: attr()
+	revised: attr(),
+
+	isDraft: computed('lifecycle', function () {
+		let constants = this.get('constants');
+		return this.get('lifecycle') == constants.Lifecycle.Draft;
+	}),
+
+	isLive: computed('lifecycle', function () {
+		let constants = this.get('constants');
+		return this.get('lifecycle') == constants.Lifecycle.Live;
+	}),
+
+	lifecycleLabel: computed('lifecycle', function () {
+		let constants = this.get('constants');
+		switch (this.get('lifecycle')) {
+			case constants.Lifecycle.Draft:
+				return constants.Lifecycle.DraftLabel;
+			case constants.Lifecycle.Live:
+				return constants.Lifecycle.LiveLabel;
+			case constants.Lifecycle.Archived:
+				return constants.Lifecycle.ArchivedLabel;
+		}
+
+		return '';
+	}),
 });
+
+
+// export default Model.extend({
+// 	author: attr('string'),
+// 	dated: attr(),
+// 	description: attr('string'),
+// 	title: attr('string'),
+// 	type: attr('number', { defaultValue: 0 }),
+
+// 	slug: computed('title', function () {
+// 		return stringUtil.makeSlug(this.get('title'));
+// 	}),
+// 	created: attr(),
+// 	revised: attr()
+// });

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

@@ -32,6 +32,8 @@ export default Route.extend(AuthenticatedRouteMixin, {
 	model() {
 		this.get('browser').setTitle(this.modelFor('folder').folder.get('name'));
 
+		let constants = this.get('constants');
+
 		let folders = this.modelFor('folder').folders;
 		folders.forEach(f => {
 			f.set('selected', false);
@@ -47,6 +49,8 @@ export default Route.extend(AuthenticatedRouteMixin, {
 			permissions: this.modelFor('folder').permissions,
 			folders: folders,
 			documents: documents,
+			documentsDraft: _.filter(documents, function(d) { return d.get('lifecycle') === constants.Lifecycle.Draft; }),
+			documentsLive: _.filter(documents, function(d) { return d.get('lifecycle') === constants.Lifecycle.Live; }),
 			templates: this.modelFor('folder').templates,
 			showStartDocument: false,
 			rootDocCount: 0,

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

@@ -1,54 +1,49 @@
-{{#layout/top-bar}}
+{{#layout/master-sidebar selectedItem="spaces"}}
-	<li class="item">
+	{{folder/space-sidebar
-		{{#link-to "folder.index" model.folder.id model.folder.slug class="link selected"}}
+		spaces=model.folders
-			{{model.folder.name}}
+		space=model.folder
-		{{/link-to}}
+		templates=model.templates
-	</li>
+		permissions=model.permissions
-{{/layout/top-bar}}
+		documents=model.documents
+		documentsDraft=model.documentsDraft
+		documentsLive=model.documentsLive
+		categories=model.categories
+		categorySummary=model.categorySummary
+		categoryMembers=model.categoryMembers
+		rootDocCount=model.rootDocCount
+		categoryFilter=category
+		onFiltered=(action "onFiltered")
+		onRefresh=(action "onRefresh")}}
+{{/layout/master-sidebar}}
 
-{{#layout/middle-zone}}
+{{#layout/master-content}}
-	{{#layout/middle-zone-content}}
+	<div class="grid-container-6-4">
-		{{toolbar/for-space
+		<div class="grid-cell-1">
-			spaces=model.folders
+			{{layout/page-heading title=model.folder.name}}
-			space=model.folder
+			{{layout/page-desc desc="some space desc"}}
-			permissions=model.permissions
+		</div>
-			templates=model.templates
+		<div class="grid-cell-2 grid-cell-right">
-			category=category
+			{{toolbar/for-space
-			categories=model.categories
-			documents=filteredDocs
-			onRefresh=(action "onRefresh")}}
-
-		{{folder/documents-list
-			documents=filteredDocs
-			spaces=model.folders
-			space=model.folder
-			templates=model.templates
-			permissions=model.permissions
-			onExportDocument=(action "onExportDocument")
-			onDeleteDocument=(action "onDeleteDocument")
-			onMoveDocument=(action "onMoveDocument")}}
-	{{/layout/middle-zone-content}}
-
-	{{#layout/middle-zone-sidebar scrollable=true}}
-		<div id="sidebar" class="sidebar">
-			{{folder/space-view
 				spaces=model.folders
 				space=model.folder
-				templates=model.templates
 				permissions=model.permissions
-				documents=model.documents
+				templates=model.templates
+				category=category
 				categories=model.categories
-				categorySummary=model.categorySummary
+				documents=filteredDocs
-				categoryMembers=model.categoryMembers
-				rootDocCount=model.rootDocCount
-				categoryFilter=category
-				onFiltered=(action "onFiltered")
 				onRefresh=(action "onRefresh")}}
 		</div>
-	{{/layout/middle-zone-sidebar}}
+	</div>
-{{/layout/middle-zone}}
-
-{{#layout/bottom-bar}}
-{{/layout/bottom-bar}}
 
+	{{ui/ui-spacer size=400}}
 
+	{{folder/documents-list
+		documents=filteredDocs
+		spaces=model.folders
+		space=model.folder
+		templates=model.templates
+		permissions=model.permissions
+		onExportDocument=(action "onExportDocument")
+		onDeleteDocument=(action "onDeleteDocument")
+		onMoveDocument=(action "onMoveDocument")}}
+{{/layout/master-content}}

gui/app/services/template.js

@@ -41,7 +41,7 @@ export default Service.extend({
 			});
 
 			templates = response.map((template) => {
-				let data = this.get('store').normalize('template', template);
+				let data = this.get('store').normalize('document', template);
 				return this.get('store').push(data);
 			});
 

gui/app/styles/core/layout/grid.scss

@@ -90,3 +90,25 @@ $display-break-5: 1800px;
 		}
 	}
 }
+
+.grid-container-5-5 {
+	@extend %grid-base;
+
+	@media (min-width: $display-break-2) {
+		grid-template-columns: 5fr 5fr;
+		grid-template-rows: 1fr;
+
+		.grid-cell-1 {
+			grid-column-start: 1;
+			grid-row-start: 1;
+			padding: 0;
+		}
+
+		.grid-cell-2 {
+			grid-column-start: 2;
+			grid-row-start: 1;
+			padding: 0;
+			justify-self: self-end;
+		}
+	}
+}

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

@@ -5,21 +5,19 @@
 	display: block;
 	height: auto;
 	width: 100%;
-	// z-index: 777;
 
 	.master-content {
 		display: block;
 		height: auto;
 		width: 100%;
 		padding: 10px;
-		// z-index: 666;
 	}
 }
 .master-sidebar-container {
 	display: block;
 	height: auto;
 	width: 100%;
-	z-index: 1041;
+	// z-index: 1041; // reequired if we want to show modals from inside sidebar
 
 	.master-navbar {
 		display: block;

gui/app/styles/core/layout/sidebar.scss

@@ -13,6 +13,24 @@
 			color: map-get($gray-shades, 700);
 		}
 
+		> .text {
+			margin: 10px 0;
+			font-size: 1rem;
+			font-weight: 500;
+			color: $color-black-light-3;
+		}
+
+		> .label {
+			display: inline-block;
+			margin: 10px 0 13px 0;
+			padding: 0.3rem 0.7rem;
+			font-size: 1.1rem;
+			font-weight: 500;
+			background-color: map-get($gray-shades, 600);
+			color: map-get($gray-shades, 100);
+			@include border-radius(3px);
+		}
+
 		> .list {
 			margin: 10px 0;
 

gui/app/styles/core/view/space.scss

@@ -1,24 +1,15 @@
 .view-space {
-	> .filter-caption {
-		margin: 10px 0;
-		color: map-get($gray-shades, 600);
-		font-size: 1.1rem;
-		font-weight: 500;
-		text-align: center;
-	}
-
 	> .documents {
-		margin: 60px 0;
+		margin: 0;
 		padding: 0;
 
 		> .document {
 			@include card();
-			@include ease-in();
 			list-style-type: none;
-			overflow: hidden;
+			margin: 0 0 2rem 0;
-			position: relative;
+			padding: 15px 20px;
-			margin: 0 0 30px 0;
 			width: 100%;
+			position: relative;
 
 			&:hover {
 				> .checkbox {
@@ -26,55 +17,110 @@
 				}
 			}
 
-			> a {
-				@include ease-in();
-				display: block;
-				position: relative;
-				padding: 15px 20px;
-
-				> .title {
-					color: $color-black;
-					font-size: 1.3rem;
-					margin-bottom: 5px;
-				}
-
-				> .snippet {
-					color: map-get($gray-shades, 600);
-					font-size: 1rem;
-					line-height: 24px;
-				}
-
-				&:hover {
-					color: map-get($gray-shades, 600);
-				}
-			}
-
 			> .checkbox {
 				position: absolute;
 				display: none;
 				top: 10px;
-				right: 20px;
+				right: 10px;
 				cursor: pointer;
 
-				> .material-icons {
+				> .dicon {
-					width: 10px;
+					color: map-get($yellow-shades, 700);
-					margin: 0;
+					cursor: pointer;
-					padding: 0;
+					font-weight: 600;
-					color: map-get($gray-shades, 900);
+					font-size: 20px;
 				}
 			}
 
 			> .actions {
 				position: absolute;
 				display: none;
-				bottom: 2px;
+				bottom: 10px;
-				right: 12px;
+				right: 10px;
 				cursor: pointer;
 			}
+
+			> .info {
+				padding: 0;
+				align-self: self-start;
+				justify-self: self-start;
+
+				> .name {
+					font-size: 1.3rem;
+					font-weight: 700;
+					color: map-get($gray-shades, 800);
+				}
+
+				> .desc {
+					font-size: 1.1rem;
+					font-weight: 400;
+					margin-top: 0.4rem;
+					color: $color-black-light-3;
+				}
+			}
+
+			> .meta {
+				padding: 25px 0 0 0;
+
+				> .lifecycle {
+					display: inline-block;
+					text-transform: uppercase;
+					font-size: 0.9rem;
+					font-weight: 500;
+					text-align: center;
+					@include border-radius(5px);
+					background-color: map-get($gray-shades, 300);
+					padding: 0.25rem 1rem;
+
+					> .draft {
+						color: map-get($yellow-shades, 600);
+					}
+
+					> .live {
+						color: map-get($green-shades, 600);
+					}
+
+					> .archived {
+						color: map-get($red-shades, 600);
+					}
+				}
+
+				> .dicon {
+					color: map-get($gray-shades, 600);
+					font-size: 20px;
+				}
+
+				.hashtags {
+					display: inline-block;
+					padding: 0 10px 0 10px;
+
+					> .hashtag {
+						padding: 0 10px 0 10px;
+
+						> .dicon {
+							color: map-get($gray-shades, 500);
+							font-size: 20px;
+							vertical-align: bottom;
+						}
+
+						> .name {
+							display: inline-block;
+							color: map-get($gray-shades, 800);
+							font-size: 1rem;
+						}
+
+						&:hover {
+							> .dicon, > .name {
+								color: map-get($gray-shades, 600);
+							}
+						}
+					}
+				}
+			}
 		}
 
 		> .selected {
-			background-color: $theme-100 !important;
+			background-color: map-get($yellow-shades, 200);
 
 			> .checkbox {
 				display: block;
@@ -83,19 +129,9 @@
 			> .actions {
 				display: block;
 			}
-		}
-	}
-
-	.hashtags {
-		> .hashtag {
-			display: inline-block;
-			margin: 5px 10px 0 5px;
-			color: map-get($gray-shades, 600);
-			font-size: 0.875rem;
-			font-style: italic;
 
 			&:hover {
-				color: $color-link;
+				background-color: map-get($yellow-shades, 200);
 			}
 		}
 	}

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

@@ -1,5 +1,6 @@
-<div class="hashtags">
+{{#each tagz as |tg|}}
-	{{#each tagz as |tg|}}
+	{{#link-to "search" (query-params filter=tg) class="hashtag"}}
-		{{#link-to "search" (query-params filter=tg) class="hashtag"}}{{tg}}{{/link-to}}
+		<i class="dicon {{constants.Icon.Tag}}" />
-	{{/each}}
+		<div class="name">{{tg}}</div>
-</div>
+	{{/link-to}}
+{{/each}}

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

@@ -2,44 +2,41 @@
 	<ul class="documents">
 		{{#each documents key="id" as |document|}}
 			<li class="document {{if document.selected "selected"}}" id="document-{{document.id}}">
-
+				{{#link-to "document.index" space.id space.slug document.id document.slug class="info"}}
-				{{#link-to "document.index" space.id space.slug document.id document.slug}}
+					<div class="name">{{ document.name }}</div>
-					<div class="title">{{ document.name }}</div>
+					<div class="desc">{{ document.excerpt }}</div>
-					<div class="snippet">{{ document.excerpt }}</div>
-					{{folder/document-tags documentTags=document.tags}}
-					{{#if (not-eq document.lifecycle constants.Lifecycle.Live)}}
-						<button type="button" class="mt-3 btn btn-warning text-uppercase bold-700">{{document.lifecycleLabel}}</button>
-					{{/if}}
 				{{/link-to}}
+				<div class="meta">
+					<div class="lifecycle">
+						<div class="{{if (eq document.lifecycle constants.Lifecycle.Draft) 'draft'}}
+						{{if (eq document.lifecycle constants.Lifecycle.Live) 'live'}}
+						{{if (eq document.lifecycle constants.Lifecycle.Archived) 'archived'}}">
+							{{document.lifecycleLabel}}
+						</div>
+					</div>
+
+					{{folder/document-tags documentTags=document.tags}}
+				</div>
 
 				{{#if hasDocumentActions}}
 					<div class="checkbox" {{action "selectDocument" document.id}}>
 						{{#if document.selected}}
-							<i class="material-icons">check_box</i>
+							<i class="dicon {{constants.Icon.CheckboxChecked}}"/>
 						{{else}}
-							<i class="material-icons">check_box_outline_blank</i>
+							<i class="dicon {{constants.Icon.Checkbox}}"/>
 						{{/if}}
 					</div>
 					{{#if document.selected}}
 						<div class="actions">
-							<div class="move-documents-button button-icon-green button-icon-small align-middle" {{action "onExport"}}>
+							{{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true}}
-								<i class="material-icons">import_export</i>
+								{{ui/ui-toolbar-icon icon=constants.Icon.Export color=constants.Color.Gray tooltip="Export content" onClick=(action "onExport")}}
-								{{#attach-tooltip showDelay=1000}}Export as HTML{{/attach-tooltip}}
+								{{#if permissions.documentMove}}
-							</div>
+									{{ui/ui-toolbar-icon icon=constants.Icon.Export2 color=constants.Color.Gray tooltip="Move to another space" onClick=(action "onShowMoveDocuments")}}
-							<div class="button-icon-gap" />
+								{{/if}}
-							{{#if permissions.documentMove}}
+								{{#if permissions.documentDelete}}
-								<div class="move-documents-button button-icon-green button-icon-small align-middle" {{action "onShowMoveDocuments"}}>
+									{{ui/ui-toolbar-icon icon=constants.Icon.Delete color=constants.Color.Red tooltip="Delete" onClick=(action "onShowDeleteDocuments")}}
-									<i class="material-icons">compare_arrows</i>
+								{{/if}}
-									{{#attach-tooltip showDelay=1000}}Move{{/attach-tooltip}}
+							{{/ui/ui-toolbar}}
-								</div>
-								<div class="button-icon-gap" />
-							{{/if}}
-							{{#if permissions.documentDelete}}
-								<div class="delete-documents-button button-icon-red button-icon-small align-middle" {{action "onShowDeleteDocuments"}}>
-									{{#attach-tooltip showDelay=1000}}Delete{{/attach-tooltip}}
-									<i class="material-icons">delete</i>
-								</div>
-							{{/if}}
 						</div>
 					{{/if}}
 				{{/if}}

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

@@ -0,0 +1,53 @@
+{{ui/ui-spacer size=300}}
+
+<div class="title">label</div>
+<div class="label">Unclassified</div>
+
+{{ui/ui-spacer size=200}}
+
+<div class="title">filter</div>
+<div class="list">
+	<div class="item {{if (eq selectedFilter "space") "selected"}}" {{action "onDocumentFilter" "space" space.id}}>
+		<i class={{concat "dicon " constants.Icon.Filter}} />
+		<div class="name">All ({{documents.length}})</div>
+	</div>
+	{{#if hasCategories}}
+		{{#if (gt rootDocCount 0)}}
+			<div class="item {{if (eq selectedFilter "uncategorized") "selected"}}" {{action "onDocumentFilter" "uncategorized" space.id}}>
+				<i class={{concat "dicon " constants.Icon.Filter}} />
+				<div class="name">Uncategorized ({{rootDocCount}})</div>
+			</div>
+		{{/if}}
+	{{/if}}
+	{{#if permissions.documentTemplate}}
+		<div class="item {{if (eq selectedFilter "template") "selected"}}" {{action "onDocumentFilter" "template" space.id}}>
+			<i class={{concat "dicon " constants.Icon.Filter}} />
+			<div class="name">Templates ({{templates.length}})</div>
+		</div>
+	{{/if}}
+	{{#if permissions.documentLifecycle}}
+		<div class="item {{if (eq selectedFilter "draft") "selected"}}" {{action "onDocumentFilter" "draft" space.id}}>
+			<i class={{concat "dicon " constants.Icon.Filter}} />
+			<div class="name">Drafts ({{documentsDraft.length}})</div>
+		</div>
+		<div class="item {{if (eq selectedFilter "live") "selected"}}" {{action "onDocumentFilter" "live" space.id}}>
+			<i class={{concat "dicon " constants.Icon.Filter}} />
+			<div class="name">Live ({{documentsLive.length}})</div>
+		</div>
+	{{/if}}
+</div>
+
+{{ui/ui-spacer size=200}}
+
+<div class="title">category</div>
+<div class="list">
+	{{#if categories}}
+		{{#each categories as |cat|}}
+			<div class="item {{if cat.selected "selected"}}" {{action "onDocumentFilter" "category" cat.id}}>
+				<i class={{concat "dicon " constants.Icon.Category}} />
+				<div class="name">{{cat.category}} ({{cat.docCount}})</div>
+			</div>
+		{{/each}}
+	{{else}}
+	{{/if}}
+</div>

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

@@ -1,35 +0,0 @@
-<div class="view-space">
-	<div class="filter-caption mt-4">{{documents.length}} documents</div>
-	<ul class="tabnav-control tabnav-control-centered w-75">
-		<li class="tab tab-vertical {{if spaceSelected "selected"}}" {{action "onDocumentFilter" "space" space.id}}>All ({{documents.length}})</li>
-		{{#if hasCategories}}
-			{{#if (gt rootDocCount 0)}}
-				<li class="tab tab-vertical text-truncate {{if uncategorizedSelected "selected"}}" {{action "onDocumentFilter" "uncategorized" space.id}}>Uncategorized ({{rootDocCount}})</li>
-			{{/if}}
-		{{/if}}
-	</ul>
-</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|}}
-			<li class="tab tab-vertical text-truncate {{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.settings" space.id space.slug (query-params tab="categories") class="btn btn-secondary bold-700"}}{{categoryLinkName}}{{/link-to}}
-		</div>
-	{{/if}}
-</div>

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

@@ -1,134 +1,120 @@
-<div class="row justify-content-between no-gutters">
+{{#ui/ui-toolbar dark=false light=false raised=false large=true bordered=false}}
+	{{#if hasDocuments}}
+		{{ui/ui-toolbar-icon icon=constants.Icon.Export color=constants.Color.Gray
+			tooltip="Export as HTML" onClick=(action "onShowExport")}}
+	{{/if}}
+	{{#if pinState.isPinned}}
+		{{ui/ui-toolbar-icon icon=constants.Icon.BookmarkDelete color=constants.Color.Gray
+			tooltip="Remove view from bookmarks" onClick=(action "onUnpin")}}
+	{{else if session.authenticated}}
+		{{ui/ui-toolbar-icon icon=constants.Icon.BookmarkAdd color=constants.Color.Gray
+			tooltip="Bookmark this view" onClick=(action "onPin")}}
+	{{/if}}
 
-	<div class="col-6">
+	{{#if (or permissions.spaceOwner permissions.spaceManage)}}
-		{{#if permissions.documentAdd}}
+		{{ui/ui-toolbar-icon icon=constants.Icon.Settings color=constants.Color.Gray
-			<div class="btn-group" role="group">
+			tooltip="Space settings" link="folder.settings" }}
-				<button id="btnGroupDocument" type="button" class="btn btn-success bold-700 dropdown-toggle">
+		{{!-- {{#link-to "folder.settings" space.id space.slug class="button-icon-gray align-middle"}}
-					+ CONTENT
+			<i class="material-icons">settings</i>
-					{{#attach-popover class="ember-attacher-popper" hideOn="clickout" showOn="click" isShown=false}}
+			{{#attach-tooltip showDelay=1000}}Settings, permissions, templates{{/attach-tooltip}}
-						<div class="menu">
+		{{/link-to}} --}}
-							<a class="item" href="#" {{action "onShowEmptyDocModal"}}>Blank canvas</a>
+	{{/if}}
-							{{#if hasTemplates}}
+{{/ui/ui-toolbar}}
-								<a class="item" href="#" {{action "onShowTemplateDocModal"}}>From template</a>
+
-							{{/if}}
+{{#if permissions.documentAdd}}
-							<a class="item" href="#" {{action "onShowImportDocModal"}}>Import files</a>
+	{{#ui/ui-toolbar dark=false light=true raised=true large=true bordered=true}}
-						</div>
+		{{ui/ui-toolbar-icon icon=constants.Icon.Plus color=constants.Color.Green}}
-					{{/attach-popover}}
+		{{ui/ui-toolbar-label label="CONTENT" color=constants.Color.Green}}
-				</button>
+		{{#attach-popover class="ember-attacher-popper" hideOn="clickout" showOn="click" isShown=false}}
+			<div class="menu">
+				<a class="item" href="#" {{action "onShowEmptyDocModal"}}>Blank canvas</a>
+				{{#if hasTemplates}}
+					<a class="item" href="#" {{action "onShowTemplateDocModal"}}>From template</a>
+				{{/if}}
+				<a class="item" href="#" {{action "onShowImportDocModal"}}>Import files</a>
 			</div>
-			<div id="empty-doc-modal" class="modal" tabindex="-1" role="dialog">
+		{{/attach-popover}}
-				<div class="modal-dialog" role="document">
+	{{/ui/ui-toolbar}}
-					<div class="modal-content">
+
-						<div class="modal-header">Blank Canvas</div>
+	<div id="empty-doc-modal" class="modal" tabindex="-1" role="dialog">
-						<div class="modal-body">
+		<div class="modal-dialog" role="document">
-							<form onsubmit={{action "onAddEmptyDoc"}}>
+			<div class="modal-content">
-								<div class="form-group">
+				<div class="modal-header">Blank Canvas</div>
-									<label for="empty-doc-name">Document Name</label>
+				<div class="modal-body">
-									{{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"}}
+					<form onsubmit={{action "onAddEmptyDoc"}}>
-								</div>
+						<div class="form-group">
-							</form>
+							<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>
-						<div class="modal-footer">
+					</form>
-							<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
+				</div>
-							<button type="button" class="btn btn-success" onclick={{action "onAddEmptyDoc"}}>Add</button>
+				<div class="modal-footer">
-						</div>
+					<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
-					</div>
+					<button type="button" class="btn btn-success" onclick={{action "onAddEmptyDoc"}}>Add</button>
 				</div>
 			</div>
-			<div id="template-doc-modal" class="modal" tabindex="-1" role="dialog">
+		</div>
-				<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>
-
+	<div id="template-doc-modal" class="modal" tabindex="-1" role="dialog">
-	<div class="col-6 text-right">
+		<div class="modal-dialog" role="document">
-		{{#if hasDocuments}}
+			<div class="modal-content">
-			<div id="space-export-button" class="button-icon-danger align-middle" {{action "onShowExport"}}>
+				<div class="modal-header">From Template</div>
-				<i class="material-icons">import_export</i>
+				<div class="modal-body">
-				{{#attach-tooltip showDelay=1000}}Export as HTML{{/attach-tooltip}}
+					<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>
-		{{/if}}
+		</div>
-
-		{{#if pinState.isPinned}}
-			<div class="button-icon-gap" />
-			<div id="space-pin-button" class="button-icon-gold align-middle" {{action "onUnpin"}}>
-				<i class="material-icons">star</i>
-				{{#attach-tooltip showDelay=1000}}Remove bookmark{{/attach-tooltip}}
-			</div>
-		{{else if session.authenticated}}
-			<div class="button-icon-gap" />
-			<div id="space-pin-button" class="button-icon-gray align-middle" {{action "onPin"}}>
-				<i class="material-icons">star</i>
-				{{#attach-tooltip showDelay=1000}}Bookmark{{/attach-tooltip}}
-			</div>
-		{{/if}}
-
-		{{#if (or permissions.spaceOwner permissions.spaceManage)}}
-			<div class="button-icon-gap" />
-			{{#link-to "folder.settings" space.id space.slug class="button-icon-gray align-middle"}}
-				<i class="material-icons">settings</i>
-				{{#attach-tooltip showDelay=1000}}Settings, permissions, templates{{/attach-tooltip}}
-			{{/link-to}}
-		{{/if}}
 	</div>
-
+	<div id="import-doc-modal" class="modal" tabindex="-1" role="dialog">
-</div>
+		<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 id="space-export-modal" class="modal" tabindex="-1" role="dialog">
 	<div class="modal-dialog" role="document">