Introduce new nofications framework

Integrated https://github.com/documize/iziToast and added 4 log levels.

gui/.eslintrc.js

@@ -61,6 +61,7 @@ module.exports = {
 	  "Keycloak": true,
 	  "slug": true,
 	  "interact": true,
-	  "velocity": true
+	  "velocity": true,
+	  "iziToast": true
   }
 };

gui/app/components/customize/auth-settings.js

@@ -141,15 +141,13 @@ export default Component.extend(ModalMixin, Notifier, {
 		},
 
 		onLDAPPreview() {
-			this.showWait();
-
 			let config = this.get('ldapConfig');
 			config.serverPort = parseInt(this.get('ldapConfig.serverPort'));
 
 			this.get('globalSvc').previewLDAP(config).then((preview) => {
 				this.set('ldapPreview', preview);
 				this.modalOpen("#ldap-preview-modal", {"show": true});
-				this.showDone();
+				this.notifySuccess('Saved');
 			});
 		},
 
@@ -231,8 +229,6 @@ export default Component.extend(ModalMixin, Notifier, {
 					break;
 			}
 
-			this.showWait();
-
 			let data = { authProvider: provider, authConfig: JSON.stringify(config) };
 
 			this.get('onSave')(data).then(() => {
@@ -274,7 +270,7 @@ export default Component.extend(ModalMixin, Notifier, {
 					});
 				}
 
-				this.showDone();
+				this.notifySuccess('Saved');
 			});
 		}
 	}

gui/app/components/customize/backup-restore.js

