revamped document view new user experience

WIP

app/app/components/document/document-heading.js

@@ -0,0 +1,54 @@
+// 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 Ember from 'ember';
+import NotifierMixin from '../../mixins/notifier';
+import TooltipMixin from '../../mixins/tooltip';
+
+const {
+	computed,
+} = Ember;
+
+
+export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
+	documentService: Ember.inject.service('document'),
+	editMode: false,
+	docName: '',
+	docExcerpt: '',
+
+	hasNameError: computed.empty('docName'),
+	hasExcerptError: computed.empty('docExcerpt'),
+
+	actions: {
+		toggleEdit() {
+			this.set('docName', this.get('document.name'));
+			this.set('docExcerpt', this.get('document.excerpt'));
+			this.set('editMode', true);
+		},
+
+		onSaveDocument() {
+			if (this.get('hasNameError') || this.get('hasExcerptError')) {
+				return;
+			}
+
+			this.set('document.name', this.get('docName'));
+			this.set('document.excerpt', this.get('docExcerpt'));
+			this.showNotification('Saved');
+			this.get('documentService').save(this.get('document'));
+
+			this.set('editMode', false);
+		},
+
+		cancel() {
+			this.set('editMode', false);
+		}
+	}
+});

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

@@ -97,11 +97,5 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
 
 			this.attrs.onDeletePage(params);
 		},
-
-		onTagChange(tags) {
-			let doc = this.get('document');
-			doc.set('tags', tags);
-			this.get('documentService').save(doc);
-		}
 	}
 });

app/app/components/document/page-heading.js

@@ -73,21 +73,10 @@ export default Ember.Component.extend(TooltipMixin, {
 	}),
 
 	didRender() {
-		if (this.get('isEditor')) {
-			let self = this;
-			$(".page-action-button").each(function (i, el) {
-				self.addTooltip(el);
-			});
-		}
-
 		$("#" + this.get('blockTitleId')).removeClass('error');
 		$("#" + this.get('blockExcerptId')).removeClass('error');
 	},
 
