Merge pull request #87 from documize/space-ux

All new space UX

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

@@ -12,17 +12,40 @@
 import Ember from 'ember';
 
 export default Ember.Component.extend({
+    folderService: Ember.inject.service('folder'),
     selectedDocuments: [],
-
+	moveTarget: null,
 	emptyState: Ember.computed('documents', function() {
         return this.get('documents.length') === 0;
     }),
 
     didReceiveAttrs() {
-        this.set('selectedDocuments', []);
 		this.audit.record('viewed-space');
+        this.set('selectedDocuments', []);
+        this.set('canCreate', this.get('folderService').get('canEditCurrentFolder'));
+        this.set('deleteTargets', this.get('folders').rejectBy('id', this.get('folder.id')));
     },
 
+	didInsertElement() {
+		this._super(...arguments);
+		
+		this.setupAddWizard();
+	},
+
+    setupAddWizard() {
+		Ember.run.schedule('afterRender', () => {
+			$('.start-document:not(.start-document-empty-state)').off('.hoverIntent');
+
+			$('.start-document:not(.start-document-empty-state)').hoverIntent({interval: 100, over: function() {
+				// in
+				$(this).find('.start-button').velocity("transition.slideDownIn", {duration: 300});
+			}, out: function() {
+				// out
+				$(this).find('.start-button').velocity("transition.slideUpOut", {duration: 300});
+			} });
+		});		
+	},
+
     actions: {
         selectDocument(documentId) {
             let doc = this.get('documents').findBy('id', documentId);
@@ -41,6 +64,39 @@ export default Ember.Component.extend({
 
             this.set('selectedDocuments', list);
             this.get('onDocumentsChecked')(list);
-        }
+        },
+
+		onDelete() {
+			this.get("onDeleteSpace")();
+		},
+
+        onImport() {
+            this.get('onImport')();
+        },
+
+		onShowDocumentWizard(docId) {
+			if ($("#new-document-wizard").is(':visible') && this.get('docId') === docId) {
+				this.send('onHideDocumentWizard');
+				return;
+			}
+
+			this.set('docId', docId);
+
+			if (docId === '') {
+				$("#new-document-wizard").insertAfter('#wizard-placeholder');
+			} else {
+				$("#new-document-wizard").insertAfter(`#document-${docId}`);
+			}
+
+			$("#new-document-wizard").velocity("transition.slideDownIn", { duration: 300, complete:
+				function() {
+					$("#new-document-name").focus();
+				}});
+		},
+
+		onHideDocumentWizard() {
+			$("#new-document-wizard").insertAfter('#wizard-placeholder');
+			$("#new-document-wizard").velocity("transition.slideUpOut", { duration: 300 });
+		}
     }
 });

app/app/components/folder/folder-heading.js

@@ -0,0 +1,60 @@
+// 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, {
+	folderService: Ember.inject.service('folder'),
+	folderName: '',
+	hasNameError: computed.empty('folderName'),
+	editMode: false,
+    isEditor: false,
+
+	keyUp(e) {
+		if (e.keyCode === 27) { // escape key
+			this.send('onCancel');
+		}
+	},
+
+	actions: {
+		toggleEdit() {
+			this.set('folderName', this.get('folder.name'));
+			this.set('editMode', true);
+
+			Ember.run.schedule('afterRender', () => {
+				$('#folder-name').select();
+			});
+		},
+
+		onSave() {
+			if (this.get('hasNameError')) {
+				return;
+			}
+
+			this.set('folder.name', this.get('folderName'));
+
+			this.get('folderService').save(this.get('folder'));
+			this.showNotification('Saved');
+
+			this.set('editMode', false);
+		},
+
+		onCancel() {
+			this.set('editMode', false);
+		}
+	}
+});

app/app/components/folder/folder-toolbar.js

@@ -28,12 +28,6 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, AuthMixin, {
 	isFolderOwner: computed.equal('folder.userId', 'session.user.id'),
 	moveFolderId: "",
 	drop: null,
-	pinned: Ember.inject.service(),
-	pinState : {
-		isPinned: false,
-		pinId: '',
-		newName: '',
-	},
 
 	didReceiveAttrs() {
 		this.set('isFolderOwner', this.get('folder.userId') === this.get("session.user.id"));
@@ -46,11 +40,6 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, AuthMixin, {
 		});
 
 		this.set('movedFolderOptions', targets);
-
-		let folder = this.get('folder');
-		this.set('pinState.pinId', this.get('pinned').isSpacePinned(folder.get('id')));
-		this.set('pinState.isPinned', this.get('pinState.pinId') !== '');
-		this.set('pinState.newName', folder.get('name').substring(0,3).toUpperCase());
 	},
 
 	didRender() {
@@ -97,39 +86,6 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, AuthMixin, {
 			this.attrs.onMoveDocument(this.get('moveFolderId'));
 			this.set("moveFolderId", "");
 
-			return true;
-		},
-
-		unpin() {
-			this.audit.record('unpinned-space');
-
-			this.get('pinned').unpinItem(this.get('pinState.pinId')).then(() => {
-				this.set('pinState.isPinned', false);
-				this.set('pinState.pinId', '');
-				this.eventBus.publish('pinChange');
-			});
-		},
-
-		pin() {
-			let pin = {
-				pin: this.get('pinState.newName'),
-				documentId: '',
-				folderId: this.get('folder.id')
-			};
-
-			if (is.empty(pin.pin)) {
-				$("#pin-space-name").addClass("error").focus();
-				return false;
-			}
-
-			this.audit.record('pinned-space');
-
-			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;
 		}
 	}

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

@@ -1,193 +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 Ember from 'ember';
-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: [],
-	savedTemplates: [],
-	hasPublicFolders: false,
-	hasProtectedFolders: false,
-	hasPrivateFolders: false,
-	newFolder: "",
-	showScrollTool: false,
-	showingDocument: false,
-	showingList: true,
-
-	init() {
-		this._super(...arguments);
-
-		if (this.get('noFolder')) {
-			return;
-		}
-
-		let _this = this;
-		this.get('templateService').getSavedTemplates().then(function(saved) {
-            let emptyTemplate = {
-                id: "0",
-                title: "Empty",
-				description: "An empty canvas for your words",
-				img: "insert_drive_file",
-				layout: "doc",
-				locked: true
-            };
-
-			saved.forEach(function(t) {
-				Ember.set(t, 'img', 'content_copy');
-			});
-
-            saved.unshiftObject(emptyTemplate);
-            _this.set('savedTemplates', saved);
-        });
-	},
-
-	didRender() {
-		if (this.get('noFolder')) {
-			return;
-		}
-
-		if (this.get('folderService').get('canEditCurrentFolder')) {
-			this.addTooltip(document.getElementById("start-document-button"));
-		}
-	},
-
-	didInsertElement() {
-		if (this.get('noFolder')) {
-			return;
-		}
-
-		this.eventBus.subscribe('resized', this, 'positionTool');
-		this.eventBus.subscribe('scrolled', this, 'positionTool');
-	},
-
-	willDestroyElement() {
-		this.eventBus.unsubscribe('resized');
-		this.eventBus.unsubscribe('scrolled');
-		this.destroyTooltips();
-	},
-
-	didReceiveAttrs() {
-		let folders = this.get('folders');
-
-		// clear out state
-		this.set('publicFolders', []);
-		this.set('protectedFolders', []);
-		this.set('privateFolders', []);
-
-		_.each(folders, folder => {
-			if (folder.get('folderType') === constants.FolderType.Public) {
-				let folders = this.get('publicFolders');
-				folders.pushObject(folder);
-				this.set('publicFolders', folders);
-			}
-			if (folder.get('folderType') === constants.FolderType.Private) {
-				let folders = this.get('privateFolders');
-				folders.pushObject(folder);
-				this.set('privateFolders', folders);
-			}
-			if (folder.get('folderType') === constants.FolderType.Protected) {
-				let folders = this.get('protectedFolders');
-				folders.pushObject(folder);
-				this.set('protectedFolders', folders);
-			}
-		});
-
-		this.set('hasPublicFolders', this.get('publicFolders.length') > 0);
-		this.set('hasPrivateFolders', this.get('privateFolders.length') > 0);
-		this.set('hasProtectedFolders', this.get('protectedFolders.length') > 0);
-	},
-
-	positionTool() {
-		if (this.get('isDestroyed') || this.get('isDestroying')) {
-			return;
-		}
-
-		let s = $(".scroll-space-tool");
-		let windowpos = $(window).scrollTop();
-
-		if (windowpos >= 300) {
-			this.set('showScrollTool', true);
-			s.addClass("stuck-space-tool");
-			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");
-		}
-	},
-
-	navigateToDocument(document) {
-        this.attrs.showDocument(this.get('folder'), document);
-    },
-
-	actions: {
-		onImport() {
-			this.attrs.onImport();
-		},
-
-		scrollTop() {
-			this.set('showScrollTool', false);
-
-			$("html,body").animate({
-				scrollTop: 0
-			}, 500, "linear");
-		},
-
-		addFolder() {
-			var folderName = this.get('newFolder');
-
-			if (is.empty(folderName)) {
-				$("#new-folder-name").addClass("error").focus();
-				return false;
-			}
-
-			this.attrs.onFolderAdd(folderName);
-
-			this.set('newFolder', "");
-			return true;
-		},
-
-		showDocument() {
-			this.set('showingDocument', true);
-			this.set('showingList', false);
-		},
-
-		showList() {
-			this.set('showingDocument', false);
-			this.set('showingList', true);
-		},
-
-		onEditTemplate(template) {
-            this.navigateToDocument(template);
-        },
-
-        onDocumentTemplate(id /*, title, type*/ ) {
-            let self = this;
-
-            this.send("showNotification", "Creating");
-
-            this.get('templateService').importSavedTemplate(this.folder.get('id'), id).then(function(document) {
-                self.navigateToDocument(document);
-            });
-        }
-	}
-});

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

@@ -0,0 +1,73 @@
+// 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 constants from '../../utils/constants';
+import TooltipMixin from '../../mixins/tooltip';
+import NotifierMixin from '../../mixins/notifier';
+import AuthMixin from '../../mixins/auth';
+
+export default Ember.Component.extend(TooltipMixin, NotifierMixin, AuthMixin, {
+	publicFolders: [],
+	protectedFolders: [],
+	privateFolders: [],
+	hasPublicFolders: false,
+	hasProtectedFolders: false,
+	hasPrivateFolders: false,
+	newFolder: '',
+
+	didReceiveAttrs() {
+		let folders = this.get('folders');
+
+		// clear out state
+		this.set('publicFolders', []);
+		this.set('protectedFolders', []);
+		this.set('privateFolders', []);
+
+		_.each(folders, folder => {
+			if (folder.get('folderType') === constants.FolderType.Public) {
+				let folders = this.get('publicFolders');
+				folders.pushObject(folder);
+				this.set('publicFolders', folders);
+			}
+			if (folder.get('folderType') === constants.FolderType.Private) {
+				let folders = this.get('privateFolders');
+				folders.pushObject(folder);
+				this.set('privateFolders', folders);
+			}
+			if (folder.get('folderType') === constants.FolderType.Protected) {
+				let folders = this.get('protectedFolders');
+				folders.pushObject(folder);
+				this.set('protectedFolders', folders);
+			}
+		});
+
+		this.set('hasPublicFolders', this.get('publicFolders.length') > 0);
+		this.set('hasPrivateFolders', this.get('privateFolders.length') > 0);
+		this.set('hasProtectedFolders', this.get('protectedFolders.length') > 0);
+	},
+
+	actions: {
+		addFolder() {
+			var folderName = this.get('newFolder');
+
+			if (is.empty(folderName)) {
+				$("#new-folder-name").addClass("error").focus();
+				return false;
+			}
+
+			this.attrs.onFolderAdd(folderName);
+
+			this.set('newFolder', '');
+			return true;
+		}
+	}
+});

app/app/components/folder/sidebar-permissions.js

@@ -16,38 +16,15 @@ const {
 	inject: { service }
 } = Ember;
 
