WIP new document UX/UI

gui/app/components/document/document-toc.js

@@ -9,17 +9,15 @@
 //
 // https://documize.com
 
-import $ from 'jquery';
 import { computed } from '@ember/object';
 import { schedule } from '@ember/runloop';
 import { inject as service } from '@ember/service';
-import Component from '@ember/component';
 import tocUtil from '../../utils/toc';
 import TooltipMixin from '../../mixins/tooltip';
+import Component from '@ember/component';
 
 export default Component.extend(TooltipMixin, {
 	documentService: service('document'),
-	isDesktop: false,
 	emptyState: computed('pages', function () {
 		return this.get('pages.length') === 0;
 	}),
@@ -56,135 +54,21 @@ export default Component.extend(TooltipMixin, {
 	didInsertElement() {
 		this._super(...arguments);
 		this.eventBus.subscribe('documentPageAdded', this, 'onDocumentPageAdded');
-		this.eventBus.subscribe('resized', this, 'setSize');
-
-		this.setSize();
 		this.renderTooltips();
 	},
 
 	willDestroyElement() {
 		this._super(...arguments);
 		this.eventBus.unsubscribe('documentPageAdded');
-		this.eventBus.unsubscribe('resized');
-
-		let t = '#doc-toc';
-		if (interact.isSet(t)) interact(t).unset();
 		this.removeTooltips();
 	},
 
 	onDocumentPageAdded(pageId) { // eslint-disable-line no-unused-vars
-		this.setSize();
 		schedule('afterRender', () => {
 			this.setState(pageId);
 		});
 	},
 
-	setSize() {
-		schedule('afterRender', () => {
-			let isDesktop = $(window).width() >= 1800;
-			this.set('isDesktop', isDesktop);
-
-			if (isDesktop) {
-				let h = $(window).height() - $("#nav-bar").height() - 140;
-				$("#doc-toc").css('max-height', h);
-
-				let i = $("#doc-view").offset();
-
-				if (is.not.undefined(i)) {
-					let l = i.left - 100;
-					if (l > 350) l = 350;
-					$("#doc-toc").width(l);
-
-					$("#doc-toc").css({
-						'display': 'inline-block',
-						'position': 'fixed',
-						'width': l+'px',
-						'height': 'auto',
-						'transform': '',
-					});
-
-					this.attachResizer();
-				}
-			} else {
-				$("#doc-toc").css({
-					'display': 'block',
-					'position': 'relative',
-					'width': '100%',
-					'height': '500px',
-					'transform': 'none',
-				});
-			}
-		});
-	},
-
-	attachResizer() {
-		schedule('afterRender', () => {
-			let t = '#doc-toc';
-			if (interact.isSet(t)) {
-				interact(t).unset();
-			}
-
-			interact('#doc-toc')
-				.draggable({
-					autoScroll: true,
-					inertia: false,
-					onmove: dragMoveListener,
-					// restrict: {
-					// 	restriction: "body",
-					// 	endOnly: true,
-					// 	elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
-					// }
-				})
-				.resizable({
-					// resize from all edges and corners
-					edges: { left: true, right: true, bottom: true, top: true },
-					// keep the edges inside the parent
-					// restrictEdges: {
-					// 	outer: 'parent',
-					// 	endOnly: true,
-					// },
-					// minimum size
-					// restrictSize: {
-					// 	min: { width: 250, height: 65 },
-					// }
-				})
-				.on('resizemove', function (event) {
-					var target = event.target,
-						x = (parseFloat(target.getAttribute('data-x')) || 0),
-						y = (parseFloat(target.getAttribute('data-y')) || 0);
-
-					// update the element's style
-					target.style.width  = event.rect.width + 'px';
-					target.style.height = event.rect.height + 'px';
-
-					// translate when resizing from top or left edges
-					x += event.deltaRect.left;
-					y += event.deltaRect.top;
-
-					target.style.webkitTransform = target.style.transform = 'translate(' + x + 'px,' + y + 'px)';
-
-					target.setAttribute('data-x', x);
-					target.setAttribute('data-y', y);
-					target.style.position = 'fixed';
-				});
-		});
-
-		function dragMoveListener (event) {
-			var target = event.target,
-			// keep the dragged position in the data-x/data-y attributes
-			x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
-			y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
-
-			// translate the element
-			target.style.webkitTransform = target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
-
-			// update the posiion attributes
-			target.setAttribute('data-x', x);
-			target.setAttribute('data-y', y);
-			target.style.position = 'fixed';
-		}
-	},
-
 	// Controls what user can do with the toc (left sidebar)
 	setState(pageId) {
 		let toc = this.get('pages');

gui/app/components/document/view-attachment.js

@@ -82,6 +82,7 @@ export default Component.extend({
 	getAttachments() {
 		this.get('documentService').getAttachments(this.get('document.id')).then((files) => {
 			this.set('files', files);
+			this.get('onReady')(files.length);
 		});
 	},
 

gui/app/components/layout/bottom-bar.js

@@ -9,11 +9,34 @@
 //
 // https://documize.com
 
+import $ from 'jquery';
 import { inject as service } from '@ember/service';
 import Component from '@ember/component';
 
 export default Component.extend({
 	classNames: ['layout-footer'],
 	tagName: 'footer',
-	appMeta: service()
+	appMeta: service(),
+
+	init() {
+		this._super(...arguments);
+		this.eventBus.subscribe('notifyUser', this, 'handleEvent');
+	},
+
+	handleEvent(msg) {
+		if (msg === 'wait') {
+			this.set('showWait', true);
+			this.set('showDone', false);
+		}
+
+		if (msg === 'done') {
+			$('.progress-done').removeClass('zoomOut').addClass('zoomIn');
+			this.set('showWait', false);
+			this.set('showDone', true);
+
+			setTimeout(function() {
+				$('.progress-done').removeClass('zoomIn').addClass('zoomOut');
+			}, 3000);
+		}
+	}
 });

gui/app/components/section/wysiwyg/type-editor.js

@@ -38,7 +38,7 @@ export default Component.extend({
 
 		schedule('afterRender', () => {
 			let options = {
-				cache_suffix: '?v=476',
+				cache_suffix: '?v=4713',
 				selector: '#' + this.get('editorId'),
 				relative_urls: false,
 				browser_spellcheck: true,
@@ -117,7 +117,7 @@ export default Component.extend({
 			};
 
 			if (typeof tinymce === 'undefined') {
-				$.getScript('/tinymce/tinymce.min.js?v=476', function () {
+				$.getScript('/tinymce/tinymce.min.js?v=4713', function () {
 					window.tinymce.dom.Event.domLoaded = true;
 					tinymce.baseURL = '//' + window.location.host + '/tinymce';
 					tinymce.suffix = '.min';

gui/app/components/user-notification.js

@@ -14,16 +14,18 @@ import Component from '@ember/component';
 import miscUtil from '../utils/misc';
 
 export default Component.extend({
+	notifications : null,
+
     init() {
         this._super(...arguments);
     },
 
     didInsertElement() {
-        this.eventBus.subscribe('notifyUser', this, 'showNotification');
+        // this.eventBus.subscribe('notifyUser', this, 'showNotification');
     },
 
     willDestroyElement() {
-        this.eventBus.unsubscribe('notifyUser');
+        // this.eventBus.unsubscribe('notifyUser');
     },
 
     showNotification(msg) {

gui/app/mixins/notifier.js

@@ -16,6 +16,14 @@ export default Mixin.create({
         this.eventBus.publish('notifyUser', msg);
 	},
 
+	showWait() {
+        this.eventBus.publish('notifyUser', 'wait');
+	},
+
+	showDone() {
+        this.eventBus.publish('notifyUser', 'done');
+	},
+
     actions: {
         showNotification(msg) {
             this.eventBus.publish('notifyUser', msg);

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

@@ -11,16 +11,18 @@
 
 import { Promise as EmberPromise } from 'rsvp';
 import { inject as service } from '@ember/service';
+import Tooltips from '../../../mixins/tooltip';
+import Notifier from '../../../mixins/notifier';
 import Controller from '@ember/controller';
-import TooltipMixin from '../../../mixins/tooltip';
 
-export default Controller.extend(TooltipMixin, {
+export default Controller.extend(Tooltips, Notifier, {
 	documentService: service('document'),
 	templateService: service('template'),
 	sectionService: service('section'),
 	linkService: service('link'),
 	// currentPageId: '',
 	tab: 'content',
+	tabCount: 0, // how many items inside the tab?
 	queryParams: ['currentPageId'],
 
 	actions: {
@@ -37,7 +39,10 @@ export default Controller.extend(TooltipMixin, {
 		},
 
 		onSaveDocument(doc) {
-			this.get('documentService').save(doc);
+			this.showWait();
+			this.get('documentService').save(doc).then(() => {
+				this.showDone();
+			});
 			this.get('browser').setTitle(doc.get('name'));
 			this.get('browser').setMetaDescription(doc.get('excerpt'));
 		},
@@ -67,6 +72,8 @@ export default Controller.extend(TooltipMixin, {
 		},
 
 		onSavePage(page, meta) {
+			this.showWait();
+
 			let document = this.get('document');
 			let documentId = document.get('id');
 			let constants = this.get('constants');
@@ -84,6 +91,8 @@ export default Controller.extend(TooltipMixin, {
 			};
 
 			this.get('documentService').updatePage(documentId, page.get('id'), model).then((/*up*/) => {
+				this.showDone();
+
 				this.get('documentService').fetchPages(documentId, this.get('session.user.id')).then((pages) => {
 					this.set('pages', pages);
 					this.get('linkService').getDocumentLinks(documentId).then((links) => {
@@ -131,10 +140,13 @@ export default Controller.extend(TooltipMixin, {
 		},
 
 		onInsertSection(data) {
+			this.showWait();
+
 			return new EmberPromise((resolve) => {
 				this.get('documentService').addPage(this.get('document.id'), data).then((newPage) => {
 					let data = this.get('store').normalize('page', newPage);
 					this.get('store').push(data);
+					this.showDone();
 
 					this.get('documentService').fetchPages(this.get('document.id'), this.get('session.user.id')).then((pages) => {
 						this.set('pages', pages);
@@ -179,7 +191,11 @@ export default Controller.extend(TooltipMixin, {
 		},
 
 		onSaveTemplate(name, desc) {
-			this.get('templateService').saveAsTemplate(this.get('document.id'), name, desc).then(function () {});
+			this.showWait();
+
+			this.get('templateService').saveAsTemplate(this.get('document.id'), name, desc).then(function () {
+				this.showDone();
+			});
 		},
 
 		onPageSequenceChange(currentPageId, changes) {
@@ -201,9 +217,13 @@ export default Controller.extend(TooltipMixin, {
 		},
 
 		onTagChange(tags) {
+			this.showDone();
+
 			let doc = this.get('document');
 			doc.set('tags', tags);
-			this.get('documentService').save(doc);
+			this.get('documentService').save(doc).then(()=> {
+				this.showWait();
+			});
 		},
 
 		onRollback(pageId, revisionId) {
@@ -225,6 +245,10 @@ export default Controller.extend(TooltipMixin, {
 					resolve();
 				});
 			});
+		},
+
+		onReady(count) {
+			this.set('tabCount', count);
 		}
 	}
 });

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

@@ -1,37 +1,54 @@
-{{toolbar/nav-bar}}
+{{#layout/top-bar}}
+	<li class="item">
+		{{#link-to "folder.index" folder.id folder.slug class='link'}}
+			{{folder.name}}
+		{{/link-to}}
+	</li>
+	<li class="item">
+		{{#link-to 'document.index' folder.id folder.slug document.id document.slug class="link selected"}}
+			{{document.name}}
+		{{/link-to}}
+	</li>
+{{/layout/top-bar}}
 
-{{toolbar/for-document document=document spaces=folders space=folder
+{{#layout/middle-zone}}
-	permissions=permissions roles=roles tab=tab versions=versions
+	{{#layout/middle-zone-content}}
+
+		{{toolbar/for-document
+			document=document
+			spaces=folders
+			space=folder
+			permissions=permissions
+			roles=roles
+			tab=tab
+			versions=versions
 			onDocumentDelete=(action 'onDocumentDelete')
 			onSaveTemplate=(action 'onSaveTemplate')
 			onSaveDocument=(action 'onSaveDocument')
 			refresh=(action 'refresh')}}
 
-<div id="doc-view" class="container">
+		{{document/document-heading
-	<div class="row">
+			document=document
-		<div class="col-12">
+			permissions=permissions
-			{{document/document-heading document=document permissions=permissions
+			versions=versions
+			onSaveDocument=(action 'onSaveDocument')}}
+
+		{{document/document-meta
+			document=document
+			folder=folder
+			folders=folders
+			permissions=permissions
+			pages=pages
 			versions=versions
 			onSaveDocument=(action 'onSaveDocument')}}
-			{{document/document-meta document=document folder=folder folders=folders
-				permissions=permissions pages=pages versions=versions
-				onSaveDocument=(action 'onSaveDocument')}}
-		</div>
-	</div>
-	<div class="row">
-		<div class="col-12">
-			{{document/document-toc document=document folder=folder pages=pages page=page
-				permissions=permissions roles=roles tab=tab currentPageId=currentPageId onShowPage=(action 'onShowPage')
-				onPageSequenceChange=(action 'onPageSequenceChange') onPageLevelChange=(action 'onPageLevelChange')}}
-		</div>
-	</div>
 
-	<div class="row no-gutters mb-5">
-		<div class="col-12">
 		<div class="text-center non-printable document-tabnav">
 			<ul class="tabnav-control">
 				<li class="tab {{if (eq tab 'content') 'selected'}}" {{action 'onTabChange' 'content'}}>Content</li>
-					<li class="tab {{if (eq tab 'attachment') 'selected'}}" {{action 'onTabChange' 'attachment'}}>Attachments</li>
+				<li class="tab {{if (eq tab 'attachment') 'selected'}}" {{action 'onTabChange' 'attachment'}}>
+					Attachments
+					({{tabCount}})
+				</li>
 				{{#if session.authenticated}}
 					<li class="tab {{if (eq tab 'revision') 'selected'}}" {{action 'onTabChange' 'revision'}}>Revisions</li>
 				{{/if}}
@@ -48,11 +65,29 @@
 				refresh=(action 'refresh')}}
 		{{/if}}
 		{{#if (eq tab 'attachment')}}
-				{{document/view-attachment document=document permissions=permissions}}
+			{{document/view-attachment document=document permissions=permissions onReady=(action 'onReady')}}
 		{{/if}}
 		{{#if (eq tab 'revision')}}
 			{{document/view-revision document=document folder=folder pages=pages permissions=permissions onRollback=(action 'onRollback')}}
 		{{/if}}
-		</div>
+
-	</div>
+	{{/layout/middle-zone-content}}
-</div>
+
+	{{#layout/middle-zone-sidebar}}
+		{{document/document-toc
+			document=document
+			folder=folder
+			pages=pages
+			page=page
+			permissions=permissions
+			roles=roles
+			tab=tab
+			currentPageId=currentPageId
+			onShowPage=(action 'onShowPage')
+			onPageSequenceChange=(action 'onPageSequenceChange')
+			onPageLevelChange=(action 'onPageLevelChange')}}
+	{{/layout/middle-zone-sidebar}}
+{{/layout/middle-zone}}
+
+{{#layout/bottom-bar}}
+{{/layout/bottom-bar}}

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

@@ -1,20 +1,43 @@
 footer {
-	background-color: $color-off-white;
 	background-color: $color-primary-light;
-	color: $color-dark;
+	color: $color-gray;
 	font-weight: 500;
-	font-size: 0.9rem;
+	font-size: 1rem;
-	padding: 10px 2rem;
+	padding: 5px 2rem;
 }
 
 .footer {
+	display: flex;
+	overflow: hidden;
+
 	a, a:visited {
 		@include ease-in();
-		color: $color-primary;
+		color: $color-gray;
 		text-decoration: none;
 
 		&:hover {
 			text-decoration: underline;
 		}
 	}
+
+	> .progress {
+		display: inline-block;
+
+		> img {
+			padding: 0;
+			margin: 0;
+			height: 20px;
+			width: 20px;
+		}
+	}
+
+	> .progress-done {
+		background-color: $color-green;
+		color: $color-white;
+		text-align: center;
+		font-size: 1rem;
+		height: 20px;
+		width: 20px;
+		@include border-radius(20px);
+	}
 }

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

@@ -32,46 +32,82 @@ footer {
 	position: sticky;
 }
 
-@media (min-width: 720px) {
+@media (min-width: 900px) {
 	.layout-body {
 		flex-direction: row;
 	}
 
-	.layout-content {
+	.layout-sidebar {
-		// Content area cannot exceed 1200px
+		flex: 0 0 200px;
-		// but can shrink as required
-		// (was flex: 1;).
-		flex: 0 1 1000px;
-		// flex: 1;
-
-		padding: 0 2rem;
-		margin: 0;
 	}
 
-	.layout-sidebar {
+	.layout-content {
-		flex: 0 0 20rem;
+		flex: 0 1 700px;
-		// height: calc(100vh - 145px);
+		padding: 0 2rem;
-		// overflow-x: hidden;
+		margin: 0;
-		// overflow-y: auto;
 	}
 }
 
 @media (min-width: 1200px) {
+	.layout-body {
+		flex-direction: row;
+	}
+
 	.layout-sidebar {
-		flex: 0 0 30rem;
+		flex: 0 0 300px;
 	}
 
 	.layout-content {
+		flex: 0 1 1000px;
+		margin: 0;
+		padding: 0 2rem 0 3rem;
+	}
+}
+
+@media (min-width: 1400px) {
+	.layout-body {
+		flex-direction: row;
+	}
+
+	.layout-sidebar {
+		flex: 0 0 400px;
+	}
+
+	.layout-content {
+		flex: 0 1 1000px;
+		margin: 0;
+		padding: 0 2rem 0 3rem;
+	}
+}
+
+@media (min-width: 1600px) {
+	.layout-body {
+		flex-direction: row;
+	}
+
+	.layout-sidebar {
+		flex: 0 0 450px;
+	}
+
+	.layout-content {
+		flex: 0 1 1200px;
+		margin: 0;
 		padding: 0 2rem 0 3rem;
 	}
 }
 
 @media (min-width: 1800px) {
+	.layout-body {
+		flex-direction: row;
+	}
+
 	.layout-sidebar {
-		flex: 0 0 35rem;
+		flex: 0 0 500px;
 	}
 
 	.layout-content {
+		flex: 0 1 1300px;
+		margin: 0;
 		padding: 0 2rem 0 4rem;
 	}
 }

gui/app/styles/mixins.scss

@@ -6,9 +6,6 @@
 	position: -o-sticky;
 	position: -webkit-sticky;
 	position: sticky;
-	display: flex;
-	z-index: 999;
-	width: 100%;
 }
 
 @mixin border-radius($radius)

gui/app/styles/section/code.scss

@@ -5,6 +5,9 @@
 		margin-bottom: 15px;
 	}
 }
+
+
+
 /* BASICS */
 
 .CodeMirror {
@@ -353,6 +356,8 @@ div.CodeMirror-dragcursors {
   span.CodeMirror-selectedtext { background: none; }
 
 
+
+
 /*
 
     Name:       material

gui/app/styles/section/table.scss

@@ -2,6 +2,8 @@
 	margin-top: 6px;
 }
 
+
+
 .fr-element,
 .fr-element:focus {
   outline: 0px solid transparent;

gui/app/styles/view/document/add-section.scss

@@ -7,7 +7,7 @@
 
 	> .start-button {
 		text-align: center;
-		margin: 60px 0;
+		margin: 30px 0 20px 0;
 		position: relative;
 		color: $color-gray-light;
 

gui/app/styles/view/document/doc-meta.scss

@@ -20,6 +20,10 @@
 
 	> .document-customfields {
 		margin-bottom: 4rem;
+		background-color: $color-off-white;
+		border: 1px solid $color-border;
+		padding: 20px 40px;
+		@include border-radius(3px);
 
 		.row {
 			padding: 5px 0;
@@ -33,8 +37,8 @@
 
 			.heading {
 				font-size: 1.1rem;
-				font-weight: bold;
+				font-weight: 700;
-				color: $color-off-black;
+				color: $color-dark;
 				text-align: left;
 			}
 

gui/app/styles/view/document/doc-toc.scss

@@ -1,36 +1,20 @@
-.document-toc {
+.document-sidebar {
+	background-color: $color-white;
+	margin: 20px 20px;
+
+	> .document-toc {
 		@include border-radius(3px);
 		@include ease-in();
+		@include sticky();
 		margin: 0;
 		padding: 0 20px 20px 20px;
-    background-color: $color-off-white;
-    border: 1px solid $color-border;
-    // overflow: scroll;
-    overflow-y: scroll;
-    overflow-x: hidden;
-    box-sizing: border-box; // ensures width/height properties (and min/max properties) includes content, padding and border
-    z-index: 777;
 		display: block;
-    position: relative; //
+		// height: calc(100vh - 180px);
-    width: 100%; //
-    height: 500px;
-    transform: none; //
 
 		> .header {
-        @include sticky();
-        flex-direction: column;
 			top: 0;
 			padding-top: 20px;
 			margin: 0;
-        background-color: $color-off-white;
-
-        > .title {
-            color: $color-gray;
-            font-weight: bold;
-            font-size: 1.1rem;
-            margin-bottom: 20px;
-            text-align: center;
-        }
 
 			> .toc-controls {
 				margin: 0 0 0 0;
@@ -84,13 +68,5 @@
 			}
 		}
 	}
-
-.document-toc-desktop {
-	margin: 30px 0 30px 0;
-    display: inline-block;
-    position: fixed;
-    top: 150px;
-    right: 30px;
-    -webkit-transform: translate(0px, 0px);
-    transform: translate(0px, 0px);
 }
+

gui/app/styles/view/document/view-attachment.scss

@@ -42,6 +42,10 @@
 					vertical-align: text-top;
 				}
 			}
+
+			> .delete {
+				text-align: right;
+			}
 		}
 	}
 }

gui/app/templates/components/document/document-toc.hbs

@@ -1,7 +1,7 @@
 {{#unless emptyState}}
+	<div id="sidebar" class="document-sidebar">
 		<div id="doc-toc" class="document-toc {{if isDesktop 'document-toc-desktop'}}">
 			<div class="header">
-            <div class="title">Contents</div>
 				{{#if canEdit}}
 					<div id="tocToolbar" class="toc-controls {{if state.actionablePage 'current-page'}}">
 						<div id="toc-up-button" class="button-icon-green button-icon-small {{if state.upDisabled 'disabled'}}" {{action 'pageUp'}}>
@@ -43,4 +43,5 @@
 				{{/each}}
 			</ul>
 		</div>
+	</div>
 {{/unless}}

gui/app/templates/components/document/view-attachment.hbs

@@ -8,9 +8,11 @@
 						<span class="file">{{ a.filename }}</span>
 					</a>
 					{{#if canEdit}}
+						<div class="delete">
 							<div class="button-icon-danger align-middle action" {{action 'onShowDialog' a.id a.filename}}>
 								<i class="material-icons">delete</i>
 							</div>
+						</div>
 					{{/if}}
 				</li>
 			{{/each}}

gui/app/templates/components/document/view-content.hbs

@@ -1,30 +1,21 @@
-{{#if hasPages}}
+{{#if hasPages}} {{#each pages key="id" as |item index|}} {{#if canEdit}}
-	{{#each pages key="id" as |item index|}}
+<div class="start-section" data-index={{index}} data-before-id={{item.page.id}} id="add-section-button-{{item.page.id}}"
-		{{#if canEdit}}
+ {{action 'onShowSectionWizard' item.page}}>
-			<div class="start-section" data-index={{index}} data-before-id={{item.page.id}} id="add-section-button-{{item.page.id}}" {{action 'onShowSectionWizard' item.page}}>
 	<div class="start-button">
 		<div class="cta">+ SECTION</div>
 	</div>
 </div>
 {{else}}
-			<div class="section-divider" />
+<div class="section-divider" /> {{/if}} {{document/document-page document=document folder=folder page=item.page meta=item.meta pending=item.pending permissions=permissions
-		{{/if}}
+toEdit=toEdit roles=roles blocks=blocks onSavePage=(action 'onSavePage') onSavePageAsBlock=(action 'onSavePageAsBlock') onCopyPage=(action
-
+'onCopyPage') onMovePage=(action 'onMovePage') onDeletePage=(action 'onDeletePage') refresh=(action refresh)}} {{/each}}
-		{{document/document-page document=document folder=folder page=item.page meta=item.meta pending=item.pending
-			permissions=permissions toEdit=toEdit roles=roles blocks=blocks
-			onSavePage=(action 'onSavePage') onSavePageAsBlock=(action 'onSavePageAsBlock')
-			onCopyPage=(action 'onCopyPage') onMovePage=(action 'onMovePage') onDeletePage=(action 'onDeletePage') refresh=(action refresh)}}
-	{{/each}}
-
 {{#if canEdit}}
 <div class="start-section" data-index="0" data-before-id="0" id="add-section-button-0" {{action 'onShowSectionWizard'}}>
 	<div class="start-button">
 		<div class="cta">+ SECTION</div>
 	</div>
 </div>
-	{{/if}}
+{{/if}} {{#if showLikes}}
-
-	{{#if showLikes}}
 <div class=" d-flex justify-content-center">
 	<div class="vote-box">
 		{{#unless voteThanks}}
@@ -40,20 +31,13 @@
 		{{/unless}}
 	</div>
 </div>
-	{{/if}}
+{{/if}} {{/if}} {{#unless hasPages}} {{#if canEdit}}
-{{/if}}
-
-{{#unless hasPages}}
-	{{#if canEdit}}
 <div class="start-section" data-index="-1" data-before-id="0" id="add-section-button-0" {{action 'onShowSectionWizard'}}>
 	<div class="start-button">
 		<div class="cta">+ SECTION</div>
 	</div>
 </div>
-	{{/if}}
+{{/if}} {{/unless}} {{#if canEdit}}
-{{/unless}}
-
-{{#if canEdit}}
 <div id="wizard-placeholder" class="hide margin-top-50" />
 <div id="new-section-wizard" class="new-section-wizard">
 	<div class="container box">
@@ -67,7 +51,8 @@
 		<div class="row">
 			<div class="col-12">
 				<div class="form-group">
-						{{input type="text" id="new-section-name" value=newSectionName class=(if newSectionNameMissing 'mousetrap form-control form-control-lg is-invalid' 'mousetrap form-control form-control-lg') placeholder="Enter section name" autocomplete="off"}}
+					{{input type="text" id="new-section-name" value=newSectionName class=(if newSectionNameMissing 'mousetrap form-control form-control-lg
+					is-invalid' 'mousetrap form-control form-control-lg') placeholder="Enter section name" autocomplete="off"}}
 				</div>
 			</div>
 		</div>
@@ -96,14 +81,16 @@
 				<div class="new-section-caption">Insert re-usable content</div>
 				<ul class="block-list">
 					{{#each blocks as |block|}}
-								<li class="item" title="{{block.firstname}} {{block.lastname}}, {{time-ago block.created}}, used: {{ block.used }}" data-toggle="tooltip" data-placement="top">
+					<li class="item" title="{{block.firstname}} {{block.lastname}}, {{time-ago block.created}}, used: {{ block.used }}" data-toggle="tooltip"
+					 data-placement="top">
 						<div class="actions">
-										{{#if permissions.documentTemplate}}
+							{{#if permissions.documentTemplate}} {{#link-to 'document.block' folder.id folder.slug document.id document.slug block.id
-											{{#link-to 'document.block' folder.id folder.slug document.id document.slug block.id class="button-icon-green button-icon-small align-middle"}}
+							class="button-icon-gray button-icon-small align-middle"}}
 							<i class="material-icons">edit</i>
 							{{/link-to}}
 							<div class="button-icon-gap" />
-											<div id={{concat 'delete-block-button-' block.id}} class="button-icon-red button-icon-small align-middle" {{action 'onShowDeleteBlockModal' block.id}}>
+							<div id={{concat 'delete-block-button-' block.id}} class="button-icon-danger button-icon-small align-middle" {{action
+							 'onShowDeleteBlockModal' block.id}}>
 								<i class="material-icons">delete</i>
 							</div>
 							{{/if}}
@@ -122,10 +109,7 @@
 		</div>
 	</div>
 </div>
-{{/if}}
+{{/if}} {{#if permissions.documentTemplate}} {{#ui/ui-dialog title="Delete Content Block" confirmCaption="Delete" buttonType="btn-danger"
-
+show=showDeleteBlockDialog onAction=(action 'onDeleteBlock')}}
-{{#if permissions.documentTemplate}}
-	{{#ui/ui-dialog title="Delete Content Block" confirmCaption="Delete" buttonType="btn-danger" show=showDeleteBlockDialog onAction=(action 'onDeleteBlock')}}
 <p>Are you sure you want to delete this re-usable content block?</p>
-	{{/ui/ui-dialog}}
+{{/ui/ui-dialog}} {{/if}}
-{{/if}}

gui/app/templates/components/layout/bottom-bar.hbs

@@ -1,11 +1,19 @@
-<div class="row no-gutters">
+<div class="row no-gutters d-flex align-items-center">
-	<div class="col">
+	<div class="col d-flex justify-content-start">
-		<div class="d-flex justify-content-start">
+		<div class="footer">
+			{{#if showWait}}
+				<div class="progress progress-wait">
+					<img src="/assets/img/busy-gray.gif" />
+				</div>
+			{{/if}}
+			{{#if showDone}}
+				<div class="progress progress-done animated zoomIn">&check;</div>
+			{{/if}}
+		</div>
 		{{yield}}
 	</div>
-	</div>
+	<div class="col d-flex justify-content-end">
-	<div class="col">
+		<div class="footer">
-		<div class="footer d-flex justify-content-end">
 			<a href="https://documize.com?ref=af">Documize {{appMeta.version}}</a>
 		</div>
 	</div>

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

@@ -1,20 +1,39 @@
-{{#toolbar/t-toolbar}}
+<div class="text-right">
-
-	{{#toolbar/t-links}}
-		{{#link-to "folder" space.id space.slug class="link selected" tagName="li"}}{{space.name}}{{/link-to}}
-		{{#if showDocumentLink}}
-			{{#link-to 'document.index' space.id space.slug document.id document.slug class="link"}}{{document.name}}{{/link-to}}
-		{{/if}}
-	{{/toolbar/t-links}}
-
 	{{#if showTools}}
-		{{#toolbar/t-actions}}
 		{{#if session.authenticated}}
 			{{#if permissions.documentAdd}}
 				<div id="document-template-button" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Save as template">
 					<i class="material-icons" data-toggle="modal" data-target="#document-template-modal" data-backdrop="static">content_copy</i>
 				</div>
 				<div class="button-icon-gap" />
+			{{/if}}
+		{{/if}}
+
+		<div id="document-print-button" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Print" {{action 'onPrintDocument'}}>
+			<i class="material-icons">print</i>
+		</div>
+		<div class="button-icon-gap" />
+
+		{{#if pinState.isPinned}}
+			<div id="document-pin-button" class="button-icon-gold align-middle" data-toggle="tooltip" data-placement="top" title="Remove favorite" {{action 'onUnpin'}}>
+				<i class="material-icons">star</i>
+			</div>
+			<div class="button-icon-gap" />
+		{{else if session.authenticated}}
+			<div id="document-pin-button" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Save favorite" {{action 'onPin'}}>
+				<i class="material-icons">star</i>
+			</div>
+			<div class="button-icon-gap" />
+		{{/if}}
+
+		{{#if permissions.documentDelete}}
+			<div id="document-delete-button" class="button-icon-danger align-middle" data-toggle="tooltip" data-placement="top" title="Delete document">
+				<i class="material-icons" data-toggle="modal" data-target="#document-delete-modal" data-backdrop="static">delete</i>
+			</div>
+		{{/if}}
+	{{/if}}
+</div>
+
 <div id="document-template-modal" class="modal" tabindex="-1" role="dialog">
 	<div class="modal-dialog" role="document">
 		<div class="modal-content">
@@ -40,31 +59,7 @@
 		</div>
 	</div>
 </div>
-				{{/if}}
-			{{/if}}
 
-			<div id="document-print-button" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Print" {{action 'onPrintDocument'}}>
-				<i class="material-icons">print</i>
-			</div>
-			<div class="button-icon-gap" />
-
-			{{#if pinState.isPinned}}
-				<div id="document-pin-button" class="button-icon-gold align-middle" data-toggle="tooltip" data-placement="top" title="Remove favorite" {{action 'onUnpin'}}>
-					<i class="material-icons">star</i>
-				</div>
-				<div class="button-icon-gap" />
-			{{else if session.authenticated}}
-				<div id="document-pin-button" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Save favorite" {{action 'onPin'}}>
-					<i class="material-icons">star</i>
-				</div>
-				<div class="button-icon-gap" />
-			{{/if}}
-
-			{{#if permissions.documentDelete}}
-				<div id="document-delete-button" class="button-icon-danger align-middle" data-toggle="tooltip" data-placement="top" title="Delete document">
-					<i class="material-icons" data-toggle="modal" data-target="#document-delete-modal" data-backdrop="static">delete</i>
-				</div>
-				<div class="button-icon-gap" />
 <div id="document-delete-modal" class="modal" tabindex="-1" role="dialog">
 	<div class="modal-dialog" role="document">
 		<div class="modal-content">
@@ -79,8 +74,3 @@
 		</div>
 	</div>
 </div>
-			{{/if}}
-		{{/toolbar/t-actions}}
-	{{/if}}
-
-{{/toolbar/t-toolbar}}