upgraded material icon fonts, space invite popup UX

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

@@ -1,73 +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 Component from '@ember/component';
-
-import { inject as service } from '@ember/service';
-import NotifierMixin from '../../mixins/notifier';
-
-export default Component.extend(NotifierMixin, {
-	folderService: service('folder'),
-	appMeta: service(),
-	inviteEmail: '',
-	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 collaborate on documents.";
-	},
-
-	willRender() {
-		if (this.get('inviteMessage').length === 0) {
-			this.set('inviteMessage', this.getDefaultInvitationMessage());
-		}
-	},
-
-	actions: {
-		onShare() {
-			var email = this.get('inviteEmail').trim().replace(/ /g, '');
-			var message = this.get('inviteMessage').trim();
-
-			if (message.length === 0) {
-				message = this.getDefaultInvitationMessage();
-			}
-
-			if (email.length === 0) {
-				$('#inviteEmail').addClass('error').focus();
-				return;
-			}
-
-			var result = {
-				Message: message,
-				Recipients: []
-			};
-
-			// Check for multiple email addresses
-			if (email.indexOf(",") > -1) {
-				result.Recipients = email.split(',');
-			}
-			if (email.indexOf(";") > -1 && result.Recipients.length === 0) {
-				result.Recipients = email.split(';');
-			}
-
-			// Handle just one email address
-			if (result.Recipients.length === 0 && email.length > 0) {
-				result.Recipients.push(email);
-			}
-
-			this.set('inviteEmail', '');
-
-			this.get('folderService').share(this.folder.get('id'), result).then(() => {
-				this.showNotification('Invietd co-workers');
-				$('#inviteEmail').removeClass('error');
-			});
-		}
-	}
-});

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

