Introduce modular UI framework

1. Modals wrapped
2. Toolbar icon actions: click and link-to navigation
3. Moved components into sub-folders
4. Replaced Bootstrap Tooltip and Dropdown libs with Ember specific add-ons

And more.

Co-Authored-By: Saul S <sauls8t@users.noreply.github.com>
Co-Authored-By: McMatts <matt@documize.com>

gui/app/components/layout/page-desc.js

@@ -0,0 +1,18 @@
+// 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 $ from 'jquery';
+import Component from '@ember/component';
+
+export default Component.extend({
+	tagName: 'p',
+	classNames: ['master-page-desc'],
+});

gui/app/components/layout/page-heading.js

@@ -0,0 +1,18 @@
+// 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 $ from 'jquery';
+import Component from '@ember/component';
+
+export default Component.extend({
+	tagName: 'h1',
+	classNames: ['master-page-heading'],
+});

gui/app/components/ui/ui-button.js

@@ -16,12 +16,14 @@ export default Component.extend({
 	tagName: 'button',
 	classNames: [],
 	classNameBindings: ['calcClass'],
+	attributeBindings: ['calcAttrs:data-dismiss'],
 
 	label: '',
 	icon: '',
 	color: '',
 	light: false,
 	themed: false,
+	dismiss: false,
 
 	iconClass: '',
 	hasIcon: computed('iconClass', function() {
@@ -30,15 +32,7 @@ export default Component.extend({
 
 	calcClass: computed(function() {
 		// Prepare icon class name
-		let ic = '';
-		let icon = this.icon;
-
-		if (icon === 'delete') ic = 'dicon-bin';
-		if (icon === 'print') ic = 'dicon-print';
-		if (icon === 'settings') ic = 'dicon-settings-gear';
-		if (icon === 'plus') ic = 'dicon-e-add';
-		if (icon === 'person') ic = 'dicon-single-01';
-		this.iconClass = ic;
+		this.iconClass = this.icon;
 
 		// Prepare button class name
 		let bc = 'dmz-button';
@@ -55,7 +49,17 @@ export default Component.extend({
 		return bc;
 	}),
 
-	click() {
-		this.onClick();
+	calcAttrs: computed(function() {
+		if (this.dismiss) {
+			return 'modal';
+		}
+
+		return null;
+	}),
+
+	click(e) {
+		if (is.not.undefined(this.onClick)) {
+			this.onClick(e);
+		}
 	}
 });

gui/app/components/ui/ui-modal-buttons.js

@@ -0,0 +1,17 @@
+// 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';
+
+export default Component.extend({
+	tagName: 'div',
+	classNames: ['modal-footer'],
+});

gui/app/components/ui/ui-modal.js

@@ -0,0 +1,28 @@
+// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
+//
+// This software (Documize Community Edition) is licensed under
+// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
+//
+// You can operate outside the AGPL restrictions by purchasing
+// Documize Enterprise Edition and obtaining a commercial license
+// by contacting <sales@documize.com>.
+//
+// https://documize.com
+
+// import $ from 'jquery';
+import stringUtil from '../../utils/string';
+import Component from '@ember/component';
+
+export default Component.extend({
+	contentId: '',
+	title: '',
+	size: '',
+
+	didInsertElement() {
+		this._super(...arguments);
+		this.set("contentId", 'confirm-modal-' + stringUtil.makeId(10));
+	},
+
+	actions: {
+	}
+});

gui/app/components/ui/ui-select.js

@@ -1,16 +1,15 @@
 // Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
 //
-// This software (Documize Community Edition) is licensed under 
+// 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>. 
+// by contacting <sales@documize.com>.
 //
 // https://documize.com
 
 import { reads } from '@ember/object/computed';
-
 import Component from '@ember/component';
 
 export default Component.extend({
@@ -45,4 +44,4 @@ export default Component.extend({
             changeCallback(selection);
         }
     }
-});
+});

gui/app/components/ui/ui-toolbar-icon.js

@@ -9,46 +9,41 @@
 //
 // https://documize.com
 
+import { inject as service } from '@ember/service';
 import { computed } from '@ember/object';
 import Component from '@ember/component';
 
 export default Component.extend({
+	router: service(),
 	tagName: 'i',
 	classNames: ['dicon'],
 	classNameBindings: ['calcClass'],
 
 	color: '',
 	icon: '',
+	tooltip: '',
 
 	calcClass: computed(function() {
 		let c = '';
 		let icon = this.icon;
 
-		switch (this.color) {
-			case 'red':
-				c += 'red';
-				break;
-			case 'yellow':
-				c += 'yellow';
-				break;
-			case 'green':
-				c += 'green';
-				break;
-		}
-		c += ' ';
-
-		if (icon === 'delete') c += 'dicon-bin';
-		if (icon === 'print') c += 'dicon-print';
-		if (icon === 'settings') c += 'dicon-settings-gear';
-		if (icon === 'plus') c += 'dicon-e-add';
-		if (icon === 'person') c += 'dicon-single-01';
-		c += ' ';
+		if (this.color !== '') c += this.color + ' ';
 
+		if (icon !== '') c += icon + ' ';
 
 		return c.trim();
 	}),
 
-	click() {
-		this.onClick();
+	click(e) {
+		if (is.not.undefined(this.onClick)) {
+			this.onClick(e);
+			return;
+		}
+		if (is.not.undefined(this.linkTo)) {
+			// TODO:
+			// Pass in linkModel, linkOptions
+			// https://emberjs.com/api/ember/3.5/classes/RouterService/methods/transitionTo?anchor=transitionTo
+			this.router.transitionTo(this.linkTo);
+		}
 	}
 });

gui/app/components/user-notification.js

@@ -1,57 +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 { run } from '@ember/runloop';
-import Component from '@ember/component';
-import miscUtil from '../utils/misc';
-
-export default Component.extend({
-	notifications : null,
-
-    init() {
-        this._super(...arguments);
-    },
-
-    didInsertElement() {
-        // this.eventBus.subscribe('notifyUser', this, 'showNotification');
-    },
-
-    willDestroyElement() {
-        // this.eventBus.unsubscribe('notifyUser');
-    },
-
-    showNotification(msg) {
-        let self = this;
-        let notifications = this.get('notifications');
-        notifications.pushObject(msg);
-        this.set('notifications', notifications);
-
-        let elem = this.$(".user-notification")[0];
-
-        run(() => {
-            self.$(elem).show();
-
-            // FIXME: need a more robust solution
-            miscUtil.interval(function() {
-                let notifications = self.get('notifications');
-
-                if (notifications.length > 0) {
-                    notifications.removeAt(0);
-                    self.set('notifications', notifications);
-                }
-
-                if (notifications.length === 0) {
-                    self.$(elem).hide();
-                }
-            }, 2500, self.get('notifications').length);
-        });
-    },
-});

gui/app/components/user/password-reset.js

@@ -11,9 +11,9 @@
 
 import $ from 'jquery';
 import { empty, and } from '@ember/object/computed';
-import Component from '@ember/component';
 import { isEqual, isEmpty } from '@ember/utils';
 import { set } from '@ember/object';
+import Component from '@ember/component';
 
 export default Component.extend({
 	password: "",

gui/app/components/user/user-profile.js

@@ -14,7 +14,7 @@ import { empty } from '@ember/object/computed';
 import { computed, set } from '@ember/object';
 import { isPresent, isEqual, isEmpty } from '@ember/utils';
 import { inject as service } from '@ember/service';
-import AuthProvider from '../mixins/auth';
+import AuthProvider from '../../mixins/auth';
 import Component from '@ember/component';
 
 export default Component.extend(AuthProvider, {