Merge pull request #56 from documize/workspace-bar

Workspace bar

.gitignore

@@ -62,5 +62,3 @@ debug
 Dockerfile
 container.sh
 make.sh
-
-embed/bindata_assetfs.go

README.md

@@ -8,38 +8,38 @@ The mission is to bring software dev inspired features (refactoring, testing, li
 
 ## Latest version
 
-v0.28.2
+v0.29.0
 
 ## OS Support
 
-* Windows
+- Windows
-* Linux
+- Linux
-* OSX
+- OSX
 
 ## Tech stack
 
-* EmberJS (v2.9.1)
+- EmberJS (v2.9.1)
-* Go (v1.7.3)
+- Go (v1.7.3)
-* MySQL (v5.7.10+)
+- MySQL (v5.7.10+)
 
 ## Documentation
 
-* [Install from binary guide](https://developers.documize.com/s/VzO9ZqMOCgABGyfW/installation/d/V16L08ucxwABhZF6/install-documize-from-binary-guide)
+- [Install from binary guide](https://developers.documize.com/s/VzO9ZqMOCgABGyfW/installation/d/V16L08ucxwABhZF6/install-documize-from-binary-guide)
-* [Install for development guide](https://developers.documize.com/s/VzO9ZqMOCgABGyfW/installation/d/V16LOMucxwABhZF1/install-documize-for-development-guide)
+- [Install for development guide](https://developers.documize.com/s/VzO9ZqMOCgABGyfW/installation/d/V16LOMucxwABhZF1/install-documize-for-development-guide)
-* [Configuration guide](https://developers.documize.com/s/VzO9ZqMOCgABGyfW/installation/d/VzSL8cVZ4QAB2B4Y/configure-documize-guide)
+- [Configuration guide](https://developers.documize.com/s/VzO9ZqMOCgABGyfW/installation/d/VzSL8cVZ4QAB2B4Y/configure-documize-guide)
 
 ## Auth0 Integration
 
 Documize is compatible with Auth0 identity as a service.
 
-<a width="150" height="50" href="https://auth0.com/?utm_source=oss&utm_medium=gp&utm_campaign=oss" target="_blank" alt="Single Sign On & Token Based Authentication - Auth0"><img width="150" height="50" alt="JWT Auth for open source projects" src="https://cdn.auth0.com/oss/badges/a0-badge-dark.png"/></a>
+[![JWT Auth for open source projects](https://cdn.auth0.com/oss/badges/a0-badge-dark.png)](https://auth0.com/?utm_source=oss&utm_medium=gp&utm_campaign=oss)
 
 ## Word Conversion to HTML
 
-* [Code for ```wordconvert``` utility](https://github.com/documize/community/tree/master/cmd/wordconvert)
+- [Code for `wordconvert` utility](https://github.com/documize/community/tree/master/cmd/wordconvert)
 
 ## Legal
 
-https://documize.com
+<https://documize.com>
 
-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>. Documize® is a registered trade mark of Documize Inc.
+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>. Documize® is a registered trade mark of Documize Inc.

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

@@ -51,7 +51,7 @@ export default Ember.Component.extend(TooltipMixin, NotifierMixin, {
 		if (windowpos >= 300) {
 			this.set('showScrollTool', true);
 			s.addClass("stuck-tool");
-			s.css('left', parseInt($(".zone-sidebar").css('width')) - 18 + 'px');
+			s.css('left', parseInt($(".zone-navigation").css('width')) + parseInt($(".zone-sidebar").css('width')) - 18 + 'px');
 		} else {
 			this.set('showScrollTool', false);
 			s.removeClass("stuck-tool");

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

@@ -14,9 +14,14 @@ import constants from '../../utils/constants';
 import TooltipMixin from '../../mixins/tooltip';
 import NotifierMixin from '../../mixins/notifier';
 
+const {
+	inject: { service }
+} = Ember;
+
 export default Ember.Component.extend(TooltipMixin, NotifierMixin, {
 	folderService: Ember.inject.service('folder'),
 	templateService: Ember.inject.service('template'),
+	appMeta: service(),
 	publicFolders: [],
 	protectedFolders: [],
 	privateFolders: [],
@@ -108,7 +113,7 @@ export default Ember.Component.extend(TooltipMixin, NotifierMixin, {
 		if (windowpos >= 300) {
 			this.set('showScrollTool', true);
 			s.addClass("stuck-space-tool");
-			s.css('left', parseInt($(".zone-sidebar").css('width')) - 18 + 'px');
+			s.css('left', parseInt($(".zone-navigation").css('width')) + parseInt($(".zone-sidebar").css('width')) - 17 + 'px');
 		} else {
 			this.set('showScrollTool', false);
 			s.removeClass("stuck-space-tool");

app/app/components/layout/sidebar-intro.js

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

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

@@ -11,16 +11,23 @@
 
 import Ember from 'ember';
 import netUtil from '../../utils/net';
+import TooltipMixin from '../../mixins/tooltip';
 
 const {
 	inject: { service }
 } = Ember;
 
-export default Ember.Component.extend({
+export default Ember.Component.extend(TooltipMixin, {
 	folderService: service('folder'),
 	folder: null,
 	appMeta: service(),
 	session: service(),
+	view: {
+		folder: false,
+		search: false,
+		settings: false,
+		profile: false
+	},
 
 	init() {
 		this._super(...arguments);
@@ -37,6 +44,23 @@ export default Ember.Component.extend({
 		if (this.get('folder') === null) {
 			this.set("folder", this.get('folderService.currentFolder'));
 		}
+
+		let route = this.get('router.currentRouteName');
+		this.set('view.folder', (is.startWith(route, 'folder')) ? true : false);
+		this.set('view.settings', (is.startWith(route, 'customize')) ? true : false);
+		this.set('view.profile', (route === 'profile') ? true : false);
+		this.set('view.search', (route === 'search') ? true : false);
+	},
+
+	didRender() {
+		if (this.get('session.isAdmin')) {
+			this.addTooltip(document.getElementById("workspace-settings"));
+		}
+		if (this.get("session.authenticated")) {
+			this.addTooltip(document.getElementById("workspace-logout"));
+		} else {
+			this.addTooltip(document.getElementById("workspace-login"));
+		}
 	},
 
 	actions: {

app/app/components/search/search-results.js

@@ -43,11 +43,9 @@ export default Ember.Component.extend({
 		let phrase = 'Nothing found';
 
 		if (results.length > 0) {
-            let places = documents.length === 1 ? "place" : "places";
+			let references = results.length === 1 ? "reference" : "references";
-            let references = results.length === 1 ? "secton" : "sections";
 			let i = results.length;
-            let j = documents.length;
+			phrase = `${i} ${references}`;
-            phrase = `${i} ${references} in ${j} ${places}`;
 		}
 
 		this.set('resultPhrase', phrase);

app/app/pods/customize/template.hbs

@@ -1,8 +1,7 @@
-{{#layout/zone-container}}
-
 {{layout/zone-navigation}}
+
 {{#layout/zone-sidebar}}
-		{{back-to-home}}
+	{{layout/sidebar-intro title='Settings' message='Documize application settings'}}
 	<div class="sidebar-menu">
 		<ul class="options">
 			{{#link-to 'customize.general' activeClass='selected' class="option" tagName="li"}}General{{/link-to}}
@@ -18,5 +17,3 @@
 {{#layout/zone-content}}
 	{{outlet}}
 {{/layout/zone-content}}
-
-{{/layout/zone-container}}

app/app/pods/customize/users/template.hbs

@@ -2,4 +2,6 @@
     {{user-settings add=(action 'add')}}
 </div>
 
-<div class="clearfix" /> {{settings/user-list users=model onDelete=(action "onDelete") onSave=(action "onSave") onPassword=(action "onPassword")}}
+<div class="clearfix" />
+
+{{settings/user-list users=model onDelete=(action "onDelete") onSave=(action "onSave") onPassword=(action "onPassword")}}

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

@@ -1,28 +1,17 @@
-{{#layout/zone-container}}
-
 {{layout/zone-navigation}}
 
 {{#layout/zone-sidebar}}
-		{{document/document-sidebar document=model meta=meta folder=folder pages=pages page=page owner=owner isEditor=isEditor
+	{{document/document-sidebar document=model meta=meta folder=folder pages=pages page=page owner=owner isEditor=isEditor onAddSection=(action
-			onAddSection=(action 'onAddSection')
+	'onAddSection') changePageSequence=(action 'onPageSequenceChange') changePageLevel=(action 'onPageLevelChange') gotoPage=(action
-			changePageSequence=(action 'onPageSequenceChange')
+	'gotoPage')}}
-			changePageLevel=(action 'onPageLevelChange')
-			gotoPage=(action 'gotoPage')}}
 {{/layout/zone-sidebar}}
 
 {{#layout/zone-content}}
-		{{document/document-toolbar document=model pages=pages folder=folder owner=owner
+	{{document/document-toolbar document=model pages=pages folder=folder owner=owner isEditor=isEditor users=users onSaveTemplate=(action
-			isEditor=isEditor users=users
+	'onSaveTemplate') onDocumentChange=(action 'onDocumentChange') onAttachmentUpload=(action 'onAttachmentUpload') onDocumentDelete=(action
-			onSaveTemplate=(action 'onSaveTemplate')
+	'onDocumentDelete')}}
-			onDocumentChange=(action 'onDocumentChange')
-			onAttachmentUpload=(action 'onAttachmentUpload')
-			onDocumentDelete=(action 'onDocumentDelete')}}
 
-		{{document/document-view document=model meta=meta pages=pages attachments=attachments folder=folder folders=folders
+	{{document/document-view document=model meta=meta pages=pages attachments=attachments folder=folder
-			isEditor=isEditor
+	folders=folders isEditor=isEditor gotoPage=(action 'gotoPage') onAttachmentDeleted=(action 'onAttachmentDeleted') onDeletePage=(action
-			gotoPage=(action 'gotoPage')
+	'onPageDeleted')}}
-			onAttachmentDeleted=(action 'onAttachmentDeleted')
-			onDeletePage=(action 'onPageDeleted')}}
 {{/layout/zone-content}}
-
-{{/layout/zone-container}}

app/app/pods/folders/folder/template.hbs

@@ -1,23 +1,12 @@
-{{#layout/zone-container}}
-
 {{layout/zone-navigation}}
 
 {{#layout/zone-sidebar}}
-		{{folder/folders-list folders=model.folders folder=model.folder
+	{{folder/folders-list folders=model.folders folder=model.folder onImport=(action 'onImport') onFolderAdd=(action 'onFolderAdd')
-			onImport=(action 'onImport')
-			onFolderAdd=(action 'onFolderAdd')
 	showDocument=(action 'showDocument')}}
 {{/layout/zone-sidebar}}
 
 {{#layout/zone-content}}
-		{{folder/folder-toolbar
+	{{folder/folder-toolbar folders=model.folders folder=model.folder hasSelectedDocuments=hasSelectedDocuments onDeleteDocument=(action
-			folders=model.folders
+	'onDeleteDocument') onMoveDocument=(action 'onMoveDocument')}} {{folder/documents-list documents=model.documents folder=model.folder
-			folder=model.folder
+	isFolderOwner=isFolderOwner onDocumentsChecked=(action 'onDocumentsChecked') }}
-			hasSelectedDocuments=hasSelectedDocuments
-			onDeleteDocument=(action 'onDeleteDocument')
-			onMoveDocument=(action 'onMoveDocument')}}
-
-		{{folder/documents-list documents=model.documents folder=model.folder isFolderOwner=isFolderOwner onDocumentsChecked=(action 'onDocumentsChecked') }}
 {{/layout/zone-content}}
-
-{{/layout/zone-container}}

app/app/pods/folders/settings/template.hbs

@@ -1,9 +1,11 @@
-{{#layout/zone-container}}
-
 {{layout/zone-navigation}}
 
 {{#layout/zone-sidebar}}
-		{{back-to-space folder=model}}
+	{{#layout/sidebar-intro message='Rename, delete, share and manage space permissions'}}
+		{{#link-to 'folders.folder' model.id model.slug}}
+			<i class="material-icons">arrow_back</i>&nbsp;{{model.name}}
+		{{/link-to}}
+	{{/layout/sidebar-intro}}
 	<div class="sidebar-menu">
 		<ul class="options">
 			<li class="option {{if tabGeneral "selected"}}" {{action 'selectTab' 'tabGeneral'}}>General</li>
@@ -30,5 +32,3 @@
 		onPermission="onPermission" }}
 	{{/folder/folder-settings}}
 {{/layout/zone-content}}
-
-{{/layout/zone-container}}

app/app/pods/profile/template.hbs

@@ -1,9 +1,7 @@
-{{#layout/zone-container}}
-
 {{layout/zone-navigation}}
 
 {{#layout/zone-sidebar}}
-		{{back-to-home}}
+	{{layout/sidebar-intro title="Profile" message=session.user.fullname}}
 	<div class="sidebar-menu">
 		<div class="avatar-large">{{session.user.initials}}</div>
 	</div>
@@ -12,5 +10,3 @@
 {{#layout/zone-content}}
 	{{user-profile model=model save=(action 'save')}}
 {{/layout/zone-content}}
-
-{{/layout/zone-container}}

app/app/pods/search/template.hbs

@@ -1,22 +1,16 @@
-{{#layout/zone-container}}
-
 {{layout/zone-navigation}}
 
+{{#layout/zone-sidebar}}
+	{{layout/sidebar-intro title="Search" message='Search by: #tags, keywords, "some phrase", this AND that, this OR that'}}
 	<div class="page-search">
+		<div class="input-control">
+			{{focus-input type="text" value=filter placeholder='search'}}
+		</div>
+	</div>
+{{/layout/zone-sidebar}}
 
-		<div id="zone-header" class="zone-header">
+{{#layout/zone-content}}
-			<div class="input-control pull-left width-60">
+	<div class="page-search">
-				<label>Search</label>
-				{{focus-input class="input" type="text" value=filter placeholder='#tags, keywords, "some phrase", keyword AND keyword, keyword OR keyword'}}
-			</div>
-			<div class="actions pull-right hidden-xs hidden-sm">
-				{{layout/button-home}}
-			</div>
-			<div class="clearfix"></div>
-		</div>
-
 		{{search/search-results results=results}}
-
 	</div>
-
+{{/layout/zone-content}}
-{{/layout/zone-container}}

app/app/pods/setup/template.hbs

@@ -1,6 +1,5 @@
 <div class=" page-setup container-fluid padding-100 background-color-primary">
 	<div class="row">
-
 		<div class="col-lg-3 col-md-3 col-sm-3">
 			<div>
 				<img src="/assets/img/setup/logo.png" alt="Documize" class="no-select no-outline margin-top-20" />
@@ -10,6 +9,5 @@
 			</div>
 		</div>
 		{{documize-setup model=model save=(action 'save')}}
-
 	</div>
 </div>

app/app/routes/application.js

@@ -22,22 +22,6 @@ export default Ember.Route.extend(ApplicationRouteMixin, {
 	session: service(),
 
 	beforeModel(transition) {
-		// start TODO: ugly hack
-		let MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
-		let observer = new MutationObserver(function(/*mutations, observer*/) {
-		    // fired when a mutation occurs
-		    // console.log(mutations, observer);
-			$("#zone-sidebar").css('height', $(document).height() - $("#zone-navigation").height());
-		});
-
-		observer.observe(document, {
-			subtree: true,
-			attributes: false,
-			childList: true,
-			characterData: true
-		});
-		// end TODO: ugly hack
-
 		return this.get('appMeta').boot(transition.targetName).then(data => {
 			if (this.get('session.session.authenticator') !== "authenticator:documize" && data.allowAnonymousAccess) {
 				return this.get('session').authenticate('authenticator:anonymous', data);

app/app/styles/print.scss

@@ -8,18 +8,23 @@
 // by contacting <sales@documize.com>.
 //
 // https://documize.com
-
 @media print {
-	.zone-navigation, .zone-header, .zone-sidebar, .non-printable {
+	.non-printable,
+	.zone-navigation,
+	.zone-sidebar {
 		display: none !important;
 	}
 
 	.document-view {
-		.page-toolbar, .document-summary, .attachment-zone, .document-tags {
+		.attachment-zone,
+		.document-summary,
+		.document-tags,
+		.page-toolbar {
 			display: none !important;
 		}
 
-		.print-title, .non-printable-message {
+		.non-printable-message,
+		.print-title {
 			display: block !important;
 		}
 	}

app/app/styles/view/common.scss

@@ -1,21 +1,17 @@
-.space-button {
+.explainer {
-	width: 100%;
+	text-align: center;
+
+	> .empty-state {
+		margin: 30px 0 0;
+		font-size: 2rem;
+		color: $color-gray;
+		font-family: 'open_sanslight';
 	}
 
-.space-name {
+	> .normal-state {
-	max-width: 90%;
+		margin: 10px;
-	text-overflow: ellipsis;
+		font-size: 2rem;
-	overflow: hidden;
+		color: $color-gray;
-	white-space: nowrap;
+		font-family: 'open_sanslight';
 	}
-
-.back-to-home-button {
-	width: 100%;
-}
-
-.back-to-home-name {
-	max-width: 90%;
-	text-overflow: ellipsis;
-	overflow: hidden;
-	white-space: nowrap;
 }

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

@@ -56,41 +56,41 @@
 	.stuck-toc {
 		position: fixed;
 		top: 20px;
-		-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
+		-webkit-animation: fadein 1s;
-      	-moz-animation: fadein 1s; /* Firefox < 16 */
+		-moz-animation: fadein 1s;
-       	-ms-animation: fadein 1s; /* Internet Explorer */
+		-ms-animation: fadein 1s;
-        -o-animation: fadein 1s; /* Opera < 12.1 */
+		-o-animation: fadein 1s;
 		animation: fadein 1s;
 	}
 
 	.section-tool {
 		position: absolute;
-		top: 150px;
+		top: 130px;
 		right: -18px;
 		z-index: 999;
 	}
 
 	.scroll-tool {
 		position: absolute;
-		top: 150px;
+		top: 130px;
 		right: -18px;
-		z-index: 888;
+		z-index: 999;
-		-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
+		-webkit-animation: fadein 1s;
-      	-moz-animation: fadein 1s; /* Firefox < 16 */
+		-moz-animation: fadein 1s;
-       	-ms-animation: fadein 1s; /* Internet Explorer */
+		-ms-animation: fadein 1s;
-        -o-animation: fadein 1s; /* Opera < 12.1 */
+		-o-animation: fadein 1s;
 		animation: fadein 1s;
 	}
 
 	.stuck-tool {
 		position: fixed !important;
-		top: 150px !important;
+		top: 130px !important;
 		right: 0;
 		left: 0;
-		-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
+		-webkit-animation: fadein 1s;
-      	-moz-animation: fadein 1s; /* Firefox < 16 */
+		-moz-animation: fadein 1s;
-       	-ms-animation: fadein 1s; /* Internet Explorer */
+		-ms-animation: fadein 1s;
-        -o-animation: fadein 1s; /* Opera < 12.1 */
+		-o-animation: fadein 1s;
 		animation: fadein 1s;
 	}
 
@@ -139,7 +139,7 @@
 			font-size: 13px;
 			overflow-x: hidden;
 			list-style-type: none;
-			margin: 20px 0 0 0;
+			margin: 20px 0 0;
 
 			.item {
 				padding: 4px 0;

app/app/styles/view/layout.scss

@@ -1,66 +1,60 @@
-.zone-container {
-	min-height: 500px; //ensure dropdowns render in viewport
-}
-
 .zone-navigation {
-	background-color: $color-primary;
+	position: fixed;
-	color: $color-white;
-	padding: 0;
 	margin: 0;
-	width: 100%;
-	font-size: 1rem;
-	padding: 10px 40px 10px 40px;
-
-	.content {
-		> .title {
-			padding-left: 15px;
-			font-size: 1rem;
-			display: inline-block;
-			vertical-align: middle;
-			color: $color-white;
-			text-decoration: none;
-		}
-		> .name {
-			padding-right: 15px;
-			font-size: 1rem;
-			display: inline-block;
-			vertical-align: middle;
-		}
-		> .login {
 	padding: 0;
-			font-size: 1rem;
+	width: 60px;
-			display: inline-block;
+	min-height: 100%;
-			> a {
+	height: 100%;
-				color: $color-white;
+	background-color: $color-primary;
-				text-decoration: none;
+	z-index: 999;
+	overflow-x: hidden;
+
+	 > .top-zone,
+	> .bottom-zone {
+		position: absolute;
+		padding: 0;
+		width: 100%;
+
+		> li {
+			cursor: pointer;
+			margin: 0;
+			padding: 20px 0;
+			width: 100%;
+			text-align: center;
 		}
-		}
+
-		> .search {
+		.selected {
-			padding-left: 15px;
+			// background-color: $color-link;
-			font-size: 1rem;
+
-			display: inline-block;
-			vertical-align: middle;
-			margin-top: 5px;
 			> a {
-				color: $color-white;
-				text-decoration: none;
 				> .material-icons {
-					font-size: 1.5rem;
+					opacity: 1;
+					color: $color-white;
 				}
 			}
 		}
 	}
 
-	.header-button {
+	> .top-zone {
-		display: inline-block;
+		top: 0;
+		// padding-top: 10px;
+	}
+
+	> .bottom-zone {
+		bottom: 0;
+		padding-bottom: 10px;
+	}
+
+	.filled-tool {
 		position: relative;
 		overflow: hidden;
 		width: 35px;
 		height: 35px;
 		line-height: 35px;
+		margin: 0 0 0 12px;
 		padding: 0;
 		border-radius: 50%;
-		transition: .3s;
+		transition: 0.3s;
 		cursor: pointer;
 		vertical-align: middle;
 		background-color: $color-white;
@@ -89,25 +83,20 @@
 			font-family: open_sansregular;
 		}
 	}
-}
 
-.zone-header {
+	.icon-tool {
-	background-color: $color-header;
+		position: relative;
-	padding: 30px 40px 30px 40px;
+		vertical-align: middle;
-	> .info {
+		text-align: center;
-		padding: 20px 0 20px 0;
+		font-size: 2rem;
-		> .title {
+		@include ease-in;
-			color: $color-off-black;
+		opacity: 0.5;
-			font-size: 1.2rem;
+		color: $color-white;
+
+		&:hover {
+			opacity: 1;
+			color: $color-white;
 		}
-		> .message {
-			color: $color-gray;
-			font-size: 1rem;
-			margin: 10px 0 0 5px;
-		}
-	}
-	> .actions {
-		padding: 20px 0 20px 0;
 	}
 }
 
@@ -115,20 +104,35 @@
 	background-color: $color-header;
 	height: 100%;
 	min-height: 100%;
-	padding: 40px 40px 0 40px;
+	padding: 30px 40px 0;
-	float: left;
+	position: fixed;
+	margin: 0;
+	z-index: 888;
+	margin-left: 60px;
+
+	.zone-sidebar-title {
+		color: $color-primary;
+		font-size: 1.3rem;
+		font-weight: bold;
+		margin-bottom: 10px;
+
+		 > a > .material-icons,
+		> .material-icons {
+			font-size: 1rem;
+			vertical-align: middle;
+		}
+	}
+
+	.zone-sidebar-info {
+		color: $color-gray;
+		font-size: 1rem;
+		font-weight: bold;
+		margin-bottom: 30px;
+	}
 }
 
 .zone-content {
-	padding: 30px 40px 30px 40px;
+	min-height: 500px; //ensure dropdowns render in viewport
-	float: left;
+	padding: 30px 40px 30px 100px;
-}
+	z-index: 777;
-
-.copyright {
-	margin-top: 50px;
-	text-align: center;
-	> a {
-		font-size: 0.8rem;
-		color: $color-gray;
-	}
 }

app/app/styles/view/page-documents.scss

@@ -1,39 +1,39 @@
 .space-tools {
 	.doc-tool {
 		position: absolute;
-		top: 150px;
+		top: 130px;
 		right: -18px;
-		z-index: 999;
+		z-index: 888;
 	}
 
 	.scroll-space-tool {
 		position: absolute;
-		top: 150px;
+		top: 130px;
 		right: -18px;
-		z-index: 888;
+		z-index: 999;
-		-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
+		-webkit-animation: fadein 1s;
-		-moz-animation: fadein 1s; /* Firefox < 16 */
+		-moz-animation: fadein 1s;
-		-ms-animation: fadein 1s; /* Internet Explorer */
+		-ms-animation: fadein 1s;
-		-o-animation: fadein 1s; /* Opera < 12.1 */
+		-o-animation: fadein 1s;
 		animation: fadein 1s;
 	}
 
 	.stuck-space-tool {
 		position: fixed !important;
-		top: 150px !important;
+		top: 130px !important;
 		right: 0;
 		left: 0;
-		-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
+		-webkit-animation: fadein 1s;
-		-moz-animation: fadein 1s; /* Firefox < 16 */
+		-moz-animation: fadein 1s;
-		-ms-animation: fadein 1s; /* Internet Explorer */
+		-ms-animation: fadein 1s;
-		-o-animation: fadein 1s; /* Opera < 12.1 */
+		-o-animation: fadein 1s;
 		animation: fadein 1s;
 	}
 }
 
 .folders-list {
 	> .section {
-		margin: 30px 0 10px 0;
+		margin: 30px 0 10px;
 
 		> .heading {
 			font-size: 0.9rem;
@@ -64,7 +64,7 @@
 				> .item {
 					list-style-type: none;
 					list-style: none;
-					margin: 0 0 5px 0;
+					margin: 0 0 5px;
 					padding: 0;
 				}
 			}
@@ -80,10 +80,10 @@
 .documents-list {
 	> .document {
 		margin: 0;
-		padding: 20px 20px 25px 20px;
+		padding: 20px 20px 25px;
 		width: 100%;
 		position: relative;
-		transition: .3s;
+		transition: 0.3s;
 		border-bottom: 1px solid $color-border;
 
 		&:hover {
@@ -149,7 +149,8 @@
 	}
 }
 
-.move-document-options, .start-document-options {
+.move-document-options,
+.start-document-options {
 	height: 150px;
 	overflow-y: auto;
 	margin: 0;
@@ -179,13 +180,6 @@
 }
 
 .start-document {
-	> .space-name {
-		color: $color-primary;
-		font-size: 1.3rem;
-		font-weight: bold;
-		margin-bottom: 30px;
-	}
-
 	> .import-document-button {
 		width: 100%;
 		padding: 20px;
@@ -204,7 +198,8 @@
 			color: $color-link;
 		}
 
-		> .dz-preview, .dz-processing {
+		 > .dz-preview,
+		.dz-processing {
 			display: none !important;
 		}
 	}
@@ -269,7 +264,8 @@
 					}
 
 					&:hover {
-						> .title, > .desc {
+						 > .title,
+						> .desc {
 							color: $color-link !important;
 						}
 					}

app/app/styles/view/page-search.scss

@@ -1,30 +1,14 @@
 .page-search {
-
-	> .zone-header {
-		background-color: $color-header;
-		padding: 0 40px 0 40px;
-	}
-
 	.input-control {
-		padding: 20px 0;
+		> input {
-		margin-bottom: 0;
-	}
-
-	.input-control input {
 			background-color: $color-header;
 		}
-
-	.input-control input:focus {
-
 	}
 
 	.search-results {
-		margin: 50px 0;
-		padding: 0 40px 0 40px;
-
 	    .heading {
 	        font-size: 1.2rem;
-	        color: $color-blue;
+	        color: $color-off-black;
 	    }
 
 	    > .list {

app/app/styles/widget/widget-dropdown.scss

@@ -3,7 +3,7 @@
 .drop-element {
     box-sizing: border-box;
     display: none;
-    z-index: 1;
+    z-index: 999;
 
     &:after, &:before {
         box-sizing: border-box;

app/app/styles/widget/widget-notification.scss

@@ -9,6 +9,7 @@
 	text-align: left;
 	border-radius: 2px;
 	@extend .z-depth-1;
+	z-index: 999;
 
 	> .message {
 		margin: 3px 0;

app/app/styles/widget/widget-sidebar-menu.scss

@@ -1,5 +1,5 @@
 .sidebar-menu {
-	margin: 30px 0 0 0;
+	margin: 0;
 
 	> .options {
 		padding: 0;
@@ -7,7 +7,7 @@
 
 		> .option {
 			margin-bottom: 15px;
-			font-size: 1rem;
+			font-size: 1.3rem;
 			list-style: none;
 			cursor: pointer;
 			@extend .no-select;

app/app/styles/widget/widget-tooltip.scss

@@ -1,24 +1,34 @@
 // https://github.com/HubSpot/tooltip
 
 .tooltip-element {
+	z-index: 999;
 	box-sizing: border-box;
-  &:after, &:before {
+
+	&:after,
+	&:before {
 		box-sizing: border-box;
 	}
+
 	* {
 		box-sizing: border-box;
-    &:after, &:before {
+
+		&:after,
+		&:before {
 			box-sizing: border-box;
 		}
 	}
 	position: absolute;
 	display: none;
+
 	&.tooltip-open {
 		display: block;
 	}
+
 	&.tooltip-theme-arrows {
+		z-index: 999;
 		max-width: 100%;
 		max-height: 100%;
+
 		.tooltip-content {
 			border-radius: 2px;
 			position: relative;
@@ -28,6 +38,7 @@
 			padding: 0.5em;
 			font-size: 0.8em;
 			line-height: 1.1em;
+
 			&:before {
 				content: "";
 				display: block;
@@ -39,8 +50,10 @@
 				border-style: solid;
 			}
 		}
+
 		&.tooltip-element-attached-bottom.tooltip-element-attached-center .tooltip-content {
 			margin-bottom: 8px;
+
 			&:before {
 				top: 100%;
 				left: 50%;
@@ -48,8 +61,10 @@
 				border-top-color: $color-tooltip;
 			}
 		}
+
 		&.tooltip-element-attached-top.tooltip-element-attached-center .tooltip-content {
 			margin-top: 8px;
+
 			&:before {
 				bottom: 100%;
 				left: 50%;
@@ -57,8 +72,10 @@
 				border-bottom-color: $color-tooltip;
 			}
 		}
+
 		&.tooltip-element-attached-right.tooltip-element-attached-middle .tooltip-content {
 			margin-right: 8px;
+
 			&:before {
 				left: 100%;
 				top: 50%;
@@ -66,8 +83,10 @@
 				border-left-color: $color-tooltip;
 			}
 		}
+
 		&.tooltip-element-attached-left.tooltip-element-attached-middle .tooltip-content {
 			margin-left: 8px;
+
 			&:before {
 				right: 100%;
 				top: 50%;
@@ -75,17 +94,21 @@
 				border-right-color: $color-tooltip;
 			}
 		}
+
 		&.tooltip-element-attached-top {
 			&.tooltip-element-attached-left.tooltip-target-attached-bottom .tooltip-content {
 				margin-top: 8px;
+
 				&:before {
 					bottom: 100%;
 					left: 8px;
 					border-bottom-color: $color-tooltip;
 				}
 			}
+
 			&.tooltip-element-attached-right.tooltip-target-attached-bottom .tooltip-content {
 				margin-top: 8px;
+
 				&:before {
 					bottom: 100%;
 					right: 8px;
@@ -93,17 +116,21 @@
 				}
 			}
 		}
+
 		&.tooltip-element-attached-bottom {
 			&.tooltip-element-attached-left.tooltip-target-attached-top .tooltip-content {
 				margin-bottom: 8px;
+
 				&:before {
 					top: 100%;
 					left: 8px;
 					border-top-color: $color-tooltip;
 				}
 			}
+
 			&.tooltip-element-attached-right.tooltip-target-attached-top .tooltip-content {
 				margin-bottom: 8px;
+
 				&:before {
 					top: 100%;
 					right: 8px;
@@ -111,17 +138,21 @@
 				}
 			}
 		}
+
 		&.tooltip-element-attached-top {
 			&.tooltip-element-attached-right.tooltip-target-attached-left .tooltip-content {
 				margin-right: 8px;
+
 				&:before {
 					top: 8px;
 					left: 100%;
 					border-left-color: $color-tooltip;
 				}
 			}
+
 			&.tooltip-element-attached-left.tooltip-target-attached-right .tooltip-content {
 				margin-left: 8px;
+
 				&:before {
 					top: 8px;
 					right: 100%;
@@ -129,17 +160,21 @@
 				}
 			}
 		}
+
 		&.tooltip-element-attached-bottom {
 			&.tooltip-element-attached-right.tooltip-target-attached-left .tooltip-content {
 				margin-right: 8px;
+
 				&:before {
 					bottom: 8px;
 					left: 100%;
 					border-left-color: $color-tooltip;
 				}
 			}
+
 			&.tooltip-element-attached-left.tooltip-target-attached-right .tooltip-content {
 				margin-left: 8px;
+
 				&:before {
 					bottom: 8px;
 					right: 100%;
@@ -148,14 +183,17 @@
 			}
 		}
 		pointer-events: none;
+
 		.tooltip-content {
 			padding: 0.5em 1em;
 		}
 	}
 	opacity: 0;
+
 	&.tooltip-open-transitionend {
 		display: block;
 	}
+
 	&.tooltip-after-open {
 		transition: opacity 600ms 400ms;
 		opacity: 1;

app/app/templates/components/back-to-home.hbs

@@ -1,6 +1,5 @@
 {{#link-to 'application'}}
-	<div class="regular-button button-white back-to-home-button">
+	<div class="zone-sidebar-title">
-		<i class="material-icons">arrow_back</i>
+		<i class="material-icons">arrow_back</i>&nbsp;HOME
-		<div class="name back-to-home-name">home</div>
 	</div>
 {{/link-to}}

app/app/templates/components/back-to-space.hbs

@@ -1,6 +1,5 @@
 {{#link-to 'folders.folder' folder.id folder.slug}}
-	<div class="regular-button button-white space-button">
+	<div class="zone-sidebar-title">
-		<i class="material-icons">arrow_back</i>
+		<i class="material-icons">arrow_back</i>&nbsp;{{folder.name}}
-		<div class="name space-name">{{folder.name}}</div>
 	</div>
 {{/link-to}}

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

@@ -1,5 +1,6 @@
 <div class="space-tools">
 	{{#if showingDocument}}
+		{{layout/sidebar-intro title=folder.name message='Import files or start with a template'}}
 		<div {{action 'showList'}} id="cancel-tool" class="round-button round-button-mono button-white doc-tool">
 			<i class="material-icons color-gray">close</i>
 		</div>
@@ -27,7 +28,7 @@
 
 <div class="folders-list">
 	{{#if showingList}}
-
+		{{layout/sidebar-intro title=appMeta.title message=appMeta.message}}
 		{{#if session.isEditor}}
 			<div id="add-space-button" class="regular-button button-white">
 				<i class="material-icons">add</i>
@@ -89,7 +90,3 @@
 		{{/if}}
 	{{/if}}
 </div>
-
-<div class="copyright hidden-xs hidden-sm">
-	<a href="https://documize.com?ref=app-footer" target="_blank">Copyright&nbsp;&copy;&nbsp;2016 Documize Inc.</a>
-</div>

app/app/templates/components/folder/start-document.hbs

@@ -1,6 +1,4 @@
 <div class="start-document">
-	<p class="space-name">{{folder.name}}</p>
-
 	<div id="import-document-button" class="import-document-button">
 		Drag-drop .doc, .docx, .txt, .md, .markdown<br/>
 		or click to select files

app/app/templates/components/general-settings.hbs

@@ -1,8 +1,4 @@
 <form>
-    <div class="input-control">
-        <label>General Settings</label>
-        <div class="tip">Tell people about this Documize instance</div>
-    </div>
     <div>
         <div class="input-control">
             <label>Title</label>

app/app/templates/components/layout/sidebar-intro.hbs

@@ -0,0 +1,7 @@
+<div class="zone-sidebar-title">
+	{{title}}
+	{{yield}}
+</div>
+<div class="zone-sidebar-info">
+	{{message}}
+</div>

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

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

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

@@ -1,38 +1,61 @@
 <div id="zone-navigation" class="zone-navigation">
-    <div class="pull-left content">
+		<ul class="top-zone">
 	        {{#if session.authenticated}}
-            <div id="accounts-button" class="header-button">
+				<li>
+					<div id="accounts-button" class="filled-tool">
 		                <i class="material-icons">apps</i>
 		            </div>
+				</li>
 	        {{else}}
+				<li>
 		            {{#link-to 'application' class='title'}}
-                <div class="header-button" title=appMeta.title>
+		                <div class="filled-tool" title={{appMeta.title}}>
 		                    <i class="material-icons">apps</i>
 		                </div>
 		            {{/link-to}}
+				</li>
 	        {{/if}}
-        {{#link-to 'application' class='title'}}
+			<li class="{{if view.folder 'selected'}}">
-            {{appMeta.title}}
+	            {{#link-to 'folders'}}
+	                <i class="material-icons icon-tool">home</i>
 	            {{/link-to}}
-    </div>
+			</li>
+			<li class="{{if view.search 'selected'}}">
+	            {{#link-to 'search'}}
+	                <i class="material-icons icon-tool">search</i>
+	            {{/link-to}}
+			</li>
+	    </ul>
 
-    <div class="pull-right hidden-xs hidden-sm content">
+	    <ul class="bottom-zone">
+			{{#if session.session.content.authenticated.user.admin}}
+				<li id="workspace-settings" class="{{if view.settings 'selected'}}" data-tooltip="Settings" data-tooltip-position="right center">
+		            {{#link-to 'customize.general'}}
+		                <i class="material-icons icon-tool">tune</i>
+		            {{/link-to}}
+				</li>
+			{{/if}}
 	        {{#if session.authenticated}}
-            <div class="name">{{session.user.fullname}}</div>
+				<li id="workspace-logout" data-tooltip="Logout" data-tooltip-position="right center">
-            <div id="user-button" class="header-button">
+		            {{#link-to 'auth.logout'}}
+		                <i class="material-icons icon-tool">exit_to_app</i>
+		            {{/link-to}}
+				</li>
+				<li class="{{if view.profile 'selected'}}">
+					{{#link-to 'profile'}}
+						<div class="filled-tool">
 							<i class="initials">{{session.user.initials}}</i>
 						</div>
-        {{else}}
-            <div class="login">
-                {{#link-to 'auth.login'}}Login{{/link-to}}
-            </div>
-        {{/if}}
-        <div class="search">
-            {{#link-to 'search'}}
-                <i class="material-icons">search</i>
 		            {{/link-to}}
-        </div>
+				</li>
-    </div>
+	        {{else}}
+				<li id="workspace-login" data-tooltip="Login" data-tooltip-position="right center">
+	                {{#link-to 'auth.login'}}
+						<i class="material-icons icon-tool">lock_open</i>
+					{{/link-to}}
+		        </li>
+	        {{/if}}
+	    </ul>
 
     {{#if session.authenticated}}
         {{#dropdown-menu target="accounts-button" position="bottom left" open="click" }}
@@ -44,23 +67,5 @@
                 <li class="item"><a href="https://documize.com/welcome">Add team...</a></li>
             </ul>
         {{/dropdown-menu}}
-
-        {{#dropdown-menu target="user-button" position="bottom right" open="click" }}
-            <ul class="menu">
-                <li class="item">
-                    {{#link-to 'profile'}}Profile{{/link-to}}
-                </li>
-                {{#if session.session.content.authenticated.user.admin}}
-                    <li class="item">
-                        {{#link-to 'customize.general'}}Settings{{/link-to}}
-                    </li>
     {{/if}}
-                <li class="divider"></li>
-                <li class="item">
-                    {{#link-to 'auth.logout'}}Logout{{/link-to}}
-                </li>
-            </ul>
-        {{/dropdown-menu}}
-    {{/if}}
-	<div class="clearfix"></div>
 </div>

app/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "documize",
-  "version": "0.28.2",
+	"version": "0.29.0",
 	"description": "The Documentation IDE",
 	"private": true,
 	"directories": {
@@ -45,8 +45,6 @@
 		"loader.js": "^4.0.10"
 	},
 	"ember-addon": {
-    "paths": [
+		"paths": ["lib/intercom"]
-      "lib/intercom"
-    ]
 	}
 }

core/product.go

@@ -26,8 +26,8 @@ type ProdInfo struct {
 // Product returns product edition details
 func Product() (p ProdInfo) {
 	p.Major = "0"
-	p.Minor = "28"
+	p.Minor = "29"
-	p.Patch = "2"
+	p.Patch = "0"
 	p.Version = fmt.Sprintf("%s.%s.%s", p.Major, p.Minor, p.Patch)
 	p.Edition = "Community"
 	p.Title = fmt.Sprintf("%s Edition", p.Edition)