delete docs moved to new UX

gui/app/components/document/document-attachments.js

@@ -10,7 +10,6 @@
 // https://documize.com
 
 import { computed } from '@ember/object';
-
 import { notEmpty } from '@ember/object/computed';
 import { inject as service } from '@ember/service';
 import Component from '@ember/component';

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

@@ -10,18 +10,43 @@
 // https://documize.com
 
 import { computed } from '@ember/object';
-
 import Component from '@ember/component';
 
 export default Component.extend({
+	showDeleteDialog: false,
+	selectedDocuments: [],
+
 	showAdd: computed('permissions', 'documents', function() {
 		return this.get('documents.length') === 0 && this.get('permissions.documentAdd');
 	}),
 	showLockout: computed('permissions', 'documents', function() {
 		return this.get('documents.length') === 0 && !this.get('permissions.documentAdd');
 	}),
+	hasDocumentActions: computed('permissions', function() {
+		return this.get('permissions.documentDelete') || this.get('permissions.documentMove');
+	}),
 
     actions: {
+		onConfirmDeleteDocuments() {
+			this.set('showDeleteDialog', true);
+		},
+
+		onDeleteDocuments() {
+			this.set('showDeleteDialog', false);
+			let list = this.get('selectedDocuments');
+
+			// list.forEach(d => {
+			// 	let doc = this.get('documents').findBy('id', d);
+			// 	doc.set('selected', false);
+			// });
+
+			this.attrs.onDeleteDocument(list);
+
+			this.set('selectedDocuments', []);
+
+			return true;
+		},
+
         selectDocument(documentId) {
             let doc = this.get('documents').findBy('id', documentId);
             let list = this.get('selectedDocuments');

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

@@ -19,8 +19,8 @@ import TooltipMixin from '../../mixins/tooltip';
 
 export default Component.extend(NotifierMixin, TooltipMixin, {
 	folderService: service('folder'),
-	folderName: '',
-	hasNameError: empty('folderName'),
+	spaceName: '',
+	hasNameError: empty('spaceName'),
 	editMode: false,
 
 	keyUp(e) {
@@ -31,7 +31,7 @@ export default Component.extend(NotifierMixin, TooltipMixin, {
 
 	actions: {
 		toggleEdit() {
-			this.set('folderName', this.get('folder.name'));
+			this.set('spaceName', this.get('space.name'));
 			this.set('editMode', true);
 
 			schedule('afterRender', () => {
@@ -44,11 +44,8 @@ export default Component.extend(NotifierMixin, TooltipMixin, {
 				return;
 			}
 
-			this.set('folder.name', this.get('folderName'));
-
-			this.get('folderService').save(this.get('folder'));
-			this.showNotification('Saved');
-
+			this.set('space.name', this.get('spaceName'));
+			this.get('folderService').save(this.get('space'));
 			this.set('editMode', false);
 		},
 

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

@@ -42,12 +42,6 @@ export default Component.extend(NotifierMixin, TooltipMixin, AuthMixin, {
 		let folder = this.get('folder');
 		let targets = _.reject(this.get('folders'), {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.set('movedFolderOptions', targets);
 	},
 
@@ -74,41 +68,6 @@ export default Component.extend(NotifierMixin, TooltipMixin, AuthMixin, {
 	},
 
 	actions: {
-		onUnpin() {
-			this.get('pinned').unpinItem(this.get('pinState.pinId')).then(() => {
-				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('folder.id')
-			};
-
-			if (is.empty(pin.pin)) {
-				$('#pin-space-name').addClass('error').focus();
-				return false;
-			}
-
-			this.get('pinned').pinItem(pin).then((pin) => {
-				this.set('pinState.isPinned', true);
-				this.set('pinState.pinId', pin.get('id'));
-				this.eventBus.publish('pinChange');
-				this.renderTooltips();
-			});
-
-			return true;
-		},
-
-		deleteDocuments() {
-			this.attrs.onDeleteDocument();
-		},
-
 		setMoveFolder(folderId) {
 			this.set('moveFolderId', folderId);
 

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

@@ -99,8 +99,7 @@ export default Component.extend(NotifierMixin, TooltipMixin, AuthMixin, {
 			this.send("showNotification", "Moved");
 		},
 
-		onDeleteDocument() {
-			let documents = this.get('selectedDocuments');
+		onDeleteDocument(documents) {
 			let self = this;
 			let promises = [];
 
@@ -113,10 +112,9 @@ export default Component.extend(NotifierMixin, TooltipMixin, AuthMixin, {
 				documents.forEach(function (document) {
 					document.set('selected', false);
 				});
-				this.set('documents', documents);
 
+				this.set('documents', documents);
 				this.set('selectedDocuments', []);
-				this.send("showNotification", "Deleted");
 				this.attrs.onRefresh();
 			});
 		},

gui/app/components/ui/ui-confirm-dialog.js

@@ -0,0 +1,62 @@
+// 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 Component from '@ember/component';
+import stringUtil from '../../utils/string';
+
+export default Component.extend({
+	contentId: '',
+	cancelCaption: 'Cancel',
+	confirmCaption: 'OK',
+	title: 'Confirm',
+	show: false,
+
+	didInsertElement() {
+		this._super(...arguments);
+		this.set("contentId", 'confirm-modal-' + stringUtil.makeId(10));
+	},
+
+	didUpdateAttrs() {
+		this._super(...arguments);
+		let modalId = '#' + this.get('contentId');
+
+		if (this.get('show')) {
+			$(modalId).modal({});
+			$(modalId).modal('show');
+			let self = this;
+			$(modalId).on('hidden.bs.modal', function(e) { // eslint-disable-line no-unused-vars
+				self.set('show', false);
+				$(modalId).modal('dispose');
+			});
+		} else {
+			$(modalId).modal('hide');
+			$(modalId).modal('dispose');
+		}
+	},
+
+	actions: {
+		onCancel() {
+			$('#' + this.get('contentId')).modal('dispose');
+		},
+
+		onAction(e) {
+			e.preventDefault();
+
+			if (this.get('onAction') === null) {
+				return;
+			}
+
+			if (this.attrs.onAction()) {
+				this.set('show', false);
+			}
+		}
+	}
+});

gui/app/styles/view/space.scss

@@ -80,6 +80,14 @@
 					color: $color-checkbox;
 				}
 			}
+
+			> .actions {
+				position: absolute;
+				display: none;
+				bottom: 2px;
+				right: 12px;
+				cursor: pointer;
+			}
 		}
 
 		> .selected {
@@ -88,6 +96,10 @@
 			> .checkbox {
 				display: block;
 			}
+
+			> .actions {
+				display: block;
+			}
 		}
 	}
 

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

@@ -398,6 +398,48 @@
 	}
 }
 
+.button-icon-blue {
+	display: inline-block;
+	cursor: default;
+	@include ease-in();
+
+	> i {
+		color: $color-blue;
+		font-size: 2rem;
+		@include ease-in();
+	}
+
+	&:hover {
+		> i {
+			color: darken($color-blue, 5%);
+		}
+	}
+}
+
+.button-icon-red {
+	display: inline-block;
+	cursor: default;
+	@include ease-in();
+
+	> i {
+		color: $color-red;
+		font-size: 2rem;
+		@include ease-in();
+	}
+
+	&:hover {
+		> i {
+			color: darken($color-red, 5%);
+		}
+	}
+}
+
+.button-icon-small {
+	> i {
+		font-size: 1.3rem;
+	}
+}
+
 .button-icon-gap {
 	display: inline-block;
 	margin-left: 5px;

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

@@ -2,12 +2,12 @@
 	<ul class="documents">
 		{{#each documents key="id" as |document|}}
 			<li class="document {{if document.selected "selected"}}" id="document-{{document.id}}">
-				{{#link-to 'document.index' folder.id folder.slug document.id document.slug}}
+				{{#link-to 'document.index' space.id space.slug document.id document.slug}}
 					<div class="title">{{ document.name }}</div>
 					<div class="snippet">{{ document.excerpt }}</div>
 					{{folder/document-tags documentTags=document.tags}}
 				{{/link-to}}
-				{{#if session.authenticated}}
+				{{#if hasDocumentActions}}
 					<div class="checkbox" {{action 'selectDocument' document.id}}>
 						{{#if document.selected}}
 							<i class="material-icons">check_box</i>
@@ -15,12 +15,32 @@
 							<i class="material-icons">check_box_outline_blank</i>
 						{{/if}}
 					</div>
+
+					{{#if document.selected}}
+						<div class="actions">
+							{{#if permissions.documentMove}}
+								<div class="move-documents-button button-icon-blue button-icon-small align-middle">
+									<i class="material-icons">compare_arrows</i>
+								</div>
+								<div class="button-icon-gap" />
+							{{/if}}
+							{{#if permissions.documentDelete}}
+								<div class="delete-documents-button button-icon-red button-icon-small align-middle" {{action 'onConfirmDeleteDocuments'}}>
+									<i class="material-icons">delete</i>
+								</div>
+							{{/if}}
+						</div>
+					{{/if}}
 				{{/if}}
 			</li>
 		{{/each}}
 	</ul>
 </div>
 
+{{#ui/ui-confirm-dialog title="Delete Documents" confirmCaption="Delete" show=showDeleteDialog onAction=(action 'onDeleteDocuments')}}
+	<p>Are you sure you want to delete the {{selectedDocuments.length}} selected documents?</p>
+{{/ui/ui-confirm-dialog}}
+
 {{#if showAdd}}
 	{{empty-state icon="direct" message="You can create new documents via the green + button"}}
 {{/if}}

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

@@ -6,7 +6,7 @@
 				<div class="view-space">
 					<div class="heading">
 						<h1 class="view-heading {{if permissions.spaceOwner 'cursor-pointer'}}" onclick={{if permissions.spaceOwner (action 'toggleEdit')}}>
-							{{folder.name}}
+							{{space.name}}
 						</h1>
 					</div>
 				</div>
@@ -15,7 +15,7 @@
 					<div class="view-space">
 						<div class="heading">
 							<div class="form-group">
-								{{input id="folder-name" type="text" value=folderName class=(if hasNameError 'form-control is-invalid' 'form-control') placeholder="Space name" autocomplete="off"}}
+								{{input id="space-name" type="text" value=spaceName class=(if hasNameError 'form-control is-invalid' 'form-control') placeholder="Space name" autocomplete="off"}}
 								<small class="form-text text-muted">Press Enter to save or Escape to cancel</small>
 							</div>
 						</div>

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

@@ -1,20 +1,7 @@
 <div class="pull-right hidden-xs hidden-sm">
 	{{#if hasSelectedDocuments}}
 
-		{{#if permissions.documentMove}}
-			<div class="round-button button-blue" id="move-documents-button" data-tooltip="Move documents" data-tooltip-position="top center">
-				<i class="material-icons">folder</i>
-			</div>
-		{{/if}}
-
-		{{#if permissions.documentDelete}}
-			<div class="button-gap"></div>
-			<div class="round-button button-red" id="delete-documents-button" data-tooltip="Delete documents" data-tooltip-position="top center">
-				<i class="material-icons">delete</i>
-			</div>
-		{{/if}}
-
-		{{#if permissions.documentMove}}
+		{{#if xxx}}
 			{{#dropdown-dialog target="move-documents-button" position="bottom right" button="Move" color="flat-blue" onAction=(action 'moveDocuments')}}
 				<p class="heading">Select destination space</p>
 				<ul class="move-document-options">
@@ -32,7 +19,7 @@
 			{{/dropdown-dialog}}
 		{{/if}}
 
-		{{#if permissions.documentDelete}}
+		{{#if xxx}}
 			{{#dropdown-dialog target="delete-documents-button" position="bottom right" button="Delete" color="flat-red" onAction=(action 'deleteDocuments')}}
 				<p>Are you sure you want to delete selected documents?</p>
 				<p>There is no undo!</p>
@@ -48,14 +35,6 @@
 			<div class="button-gap"></div>
 		{{/if}}
 
-		{{#if spaceSettings}}
-			<div class="button-gap"></div>
-			{{#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}}
-		{{/if}}
 
 	{{/if}}
 </div>

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

@@ -1,4 +1,4 @@
-{{folder/space-heading folder=folder permissions=permissions}}
+{{folder/space-heading space=space permissions=permissions}}
 
 {{#if hasCategories}}
 	<div class="clearfix">
@@ -6,9 +6,9 @@
 			<div class="view-space">
 				<div class="filter-caption mt-4">{{documents.length}} documents</div>
 				<ul class="tabnav-control">
-					<li class="tab {{if spaceSelected 'selected'}}" {{action 'onDocumentFilter' 'space' folder.id}}>All ({{documents.length}})</li>
+					<li class="tab {{if spaceSelected 'selected'}}" {{action 'onDocumentFilter' 'space' space.id}}>All ({{documents.length}})</li>
 					{{#if (gt rootDocCount 0)}}
-						<li class="tab {{if uncategorizedSelected 'selected'}}" {{action 'onDocumentFilter' 'uncategorized' folder.id}}>Uncategorized ({{rootDocCount}})</li>
+						<li class="tab {{if uncategorizedSelected 'selected'}}" {{action 'onDocumentFilter' 'uncategorized' space.id}}>Uncategorized ({{rootDocCount}})</li>
 					{{/if}}
 				</ul>
 			</div>
@@ -26,8 +26,9 @@
 	</div>
 {{/if}}
 
-{{folder/documents-list documents=filteredDocs folders=folders folder=folder
-	templates=templates permissions=permissions selectedDocuments=(mut selectedDocuments)}}
+{{folder/documents-list documents=filteredDocs spaces=spaces space=space
+	templates=templates permissions=permissions
+	onDeleteDocument=(action 'onDeleteDocument')}}
 
 {{#if showStartDocument}}
 	{{folder/start-document folder=folder templates=templates permissions=permissions
@@ -35,7 +36,7 @@
 {{/if}}
 
 {{folder/space-toolbar folders=folders folder=folder
-	permissions=permissions hasSelectedDocuments=hasSelectedDocuments
-	onDeleteDocument=(action 'onDeleteDocument') onMoveDocument=(action 'onMoveDocument')
+	permissions=permissions
+	onMoveDocument=(action 'onMoveDocument')
 	onStartDocument=(action 'onStartDocument')}}
 

gui/app/templates/components/ui/ui-confirm-dialog.hbs

@@ -0,0 +1,16 @@
+<div id="{{contentId}}" class="modal" tabindex="-1" role="dialog">
+	<div class="modal-dialog" role="document">
+		<div class="modal-content">
+			<div class="modal-header">{{title}}</div>
+			<div class="modal-body">
+				<form onsubmit={{action 'onAction'}}>
+					 {{yield}}
+				</form>
+			</div>
+			<div class="modal-footer">
+				<button type="button" class="btn btn-light" data-dismiss="modal" {{action 'onCancel'}}>{{cancelCaption}}</button>
+				<button type="button" class="btn btn-danger font-weight-bold" onclick={{action 'onAction'}}>{{confirmCaption}}</button>
+			</div>
+		</div>
+	</div>
+</div>