delete space, pin space migrated to new UX

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

@@ -10,7 +10,6 @@
 // https://documize.com
 
 import { computed } from '@ember/object';
-
 import Component from '@ember/component';
 import { inject as service } from '@ember/service';
 import NotifierMixin from '../../mixins/notifier';
@@ -59,34 +58,6 @@ export default Component.extend(NotifierMixin, TooltipMixin, AuthMixin, {
 
 	renderTooltips() {
 		this.destroyTooltips();
-
-		if (this.get('hasSelectedDocuments')) {
-			if (this.get('permissions.documentMove')) {
-				this.addTooltip(document.getElementById("move-documents-button"));
-			}
-
-			if (this.get('permissions.documentDelete')) {
-				this.addTooltip(document.getElementById("delete-documents-button"));
-			}
-		} else {
-			if (this.get('permissions.spaceOwner')) {
-				this.addTooltip(document.getElementById("space-delete-button"));
-			}
-
-			if (this.get('permissions.spaceManage')) {
-				this.addTooltip(document.getElementById("space-settings-button"));
-			}
-
-			if (this.get('pinState.isPinned')) {
-				this.addTooltip(document.getElementById("space-unpin-button"));
-			} else {
-				this.addTooltip(document.getElementById("space-pin-button"));
-			}
-
-			if (this.get('permissions.documentAdd')) {
-				this.addTooltip(document.getElementById("document-add-button"));
-			}
-		}
 	},
 
 	willDestroyElement() {
@@ -138,23 +109,6 @@ export default Component.extend(NotifierMixin, TooltipMixin, AuthMixin, {
 			this.attrs.onDeleteDocument();
 		},
 
-		deleteSpace() {
-			let spaceName = this.get('folder').get('name');
-			let spaceNameTyped = this.get('deleteSpaceName');
-
-			if (spaceNameTyped !== spaceName || spaceNameTyped === '' || spaceName === '') {
-				$("#delete-space-name").addClass("error").focus();
-				return false;
-			}
-
-			this.set('deleteSpaceName', '');
-			$("#delete-space-name").removeClass("error");
-
-			this.attrs.onDeleteSpace();
-
-			return true;
-		},
-
 		setMoveFolder(folderId) {
 			this.set('moveFolderId', folderId);
 

gui/app/components/folder/space-view.js

@@ -121,14 +121,6 @@ export default Component.extend(NotifierMixin, TooltipMixin, AuthMixin, {
 			});
 		},
 
-		onDeleteSpace() {
-			this.get('folderService').delete(this.get('folder.id')).then(() => { /* jshint ignore:line */
-				this.showNotification("Deleted");
-				this.get('localStorage').clearSessionItem('folder');
-				this.get('router').transitionTo('application');
-			});
-		},
-
 		onImport() {
 			this.attrs.onRefresh();
 		},

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

@@ -11,17 +11,45 @@
 
 import Component from '@ember/component';
 import { schedule } from '@ember/runloop';
-import { notEmpty } from '@ember/object/computed';
+import { computed } from '@ember/object';
+import { inject as service } from '@ember/service';
 import NotifierMixin from '../../mixins/notifier';
 import AuthMixin from '../../mixins/auth';
 
 export default Component.extend(NotifierMixin, AuthMixin, {
+	session: service(),
+	appMeta: service(),
+	pinned: service(),
 	spaceName: '',
 	copyTemplate: true,
 	copyPermission: true,
 	copyDocument: false,
 	clonedSpace: { id: '' },
-	hasClone: notEmpty('clonedSpace.id'),
+	pinState : {
+		isPinned: false,
+		pinId: '',
+		newName: ''
+	},
+	spaceSettings: computed('permissions', function() {
+		return this.get('permissions.spaceOwner') || this.get('permissions.spaceManage');
+	}),
+	deleteSpaceName: '',
+
+	didReceiveAttrs() {
+		this._super(...arguments);
+
+		let folder = this.get('space');
+		let targets = _.reject(this.get('spaces'), {id: folder.get('id')});
+
+		this.get('pinned').isSpacePinned(folder.get('id')).then((pinId) => {
+			this.set('pinState.pinId', pinId);
+			this.set('pinState.isPinned', pinId !== '');
+			this.set('pinState.newName', folder.get('name'));
+			this.renderTooltips();
+		});
+
+		this.set('movedFolderOptions', targets);
+	},
 
 	didInsertElement() {
 		this._super(...arguments);
@@ -33,9 +61,65 @@ export default Component.extend(NotifierMixin, AuthMixin, {
 		});
 	},
 
+	renderTooltips() {
+		schedule('afterRender', () => {
+			$('#pin-space-button').tooltip('dispose');
+			$('body').tooltip({selector: '#pin-space-button'});
+		});
+	},
+
 	actions: {
-		onCloneSpaceSelect(sp) {
+		onUnpin() {
-			this.set('clonedSpace', sp)
+			this.get('pinned').unpinItem(this.get('pinState.pinId')).then(() => {
+				$('#pin-space-button').tooltip('dispose');
+				this.set('pinState.isPinned', false);
+				this.set('pinState.pinId', '');
+				this.eventBus.publish('pinChange');
+				this.renderTooltips();
+			});
+		},
+
+		onPin() {
+			let pin = {
+				pin: this.get('pinState.newName'),
+				documentId: '',
+				folderId: this.get('space.id')
+			};
+
+			if (is.empty(pin.pin)) {
+				$('#pin-space-name').addClass('error').focus();
+				return false;
+			}
+
+			this.get('pinned').pinItem(pin).then((pin) => {
+				$('#pin-space-button').tooltip('dispose');
+				this.set('pinState.isPinned', true);
+				this.set('pinState.pinId', pin.get('id'));
+				this.eventBus.publish('pinChange');
+				this.renderTooltips();
+			});
+
+			return true;
+		},
+
+		onDeleteSpace(e) {
+			e.preventDefault();
+
+			let spaceName = this.get('space').get('name');
+			let spaceNameTyped = this.get('deleteSpaceName');
+
+			if (spaceNameTyped !== spaceName || spaceNameTyped === '' || spaceName === '') {
+				$("#delete-space-name").addClass("is-invalid").focus();
+				return;
+			}
+
+			this.set('deleteSpaceName', '');
+			$("#delete-space-name").removeClass("is-invalid");
+
+			this.attrs.onDeleteSpace(this.get('space.id'));
+
+			$('#delete-space-modal').modal('hide');
+			$('#delete-space-modal').modal('dispose');
 		},
 
 		onAddSpace(e) {

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

@@ -18,8 +18,6 @@ export default Controller.extend(NotifierMixin, {
 	documentService: service('document'),
 	folderService: service('folder'),
 	localStorage: service('localStorage'),
-	queryParams: ['tab'],
-	tab: 'index',
 
 	actions: {
 		onAddSpace(payload) {
@@ -32,6 +30,14 @@ export default Controller.extend(NotifierMixin, {
 			});
 		},
 
+		onDeleteSpace(id) {
+			this.get('folderService').delete(id).then(() => { /* jshint ignore:line */
+				this.showNotification("Deleted");
+				this.get('localStorage').clearSessionItem('folder');
+				this.transitionToRoute('folders');
+			});
+		},
+
 		onRefresh() {
 			this.get('target._routerMicrolib').refresh();
 		}

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

@@ -1,7 +1,7 @@
 {{layout/nav-bar}}
 
 <div class="container">
-	{{toolbar/for-space spaces=model.folders space=model.folder permissions=model.permissions}}
+	{{toolbar/for-space spaces=model.folders space=model.folder permissions=model.permissions onDeleteSpace=(action 'onDeleteSpace')}}
 
 	{{folder/space-view
 		folders=model.folders

gui/app/styles/color.scss

@@ -23,13 +23,14 @@ $color-off-white: #f5f5f5;
 
 $color-dark: #434343;
 $color-gray: #8b9096;
+$color-gray-light: #d8d8d8;
 $color-border: #d3d3d3;
 
 // colors
 $color-red: #b1251b;
 $color-green: #1b701e;
 $color-blue: #2667af;
-$color-goldy: #cc9933;
+$color-goldy: #FFD700;
 
 // widgets
 $color-checkbox: #2667af;

gui/app/styles/view/toolbar.scss

@@ -12,6 +12,7 @@
 			margin-right: 30px;
 			cursor: pointer;
 			@include ease-in();
+			border-bottom: 2px solid $color-gray-light;
 
 			&:hover {
 				color: $color-link;

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

@@ -344,6 +344,60 @@
 	}
 }
 
+.button-icon-gray {
+	display: inline-block;
+	cursor: default;
+	@include ease-in();
+
+	> i {
+		color: $color-gray-light;
+		font-size: 2rem;
+		@include ease-in();
+	}
+
+	&:hover {
+		> i {
+			color: darken($color-gray-light, 15%);
+		}
+	}
+}
+
+.button-icon-gold {
+	display: inline-block;
+	cursor: default;
+	@include ease-in();
+
+	> i {
+		color: $color-goldy;
+		font-size: 2rem;
+		@include ease-in();
+	}
+
+	&:hover {
+		> i {
+			color: darken($color-goldy, 5%);
+		}
+	}
+}
+
+.button-icon-danger {
+	display: inline-block;
+	cursor: default;
+	@include ease-in();
+
+	> i {
+		color: $color-gray-light;
+		font-size: 2rem;
+		@include ease-in();
+	}
+
+	&:hover {
+		> i {
+			color: $color-red;
+		}
+	}
+}
+
 .button-icon-gap {
 	display: inline-block;
 	margin-left: 5px;

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

@@ -48,16 +48,6 @@
 			<div class="button-gap"></div>
 		{{/if}}
 
-		{{#if pinState.isPinned}}
-			<div class="round-button button-gray" id="space-unpin-button" data-tooltip="Remove favorite" data-tooltip-position="top center" {{action 'onUnpin'}}>
-				<i class="material-icons">favorite</i>
-			</div>
-		{{else if session.authenticated}}
-			<div class="round-button button-gray" id="space-pin-button" data-tooltip="Mark favorite" data-tooltip-position="top center">
-				<i class="material-icons">favorite_border</i>
-			</div>
-		{{/if}}
-
 		{{#if spaceSettings}}
 			<div class="button-gap"></div>
 			{{#link-to 'folder.settings' folder.id folder.slug}}{{model.document.name}}
@@ -67,35 +57,6 @@
 			{{/link-to}}
 		{{/if}}
 
-		{{#if permissions.spaceOwner}}
-			<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>
-		{{/if}}
-
-		{{#if session.authenticated}}
-			{{#unless pinState.isPinned}}
-				{{#dropdown-dialog target="space-pin-button" position="bottom right" button="Pin" color="flat-green" onAction=(action 'onPin') focusOn="pin-space-name"}}
-					<div class="input-control">
-						<label>Favorite Space</label>
-						<div class="tip">Provide short name</div>
-						{{input type='text' id="pin-space-name" value=pinState.newName}}
-					</div>
-				{{/dropdown-dialog}}
-			{{/unless}}
-		{{/if}}
-
-		{{#if permissions.spaceOwner}}
-			{{#dropdown-dialog target="space-delete-button" position="bottom right" button="Delete" color="flat-red" onAction=(action 'deleteSpace')}}
-				<p>Are you sure you want to delete this space and all associated documents?</p>
-				<div class="input-control">
-					<div class="tip">Please type the space name to confirm</div>
-					{{input type='text' id="delete-space-name" value=deleteSpaceName}}
-				</div>
-			{{/dropdown-dialog}}
-		{{/if}}
-
 	{{/if}}
 </div>
 

gui/app/templates/components/folder/space-view.hbs

@@ -37,5 +37,5 @@
 {{folder/space-toolbar folders=folders folder=folder
 	permissions=permissions hasSelectedDocuments=hasSelectedDocuments
 	onDeleteDocument=(action 'onDeleteDocument') onMoveDocument=(action 'onMoveDocument')
-	onDeleteSpace=(action 'onDeleteSpace') onStartDocument=(action 'onStartDocument')}}
+	onStartDocument=(action 'onStartDocument')}}
 

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

@@ -3,56 +3,77 @@
 		{{#link-to "folders" class="link" tagName="li"}}SPACES{{/link-to}}
 	{{/toolbar/t-links}}
 	{{#toolbar/t-actions}}
-		{{#if session.isEditor}}
+		{{#if pinState.isPinned}}
-			<button type="button" class="btn btn-success font-weight-bold" data-toggle="modal" data-target="#add-space-modal" data-backdrop="static">+ DOCUMENT</button>
+			<div id="pin-space-button" class="button-icon-gold align-middle" data-placement="top" title="Favorite" {{action 'onUnpin'}}>
-			<div class="modal" tabindex="-1" role="dialog" id="add-space-modal">
+				<i class="material-icons">star</i>
+			</div>
+			<div class="button-icon-gap" />
+		{{else if session.authenticated}}
+			<div id="pin-space-button" class="button-icon-gray align-middle" data-placement="top" title="Favorite" {{action 'onPin'}}>
+				<i class="material-icons">star</i>
+			</div>
+			<div class="button-icon-gap" />
+		{{/if}}
+
+		{{#if spaceSettings}}
+			{{#link-to 'folder.settings' space.id space.slug}}
+				<div id="space-settings-button" class="button-icon-gray align-middle" data-placement="top" title="Permissions">
+					<i class="material-icons">settings</i>
+				</div>
+				<div class="button-icon-gap" />
+			{{/link-to}}
+		{{/if}}
+
+		{{#if permissions.spaceOwner}}
+			<div id="space-delete-button" class="button-icon-danger align-middle" data-placement="top" title="Delete" data-toggle="modal" data-target="#delete-space-modal" data-backdrop="static">
+				<i class="material-icons">delete</i>
+			</div>
+			<div class="button-icon-gap" />
+			<div class="modal" tabindex="-1" role="dialog" id="delete-space-modal">
 				<div class="modal-dialog" role="document">
 					<div class="modal-content">
-						<div class="modal-header">Add Space</div>
+						<div class="modal-header">Confirm Delete</div>
 						<div class="modal-body">
-							<form onsubmit={{action 'onAddSpace'}}>
+							<form onsubmit={{action 'onDeleteSpace'}}>
+								<p>Are you sure you want to delete this space and all documents?</p>
 								<div class="form-group">
-										<label for="new-space-name">Space Name</label>
+									<label for="new-space-name">Please type space name to confirm</label>
-									{{input type='text' id="new-space-name" class="form-control mousetrap" placeholder="Space name" value=spaceName}}
+									{{input type='text' id="delete-space-name" class="form-control mousetrap" placeholder="Space name" value=deleteSpaceName}}
-									<small id="emailHelp" class="form-text text-muted">Characters and numbers only</small>
+									<small class="form-text text-muted">This will delete all documents and templates within this space!</small>
-								</div>
-								<div class="form-group">
-										<label for="clone-space-dropdown">Clone Space</label>
-									{{ui-select id="clone-space-dropdown" content=spaces prompt="select space" action=(action 'onCloneSpaceSelect') optionValuePath="id" optionLabelPath="name" selection=cloneSpace}}
-									<small id="emailHelp" class="form-text text-muted">Copy templates, permissions, documents from existing space</small>
-									<div class="margin-top-10" />
-									{{#if hasClone}}
-										{{#ui/ui-checkbox selected=copyTemplate}}Copy templates{{/ui/ui-checkbox}}
-										{{#ui/ui-checkbox selected=copyPermission}}Copy permissions{{/ui/ui-checkbox}}
-										{{#ui/ui-checkbox selected=copyDocument}}Copy documents{{/ui/ui-checkbox}}
-									{{/if}}
 								</div>
 							</form>
 						</div>
 						<div class="modal-footer">
 							<button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
-							<button type="button" class="btn btn-success font-weight-bold" onclick={{action 'onAddSpace'}}>Add</button>
+							<button type="button" class="btn btn-danger font-weight-bold" onclick={{action 'onDeleteSpace'}}>Delete</button>
 						</div>
 					</div>
 				</div>
 			</div>
 		{{/if}}
-	{{/toolbar/t-actions}}
-{{/toolbar/t-toolbar}}
-
-
-<div class="row">
-	<div class="col col-sm-8">
-		<div class="toolbar">
-			<ul class="links">
-			</ul>
-		</div>
-	</div>
-	<div class="col col-sm-4">
-		<div class="toolbar">
-			<div class="buttons">
 
+		<div class="button-icon-gap" />
+		<button type="button" class="btn btn-success font-weight-bold" data-toggle="modal" data-target="#add-space-modal" data-backdrop="static">+ DOCUMENT</button>
+		<div class="modal" tabindex="-1" role="dialog" id="add-space-modal">
+			<div class="modal-dialog" role="document">
+				<div class="modal-content">
+					<div class="modal-header">Add Space</div>
+					<div class="modal-body">
+						<form onsubmit={{action 'onAddSpace'}}>
+							<div class="form-group">
+									<label for="new-space-name">Space Name</label>
+								{{input type='text' id="new-space-name" class="form-control mousetrap" placeholder="Space name" value=spaceName}}
+								<small id="emailHelp" class="form-text text-muted">Characters and numbers only</small>
+							</div>
+						</form>
+					</div>
+					<div class="modal-footer">
+						<button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
+						<button type="button" class="btn btn-success font-weight-bold" onclick={{action 'onAddSpace'}}>Add</button>
+					</div>
+				</div>
 			</div>
 		</div>
-	</div>
+
-</div>
+	{{/toolbar/t-actions}}
+{{/toolbar/t-toolbar}}