WIP document view

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

@@ -1,149 +0,0 @@
-// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
-//
-// This software (Documize Community Edition) is licensed under
-// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
-//
-// You can operate outside the AGPL restrictions by purchasing
-// Documize Enterprise Edition and obtaining a commercial license
-// by contacting <sales@documize.com>.
-//
-// https://documize.com
-
-import { inject as service } from '@ember/service';
-
-import Component from '@ember/component';
-import TooltipMixin from '../../mixins/tooltip';
-import NotifierMixin from '../../mixins/notifier';
-
-export default Component.extend(TooltipMixin, NotifierMixin, {
-    documentService: service('document'),
-	sectionService: service('section'),
-	sessionService: service('session'),
-	appMeta: service(),
-	userService: service('user'),
-	localStorage: service(),
-	pinned: service(),
-	menuOpen: false,
-	pinState : {
-		isPinned: false,
-		pinId: '',
-		newName: '',
-	},
-	saveTemplate: {
-		name: "",
-		description: ""
-	},
-
-	init() {
-		this._super(...arguments);
-	},
-
-	didReceiveAttrs() {
-		this._super(...arguments);
-
-		this.set('saveTemplate.name', this.get('document.name'));
-		this.set('saveTemplate.description', this.get('document.excerpt'));
-
-		this.get('pinned').isDocumentPinned(this.get('document.id')).then( (pinId) => {
-			this.set('pinState.pinId', pinId);
-			this.set('pinState.isPinned', pinId !== '');
-		});
-
-		this.set('pinState.newName', this.get('document.name'));
-	},
-
-	didRender() {
-		this.destroyTooltips();
-
-		if (this.get('permissions.documentEdit')) {
-			this.addTooltip(document.getElementById("document-activity-button"));
-		}
-	},
-
-    actions: {
-		onMenuOpen() {
-			this.set('menuOpen', !this.get('menuOpen'));
-		},
-
-		onDeleteDocument() {
-			this.attrs.onDocumentDelete();
-		},
-
-		onPrintDocument() {
-			$("#sidebar-zone-more-button").click();
-			window.print();
-		},
-
-		onPageSequenceChange(changes) {
-			this.get('onPageSequenceChange')(changes);
-		},
-
-		onPageLevelChange(changes) {
-			this.get('onPageLevelChange')(changes);
-		},
-
-		onGotoPage(id) {
-			this.get('onGotoPage')(id);
-		},
-
-		onUnpin() {
-			this.get('pinned').unpinItem(this.get('pinState.pinId')).then(() => {
-				this.set('pinState.isPinned', false);
-				this.set('pinState.pinId', '');
-				this.eventBus.publish('pinChange');
-			});
-		},
-
-		onPin() {
-			let pin = {
-				pin: this.get('pinState.newName'),
-				documentId: this.get('document.id'),
-				folderId: this.get('folder.id')
-			};
-
-			if (is.empty(pin.pin)) {
-				$("#pin-document-name").addClass("error").focus();
-				return false;
-			}
-
-			this.get('pinned').pinItem(pin).then((pin) => {
-				this.set('pinState.isPinned', true);
-				this.set('pinState.pinId', pin.get('id'));
-				this.eventBus.publish('pinChange');
-			});
-
-			return true;
-		},
-
-		onSaveTemplate() {
-			var name = this.get('saveTemplate.name');
-			var excerpt = this.get('saveTemplate.description');
-
-			if (is.empty(name)) {
-				$("#new-template-name").addClass("error").focus();
-				return false;
-			}
-
-			if (is.empty(excerpt)) {
-				$("#new-template-desc").addClass("error").focus();
-				return false;
-			}
-
-			this.showNotification('Template saved');
-			this.attrs.onSaveTemplate(name, excerpt);
-
-			return true;
-		},
-
-		onLayoutChange(layout) {
-			let doc = this.get('document');
-			doc.set('layout', layout);
-
-			if (this.get('permissions.documentEdit')) {
-				this.get('documentService').save(doc);
-			}
-
-			return true;
-		}
-    }
-});

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

@@ -10,7 +10,6 @@
 // https://documize.com
 
 import { notEmpty, empty } from '@ember/object/computed';
-
 import { schedule } from '@ember/runloop';
 import { inject as service } from '@ember/service';
 import Component from '@ember/component';

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

@@ -11,11 +11,10 @@
 
 import Component from '@ember/component';
 import { inject as service } from '@ember/service';
-import NotifierMixin from '../../mixins/notifier';
 import TooltipMixin from '../../mixins/tooltip';
-import DropdownMixin from '../../mixins/dropdown';
+import ModalMixin from '../../mixins/modal';
 