-	willDestroyElement() {
-		this.destroyTooltips();
-	},
-
 	actions: {
 		onMenuOpen() {
 			if ($('#' + this.get('publishDialogId')).is( ":visible" )) {

app/app/components/layout/zone-document-sidebar.js

@@ -0,0 +1,16 @@
+// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
+//
+// This software (Documize Community Edition) is licensed under
+// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
+//
+// You can operate outside the AGPL restrictions by purchasing
+// Documize Enterprise Edition and obtaining a commercial license
+// by contacting <sales@documize.com>.
+//
+// https://documize.com
+
+import Ember from 'ember';
+import NotifierMixin from '../../mixins/notifier';
+
+export default Ember.Component.extend(NotifierMixin, {
+});

app/app/components/layout/zone-document.js

@@ -0,0 +1,27 @@
+// 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 Ember from 'ember';
+import NotifierMixin from '../../mixins/notifier';
+
+const {
+	inject: { service }
+} = Ember;
+
+export default Ember.Component.extend(NotifierMixin, {
+    appMeta :service(),
+
+    didRender() {
+        if (this.get('appMeta').invalidLicense()) {
+            this.showNotification(`!! Expired or invalid license !!`);
+        }
+    }
+});

app/app/pods/document/controller.js

@@ -19,6 +19,7 @@ export default Ember.Controller.extend(NotifierMixin, {
 	page: null,
 	folder: {},
 	pages: [],
+	toggled: false,
 
 	// Jump to the right part of the document.
 	scrollToPage(pageId) {
@@ -44,6 +45,115 @@ export default Ember.Controller.extend(NotifierMixin, {
 	},
 
 	actions: {
+		toggleMenu() {
+			this.set('toggled', !this.get('toggled'));
+		},
+
+		onTagChange(tags) {
+			let doc = this.get('model.document');
+			doc.set('tags', tags);
+			this.get('documentService').save(doc);
+		},
+
+		onSaveDocument(doc) {
+			this.get('documentService').save(doc);
+			this.showNotification('Saved');
+		},
+
+		gotoPage(pageId) {
+			if (is.null(pageId)) {
+				return;
+			}
+
+			this.scrollToPage(pageId);
+		},
+
+		onAddBlock(block) {
+			this.get('sectionService').addBlock(block).then(() => {
+				this.showNotification("Published");
+			});
+		},
+
+		onCopyPage(pageId, targetDocumentId) {
+			let documentId = this.get('model.document.id');
+			this.get('documentService').copyPage(documentId, pageId, targetDocumentId).then(() => {
+				this.showNotification("Copied");
+
+				// refresh data if copied to same document
+				if (documentId === targetDocumentId) {
+					this.get('target.router').refresh();
+				}
+			});
+		},
+
+		onMovePage(pageId, targetDocumentId) {
+			let documentId = this.get('model.document.id');
+
+			this.get('documentService').copyPage(documentId, pageId, targetDocumentId).then(() => {
+				this.showNotification("Moved");
+
+				this.send('onPageDeleted', { id: pageId, children: false });
+			});
+		},
+
+		onPageDeleted(deletePage) {
+			let documentId = this.get('model.document.id');
+			let pages = this.get('model.pages');
+			let deleteId = deletePage.id;
+			let deleteChildren = deletePage.children;
+			let page = _.findWhere(pages, {
+				id: deleteId
+			});
+			let pageIndex = _.indexOf(pages, page, false);
+			let pendingChanges = [];
+
+			this.audit.record("deleted-page");
+
+			// select affected pages
+			for (var i = pageIndex + 1; i < pages.get('length'); i++) {
+				if (pages[i].get('level') <= page.get('level')) {
+					break;
+				}
+
+				pendingChanges.push({
+					pageId: pages[i].get('id'),
+					level: pages[i].get('level') - 1
+				});
+			}
+
+			if (deleteChildren) {
+				// nuke of page tree
+				pendingChanges.push({
+					pageId: deleteId
+				});
+
+				this.get('documentService').deletePages(documentId, deleteId, pendingChanges).then(() => {
+					// update our models so we don't have to reload from db
+					for (var i = 0; i < pendingChanges.length; i++) {
+						let pageId = pendingChanges[i].pageId;
+						this.set('model.pages', _.reject(pages, function (p) { //jshint ignore: line
+							return p.get('id') === pageId;
+						}));
+					}
+
+					this.set('model.pages', _.sortBy(pages, "sequence"));
+					this.get('target.router').refresh();
+				});
+			} else {
+				// page delete followed by re-leveling child pages
+				this.get('documentService').deletePage(documentId, deleteId).then(() => {
+					this.set('model.pages', _.reject(pages, function (p) {
+						return p.get('id') === deleteId;
+					}));
+
+					this.send('onPageLevelChange', pendingChanges);
+				});
+			}
+		}
+	}
+});
+
+/*
 gotoPage(pageId) {
 	if (is.null(pageId)) {
 		return;
@@ -204,5 +314,5 @@ export default Ember.Controller.extend(NotifierMixin, {
 		this.transitionToRoute('folder', this.get('model.folder.id'), this.get('model.folder.slug'));
 	});
 }
-	}
-});
+
+*/

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

@@ -86,87 +86,6 @@ export default Ember.Controller.extend(NotifierMixin, {
 			});
 		},
 
-		onAddBlock(block) {
-			this.get('sectionService').addBlock(block).then(() => {
-				this.showNotification("Published");
-			});
-		},
 
-		onCopyPage(pageId, targetDocumentId) {
-			let documentId = this.get('model.document.id');
-			this.get('documentService').copyPage(documentId, pageId, targetDocumentId).then(() => {
-				this.showNotification("Copied");
-	
-				// refresh data if copied to same document
-				if (documentId === targetDocumentId) {
-					this.get('target.router').refresh();
-				}
-			});
-		},
-
-		onMovePage(pageId, targetDocumentId) {
-			let documentId = this.get('model.document.id');
-
-			this.get('documentService').copyPage(documentId, pageId, targetDocumentId).then(() => {
-				this.showNotification("Moved");
-
-				this.send('onPageDeleted', { id: pageId, children: false });
-			});
-		},
-
-		onPageDeleted(deletePage) {
-			let documentId = this.get('model.document.id');
-			let pages = this.get('model.pages');
-			let deleteId = deletePage.id;
-			let deleteChildren = deletePage.children;
-			let page = _.findWhere(pages, {
-				id: deleteId
-			});
-			let pageIndex = _.indexOf(pages, page, false);
-			let pendingChanges = [];
-
-			this.audit.record("deleted-page");
-
-			// select affected pages
-			for (var i = pageIndex + 1; i < pages.get('length'); i++) {
-				if (pages[i].get('level') <= page.get('level')) {
-					break;
-				}
-
-				pendingChanges.push({
-					pageId: pages[i].get('id'),
-					level: pages[i].get('level') - 1
-				});
-			}
-
-			if (deleteChildren) {
-				// nuke of page tree
-				pendingChanges.push({
-					pageId: deleteId
-				});
-
-				this.get('documentService').deletePages(documentId, deleteId, pendingChanges).then(() => {
-					// update our models so we don't have to reload from db
-					for (var i = 0; i < pendingChanges.length; i++) {
-						let pageId = pendingChanges[i].pageId;
-						this.set('model.pages', _.reject(pages, function (p) { //jshint ignore: line
-							return p.get('id') === pageId;
-						}));
-					}
-
-					this.set('model.pages', _.sortBy(pages, "sequence"));
-					this.get('target.router').refresh();
-				});
-			} else {
-				// page delete followed by re-leveling child pages
-				this.get('documentService').deletePage(documentId, deleteId).then(() => {
-					this.set('model.pages', _.reject(pages, function (p) {
-						return p.get('id') === deleteId;
-					}));
-
-					this.send('onPageLevelChange', pendingChanges);
-				});
-			}
-		}
 	}
 });

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

@@ -1,2 +0,0 @@
-{{document/document-view document=model.document links=model.links allPages=model.allPages tabs=model.tabs pages=model.pages folder=model.folder folders=model.folders isEditor=model.isEditor
-	gotoPage=(action 'gotoPage') onAddBlock=(action 'onAddBlock') onCopyPage=(action 'onCopyPage') onMovePage=(action 'onMovePage') onDeletePage=(action 'onPageDeleted')}}

app/app/pods/document/template.hbs

@@ -1,13 +1,75 @@
 {{layout/zone-navigation}}
 
-{{#layout/zone-sidebar}}
-	{{document/document-sidebar document=model.document folder=model.folder pages=model.pages page=model.page isEditor=model.isEditor sections=model.sections
-		onAddSection=(action 'onAddSection') onInsertBlock=(action 'onInsertBlock') onDeleteBlock=(action 'onDeleteBlock') changePageSequence=(action 'onPageSequenceChange') changePageLevel=(action 'onPageLevelChange') gotoPage=(action 'gotoPage')}}
-{{/layout/zone-sidebar}}
+<div id="wrapper" class={{if toggled 'toggled'}}>
+	<div id="sidebar-wrapper">
+		<div class="document-sidebar-content">
+			{{#if model.document.template}}
+				<div class="is-template">TEMPLATE</div>
+			{{/if}}
 
-{{#layout/zone-content}}
-	{{document/document-toolbar document=model.document pages=model.pages tabs=model.tabs folder=model.folder isEditor=model.isEditor
-		onSaveTemplate=(action 'onSaveTemplate') onSaveMeta=(action 'onSaveMeta')  onDocumentDelete=(action 'onDocumentDelete')}}
+			{{document/tag-editor documentTags=model.document.tags isEditor=model.isEditor onChange=(action 'onTagChange')}}
+			{{#layout/zone-document-sidebar}}
+			{{/layout/zone-document-sidebar}}
+		</div>
+		<div class="document-sidebar-toolbar">
+			<div class="round-button-mono">
+				<i class="material-icons color-gray">more_horiz</i>
+			</div>
+			<div class="margin-top-20"></div>
+			<div class="round-button-mono">
+				<i class="material-icons color-gray">view_headline</i>
+			</div>
+			<div class="margin-top-20"></div>
+			<div class="round-button-mono">
+				<i class="material-icons color-gray">attach_file</i>
+			</div>
+			<div class="margin-top-20"></div>
+			<div class="round-button-mono">
+				<i class="material-icons color-gray">timeline</i>
+			</div>
+			<div class="margin-top-20"></div>
+			<div class="round-button-mono">
+				<i class="material-icons color-gray">person</i>
+			</div>
+			<div class="margin-top-20"></div>
+			<div class="round-button-mono">
+				<i class="material-icons color-gray">chat_bubble</i>
+			</div>
+			<div class="margin-top-20"></div>
+			<div class="round-button-mono">
+				<i class="material-icons color-gray">share</i>
+			</div>
+		</div>
+	</div>
 
-		{{outlet}}
-{{/layout/zone-content}}
+	<div id="page-content-wrapper">
+		<div class="container-fluid">
+			<div class="row">
+				<div class="col-lg-12">
+					{{#if toggled}}
+						<div id="menu-toggle" class="pull-right" {{action 'toggleMenu'}}>
+							<div class="round-button button-black">
+								<i class="material-icons">keyboard_arrow_left</i>
+							</div>
+						</div>
+					{{else}}
+						<div id="menu-toggle" class="pull-right" {{action 'toggleMenu'}}>
+							<div class="round-button button-black">
+								<i class="material-icons">keyboard_arrow_right</i>
+							</div>
+						</div>
+					{{/if}}
+					<div id="zone-document-content" class="zone-document-content">
+						<div class="back-to-space">
+							{{#link-to 'folder' model.folder.id model.folder.slug}}
+								<i class="material-icons">arrow_back</i>&nbsp;{{model.folder.name}}
+							{{/link-to}}
+						</div>
+						{{document/document-heading document=model.document isEditor=model.isEditor onSaveDocument=(action 'onSaveDocument')}}
+						{{document/document-view document=model.document links=model.links allPages=model.allPages tabs=model.tabs pages=model.pages folder=model.folder folders=model.folders isEditor=model.isEditor gotoPage=(action 'gotoPage') onAddBlock=(action 'onAddBlock') onCopyPage=(action 'onCopyPage') onMovePage=(action 'onMovePage') onDeletePage=(action 'onPageDeleted')}}
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>

app/app/snippets.txt

@@ -0,0 +1,411 @@
+**********************************
+**********************************
+***** document
+**********************************
+**********************************
+
+{{layout/zone-navigation}}
+
+{{#layout/zone-sidebar}}
+	{{document/document-sidebar document=model.document folder=model.folder pages=model.pages page=model.page isEditor=model.isEditor sections=model.sections
+		onAddSection=(action 'onAddSection') onInsertBlock=(action 'onInsertBlock') onDeleteBlock=(action 'onDeleteBlock') changePageSequence=(action 'onPageSequenceChange') changePageLevel=(action 'onPageLevelChange') gotoPage=(action 'gotoPage')}}
+{{/layout/zone-sidebar}}
+
+{{#layout/zone-content}}
+	{{document/document-toolbar document=model.document pages=model.pages tabs=model.tabs folder=model.folder isEditor=model.isEditor
+		onSaveTemplate=(action 'onSaveTemplate') onSaveMeta=(action 'onSaveMeta')  onDocumentDelete=(action 'onDocumentDelete')}}
+
+		{{outlet}}
+{{/layout/zone-content}}
+
+// 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 Ember from 'ember';
+import NotifierMixin from '../../mixins/notifier';
+
+export default Ember.Controller.extend(NotifierMixin, {
+	documentService: Ember.inject.service('document'),
+	templateService: Ember.inject.service('template'),
+	sectionService: Ember.inject.service('section'),
+	page: null,
+	folder: {},
+	pages: [],
+
+	// Jump to the right part of the document.
+	scrollToPage(pageId) {
+		Ember.run.schedule('afterRender', function () {
+			let dest;
+			let target = "#page-title-" + pageId;
+			let targetOffset = $(target).offset();
+
+			if (is.undefined(targetOffset)) {
+				return;
+			}
+
+			dest = targetOffset.top > $(document).height() - $(window).height() ? $(document).height() - $(window).height() : targetOffset.top;
+			// small correction to ensure we also show page title
+			dest = dest > 50 ? dest - 74 : dest;
+
+			$("html,body").animate({
+				scrollTop: dest
+			}, 500, "linear");
+			$(".toc-index-item").removeClass("selected");
+			$("#index-" + pageId).addClass("selected");
+		});
+	},
+
+	actions: {
+		gotoPage(pageId) {
+			if (is.null(pageId)) {
+				return;
+			}
+
+			this.scrollToPage(pageId);
+		},
+
+		onPageSequenceChange(changes) {
+			this.get('documentService').changePageSequence(this.get('model.document.id'), changes).then(() => {
+				_.each(changes, (change) => {
+					let pageContent = _.findWhere(this.get('model.pages'), {
+						id: change.pageId
+					});
+
+					if (is.not.undefined(pageContent)) {
+						pageContent.set('sequence', change.sequence);
+					}
+				});
+
+				this.set('model.pages', this.get('model.pages').sortBy('sequence'));
+				this.get('target.router').refresh();
+			});
+		},
+
+		onPageLevelChange(changes) {
+			this.get('documentService').changePageLevel(this.get('model.document.id'), changes).then(() => {
+				_.each(changes, (change) => {
+					let pageContent = _.findWhere(this.get('model.pages'), {
+						id: change.pageId
+					});
+
+					if (is.not.undefined(pageContent)) {
+						pageContent.set('level', change.level);
+					}
+				});
+
+				let pages = this.get('model.pages');
+				pages = pages.sortBy('sequence');
+				this.set('model.pages', []);
+				this.set('model.pages', pages);
+				this.get('target.router').refresh();
+			});
+		},
+
+		onSaveTemplate(name, desc) {
+			this.get('templateService').saveAsTemplate(this.get('model.document.id'), name, desc).then(function () {});
+		},
+
+		onSaveMeta(doc) {
+			this.get('documentService').save(doc).then(() => {
+				this.transitionToRoute('document.index');
+			});
+		},
+
+		onAddSection(section) {
+			this.audit.record("added-section-" + section.get('contentType'));
+
+			let page = {
+				documentId: this.get('model.document.id'),
+				title: `${section.get('title')}`,
+				level: 1,
+				sequence: 0,
+				body: "",
+				contentType: section.get('contentType'),
+				pageType: section.get('pageType')
+			};
+
+			let meta = {
+				documentId: this.get('model.document.id'),
+				rawBody: "",
+				config: ""
+			};
+
+			let model = {
+				page: page,
+				meta: meta
+			};
+
+			this.get('documentService').addPage(this.get('model.document.id'), model).then((newPage) => {
+				let data = this.get('store').normalize('page', newPage);
+				this.get('store').push(data);
+
+				this.get('documentService').getPages(this.get('model.document.id')).then((pages) => {
+					this.set('model.pages', pages.filterBy('pageType', 'section'));
+					this.set('model.tabs', pages.filterBy('pageType', 'tab'));
+
+					this.get('documentService').getPageMeta(this.get('model.document.id'), newPage.id).then(() => {
+						this.transitionToRoute('document.edit',
+							this.get('model.folder.id'),
+							this.get('model.folder.slug'),
+							this.get('model.document.id'),
+							this.get('model.document.slug'),
+							newPage.id);
+					});
+				});
+			});
+		},
+
+		onInsertBlock(block) {
+			this.audit.record("added-content-block-" + block.get('contentType'));
+
+			let page = {
+				documentId: this.get('model.document.id'),
+				title: `${block.get('title')}`,
+				level: 1,
+				sequence: 0,
+				body: block.get('body'),
+				contentType: block.get('contentType'),
+				pageType: block.get('pageType'),
+				blockId: block.get('id')
+			};
+
+			let meta = {
+				documentId: this.get('model.document.id'),
+				rawBody: block.get('rawBody'),
+				config: block.get('config'),
+				externalSource: block.get('externalSource')
+			};
+
+			let model = {
+				page: page,
+				meta: meta
+			};
+
+			this.get('documentService').addPage(this.get('model.document.id'), model).then((newPage) => {
+				let data = this.get('store').normalize('page', newPage);
+				this.get('store').push(data);
+
+				this.get('documentService').getPages(this.get('model.document.id')).then((pages) => {
+					this.set('model.pages', pages.filterBy('pageType', 'section'));
+					this.set('model.tabs', pages.filterBy('pageType', 'tab'));
+
+					this.get('documentService').getPageMeta(this.get('model.document.id'), newPage.id).then(() => {
+						this.transitionToRoute('document.edit',
+							this.get('model.folder.id'),
+							this.get('model.folder.slug'),
+							this.get('model.document.id'),
+							this.get('model.document.slug'),
+							newPage.id);
+					});
+				});
+			});
+		},
+
+		onDeleteBlock(blockId) {
+			this.get('sectionService').deleteBlock(blockId).then(() => {
+				this.audit.record("deleted-block");
+				this.send("showNotification", "Deleted");
+				this.transitionToRoute('document.index');
+			});
+		},
+
+		onDocumentDelete() {
+			this.get('documentService').deleteDocument(this.get('model.document.id')).then(() => {
+				this.audit.record("deleted-page");
+				this.send("showNotification", "Deleted");
+				this.transitionToRoute('folder', this.get('model.folder.id'), this.get('model.folder.slug'));
+			});
+		}
+	}
+});
+
+
+**********************************
+**********************************
+***** document/index
+**********************************
+**********************************
+
+{{document/document-view document=model.document links=model.links allPages=model.allPages tabs=model.tabs pages=model.pages folder=model.folder folders=model.folders isEditor=model.isEditor gotoPage=(action 'gotoPage') onAddBlock=(action 'onAddBlock') onCopyPage=(action 'onCopyPage') onMovePage=(action 'onMovePage') onDeletePage=(action 'onPageDeleted')}}
+
+
+// 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 Ember from 'ember';
+import NotifierMixin from '../../../mixins/notifier';
+
+export default Ember.Controller.extend(NotifierMixin, {
+	documentService: Ember.inject.service('document'),
+	sectionService: Ember.inject.service('section'),
+	queryParams: ['page'],
+
+	// Jump to the right part of the document.
+	scrollToPage(pageId) {
+		Ember.run.schedule('afterRender', function () {
+			let dest;
+			let target = "#page-title-" + pageId;
+			let targetOffset = $(target).offset();
+
+			if (is.undefined(targetOffset)) {
+				return;
+			}
+
+			dest = targetOffset.top > $(document).height() - $(window).height() ? $(document).height() - $(window).height() : targetOffset.top;
+			// small correction to ensure we also show page title
+			dest = dest > 50 ? dest - 74 : dest;
+
+			$("html,body").animate({
+				scrollTop: dest
+			}, 500, "linear");
+			$(".toc-index-item").removeClass("selected");
+			$("#index-" + pageId).addClass("selected");
+		});
+	},
+
+	actions: {
+		gotoPage(pageId) {
+			if (is.null(pageId)) {
+				return;
+			}
+
+			this.scrollToPage(pageId);
+		},
+
+		onPageSequenceChange(changes) {
+			this.get('documentService').changePageSequence(this.get('model.document.id'), changes).then(() => {
+				_.each(changes, (change) => {
+					let pageContent = _.findWhere(this.get('model.pages'), {
+						id: change.pageId
+					});
+
+					if (is.not.undefined(pageContent)) {
+						pageContent.set('sequence', change.sequence);
+					}
+				});
+
+				this.set('model.pages', this.get('model.pages').sortBy('sequence'));
+				this.get('target.router').refresh();
+			});
+		},
+
+		onPageLevelChange(changes) {
+			this.get('documentService').changePageLevel(this.get('model.document.id'), changes).then(() => {
+				_.each(changes, (change) => {
+					let pageContent = _.findWhere(this.get('model.pages'), {
+						id: change.pageId
+					});
+
+					if (is.not.undefined(pageContent)) {
+						pageContent.set('level', change.level);
+					}
+				});
+
+				let pages = this.get('model.pages');
+				pages = pages.sortBy('sequence');
+				this.set('model.pages', pages);
+
+				this.get('target.router').refresh();
+			});
+		},
+
+		onAddBlock(block) {
+			this.get('sectionService').addBlock(block).then(() => {
+				this.showNotification("Published");
+			});
+		},
+
+		onCopyPage(pageId, targetDocumentId) {
+			let documentId = this.get('model.document.id');
+			this.get('documentService').copyPage(documentId, pageId, targetDocumentId).then(() => {
+				this.showNotification("Copied");
+
+				// refresh data if copied to same document
+				if (documentId === targetDocumentId) {
+					this.get('target.router').refresh();
+				}
+			});
+		},
+
+		onMovePage(pageId, targetDocumentId) {
+			let documentId = this.get('model.document.id');
+
+			this.get('documentService').copyPage(documentId, pageId, targetDocumentId).then(() => {
+				this.showNotification("Moved");
+
+				this.send('onPageDeleted', { id: pageId, children: false });
+			});
+		},
+
+		onPageDeleted(deletePage) {
+			let documentId = this.get('model.document.id');
+			let pages = this.get('model.pages');
+			let deleteId = deletePage.id;
+			let deleteChildren = deletePage.children;
+			let page = _.findWhere(pages, {
+				id: deleteId
+			});
+			let pageIndex = _.indexOf(pages, page, false);
+			let pendingChanges = [];
+
+			this.audit.record("deleted-page");
+
+			// select affected pages
+			for (var i = pageIndex + 1; i < pages.get('length'); i++) {
+				if (pages[i].get('level') <= page.get('level')) {
+					break;
+				}
+
+				pendingChanges.push({
+					pageId: pages[i].get('id'),
+					level: pages[i].get('level') - 1
+				});
+			}
+
+			if (deleteChildren) {
+				// nuke of page tree
+				pendingChanges.push({
+					pageId: deleteId
+				});
+
+				this.get('documentService').deletePages(documentId, deleteId, pendingChanges).then(() => {
+					// update our models so we don't have to reload from db
+					for (var i = 0; i < pendingChanges.length; i++) {
+						let pageId = pendingChanges[i].pageId;
+						this.set('model.pages', _.reject(pages, function (p) { //jshint ignore: line
+							return p.get('id') === pageId;
+						}));
+					}
+
+					this.set('model.pages', _.sortBy(pages, "sequence"));
+					this.get('target.router').refresh();
+				});
+			} else {
+				// page delete followed by re-leveling child pages
+				this.get('documentService').deletePage(documentId, deleteId).then(() => {
+					this.set('model.pages', _.reject(pages, function (p) {
+						return p.get('id') === deleteId;
+					}));
+
+					this.send('onPageLevelChange', pendingChanges);
+				});
+			}
+		}
+	}
+});

app/app/styles/color.scss

@@ -41,6 +41,8 @@ $color-symbol-icon: #a4b8be;
 
 $color-table-border: #e1e1e1;
 $color-table-header: #f5f5f5;
+$color-toolbar: #eeeeee;
+$color-wysiwyg: #3c3c3c;
 
 .color-white {
 	color: $color-white !important;

app/app/styles/font.scss

@@ -30,9 +30,9 @@
 	font-style: normal;
 }
 
-$font-regular: 'open_sansregular';
-$font-semibold: 'open_sanssemibold';
-$font-light: 'open_sanslight';
+$font-regular: Helvetica;
+$font-semibold: Helvetica;
+$font-light: Helvetica;
 
 @font-face {
 	font-family: "Material Icons";

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

@@ -4,6 +4,7 @@
 @import "editor.scss";
 @import "files.scss";
 @import "history.scss";
+@import "layout.scss";
 @import "sidebar.scss";
 @import "toolbar.scss";
 @import "wizard.scss";

app/app/styles/view/document/content.scss

@@ -1,45 +1,72 @@
-.wiki-layout {
-
+.zone-document {
+	min-height: 500px; //ensure dropdowns render in viewport
+	height: 100%;
+	margin-left: 60px;
+	padding: 30px 70px;
+	z-index: 777;
+	background-color: $color-off-white;
 }
 
-.doc-layout {
-	padding: 60px 50px;
-	box-shadow: 0 0 0 0.75pt $color-stroke,0 0 3pt 0.75pt $color-stroke;
-	margin: 30px 40px 50px 40px;
+.zone-document-content {
+	> .back-to-space {
+		margin: 10px 0;
+
+		> a {
+			vertical-align: middle;
+			color: $color-primary;
+			font-size: 1rem;
+
+			> .material-icons {
+				font-size: 1rem;
+				vertical-align: middle;
+			}
+		}
+	}
+
+	.doc-title {
+		margin: 30px 0 10px;
+		font-weight: bold;
+	}
+
+	.doc-excerpt {
+		font-size: 1rem;
+		color: $color-gray;
+		margin: 0 0 75px;
+	}
+
+	.edit-document-heading {
+		margin-top: 30px;
+
+		.edit-doc-title {
+			> input {
+				font-weight: bold;
+				font-size: 2rem;
+				margin: 0 0 10px;
+				color: $color-wysiwyg;
+			}
+		}
+
+		.edit-doc-excerpt {
+			font-size: 1rem;
+			margin: 0 0 10px;
+			color: $color-gray;
+		}
+	}
 }
 
 .document-view {
-	.print-title {
-		display: none;
-		font-size: 2.3em;
-		font-weight: bold;
-		color:$color-black;
-		margin-bottom: 20px;
-		margin-top: 0;
-	}
-
-	.non-printable-message {
-		display: none;
-		font-size: 1em;
-		font-style: italic;
-		color: $color-gray;
-	}
-
-	.is-template {
-		color: $color-goldy;
-		font-weight: bold;
-		font-size: 1.5em;
-		margin-bottom: 30px;
-		padding-bottom: 5px;
-		border-bottom: 1px dotted $color-goldy;
-	}
-
 	> .pages {
-		margin: 30px 0 50px 0;
+		margin: 30px 0 50px;
 
 		> .wysiwyg {
 			> .is-a-page {
 				@extend .transition-all;
+				@include border-radius(2px);
+				@include ease-in();
+				padding: 50px;
+				box-shadow: 0 0 0 0.75pt $color-stroke,0 0 3pt 0.75pt $color-stroke;
+				margin: 30px 0;
+				background-color: $color-white;
 
 				&:hover {
 					.page-title {

app/app/styles/view/document/layout.scss

@@ -0,0 +1,80 @@
+#wrapper {
+    padding-right: 0;
+	margin-left: 60px;
+    -webkit-transition: all 0.5s ease;
+    -moz-transition: all 0.5s ease;
+    -o-transition: all 0.5s ease;
+    transition: all 0.5s ease;
+	background-color: $color-off-white;
+}
+
+$document-sidebar-width: 400px;
+
+#wrapper.toggled {
+    // padding-right: $document-sidebar-width;
+}
+
+#sidebar-wrapper {
+    // z-index: 1000;
+	z-index: 888;
+    position: fixed;
+    right: $document-sidebar-width;
+    width: 0;
+    height: 100%;
+    margin-right: -$document-sidebar-width;
+    overflow-y: auto;
+    background: $color-off-white;
+    -webkit-transition: all 0.5s ease;
+    -moz-transition: all 0.5s ease;
+    -o-transition: all 0.5s ease;
+    transition: all 0.5s ease;
+	border-left: 1px solid $color-stroke;
+}
+
+#wrapper.toggled #sidebar-wrapper {
+    width: $document-sidebar-width;
+}
+
+#page-content-wrapper {
+    width: 100%;
+    position: absolute;
+	padding: 30px 70px;
+}
+
+#wrapper.toggled #page-content-wrapper {
+    position: absolute;
+    margin-left: -$document-sidebar-width;
+}
+
+@media(min-width:768px) {
+    #wrapper {
+        padding-right: $document-sidebar-width;
+    }
+
+    #wrapper.toggled {
+        padding-left: 0;
+		padding-right: 0;
+    }
+
+    #sidebar-wrapper {
+        width: $document-sidebar-width;
+    }
+
+    #wrapper.toggled #sidebar-wrapper {
+        width: 0;
+
+		.document-sidebar-toolbar {
+			position: relative;
+		}
+    }
+
+    #page-content-wrapper {
+        padding: 20px 60px;
+        position: relative;
+    }
+
+    #wrapper.toggled #page-content-wrapper {
+        position: relative;
+        margin-left: 0;
+    }
+}

app/app/styles/view/document/sidebar.scss

@@ -1,6 +1,33 @@
-.document-sidebar {
+.document-sidebar-content {
+	display: inline-block;
+	width: 340px;
+	padding: 40px 20px;
+}
+
+.document-sidebar-toolbar {
+	display: inline-block;
+    width: 60px;
+    background-color: $color-toolbar;
+    text-align: center;
+    position: fixed;
+    right: 0;
+    top: 0;
+    height: 100%;
+	padding: 50px 0 0 0;
+}
+
+.xxxx {
+
+	.is-template {
+		color: $color-goldy;
+		font-weight: bold;
+		font-size: 1.5em;
+		margin-bottom: 30px;
+		padding-bottom: 5px;
+		border-bottom: 1px dotted $color-goldy;
+	}
+
 	@extend .no-select;
-	width: 100%;
 
 	.stuck-toc {
 		position: fixed;

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

@@ -1,115 +1,91 @@
 .wysiwyg {
-	// font-size: 1rem;
-	font-size: 15px;
+	font-size: 17px;
 	line-height: 30px;
-	color: #3c3c3c;
-
-	table
-	{
-		// width: auto !important;
+	color: $color-wysiwyg;
 
+	table {
 		@include border(1px);
 
-		td
-		{
+		td {
 			padding: 5px 7px !important;
 			@include border(1px);
 
-			p
-			{
+			p {
 				margin: 0 !important;
 				padding: 0 !important;
 			}
 		}
 	}
 
-	ol, ul
-	{
+	ol,
+	ul {
 		margin: 15px 0;
 		padding: 0 0 0 40px;
 	}
 
-	ul
-	{
-		li
-		{
+	ul {
+		li {
 			list-style-type: disc;
 		}
 	}
 
-	b
-	{
-		font-family: $font-semibold;
-	}
-
 	h1 {
-		font-size: 2em;
-		font-family: $font-semibold;
+		font-size: 2rem;
+		font-weight: normal;
 	}
 
-	// h1
-	// {
-	// 	font-size: 1.6em;
-	// 	font-family: open_sanslight;
-	// 	color:$color-off-black;
-	// 	margin: 0 0 20px 0;
-	// }
-
-	h2
-	{
-		font-size: 1.7em;
-		margin: 30px 0 20px 0;
-		font-family: $font-regular;
+	h2 {
+		font-size: 1.7rem;
+		margin: 30px 0 20px;
 	}
 
-	h3
-	{
+	h3 {
 		font-size: 1.5rem;
-		margin: 30px 0 20px 0;
-		font-family: $font-regular;
+		margin: 30px 0 20px;
 	}
 
-	h4
-	{
+	h4 {
 		font-size: 1.3rem;
-		margin: 30px 0 20px 0;
-		font-family: $font-regular;
+		margin: 30px 0 20px;
 	}
 
-	h5, h6, h7, h8, h9
-	{
+	h5,
+	h6,
+	h7,
+	h8,
+	h9 {
 		font-size: 1.3rem;
-		margin: 30px 0 20px 0;
-		font-family: $font-regular;
+		margin: 30px 0 20px;
 	}
 
-	h2, h3, h4, h5, h6, h7, h8, h9
-	{
-		.page-title
-		{
+	h2,
+	h3,
+	h4,
+	h5,
+	h6,
+	h7,
+	h8,
+	h9 {
+		.page-title {
 			color: $color-off-black;
-			font-family: $font-regular;
 		}
 	}
 
-	pre
-	{
+	pre {
 		background-color: $color-off-white;
 		padding: 10px;
 		border: 1px solid $color-border;
 		@include border-radius(3px);
 	}
 
-	.code-mirror
-	{
+	.code-mirror {
 		background-color: none;
 		padding: 10px;
 		border: none;
 		@include border-radius(0px);
 	}
 
-	.wysiwyg-table
-	{
+	.wysiwyg-table {
 		border: none;
 		border-collapse: collapse;
 		empty-cells: show;
@@ -120,26 +96,32 @@
 		.fr-dashed-borders th {
 			border-style: dashed;
 		}
+
 		.fr-alternate-rows tbody tr:nth-child(2n) {
 			background: #f5f5f5;
 		}
+
 		td,
 		th {
 			border: 1px solid #f3f5f8;
 			padding: 5px 7px !important;
 		}
+
 		td:empty,
 		th:empty {
 			height: 20px;
 		}
+
 		td.fr-highlighted,
 		th.fr-highlighted {
 			border: 1px double red;
 		}
+
 		td.fr-thick,
 		th.fr-thick {
 			border-width: 2px;
 		}
+
 		th {
 			background: #f7f6f6;
 		}

app/app/styles/view/layout.scss

@@ -1,13 +1,14 @@
 .zone-navigation {
 	position: fixed;
-	margin: 0;
-	padding: 0;
+	top: 0;
 	width: 60px;
 	min-height: 100%;
 	height: 100%;
-	background-color: $color-primary;
+	margin: 0;
+	padding: 0;
 	z-index: 999;
 	overflow-x: hidden;
+	background-color: $color-primary;
 
 	> .bottom-zone,
 	> .top-zone {

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

@@ -217,6 +217,13 @@
     @include button-hover-state($color-white);
 }
 
+.button-black {
+	border: 1px solid $color-stroke;
+    background-color: $color-off-black;
+	color: $color-white;
+    @include button-hover-state($color-black);
+}
+
 .button-transparent {
     background-color: transparent;
     color: $color-gray;

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

@@ -161,6 +161,16 @@
 			box-shadow: none !important;
 		}
 	}
+
+	.error-inline {
+		border-left: 3px solid $color-red;
+	}
+}
+
+.input-transparent {
+	> input, textarea {
+		background-color: transparent !important;
+	}
 }
 
 .form-bordered {

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

@@ -0,0 +1,22 @@
+{{#unless editMode}}
+	<div class="{{if isEditor 'cursor-pointer'}}" onclick={{if isEditor (action 'toggleEdit')}}>
+		<h1 class="doc-title">{{document.name}}</h1>
+		<div class="doc-excerpt">{{document.excerpt}}</div>
+	</div>
+{{else}}
+	<div class="edit-document-heading">
+		<div class="input-inline input-transparent edit-doc-title">
+			{{focus-input id="document-name" type="text" value=docName class=(if hasNameError 'error-inline') placeholder="Name"}}
+		</div>
+		<div class="input-inline input-transparent edit-doc-excerpt">
+			{{input id="document-excerpt" type="text" value=docExcerpt class=(if hasExcerptError 'error-inline') placeholder="Excerpt"}}
+		</div>
+    	<div class="round-button-mono" {{action 'onSaveDocument'}}>
+			<i class="material-icons color-green">check</i>
+		</div>
+		<div class="button-gap" />
+		<div class="round-button-mono" {{action 'cancel'}}>
+			<i class="material-icons color-gray">close</i>
+		</div>
+	</div>
+{{/unless}}

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

@@ -1,18 +1,4 @@
-<div class="document-view {{document.layout}}-layout">
-	{{#if document.template}}
-		<div class="is-template">TEMPLATE</div>
-	{{/if}}
-
-	<div class="wysiwyg">
-		<h1 class="doc-name">{{document.name}}</h1>
-	</div>
-
-	{{document/tag-editor documentTags=document.tags isEditor=isEditor onChange=(action 'onTagChange')}}
-
-	<div class="print-title">
-		{{document.name}}
-	</div>
-
+<div class="document-view">
 	<div class="pages">
 		{{#each pages key="id" as |page index|}}
 			<div class="wysiwyg">

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

@@ -3,12 +3,12 @@
     <div id="page-toolbar-{{ page.id }}" class="pull-right page-toolbar hidden-xs hidden-sm">
         {{#if isEditor}}
 			{{#link-to 'document.edit' folder.id folder.slug document.id document.slug page.id}}
-	            <div class="round-button-mono page-action-button" data-tooltip="Edit" data-tooltip-position="top center">
+	            <div class="round-button-mono">
 	                <i class="material-icons color-gray">mode_edit</i>
 	            </div>
 			{{/link-to}}
 
-            <div id="page-menu-{{page.id}}" class="round-button-mono page-action-button" data-tooltip="More options" data-tooltip-position="top center">
+            <div id="page-menu-{{page.id}}" class="round-button-mono">
                 <i class="material-icons color-gray">more_vert</i>
             </div>
 

app/app/templates/components/layout/zone-document-sidebar.hbs

@@ -0,0 +1,3 @@
+<p>
+	sidebar
+</p>

app/app/templates/components/layout/zone-document.hbs

@@ -0,0 +1,3 @@
+<div id="zone-document-content" class="zone-document-content col-lg-9 col-md-9 col-sm-9">
+	{{yield}}
+</div>