-export default Ember.Route.extend(NotifierMixin, {
+export default Ember.Component.extend(NotifierMixin, {
 	folderService: service('folder'),
 	userService: service('user'),
-	folder: {},
+	appMeta: service(),
-	tab: "",
-	localStorage: service(),
 	store: service(),
 
-	beforeModel: function (transition) {
+	didReceiveAttrs() {
-		this.tab = is.not.undefined(transition.queryParams.tab) ? transition.queryParams.tab : "tabGeneral";
-	},
-
-	model(params) {
-		return this.get('folderService').getFolder(params.folder_id);
-	},
-
-	setupController(controller, model) {
-		this.folder = model;
-		controller.set('model', model);
-
-		controller.set('tabGeneral', false);
-		controller.set('tabShare', false);
-		controller.set('tabPermissions', false);
-		controller.set('tabDelete', false);
-		controller.set(this.get('tab'), true);
-
-		this.get('folderService').getAll().then((folders) => {
-			controller.set('folders', folders.rejectBy('id', model.get('id')));
-		});
-
 		this.get('userService').getAll().then((users) => {
-			controller.set('users', users);
+			this.set('users', users);
 
 			var folderPermissions = [];
 
@@ -57,8 +34,8 @@ export default Ember.Route.extend(NotifierMixin, {
 				let u = {
 					userId: user.get('id'),
 					fullname: user.get('fullname'),
-					orgId: model.get('orgId'),
+					orgId: this.get('folder.orgId'),
-					folderId: model.get('id'),
+					folderId: this.get('folder.id'),
 					canEdit: false,
 					canView: false,
 					canViewPrevious: false
@@ -72,15 +49,15 @@ export default Ember.Route.extend(NotifierMixin, {
 			var u = {
 				userId: "",
 				fullname: " Everyone",
-				orgId: model.get('orgId'),
+				orgId: this.get('folder.orgId'),
-				folderId: model.get('id'),
+				folderId: this.get('folder.id'),
 				canEdit: false,
 				canView: false
 			};
 
 			folderPermissions.pushObject(u);
 
-			this.get('folderService').getPermissions(model.id).then((permissions) => {
+			this.get('folderService').getPermissions(this.get('folder.id')).then((permissions) => {
 				permissions.forEach((permission, index) => { // eslint-disable-line no-unused-vars
 					var folderPermission = folderPermissions.findBy('userId', permission.get('userId'));
 					if (is.not.undefined(folderPermission)) {
@@ -99,38 +76,26 @@ export default Ember.Route.extend(NotifierMixin, {
 					return this.get('store').push(data);
 				});
 
-				controller.set('permissions', folderPermissions.sortBy('fullname'));
+				this.set('permissions', folderPermissions.sortBy('fullname'));
 			});
-		});
+		});		
+	},
+
+	getDefaultInvitationMessage() {
+		return "Hey there, I am sharing the " + this.get('folder.name') + " (in " + this.get("appMeta.title") + ") with you so we can both access the same documents.";
 	},
 
 	actions: {
-		onRename: function (folder) {
+		setPermissions() {
-			let self = this;
+			let message = this.getDefaultInvitationMessage();
-			this.get('folderService').save(folder).then(function () {
+			let folder = this.get('folder');
-				self.showNotification("Renamed");
+			let permissions = this.get('permissions');
+	
+			this.get('permissions').forEach((permission, index) => { // eslint-disable-line no-unused-vars
+				Ember.set(permission, 'canView', $("#canView-" + permission.userId).prop('checked'));
+				Ember.set(permission, 'canEdit', $("#canEdit-" + permission.userId).prop('checked'));
 			});
-		},
 
-		onRemove(moveId) {
-			this.get('folderService').remove(this.folder.get('id'), moveId).then(() => { /* jshint ignore:line */
-				this.showNotification("Deleted");
-				this.get('localStorage').clearSessionItem('folder');
-
-				this.get('folderService').getFolder(moveId).then((folder) => {
-					this.get('folderService').setCurrentFolder(folder);
-					this.transitionTo('folder', folder.get('id'), folder.get('slug'));
-				});
-			});
-		},
-
-		onShare: function(invitation) {
-			this.get('folderService').share(this.folder.get('id'), invitation).then(() => {
-				this.showNotification("Shared");
-			});
-		},
-
-		onPermission: function (folder, message, permissions) {
 			var data = permissions.map((obj) => {
 				let permission = {
 					'orgId': obj.orgId,
@@ -142,6 +107,7 @@ export default Ember.Route.extend(NotifierMixin, {
 
 				return permission;
 			});
+
 			var payload = { Message: message, Roles: data };
 
 			this.get('folderService').savePermissions(folder.get('id'), payload).then(() => {

app/app/components/folder/sidebar-share.js

@@ -10,58 +10,30 @@
 // https://documize.com
 
 import Ember from 'ember';
-import AuthMixin from '../../mixins/auth';
+import NotifierMixin from '../../mixins/notifier';
 
 const {
 	inject: { service }
 } = Ember;
 
-export default Ember.Component.extend(AuthMixin, {
+export default Ember.Component.extend(NotifierMixin, {
 	folderService: service('folder'),
 	appMeta: service(),
-	users: [],
+	inviteEmail: '',
-	folders: [],
+	inviteMessage: '',
-	folder: {},
-	moveTarget: null,
-	inviteEmail: "",
-	inviteMessage: "",
-	roleMessage: "",
-	permissions: {},
 
 	getDefaultInvitationMessage() {
 		return "Hey there, I am sharing the " + this.folder.get('name') + " (in " + this.get("appMeta.title") + ") with you so we can both access the same documents.";
 	},
 
 	willRender() {
-		if (this.inviteMessage.length === 0) {
+		if (this.get('inviteMessage').length === 0) {
 			this.set('inviteMessage', this.getDefaultInvitationMessage());
 		}
-
-		if (this.roleMessage.length === 0) {
-			this.set('roleMessage', this.getDefaultInvitationMessage());
-		}
 	},
 
 	actions: {
-		rename() {
+		onShare() {
-			if (is.empty(this.folder.get('name'))) {
-				$("#folderName").addClass("error").focus();
-				return;
-			}
-
-			this.sendAction("onRename", this.folder);
-		},
-
-		remove() {
-			if (is.null(this.get('moveTarget'))) {
-				$("#delete-target > select").addClass("error").focus();
-				return;
-			}
-
-			this.sendAction("onRemove", this.get('moveTarget').get('id'));
-		},
-
-		share() {
 			var email = this.get('inviteEmail').trim().replace(/ /g, '');
 			var message = this.get('inviteMessage').trim();
 
@@ -70,7 +42,7 @@ export default Ember.Component.extend(AuthMixin, {
 			}
 
 			if (email.length === 0) {
-				$("#inviteEmail").addClass("error").focus();
+				$('#inviteEmail').addClass('error').focus();
 				return;
 			}
 
@@ -92,24 +64,11 @@ export default Ember.Component.extend(AuthMixin, {
 				result.Recipients.push(email);
 			}
 
-			this.set('inviteEmail', "");
+			this.set('inviteEmail', '');
 
-			this.sendAction("onShare", result);
+			this.get('folderService').share(this.folder.get('id'), result).then(() => {
-		},
+				this.showNotification('Shared');
-
-		setPermissions() {
-			var message = this.get('roleMessage').trim();
-
-			if (message.length === 0) {
-				message = this.getDefaultInvitationMessage();
-			}
-
-			this.get('permissions').forEach((permission, index) => { // eslint-disable-line no-unused-vars
-				Ember.set(permission, 'canView', $("#canView-" + permission.userId).prop('checked'));
-				Ember.set(permission, 'canEdit', $("#canEdit-" + permission.userId).prop('checked'));
 			});
-
-			this.sendAction("onPermission", this.get('folder'), message, this.get('permissions'));
 		}
 	}
 });

app/app/components/folder/sidebar-zone.js

@@ -0,0 +1,105 @@
+// 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 TooltipMixin from '../../mixins/tooltip';
+import NotifierMixin from '../../mixins/notifier';
+import AuthMixin from '../../mixins/auth';
+
+const {
+	inject: { service }
+} = Ember;
+
+export default Ember.Component.extend(TooltipMixin, NotifierMixin, AuthMixin, {
+	folderService: service('folder'),
+	templateService: service('template'),
+	appMeta: service(),
+	pinned: service(),
+	publicFolders: [],
+	protectedFolders: [],
+	privateFolders: [],
+	hasPublicFolders: false,
+	hasProtectedFolders: false,
+	hasPrivateFolders: false,
+	newFolder: "",
+	menuOpen: false,
+	pinState : {
+		isPinned: false,
+		pinId: '',
+		newName: '',
+	},
+	tab: '',
+
+	init() {
+		this._super(...arguments);
+
+		if (is.empty(this.get('tab')) || is.undefined(this.get('tab'))) {
+			this.set('tab', 'index');
+		}
+	},
+
+	didReceiveAttrs() {
+		if (!this.get('noFolder')) {
+			let folder = this.get('folder');
+			this.set('pinState.pinId', this.get('pinned').isSpacePinned(folder.get('id')));
+			this.set('pinState.isPinned', this.get('pinState.pinId') !== '');
+			this.set('pinState.newName', folder.get('name').substring(0,3).toUpperCase());		
+		}
+	},
+
+	actions: {
+		onFolderAdd(folderName) {
+			this.attrs.onFolderAdd(folderName);
+			return true;
+		},
+
+		onChangeTab(tab) {
+			this.set('tab', tab);
+		},
+
+		onMenuOpen() {
+			this.set('menuOpen', !this.get('menuOpen'));
+		},
+
+		onUnpin() {
+			this.audit.record('unpinned-space');
+
+			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: '',
+				folderId: this.get('folder.id')
+			};
+
+			if (is.empty(pin.pin)) {
+				$('#pin-space-name').addClass('error').focus();
+				return false;
+			}
+
+			this.audit.record('pinned-space');
+
+			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;
+		},
+	}
+});

app/app/components/folder/start-document.js

@@ -12,13 +12,37 @@
 import Ember from 'ember';
 import NotifierMixin from '../../mixins/notifier';
 
+
+const {
+	computed,
+} = Ember;
 export default Ember.Component.extend(NotifierMixin, {
 	localStorage: Ember.inject.service(),
 	appMeta: Ember.inject.service(),
-
+	templateService: Ember.inject.service('template'),
 	canEditTemplate: "",
 	importedDocuments: [],
+	savedTemplates: [],
 	drop: null,
+	newDocumentName: 'New Document',
+	newDocumentNameMissing: computed.empty('newDocumentName'),
+
+	init() {
+		this._super(...arguments);
+
+		this.get('templateService').getSavedTemplates().then((saved) => {
+            let emptyTemplate = {
+                id: "0",
+                title: "Empty",
+				description: "An empty canvas for your words",
+				layout: "doc",
+				locked: true
+            };
+
+            saved.unshiftObject(emptyTemplate);
+            this.set('savedTemplates', saved);
+        });
+	},
 
 	didInsertElement() {
 		this.setupImport();
@@ -84,8 +108,31 @@ export default Ember.Component.extend(NotifierMixin, {
 	},
 
 	actions: {
+		onHideDocumentWizard() {
+			this.get('onHideDocumentWizard')();
+		},
+
+		editTemplate(template) {
+			this.audit.record('edited-saved-template');
+			this.get('router').transitionTo('document', this.get('folder.id'), this.get('folder.slug'), template.get('id'), template.get('slug'));
+
+			return true;
+		},
+
+		startDocument(template) {
+			this.audit.record('used-saved-template');
+            this.send("showNotification", "Creating");
+
+            this.get('templateService').importSavedTemplate(this.folder.get('id'), template.id).then((document) => {
+				this.get('router').transitionTo('document', this.get('folder.id'), this.get('folder.slug'), document.get('id'), document.get('slug'));
+            });
+
+			return true;
+		},
+
 		onDocumentImporting(filename) {
 			this.send("showNotification", `Importing ${filename}`);
+			this.get('onHideDocumentWizard')();
 
 			let documents = this.get('importedDocuments');
 			documents.push(filename);
@@ -99,25 +146,12 @@ export default Ember.Component.extend(NotifierMixin, {
 			documents.pop(filename);
 			this.set('importedDocuments', documents);
 
-			this.attrs.onImport();
+			this.get('onImport')();
 
 			if (documents.length === 0) {
 				// this.get('showDocument')(this.get('folder'), document);
 			}
 		},
-
-		editTemplate(template) {
-			this.audit.record('edited-saved-template');
-			this.attrs.onEditTemplate(template);
-
-			return true;
-		},
-
-		startDocument(template) {
-			this.audit.record('used-saved-template');
-			this.attrs.onDocumentTemplate(template.id, template.title, "private");
-
-			return true;
-		}
 	}
 });
+

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

@@ -1,21 +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 Ember from 'ember';
-
-export default Ember.Component.extend({
-	title: "",
-	message: "",
-
-	hasMessage: Ember.computed('message', function() {
-		return this.get('message').length !== 0;
-	})
-});

app/app/pods/customize/folders/template.hbs

@@ -1,43 +1,41 @@
 <div class="global-folder-settings">
-	<div class="form-bordered">
+    <div class="form-header">
-        <div class="form-header">
+        <div class="title">{{folders.length}} shared {{label}}</div>
-            <div class="title">{{folders.length}} shared {{label}}</div>
+        <div class="tip">View and change shared space ownership</div>
-            <div class="tip">View and change shared space ownership</div>
+    </div>
-        </div>
+    <div class="input-control">
-        <div class="input-control">
+        <table class="basic-table">
-            <table class="basic-table">
+            <thead>
-                <thead>
+                <tr>
+                    <th class="bordered">Space</th>
+                    <th class="bordered">Participants</th>
+                </tr>
+            </thead>
+            <tbody>
+                {{#each folders as |folder|}}
                     <tr>
-                        <th class="bordered">Space</th>
+                        <td class="bordered">
-                        <th class="bordered">Participants</th>
+                            {{#link-to 'folder' folder.id folder.slug class="alt"}}{{folder.name}}{{/link-to}}
-                    </tr>
+                        </td>
-                </thead>
+                        <td class="bordered">
-                <tbody>
+                            {{#each folder.sharedWith as |person|}}
-                    {{#each folders as |folder|}}
+                                {{#if person.isEveryone}}
-                        <tr>
+                                    Everyone
-                            <td class="bordered">
+                                {{else}}
-                                {{#link-to 'folder' folder.id folder.slug class="alt"}}{{folder.name}}{{/link-to}}
-                            </td>
-                            <td class="bordered">
-                                {{#each folder.sharedWith as |person|}}
-                                    {{#if person.isEveryone}}
-                                        Everyone
-                                    {{else}}
 
-                                        {{#if person.isOwner}}
+                                    {{#if person.isOwner}}
-                                            <span class="bold">{{person.firstname}} {{person.lastname}} (owner)</span>
+                                        <span class="bold">{{person.firstname}} {{person.lastname}} (owner)</span>
-                                        {{else}}
+                                    {{else}}
-                                            {{person.firstname}} {{person.lastname}}
+                                        {{person.firstname}} {{person.lastname}}
-                                            <a class="action-link" {{action "changeOwner" folder.id person.userId}}>make owner</a>
+                                        <a class="action-link" {{action "changeOwner" folder.id person.userId}}>make owner</a>
-                                        {{/if}}
                                     {{/if}}
-                                    <br/>
+                                {{/if}}
-                                {{/each}}
+                                <br/>
-                            </td>
+                            {{/each}}
-                        </tr>
+                        </td>
-                    {{/each}}
+                    </tr>
-                </tbody>
+                {{/each}}
-            </table>
+            </tbody>
-        </div>
+        </table>
-	</div>
+    </div>
 </div>

app/app/pods/customize/template.hbs

@@ -1,20 +1,28 @@
 {{layout/zone-navigation}}
-
+{{#layout/zone-container}}
-{{#layout/zone-sidebar}}
+	{{#layout/zone-sidebar}}
-	{{layout/sidebar-intro title='Settings' message='Documize application settings'}}
+		<div class="sidebar-toolbar">
-	<div class="sidebar-menu">
+		</div>
-		<ul class="options">
+		<div class="sidebar-common">
-			{{#link-to 'customize.general' activeClass='selected' class="option" tagName="li"}}General{{/link-to}}
+			{{layout/sidebar-intro title='Settings' message='Documize application settings'}}
-			{{#link-to 'customize.folders' activeClass='selected' class="option" tagName="li"}}Spaces{{/link-to}}
+		</div>
-			{{#link-to 'customize.users' activeClass='selected' class="option" tagName="li"}}Users{{/link-to}}
+		<div class="sidebar-wrapper">
-			{{#if session.isGlobalAdmin}}
+			<div class="sidebar-menu">
-				{{#link-to 'customize.global' activeClass='selected' class="option" tagName="li"}}Global{{/link-to}}
+				<ul class="options">
-				{{#link-to 'customize.auth' activeClass='selected' class="option" tagName="li"}}Authentication{{/link-to}}
+					{{#link-to 'customize.general' activeClass='selected' class="option" tagName="li"}}General{{/link-to}}
-			{{/if}}
+					{{#link-to 'customize.folders' activeClass='selected' class="option" tagName="li"}}Spaces{{/link-to}}
-		</ul>
+					{{#link-to 'customize.users' activeClass='selected' class="option" tagName="li"}}Users{{/link-to}}
-	</div>
+					{{#if session.isGlobalAdmin}}
-{{/layout/zone-sidebar}}
+						{{#link-to 'customize.global' activeClass='selected' class="option" tagName="li"}}Global{{/link-to}}
-
+						{{#link-to 'customize.auth' activeClass='selected' class="option" tagName="li"}}Authentication{{/link-to}}
-{{#layout/zone-content}}
+					{{/if}}
-	{{outlet}}
+				</ul>
-{{/layout/zone-content}}
+			</div>
+		</div>
+	{{/layout/zone-sidebar}}
+	{{#layout/zone-content}}
+		<div class="page-customize">
+			{{outlet}}
+		</div>
+	{{/layout/zone-content}}
+{{/layout/zone-container}}

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

@@ -1,45 +1,23 @@
-<div id="wrapper" class={{if toggled 'toggled'}}>
+{{#layout/zone-container}}
-	
+	{{#layout/zone-sidebar}}
-	<div id="sidebar-wrapper">
 		{{document/sidebar-zone folders=model.folders folder=model.folder document=model.document
 			pages=model.pages sections=model.section links=model.links isEditor=model.isEditor tab=tab
 			onDocumentDelete=(action 'onDocumentDelete') onSaveTemplate=(action 'onSaveTemplate')
 			onPageSequenceChange=(action 'onPageSequenceChange') onPageLevelChange=(action 'onPageLevelChange') onGotoPage=(action 'onGotoPage')}}
-	</div>
+	{{/layout/zone-sidebar}}
-
+	{{#layout/zone-content}}
-	<div id="page-content-wrapper">
+		<div id="zone-document-content" class="zone-document-content">
-		<div class="{{if toggled 'container' 'container-fluid'}}">
+			<div class="back-to-space">
-			<div class="row">
+				{{#link-to 'folder' model.folder.id model.folder.slug}}
-				<div class="col-lg-12">
+					<i class="material-icons">arrow_back</i>&nbsp;{{model.folder.name}}
-					{{#if toggled}}
+				{{/link-to}}
-						<div id="sidebar-toggle" class="pull-right" {{action 'toggleSidebar'}}>
-							<div class="round-button button-black">
-								<i class="material-icons">keyboard_arrow_left</i>
-							</div>
-						</div>
-					{{else}}
-						<div id="sidebar-toggle" class="pull-right" {{action 'toggleSidebar'}}>
-							<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 pages=model.pages
-							folder=model.folder folders=model.folders sections=model.sections isEditor=model.isEditor pageId=pageId
-							onSavePage=(action 'onSavePage') onInsertSection=(action 'onInsertSection') 
-							onSavePageAsBlock=(action 'onSavePageAsBlock') onDeleteBlock=(action 'onDeleteBlock') 
-							onCopyPage=(action 'onCopyPage') onMovePage=(action 'onMovePage') onDeletePage=(action 'onPageDeleted')}}
-					</div>
-				</div>
 			</div>
+			{{document/document-heading document=model.document isEditor=model.isEditor onSaveDocument=(action 'onSaveDocument')}}
+			{{document/document-view document=model.document links=model.links pages=model.pages
+				folder=model.folder folders=model.folders sections=model.sections isEditor=model.isEditor pageId=pageId
+				onSavePage=(action 'onSavePage') onInsertSection=(action 'onInsertSection') 
+				onSavePageAsBlock=(action 'onSavePageAsBlock') onDeleteBlock=(action 'onDeleteBlock') 
+				onCopyPage=(action 'onCopyPage') onMovePage=(action 'onMovePage') onDeletePage=(action 'onPageDeleted')}}
 		</div>
-	</div>
+	{{/layout/zone-content}}
-	
+{{/layout/zone-container}}
-</div>

app/app/pods/document/route.js

@@ -54,14 +54,6 @@ export default Ember.Route.extend(AuthenticatedRouteMixin, {
 			sections: this.get('sectionService').getAll()
 		});
 	},
-	
-	activate() {
-		$('body').addClass('background-color-off-white');
-	},
-
-	deactivate() {
-		$('body').removeClass('background-color-off-white');
-	},
 
 	actions: {
 		error(error /*, transition*/ ) {

app/app/pods/folder/controller.js

@@ -15,14 +15,13 @@ import NotifierMixin from '../../mixins/notifier';
 export default Ember.Controller.extend(NotifierMixin, {
 	documentService: Ember.inject.service('document'),
 	folderService: Ember.inject.service('folder'),
+	localStorage: Ember.inject.service('localStorage'),	
 	hasSelectedDocuments: false,
 	selectedDocuments: [],
+	queryParams: ['tab'],
+	tab: 'index',
 
 	actions: {
-		onImport() {
-			this.get('target.router').refresh();
-		},
-
 		onDocumentsChecked(documents) {
 			this.set('selectedDocuments', documents);
 			this.set('hasSelectedDocuments', documents.length > 0);
@@ -61,10 +60,6 @@ export default Ember.Controller.extend(NotifierMixin, {
 			this.send("showNotification", "Deleted");
 		},
 
-		showDocument(folder, document) {
-			this.transitionToRoute('document', folder.get('id'), folder.get('slug'), document.get('id'), document.get('slug'));
-		},
-
 		onFolderAdd(folder) {
 			let self = this;
 			this.showNotification("Added");
@@ -73,6 +68,18 @@ export default Ember.Controller.extend(NotifierMixin, {
 				self.get('folderService').setCurrentFolder(newFolder);
 				self.transitionToRoute('folder', newFolder.get('id'), newFolder.get('slug'));
 			});
+		},
+
+		onDeleteSpace() {
+			this.get('folderService').delete(this.get('model.folder.id')).then(() => { /* jshint ignore:line */
+				this.showNotification("Deleted");
+				this.get('localStorage').clearSessionItem('folder');
+				this.transitionToRoute('application');
+			});
+		},
+
+		onImport() {
+			this.get('target.router').refresh();
 		}
 	}
 });

app/app/pods/folder/route.js

@@ -15,20 +15,47 @@ import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-rout
 export default Ember.Route.extend(AuthenticatedRouteMixin, {
 	documentService: Ember.inject.service('document'),
 	folderService: Ember.inject.service('folder'),
-
+	session: Ember.inject.service(''),
 	folder: {},
 
-	model: function (params) {
+	beforeModel() {
+		this.set('folderId', this.paramsFor('folder').folder_id)
+
+		return new Ember.RSVP.Promise((resolve) => {
+			this.get('folderService').getFolder(this.get('folderId')).then((folder) => {
+				this.set('folder', folder);
+
+				this.get('folderService').setCurrentFolder(folder).then(() => {
+					this.set('isEditor', this.get('folderService').get('canEditCurrentFolder'));
+					this.set('isFolderOwner', this.get('session.user.id') === folder.get('userId'));
+				
+					resolve();
+				});
+			});
+		});
+	},
+
+	model(params) {
 		return Ember.RSVP.hash({
-			folder: this.get('folderService').getFolder(params.folder_id),
+			folder: this.get('folder'),
+			isEditor: this.get('isEditor'),
+			isFolderOwner: this.get('isFolderOwner'),
 			folders: this.get('folderService').getAll(),
 			documents: this.get('documentService').getAllByFolder(params.folder_id)
 		});
 	},
 
-	setupController: function (controller, model) {
+	setupController(controller, model) {
 		controller.set('model', model);
 		this.browser.setTitle(model.folder.get('name'));
-		this.get('folderService').setCurrentFolder(model.folder);
+	},
-	}
+
+	actions: {
+		error(error /*, transition*/ ) {
+			if (error) {
+				this.transitionTo('/not-found');
+				return false;
+			}
+		}
+	}	
 });

app/app/pods/folder/template.hbs

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

app/app/pods/folders/template.hbs

@@ -1,8 +1,9 @@
 {{layout/zone-navigation}}
-
+{{#layout/zone-container}}
-{{#layout/zone-sidebar}}
+	{{#layout/zone-sidebar}}
-	{{folder/folders-list folders=model noFolder=true onFolderAdd=(action 'onFolderAdd')}}
+		{{folder/sidebar-zone folders=model noFolder=true isFolderOwner=false isEditor=false
-{{/layout/zone-sidebar}}
+		onFolderAdd=(action 'onFolderAdd')}}
-
+	{{/layout/zone-sidebar}}
-{{#layout/zone-content}}
+	{{#layout/zone-content}}
-{{/layout/zone-content}}
+	{{/layout/zone-content}}
+{{/layout/zone-container}}

app/app/pods/profile/template.hbs

@@ -1,12 +1,18 @@
 {{layout/zone-navigation}}
-
+{{#layout/zone-container}}
-{{#layout/zone-sidebar}}
+	{{#layout/zone-sidebar}}
-	{{layout/sidebar-intro title="Profile" message=session.user.fullname}}
+		<div class="sidebar-toolbar">
-	<div class="sidebar-menu">
+		</div>
-		<div class="avatar-large">{{session.user.initials}}</div>
+		<div class="sidebar-common">
-	</div>
+			{{layout/sidebar-intro title="Profile" message="Your user profile"}}
-{{/layout/zone-sidebar}}
+		</div>
-
+		<div class="sidebar-wrapper">
-{{#layout/zone-content}}
+			<div class="sidebar-menu">
-	{{user-profile model=model save=(action 'save')}}
+				<div class="avatar-large">{{session.user.initials}}</div>
-{{/layout/zone-content}}
+			</div>
+		</div>
+	{{/layout/zone-sidebar}}
+	{{#layout/zone-content}}
+		{{user-profile model=model save=(action 'save')}}
+	{{/layout/zone-content}}
+{{/layout/zone-container}}

app/app/pods/search/template.hbs

@@ -1,16 +1,22 @@
 {{layout/zone-navigation}}
-
+{{#layout/zone-container}}
-{{#layout/zone-sidebar}}
+	{{#layout/zone-sidebar}}
-	{{layout/sidebar-intro title="Search" message='Search by: #tags, keywords, "some phrase", this AND that, this OR that'}}
+		<div class="sidebar-toolbar">
-	<div class="page-search">
-		<div class="input-control">
-			{{focus-input type="text" value=filter placeholder='search'}}
 		</div>
-	</div>
+		<div class="sidebar-common">
-{{/layout/zone-sidebar}}
+			{{layout/sidebar-intro title="Search" message='#tag, keyword, "some phrase", this AND that, this OR that'}}
-
+		</div>
-{{#layout/zone-content}}
+		<div class="sidebar-wrapper">
-	<div class="page-search">
+			<div class="page-search">
-		{{search/search-results results=results}}
+				<div class="input-control">
-	</div>
+					{{focus-input type="text" value=filter placeholder='search'}}
-{{/layout/zone-content}}
+				</div>
+			</div>
+		</div>
+	{{/layout/zone-sidebar}}
+	{{#layout/zone-content}}
+		<div class="page-search">
+			{{search/search-results results=results}}
+		</div>
+	{{/layout/zone-content}}
+{{/layout/zone-container}}

app/app/pods/settings/controller.js

@@ -1,31 +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 Ember from 'ember';
-import AuthMixin from '../../mixins/auth';
-
-export default Ember.Controller.extend(AuthMixin, {
-	tabGeneral: false,
-	tabShare: false,
-	tabPermissions: false,
-	tabDelete: false,
-
-	actions: {
-		selectTab(tab) {
-			this.set('tabGeneral', false);
-			this.set('tabShare', false);
-			this.set('tabPermissions', false);
-			this.set('tabDelete', false);
-
-			this.set(tab, true);
-		}
-	}
-});

app/app/pods/settings/template.hbs

@@ -1,34 +0,0 @@
-{{layout/zone-navigation}}
-
-{{#layout/zone-sidebar}}
-	{{#layout/sidebar-intro message='Rename, delete, share and manage space permissions'}}
-		{{back-to-space folder=model}}
-	{{/layout/sidebar-intro}}
-	<div class="sidebar-menu">
-		<ul class="options">
-			<li class="option {{if tabGeneral "selected"}}" {{action 'selectTab' 'tabGeneral'}}>General</li>
-			{{#if isAuthProviderDocumize}}
-				<li class="option {{if tabShare "selected"}}" {{action 'selectTab' 'tabShare'}}>Share</li>
-			{{/if}}
-			<li class="option {{if tabPermissions "selected"}}" {{action 'selectTab' 'tabPermissions'}}>Permissions</li>
-			<li class="option {{if tabDelete "selected"}}" {{action 'selectTab' 'tabDelete'}}>Delete</li>
-		</ul>
-	</div>
-{{/layout/zone-sidebar}}
-
-{{#layout/zone-content}}
-	{{#folder/folder-settings
-		tabGeneral=tabGeneral
-		tabShare=tabShare
-		tabPermissions=tabPermissions
-		tabDelete=tabDelete
-		folder=model
-		folders=folders
-		permissions=permissions
-		users=users
-		onRemove="onRemove"
-		onRename="onRename"
-		onShare="onShare"
-		onPermission="onPermission" }}
-	{{/folder/folder-settings}}
-{{/layout/zone-content}}

app/app/router.js

@@ -25,10 +25,6 @@ export default Router.map(function () {
 		path: 's/:folder_id/:folder_slug'
 	});
 
-	this.route('settings', {
-		path: 's/:folder_id/:folder_slug/settings'
-	});
-
 	this.route('document', {
 		path: 's/:folder_id/:folder_slug/d/:document_id/:document_slug'
 	}, function () {

app/app/services/folder.js

@@ -80,6 +80,12 @@ export default BaseService.extend({
 		});
 	},
 
+	delete(folderId) {
+		return this.get('ajax').request(`folders/${folderId}`, {
+			method: 'DELETE'
+		});
+	},
+
 	onboard(folderId, payload) {
 		let url = `public/share/${folderId}`;
 
@@ -202,6 +208,7 @@ export default BaseService.extend({
 					canEdit = permission.canEdit;
 				}
 			});
+			
 			Ember.run(() => {
 				this.set('canEditCurrentFolder', canEdit && this.get('sessionService.authenticated'));
 			});

app/app/styles/app.scss

@@ -10,16 +10,18 @@
 // https://documize.com
 @import "color.scss";
 @import "font.scss";
-@import "functions.scss";
+@import "mixins.scss";
 @import "base.scss";
 @import "widget/widget.scss";
-@import "view/layout.scss";
+@import "view/layout-right-nav.scss";
+@import "view/layout-left-sidebar.scss";
 @import "view/page-search.scss";
-@import "view/page-documents.scss";
+@import "view/page-profile.scss";
-@import "view/page-settings.scss";
+@import "view/page-customize.scss";
 @import "view/page-auth.scss";
 @import "view/page-onboard.scss";
 @import "view/page-exceptions.scss";
+@import "view/folder/all.scss";
 @import "view/document/all.scss";
 @import "view/common.scss";
 @import "vendor.scss";

app/app/styles/base.scss

@@ -107,7 +107,7 @@ video.responsive-video {
 html {
 	overflow-y: scroll;
 	font-family: $font-regular;
-	background-color: $color-white;
+	background-color: $color-off-white;
 	font-size: 14px;
 	height: 100%;
 	-webkit-font-smoothing: antialiased;

app/app/styles/mixins.scss

@@ -92,6 +92,13 @@
 	border-top: $size solid $color;
 }
 
+@mixin content-container($pad-tb: 25px, $pad-lr: 50px) {
+    @include border-radius(2px);
+    padding: $pad-tb $pad-lr;
+    box-shadow: 0 0 0 0.75pt $color-stroke,0 0 3pt 0.75pt $color-stroke;
+    background-color: $color-white;
+}
+
 .dotted
 {
     border-bottom: 1px dotted $color-gray;
@@ -147,9 +154,9 @@
 }
 
 @mixin opacity($opacity) {
-      opacity: $opacity;
+    opacity: $opacity;
-      $opacity-ie: $opacity * 100;
+    $opacity-ie: $opacity * 100;
-      filter: alpha(opacity=$opacity-ie); //IE8
+    filter: alpha(opacity=$opacity-ie); //IE8
 }
 
 @keyframes fadein {

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

@@ -1,11 +1,9 @@
 @import "content-linker.scss";
 @import "history.scss";
 @import "inline-editor.scss";
-@import "layout.scss";
 @import "section-editor.scss";
 @import "sidebar-view-activity.scss";
 @import "sidebar-view-attachments.scss";
 @import "sidebar-view-index.scss";
-@import "sidebar-zone.scss";
 @import "view.scss";
 @import "wysiwyg.scss";

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

@@ -1,80 +0,0 @@
-$document-sidebar-width: 400px;
-
-#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;
-}
-
-// #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-zone.scss

@@ -1,72 +0,0 @@
-.document-sidebar-common {
-	display: inline-block;
-	width: 340px;
-	padding: 40px 20px 40px 20px;
-
-    > .pinner {
-        cursor: pointer;
-    
-        > .material-icons {
-            color: $color-primary;
-        }
-    }
-
-	> .template-header {
-		color: $color-goldy;
-		font-size: 1.5em;
-		margin-bottom: 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;
-
-    > .selected {
-        background-color: $color-off-black !important;
-        border: none;
-
-        > .material-icons {
-            color: $color-white !important;
-        }
-    }
-
-    > .round-button-mono {
-        > .material-icons {
-            color: $color-gray;
-        }
-    }
-}
-
-.document-sidebar-wrapper {
-	padding: 40px 20px 40px 20px;
-    margin-right: 60px;
-
-    .document-sidebar-panel {
-        width: 300px;
-        // top: 0;
-        // bottom: 0;
-        // position: fixed;
-        // overflow-y: scroll;
-        // overflow-x: hidden;
-
-        > .title {
-            color: $color-primary;
-            font-size: 1.1rem;
-            margin-bottom: 30px;
-        }
-
-        .document-sidebar-form-wrapper {
-            padding: 20px;
-            border: 1px solid $color-stroke;
-            @include border-radius(3px);
-        }
-    }
-}

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

@@ -1,11 +1,3 @@
-.zone-document {
-	min-height: 500px; //ensure dropdowns render in viewport
-	height: 100%;
-	margin-left: 60px;
-	padding: 30px 70px;
-	z-index: 777;
-}
-
 .zone-document-content {
 	> .back-to-space {
 		margin: 10px 0;
@@ -58,12 +50,9 @@
 	margin: 0 0 50px 0;
 
 	.is-a-page {
-		@extend .transition-all;
+		@include content-container();
-		@include border-radius(2px);
 		@include ease-in();
-		padding: 25px 50px;
+		@extend .transition-all;
-		box-shadow: 0 0 0 0.75pt $color-stroke,0 0 3pt 0.75pt $color-stroke;
-		background-color: $color-white;
 		overflow-x: scroll;
 
 		&:hover {
@@ -82,11 +71,8 @@
 	}
 
 	.is-a-tab {
-		@include border-radius(2px);
+		@include content-container();
 		@include ease-in();
-		padding: 25px 50px;
-		box-shadow: 0 0 0 0.75pt $color-stroke,0 0 3pt 0.75pt $color-stroke;
-		background-color: $color-white;
 
 		.icon {
 			text-align: center;

app/app/styles/view/folder/all.scss

@@ -0,0 +1,4 @@
+@import "document.scss";
+@import "folder.scss";
+@import "wizard.scss";
+@import "sidebar.scss";

app/app/styles/view/folder/document.scss

@@ -0,0 +1,127 @@
+.folder-heading {
+	margin: 0 0 55px 0;
+
+	.folder-title {
+		font-size: 2rem;
+		margin: 0 0 10px 0;
+		font-weight: normal;
+	}
+}
+
+.edit-folder-heading {
+	margin: 0 0 10px 0;
+
+	.edit-folder-title {
+		> input {
+			font-size: 2rem;
+			font-weight: normal;
+			margin: 0 0 10px;
+			color: $color-wysiwyg;
+		}
+	}
+}
+
+.documents-list {
+	.document-item {
+		@include content-container();
+		margin: 0;
+		position: relative;
+		transition: 0.3s;
+
+		&:hover {
+			> .link {
+				> .title {
+					color: $color-link;
+				}
+
+				> .snippet {
+					color: $color-gray;
+				}
+			}
+
+			> .checkbox {
+				display: block;
+			}
+		}
+
+		> .checkbox {
+			position: absolute;
+			display: none;
+			top: 10px;
+			right: 20px;
+			cursor: pointer;
+
+			> .material-icons {
+				width: 10px;
+				margin: 0;
+				padding: 0;
+				color: $color-checkbox;
+			}
+		}
+
+		.link {
+			text-decoration: none;
+			color: $color-off-black;
+			cursor: pointer;
+
+			&:hover {
+				text-decoration: none;
+				color: $color-off-black;
+			}
+
+			> .title {
+				font-size: 18px;
+				margin-bottom: 10px;
+			}
+
+			> .snippet {
+				color: $color-gray;
+				font-size: 14px;
+				line-height: 24px;
+			}
+		}
+	}
+
+	.wizard-item {
+		margin: 0;
+		padding: 0;
+	}
+
+	.no-wizard-item {
+		margin: 50px 0;
+		padding: 0;
+	}
+
+	.selected-card {
+		background-color: $color-card-active !important;
+
+		> .checkbox {
+			display: block;
+		}
+	}
+}
+
+.move-document-options,
+.start-document-options {
+	height: 200px;
+	overflow-y: auto;
+	margin: 0;
+	padding: 0;
+
+	> .option {
+		vertical-align: bottom;
+		cursor: pointer;
+		font-size: 0.9rem;
+		overflow: hidden;
+		white-space: nowrap;
+
+		> .material-icons {
+			font-size: 0.9rem;
+			vertical-align: top;
+		}
+	}
+
+	> .selected {
+		color: $color-link;
+	}
+}

app/app/styles/view/folder/folder.scss

@@ -0,0 +1,45 @@
+.folders-list {
+	> .section {
+		margin: 30px 0 10px;
+
+		> .heading {
+			font-size: 0.9rem;
+			font-weight: bold;
+			color: $color-gray;
+			padding-bottom: 5px;
+		}
+
+		> .message {
+			font-size: 0.8rem;
+			color: $color-gray;
+			margin-top: 10px;
+		}
+
+		> .list {
+			padding: 0;
+			margin: 5px 0 0 15px;
+
+			> .link {
+				font-size: 1rem;
+				color: $color-off-black;
+				text-decoration: none;
+
+				&:hover {
+					color: $color-link;
+				}
+
+				> .item {
+					list-style-type: none;
+					list-style: none;
+					margin: 0 0 5px;
+					padding: 0;
+				}
+			}
+
+			> .selected {
+				color: $color-link;
+				font-weight: bold;
+			}
+		}
+	}
+}

app/app/styles/view/folder/sidebar.scss

@@ -0,0 +1,40 @@
+.sidebar-folder-share {
+    > .input-control {
+        margin-bottom: 30px;
+    }
+}
+
+.sidebar-permissions {
+    > .input-control {
+        margin-bottom: 30px;
+    }
+
+    > .permissions-table {
+        border: none;
+        padding: 0;
+        margin: 0 0 30px 0;
+        width: 100%;
+
+        > thead {
+            > tr {
+                > th {
+                    font-weight: bold;
+                    text-align: center;
+                }
+            }
+        }
+
+        > tbody {
+            > tr {
+                > td {
+                    padding: 8px 0;
+                }
+
+                > td:nth-child(2), td:nth-child(3) {
+                    text-align: center;
+                }
+            }
+        }
+    }
+}
+

app/app/styles/view/folder/wizard.scss

@@ -0,0 +1,162 @@
+.start-document {
+	@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-document-empty-state {
+	> .start-button {
+		display: block;
+	}
+}
+
+.new-document-wizard {
+	@include border-radius(2px);
+	margin: 0 0 30px 0;
+	padding: 30px;
+	border: 1px solid $color-stroke;
+	background-color: $color-off-white;
+	display: none;
+
+	.document-name {
+		font-weight: bold;
+		font-size: 1.5rem;
+		margin: 0 0 30px 0;
+		color: $color-black;
+	}
+
+	.import-document-button {
+		width: 100%;
+		padding: 20px;
+		margin: 0 0 30px 0;
+		text-align: center;
+		color: $color-gray;
+		border: 1px solid $color-stroke;
+		cursor: pointer;
+		font-size: 1rem;
+		line-height: 1.7rem;
+		@include ease-in();
+
+		&:hover {
+			border-color: $color-link;
+			color: $color-link;
+		}
+
+		 > .dz-preview,
+		.dz-processing {
+			display: none !important;
+		}
+	}
+
+	> .list-wrapper {
+		// height: 440px;
+		// overflow-y: auto;
+
+		> .template-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;
+
+					> .template-actions {
+						display: block;
+					}
+				}
+
+				> .template-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;
+					}
+				}
+			}
+		}
+	}
+}
+

app/app/styles/view/layout-left-sidebar.scss

@@ -0,0 +1,176 @@
+$sidebar-width: 400px;
+
+#wrapper {
+    padding-left: 0;
+	margin-right: 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;
+}
+
+#sidebar-wrapper {
+	z-index: 888;
+    position: fixed;
+    left: $sidebar-width;
+    width: 0;
+    height: 100%;
+    margin-left: -$sidebar-width;
+	border-right: 1px solid $color-stroke;
+    background: $color-off-white;
+    overflow-y: auto;
+    -webkit-transition: all 0.5s ease;
+    -moz-transition: all 0.5s ease;
+    -o-transition: all 0.5s ease;
+    transition: all 0.5s ease;
+}
+
+#wrapper.toggled #sidebar-wrapper {
+    width: $sidebar-width;
+}
+
+#page-content-wrapper {
+    width: 100%;
+    position: absolute;
+    margin-top: 30px;
+	padding: 30px;
+
+    .page-content-title {
+		font-size: 2rem;
+		margin: 30px 0 10px;
+		font-weight: normal;
+	}
+}
+
+#wrapper.toggled #page-content-wrapper {
+    position: absolute;
+    margin-right: -$sidebar-width;
+}
+
+@media(min-width:768px) {
+    #wrapper {
+        padding-left: $sidebar-width;
+    }
+
+    #wrapper.toggled {
+        padding-left: 0;
+		padding-right: 0;
+    }
+
+    #sidebar-wrapper {
+        width: $sidebar-width;
+    }
+
+    #wrapper.toggled #sidebar-wrapper {
+        width: 0;
+
+		.sidebar-toolbar {
+			position: relative;
+		}
+    }
+
+    #page-content-wrapper {
+        padding: 30px;
+        position: relative;
+    }
+
+    #wrapper.toggled #page-content-wrapper {
+        position: relative;
+        margin-left: 0;
+    }
+}
+
+.sidebar-toolbar {
+	display: inline-block;
+    width: 60px;
+    background-color: $color-primary;
+    text-align: center;
+    position: fixed;
+    left: 0;
+    top: 0;
+    height: 100%;
+	padding: 40px 0 0 0;
+
+    > .selected {
+        background-color: $color-link !important;
+        border: 1px solid $color-link !important;
+
+        > .material-icons {
+			color: $color-white !important;
+        }
+    }
+
+    > .round-button-mono {
+        background-color: $color-off-white;
+        border: 1px solid $color-off-white;
+
+        > .material-icons {
+			@include ease-in();
+			color: $color-gray;
+        }
+
+		&:hover {
+			> .material-icons {
+				color: $color-link;
+			}
+		}
+    }
+}
+
+.sidebar-common {
+	display: inline-block;
+	width: 340px;
+	padding: 40px 20px 0px 20px;
+	margin-left: 60px;
+
+    > .pinner {
+        cursor: pointer;
+    
+        > .material-icons {
+            color: $color-primary;
+        }
+    }
+
+	> .template-header {
+		color: $color-goldy;
+		font-size: 1.5em;
+		margin-bottom: 20px;
+	}
+
+    .zone-sidebar-page-title {
+        color: $color-primary;
+        font-size: 1.3rem;
+        font-weight: bold;
+        margin-bottom: 20px;
+    }
+
+    .zone-sidebar-page-info {
+        color: $color-gray;
+        font-size: 1rem;
+        line-height: 1.5rem;
+        margin-bottom: 30px;
+    }
+}
+
+.sidebar-wrapper {
+	padding: 40px 20px 40px 20px;
+    margin-left: 60px;
+
+    .sidebar-panel {
+        width: 300px;
+
+        > .title {
+            color: $color-primary;
+            font-size: 1.1rem;
+            margin-bottom: 30px;
+        }
+
+        .folder-sidebar-form-wrapper, .document-sidebar-form-wrapper {
+            padding: 20px;
+            border: 1px solid $color-stroke;
+            @include border-radius(3px);
+            background-color: $color-white;
+        }
+    }
+}

app/app/styles/view/layout-right-nav.scss

@@ -0,0 +1,121 @@
+.zone-navigation {
+	position: fixed;
+	top: 0;
+	right: 0;
+	width: 60px;
+	min-height: 100%;
+	height: 100%;
+	margin: 0;
+	padding: 0;
+	z-index: 999;
+	overflow-x: hidden;
+    background: $color-toolbar;
+
+	> .bottom-zone,
+	> .top-zone {
+		position: absolute;
+		padding: 0;
+		width: 100%;
+
+		> li {
+			cursor: pointer;
+			margin: 0;
+			padding: 10px 0;
+			width: 100%;
+			text-align: center;
+		}
+
+		.round-button-mono {
+			> .material-icons {
+				color: $color-gray;
+				@include ease-in();
+			}
+
+			&:hover {
+				> .material-icons {
+					color: $color-link;
+				}
+			}
+		}
+
+		.profile-link {
+			color: $color-primary;
+			text-align: center;
+			font-size: 1rem;
+			font-style: normal;
+			font-family: $font-regular;
+			vertical-align: top;
+		}
+
+		.selected {
+			.round-button-mono {
+				background-color: $color-link !important;
+				border: 1px solid $color-link !important;
+
+				> .material-icons {
+					color: $color-white !important;
+				}
+
+				> a {
+					> .material-icons {
+						color: $color-white !important;
+					}
+				}
+			}		
+		}
+	}
+
+	> .top-zone {
+		top: 0;
+		padding-top: 30px;	
+	}
+
+	> .bottom-zone {
+		bottom: 0;
+		padding-bottom: 30px;
+	}
+
+	.pinned-zone {
+		position: relative;
+		top: 200px;
+		padding: 0;
+		margin: 0;
+		width: 80px;
+		overflow-x: hidden;
+		overflow-y: scroll;
+
+		> .pin {
+			cursor: pointer;
+			margin: 20px 0 20px 9px;
+		    padding: 14px 3px;
+			height: 40px;
+			width: 40px;
+			text-align: center;
+			overflow: hidden;
+			@include ease-in();
+			@include border-radius(3px);
+			font-family: $font-semibold;
+			font-size: 12px;
+			letter-spacing: -1px;
+			background-color: $color-gray;
+			color: $color-white;
+
+			> .key {
+				width: 30px;
+				text-align: center;
+				display: inline-block;
+				overflow: hidden;
+			}
+
+			&:hover {
+				background-color: $color-link;
+				color: $color-white;
+			}
+		}
+
+		> .sortable-ghost {
+			background-color: $color-gray;
+			color: $color-off-white;
+		}
+	}
+}

app/app/styles/view/layout.scss

@@ -1,182 +0,0 @@
-.zone-navigation {
-	position: fixed;
-	top: 0;
-	width: 60px;
-	min-height: 100%;
-	height: 100%;
-	margin: 0;
-	padding: 0;
-	z-index: 999;
-	overflow-x: hidden;
-	background-color: $color-primary;
-
-	> .bottom-zone,
-	> .top-zone {
-		position: absolute;
-		padding: 0;
-		width: 100%;
-
-		> li {
-			cursor: pointer;
-			margin: 0;
-			padding: 20px 0;
-			width: 100%;
-			text-align: center;
-		}
-
-		.selected {
-			// background-color: $color-link;
-
-			> a {
-				> .material-icons {
-					opacity: 1;
-					color: $color-white;
-				}
-			}
-		}
-	}
-
-	> .top-zone {
-		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: 0.3s;
-		cursor: pointer;
-		vertical-align: middle;
-		background-color: $color-white;
-		text-align: center;
-
-		&:hover {
-			@extend .z-depth-1;
-		}
-
-		&:before {
-			border-radius: 0;
-		}
-
-		> .material-icons {
-			color: $color-primary;
-			text-align: center;
-			font-size: 1.4em;
-		}
-
-		> .initials {
-			color: $color-primary;
-			text-align: center;
-			font-size: 1rem;
-			font-style: normal;
-			line-height: 2.6rem;
-		}
-	}
-
-	.icon-tool {
-		position: relative;
-		vertical-align: middle;
-		text-align: center;
-		font-size: 2rem;
-		@include ease-in;
-		opacity: 0.5;
-		color: $color-white;
-
-		&:hover {
-			opacity: 1;
-			color: $color-white;
-		}
-	}
-
-	.pinned-zone {
-		position: relative;
-		top: 220px;
-		padding: 0;
-		margin: 0;
-		width: 80px;
-		overflow-x: hidden;
-		overflow-y: scroll;
-
-		> .pin {
-			cursor: pointer;
-			margin: 20px 0 20px 9px;
-		    padding: 14px 3px;
-			height: 40px;
-			width: 40px;
-			text-align: center;
-			overflow: hidden;
-			@include ease-in();
-			@include border-radius(3px);
-			font-family: $font-semibold;
-			font-size: 12px;
-			letter-spacing: -1px;
-			background-color: $color-off-white;
-			color: $color-primary;
-
-			> .key {
-				width: 30px;
-				text-align: center;
-				display: inline-block;
-				overflow: hidden;
-			}
-
-			&:hover {
-				background-color: $color-link;
-				color: $color-off-white;
-			}
-		}
-
-		> .sortable-ghost {
-			background-color: $color-gray;
-			color: $color-off-white;
-		}
-	}
-}
-
-.zone-sidebar {
-	background-color: $color-sidebar;
-	height: 100%;
-	min-height: 100%;
-	padding: 30px 40px 0;
-	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;
-
-		 > .material-icons,
-		> a > .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 {
-	min-height: 500px; //ensure dropdowns render in viewport
-	padding: 30px 40px 30px 110px;
-	z-index: 777;
-}

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

@@ -0,0 +1,35 @@
+.page-customize {
+	@include content-container();
+
+	.user-list {
+		margin: 30px 0;
+
+		> .heading {
+			font-size: 1.2rem;
+			color: $color-off-black;
+			font-weight: bold;
+			margin: 0 0 20px 0;
+		}
+
+		> .basic-table {
+			background-color: $color-white;
+			font-size: 0.9rem;
+		}
+
+		.inactive
+		{
+			@extend .color-red;
+			font-weight: normal;
+			text-decoration: line-through;
+		}
+
+		.checkbox {
+			color: $color-checkbox;
+			cursor: pointer;
+		}
+	}
+
+	.edit-user-dialog, .delete-user-dialog {
+		display: none;
+	}
+}

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

@@ -1,286 +0,0 @@
-.space-tools {
-	.doc-tool {
-		position: absolute;
-		top: 130px;
-		right: -18px;
-		z-index: 888;
-	}
-
-	.scroll-space-tool {
-		position: absolute;
-		top: 130px;
-		right: -18px;
-		z-index: 999;
-		-webkit-animation: fadein 1s;
-		-moz-animation: fadein 1s;
-		-ms-animation: fadein 1s;
-		-o-animation: fadein 1s;
-		animation: fadein 1s;
-	}
-
-	.stuck-space-tool {
-		position: fixed !important;
-		top: 130px !important;
-		right: 0;
-		left: 0;
-		-webkit-animation: fadein 1s;
-		-moz-animation: fadein 1s;
-		-ms-animation: fadein 1s;
-		-o-animation: fadein 1s;
-		animation: fadein 1s;
-	}
-}
-
-.folders-list {
-	> .section {
-		margin: 30px 0 10px;
-
-		> .heading {
-			font-size: 0.9rem;
-			font-weight: bold;
-			color: $color-gray;
-			padding-bottom: 5px;
-		}
-
-		> .message {
-			font-size: 0.8rem;
-			color: $color-gray;
-			margin-top: 10px;
-		}
-
-		> .list {
-			padding: 0;
-			margin: 5px 0 0 15px;
-
-			> .link {
-				font-size: 1rem;
-				color: $color-off-black;
-				text-decoration: none;
-
-				&:hover {
-					color: $color-link;
-				}
-
-				> .item {
-					list-style-type: none;
-					list-style: none;
-					margin: 0 0 5px;
-					padding: 0;
-				}
-			}
-
-			> .selected {
-				color: $color-link;
-				font-weight: bold;
-			}
-		}
-	}
-}
-
-.documents-list {
-	> .document {
-		margin: 0;
-		padding: 20px 20px 25px;
-		width: 100%;
-		position: relative;
-		transition: 0.3s;
-		border-bottom: 1px solid $color-border;
-
-		&:hover {
-			> .link {
-				> .title {
-					color: $color-link;
-				}
-
-				> .snippet {
-					color: $color-gray;
-				}
-			}
-
-			> .checkbox {
-				display: block;
-			}
-		}
-
-		> .checkbox {
-			position: absolute;
-			display: none;
-			top: 8px;
-			right: 15px;
-			cursor: pointer;
-
-			> .material-icons {
-				width: 10px;
-				margin: 0;
-				padding: 0;
-				color: $color-checkbox;
-			}
-		}
-
-		.link {
-			text-decoration: none;
-			color: $color-off-black;
-			cursor: pointer;
-
-			&:hover {
-				text-decoration: none;
-				color: $color-off-black;
-			}
-
-			> .title {
-				font-size: 18px;
-				margin-bottom: 10px;
-			}
-
-			> .snippet {
-				color: $color-gray;
-				font-size: 14px;
-				line-height: 24px;
-			}
-		}
-	}
-
-	> .selected-card {
-		background-color: $color-card-active !important;
-
-		> .checkbox {
-			display: block;
-		}
-	}
-}
-
-.move-document-options,
-.start-document-options {
-	height: 150px;
-	overflow-y: auto;
-	margin: 0;
-	padding: 0;
-
-	> .option {
-		vertical-align: bottom;
-		cursor: pointer;
-		font-size: 0.9rem;
-		overflow: hidden;
-		white-space: nowrap;
-
-		> .material-icons {
-			font-size: 0.9rem;
-			vertical-align: top;
-		}
-	}
-
-	> .selected {
-		color: $color-link;
-	}
-}
-
-.empty-state-space {
-	margin-top: 150px;
-	text-align: center;
-}
-
-.start-document {
-	> .import-document-button {
-		width: 100%;
-		padding: 20px;
-		margin: 30px 0;
-		text-align: center;
-		color: $color-gray;
-		border: 2px dotted $color-gray;
-		cursor: pointer;
-		font-size: 1rem;
-		line-height: 1.7rem;
-		@include border-radius(10px);
-		@include ease-in();
-
-		&:hover {
-			border-color: $color-link;
-			color: $color-link;
-		}
-
-		 > .dz-preview,
-		.dz-processing {
-			display: none !important;
-		}
-	}
-
-	> .templates-list {
-		margin: 0;
-
-		> .list {
-			margin: 0;
-			padding: 0;
-
-			> .item {
-				cursor: pointer;
-				list-style: none;
-				padding: 10px 5px;
-				margin: 10px 0;
-				min-height: 90px;
-				@include ease-in();
-
-				&:hover {
-					> .icon {
-						> .edit-control {
-							display: block;
-						}
-					}
-				}
-
-				.icon {
-					text-align: center;
-					display: inline-block;
-					width: 50px;
-
-					> .img {
-						text-align: center;
-						display: inline-block;
-						height: 40px;
-						width: 40px;
-					}
-
-					> .edit-control {
-						display: none;
-						vertical-align: top;
-						text-align: center;
-						margin-top: 5px;
-						opacity: 0.5;
-						cursor: pointer;
-						color: $color-gray;
-
-						&:hover {
-							color: $color-link;								
-						}
-					}
-				}
-
-				> .details {
-					vertical-align: top;
-					display: inline-block;
-					width: 80%;
-					cursor: pointer;
-
-					> .title {
-						font-size: 1rem;
-						font-weight: bold;
-						color: $color-off-black;
-						letter-spacing: 0.5px;
-					}
-
-					> .desc {
-						color: $color-gray;
-						font-size: 0.9rem;
-						margin-top: 5px;
-					}
-
-					&:hover {
-						 > .title,
-						> .desc {
-							color: $color-link !important;
-						}
-					}
-				}
-			}
-		}
-	}
-}

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

@@ -0,0 +1,3 @@
+.page-profile {
+    @include content-container();
+}

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

@@ -6,9 +6,10 @@
 	}
 
 	.search-results {
-		.heading {
+		> .heading {
-			font-size: 1.2rem;
+			font-size: 2rem;
-			color: $color-off-black;
+			margin-bottom: 10px;
+			font-weight: normal;
 		}
 
 		> .list {
@@ -16,10 +17,9 @@
 			list-style: none;
 
 			> .item {
+				@include content-container();
 				cursor: pointer;
-				margin: 0 30px 30px 0;
+				margin-bottom: 30px;
-				padding-bottom: 40px;
-				border-bottom: 1px solid #e1e1e1;
 
 				> .link {
 					text-decoration: none;
@@ -35,10 +35,9 @@
 					}
 
 					> .folder {
-						display: inline-block;
 						font-size: 0.8rem;
 						color: $color-gray;
-						margin-left: 15px;
+						margin-top: 5px;
 					}
 
 					> .excerpt {
@@ -50,25 +49,6 @@
 						margin-top: 1rem;
 					}
 				}
-
-				> .references {
-					margin-top: 1rem;
-
-					> .label {
-						font-size: 0.9rem;
-						color: $color-gray;
-					}
-
-					> .link {
-						font-size: 0.9rem;
-						color: $color-off-black;
-
-						&:hover {
-							color: $color-link;
-							text-decoration: underline;
-						}
-					}
-				}
 			}
 		}
 	}

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

@@ -1,34 +0,0 @@
-.global-folder-settings {
-}
-
-.user-list {
-	margin: 30px 0;
-
-	> .heading {
-		font-size: 1.2rem;
-		color: $color-off-black;
-		font-weight: bold;
-		margin: 0 0 20px 0;
-	}
-
-	> .basic-table {
-		background-color: $color-white;
-		font-size: 0.9rem;
-	}
-
-	.inactive
-	{
-		@extend .color-red;
-		font-weight: normal;
-		text-decoration: line-through;
-	}
-
-	.checkbox {
-		color: $color-checkbox;
-		cursor: pointer;
-	}
-}
-
-.edit-user-dialog, .delete-user-dialog {
-	display: none;
-}

app/app/templates/components/customize/auth-settings.hbs

@@ -1,4 +1,4 @@
-<form class="form-bordered">
+<form class="">
     <div class="form-header">
         <div class="title">Authentication</div>
         <div class="tip">Determine the method for user authentication</div>

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

@@ -1,27 +1,25 @@
 <form>
-    <div class="form-bordered">
+    <div class="form-header">
-		<div class="form-header">
+        <div class="title">Instance Settings</div>
-	        <div class="title">Instance Settings</div>
+        <div class="tip">Settings applicable to your Documize instance</div>
-	        <div class="tip">Settings applicable to your Documize instance</div>
-	    </div>
-        <div class="input-control">
-            <label>Title</label>
-            <div class="tip">Describe the title of this Documize instance</div>
-            {{focus-input id="siteTitle" type="text" value=model.general.title class=(if hasTitleInputError 'error')}}
-        </div>
-        <div class="input-control">
-            <label>Message</label>
-            <div class="tip">Describe the purpose of this Documize instance</div>
-            {{textarea id="siteMessage" rows="3" value=model.general.message class=(if hasMessageInputError 'error')}}
-        </div>
-        <div class="input-control">
-            <label>Anonymous Access</label>
-            <div class="tip">Content within "Everyone" will be made available to anonymous users</div>
-            <div class="checkbox">
-                <input type="checkbox" id="allowAnonymousAccess" checked= {{model.general.allowAnonymousAccess}} />
-                <label for="allowAnonymousAccess">Allow anyone to access this Documize instance</label>
-            </div>
-        </div>
-        <div class="regular-button button-blue" {{ action 'save' }}>save</div>
     </div>
+    <div class="input-control">
+        <label>Title</label>
+        <div class="tip">Describe the title of this Documize instance</div>
+        {{focus-input id="siteTitle" type="text" value=model.general.title class=(if hasTitleInputError 'error')}}
+    </div>
+    <div class="input-control">
+        <label>Message</label>
+        <div class="tip">Describe the purpose of this Documize instance</div>
+        {{textarea id="siteMessage" rows="3" value=model.general.message class=(if hasMessageInputError 'error')}}
+    </div>
+    <div class="input-control">
+        <label>Anonymous Access</label>
+        <div class="tip">Content within "Everyone" will be made available to anonymous users</div>
+        <div class="checkbox">
+            <input type="checkbox" id="allowAnonymousAccess" checked= {{model.general.allowAnonymousAccess}} />
+            <label for="allowAnonymousAccess">Allow anyone to access this Documize instance</label>
+        </div>
+    </div>
+    <div class="regular-button button-blue" {{ action 'save' }}>save</div>
 </form>

app/app/templates/components/customize/global-settings.hbs

@@ -1,4 +1,4 @@
-<form class="form-bordered">
+<form>
     <div class="form-header">
         <div class="title">Mail Server Settings</div>
         <div class="tip">Used for sending email notifications</div>

app/app/templates/components/customize/user-list.hbs

@@ -1,4 +1,4 @@
-<div class="user-list form-bordered">
+<div class="user-list">
 	<div class="form-header">
 		<div class="title">User Management</div>
 		<div class="tip">Set basic information, passwords and permissions for {{users.length}} users</div>

app/app/templates/components/customize/user-settings.hbs

@@ -1,5 +1,5 @@
 {{#if isAuthProviderDocumize}}
-    <form class="form-bordered">
+    <form>
         <div class="form-header">
             <div class="title">Add user</div>
             <div class="tip">New users receive an invitation email with a random password</div>

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

@@ -1,4 +1,4 @@
-<div class="document-sidebar-panel">
+<div class="sidebar-panel">
 	<div class="title">Activity</div>
 	<div class="document-sidebar-view-activity">
 		<ul class="items">

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

@@ -1,4 +1,4 @@
-<div class="document-sidebar-panel">
+<div class="sidebar-panel">
 	<div class="title">Attachments</div>
 	<div class="document-sidebar-view-attachments">
 		{{#if isEditor}}

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

@@ -1,4 +1,4 @@
-<div class="document-sidebar-panel">
+<div class="sidebar-panel">
 	<div class="title">Index</div>
 	<div class="document-sidebar-view-index">
 		<div class="structure">

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

@@ -1,6 +1,6 @@
-<div class="document-sidebar-toolbar">
+<div class="sidebar-toolbar">
     <div class="round-button-mono" id="sidebar-zone-more-button">
-        <i class="material-icons color-gray">more_horiz</i>
+        <i class="material-icons">more_horiz</i>
     </div>
     <div class="margin-top-20"></div>
     <div class="round-button-mono {{if (is-equal tab 'index') 'selected'}}" {{action 'onChangeTab' 'index'}}>
@@ -18,14 +18,14 @@
     {{/if}}
 </div>
 
-<div class="document-sidebar-common">
+<div class="sidebar-common">
     {{#if document.template}}
         <div class="template-header">Template</div>
     {{/if}}
     {{document/tag-editor documentTags=document.tags isEditor=isEditor onChange=(action 'onTagChange')}}
 </div>
 
-<div class="document-sidebar-wrapper">
+<div class="sidebar-wrapper">
     {{#if (is-equal tab 'index')}}
 		{{document/sidebar-view-index document=document folder=folder pages=pages page=page isEditor=isEditor
 			onPageSequenceChange=(action 'onPageSequenceChange') onPageLevelChange=(action 'onPageLevelChange') onGotoPage=(action 'onGotoPage')}}
@@ -40,7 +40,7 @@
     {{/if}}
 </div>
 
-{{#dropdown-menu target="sidebar-zone-more-button" position="bottom right" open="click" onOpenCallback=(action 'onMenuOpen') onCloseCallback=(action 'onMenuOpen')}}
+{{#dropdown-menu target="sidebar-zone-more-button" position="bottom left" open="click" onOpenCallback=(action 'onMenuOpen') onCloseCallback=(action 'onMenuOpen')}}
     <ul class="menu">
         {{#if session.authenticated}}
             {{#if pinState.isPinned}}
@@ -71,7 +71,7 @@
 {{#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" }}
+            {{#dropdown-dialog target="pin-document-button" position="bottom left" button="Pin" color="flat-green" onAction=(action 'onPin') focusOn="pin-document-name" }}
                 <div class="input-control">
                     <label>Pin Document</label>
                     <div class="tip">A 3 or 4 character name</div>
@@ -83,12 +83,12 @@
 
     {{#if isEditor}}
         {{#if menuOpen}}
-            {{#dropdown-dialog target="delete-document-button" position="bottom right" button="Delete" color="flat-red" onAction=(action 'onDeleteDocument')}}
+            {{#dropdown-dialog target="delete-document-button" position="bottom left" 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}}
 
-            {{#dropdown-dialog target="save-template-button" position="bottom right" button="Save as Template" color="flat-green" onAction=(action 'onSaveTemplate') focusOn="new-template-name" }}
+            {{#dropdown-dialog target="save-template-button" position="bottom left" 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>

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

@@ -1,26 +1,55 @@
-<ul class="documents-list">
+<div class="documents-list">
 	{{#each documents key="id" as |document|}}
-		<li class="document {{if document.selected "selected-card"}}">
+		<div id="document-{{document.id}}">
-			{{#link-to 'document.index' folder.id folder.slug document.id document.slug class="link"}}
+			<div class="document-item {{if document.selected "selected-card"}}">
-				<div class="title">{{ document.name }}</div>
+				{{#link-to 'document.index' folder.id folder.slug document.id document.slug class="link"}}
-				<div class="snippet">{{ document.excerpt }}</div>
+					<div class="title">{{ document.name }}</div>
-				<div class="chips">{{folder/document-tags documentTags=document.tags}}</div>
+					<div class="snippet">{{ document.excerpt }}</div>
-			{{/link-to}}
+					<div class="chips">{{folder/document-tags documentTags=document.tags}}</div>
-			<div class="checkbox" {{action 'selectDocument' document.id}}>
+				{{/link-to}}
-				{{#if session.authenticated}}
+				<div class="checkbox" {{action 'selectDocument' document.id}}>
-					{{#if document.selected}}
+					{{#if session.authenticated}}
-						<i class="material-icons">check_box</i>
+						{{#if document.selected}}
-					{{else}}
+							<i class="material-icons">check_box</i>
-						<i class="material-icons">check_box_outline_blank</i>
+						{{else}}
+							<i class="material-icons">check_box_outline_blank</i>
+						{{/if}}
 					{{/if}}
-				{{/if}}
+				</div>
 			</div>
-		</li>
+			{{#if canCreate}}
+				<div class="wizard-item start-document" {{action 'onShowDocumentWizard' document.id}}>
+					<div class="start-button">
+						<div class="round-button round-button-small button-green">
+							<i class="material-icons">add</i>
+						</div>
+						<div class="label">document</div>
+					</div>
+				</div>
+			{{else}}
+				<div class="no-wizard-item" />
+			{{/if}}
+		</div>
 	{{/each}}
-</ul>
+</div>
+
+{{folder/start-document folder=folder isEditor=isEditor onImport=(action 'onImport') onHideDocumentWizard=(action 'onHideDocumentWizard')}}
 
 {{#if emptyState}}
-	<div class="empty-state-space">
+	{{#if canCreate}}
-		<img src="/assets/img/empty-state-space.gif" />
+		<div class="start-document start-document-empty-state" {{action 'onShowDocumentWizard' ''}}>
-	</div>
+			<div class="start-button">
+				<div class="round-button round-button-small button-green">
+					<i class="material-icons">add</i>
+				</div>
+				<div class="label">document</div>
+			</div>
+		</div>
+	{{/if}}
+{{/if}}
+
+<div id="wizard-placeholder" class="hide" />
+
+{{#if emptyState}}
+	<div class="regular-button button-red margin-top-50" {{action 'onDelete'}}>delete space</div>
 {{/if}}

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

@@ -0,0 +1,21 @@
+{{#unless editMode}}
+	<div class="folder-heading {{if isFolderOwner 'cursor-pointer'}}" onclick={{if isFolderOwner (action 'toggleEdit')}}>
+		<h1 class="folder-title">{{folder.name}}</h1>
+	</div>
+{{else}}
+	<form {{action "onSave" on="submit"}}>
+		<div class="edit-folder-heading">
+			<div class="input-inline input-transparent edit-folder-title">
+				{{focus-input id="folder-name" type="text" value=folderName class=(if hasNameError 'error-inline') placeholder="Name" autocomplete="off"}}
+			</div>
+			<div>
+				<button type="submit" class="round-button-mono" {{action 'onSave'}}>
+					<i class="material-icons color-green">check</i>
+				</button>
+				<div class="round-button-mono" {{action 'onCancel'}}>
+					<i class="material-icons color-gray">close</i>
+				</div>
+			</div>
+		</div>
+	</form>
+{{/unless}}

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

@@ -1,87 +0,0 @@
-<div class="folder-settings">
-	{{#if tabGeneral}}
-	    <div class="form-bordered">
-			<div class="input-control">
-				<label>Name</label>
-				<div class="tip">Concise name helps everyone understand what this space contains</div>
-				{{focus-input id="folderName" type="text" value=folder.name}}
-			</div>
-			<div class="regular-button button-blue" {{ action 'rename' }}>save</div>
-	    </div>
-	{{/if}}
-
-	{{#if tabShare}}
-	    <div class="form-bordered">
-			<div class="form-header">
-		        <div class="title">Invitations</div>
-		        <div class="tip">Invite people to this space</div>
-		    </div>
-            <div class="input-control">
-				<label>Email</label>
-				<div class="tip">Comma separate multiple email addresses</div>
-                {{focus-input id="inviteEmail" type="text" value=inviteEmail}}
-            </div>
-			<div class="input-control">
-		        <label>Message</label>
-		        <div class="tip">Explain why they are being invited</div>
-		        {{textarea id="explainInvite" value=inviteMessage rows=3}}
-		    </div>
-			<div class="regular-button button-blue" {{ action 'share' }}>Share</div>
-	    </div>
-	{{/if}}
-
-	{{#if tabDelete}}
-		<div class="form-bordered">
-			<div class="form-header">
-		        <div class="title">Danger Here</div>
-		        <div class="tip">Before careful as there is no undo!</div>
-		    </div>
-			<div class="input-control">
-				<label>Move before delete</label>
-				<div class="tip">Move existing documents to another space before you delete <strong>{{folder.name}}</strong></div>
-				{{ui-select id="delete-target" content=folders action=(action (mut moveTarget)) prompt="Select destination"}}
-			</div>
-			<div class="regular-button button-red" {{ action 'remove' }}>delete</div>
-		</div>
-	{{/if}}
-
-	{{#if tabPermissions}}
-		<div class="form-bordered">
-			<div class="form-header">
-		        <div class="title">Permissions</div>
-		        <div class="tip">Decide who can see and edit within this space</div>
-		    </div>
-			<div class="input-control">
-				<label>Permissions</label>
-				<div class="tip">The message that gets sent to new invites for <strong>{{folder.name}}</strong></div>
-				{{textarea id="explainRole" value=roleMessage rows=3}}
-			</div>
-
-            <table class="basic-table">
-                <thead>
-                    <tr>
-                        <th>&nbsp;</th>
-                        <th>Can View</th>
-                        <th>Can Edit</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {{#each permissions key="@index" as |permission|}}
-                        <tr>
-                            <td>{{permission.fullname}}</td>
-                            <td>
-                                <input type="checkbox" id="canView-{{permission.userId}}" checked={{permission.canView}} />
-                                <label for="canView-{{permission.userId}}">&nbsp;</label>
-                            </td>
-                            <td>
-                                <input type="checkbox" id="canEdit-{{permission.userId}}" checked={{permission.canEdit}} />
-                                <label for="canEdit-{{permission.userId}}">&nbsp;</label>
-                            </td>
-                        </tr>
-                    {{/each}}
-                </tbody>
-            </table>
-			<div class="regular-button button-blue" {{ action 'setPermissions' }}>Apply</div>
-	    </div>
-	{{/if}}
-</div>

app/app/templates/components/folder/folder-toolbar.hbs

@@ -28,52 +28,7 @@
 				</ul>
 			{{/dropdown-dialog}}
 		{{else}}
-			{{#if session.authenticated}}
+			<div class="margin-top-35"></div>
-				{{#if pinState.isPinned}}
-					<div class="round-button-mono" {{action 'unpin'}}>
-						<i class="material-icons color-primary">star</i>
-					</div>
-				{{else}}
-					<div class="round-button-mono" id="pin-space-button">
-						<i class="material-icons color-gray">star_border</i>
-					</div>
-				{{/if}}
-				{{#if isFolderOwner}}
-					<div class="button-gap"></div>
-				{{/if}}
-			{{/if}}
-	    	{{#if isFolderOwner}}
-				{{#if isAuthProviderDocumize}}
-					{{#link-to 'settings' folder.id folder.slug (query-params tab="tabShare")}}
-						<div class="round-button-mono" id="folder-share-button" data-tooltip="Share" data-tooltip-position="top center">
-							<i class="material-icons color-gray">share</i>
-						</div>
-					{{/link-to}}
-				{{else}}
-					{{#link-to 'settings' folder.id folder.slug (query-params tab="tabPermissions")}}
-						<div class="round-button-mono" id="folder-share-button" data-tooltip="Share" data-tooltip-position="top center">
-							<i class="material-icons color-gray">share</i>
-						</div>
-					{{/link-to}}
-				{{/if}}
-				<div class="button-gap"></div>
-				{{#link-to 'settings' folder.id folder.slug}}
-					<div class="round-button-mono" id="folder-settings-button" data-tooltip="Settings" data-tooltip-position="top center">
-					    <i class="material-icons color-gray">settings</i>
-					</div>
-				{{/link-to}}
-			{{/if}}
-			{{#if session.authenticated}}
-				{{#unless pinState.isPinned}}
-					{{#dropdown-dialog target="pin-space-button" position="bottom right" button="Pin" color="flat-green" onAction=(action 'pin') focusOn="pin-space-name" }}
-						<div class="input-control">
-							<label>Pin Space</label>
-							<div class="tip">A 3 or 4 character name</div>
-							{{input type='text' id="pin-space-name" value=pinState.newName}}
-						</div>
-					{{/dropdown-dialog}}
-				{{/unless}}
-			{{/if}}
 	    {{/if}}
 	</div>
 {{/if}}

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

@@ -1,36 +1,14 @@
-{{#unless noFolder}}
+<div class="sidebar-panel">
 	<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>
-
 			{{folder/start-document savedTemplates=savedTemplates folder=folder editor=folderService.canEditCurrentFolder
 				onImport=(action 'onImport')
 				onEditTemplate=(action 'onEditTemplate')
 				onDocumentTemplate=(action 'onDocumentTemplate')}}
 		{{/if}}
-
-		{{#if showScrollTool}}
-			<div {{action 'scrollTop'}} id="scroll-space-tool" class="round-button round-button-mono button-white scroll-space-tool" data-tooltip="Back to top" data-tooltip-position="top center">
-				<i class="material-icons color-gray">vertical_align_top</i>
-			</div>
-		{{/if}}
-
-		{{#if showingList}}
-			{{#if folderService.canEditCurrentFolder}}
-				<div {{action 'showDocument'}} class="round-button button-green doc-tool" data-tooltip="Document" data-tooltip-position="top center">
-					<i class="material-icons">add</i>
-				</div>
-			{{/if}}
-		{{/if}}
 	</div>
-{{/unless}}
 
-<div class="folders-list">
+	<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>
@@ -90,5 +68,5 @@
 				</ul>
 			</div>
 		{{/if}}
-	{{/if}}
+	</div>
 </div>

app/app/templates/components/folder/sidebar-permissions.hbs

@@ -0,0 +1,30 @@
+<div class="sidebar-panel">
+	<div class="title">Space Permissions</div>
+	<div class="sidebar-permissions folder-sidebar-form-wrapper">
+		<table class="permissions-table">
+			<thead>
+				<tr>
+					<th>&nbsp;</th>
+					<th>View</th>
+					<th>Edit</th>
+				</tr>
+			</thead>
+			<tbody>
+				{{#each permissions key="@index" as |permission|}}
+					<tr>
+						<td>{{permission.fullname}}</td>
+						<td>
+							<input type="checkbox" id="canView-{{permission.userId}}" checked={{permission.canView}} />
+							<label for="canView-{{permission.userId}}">&nbsp;</label>
+						</td>
+						<td>
+							<input type="checkbox" id="canEdit-{{permission.userId}}" checked={{permission.canEdit}} />
+							<label for="canEdit-{{permission.userId}}">&nbsp;</label>
+						</td>
+					</tr>
+				{{/each}}
+			</tbody>
+		</table>
+		<div class="regular-button button-blue" {{action 'setPermissions'}}>Set</div>
+	</div>
+</div>

app/app/templates/components/folder/sidebar-share.hbs

@@ -0,0 +1,16 @@
+<div class="sidebar-panel">
+	<div class="title">Invite Users</div>
+	<div class="sidebar-folder-share folder-sidebar-form-wrapper">
+		<div class="input-control">
+			<label>Email</label>
+			<div class="tip">Comma separate multiple email addresses</div>
+			{{focus-input id="inviteEmail" type="text" class="input-transparent" value=inviteEmail}}
+		</div>
+		<div class="input-control">
+			<label>Message</label>
+			<div class="tip">Explain why they are being invited</div>
+			{{textarea id="explainInvite" value=inviteMessage class="input-transparent" rows="5"}}
+		</div>
+		<div class="regular-button button-blue" {{ action 'onShare' }}>Share</div>
+	</div>
+</div>

app/app/templates/components/folder/sidebar-zone.hbs

@@ -0,0 +1,67 @@
+<div class="sidebar-toolbar">
+	{{#unless noFolder}}
+		<div class="margin-top-20"></div>
+		<div class="round-button-mono {{if (is-equal tab 'index') 'selected'}}" {{action 'onChangeTab' 'index'}}>
+			<i class="material-icons">view_headline</i>
+		</div>
+		<div class="margin-top-20"></div>
+
+		{{#if session.authenticated}}
+	    	{{#if isFolderOwner}}
+				{{#if isAuthProviderDocumize}}
+					<div class="round-button-mono {{if (is-equal tab 'share') 'selected'}}" {{action 'onChangeTab' 'share'}}>
+						<i class="material-icons">person_add</i>
+					</div>
+					<div class="margin-top-20"></div>
+				{{/if}}
+				<div class="round-button-mono {{if (is-equal tab 'permissions') 'selected'}}" {{action 'onChangeTab' 'permissions'}}>
+					<i class="material-icons">group</i>
+				</div>
+				<div class="margin-top-20"></div>
+			{{/if}}
+			<div class="round-button-mono" id="space-more-button">
+				<i class="material-icons">more_horiz</i>
+			</div>
+
+			{{#dropdown-menu target="space-more-button" position="bottom left" open="click" onOpenCallback=(action 'onMenuOpen') onCloseCallback=(action 'onMenuOpen')}}
+				<ul class="menu">
+					{{#if pinState.isPinned}}
+						<li class="item" {{action 'onUnpin'}}>Unpin</li>
+					{{else}}
+						<li class="item" id="pin-space-button">Pin</li>
+					{{/if}}        
+				</ul>
+			{{/dropdown-menu}}
+
+		    {{#if menuOpen}}
+				{{#unless pinState.isPinned}}
+					{{#dropdown-dialog target="pin-space-button" position="bottom left" button="Pin" color="flat-green" onAction=(action 'onPin') focusOn="pin-space-name" }}
+						<div class="input-control">
+							<label>Pin Space</label>
+							<div class="tip">A 3 or 4 character name</div>
+							{{input type='text' id="pin-space-name" value=pinState.newName}}
+						</div>
+					{{/dropdown-dialog}}
+				{{/unless}}
+			{{/if}}
+		{{/if}}
+	{{/unless}}
+</div>
+
+<div class="sidebar-common">
+		{{layout/sidebar-intro title=appMeta.title message=appMeta.message}}
+</div>
+
+<div class="sidebar-wrapper">
+    {{#if (is-equal tab 'index')}}
+		{{folder/sidebar-folders-list folders=folders folder=folder isFolderOwner=isFolderOwner onFolderAdd=(action 'onFolderAdd')}}	
+    {{/if}}
+
+    {{#if (is-equal tab 'share')}}
+		{{folder/sidebar-share folders=folders folder=folder}}	
+    {{/if}}
+
+    {{#if (is-equal tab 'permissions')}}
+		{{folder/sidebar-permissions folders=folders folder=folder}}	
+    {{/if}}
+</div>

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

@@ -1,31 +1,35 @@
-<div class="start-document">
+<div id="new-document-wizard" class="new-document-wizard">
+
+	<div class="input-inline input-transparent pull-left width-80">
+		{{input type="text" id="new-document-name" value=newDocumentName class=(if newDocumentNameMissing 'document-name error-inline' 'document-name mousetrap') placeholder="Name" autocomplete="off"}}
+	</div>
+	<div class="round-button-mono pull-right" {{action 'onHideDocumentWizard'}}>
+		<i class="material-icons color-gray">close</i>
+	</div>
+	<div class="clearfix" />
+
 	<div id="import-document-button" class="import-document-button">
-		Drag-drop .doc, .docx, .txt, .md, .markdown<br/>
+		Drag-drop or click to select .doc, .docx, .txt, .md, .markdown files
-		or click to select files
 	</div>
 
-	<div class="templates-list">
+	<div class="list-wrapper">
-		<ul class="list">
+		<ul class="template-list">
 			{{#each savedTemplates key="id" as |template|}}
 				<li class="item">
-					<div class="icon">
+					{{#if isEditor}}
-						<div class="symbol" {{action 'startDocument' template}}>
+						{{#unless template.locked}}
-							<i class="material-icons">{{template.img}}</i>
+							<div class="template-actions">
-						</div>
+								<i class="material-icons" {{action 'editTemplate' template}}>mode_edit</i>
-						{{#if editor}}
+							</div>
-							{{#unless template.locked}}
+						{{/unless}}
-								<i class="material-icons edit-control" {{action 'editTemplate' template}}>mode_edit</i>
+					{{/if}}
-							{{/unless}}
-						{{/if}}
-					</div>
 					<div class="details" {{action 'startDocument' template}}>
-						<div class='title'>
+						<div class='title'>{{template.title}}</div>
-							{{template.title}}
-						</div>
 						<div class='desc'>{{template.description}}</div>
 					</div>
 				</li>
 			{{/each}}
 		</ul>
 	</div>
+
 </div>

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

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

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

@@ -0,0 +1,3 @@
+<div id="wrapper">
+	{{yield}}
+</div>

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

@@ -1,3 +1,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">
+<div class="container">
-	{{yield}}
+	<div class="row">
+		<div class="col-lg-12">
+			<div id="page-content-wrapper">
+				{{yield}}
+			</div>
+		</div>
+	</div>
 </div>

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

@@ -1,14 +0,0 @@
-<div id="zone-header" class="zone-header">
-	<div class="info pull-left width-70">
-		<div class="title">
-			&nbsp;{{title}}
-		</div>
-		<div class="{{if hasMessage "message"}}">
-			{{message}}
-		</div>
-	</div>
-	<div class="actions pull-right hidden-xs hidden-sm">
-		{{yield}}
-	</div>
-	<div class="clearfix"></div>
-</div>

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

@@ -2,26 +2,26 @@
 	<ul id="top-zone" class="top-zone">
         {{#if session.authenticated}}
 			<li>
-				<div id="accounts-button" class="filled-tool">
+				<div id="accounts-button" class="round-button-mono button-white">
 	                <i class="material-icons">apps</i>
 	            </div>
 			</li>
         {{else}}
 			<li>
 	            {{#link-to 'folders' class='title'}}
-	                <div class="filled-tool" title={{appMeta.title}}>
+	                <div class="round-button-mono button-white" title={{appMeta.title}}>
 	                    <i class="material-icons">apps</i>
 	                </div>
 	            {{/link-to}}
 			</li>
         {{/if}}
 		<li class="{{if view.folder 'selected'}}">
-            {{#link-to 'folders'}}
+            {{#link-to 'folders' tagName="div" class="round-button-mono button-white"}}
-                <i class="material-icons icon-tool">home</i>
+                <i class="material-icons">home</i>
             {{/link-to}}
 		</li>
 		<li class="{{if view.search 'selected'}}">
-            {{#link-to 'search'}}
+            {{#link-to 'search' tagName="div" class="round-button-mono button-white"}}
                 <i class="material-icons icon-tool">search</i>
             {{/link-to}}
 		</li>
@@ -37,34 +37,40 @@
 		{{#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>
+					<div class="round-button-mono button-white">
+		                <i class="material-icons icon-tool">tune</i>
+					</div>
 	            {{/link-to}}
 			</li>
 		{{/if}}
         {{#if session.authenticated}}
-			<li id="workspace-logout" data-tooltip="Logout" data-tooltip-position="right center">
-	            {{#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">
+					<div class="round-button-mono button-white">
-						<i class="initials">{{session.user.initials}}</i>
+						<i class="material-icons profile-link">{{session.user.initials}}</i>
+					</div>
+	            {{/link-to}}
+			</li>
+			<li id="workspace-logout" data-tooltip="Logout" data-tooltip-position="right center">
+	            {{#link-to 'auth.logout'}}
+					<div class="round-button-mono button-white">
+		                <i class="material-icons icon-tool">exit_to_app</i>
 					</div>
 	            {{/link-to}}
 			</li>
         {{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>
+					<div class="round-button-mono button-white">
+						<i class="material-icons">lock_open</i>
+					</div>
 				{{/link-to}}
 	        </li>
         {{/if}}
     </ul>
 
     {{#if session.authenticated}}
-        {{#dropdown-menu target="accounts-button" position="bottom left" open="click" }}
+        {{#dropdown-menu target="accounts-button" position="bottom right" open="click" }}
             <ul class="menu">
                 {{#each session.user.accounts as |account|}}
                     <li class="item" {{action 'switchAccount' account.domain }}>{{account.title}}</li>

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

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

app/app/templates/components/search/search-results.hbs

@@ -1,23 +1,14 @@
 <div class="search-results">
-    <h2 class="heading">{{resultPhrase}}</h2>
+    <div class="heading">{{resultPhrase}}</div>
     <ul class="list">
         {{#each documents key="doc.id" as |result index|}}
             <li class="item">
                 <a class="link" href="s/{{result.doc.folderId}}/{{result.doc.folderSlug}}/d/{{ result.doc.documentId }}/{{result.doc.documentSlug}}?page={{ result.doc.id }}">
-                    <div class="title">{{ result.doc.documentTitle }}</div><div class="folder">{{ result.doc.folderName }}</div>
+                    <div class="title">{{ result.doc.documentTitle }}</div>
+					<div class="folder">{{ result.doc.folderName }}</div>
 					<div class="excerpt">{{ result.doc.documentExcerpt }}</div>
 					<div class="chips">{{search/tag-list documentTags=result.doc.documentTags}}</div>
                 </a>
-				{{#if result.hasReferences}}
-					<div class="references">
-						<span class="label">referenced &raquo;</span>
-						{{#each result.ref as |ref index|}}
-							<a class="link" href="s/{{result.doc.folderId}}/{{result.doc.folderSlug}}/d/{{ result.doc.documentId }}/{{result.doc.documentSlug}}?page={{ ref.id }}">
-								{{ref.pageTitle}}{{ref.comma}}
-							</a>
-						{{/each}}
-					</div>
-				{{/if}}
             </li>
         {{/each}}
     </ul>

app/app/templates/components/user-profile.hbs

@@ -1,7 +1,7 @@
-<div class="form-bordered">
+<div class="page-profile">
 	<div class="form-header">
 		<div class="title">About You</div>
-		<div class="tip">The basics...</div>
+		<div class="tip"></div>
 	</div>
     <div class="input-control">
         <label>Firstname</label>
@@ -18,7 +18,7 @@
     {{#if isAuthProviderDocumize}}
         <div class="input-control">
             <label>Password</label>
-            <div class="tip">Optional change your password</div>
+            <div class="tip">New password</div>
             {{input id="password" type="password" value=password.password class=hasPasswordError}}
         </div>
         <div class="input-control">

core/api/endpoint/label_endpoint.go

@@ -341,6 +341,64 @@ func RemoveFolder(w http.ResponseWriter, r *http.Request) {
 	writeSuccessString(w, "{}")
 }
 
+// DeleteFolder deletes empty folder.
+func DeleteFolder(w http.ResponseWriter, r *http.Request) {
+	if IsInvalidLicense() {
+		util.WriteBadLicense(w)
+		return
+	}
+
+	method := "DeleteFolder"
+	p := request.GetPersister(r)
+
+	if !p.Context.Editor {
+		writeForbiddenError(w)
+		return
+	}
+
+	params := mux.Vars(r)
+	id := params["folderID"]
+
+	if len(id) == 0 {
+		writeMissingDataError(w, method, "folderID")
+		return
+	}
+
+	tx, err := request.Db.Beginx()
+
+	if err != nil {
+		writeTransactionError(w, method, err)
+		return
+	}
+
+	p.Context.Transaction = tx
+
+	_, err = p.DeleteLabel(id)
+	if err != nil {
+		log.IfErr(tx.Rollback())
+		writeServerError(w, method, err)
+		return
+	}
+
+	_, err = p.DeleteLabelRoles(id)
+	if err != nil {
+		log.IfErr(tx.Rollback())
+		writeServerError(w, method, err)
+		return
+	}
+
+	_, err = p.DeletePinnedSpace(id)
+	if err != nil && err != sql.ErrNoRows {
+		log.IfErr(tx.Rollback())
+		writeServerError(w, method, err)
+		return
+	}
+
+	log.IfErr(tx.Commit())
+
+	writeSuccessString(w, "{}")
+}
+
 // SetFolderPermissions persists specified folder permissions
 func SetFolderPermissions(w http.ResponseWriter, r *http.Request) {
 	method := "SetFolderPermissions"

core/api/endpoint/router.go

@@ -183,6 +183,7 @@ func init() {
 	log.IfErr(Add(RoutePrefixPrivate, "organizations/{orgID}", []string{"PUT", "OPTIONS"}, nil, UpdateOrganization))
 
 	// Folder
+	log.IfErr(Add(RoutePrefixPrivate, "folders/{folderID}", []string{"DELETE", "OPTIONS"}, nil, DeleteFolder))
 	log.IfErr(Add(RoutePrefixPrivate, "folders/{folderID}/move/{moveToId}", []string{"DELETE", "OPTIONS"}, nil, RemoveFolder))
 	log.IfErr(Add(RoutePrefixPrivate, "folders/{folderID}/permissions", []string{"PUT", "OPTIONS"}, nil, SetFolderPermissions))
 	log.IfErr(Add(RoutePrefixPrivate, "folders/{folderID}/permissions", []string{"GET", "OPTIONS"}, nil, GetFolderPermissions))

core/api/endpoint/user_endpoint.go

@@ -279,7 +279,7 @@ func GetFolderUsers(w http.ResponseWriter, r *http.Request) {
 	switch folder.Type {
 	case entity.FolderTypePublic:
 		// return all users for team
-		users, err = p.GetUsersForOrganization()
+		users, err = p.GetActiveUsersForOrganization()
 		break
 	case entity.FolderTypePrivate:
 		// just me

core/api/request/user.go

@@ -189,7 +189,12 @@ func (p *Persister) GetUsersForOrganization() (users []entity.User, err error) {
 // GetFolderUsers returns a slice containing all user records for given folder.
 func (p *Persister) GetFolderUsers(folderID string) (users []entity.User, err error) {
 	err = Db.Select(&users,
-		"SELECT id, refid, firstname, lastname, email, initials, password, salt, reset, created, revised FROM user WHERE refid IN (SELECT userid from labelrole WHERE orgid=? AND labelid=?) ORDER BY firstname,lastname", p.Context.OrgID, folderID)
+		`SELECT u.id, u.refid, u.firstname, u.lastname, u.email, u.initials, u.password, u.salt, u.reset, u.created, u.revised 
+		FROM user u, account a
+		WHERE u.refid IN (SELECT userid from labelrole WHERE orgid=? AND labelid=?) 
+		AND a.orgid=? AND u.refid = a.userid AND a.active=1
+		ORDER BY u.firstname, u.lastname`,
+		p.Context.OrgID, folderID, p.Context.OrgID)
 
 	if err != nil {
 		log.Error(fmt.Sprintf("Unable to get all users for org %s", p.Context.OrgID), err)