-export default Component.extend(NotifierMixin, TooltipMixin, DropdownMixin, {
+export default Component.extend(ModalMixin, TooltipMixin, {
 	userService: service('user'),
 	categoryService: service('category'),
 	appMeta: service(),
@@ -114,13 +113,11 @@ export default Component.extend(NotifierMixin, TooltipMixin, DropdownMixin, {
 			let cat = this.get('category').findBy('id', id);
 			this.set('deleteId', cat.get('id'));
 
-			$('#category-delete-modal').modal('dispose');
+			this.modalOpen('#category-delete-modal', {show: true});
-			$('#category-delete-modal').modal({show: true});
 		},
 
 		onDelete() {
-			$('#category-delete-modal').modal('hide');
+			this.modalClose('#category-delete-modal');
-			$('#category-delete-modal').modal('dispose');
 
 			this.get('categoryService').delete(this.get('deleteId')).then(() => {
 				this.load();

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

@@ -10,12 +10,12 @@
 // https://documize.com
 
 import Component from '@ember/component';
-// import { schedule } from '@ember/runloop';
 import { inject as service } from '@ember/service';
 import AuthMixin from '../../mixins/auth';
 import TooltipMixin from '../../mixins/tooltip';
+import ModalMixin from '../../mixins/modal';
 
-export default Component.extend(TooltipMixin, AuthMixin, {
+export default Component.extend(ModalMixin, TooltipMixin, AuthMixin, {
 	spaceService: service('folder'),
 	session: service(),
 	appMeta: service(),
@@ -25,6 +25,10 @@ export default Component.extend(TooltipMixin, AuthMixin, {
 		pinId: '',
 		newName: ''
 	},
+	saveTemplate: {
+		name: '',
+		description: ''
+	},
 
 	didReceiveAttrs() {
 		this._super(...arguments);
@@ -37,10 +41,15 @@ export default Component.extend(TooltipMixin, AuthMixin, {
 			this.set('pinState.newName', doc.get('name'));
 			this.renderTooltips();
 		});
+
+		this.set('saveTemplate.name', this.get('document.name'));
+		this.set('saveTemplate.description', this.get('document.excerpt'));
 	},
 
 	didInsertElement() {
 		this._super(...arguments);
+
+		this.modalInputFocus('#document-template-modal', '#new-template-name');
 	},
 
 	willDestroyElement() {
@@ -49,6 +58,10 @@ export default Component.extend(TooltipMixin, AuthMixin, {
 	},
 
 	actions: {
+		onDocumentDelete() {
+			this.attrs.onDocumentDelete();
+		},
+
 		onPrintDocument() {
 			window.print();
 		},
@@ -80,5 +93,32 @@ export default Component.extend(TooltipMixin, AuthMixin, {
 
 			return true;
 		},
+
+		onSaveTemplate() {
+			let name = this.get('saveTemplate.name');
+			let excerpt = this.get('saveTemplate.description');
+
+			if (is.empty(name)) {
+				$("#new-template-name").addClass("is-invalid").focus();
+				return;
+			}
+
+			if (is.empty(excerpt)) {
+				$("#new-template-desc").addClass("is-invalid").focus();
+				return;
+			}
+
+			$("#new-template-name").removeClass("is-invalid");
+			$("#new-template-desc").removeClass("is-invalid");
+
+			this.set('saveTemplate.name', '');
+			this.set('saveTemplate.description', '');
+
+			this.attrs.onSaveTemplate(name, excerpt);
+
+			this.modalClose('#document-template-modal');
+
+			return true;
+		},
 	}
 });

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

@@ -10,14 +10,14 @@
 // https://documize.com
 
 import Component from '@ember/component';
-import { schedule } from '@ember/runloop';
 import { computed } from '@ember/object';
 import { inject as service } from '@ember/service';
 import NotifierMixin from '../../mixins/notifier';
 import TooltipMixin from '../../mixins/tooltip';
+import ModalMixin from '../../mixins/modal';
 import AuthMixin from '../../mixins/auth';
 
-export default Component.extend(NotifierMixin, TooltipMixin, AuthMixin, {
+export default Component.extend(NotifierMixin, ModalMixin, TooltipMixin, AuthMixin, {
 	spaceService: service('folder'),
 	session: service(),
 	appMeta: service(),
@@ -53,25 +53,17 @@ export default Component.extend(NotifierMixin, TooltipMixin, AuthMixin, {
 		});
 
 		this.set('movedFolderOptions', targets);
+
+		if (this.get('inviteMessage').length === 0) {
+			this.set('inviteMessage', this.getDefaultInvitationMessage());
+		}
 	},
 
 	didInsertElement() {
 		this._super(...arguments);
 
-		$('#space-delete-modal').on('show.bs.modal', function(event) { // eslint-disable-line no-unused-vars
+		this.modalInputFocus('#space-delete-modal', '#delete-space-name');
-			schedule('afterRender', () => {
+		this.modalInputFocus('#space-invite-modal', '#space-invite-email');
-				$("#delete-space-name").focus();
-			});
-		});
-
-		$('#space-invite-modal').on('show.bs.modal', () => { // eslint-disable-line no-unused-vars
-			schedule('afterRender', () => {
-				$("#space-invite-email").focus();
-				if (this.get('inviteMessage').length === 0) {
-					this.set('inviteMessage', this.getDefaultInvitationMessage());
-				}
-			});
-		});
 	},
 
 	willDestroyElement() {
@@ -151,8 +143,7 @@ export default Component.extend(NotifierMixin, TooltipMixin, AuthMixin, {
 				$('#space-invite-email').removeClass('is-invalid');
 			});
 
-			$('#space-invite-modal').modal('hide');
+			this.modalClose('#space-invite-modal');
-			$('#space-invite-modal').modal('dispose');
 		},
 
 		onSpaceDelete(e) {
@@ -171,8 +162,8 @@ export default Component.extend(NotifierMixin, TooltipMixin, AuthMixin, {
 
 			this.attrs.onDeleteSpace(this.get('space.id'));
 
-			$('#space-delete-modal').modal('hide');
+
-			$('#space-delete-modal').modal('dispose');
+			this.modalClose('#space-delete-modal');
 		},
 
 		onAddSpace(e) {

gui/app/mixins/modal.js

@@ -0,0 +1,36 @@
+// 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 Mixin from '@ember/object/mixin';
+import { schedule } from '@ember/runloop';
+
+export default Mixin.create({
+	// e.g. #document-template-modal, #new-template-name
+	modalInputFocus(modalId, inputId) {
+		$(modalId).on('show.bs.modal', function(event) { // eslint-disable-line no-unused-vars
+			schedule('afterRender', () => {
+				$(inputId).focus();
+			});
+		});
+	},
+
+	// e.g. #document-template-modal
+	modalClose(modalId) {
+		$(modalId).modal('hide');
+		$(modalId).modal('dispose');
+	},
+
+	// e.g. #document-template-modal
+	modalOpen(modalId, options) {
+		$(modalId).modal('dispose');
+		$(modalId).modal(options);
+	}
+});

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

@@ -1,29 +1,31 @@
 {{layout/nav-bar}}
 
 <div class="container">
-	{{toolbar/for-document document=model.document spaces=model.folders space=model.folder permissions=model.permissions}}
+	{{toolbar/for-document document=model.document spaces=model.folders space=model.folder permissions=model.permissions onDocumentDelete=(action 'onDocumentDelete') onSaveTemplate=(action 'onSaveTemplate')}}
+
 	{{document/document-heading document=model.document permissions=model.permissions onSaveDocument=(action 'onSaveDocument')}}
+
 	{{document/document-meta document=model.document folder=model.folder folders=model.folders permissions=model.permissions onSaveDocument=(action 'onSaveDocument')}}
 
-	<div id="zone-document-content" class="zone-document-content">
+	<ul class="tabnav-control">
-		<div class="document-header-zone">
+		<li class="tab selected">Content</li>
-			{{document/document-toolbar
+		<li class="tab {{if contentSelected 'selected'}}">Attachments</li>
-				document=model.document folder=model.folder folders=model.folders permissions=model.permissions
+		<li class="tab {{if contentSelected 'selected'}}">Activity</li>
-				onDocumentDelete=(action 'onDocumentDelete') onSaveTemplate=(action 'onSaveTemplate')
+		<li class="tab {{if contentSelected 'selected'}}">Revisions</li>
-				onPageSequenceChange=(action 'onPageSequenceChange') onPageLevelChange=(action 'onPageLevelChange')
+	</ul>
-				onGotoPage=(action 'onGotoPage')}}
-		</div>
 
+	{{document/document-view
+		document=model.document links=model.links pages=model.pages
+		folder=model.folder folders=model.folders sections=model.sections permissions=model.permissions pageId=pageId
+		onSavePage=(action 'onSavePage') onInsertSection=(action 'onInsertSection')
+		onSavePageAsBlock=(action 'onSavePageAsBlock') onDeleteBlock=(action 'onDeleteBlock') onGotoPage=(action 'onGotoPage')
+		onCopyPage=(action 'onCopyPage') onMovePage=(action 'onMovePage') onDeletePage=(action 'onPageDeleted')}}
+
+	<div id="zone-document-content" class="zone-document-content">
 		{{document/document-sidebar tab=tab
 			document=model.document folder=model.folder pages=model.pages page=model.page permissions=model.permissions
 			onPageSequenceChange=(action 'onPageSequenceChange') onPageLevelChange=(action 'onPageLevelChange')
 			onGotoPage=(action 'onGotoPage')}}
-
-		{{document/document-view
-			document=model.document links=model.links pages=model.pages
-			folder=model.folder folders=model.folders sections=model.sections permissions=model.permissions pageId=pageId
-			onSavePage=(action 'onSavePage') onInsertSection=(action 'onInsertSection')
-			onSavePageAsBlock=(action 'onSavePageAsBlock') onDeleteBlock=(action 'onDeleteBlock') onGotoPage=(action 'onGotoPage')
-			onCopyPage=(action 'onCopyPage') onMovePage=(action 'onMovePage') onDeletePage=(action 'onPageDeleted')}}
 	</div>
+
 </div>

gui/app/styles/color.scss

@@ -25,6 +25,7 @@ $color-off-white: #f5f5f5;
 $color-dark: #434343;
 $color-gray: #8b9096;
 $color-gray-light: #d8d8d8;
+$color-gray-light2: #eaeaea;
 $color-border: #d3d3d3;
 
 // colors

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

@@ -6,4 +6,4 @@
 @import "attachments.scss";
 @import "toc.scss";
 @import "view.scss";
-@import "wysiwyg.scss";
+@import "new-section.scss";

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

@@ -3,9 +3,9 @@
 		margin-top: 3rem;
 
 		.doc-title {
-			font-size: 2rem;
 			margin: 50px 0 10px;
-			font-weight: normal;
+			font-size: 2rem;
+			font-weight: bold;
 		}
 
 		.doc-excerpt {

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

@@ -0,0 +1,26 @@
+.document-structure {
+	margin: 0 0 0 0;
+
+	.page-toolbar {
+		text-align: right;
+	}
+
+	.page-header {
+		margin: 0 0 0.7rem 0;
+
+		> .page-number {
+			color: $color-dark;
+			background-color: $color-gray-light2;
+			padding: 0.4rem 1rem;
+			font-size: 1.8rem;
+			margin: 0 1.5rem 0 0;
+			font-weight: normal;
+			text-align: center;
+			display: inline-block;
+		}
+
+		> .page-title {
+			display: inline-block;
+		}
+	}
+}

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

@@ -1 +1,3 @@
 @import "doc-meta.scss";
+@import "doc-structure.scss";
+@import "wysiwyg.scss";

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

@@ -0,0 +1,192 @@
+.start-section {
+	@extend .no-select;
+	height: 60px;
+	background-color: transparent;
+	position: relative;
+	cursor: pointer;
+
+	> .start-button {
+		display: none;
+		text-align: center;
+		padding-top: 20px;
+		color: $color-green;
+		font-size: 1rem;
+		position: relative;
+
+		> .round-button {
+			opacity: 0.6 !important;
+		}
+
+		> .label {
+			display: inline-block;
+			margin-left: 10px;
+		}
+
+		> .line {
+			display: inline-block;
+			height: 1px;
+			border: 1px solid $color-green;
+			width: 100px;
+			margin: 0 20px 0 20px;
+			opacity: 0.2;
+		}
+	}
+
+	&:first-of-type {
+		height: 30px;
+
+		> .start-button {
+			padding-top: 0;
+		}
+	}
+}
+
+.start-section-empty-state {
+	> .start-button {
+		display: block;
+	}
+}
+
+.new-section-wizard {
+	@include border-radius(2px);
+	margin: 0 0 30px 0;
+	padding: 30px;
+	border: 1px solid $color-stroke;
+	background-color: $color-off-white;
+	display: none;
+
+	.section-name {
+		font-weight: bold;
+		font-size: 1.5rem;
+		margin: 0 0 30px 0;
+		color: $color-black;
+	}
+
+	.template-caption {
+		color: $color-gray;
+		margin: 10px 0 10px 0;
+		font-size: 1.2rem;
+	}
+
+	> .list-wrapper {
+		height: 440px;
+		overflow-y: auto;
+
+		> .preset-list {
+			margin: 0;
+			padding: 0;
+
+			> .item {
+				@include ease-in();
+				@include border-radius(4px);
+				list-style: none;
+				cursor: pointer;
+				display: inline-block;
+				border: 1px solid $color-stroke;
+				background-color: $color-white;
+				margin: 0 20px 20px 0;
+				padding: 15px 0 0 20px;
+				width: 200px;
+				height: 60px;
+
+				&:hover {
+					@include ease-in();
+					border-color: $color-link;
+				}
+
+				.icon {
+					text-align: center;
+					display: inline-block;
+					width: 40px;
+					margin-right: 10px;
+					float: left;
+
+					> .img {
+						text-align: center;
+						display: inline-block;
+						height: 30px;
+						width: 30px;
+						float: left;
+					}
+				}
+
+				> .title {
+					font-size: 1rem;
+					font-weight: normal;
+					color: $color-off-black;
+					letter-spacing: 0.5px;
+					margin-top: 6px;
+				}
+			}
+		}
+
+		> .block-list {
+			margin: 0;
+			padding: 0;
+
+			> .item {
+				@include ease-in();
+				@include border-radius(4px);
+				list-style: none;
+				cursor: pointer;
+				display: inline-block;
+				border: 1px solid $color-stroke;
+				background-color: $color-white;
+				margin: 0 20px 20px 0;
+				padding: 12px 0 0 20px;
+				width: 423px;
+				height: 60px;
+				position: relative;
+
+				&:hover {
+					@include ease-in();
+					border-color: $color-link;
+
+					> .block-actions {
+						display: block;
+					}
+				}
+
+				> .block-actions {
+					@include ease-in();
+					display: none;
+					position: absolute;
+					top: 10px;
+					right: 8px;
+
+					.material-icons {
+						color: $color-stroke;
+						font-size: 1rem;
+					}
+				}
+
+				> .details {
+					width: 350px;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+
+					> .title {
+						font-size: 1rem;
+						font-weight: normal;
+						color: $color-off-black;
+						letter-spacing: 0.5px;
+						margin-top: 0;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						white-space: nowrap;
+					}
+
+					> .desc {
+						color: $color-gray;
+						font-size: 0.8rem;
+						margin-top: 5px;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						white-space: nowrap;
+					}
+				}
+			}
+		}
+	}
+}

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

@@ -1,44 +1,8 @@
-.zone-document-content {
-	.doc-title {
-		font-size: 2rem;
-		margin: 50px 0 10px;
-		font-weight: normal;
-		// color: $color-primary;
-	}
-
-	.doc-excerpt {
-		font-size: 1.2rem;
-		color: $color-gray;
-		margin: 0 0 45px;
-	}
-
-	.edit-document-heading {
-		margin: 50px 0 0 0;
-
-		.edit-doc-title {
-			> input {
-				font-size: 2rem;
-				font-weight: normal;
-				margin: 0 0 10px;
-				color: $color-wysiwyg;
-			}
-		}
-
-		.edit-doc-excerpt {
-			font-size: 1.2rem;
-			margin: 0 0 10px;
-			color: $color-gray;
-		}
-	}
-}
-
 .document-view {
 	margin: 0 0 0 0;
 
 	.is-a-page {
-		@include content-container();
 		@include ease-in();
-		@extend .transition-all;
 		overflow-x: auto;
 
 		&:hover {
@@ -122,235 +86,38 @@
 		height: 60px;
 		background-color: transparent;
 	}
-
-	.start-section {
-		@extend .no-select;
-		height: 60px;
-		background-color: transparent;
-		position: relative;
-		cursor: pointer;
-
-		> .start-button {
-			display: none;
-			text-align: center;
-			padding-top: 20px;
-			color: $color-green;
-			font-size: 1rem;
-			position: relative;
-
-			> .round-button {
-				opacity: 0.6 !important;
-			}
-
-			> .label {
-				display: inline-block;
-				margin-left: 10px;
-			}
-
-			> .line {
-				display: inline-block;
-				height: 1px;
-				border: 1px solid $color-green;
-				width: 100px;
-				margin: 0 20px 0 20px;
-				opacity: 0.2;
-			}
-		}
-
-		&:first-of-type {
-			height: 30px;
-
-			> .start-button {
-				padding-top: 0;
-			}
-		}
-	}
-
-	.start-section-empty-state {
-		> .start-button {
-			display: block;
-		}
-	}
-
-	.new-section-wizard {
-		@include border-radius(2px);
-		margin: 0 0 30px 0;
-		padding: 30px;
-		border: 1px solid $color-stroke;
-		background-color: $color-off-white;
-		display: none;
-
-		.section-name {
-			font-weight: bold;
-		    font-size: 1.5rem;
-		    margin: 0 0 30px 0;
-		    color: $color-black;
-		}
-
-		.template-caption {
-			color: $color-gray;
-			margin: 10px 0 10px 0;
-			font-size: 1.2rem;
-		}
-
-		> .list-wrapper {
-			height: 440px;
-			overflow-y: auto;
-
-			> .preset-list {
-				margin: 0;
-				padding: 0;
-
-				> .item {
-					@include ease-in();
-					@include border-radius(4px);
-					list-style: none;
-					cursor: pointer;
-					display: inline-block;
-					border: 1px solid $color-stroke;
-					background-color: $color-white;
-					margin: 0 20px 20px 0;
-					padding: 15px 0 0 20px;
-					width: 200px;
-					height: 60px;
-
-					&:hover {
-						@include ease-in();
-						border-color: $color-link;
-					}
-
-					.icon {
-						text-align: center;
-						display: inline-block;
-						width: 40px;
-						margin-right: 10px;
-						float: left;
-
-						> .img {
-							text-align: center;
-							display: inline-block;
-							height: 30px;
-							width: 30px;
-							float: left;
-						}
-					}
-
-					> .title {
-						font-size: 1rem;
-						font-weight: normal;
-						color: $color-off-black;
-						letter-spacing: 0.5px;
-						margin-top: 6px;
-					}
-				}
-			}
-
-			> .block-list {
-				margin: 0;
-				padding: 0;
-
-				> .item {
-					@include ease-in();
-					@include border-radius(4px);
-					list-style: none;
-					cursor: pointer;
-					display: inline-block;
-					border: 1px solid $color-stroke;
-					background-color: $color-white;
-					margin: 0 20px 20px 0;
-					padding: 12px 0 0 20px;
-					width: 423px;
-					height: 60px;
-					position: relative;
-
-					&:hover {
-						@include ease-in();
-						border-color: $color-link;
-
-						> .block-actions {
-							display: block;
-						}
-					}
-
-					> .block-actions {
-						@include ease-in();
-						display: none;
-						position: absolute;
-						top: 10px;
-						right: 8px;
-
-						.material-icons {
-							color: $color-stroke;
-							font-size: 1rem;
-						}
-					}
-
-					> .details {
-						width: 350px;
-						overflow: hidden;
-						text-overflow: ellipsis;
-						white-space: nowrap;
-
-						> .title {
-							font-size: 1rem;
-							font-weight: normal;
-							color: $color-off-black;
-							letter-spacing: 0.5px;
-							margin-top: 0;
-							overflow: hidden;
-							text-overflow: ellipsis;
-							white-space: nowrap;
-						}
-
-						> .desc {
-							color: $color-gray;
-							font-size: 0.8rem;
-							margin-top: 5px;
-							overflow: hidden;
-							text-overflow: ellipsis;
-							white-space: nowrap;
-						}
-					}
-				}
-			}
-		}
-	}
 }
 
-.document-view-unified {
+// .document-view-unified {
-	margin: 0 0 50px 0;
+// 	margin: 0 0 50px 0;
-	@include content-container();
+// 	@include content-container();
-	@include ease-in();
+// 	@include ease-in();
-	@extend .transition-all;
+// 	@extend .transition-all;
 
-	.is-a-page, .is-a-tab {
+// 	.is-a-page, .is-a-tab {
-		padding: 0 !important;
+// 		padding: 0 !important;
-		box-shadow: none !important;
+// 		box-shadow: none !important;
-		background-color: transparent !important;
+// 		background-color: transparent !important;
-		@include border-radius(0px);
+// 		@include border-radius(0px);
-	}
+// 	}
 
-	.tab-min, .tab-max {
+// 	.tab-min, .tab-max {
-		padding: 0 !important;
+// 		padding: 0 !important;
-	}
+// 	}
 
-	.start-section {
+// 	.start-section {
-		height: 50px !important;
+// 		height: 50px !important;
-	}
+// 	}
-}
+// }
 
-.dropdown-page-toolbar {
+// .document-toolbar {
-	width: 300px;
+// 	> .round-button-mono {
-}
+// 		background-color: $color-white;
+// 		border: 1px solid $color-gray;
 
-.document-toolbar {
+// 		> .material-icons {
-	> .round-button-mono {
+// 			@include ease-in();
-		background-color: $color-white;
+// 			color: $color-gray;
-		border: 1px solid $color-gray;
+// 		}
-
+// 	}
-		> .material-icons {
+// }
-			@include ease-in();
-			color: $color-gray;
-		}
-	}
-}

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

@@ -38,35 +38,7 @@
 		}
 	}
 
-	h1 {
+	h1,
-		font-size: 1.7rem;
-		font-weight: bold;
-		margin: 16px 0;
-	}
-
-	h2 {
-		font-size: 1.5rem;
-		font-weight: bold;
-		margin: 16px 0;
-	}
-
-	h3 {
-		font-size: 1.3rem;
-		font-weight: bold;
-		margin: 16px 0;
-	}
-
-	h4,
-	h5,
-	h6,
-	h7,
-	h8,
-	h9 {
-		font-size: 1.1rem;
-		font-weight: bold;
-		margin: 16px 0;
-	}
-
 	h2,
 	h3,
 	h4,
@@ -75,9 +47,10 @@
 	h7,
 	h8,
 	h9 {
-		.page-title {
+		font-size: 1.8rem;
-			color: $color-off-black;
+		font-weight: bold;
-		}
+		margin: 16px 0;
+		color: $color-dark;
 	}
 
 	pre {

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

@@ -1,4 +1,4 @@
-<div id="page-{{ page.id }}" class="is-a-page wysiwyg" data-id="{{ page.id }}" data-type="{{ page.contentType }}">
+<div id="page-{{page.id}}" class="is-a-page wysiwyg" data-id="{{ page.id }}" data-type="{{page.contentType}}">
 	{{#if editMode}}
 		{{document/document-editor document=document folder=folder page=page meta=meta onCancel=(action 'onCancelEdit') onAction=(action 'onSavePage')}}
 	{{else}}

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

@@ -1,74 +0,0 @@
-<div class="document-toolbar">
-	<div class="round-button-mono" id="document-more-button">
-		<i class="material-icons">more_vert</i>
-	</div>
-</div>
-
-{{#dropdown-menu target="document-more-button" position="bottom right" open="click" onOpenCallback=(action 'onMenuOpen') onCloseCallback=(action 'onMenuOpen')}}
-    <ul class="menu">
-        {{#if session.authenticated}}
-            {{#if (is-equal document.layout 'section')}}
-                <li class="item" {{action 'onLayoutChange' 'doc'}}>Flat view</li>
-            {{else}}
-                <li class="item" {{action 'onLayoutChange' 'section'}}>Section view</li>
-            {{/if}}
-            {{#if pinState.isPinned}}
-                <li class="item" {{action 'onUnpin'}}>Unfavorite</li>
-            {{else}}
-                <li class="item" id="pin-document-button">Favorite</li>
-            {{/if}}
-			{{#if permissions.documentEdit}}
-				<li class="item">{{#link-to 'document.history'}}History{{/link-to}}</li>
-	        {{/if}}
-			<li class="divider"/>
-        {{/if}}
-        {{#if permissions.documentTemplate}}
-            <li class="item" id="save-template-button">Template</li>
-			<li class="divider"/>
-        {{/if}}
-        <li class="item" id="print-document-button" {{action 'onPrintDocument'}}>Print</li>
-        {{#if permissions.documentDelete}}
-            <li class="item danger" id="delete-document-button">Delete</li>
-        {{/if}}
-    </ul>
-{{/dropdown-menu}}
-
-{{#if session.authenticated}}
-    {{#if menuOpen}}
-        {{#unless pinState.isPinned}}
-            {{#dropdown-dialog target="pin-document-button" position="bottom right" button="Pin" color="flat-green" onAction=(action 'onPin') focusOn="pin-document-name" }}
-                <div class="input-control">
-                    <label>Favorite Document</label>
-                    <div class="tip">Provide short name</div>
-                    {{input type='text' id="pin-document-name" value=pinState.newName}}
-                </div>
-            {{/dropdown-dialog}}
-        {{/unless}}
-    {{/if}}
-
-    {{#if permissions.documentDelete}}
-        {{#if menuOpen}}
-            {{#dropdown-dialog target="delete-document-button" position="bottom right" button="Delete" color="flat-red" onAction=(action 'onDeleteDocument')}}
-                <p>Are you sure you want to delete this document?</p>
-                <p>There is no undo, so be careful.</p>
-            {{/dropdown-dialog}}
-        {{/if}}
-    {{/if}}
-
-    {{#if permissions.documentTemplate}}
-        {{#if menuOpen}}
-            {{#dropdown-dialog target="save-template-button" position="bottom right" button="Save as Template" color="flat-green" onAction=(action 'onSaveTemplate') focusOn="new-template-name" }}
-                <div class="input-control">
-                    <label>Name</label>
-                    <div class="tip">Short name for this type of document</div>
-                    {{input type='text' id="new-template-name" value=saveTemplate.name}}
-                </div>
-                <div class="input-control">
-                    <label>Excerpt</label>
-                    <div class="tip">Explain use case for this template</div>
-                    {{textarea value=saveTemplate.description rows="3" id="new-template-desc"}}
-                </div>
-            {{/dropdown-dialog}}
-        {{/if}}
-    {{/if}}
-{{/if}}

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

@@ -1,57 +1,59 @@
-<div class="document-view {{if (is-equal document.layout 'doc') 'document-view-unified'}}">
+{{#if hasPages}}
+	{{#each pages key="id" as |page index|}}
+		{{#if permissions.documentEdit}}
+			<div class="start-section" data-index={{index}} data-before-id={{page.id}} id="add-section-button-{{page.id}}" {{action 'onShowSectionWizard' page}}>
+				<div class="start-button">
+					<div class="round-button round-button-small button-green">
+						<i class="material-icons">add</i>
+					</div>
+					<div class="label">section</div>
+				</div>
+			</div>
+		{{else}}
+			<div class="section-divider" />
+		{{/if}}
 
-	{{#if hasPages}}
+		{{#if (is-equal page.pageType 'section')}}
-		{{#each pages key="id" as |page index|}}
+			{{#document/document-page document=document folder=folder page=page permissions=permissions toEdit=toEdit pageId=pageId
-			{{#if permissions.documentEdit}}
+				onSavePage=(action 'onSavePage') onSavePageAsBlock=(action 'onSavePageAsBlock')
-				<div class="start-section" data-index={{index}} data-before-id={{page.id}} id="add-section-button-{{page.id}}" {{action 'onShowSectionWizard' page}}>
+				onCopyPage=(action 'onCopyPage') onMovePage=(action 'onMovePage') onDeletePage=(action 'onDeletePage')}}
-					<div class="start-button">
+			{{/document/document-page}}
-						<div class="round-button round-button-small button-green">
-							<i class="material-icons">add</i>
-						</div>
-						<div class="label">section</div>
-					</div>
-				</div>
-			{{else}}
-				<div class="section-divider" />
-			{{/if}}
-			{{#if (is-equal page.pageType 'section')}}
-				{{#document/document-page document=document folder=folder page=page permissions=permissions toEdit=toEdit pageId=pageId
-					onSavePage=(action 'onSavePage') onSavePageAsBlock=(action 'onSavePageAsBlock')
-					onCopyPage=(action 'onCopyPage') onMovePage=(action 'onMovePage') onDeletePage=(action 'onDeletePage')}}
-				{{/document/document-page}}
-			{{/if}}
-			{{#if (is-equal page.pageType 'tab')}}
-				{{#document/document-tab document=document folder=folder page=page permissions=permissions pageId=pageId
-					onSavePage=(action 'onSavePage') onSavePageAsBlock=(action 'onSavePageAsBlock')
-					onCopyPage=(action 'onCopyPage') onMovePage=(action 'onMovePage') onDeletePage=(action 'onDeletePage')}}
-				{{/document/document-tab}}
-			{{/if}}
-		{{/each}}
-		{{#if permissions.documentEdit}}
-			<div class="start-section" data-index="0" data-before-id="0" id="add-section-button-0" {{action 'onShowSectionWizard'}}>
-				<div class="start-button">
-					<div class="round-button round-button-small button-green">
-						<i class="material-icons">add</i>
-					</div>
-					<div class="label">section</div>
-				</div>
-			</div>
 		{{/if}}
-	{{else}}
+
-		{{#if permissions.documentEdit}}
+		{{#if (is-equal page.pageType 'tab')}}
-			<div class="start-section start-section-empty-state" data-index="-1" data-before-id="0" id="add-section-button-0" {{action 'onShowSectionWizard'}}>
+			{{#document/document-tab document=document folder=folder page=page permissions=permissions pageId=pageId
-				<div class="start-button">
+				onSavePage=(action 'onSavePage') onSavePageAsBlock=(action 'onSavePageAsBlock')
-					<div class="round-button round-button-small button-green">
+				onCopyPage=(action 'onCopyPage') onMovePage=(action 'onMovePage') onDeletePage=(action 'onDeletePage')}}
-						<i class="material-icons">add</i>
+			{{/document/document-tab}}
-					</div>
-					<div class="label">section</div>
-				</div>
-			</div>
 		{{/if}}
+	{{/each}}
+
+	{{#if permissions.documentEdit}}
+		<div class="start-section" data-index="0" data-before-id="0" id="add-section-button-0" {{action 'onShowSectionWizard'}}>
+			<div class="start-button">
+				<div class="round-button round-button-small button-green">
+					<i class="material-icons">add</i>
+				</div>
+				<div class="label">section</div>
+			</div>
+		</div>
 	{{/if}}
+{{/if}}
+
+{{#unless hasPages}}
+	{{#if permissions.documentEdit}}
+		<div class="start-section start-section-empty-state" data-index="-1" data-before-id="0" id="add-section-button-0" {{action 'onShowSectionWizard'}}>
+			<div class="start-button">
+				<div class="round-button round-button-small button-green">
+					<i class="material-icons">add</i>
+				</div>
+				<div class="label">section</div>
+			</div>
+		</div>
+	{{/if}}
+{{/unless}}
 
 	<div id="wizard-placeholder" class="hide margin-top-50" />
-
 	<div id="new-section-wizard" class="new-section-wizard">
 		<div class="input-inline input-transparent pull-left width-80">
 			{{input type="text" id="new-section-name" value=newSectionName class=(if newSectionNameMissing 'section-name error-inline' 'section-name') placeholder="Name" autocomplete="off"}}
@@ -100,6 +102,4 @@
 		</div>
 	</div>
 
-</div>
-
 {{document/document-attachments document=document permissions=permissions}}

gui/app/templates/components/document/page-heading.hbs

@@ -1,6 +1,11 @@
-<div class="page-title">
+<div class="row no-gutters document-structure">
-    <span id="page-title-{{ page.id }}">{{ page.title }}</span>
+
-    <div id="page-toolbar-{{ page.id }}" class="pull-right page-toolbar hidden-xs hidden-sm">
+	<div id="page-title-{{ page.id }}" class="col-10 page-header">
+		<span class="page-number">1</span>
+		<span class="page-title">{{page.title}}</span>
+	</div>
+
+    <div id="page-toolbar-{{ page.id }}" class="col-2 page-toolbar">
         {{#if permissions.documentEdit}}
             <div class="round-button-mono" {{action 'onEdit'}}>
                 <i class="material-icons color-gray">mode_edit</i>

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

@@ -6,6 +6,40 @@
 	{{/toolbar/t-links}}
 
 	{{#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" />
+				<div id="document-template-modal" class="modal" tabindex="-1" role="dialog">
+					<div class="modal-dialog" role="document">
+						<div class="modal-content">
+							<div class="modal-header">Save as Template</div>
+							<div class="modal-body">
+								<form onsubmit={{action 'onSaveTemplate'}}>
+									<div class="form-group">
+										<label for="new-template-name">Name</label>
+										{{input id="new-template-name" value=saveTemplate.name type='email' class="form-control mousetrap" placeholder="Template name"}}
+										<small class="form-text text-muted">Good template name conveys document type</small>
+									</div>
+									<div class="form-group">
+										<label for="new-template-desc">Description</label>
+										{{textarea id="new-template-desc" value=saveTemplate.description class="form-control" rows="5"}}
+										<small class="form-text text-muted">Explain use case for this template</small>
+									</div>
+								</form>
+							</div>
+							<div class="modal-footer">
+								<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
+								<button type="button" class="btn btn-outline-success" onclick={{action 'onSaveTemplate'}}>Save</button>
+							</div>
+						</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>
@@ -15,12 +49,33 @@
 			<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" /> --}}
+			<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" /> --}}
+			<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">
+						<div class="modal-header">Delete Document</div>
+						<div class="modal-body">
+							<p>Are you sure you want to delete this document?</p>
+						</div>
+						<div class="modal-footer">
+							<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
+							<button type="button" class="btn btn-danger" onclick={{action 'onDocumentDelete'}}>Delete</button>
+						</div>
+					</div>
+				</div>
+			</div>
 		{{/if}}
 	{{/toolbar/t-actions}}