re-working space permissions -- WIP

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

@@ -48,8 +48,8 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, AuthMixin, {
 			this.addTooltip(document.getElementById("delete-documents-button"));
 		} else {
 			if (this.get('isFolderOwner')) {
-				this.addTooltip(document.getElementById("folder-share-button"));
-				this.addTooltip(document.getElementById("folder-settings-button"));
+				this.addTooltip(document.getElementById("space-delete-button"));
+				this.addTooltip(document.getElementById("space-settings-button"));
 			}
 		}
 	},

gui/app/components/folder/invite-user.js

@@ -23,7 +23,7 @@ export default Ember.Component.extend(NotifierMixin, {
 	inviteMessage: '',
 
 	getDefaultInvitationMessage() {
-		return "Hey there, I am sharing the " + this.folder.get('name') + " space (in " + this.get("appMeta.title") + ") with you so we can both access the same documents.";
+		return "Hey there, I am sharing the " + this.folder.get('name') + " space (in " + this.get("appMeta.title") + ") with you so we can both collaborate on documents.";
 	},
 
 	willRender() {
@@ -67,7 +67,8 @@ export default Ember.Component.extend(NotifierMixin, {
 			this.set('inviteEmail', '');
 
 			this.get('folderService').share(this.folder.get('id'), result).then(() => {
-				this.showNotification('Shared');
+				this.showNotification('Invietd co-workers');
+				$('#inviteEmail').removeClass('error');
 			});
 		}
 	}

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

@@ -32,13 +32,22 @@ export default Ember.Component.extend(NotifierMixin, {
 				let isActive = user.get('active');
 
 				let u = {
-					userId: user.get('id'),
 					fullname: user.get('fullname'),
 					orgId: this.get('folder.orgId'),
-					folderId: this.get('folder.id'),
-					canEdit: false,
-					canView: false,
-					canViewPrevious: false
+					who: 'user',
+					whoId: user.get('id'),
+					location: 'space',
+					scope: 'object',
+					refId: this.get('folder.id'),
+					spaceView: false,
+					spaceManage: false,
+					spaceOwner: false,
+					docAdd: false,
+					docEdit: false,
+					docDelete: false,
+					docMove: false,
+					docCopy: false,
+					docTemplate: false,
 				};
 
 				if (isActive) {
@@ -47,13 +56,23 @@ export default Ember.Component.extend(NotifierMixin, {
 			});
 
 			var u = {
-				userId: "",
 				fullname: " Everyone",
 				orgId: this.get('folder.orgId'),
-				folderId: this.get('folder.id'),
-				canEdit: false,
-				canView: false
-			};
+				who: 'user',
+				whoId: '',
+				location: 'space',
+				scope: 'object',
+				refId: this.get('folder.id'),
+				spaceView: false,
+				spaceManage: false,
+				spaceOwner: false,
+				docAdd: false,
+				docEdit: false,
+				docDelete: false,
+				docMove: false,
+				docCopy: false,
+				docTemplate: false,
+		};
 
 			folderPermissions.pushObject(u);
 
@@ -111,6 +130,7 @@ export default Ember.Component.extend(NotifierMixin, {
 			var payload = { Message: message, Roles: data };
 
 			this.get('folderService').savePermissions(folder.get('id'), payload).then(() => {
+				this.showNotification('Saved permissions');
 			});
 
 			var hasEveryone = _.find(data, function (permission) {
@@ -128,7 +148,6 @@ export default Ember.Component.extend(NotifierMixin, {
 			}
 
 			this.get('folderService').save(folder).then(function () {
-				// window.location.href = "/folder/" + folder.get('id') + "/" + folder.get('slug');
 			});
 		}
 	}

gui/app/models/user-permission.js

@@ -0,0 +1,24 @@
+// 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 Model from 'ember-data/model';
+import attr from 'ember-data/attr';
+// import { belongsTo, hasMany } from 'ember-data/relationships';
+
+export default Model.extend({
+	orgId: attr('string'),
+	who: attr('string'),
+	whoId: attr('string'),
+	action: attr('string'),
+	scope: attr('string'),
+	location: attr('string'),
+	refId: attr('string')
+});

gui/app/pods/folder/controller.js

@@ -10,78 +10,6 @@
 // https://documize.com
 
 import Ember from 'ember';
-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'),
-	selectedDocuments: [],
-	hasSelectedDocuments: Ember.computed.gt('selectedDocuments.length', 0),
-	queryParams: ['tab'],
-	tab: 'index',
-
-	actions: {
-		onMoveDocument(folder) {
-			let self = this;
-			let documents = this.get('selectedDocuments');
-
-			documents.forEach(function (documentId) {
-				self.get('documentService').getDocument(documentId).then(function (doc) {
-					doc.set('folderId', folder);
-					doc.set('selected', !doc.get('selected'));
-					self.get('documentService').save(doc).then(function () {
-						self.get('target._routerMicrolib').refresh();
-					});
-				});
-			});
-
-			this.set('selectedDocuments', []);
-			this.send("showNotification", "Moved");
-		},
-
-		onDeleteDocument() {
-			let documents = this.get('selectedDocuments');
-			let self = this;
-			let promises = [];
-
-			documents.forEach(function (document, index) {
-				promises[index] = self.get('documentService').deleteDocument(document);
-			});
-
-			Ember.RSVP.all(promises).then(() => {
-				let documents = this.get('model.documents');
-				documents.forEach(function (document) {
-					document.set('selected', false);
-				});
-				this.set('model.documents', documents);
-
-				this.set('selectedDocuments', []);
-				this.send("showNotification", "Deleted");
-				this.get('target._routerMicrolib').refresh();
-			});
-		},
-
-		onAddSpace(payload) {
-			let self = this;
-			this.showNotification("Added");
-
-			this.get('folderService').add(payload).then(function (newFolder) {
-				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._routerMicrolib').refresh();
-		}
-	}
+export default Ember.Controller.extend({
 });

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

@@ -0,0 +1,87 @@
+// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
+//
+// This software (Documize Community Edition) is licensed under
+// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
+//
+// You can operate outside the AGPL restrictions by purchasing
+// Documize Enterprise Edition and obtaining a commercial license
+// by contacting <sales@documize.com>.
+//
+// https://documize.com
+
+import Ember from 'ember';
+import NotifierMixin from '../../../mixins/notifier';
+
+export default Ember.Controller.extend(NotifierMixin, {
+	documentService: Ember.inject.service('document'),
+	folderService: Ember.inject.service('folder'),
+	localStorage: Ember.inject.service('localStorage'),
+	selectedDocuments: [],
+	hasSelectedDocuments: Ember.computed.gt('selectedDocuments.length', 0),
+	queryParams: ['tab'],
+	tab: 'index',
+
+	actions: {
+		onMoveDocument(folder) {
+			let self = this;
+			let documents = this.get('selectedDocuments');
+
+			documents.forEach(function (documentId) {
+				self.get('documentService').getDocument(documentId).then(function (doc) {
+					doc.set('folderId', folder);
+					doc.set('selected', !doc.get('selected'));
+					self.get('documentService').save(doc).then(function () {
+						self.get('target._routerMicrolib').refresh();
+					});
+				});
+			});
+
+			this.set('selectedDocuments', []);
+			this.send("showNotification", "Moved");
+		},
+
+		onDeleteDocument() {
+			let documents = this.get('selectedDocuments');
+			let self = this;
+			let promises = [];
+
+			documents.forEach(function (document, index) {
+				promises[index] = self.get('documentService').deleteDocument(document);
+			});
+
+			Ember.RSVP.all(promises).then(() => {
+				let documents = this.get('model.documents');
+				documents.forEach(function (document) {
+					document.set('selected', false);
+				});
+				this.set('model.documents', documents);
+
+				this.set('selectedDocuments', []);
+				this.send("showNotification", "Deleted");
+				this.get('target._routerMicrolib').refresh();
+			});
+		},
+
+		onAddSpace(payload) {
+			let self = this;
+			this.showNotification("Added");
+
+			this.get('folderService').add(payload).then(function (newFolder) {
+				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._routerMicrolib').refresh();
+		}
+	}
+});

gui/app/pods/folder/index/route.js

@@ -0,0 +1,28 @@
+// 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 AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
+
+export default Ember.Route.extend(AuthenticatedRouteMixin, {
+	model() {
+		this.get('browser').setTitle(this.modelFor('folder').folder.get('name'));
+
+		return Ember.RSVP.hash({
+			folder: this.modelFor('folder').folder,
+			isEditor: this.modelFor('folder').isEditor,
+			isFolderOwner: this.modelFor('folder').isFolderOwner,
+			folders: this.modelFor('folder').folders,
+			documents: this.modelFor('folder').documents,
+			templates: this.modelFor('folder').templates
+		});
+	}
+});

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

@@ -0,0 +1,14 @@
+{{#layout/zone-container}}
+	{{#layout/zone-sidebar}}
+		{{folder/sidebar-zone folders=model.folders folder=model.folder isFolderOwner=model.isFolderOwner isEditor=model.isEditor tab=tab
+		onAddSpace=(action 'onAddSpace')}}
+	{{/layout/zone-sidebar}}
+	{{#layout/zone-content}}
+		{{folder/folder-heading folder=model.folder isFolderOwner=model.isFolderOwner isEditor=model.isEditor}}
+		{{folder/folder-toolbar folders=model.folders isFolderOwner=model.isFolderOwner folder=model.folder hasSelectedDocuments=hasSelectedDocuments
+			onDeleteDocument=(action 'onDeleteDocument') onMoveDocument=(action 'onMoveDocument')}}
+		{{folder/documents-list documents=model.documents folders=model.folders folder=model.folder templates=model.templates
+			isFolderOwner=model.isFolderOwner isEditor=model.isEditor selectedDocuments=(mut selectedDocuments)
+			onDeleteSpace=(action 'onDeleteSpace') onImport=(action 'onImport')}}
+	{{/layout/zone-content}}
+{{/layout/zone-container}}

gui/app/pods/folder/route.js

@@ -47,11 +47,6 @@ export default Ember.Route.extend(AuthenticatedRouteMixin, {
 		});
 	},
 
-	setupController(controller, model) {
-		controller.set('model', model);
-		this.browser.setTitle(model.folder.get('name'));
-	},
-
 	actions: {
 		error(error /*, transition*/ ) {
 			console.log(error); // eslint-disable-line no-console

gui/app/pods/folder/settings/controller.js

@@ -0,0 +1,20 @@
+// 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 AuthProvider from '../../../mixins/auth';
+
+export default Ember.Controller.extend(AuthProvider, NotifierMixin, {
+	documentService: Ember.inject.service('document'),
+	folderService: Ember.inject.service('folder'),
+	localStorage: Ember.inject.service('localStorage'),
+});

gui/app/pods/folder/settings/route.js

@@ -0,0 +1,26 @@
+// 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 AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
+
+export default Ember.Route.extend(AuthenticatedRouteMixin, {
+	model() {
+		this.get('browser').setTitle(this.modelFor('folder').folder.get('name'));
+
+		return Ember.RSVP.hash({
+			folder: this.modelFor('folder').folder,
+			isEditor: this.modelFor('folder').isEditor,
+			isFolderOwner: this.modelFor('folder').isFolderOwner,
+			folders: this.modelFor('folder').folders
+		});
+	}
+});

gui/app/pods/folder/settings/template.hbs

@@ -0,0 +1,36 @@
+{{#layout/zone-container}}
+
+	{{#layout/zone-sidebar}}
+		<div class="sidebar-toolbar"></div>
+		<div class="sidebar-common">
+			{{layout/sidebar-intro title="Space Settings" message="Invite users and configure space permissions. Set up categories to sub-divide the space."}}
+		</div>
+		<div class="sidebar-wrapper">
+			<div class="sidebar-menu">
+				<ul class="options">
+					<div class="option selected">Users</div>
+					<div class="option ">Categories</div>
+				</ul>
+			</div>
+		</div>
+	{{/layout/zone-sidebar}}
+
+	{{#layout/zone-content}}
+		<div class="folder-heading">
+			<h1 class="folder-title">{{model.folder.name}}</h1>
+		</div>
+		{{#link-to 'folder' model.folder.id model.folder.slug class="vertical-top"}}
+			<i class="material-icons">arrow_back</i>&nbsp;back to space
+		{{/link-to}}
+		<div class="margin-top-30" />
+
+		{{#if isAuthProviderDocumize}}
+			{{folder/invite-user folders=model.folders folder=model.folder}}
+			<div class="margin-top-50" />
+		{{/if}}
+
+		{{folder/permission-admin folders=model.folders folder=model.folder}}
+		<div class="margin-top-50" />
+{{/layout/zone-content}}
+
+{{/layout/zone-container}}

gui/app/pods/folder/template.hbs

@@ -1,15 +1,2 @@
 {{layout/zone-navigation}}
-{{#layout/zone-container}}
-	{{#layout/zone-sidebar}}
-		{{folder/sidebar-zone folders=model.folders folder=model.folder isFolderOwner=model.isFolderOwner isEditor=model.isEditor tab=tab
-		onAddSpace=(action 'onAddSpace')}}
-	{{/layout/zone-sidebar}}
-	{{#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 'onDeleteDocument') onMoveDocument=(action 'onMoveDocument')}}
-		{{folder/documents-list documents=model.documents folders=model.folders folder=model.folder templates=model.templates
-			isFolderOwner=model.isFolderOwner isEditor=model.isEditor selectedDocuments=(mut selectedDocuments)
-			onDeleteSpace=(action 'onDeleteSpace') onImport=(action 'onImport')}}
-	{{/layout/zone-content}}
-{{/layout/zone-container}}
+{{outlet}}

gui/app/router.js

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

gui/app/serializers/user-permission.js

@@ -0,0 +1,13 @@
+import ApplicationSerializer from './application';
+
+export default ApplicationSerializer.extend({
+	normalize(modelClass, resourceHash) {
+		return {
+			data: {
+				id: resourceHash.userId ? resourceHash.userId : 0,
+				type: modelClass.modelName,
+				attributes: resourceHash
+			}
+		};
+	}
+});

gui/app/services/folder.js

@@ -13,7 +13,6 @@ import Ember from 'ember';
 import BaseService from '../services/base';
 
 const {
-	get,
 	RSVP,
 	inject: { service }
 } = Ember;
@@ -30,7 +29,7 @@ export default BaseService.extend({
 
 	// Add a new folder.
 	add(payload) {
-		return this.get('ajax').post(`folders`, {
+		return this.get('ajax').post(`space`, {
 			contentType: 'json',
 			data: JSON.stringify(payload)
 		}).then((folder) => {
@@ -41,7 +40,7 @@ export default BaseService.extend({
 
 	// Returns folder model for specified folder id.
 	getFolder(id) {
-		return this.get('ajax').request(`folders/${id}`, {
+		return this.get('ajax').request(`space/${id}`, {
 			method: 'GET'
 		}).then((folder) => {
 			let data = this.get('store').normalize('folder', folder);
@@ -54,7 +53,7 @@ export default BaseService.extend({
 
 	// Returns all folders that user can see.
 	getAll() {
-		let folders = this.get('folders');
+		let folders = this.get('space');
 
 		if (folders != null) {
 			return new RSVP.resolve(folders);
@@ -67,7 +66,7 @@ export default BaseService.extend({
 	save(folder) {
 		let id = folder.get('id');
 
-		return this.get('ajax').request(`folders/${id}`, {
+		return this.get('ajax').request(`space/${id}`, {
 			method: 'PUT',
 			contentType: 'json',
 			data: JSON.stringify(folder)
@@ -75,7 +74,7 @@ export default BaseService.extend({
 	},
 
 	remove(folderId, moveToId) {
-		let url = `folders/${folderId}/move/${moveToId}`;
+		let url = `space/${folderId}/move/${moveToId}`;
 
 		return this.get('ajax').request(url, {
 			method: 'DELETE'
@@ -83,7 +82,7 @@ export default BaseService.extend({
 	},
 
 	delete(folderId) {
-		return this.get('ajax').request(`folders/${folderId}`, {
+		return this.get('ajax').request(`space/${folderId}`, {
 			method: 'DELETE'
 		});
 	},
@@ -99,7 +98,7 @@ export default BaseService.extend({
 
 	// getProtectedFolderInfo returns non-private folders and who has access to them.
 	getProtectedFolderInfo() {
-		return this.get('ajax').request(`folders?filter=viewers`, {
+		return this.get('ajax').request(`space?filter=viewers`, {
 			method: "GET"
 		}).then((response) => {
 			let data = [];
@@ -116,7 +115,7 @@ export default BaseService.extend({
 	// reloads and caches folders.
 	reload() {
 
-		return this.get('ajax').request(`folders`, {
+		return this.get('ajax').request(`space`, {
 			method: "GET"
 		}).then((response) => {
 			let data = [];
@@ -132,14 +131,13 @@ export default BaseService.extend({
 
 	// so who can see/edit this folder?
 	getPermissions(folderId) {
-
-		return this.get('ajax').request(`folders/${folderId}/permissions`, {
+		return this.get('ajax').request(`space/${folderId}/permissions`, {
 			method: "GET"
 		}).then((response) => {
 			let data = [];
 
 			data = response.map((obj) => {
-				let data = this.get('store').normalize('folder-permission', obj);
+				let data = this.get('store').normalize('user-permission', obj);
 				return this.get('store').push(data);
 			});
 
@@ -149,7 +147,7 @@ export default BaseService.extend({
 
 	// persist folder permissions
 	savePermissions(folderId, payload) {
-		return this.get('ajax').request(`folders/${folderId}/permissions`, {
+		return this.get('ajax').request(`space/${folderId}/permissions`, {
 			method: 'PUT',
 			contentType: 'json',
 			data: JSON.stringify(payload)
@@ -158,7 +156,6 @@ export default BaseService.extend({
 
 	// share this folder with new users!
 	share(folderId, invitation) {
-
 		return this.get('ajax').post(`folders/${folderId}/invitation`, {
 			contentType: 'json',
 			data: JSON.stringify(invitation)
@@ -171,8 +168,9 @@ export default BaseService.extend({
 			return;
 		}
 
+		let folderId = folder.get('id');
 		this.set('currentFolder', folder);
-		this.get('localStorage').storeSessionItem("folder", get(folder, 'id'));
+		this.get('localStorage').storeSessionItem("folder", folderId);
 		this.set('canEditCurrentFolder', false);
 
 		let userId = this.get('sessionService.user.id');
@@ -180,7 +178,7 @@ export default BaseService.extend({
 			userId = "0";
 		}
 
-		let url = `users/${userId}/permissions`;
+		let url = `space/${folderId}/permissions/user`;
 
 		return this.get('ajax').request(url).then((folderPermissions) => {
 			// safety check
@@ -191,7 +189,6 @@ export default BaseService.extend({
 			}
 
 			let result = [];
-			let folderId = folder.get('id');
 
 			folderPermissions.forEach((item) => {
 				if (item.folderId === folderId) {

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

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

gui/app/styles/view/folder/settings.scss

@@ -0,0 +1,42 @@
+.space-settings {
+	> .panel {
+		@include content-container();
+		@include ease-in();
+		@extend .transition-all;
+	}
+
+	.permissions-table {
+        padding: 0;
+        margin: 0 0 30px 0;
+		width: 100%;
+
+		> .row {
+			padding: 8px 0;
+
+			> .permission-name-cell {
+				padding: 10px 5px;
+				font-size: 1.1rem;
+			}
+
+			> .permission-roles-cell {
+				background-color: $color-off-white;
+				margin-top: 10px;
+				margin-left: 40px;
+				padding: 10px 10px;
+				display: inline-block;
+
+				> .role-category {
+					color: $color-gray;
+					font-weight: bold;
+					display: inline-block;
+				}
+
+				> label {
+					color: $color-gray;
+					font-weight: normal;
+				}
+			}
+		}
+    }
+}
+

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

@@ -1,57 +0,0 @@
-.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;
-		table-layout: fixed;
-		width: 100%;
-		white-space: nowrap;
-
-        > thead {
-            > tr {
-                > th {
-                    font-weight: bold;
-                    text-align: center;
-                }
-
-				> th:nth-child(1) {
-					width: 70%;
-                }
-
-                > th:nth-child(2), td:nth-child(3) {
-					width: 20%;
-                }
-			}
-        }
-
-        > tbody {
-			width: 300px;
-
-            > tr {
-                > td {
-                    padding: 8px 0;
-					@extend .truncate;
-                }
-
-				> td:nth-child(1) {
-					text-align: left;
-                }
-
-                > td:nth-child(2), td:nth-child(3) {
-                    text-align: center;
-                }
-            }
-        }
-    }
-}
-

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

@@ -28,7 +28,19 @@
 				</ul>
 			{{/dropdown-dialog}}
 		{{else}}
-			<div class="margin-top-35"></div>
+			{{#if isFolderOwner}}
+				{{#link-to 'folder.settings' folder.id folder.slug}}{{model.document.name}}
+					<div class="round-button button-gray" id="space-settings-button" data-tooltip="Manage permissions" data-tooltip-position="top center">
+						<i class="material-icons">settings</i>
+					</div>
+				{{/link-to}}
+				<div class="button-gap"></div>
+				<div class="round-button button-gray" id="space-delete-button" data-tooltip="Delete everything" data-tooltip-position="top center">
+					<i class="material-icons">delete</i>
+				</div>
+			{{else}}
+				<div class="margin-top-35"></div>
+			{{/if}}
 	    {{/if}}
 	</div>
 {{/if}}

gui/app/templates/components/folder/invite-user.hbs

@@ -1,6 +1,9 @@
-<div class="sidebar-panel">
-	<div class="title">Invite Users</div>
-	<div class="sidebar-folder-share folder-sidebar-form-wrapper">
+<div class="space-settings">
+	<div class="panel">
+		<div class="form-header">
+			<div class="title">Invite</div>
+			<div class="tip">Share this space with co-workers</div>
+		</div>
 		<div class="input-control">
 			<label>Email</label>
 			<div class="tip">Comma separate multiple email addresses</div>
@@ -8,9 +11,9 @@
 		</div>
 		<div class="input-control">
 			<label>Message</label>
-			<div class="tip">Explain why they are being invited</div>
+			<div class="tip">Explain why they are being invited to this space</div>
 			{{textarea id="explainInvite" value=inviteMessage class="input-transparent" rows="5"}}
 		</div>
-		<div class="regular-button button-blue" {{ action 'onShare' }}>Share</div>
+		<div class="regular-button button-blue" {{ action 'onShare' }}>Invite</div>
 	</div>
 </div>

gui/app/templates/components/folder/permission-admin.hbs

@@ -0,0 +1,42 @@
+<div class="space-settings">
+	<div class="panel">
+		<div class="form-header">
+			<div class="title">Permissions</div>
+			<div class="tip">Define who can do what in this space</div>
+		</div>
+		<div class="input-control">
+			<div class="permissions-table">
+				{{#each permissions key="@index" as |permission|}}
+					<div class="row">
+						<div class="permission-name-cell">{{permission.fullname}}</div>
+						<div class="permission-roles-cell">
+							<span class="role-category">Space:&nbsp;</span>
+							<input type="checkbox" id="space-role-view-{{permission.userId}}" checked={{permission.canView}} />
+							<label for="space-role-view-{{permission.userId}}">view</label>&nbsp;&nbsp;
+							<input type="checkbox" id="space-role-manage-{{permission.userId}}" checked={{permission.canView}} />
+							<label for="space-role-manage-{{permission.userId}}">manage</label>&nbsp;&nbsp;
+							<input type="checkbox" id="space-role-owner-{{permission.userId}}" checked={{permission.canView}} />
+							<label for="space-role-owner-{{permission.userId}}">owner</label>&nbsp;&nbsp;
+							&nbsp;&nbsp;&nbsp;&nbsp;
+							<span class="role-category">Document:&nbsp;</span>
+							<input type="checkbox" id="doc-role-add-{{permission.userId}}" checked={{permission.canView}} />
+							<label for="doc-role-add-{{permission.userId}}">create</label>&nbsp;&nbsp;
+							<input type="checkbox" id="doc-role-edit-{{permission.userId}}" checked={{permission.canView}} />
+							<label for="doc-role-edit-{{permission.userId}}">edit</label>&nbsp;&nbsp;
+							<input type="checkbox" id="doc-role-delete-{{permission.userId}}" checked={{permission.canView}} />
+							<label for="doc-role-delete-{{permission.userId}}">delete</label>&nbsp;&nbsp;
+							<input type="checkbox" id="doc-role-move-{{permission.userId}}" checked={{permission.canView}} />
+							<label for="doc-role-move-{{permission.userId}}">move</label>&nbsp;&nbsp;
+							<input type="checkbox" id="doc-role-copy-{{permission.userId}}" checked={{permission.canView}} />
+							<label for="doc-role-copy-{{permission.userId}}">copy</label>&nbsp;&nbsp;
+							<input type="checkbox" id="doc-role-template-{{permission.userId}}" checked={{permission.canView}} />
+							<label for="doc-role-template-{{permission.userId}}">templates</label>&nbsp;&nbsp;
+						</div>
+					</div>
+				{{/each}}
+			</div>
+		</div>
+
+		<div class="regular-button button-blue" {{action 'setPermissions'}}>GRANT</div>
+	</div>
+</div>

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

@@ -1,30 +0,0 @@
-<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&nbsp;</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>