@@ -60,7 +60,6 @@ export default Component.extend(Notifier, Modal, {
 	},
 
 	doBackup() {
-		this.showWait();
 		this.set('backupFilename', '');
 		this.set('backupSuccess', false);
 		this.set('backupFailed', false);
@@ -69,13 +68,13 @@ export default Component.extend(Notifier, Modal, {
 		let spec = this.get('backupSpec');
 
 		this.get('onBackup')(spec).then((filename) => {
-			this.showDone();
+			this.notifySuccess('Completed');
 			this.set('backupLabel', 'Start Backup');
 			this.set('backupSuccess', true);
 			this.set('backupFilename', filename);
 			this.set('backupRunning', false);
 		}, ()=> {
-			this.showDone();
+			this.notifyError('Failed');
 			this.set('backupLabel', 'Run Backup');
 			this.set('backupFailed', true);
 			this.set('backupRunning', false);
@@ -134,7 +133,6 @@ export default Component.extend(Notifier, Modal, {
 			}
 
 			// start restore process
-			this.showWait();
 			this.set('restoreButtonLabel', 'Please wait, restore running...');
             this.set('restoreSuccess', false);
 			this.set('restoreFailed', false);
@@ -147,12 +145,12 @@ export default Component.extend(Notifier, Modal, {
 			}
 
 			this.get('onRestore')(spec, filedata).then(() => {
-				this.showDone();
+				this.notifySuccess('Completed');
 				this.set('backupLabel', 'Restore');
 				this.set('restoreSuccess', true);
 				this.get('router').transitionTo('auth.logout');
 			}, ()=> {
-				this.showDone();
+				this.notifyError('Failed');
 				this.set('restorbackupLabel', 'Restore');
                 this.set('restoreFailed', true);
 			});

gui/app/components/customize/general-settings.js

@@ -64,10 +64,8 @@ export default Component.extend(Notifier, {
 			this.set('model.general.maxTags', this.get('maxTags'));
 			this.model.general.set('allowAnonymousAccess', $("#allowAnonymousAccess").prop('checked'));
 
-			this.showWait();
-
 			this.get('save')().then(() => {
-				this.showDone();
+				this.notifySuccess('Saved');
 				set(this, 'titleError', false);
 				set(this, 'messageError', false);
 				set(this, 'conversionEndpointError', false);

gui/app/components/customize/integration-settings.js

@@ -56,13 +56,12 @@ export default Component.extend(Notifier, {
 				this.set('jiraCreds.url', url.substring(0, url.length-1));
 			}
 
-			this.showWait();
 			this.get('orgSvc').saveOrgSetting(orgId, 'jira', this.get('jiraCreds')).then(() => {
 				if (this.get('session.isGlobalAdmin')) {
 					this.get('orgSvc').saveGlobalSetting('SECTION-TRELLO', this.get('trelloCreds'));
 				}
 
-				this.showDone();
+				this.notifySuccess('Saved');
 			});
 		}
 	}

gui/app/components/customize/license-key.js

@@ -40,10 +40,8 @@ export default Component.extend(Notifier, Modals, {
 
 	actions: {
 		saveLicense() {
-			this.showWait();
-
 			this.get('global').setLicense(this.get('license')).then(() => {
-				this.showDone();
+				this.notifySuccess('Saved');
 				window.location.reload();
 			});
 		},
@@ -57,7 +55,7 @@ export default Component.extend(Notifier, Modals, {
 			let comment = this.get('comment');
 
 			this.get('global').deactivate(comment).then(() => {
-				this.showDone();
+				this.notifySuccess('Saved');
 				this.modalOpen("#deactivation-confirmation-modal", {"show": true});
 			});
 		}

gui/app/components/customize/smtp-settings.js

@@ -48,11 +48,10 @@ export default Component.extend(Notifier, {
 				},
 			);
 
-			this.showWait();
 			this.set('buttonText', 'Please wait...');
 
 			this.get('saveSMTP')().then((result) => {
-				this.showDone();
+				this.notifySuccess('Saved');
 				this.set('buttonText', 'Save & Test');
 				this.set('testSMTP', result);
 			});

gui/app/components/customize/space-admin.js

@@ -80,8 +80,6 @@ export default Component.extend(Notifier, Modals, {
 		},
 
 		onExport() {
-			this.showWait();
-
 			let spec = {
 				spaceId: '',
 				data: _.pluck(this.get('folders'), 'id'),
@@ -90,15 +88,13 @@ export default Component.extend(Notifier, Modals, {
 
 			this.get('documentSvc').export(spec).then((htmlExport) => {
 				this.get('browserSvc').downloadFile(htmlExport, 'documize.html');
-				this.showDone();
+				this.notifySuccess('Exported');
 			});
 		},
 
 		onOwner(spaceId) {
-			this.showWait();
-
 			this.get('spaceSvc').grantOwnerPermission(spaceId).then(() => { /* jshint ignore:line */
-				this.showDone();
+				this.notifySuccess('Saved');
 			});
 		}
 	}

gui/app/components/document/settings-meta.js

@@ -125,8 +125,6 @@ export default Component.extend(Notifier, {
 
 	actions: {
 		onSave() {
-			this.showWait();
-
 			let docId = this.get('document.id');
 			let folderId = this.get('space.id');
 			let link = this.get('categories').filterBy('selected', true);
@@ -158,7 +156,7 @@ export default Component.extend(Notifier, {
 
 			this.get('categoryService').setCategoryMembership(toUnlink, 'unlink').then(() => {
 				this.get('categoryService').setCategoryMembership(toLink, 'link').then(() => {
-					this.showDone();
+					this.notifySuccess('Saved');
 				});
 			});
 

gui/app/components/document/view-attachment.js

@@ -66,16 +66,15 @@ export default Component.extend(Modals, Notifier, {
 				});
 
 				this.on("queuecomplete", function () {
-					self.showDone();
+					self.notifySuccess('Saved');
 					self.getAttachments();
 				});
 
 				this.on("addedfile", function ( /*file*/ ) {
-					self.showWait();
 				});
 
 				this.on("error", function (error, msg) { // // eslint-disable-line no-unused-vars
-					self.showNotification(msg);
+					self.notifyError(msg);
 					console.log(msg); // eslint-disable-line no-console
 				});
 			}

gui/app/components/folder/settings-blocks.js

@@ -52,11 +52,9 @@ export default Component.extend(AuthMixin, Notifier, {
 
 			let id = this.get('deleteBlockId');
 
-			this.showWait();
-
 			this.get('sectionSvc').deleteBlock(id).then(() => {
 				this.set('deleteBlockId', '');
-				this.showDone();
+				this.notifySuccess('Deleted');
 
 				this.get('sectionSvc').getSpaceBlocks(this.get('space.id')).then((blocks) => {
 					this.set('blocks', blocks);

gui/app/components/folder/settings-category.js

@@ -120,10 +120,9 @@ export default Component.extend(ModalMixin, TooltipMixin, Notifer, {
 				spaceId: this.get('space.id')
 			};
 
-			this.showWait();
 			this.get('categorySvc').add(c).then(() => {
 				this.load();
-				this.showDone();
+				this.notifySuccess('Category added');
 			});
 		},
 

gui/app/components/folder/settings-general.js

@@ -84,10 +84,8 @@ export default Component.extend(AuthMixin, Notifier, {
 			if (spaceName.length === 0) return;
 			space.set('name', spaceName);
 
-			this.showWait();
-
 			this.get('spaceSvc').save(space).then(() => {
-				this.showDone();
+				this.notifySuccess('Saved');
 			});
 		}
 	}

gui/app/components/folder/settings-permissions.js

@@ -132,8 +132,6 @@ export default Component.extend(Notifier, Modals, {
 		let spacePermissions = this.get('spacePermissions');
 		let filteredUsers = A([]);
 
-		this.showWait();
-
 		this.get('userSvc').matchUsers(s).then((users) => {
 			users.forEach((user) => {
 				let exists = spacePermissions.findBy('whoId', user.get('id'));
@@ -144,7 +142,6 @@ export default Component.extend(Notifier, Modals, {
 			});
 
 			this.set('filteredUsers', filteredUsers);
-			this.showDone();
 		});
 	},
 
@@ -160,9 +157,7 @@ export default Component.extend(Notifier, Modals, {
 		onSave() {
 			if (!this.get('isSpaceAdmin')) return;
 
-			this.showWait();
-
-			let message = this.getDefaultInvitationMessage();
+				let message = this.getDefaultInvitationMessage();
 			let permissions = this.get('spacePermissions');
 			let folder = this.get('folder');
 			let payload = { Message: message, Permissions: permissions };
@@ -197,7 +192,7 @@ export default Component.extend(Notifier, Modals, {
 			}
 
 			this.get('spaceSvc').savePermissions(folder.get('id'), payload).then(() => {
-				this.showDone();
+				this.notifySuccess('Saved');
 				this.get('onRefresh')();
 			});
 		},
@@ -219,17 +214,13 @@ export default Component.extend(Notifier, Modals, {
 			let spacePermissions = this.get('spacePermissions');
 			let constants = this.get('constants');
 
-			this.showWait();
-
-			let exists = spacePermissions.findBy('whoId', user.get('id'));
+				let exists = spacePermissions.findBy('whoId', user.get('id'));
 
 			if (is.undefined(exists)) {
 				spacePermissions.pushObject(this.permissionRecord(constants.WhoType.User, user.get('id'), user.get('fullname')));
 				this.set('spacePermissions', spacePermissions);
 				this.send('onSearch');
 			}
-
-			this.showDone();
 		},
 
 		onSpaceInvite(e) {
@@ -248,9 +239,7 @@ export default Component.extend(Notifier, Modals, {
 				return;
 			}
 
-			this.showWait();
-
-			var result = {
+				var result = {
 				Message: message,
 				Recipients: []
 			};
@@ -271,7 +260,7 @@ export default Component.extend(Notifier, Modals, {
 			this.set('inviteEmail', '');
 
 			this.get('spaceSvc').share(this.get('folder.id'), result).then(() => {
-				this.showDone();
+				this.notifySuccess('Invites sent');
 				this.$('#space-invite-email').removeClass('is-invalid');
 				this.modalClose("#space-invite-user-modal");
 				this.load();

gui/app/components/layout/master-sidebar.js

@@ -33,6 +33,7 @@ export default Component.extend(Modals, {
 
 	init() {
 		this._super(...arguments);
+
 		let constants = this.get('constants');
 
 		this.pins = [];
@@ -70,6 +71,16 @@ export default Component.extend(Modals, {
 			this.eventBus.subscribe('pinChange', this, 'setupPins');
 			this.setupPins();
 		}
+
+		this.eventBus.subscribe('notifyUser', this, 'processNotification');
+	},
+
+	willDestroyElement() {
+		this._super(...arguments);
+
+		this.eventBus.unsubscribe('notifyUser');
+		this.eventBus.unsubscribe('pinChange');
+		iziToast.destroy();
 	},
 
 	setupPins() {
@@ -85,10 +96,70 @@ export default Component.extend(Modals, {
 		});
 	},
 
-	willDestroyElement() {
-		this._super(...arguments);
+	processNotification(msg, type) {
+		if (this.get('isDestroyed') || this.get('isDestroying')) return;
 
-		this.eventBus.unsubscribe('pinChange');
+		// if (msg === 'wait') {
+		// 	this.set('showWait', true);
+		// 	this.set('showMessage', false);
+		// 	this.set('showDone', false);
+		// }
+
+		// New code...
+		if (is.not.undefined(type)) {
+			switch (type) {
+				case 'info':
+					iziToast.info({
+						title: '',
+						message: msg,
+					});
+					break;
+				case 'success':
+					iziToast.success({
+						title: '',
+						message: msg,
+					});
+					break;
+				case 'warn':
+					iziToast.warning({
+						title: '',
+						message: msg,
+					});
+					break;
+				case 'error':
+					iziToast.error({
+						title: '',
+						message: msg,
+					});
+					break;
+			}
+
+			return;
+		}
+
+		// Legacy code...
+		if (msg === 'done') {
+			$('.progress-done').removeClass('zoomOut').addClass('zoomIn');
+			this.set('showWait', false);
+			this.set('showMessage', false);
+			this.set('showDone', true);
+
+			setTimeout(function() {
+				$('.progress-done').removeClass('zoomIn').addClass('zoomOut');
+			}, 3000);
+		}
+
+		if (msg !== 'done' && msg !== 'wait') {
+			$('.progress-notification').removeClass('zoomOut').addClass('zoomIn');
+			this.set('showWait', false);
+			this.set('showDone', false);
+			this.set('showMessage', true);
+			this.set('message', msg);
+
+			setTimeout(function() {
+				$('.progress-notification').removeClass('zoomIn').addClass('zoomOut');
+			}, 3000);
+		}
 	},
 
 	actions: {

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

@@ -135,8 +135,6 @@ export default Component.extend(ModalMixin, TooltipMixin, AuthMixin, Notifier, {
 		},
 
 		onExport() {
-			this.showWait();
-
 			let spec = {
 				spaceId: this.get('document.folderId'),
 				data: [],
@@ -147,7 +145,7 @@ export default Component.extend(ModalMixin, TooltipMixin, AuthMixin, Notifier, {
 
 			this.get('documentSvc').export(spec).then((htmlExport) => {
 				this.get('browserSvc').downloadFile(htmlExport, this.get('document.slug') + '.html');
-				this.showDone();
+				this.notifySuccess('Exported');
 			});
 		}
 	}

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

@@ -288,8 +288,6 @@ export default Component.extend(ModalMixin, TooltipMixin, AuthMixin, Notifier, {
 		},
 
 		onExport() {
-			this.showWait();
-
 			let spec = {
 				spaceId: this.get('space.id'),
 				data: [],
@@ -310,7 +308,7 @@ export default Component.extend(ModalMixin, TooltipMixin, AuthMixin, Notifier, {
 
 			this.get('documentSvc').export(spec).then((htmlExport) => {
 				this.get('browserSvc').downloadFile(htmlExport, this.get('space.slug') + '.html');
-				this.showDone();
+				this.notifySuccess('Exported');
 			});
 
 			this.modalClose("#space-export-modal");

gui/app/mixins/notifier.js

@@ -12,21 +12,37 @@
 import Mixin from '@ember/object/mixin';
 
 export default Mixin.create({
-    showNotification(msg) {
-        this.eventBus.publish('notifyUser', msg);
+	notifySuccess(msg) {
+        this.eventBus.publish('notifyUser', msg, 'success');
 	},
 
-	showWait() {
-        this.eventBus.publish('notifyUser', 'wait');
+	notifyInfo(msg) {
+        this.eventBus.publish('notifyUser', msg, 'info');
 	},
 
-	showDone() {
-        this.eventBus.publish('notifyUser', 'done');
+	notifyWarn(msg) {
+        this.eventBus.publish('notifyUser', msg, 'warn');
+	},
+
+	notifyError(msg) {
+        this.eventBus.publish('notifyUser', msg, 'error');
 	},
 
     actions: {
-        showNotification(msg) {
-            this.eventBus.publish('notifyUser', msg);
-        }
+		notifySuccess(msg) {
+			this.eventBus.publish('notifyUser', msg, 'success');
+		},
+
+		notifyInfo(msg) {
+			this.eventBus.publish('notifyUser', msg, 'info');
+		},
+
+		notifyWarn(msg) {
+			this.eventBus.publish('notifyUser', msg, 'warn');
+		},
+
+		notifyError(msg) {
+			this.eventBus.publish('notifyUser', msg, 'error');
+		}
     }
 });

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

@@ -46,9 +46,8 @@ export default Controller.extend(Tooltips, Notifier, {
 		},
 
 		onSaveDocument(doc) {
-			this.showWait();
 			this.get('documentService').save(doc).then(() => {
-				this.showDone();
+				this.notifySuccess('Saved');
 			});
 			this.get('browser').setTitle(doc.get('name'));
 			this.get('browser').setMetaDescription(doc.get('excerpt'));
@@ -103,10 +102,8 @@ export default Controller.extend(Tooltips, Notifier, {
 				meta: meta.toJSON({ includeId: true })
 			};
 
-			this.showWait();
-
 			this.get('documentService').updatePage(documentId, page.get('id'), model).then((/*up*/) => {
-				this.showDone();
+				this.notifySuccess('Saved');
 
 				this.get('documentService').fetchPages(documentId, this.get('session.user.id')).then((pages) => {
 					this.set('pages', pages);
@@ -155,13 +152,11 @@ export default Controller.extend(Tooltips, Notifier, {
 		},
 
 		onInsertSection(data) {
-			this.showWait();
-
 			return new EmberPromise((resolve) => {
 				this.get('documentService').addPage(this.get('document.id'), data).then((newPage) => {
 					let data = this.get('store').normalize('page', newPage);
 					this.get('store').push(data);
-					this.showDone();
+					this.notifySuccess('Inserted');
 
 					this.get('documentService').fetchPages(this.get('document.id'), this.get('session.user.id')).then((pages) => {
 						this.set('pages', pages);
@@ -198,44 +193,36 @@ export default Controller.extend(Tooltips, Notifier, {
 		},
 
 		onSaveTemplate(name, desc) {
-			this.showWait();
-
 			this.get('templateService').saveAsTemplate(this.get('document.id'), name, desc).then(function () {
-				this.showDone();
+				this.notifySuccess('Template saved');
 			});
 		},
 
 		onPageSequenceChange(currentPageId, changes) {
-			this.showWait();
 			this.set('currentPageId', currentPageId);
 
 			this.get('documentService').changePageSequence(this.get('document.id'), changes).then(() => {
 				this.get('documentService').fetchPages(this.get('document.id'), this.get('session.user.id')).then( (pages) => {
 					this.set('pages', pages);
-					this.showDone();
 				});
 			});
 		},
 
 		onPageLevelChange(currentPageId, changes) {
-			this.showWait();
 			this.set('currentPageId', currentPageId);
 
 			this.get('documentService').changePageLevel(this.get('document.id'), changes).then(() => {
 				this.get('documentService').fetchPages(this.get('document.id'), this.get('session.user.id')).then( (pages) => {
 					this.set('pages', pages);
-					this.showDone();
 				});
 			});
 		},
 
 		onTagChange(tags) {
-			this.showDone();
-
 			let doc = this.get('document');
 			doc.set('tags', tags);
 			this.get('documentService').save(doc).then(()=> {
-				this.showWait();
+				this.notifySuccess('Saved');
 			});
 		},
 

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

@@ -27,9 +27,8 @@ export default Controller.extend(Notifier, {
 		},
 
 		onSaveDocument(doc) {
-			this.showWait();
 			this.get('documentService').save(doc).then(() => {
-				this.showDone();
+				this.notifySuccess('Saved');
 			});
 
 			this.get('browser').setTitle(doc.get('name'));

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

@@ -23,8 +23,6 @@ export default Controller.extend(Notifier, {
 		},
 
 		onAction(page, meta) {
-			this.showWait();
-
 			let b = this.get('model.block');
 			b.set('title', page.get('title'));
 			b.set('body', page.get('body'));
@@ -34,7 +32,7 @@ export default Controller.extend(Notifier, {
 			b.set('externalSource', meta.get('externalSource'));
 
 			this.get('sectionSvc').updateBlock(b).then(() => {
-				this.showDone();
+				this.notifySuccess('Saved');
 				this.get('router').transitionTo('folder.settings', {queryParams: {tab: 'blocks'}});
 			});
 		}

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

@@ -67,8 +67,6 @@ export default Controller.extend(NotifierMixin, {
 		},
 
 		onExportDocument(documents) {
-			this.showWait();
-
 			let spec = {
 				spaceId: this.get('model.folder.id'),
 				data: documents,
@@ -77,7 +75,7 @@ export default Controller.extend(NotifierMixin, {
 
 			this.get('documentSvc').export(spec).then((htmlExport) => {
 				this.get('browserSvc').downloadFile(htmlExport, this.get('model.folder.slug') + '.html');
-				this.showDone();
+				this.notifySuccess('Exported');
 			});
 		},
 

gui/app/pods/theming/controller.js

@@ -9,7 +9,26 @@
 //
 // https://documize.com
 
+import Notifier from '../../mixins/notifier';
 import Controller from '@ember/controller';
 
-export default Controller.extend({
+export default Controller.extend(Notifier, {
+
+	actions: {
+		onSuccess() {
+			this.notifySuccess('Saved');
+		},
+
+		onInfo() {
+			this.notifyInfo('Working');
+		},
+
+		onWarn() {
+			this.notifyWarn('Failed to get');
+		},
+
+		onError() {
+			this.notifyError('Unable to save changes');
+		}
+	}
 });

gui/app/pods/theming/template.hbs

@@ -6,6 +6,10 @@
 	<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.</p>
 {{/layout/master-sidebar}}
 {{#layout/master-content}}
+	<button {{action 'onSuccess'}}>Success</button>
+	<button {{action 'onInfo'}}>Info</button>
+	<button {{action 'onWarn'}}>Warn</button>
+	<button {{action 'onError'}}>Error</button>
 	<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.</p>
 	<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.</p>
 	<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.</p>

gui/app/services/base.js

@@ -30,7 +30,7 @@ export default Service.extend({
         setTimeout(interv, wait);
     },
 
-	showNotification(msg) {
-		this.get('eventBus').publish('notifyUser', msg);
-	}
+	// showNotification(msg) {
+	// 	this.get('eventBus').publish('notifyUser', msg);
+	// }
 });

gui/app/services/link.js

@@ -147,7 +147,7 @@ export default Service.extend(Notifier, {
 			document.execCommand('copy');
 			document.body.removeChild(el);
 
-			this.showNotification('Copied location to clipboard');
+			this.notifyInfo('Copied location to clipboard');
 
 			return;
 		}

gui/app/styles/core/all.scss

@@ -42,7 +42,7 @@
 @import "view/views.scss";
 @import "layout/all.scss";
 
-@import "vendor.scss";
+@import "vendor/all.scss";
 @import "print.scss";
 @import "news.scss";
 @import "section/all.scss";

gui/app/styles/core/base.scss

@@ -28,7 +28,7 @@ body {
 }
 
 a {
-	@include ease-in();
+	// @include ease-in();
 	color: $color-link;
 	text-decoration: none;
 	cursor: pointer;

gui/app/styles/core/ui/ui-tooltip.scss

@@ -1,5 +1,10 @@
 // https://github.com/kybishop/ember-attacher
 
+.ember-attacher-tooltip {
+	font-size: 0.9rem;
+	padding: 0.5rem 0.75rem;
+}
+
 .ember-attacher-popper {
 	background-color: $color-white;
 	font-size: 1rem;
@@ -13,11 +18,72 @@
 
 	> .menu {
 		margin: 0;
-		padding: 0.5rem 0.75rem;
+		padding: 0;
+		min-width: 140px;
+
+		> .item {
+			color: map-get($gray-shades, 800);
+			background-color: transparent;
+			display: block;
+			list-style-type: none;
+			margin: 0;
+			border: 0;
+			white-space: nowrap;
+			text-align: left;
+			padding: 0.5rem 1.5rem;
+			font-size: 1rem;
+
+			&:hover {
+				color: $color-black;
+				background-color: map-get($gray-shades, 100);
+			}
+		}
+
+		> .header {
+			color: map-get($gray-shades, 800);
+			background-color: map-get($gray-shades, 300);
+			font-size: 1rem;
+			font-weight: 600;
+
+			&:hover {
+				color: map-get($gray-shades, 800);
+				background-color: map-get($gray-shades, 300);
+			}
+		}
+
+		> .divider {
+			margin: 0;
+			padding: 0;
+			height: 1px;
+			border-top: 1px solid map-get($gray-shades, 200);
+		}
+
+		.red {
+			color: map-get($red-shades, 600);
+
+			&:hover {
+				color: map-get($red-shades, 800);
+			}
+		}
+
+		.green {
+			color: map-get($green-shades, 600);
+
+			&:hover {
+				color: map-get($green-shades, 800);
+			}
+		}
+
+		.yellow {
+			color: map-get($yellow-shades, 600);
+
+			&:hover {
+				color: map-get($yellow-shades, 800);
+			}
+		}
+
+		.bold {
+			font-weight: 600;
+		}
 	}
 }
-
-.ember-attacher-tooltip {
-	font-size: 0.9rem;
-	padding: 0.5rem 0.75rem;
-}

gui/app/styles/core/vendor/all.scss

@@ -0,0 +1,7 @@
+@import "animate";
+@import "datepicker";
+@import "dragula";
+@import "dropzone";
+@import "izitoast";
+@import "prismjs";
+@import "x-toggle";

gui/app/styles/core/vendor/datepicker.scss

@@ -0,0 +1,568 @@
+.xdsoft_datetimepicker {
+	box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506);
+	background: #fff;
+	border-bottom: 1px solid #bbb;
+	border-left: 1px solid #ccc;
+	border-right: 1px solid #ccc;
+	border-top: 1px solid #ccc;
+	color: #333;
+	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+	padding: 8px;
+	padding-left: 0;
+	padding-top: 2px;
+	position: absolute;
+	z-index: 9999;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+	display: none;
+}
+.xdsoft_datetimepicker.xdsoft_rtl {
+	padding: 8px 0 8px 8px;
+}
+
+.xdsoft_datetimepicker iframe {
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 75px;
+	height: 210px;
+	background: transparent;
+	border: none;
+}
+
+/*For IE8 or lower*/
+.xdsoft_datetimepicker button {
+	border: none !important;
+}
+
+.xdsoft_noselect {
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	-o-user-select: none;
+	user-select: none;
+}
+
+.xdsoft_noselect::selection { background: transparent }
+.xdsoft_noselect::-moz-selection { background: transparent }
+
+.xdsoft_datetimepicker.xdsoft_inline {
+	display: inline-block;
+	position: static;
+	box-shadow: none;
+}
+
+.xdsoft_datetimepicker * {
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+	padding: 0;
+	margin: 0;
+}
+
+.xdsoft_datetimepicker .xdsoft_datepicker, .xdsoft_datetimepicker .xdsoft_timepicker {
+	display: none;
+}
+
+.xdsoft_datetimepicker .xdsoft_datepicker.active, .xdsoft_datetimepicker .xdsoft_timepicker.active {
+	display: block;
+}
+
+.xdsoft_datetimepicker .xdsoft_datepicker {
+	width: 224px;
+	float: left;
+	margin-left: 8px;
+}
+.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_datepicker {
+	float: right;
+	margin-right: 8px;
+	margin-left: 0;
+}
+
+.xdsoft_datetimepicker.xdsoft_showweeks .xdsoft_datepicker {
+	width: 256px;
+}
+
+.xdsoft_datetimepicker .xdsoft_timepicker {
+	width: 58px;
+	float: left;
+	text-align: center;
+	margin-left: 8px;
+	margin-top: 0;
+}
+.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_timepicker {
+	float: right;
+	margin-right: 8px;
+	margin-left: 0;
+}
+
+.xdsoft_datetimepicker .xdsoft_datepicker.active+.xdsoft_timepicker {
+	margin-top: 8px;
+	margin-bottom: 3px
+}
+
+.xdsoft_datetimepicker .xdsoft_monthpicker {
+	position: relative;
+	text-align: center;
+}
+
+.xdsoft_datetimepicker .xdsoft_label i,
+.xdsoft_datetimepicker .xdsoft_prev,
+.xdsoft_datetimepicker .xdsoft_next,
+.xdsoft_datetimepicker .xdsoft_today_button {
+	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAeCAYAAADaW7vzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Q0NBRjI1NjM0M0UwMTFFNDk4NkFGMzJFQkQzQjEwRUIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Q0NBRjI1NjQ0M0UwMTFFNDk4NkFGMzJFQkQzQjEwRUIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDQ0FGMjU2MTQzRTAxMUU0OTg2QUYzMkVCRDNCMTBFQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDQ0FGMjU2MjQzRTAxMUU0OTg2QUYzMkVCRDNCMTBFQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PoNEP54AAAIOSURBVHja7Jq9TsMwEMcxrZD4WpBYeKUCe+kTMCACHZh4BFfHO/AAIHZGFhYkBBsSEqxsLCAgXKhbXYOTxh9pfJVP+qutnZ5s/5Lz2Y5I03QhWji2GIcgAokWgfCxNvcOCCGKqiSqhUp0laHOne05vdEyGMfkdxJDVjgwDlEQgYQBgx+ULJaWSXXS6r/ER5FBVR8VfGftTKcITNs+a1XpcFoExREIDF14AVIFxgQUS+h520cdud6wNkC0UBw6BCO/HoCYwBhD8QCkQ/x1mwDyD4plh4D6DDV0TAGyo4HcawLIBBSLDkHeH0Mg2yVP3l4TQMZQDDsEOl/MgHQqhMNuE0D+oBh0CIr8MAKyazBH9WyBuKxDWgbXfjNf32TZ1KWm/Ap1oSk/R53UtQ5xTh3LUlMmT8gt6g51Q9p+SobxgJQ/qmsfZhWywGFSl0yBjCLJCMgXail3b7+rumdVJ2YRss4cN+r6qAHDkPWjPjdJCF4n9RmAD/V9A/Wp4NQassDjwlB6XBiCxcJQWmZZb8THFilfy/lfrTvLghq2TqTHrRMTKNJ0sIhdo15RT+RpyWwFdY96UZ/LdQKBGjcXpcc1AlSFEfLmouD+1knuxBDUVrvOBmoOC/rEcN7OQxKVeJTCiAdUzUJhA2Oez9QTkp72OTVcxDcXY8iKNkxGAJXmJCOQwOa6dhyXsOa6XwEGAKdeb5ET3rQdAAAAAElFTkSuQmCC);
+}
+
+.xdsoft_datetimepicker .xdsoft_label i {
+	opacity: 0.5;
+	background-position: -92px -19px;
+	display: inline-block;
+	width: 9px;
+	height: 20px;
+	vertical-align: middle;
+}
+
+.xdsoft_datetimepicker .xdsoft_prev {
+	float: left;
+	background-position: -20px 0;
+}
+.xdsoft_datetimepicker .xdsoft_today_button {
+	float: left;
+	background-position: -70px 0;
+	margin-left: 5px;
+}
+
+.xdsoft_datetimepicker .xdsoft_next {
+	float: right;
+	background-position: 0 0;
+}
+
+.xdsoft_datetimepicker .xdsoft_next,
+.xdsoft_datetimepicker .xdsoft_prev ,
+.xdsoft_datetimepicker .xdsoft_today_button {
+	background-color: transparent;
+	background-repeat: no-repeat;
+	border: 0 none;
+	cursor: pointer;
+	display: block;
+	height: 30px;
+	opacity: 0.5;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+	outline: medium none;
+	overflow: hidden;
+	padding: 0;
+	position: relative;
+	text-indent: 100%;
+	white-space: nowrap;
+	width: 20px;
+	min-width: 0;
+}
+
+.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev,
+.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_next {
+	float: none;
+	background-position: -40px -15px;
+	height: 15px;
+	width: 30px;
+	display: block;
+	margin-left: 14px;
+	margin-top: 7px;
+}
+.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_timepicker .xdsoft_prev,
+.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_timepicker .xdsoft_next {
+	float: none;
+	margin-left: 0;
+	margin-right: 14px;
+}
+
+.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev {
+	background-position: -40px 0;
+	margin-bottom: 7px;
+	margin-top: 0;
+}
+
+.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box {
+	height: 151px;
+	overflow: hidden;
+	border-bottom: 1px solid #ddd;
+}
+
+.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div {
+	background: #f5f5f5;
+	border-top: 1px solid #ddd;
+	color: #666;
+	font-size: 12px;
+	text-align: center;
+	border-collapse: collapse;
+	cursor: pointer;
+	border-bottom-width: 0;
+	height: 25px;
+	line-height: 25px;
+}
+
+.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div > div:first-child {
+	border-top-width: 0;
+}
+
+.xdsoft_datetimepicker .xdsoft_today_button:hover,
+.xdsoft_datetimepicker .xdsoft_next:hover,
+.xdsoft_datetimepicker .xdsoft_prev:hover {
+	opacity: 1;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+}
+
+.xdsoft_datetimepicker .xdsoft_label {
+	display: inline;
+	position: relative;
+	z-index: 9999;
+	margin: 0;
+	padding: 5px 3px;
+	font-size: 14px;
+	line-height: 20px;
+	font-weight: bold;
+	background-color: #fff;
+	float: left;
+	width: 182px;
+	text-align: center;
+	cursor: pointer;
+}
+
+.xdsoft_datetimepicker .xdsoft_label:hover>span {
+	text-decoration: underline;
+}
+
+.xdsoft_datetimepicker .xdsoft_label:hover i {
+	opacity: 1.0;
+}
+
+.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select {
+	border: 1px solid #ccc;
+	position: absolute;
+	right: 0;
+	top: 30px;
+	z-index: 101;
+	display: none;
+	background: #fff;
+	max-height: 160px;
+	overflow-y: hidden;
+}
+
+.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select.xdsoft_monthselect{ right: -7px }
+.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select.xdsoft_yearselect{ right: 2px }
+.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover {
+	color: #fff;
+	background: #ff8000;
+}
+
+.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option {
+	padding: 2px 10px 2px 5px;
+	text-decoration: none !important;
+}
+
+.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current {
+	background: #33aaff;
+	box-shadow: #178fe5 0 1px 3px 0 inset;
+	color: #fff;
+	font-weight: 700;
+}
+
+.xdsoft_datetimepicker .xdsoft_month {
+	width: 100px;
+	text-align: right;
+}
+
+.xdsoft_datetimepicker .xdsoft_calendar {
+	clear: both;
+}
+
+.xdsoft_datetimepicker .xdsoft_year{
+	width: 48px;
+	margin-left: 5px;
+}
+
+.xdsoft_datetimepicker .xdsoft_calendar table {
+	border-collapse: collapse;
+	width: 100%;
+
+}
+
+.xdsoft_datetimepicker .xdsoft_calendar td > div {
+	padding-right: 5px;
+}
+
+.xdsoft_datetimepicker .xdsoft_calendar th {
+	height: 25px;
+}
+
+.xdsoft_datetimepicker .xdsoft_calendar td,.xdsoft_datetimepicker .xdsoft_calendar th {
+	width: 14.2857142%;
+	background: #f5f5f5;
+	border: 1px solid #ddd;
+	color: #666;
+	font-size: 12px;
+	text-align: right;
+	vertical-align: middle;
+	padding: 0;
+	border-collapse: collapse;
+	cursor: pointer;
+	height: 25px;
+}
+.xdsoft_datetimepicker.xdsoft_showweeks .xdsoft_calendar td,.xdsoft_datetimepicker.xdsoft_showweeks .xdsoft_calendar th {
+	width: 12.5%;
+}
+
+.xdsoft_datetimepicker .xdsoft_calendar th {
+	background: #f1f1f1;
+}
+
+.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today {
+	color: #33aaff;
+}
+
+.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_highlighted_default {
+	background: #ffe9d2;
+	box-shadow: #ffb871 0 1px 4px 0 inset;
+	color: #000;
+}
+.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_highlighted_mint {
+	background: #c1ffc9;
+	box-shadow: #00dd1c 0 1px 4px 0 inset;
+	color: #000;
+}
+
+.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default,
+.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
+.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div.xdsoft_current {
+	background: #33aaff;
+	box-shadow: #178fe5 0 1px 3px 0 inset;
+	color: #fff;
+	font-weight: 700;
+}
+
+.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month,
+.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled,
+.xdsoft_datetimepicker .xdsoft_time_box >div >div.xdsoft_disabled {
+	opacity: 0.5;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+	cursor: default;
+}
+
+.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month.xdsoft_disabled {
+	opacity: 0.2;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
+}
+
+.xdsoft_datetimepicker .xdsoft_calendar td:hover,
+.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div:hover {
+	color: #fff !important;
+	background: #ff8000 !important;
+	box-shadow: none !important;
+}
+
+.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current.xdsoft_disabled:hover,
+.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div.xdsoft_current.xdsoft_disabled:hover {
+	background: #33aaff !important;
+	box-shadow: #178fe5 0 1px 3px 0 inset !important;
+	color: #fff !important;
+}
+
+.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled:hover,
+.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div.xdsoft_disabled:hover {
+	color: inherit	!important;
+	background: inherit !important;
+	box-shadow: inherit !important;
+}
+
+.xdsoft_datetimepicker .xdsoft_calendar th {
+	font-weight: 700;
+	text-align: center;
+	color: #999;
+	cursor: default;
+}
+
+.xdsoft_datetimepicker .xdsoft_copyright {
+	color: #ccc !important;
+	font-size: 10px;
+	clear: both;
+	float: none;
+	margin-left: 8px;
+}
+
+.xdsoft_datetimepicker .xdsoft_copyright a { color: #eee !important }
+.xdsoft_datetimepicker .xdsoft_copyright a:hover { color: #aaa !important }
+
+.xdsoft_time_box {
+	position: relative;
+	border: 1px solid #ccc;
+}
+.xdsoft_scrollbar >.xdsoft_scroller {
+	background: #ccc !important;
+	height: 20px;
+	border-radius: 3px;
+}
+.xdsoft_scrollbar {
+	position: absolute;
+	width: 7px;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	cursor: pointer;
+}
+.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_scrollbar {
+	left: 0;
+	right: auto;
+}
+.xdsoft_scroller_box {
+	position: relative;
+}
+
+.xdsoft_datetimepicker.xdsoft_dark {
+	box-shadow: 0 5px 15px -5px rgba(255, 255, 255, 0.506);
+	background: #000;
+	border-bottom: 1px solid #444;
+	border-left: 1px solid #333;
+	border-right: 1px solid #333;
+	border-top: 1px solid #333;
+	color: #ccc;
+}
+
+.xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box {
+	border-bottom: 1px solid #222;
+}
+.xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box >div >div {
+	background: #0a0a0a;
+	border-top: 1px solid #222;
+	color: #999;
+}
+
+.xdsoft_datetimepicker.xdsoft_dark .xdsoft_label {
+	background-color: #000;
+}
+.xdsoft_datetimepicker.xdsoft_dark .xdsoft_label > .xdsoft_select {
+	border: 1px solid #333;
+	background: #000;
+}
+
+.xdsoft_datetimepicker.xdsoft_dark .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover {
+	color: #000;
+	background: #007fff;
+}
+
+.xdsoft_datetimepicker.xdsoft_dark .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current {
+	background: #cc5500;
+	box-shadow: #b03e00 0 1px 3px 0 inset;
+	color: #000;
+}
+
+.xdsoft_datetimepicker.xdsoft_dark .xdsoft_label i,
+.xdsoft_datetimepicker.xdsoft_dark .xdsoft_prev,
+.xdsoft_datetimepicker.xdsoft_dark .xdsoft_next,
+.xdsoft_datetimepicker.xdsoft_dark .xdsoft_today_button {
+	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAeCAYAAADaW7vzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QUExQUUzOTA0M0UyMTFFNDlBM0FFQTJENTExRDVBODYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QUExQUUzOTE0M0UyMTFFNDlBM0FFQTJENTExRDVBODYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBQTFBRTM4RTQzRTIxMUU0OUEzQUVBMkQ1MTFENUE4NiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBQTFBRTM4RjQzRTIxMUU0OUEzQUVBMkQ1MTFENUE4NiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pp0VxGEAAAIASURBVHja7JrNSgMxEMebtgh+3MSLr1T1Xn2CHoSKB08+QmR8Bx9A8e7RixdB9CKCoNdexIugxFlJa7rNZneTbLIpM/CnNLsdMvNjM8l0mRCiQ9Ye61IKCAgZAUnH+mU3MMZaHYChBnJUDzWOFZdVfc5+ZFLbrWDeXPwbxIqrLLfaeS0hEBVGIRQCEiZoHQwtlGSByCCdYBl8g8egTTAWoKQMRBRBcZxYlhzhKegqMOageErsCHVkk3hXIFooDgHB1KkHIHVgzKB4ADJQ/A1jAFmAYhkQqA5TOBtocrKrgXwQA8gcFIuAIO8sQSA7hidvPwaQGZSaAYHOUWJABhWWw2EMIH9QagQERU4SArJXo0ZZL18uvaxejXt/Em8xjVBXmvFr1KVm/AJ10tRe2XnraNqaJvKE3KHuUbfK1E+VHB0q40/y3sdQSxY4FHWeKJCunP8UyDdqJZenT3ntVV5jIYCAh20vT7ioP8tpf6E2lfEMwERe+whV1MHjwZB7PBiCxcGQWwKZKD62lfGNnP/1poFAA60T7rF1UgcKd2id3KDeUS+oLWV8DfWAepOfq00CgQabi9zjcgJVYVD7PVzQUAUGAQkbNJTBICDhgwYTjDYD6XeW08ZKh+A4pYkzenOxXUbvZcWz7E8ykRMnIHGX1XPl+1m2vPYpL+2qdb8CDAARlKFEz/ZVkAAAAABJRU5ErkJggg==);
+}
+
+.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td,
+.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar th {
+	background: #0a0a0a;
+	border: 1px solid #222;
+	color: #999;
+}
+
+.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar th {
+	background: #0e0e0e;
+}
+
+.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_today {
+	color: #cc5500;
+}
+
+.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_highlighted_default {
+	background: #ffe9d2;
+	box-shadow: #ffb871 0 1px 4px 0 inset;
+	color:#000;
+}
+.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_highlighted_mint {
+	background: #c1ffc9;
+	box-shadow: #00dd1c 0 1px 4px 0 inset;
+	color:#000;
+}
+
+.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_default,
+.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_current,
+.xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box >div >div.xdsoft_current {
+	background: #cc5500;
+	box-shadow: #b03e00 0 1px 3px 0 inset;
+	color: #000;
+}
+
+.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td:hover,
+.xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box >div >div:hover {
+	color: #000 !important;
+	background: #007fff !important;
+}
+
+.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar th {
+	color: #666;
+}
+
+.xdsoft_datetimepicker.xdsoft_dark .xdsoft_copyright { color: #333 !important }
+.xdsoft_datetimepicker.xdsoft_dark .xdsoft_copyright a { color: #111 !important }
+.xdsoft_datetimepicker.xdsoft_dark .xdsoft_copyright a:hover { color: #555 !important }
+
+.xdsoft_dark .xdsoft_time_box {
+	border: 1px solid #333;
+}
+
+.xdsoft_dark .xdsoft_scrollbar >.xdsoft_scroller {
+	background: #333 !important;
+}
+.xdsoft_datetimepicker .xdsoft_save_selected {
+    display: block;
+    border: 1px solid #dddddd !important;
+    margin-top: 5px;
+    width: 100%;
+    color: #454551;
+    font-size: 13px;
+}
+.xdsoft_datetimepicker .blue-gradient-button {
+	font-family: "museo-sans", "Book Antiqua", sans-serif;
+	font-size: 12px;
+	font-weight: 300;
+	color: #82878c;
+	height: 28px;
+	position: relative;
+	padding: 4px 17px 4px 33px;
+	border: 1px solid #d7d8da;
+	background: -moz-linear-gradient(top, #fff 0%, #f4f8fa 73%);
+	/* FF3.6+ */
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(73%, #f4f8fa));
+	/* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(top, #fff 0%, #f4f8fa 73%);
+	/* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(top, #fff 0%, #f4f8fa 73%);
+	/* Opera 11.10+ */
+	background: -ms-linear-gradient(top, #fff 0%, #f4f8fa 73%);
+	/* IE10+ */
+	background: linear-gradient(to bottom, #fff 0%, #f4f8fa 73%);
+	/* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#f4f8fa',GradientType=0 );
+/* IE6-9 */
+}
+.xdsoft_datetimepicker .blue-gradient-button:hover, .xdsoft_datetimepicker .blue-gradient-button:focus, .xdsoft_datetimepicker .blue-gradient-button:hover span, .xdsoft_datetimepicker .blue-gradient-button:focus span {
+  color: #454551;
+  background: -moz-linear-gradient(top, #f4f8fa 0%, #FFF 73%);
+  /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f4f8fa), color-stop(73%, #FFF));
+  /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(top, #f4f8fa 0%, #FFF 73%);
+  /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(top, #f4f8fa 0%, #FFF 73%);
+  /* Opera 11.10+ */
+  background: -ms-linear-gradient(top, #f4f8fa 0%, #FFF 73%);
+  /* IE10+ */
+  background: linear-gradient(to bottom, #f4f8fa 0%, #FFF 73%);
+  /* W3C */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f8fa', endColorstr='#FFF',GradientType=0 );
+  /* IE6-9 */
+}

gui/app/styles/core/vendor/dragula.scss

@@ -0,0 +1,23 @@
+.gu-mirror {
+	position: fixed !important;
+	margin: 0 !important;
+	z-index: 9999 !important;
+	opacity: 0.8;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
+	filter: alpha(opacity=80);
+	list-style-type: none;
+}
+.gu-hide {
+	display: none !important;
+}
+.gu-unselectable {
+	-webkit-user-select: none !important;
+	-moz-user-select: none !important;
+	-ms-user-select: none !important;
+	user-select: none !important;
+}
+.gu-transit {
+	opacity: 0.2;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
+	filter: alpha(opacity=20);
+}

gui/app/styles/core/vendor/dropzone.scss

@@ -0,0 +1,3 @@
+.dz-success-mark, .dz-error-mark {
+    display: none !important;
+}

gui/app/styles/core/vendor/prismjs.scss

@@ -0,0 +1,249 @@
+/* PrismJS 1.10.0
+http://prismjs.com/download.html?themes=prism-solarizedlight&languages=markup+css+clike+javascript+c+cpp+csharp+coffeescript+ruby+docker+elixir+erlang+fsharp+git+go+handlebars+haskell+http+java+json+less+makefile+markdown+nginx+objectivec+perl+php+powershell+python+jsx+rust+scss+sql+swift+typescript+yaml&plugins=line-numbers+toolbar+copy-to-clipboard */
+/*
+ Solarized Color Schemes originally by Ethan Schoonover
+ http://ethanschoonover.com/solarized
+
+ Ported for PrismJS by Hector Matos
+ Website: https://krakendev.io
+ Twitter Handle: https://twitter.com/allonsykraken)
+*/
+
+/*
+SOLARIZED HEX
+--------- -------
+base03    #002b36
+base02    #073642
+base01    #586e75
+base00    #657b83
+base0     #839496
+base1     #93a1a1
+base2     #eee8d5
+base3     #fdf6e3
+yellow    #b58900
+orange    #cb4b16
+red       #dc322f
+magenta   #d33682
+violet    #6c71c4
+blue      #268bd2
+cyan      #2aa198
+green     #859900
+*/
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: #657b83; /* base00 */
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+
+	line-height: 1.5;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+	background: #073642; /* base02 */
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+	background: #073642; /* base02 */
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+	border-radius: 0.3em;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background-color: #fdf6e3; /* base3 */
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #93a1a1; /* base1 */
+}
+
+.token.punctuation {
+	color: #586e75; /* base01 */
+}
+
+.namespace {
+	opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: #268bd2; /* blue */
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.url,
+.token.inserted {
+	color: #2aa198; /* cyan */
+}
+
+.token.entity {
+	color: #657b83; /* base00 */
+	background: #eee8d5; /* base2 */
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+	color: #859900; /* green */
+}
+
+.token.function {
+	color: #b58900; /* yellow */
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+	color: #cb4b16; /* orange */
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
+pre.line-numbers {
+	position: relative;
+	padding-left: 3.8em;
+	counter-reset: linenumber;
+}
+
+pre.line-numbers > code {
+	position: relative;
+    white-space: inherit;
+}
+
+.line-numbers .line-numbers-rows {
+	position: absolute;
+	pointer-events: none;
+	top: 0;
+	font-size: 100%;
+	left: -3.8em;
+	width: 3em; /* works for line-numbers below 1000 lines */
+	letter-spacing: -1px;
+	border-right: 1px solid #999;
+
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+}
+
+	.line-numbers-rows > span {
+		pointer-events: none;
+		display: block;
+		counter-increment: linenumber;
+	}
+
+		.line-numbers-rows > span:before {
+			content: counter(linenumber);
+			color: #999;
+			display: block;
+			padding-right: 0.8em;
+			text-align: right;
+		}
+pre.code-toolbar {
+	position: relative;
+}
+
+pre.code-toolbar > .toolbar {
+	position: absolute;
+	top: .3em;
+	right: .2em;
+	transition: opacity 0.3s ease-in-out;
+	opacity: 0;
+}
+
+pre.code-toolbar:hover > .toolbar {
+	opacity: 1;
+}
+
+pre.code-toolbar > .toolbar .toolbar-item {
+	display: inline-block;
+}
+
+pre.code-toolbar > .toolbar a {
+	cursor: pointer;
+}
+
+pre.code-toolbar > .toolbar button {
+	background: none;
+	border: 0;
+	color: inherit;
+	font: inherit;
+	line-height: normal;
+	overflow: visible;
+	padding: 0;
+	-webkit-user-select: none; /* for button */
+	-moz-user-select: none;
+	-ms-user-select: none;
+}
+
+pre.code-toolbar > .toolbar a,
+pre.code-toolbar > .toolbar button,
+pre.code-toolbar > .toolbar span {
+	color: #bbb;
+	font-size: .8em;
+	padding: 0 .5em;
+	background: #f5f2f0;
+	background: rgba(224, 224, 224, 0.2);
+	box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
+	border-radius: .5em;
+}
+
+pre.code-toolbar > .toolbar a:hover,
+pre.code-toolbar > .toolbar a:focus,
+pre.code-toolbar > .toolbar button:hover,
+pre.code-toolbar > .toolbar button:focus,
+pre.code-toolbar > .toolbar span:hover,
+pre.code-toolbar > .toolbar span:focus {
+	color: inherit;
+	text-decoration: none;
+}

gui/app/styles/core/vendor/x-toggle.scss

@@ -0,0 +1,7 @@
+input[type="text"], textarea {
+	cursor: text !important;
+}
+
+.x-toggle-component {
+	justify-content: left;
+}

gui/app/templates/components/layout/master-sidebar.hbs

@@ -32,27 +32,28 @@
 		<div class="meta">
 			{{#if session.authenticated}}
 				{{#if hasPins}}
-					<div class="bookmarks" id="user-pins-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+					<div class="bookmarks" id="user-pins-button">
 						<i class="dicon dicon-bookmark"></i>
-						{{#attach-tooltip showDelay=1000}}Saved bookmarks{{/attach-tooltip}}
-					</div>
-					<div class="dropdown-menu dropdown-menu-right" aria-labelledby="user-pins-button">
-						{{#if hasSpacePins}}
-							<h6 class="dropdown-header">Spaces</h6>
-							{{#each spacePins as |pin|}}
-								<a class="dropdown-item" href="#" {{action 'jumpToPin' pin}} data-id= {{pin.id}} id="pin-{{pin.id}}">{{pin.pin}}</a>
-							{{/each}}
-						{{/if}}
-						{{#if hasDocumentPins}}
-							<h6 class="dropdown-header">Documents</h6>
-							{{#each documentPins as |pin|}}
-								<a class="dropdown-item" href="#" {{action 'jumpToPin' pin}} data-id= {{pin.id}} id="pin-{{pin.id}}">{{pin.pin}}</a>
-							{{/each}}
-						{{/if}}
+						{{#attach-popover class="ember-attacher-popper" hideOn='clickout' showOn='click' isShown=false}}
+							<div class="menu">
+								{{#if hasSpacePins}}
+									<li class="item header">Spaces</li>
+									{{#each spacePins as |pin|}}
+										<a class="item" href="#" {{action 'jumpToPin' pin}} data-id= {{pin.id}} id="pin-{{pin.id}}">{{pin.pin}}</a>
+									{{/each}}
+								{{/if}}
+								{{#if hasDocumentPins}}
+									<li class="item header">Content</li>
+									{{#each documentPins as |pin|}}
+										<a class="item" href="#" {{action 'jumpToPin' pin}} data-id= {{pin.id}} id="pin-{{pin.id}}">{{pin.pin}}</a>
+									{{/each}}
+								{{/if}}
+							</div>
+						{{/attach-popover}}
 					</div>
 				{{/if}}
 				<div class="user-gravatar-container">
-					<div class="user-gravatar align-text-bottom" id="profile-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+					<div class="user-gravatar align-text-bottom" id="profile-button">
 						{{session.user.initials}}
 						{{#if hasWhatsNew}}
 							<div class="whats-new-dot" />
@@ -62,29 +63,31 @@
 								<div class="update-available-dot" />
 							{{/if}}
 						{{/if}}
-					</div>
-					<div class="dropdown-menu dropdown-menu-right" aria-labelledby="profile-button">
-						{{#if session.isAdmin}}
-							{{#link-to 'customize.general' class="dropdown-item"}}Settings{{/link-to}}
-							{{#unless appMeta.valid}}
-								{{#link-to 'customize.billing' class="dropdown-item font-weight-bold color-red-600"}}Update Billing{{/link-to}}
-							{{/unless}}
-							<div class="dropdown-divider"></div>
-						{{/if}}
-						{{#link-to 'profile' class="dropdown-item" }}Profile{{/link-to}}
-						<div class="dropdown-divider"></div>
-						{{#if session.isGlobalAdmin}}
-							{{#if appMeta.updateAvailable}}
-								{{#link-to 'customize.product' class="dropdown-item font-weight-bold color-yellow-600" }}Update available{{/link-to}}
-							{{/if}}
-						{{/if}}
-						<a href="#" class="dropdown-item {{if hasWhatsNew 'color-red-600 font-weight-bold'}}" {{action 'onShowWhatsNewModal'}}>What's New</a>
-						<a href="https://docs.documize.com" target="_blank" class="dropdown-item">Help</a>
-						<a href="#" class="dropdown-item" data-toggle="modal" data-target="#about-documize-modal" data-backdrop="static">About</a>
-						{{#if enableLogout}}
-							<div class="dropdown-divider"></div>
-							{{#link-to 'auth.logout' class="dropdown-item" }}Logout{{/link-to}}
-						{{/if}}
+						{{#attach-popover class="ember-attacher-popper" hideOn='clickout' showOn='click' isShown=false}}
+							<div class="menu">
+								{{#if session.isAdmin}}
+									{{#link-to 'customize.general' class="item"}}Settings{{/link-to}}
+									{{#unless appMeta.valid}}
+										{{#link-to 'customize.billing' class="item bold red"}}Update Billing{{/link-to}}
+									{{/unless}}
+									<div class="divider"></div>
+								{{/if}}
+								{{#link-to 'profile' class="item"}}Profile{{/link-to}}
+								<div class="divider"></div>
+								{{#if session.isGlobalAdmin}}
+									{{#if appMeta.updateAvailable}}
+										{{#link-to 'customize.product' class="item bold yellow"}}Update available{{/link-to}}
+									{{/if}}
+								{{/if}}
+								<a href="#" class="item {{if hasWhatsNew 'bold green'}}" {{action 'onShowWhatsNewModal'}}>What's New</a>
+								<a href="https://docs.documize.com" target="_blank" class="item">Help</a>
+								<a href="#" class="item" data-toggle="modal" data-target="#about-documize-modal" data-backdrop="static">About</a>
+								{{#if enableLogout}}
+									<div class="divider"></div>
+									{{#link-to 'auth.logout' class="item" }}Logout{{/link-to}}
+								{{/if}}
+							</div>
+						{{/attach-popover}}
 					</div>
 				</div>
 			{{/if}}

gui/ember-cli-build.js

@@ -61,6 +61,7 @@ module.exports = function (defaults) {
 	app.import('vendor/hoverIntent.min.js');
 	app.import('vendor/interact.min.js');
 	app.import('vendor/is.js');
+	app.import('vendor/iziToast.js');
 	app.import('vendor/keycloak.js');
 	app.import('vendor/markdown-it.min.js');
 	app.import('vendor/md5.js');