@@ -17,6 +17,7 @@ import NotifierMixin from '../../mixins/notifier';
 import AuthMixin from '../../mixins/auth';
 
 export default Component.extend(NotifierMixin, AuthMixin, {
+	spaceService: service('folder'),
 	session: service(),
 	appMeta: service(),
 	pinned: service(),
@@ -34,6 +35,8 @@ export default Component.extend(NotifierMixin, AuthMixin, {
 		return this.get('permissions.spaceOwner') || this.get('permissions.spaceManage');
 	}),
 	deleteSpaceName: '',
+	inviteEmail: '',
+	inviteMessage: '',
 
 	didReceiveAttrs() {
 		this._super(...arguments);
@@ -54,24 +57,43 @@ export default Component.extend(NotifierMixin, AuthMixin, {
 	didInsertElement() {
 		this._super(...arguments);
 
-		$('#add-space-modal').on('show.bs.modal', function(event) { // eslint-disable-line no-unused-vars
+		$('#space-delete-modal').on('show.bs.modal', function(event) { // eslint-disable-line no-unused-vars
 			schedule('afterRender', () => {
-				$("#new-document-name").focus();
+				$("#delete-space-name").focus();
+			});
+		});
+
+		$('#space-invite-modal').on('show.bs.modal', () => { // eslint-disable-line no-unused-vars
+			schedule('afterRender', () => {
+				$("#space-invite-email").focus();
+				if (this.get('inviteMessage').length === 0) {
+					this.set('inviteMessage', this.getDefaultInvitationMessage());
+				}
 			});
 		});
 	},
 
+	willDestroyElement() {
+		this._super(...arguments);
+
+		$('[data-toggle="tooltip"]').tooltip('dispose');
+	},
+
 	renderTooltips() {
 		schedule('afterRender', () => {
-			$('#pin-space-button').tooltip('dispose');
-			$('body').tooltip({selector: '#pin-space-button'});
+			$('[data-toggle="tooltip"]').tooltip('dispose');
+			$('body').tooltip({selector: '[data-toggle="tooltip"]', delay: 250});
 		});
 	},
 
+	getDefaultInvitationMessage() {
+		return "Hey there, I am sharing the " + this.get('space.name') + " space (in " + this.get("appMeta.title") + ") with you so we can both collaborate on documents.";
+	},
+
 	actions: {
 		onUnpin() {
 			this.get('pinned').unpinItem(this.get('pinState.pinId')).then(() => {
-				$('#pin-space-button').tooltip('dispose');
+				$('#space-pin-button').tooltip('dispose');
 				this.set('pinState.isPinned', false);
 				this.set('pinState.pinId', '');
 				this.eventBus.publish('pinChange');
@@ -87,7 +109,7 @@ export default Component.extend(NotifierMixin, AuthMixin, {
 			};
 
 			this.get('pinned').pinItem(pin).then((pin) => {
-				$('#pin-space-button').tooltip('dispose');
+				$('#space-pin-button').tooltip('dispose');
 				this.set('pinState.isPinned', true);
 				this.set('pinState.pinId', pin.get('id'));
 				this.eventBus.publish('pinChange');
@@ -97,7 +119,50 @@ export default Component.extend(NotifierMixin, AuthMixin, {
 			return true;
 		},
 
-		onDeleteSpace(e) {
+		onSpaceInvite(e) {
+			e.preventDefault();
+
+			var email = this.get('inviteEmail').trim().replace(/ /g, '');
+			var message = this.get('inviteMessage').trim();
+
+			if (message.length === 0) {
+				message = this.getDefaultInvitationMessage();
+			}
+
+			if (email.length === 0) {
+				$('#space-invite-email').addClass('is-invalid').focus();
+				return;
+			}
+
+			var result = {
+				Message: message,
+				Recipients: []
+			};
+
+			// Check for multiple email addresses
+			if (email.indexOf(",") > -1) {
+				result.Recipients = email.split(',');
+			}
+			if (email.indexOf(";") > -1 && result.Recipients.length === 0) {
+				result.Recipients = email.split(';');
+			}
+
+			// Handle just one email address
+			if (result.Recipients.length === 0 && email.length > 0) {
+				result.Recipients.push(email);
+			}
+
+			this.set('inviteEmail', '');
+
+			this.get('spaceService').share(this.get('space.id'), result).then(() => {
+				$('#space-invite-email').removeClass('is-invalid');
+			});
+
+			$('#space-invite-modal').modal('hide');
+			$('#space-invite-modal').modal('dispose');
+		},
+
+		onSpaceDelete(e) {
 			e.preventDefault();
 
 			let spaceName = this.get('space').get('name');
@@ -113,37 +178,12 @@ export default Component.extend(NotifierMixin, AuthMixin, {
 
 			this.attrs.onDeleteSpace(this.get('space.id'));
 
-			$('#delete-space-modal').modal('hide');
-			$('#delete-space-modal').modal('dispose');
+			$('#space-delete-modal').modal('hide');
+			$('#space-delete-modal').modal('dispose');
 		},
 
 		onAddSpace(e) {
 			e.preventDefault();
-
-			let spaceName = this.get('spaceName');
-			let clonedId = this.get('clonedSpace.id');
-
-			if (is.empty(spaceName)) {
-				$("#new-space-name").addClass("is-invalid").focus();
-				return false;
-			}
-
-			let payload = {
-				name: spaceName,
-				CloneID: clonedId,
-				copyTemplate: this.get('copyTemplate'),
-				copyPermission: this.get('copyPermission'),
-				copyDocument: this.get('copyDocument'),
-			}
-
-			this.set('spaceName', '');
-			this.set('clonedSpace.id', '');
-			$("#new-space-name").removeClass("is-invalid");
-
-			$('#add-space-modal').modal('hide');
-			$('#add-space-modal').modal('dispose');
-
-			this.attrs.onAddSpace(payload);
 		},
 
 		onImport() {

gui/app/services/pinned.js

@@ -10,7 +10,6 @@
 // https://documize.com
 
 import { A } from '@ember/array';
-
 import ArrayProxy from '@ember/array/proxy';
 import RSVP, { Promise as EmberPromise } from 'rsvp';
 import Service, { inject as service } from '@ember/service';
@@ -27,26 +26,25 @@ export default Service.extend({
 		let userId = this.get('session.user.id');
 
 		if (!this.get('session.authenticated')) {
-			return new RSVP.resolve([]);
+			return new RSVP.resolve(A([]));
+		}
+		if (this.get('initialized')) {
+			return new RSVP.resolve(this.get('pins'));
 		}
 
 		return this.get('ajax').request(`pin/${userId}`, {
 			method: 'GET'
 		}).then((response) => {
-			if (is.not.array(response)) {
-				response = [];
-			}
-			let pins = ArrayProxy.create({
-				content: A([])
-			});
+			if (is.not.array(response)) response = [];
+			let pins = ArrayProxy.create({ content: A([]) });
 
 			pins = response.map((pin) => {
 				let data = this.get('store').normalize('pin', pin);
 				return this.get('store').push(data);
 			});
 
-			this.set('pins', pins);
 			this.set('initialized', true);
+			this.set('pins', pins);
 
 			return pins;
 		});
@@ -56,6 +54,8 @@ export default Service.extend({
 	pinItem(data) {
 		let userId = this.get('session.user.id');
 
+		this.set('initialized', false);
+
 		if(this.get('session.authenticated')) {
 			return this.get('ajax').request(`pin/${userId}`, {
 				method: 'POST',
@@ -71,6 +71,8 @@ export default Service.extend({
 	unpinItem(pinId) {
 		let userId = this.get('session.user.id');
 
+		this.set('initialized', false);
+
 		if(this.get('session.authenticated')) {
 			return this.get('ajax').request(`pin/${userId}/${pinId}`, {
 				method: 'DELETE'
@@ -107,52 +109,34 @@ export default Service.extend({
 	},
 
 	isDocumentPinned(documentId) {
-		let userId = this.get('session.user.id');
-		let pins = this.get('pins');
+		return new EmberPromise((resolve, reject) => { // eslint-disable-line no-unused-vars
+			let userId = this.get('session.user.id');
 
-		return new EmberPromise((resolve) => {
-			if (this.get('initialized') === false) {
-				this.getUserPins().then((pins) => {
-					pins.forEach((pin) => {
-						if (pin.get('userId') === userId && pin.get('documentId') === documentId) {
-							resolve(pin.get('id'));
-						}
-					});
-				});
-			} else {
+			return this.getUserPins().then((pins) => {
 				pins.forEach((pin) => {
 					if (pin.get('userId') === userId && pin.get('documentId') === documentId) {
 						resolve(pin.get('id'));
 					}
 				});
-			}
 
-			resolve('');
+				resolve('');
+			});
 		});
 	},
 
 	isSpacePinned(spaceId) {
-		let userId = this.get('session.user.id');
-		let pins = this.get('pins');
+		return new EmberPromise((resolve, reject) => { // eslint-disable-line no-unused-vars
+			let userId = this.get('session.user.id');
 
-		return new EmberPromise((resolve) => {
-			if (!this.get('initialized')) {
-			this.getUserPins().then((pins) => {
+			return this.getUserPins().then((pins) => {
 				pins.forEach((pin) => {
 					if (pin.get('userId') === userId && pin.get('documentId') === '' && pin.get('folderId') === spaceId) {
 						resolve(pin.get('id'));
 					}
 				});
+
+				resolve('');
 			});
-			} else {
-				pins.forEach((pin) => {
-					if (pin.get('userId') === userId && pin.get('documentId') === '' && pin.get('folderId') === spaceId) {
-						resolve(pin.get('id'));
-					}
-				});
-			}
-
-			resolve('');
 		});
 	}
 });

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

@@ -39,14 +39,14 @@
 	</ul>
 </div>
 
-{{#ui/ui-confirm-dialog title="Delete Documents" confirmCaption="Delete" buttonType="btn-danger" show=showDeleteDialog onAction=(action 'onDeleteDocuments')}}
+{{#ui/ui-dialog title="Delete Documents" confirmCaption="Delete" buttonType="btn-danger" show=showDeleteDialog onAction=(action 'onDeleteDocuments')}}
 	<p>Are you sure you want to delete {{selectedDocuments.length}} {{selectedCaption}}?</p>
-{{/ui/ui-confirm-dialog}}
+{{/ui/ui-dialog}}
 
-{{#ui/ui-confirm-dialog title="Move Documents" confirmCaption="Move" buttonType="btn-success" show=showMoveDialog onAction=(action 'onMoveDocuments')}}
+{{#ui/ui-dialog title="Move Documents" confirmCaption="Move" buttonType="btn-outline-success" show=showMoveDialog onAction=(action 'onMoveDocuments')}}
 	<p>Select space for {{selectedDocuments.length}} {{selectedCaption}}</p>
 	{{ui/ui-list-picker items=moveOptions nameField='name' singleSelect=true}}
-{{/ui/ui-confirm-dialog}}
+{{/ui/ui-dialog}}
 
 {{#if showAdd}}
 	{{empty-state icon="direct" message="You can create new documents via the green + button"}}

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

@@ -1,19 +0,0 @@
-<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>
-			{{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 to this space</div>
-			{{textarea id="explainInvite" value=inviteMessage class="input-transparent" rows="5"}}
-		</div>
-		<div class="regular-button button-blue" {{ action 'onShare' }}>Invite</div>
-	</div>
-</div>

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

@@ -4,12 +4,12 @@
 	{{/toolbar/t-links}}
 	{{#toolbar/t-actions}}
 		{{#if pinState.isPinned}}
-			<div id="pin-space-button" class="button-icon-gold align-middle" data-placement="top" title="Favorite" {{action 'onUnpin'}}>
+			<div id="space-pin-button" class="button-icon-gold align-middle" data-toggle="tooltip" data-placement="top" title="Remove favorite" {{action 'onUnpin'}}>
 				<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'}}>
+			<div id="space-pin-button" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Save favorite" {{action 'onPin'}}>
 				<i class="material-icons">star</i>
 			</div>
 			<div class="button-icon-gap" />
@@ -17,60 +17,90 @@
 
 		{{#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 id="space-settings-button" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="User permissions">
+					<i class="material-icons">security</i>
 				</div>
 				<div class="button-icon-gap" />
 			{{/link-to}}
+
+			<div id="space-invite-button" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Invite to space">
+				<i class="material-icons" data-toggle="modal" data-target="#space-invite-modal" data-backdrop="static">person_add</i>
+			</div>
+			<div class="button-icon-gap" />
+			<div id="space-invite-modal" class="modal" tabindex="-1" role="dialog">
+				<div class="modal-dialog" role="document">
+					<div class="modal-content">
+						<div class="modal-header">Space Invitation</div>
+						<div class="modal-body">
+							<form onsubmit={{action 'onSpaceInvite'}}>
+								<div class="form-group">
+									<label for="space-invite-email">Email for space invitation</label>
+									{{input id="space-invite-email" type='email' class="form-control mousetrap" placeholder="Enter email" value=inviteEmail}}
+									<small class="form-text text-muted">Comma separate multiple email addresses</small>
+								</div>
+								<div class="form-group">
+									<label for="space-invite-msg">Message explaining space invitation</label>
+									{{textarea id="space-invite-msg" value=inviteMessage class="form-control" rows="5"}}
+								</div>
+							</form>
+						</div>
+						<div class="modal-footer">
+							<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
+							<button type="button" class="btn btn-outline-success" onclick={{action 'onSpaceInvite'}}>Invite</button>
+						</div>
+					</div>
+				</div>
+			</div>
 		{{/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 id="space-delete-button" class="button-icon-danger align-middle" data-toggle="tooltip" data-placement="top" title="Delete space">
+				<i class="material-icons" data-toggle="modal" data-target="#space-delete-modal" data-backdrop="static">delete</i>
 			</div>
 			<div class="button-icon-gap" />
-			<div class="modal" tabindex="-1" role="dialog" id="delete-space-modal">
+			<div id="space-delete-modal" class="modal" tabindex="-1" role="dialog">
 				<div class="modal-dialog" role="document">
 					<div class="modal-content">
-						<div class="modal-header">Confirm Delete</div>
+						<div class="modal-header">Space Deletion</div>
 						<div class="modal-body">
-							<form onsubmit={{action 'onDeleteSpace'}}>
+							<form onsubmit={{action 'onSpaceDelete'}}>
 								<p>Are you sure you want to delete this space and all documents?</p>
 								<div class="form-group">
-									<label for="new-space-name">Please type space name to confirm</label>
+									<label for="delete-space-name">Please type space name to confirm</label>
 									{{input type='text' id="delete-space-name" class="form-control mousetrap" placeholder="Space name" value=deleteSpaceName}}
 									<small class="form-text text-muted">This will delete all documents and templates within this space!</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-danger font-weight-bold" onclick={{action 'onDeleteSpace'}}>Delete</button>
+							<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
+							<button type="button" class="btn btn-danger" onclick={{action 'onSpaceDelete'}}>Delete</button>
 						</div>
 					</div>
 				</div>
 			</div>
 		{{/if}}
 
-		<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">New Document</div>
-					<div class="modal-body">
-						<form onsubmit={{action 'onAddSpace'}}>
-							{{folder/start-document folder=space templates=templates permissions=permissions
-								onImport=(action 'onImport') onHideStartDocument=(action 'onHideStartDocument')}}
-						</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>
+		{{#if permissions.documentAdd}}
+			<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="add-space-modal" class="modal" tabindex="-1" role="dialog">
+				<div class="modal-dialog" role="document">
+					<div class="modal-content">
+						<div class="modal-header">New Document</div>
+						<div class="modal-body">
+							<form onsubmit={{action 'onAddSpace'}}>
+								{{folder/start-document folder=space templates=templates permissions=permissions
+									onImport=(action 'onImport') onHideStartDocument=(action 'onHideStartDocument')}}
+							</form>
+						</div>
+						<div class="modal-footer">
+							<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
+							<button type="button" class="btn btn-outline-success" onclick={{action 'onAddSpace'}}>Add</button>
+						</div>
 					</div>
 				</div>
 			</div>
-		</div>
+		{{/if}}
 
 	{{/toolbar/t-actions}}
 {{/toolbar/t-toolbar}}

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

@@ -30,8 +30,8 @@
 							</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-outline-secondary" data-dismiss="modal">Cancel</button>
+							<button type="button" class="btn btn-outline-success" onclick={{action 'onAddSpace'}}>Add</button>
 						</div>
 					</div>
 				</div>

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

@@ -8,8 +8,8 @@
 				</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 {{buttonType}} font-weight-bold" onclick={{action 'onAction'}}>{{confirmCaption}}</button>
+				<button type="button" class="btn btn-outline-secondary" data-dismiss="modal" {{action 'onCancel'}}>{{cancelCaption}}</button>
+				<button type="button" class="btn {{buttonType}}" onclick={{action 'onAction'}}>{{confirmCaption}}</button>
 			</div>
 		</div>
 	</div>