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/ui/empty-state.js

@@ -0,0 +1,30 @@
+// 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({
+	icon: 'visibility',
+	glypth: '',
+
+	didReceiveAttrs() {
+		this._super(...arguments);
+
+		switch (this.get('icon')) {
+			case 'visibility':
+				this.set('glypth', 'remove_red_eye');
+				break;
+			case 'direct':
+				this.set('glypth', 'directions');
+				break;
+		}
+	}
+});

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

@@ -0,0 +1,47 @@
+// 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 { reads } from '@ember/object/computed';
+import Component from '@ember/component';
+
+export default Component.extend({
+    cssClass: "",
+    prompt: null,
+    optionValuePath: 'id',
+    optionLabelPath: 'name',
+    action() {}, // action to fire on change
+    // action: Ember.K, // action to fire on change
+
+    // shadow the passed-in `selection` to avoid
+    // leaking changes to it via a 2-way binding
+    _selection: reads('selection'),
+
+    actions: {
+        change() {
+            const selectEl = this.$('select')[0];
+            const selectedIndex = selectEl.selectedIndex;
+            const content = this.get('content');
+
+            // decrement index by 1 if we have a prompt
+            const hasPrompt = !!this.get('prompt');
+            const contentIndex = hasPrompt ? selectedIndex - 1 : selectedIndex;
+
+            const selection = content[contentIndex];
+
+            // set the local, shadowed selection to avoid leaking
+            // changes to `selection` out via 2-way binding
+            this.set('_selection', selection);
+
+            const changeCallback = this.get('action');
+            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);
+		}
 	}
 });