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 = '';
+		this.iconClass = this.icon;
-		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;
 
 		// Prepare button class name
 		let bc = 'dmz-button';
@@ -55,7 +49,17 @@ export default Component.extend({
 		return bc;
 	}),
 
-	click() {
+	calcAttrs: computed(function() {
-		this.onClick();
+		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) {
+		if (this.color !== '') c += 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 (icon !== '') c += icon + ' ';
 
 		return c.trim();
 	}),
 
-	click() {
+	click(e) {
-		this.onClick();
+		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, {

gui/app/constants/constants.js

@@ -192,6 +192,31 @@ let constants = EmberObject.extend({
 
 		// Seats6 is unlimited.
 		Seats6: 9999
+	},
+
+	Icon: { // eslint-disable-line ember/avoid-leaking-state-in-ember-objects
+		Delete: 'dicon-bin',
+		Print: 'dicon-print',
+		Plus: 'dicon-e-add',
+		Person: 'dicon-single-01',
+		Settings: 'dicon-settings-gear',
+	},
+
+	Color: { // eslint-disable-line ember/avoid-leaking-state-in-ember-objects
+		Red: 'red',
+		Green: 'green',
+		Yellow: 'yellow',
+		Gray: 'gray'
+	},
+
+	Label: { // eslint-disable-line ember/avoid-leaking-state-in-ember-objects
+		Add: 'Add',
+		Cancel: 'Cancel',
+		Close: 'Close',
+		Delete: 'Delete',
+		Insert: 'Insert',
+		Save: 'Save',
+		Update: 'Update',
 	}
 });
 

gui/app/pods/auth/forgot/template.hbs

@@ -5,7 +5,7 @@
 			<div class="url">{{appMeta.appHost}}</div>
 		</div>
 		<div class="login-form">
-			{{forgot-password forgot=(action "forgot")}}
+			{{user/forgot-password forgot=(action "forgot")}}
 		</div>
 	</div>
 </div>

gui/app/pods/auth/reset/template.hbs

@@ -4,6 +4,6 @@
 			<img src="/assets/img/logo-purple.png" title="Documize" alt="Documize" class="img-fluid">
 			<div class="url">{{appMeta.appHost}}</div>
 		</div>
-		{{password-reset reset=(action "reset")}}
+		{{user/password-reset reset=(action "reset")}}
 	</div>
 </div>

gui/app/pods/folders/template.hbs

@@ -2,12 +2,26 @@
 {{/layout/master-sidebar}}
 
 {{#layout/master-content}}
+	<div class="grid-container-8-2">
+		<div class="grid-cell-1">
+			{{layout/page-heading title=appMeta.title}}
+			{{layout/page-desc desc=appMeta.message}}
+		</div>
+		<div class="grid-cell-2">
+			{{#if (or session.isEditor session.isAdmin)}}
+				{{#ui/ui-toolbar dark=false light=true raised=true large=true bordered=true}}
+					{{#if session.isEditor}}
+						{{ui/ui-toolbar-icon icon=constants.Icon.Plus color=constants.Color.Green tooltip="New space" onClick=(action "onShowModal")}}
+					{{/if}}
+					{{#if session.isAdmin}}
+					{{ui/ui-toolbar-icon icon=constants.Icon.Settings tooltip="Settings" linkTo="customize.general"}}
+					{{/if}}
+				{{/ui/ui-toolbar}}
+			{{/if}}
+		</div>
+	</div>
+
 
-	<h1>{{appMeta.title}}</h1>
-	<p>{{appMeta.message}}</p>
-	{{#if session.isEditor}}
-		<button type="button" class="btn btn-success font-weight-bold my-3" {{action "onShowModal"}}>+ SPACE</button>
-	{{/if}}
 	{{spaces/space-list spaces=model}}
 
 	<div class="modal" tabindex="-1" role="dialog" id="add-space-modal">
@@ -19,11 +33,11 @@
 						<div class="form-group">
 							<label for="new-space-name">Space Name</label>
 							{{input type="text" id="new-space-name" class="form-control mousetrap" placeholder="Space name" value=spaceName}}
-							<small id="emailHelp" class="form-text text-muted">Characters and numbers only</small>
+							<small class="form-text text-muted">Characters and numbers only</small>
 						</div>
 						<div class="form-group">
 							<label for="clone-space-dropdown">Clone Space</label>
-							{{ui-select id="clone-space-dropdown" content=model prompt="select space" action=(action "onCloneSpaceSelect") optionValuePath="id" optionLabelPath="name" selection=clonedSpace}}
+							{{ui/ui-select id="clone-space-dropdown" content=model prompt="select space" action=(action "onCloneSpaceSelect") optionValuePath="id" optionLabelPath="name" selection=clonedSpace}}
 							<small id="emailHelp" class="form-text text-muted">Copy templates, permissions, documents from existing space</small>
 							<div class="margin-top-10" />
 							{{#if hasClone}}
@@ -35,11 +49,11 @@
 					</form>
 				</div>
 				<div class="modal-footer">
-					<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
+					{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Cancel dismiss=true}}
-					<button type="button" class="btn btn-success" onclick={{action "onAddSpace"}}>Add</button>
+					{{ui/ui-button-gap}}
+					{{ui/ui-button color=constants.Color.Green light=true label=constants.Label.Add onClick=(action "onAddSpace")}}
 				</div>
 			</div>
 		</div>
 	</div>
-
 {{/layout/master-content}}

gui/app/pods/profile/template.hbs

@@ -3,7 +3,7 @@
 
 {{#layout/middle-zone}}
 	{{#layout/middle-zone-content}}
-		{{user-profile model=model save=(action "save")}}
+		{{user/user-profile model=model save=(action "save")}}
 	{{/layout/middle-zone-content}}
 
 	{{#layout/middle-zone-sidebar}}

gui/app/pods/setup/template.hbs

@@ -9,7 +9,7 @@
 			</div>
 		</div>
 		<div class="col-8">
-			{{documize-setup model=model save=(action "save")}}
+			{{setup/documize-setup model=model save=(action "save")}}
 		</div>
 	</div>
 </div>

gui/app/pods/theming/template.hbs

@@ -6,93 +6,105 @@
 	<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}}
-	{{ui/ui-button themed=true label="save" onClick=(action "onButtonClick" 1)}}
+	{{ui/ui-button themed=true label=constants.Label.Save onClick=(action "onButtonClick" 1)}}
 	{{ui/ui-button-gap}}
-	{{ui/ui-button themed=true light=true label="update" onClick=(action "onButtonClick" 2)}}
+	{{ui/ui-button themed=true light=true label=constants.Label.Update onClick=(action "onButtonClick" 2)}}
 	{{ui/ui-button-gap}}
 	<br>
 	<br>
-	{{ui/ui-button color="green" label="save" onClick=(action "onSuccess")}}
+	{{ui/ui-button color=constants.Color.Green label=constants.Label.Save onClick=(action "onSuccess")}}
 	{{ui/ui-button-gap}}
-	{{ui/ui-button color="yellow" label="update" onClick=(action "onInfo")}}
+	{{ui/ui-button color=constants.Color.Yellow label=constants.Label.Update onClick=(action "onInfo")}}
 	{{ui/ui-button-gap}}
-	{{ui/ui-button color="gray" label="Cancel" onClick=(action "onWarn")}}
+	{{ui/ui-button color=constants.Color.Gray label=constants.Label.Cancel onClick=(action "onWarn")}}
 	{{ui/ui-button-gap}}
-	{{ui/ui-button color="red" label="deletE" onClick=(action "onError")}}
+	{{ui/ui-button color=constants.Color.Red label=constants.Label.Delete onClick=(action "onError")}}
 	{{ui/ui-button-gap}}
 	<br>
 	<br>
-	{{ui/ui-button color="green" light=true label="save" onClick=(action "onSuccess")}}
+	{{ui/ui-button color=constants.Color.Green light=true label=constants.Label.Save onClick=(action "onSuccess")}}
 	{{ui/ui-button-gap}}
-	{{ui/ui-button color="yellow" light=true label="update" onClick=(action "onInfo")}}
+	{{ui/ui-button color=constants.Color.Yellow light=true label=constants.Label.Update onClick=(action "onInfo")}}
 	{{ui/ui-button-gap}}
-	{{ui/ui-button color="gray" light=true label="Cancel" onClick=(action "onWarn")}}
+	{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Cancel onClick=(action "onWarn")}}
 	{{ui/ui-button-gap}}
-	{{ui/ui-button color="red" light=true label="deletE" onClick=(action "onError")}}
+	{{ui/ui-button color=constants.Color.Red light=true label=constants.Label.Delete onClick=(action "onError")}}
 	{{ui/ui-button-gap}}
 	<br>
 	<br>
-	{{ui/ui-button color="green" light=true icon="plus" label="save" onClick=(action "onSuccess")}}
+	{{ui/ui-button color=constants.Color.Green light=true icon=constants.Icon.Plus label=constants.Label.Save onClick=(action "onSuccess")}}
 	{{ui/ui-button-gap}}
-	{{ui/ui-button color="yellow" light=true icon="settings" label="update" onClick=(action "onInfo")}}
+	{{ui/ui-button color=constants.Color.Yellow light=true icon=constants.Icon.Settings label=constants.Label.Update onClick=(action "onInfo")}}
 	{{ui/ui-button-gap}}
-	{{ui/ui-button color="gray" light=true icon="print" label="Cancel" onClick=(action "onWarn")}}
+	{{ui/ui-button color=constants.Color.Gray light=true icon=constants.Icon.Print label=constants.Label.Cancel onClick=(action "onWarn")}}
 	{{ui/ui-button-gap}}
-	{{ui/ui-button color="red" light=true icon="delete" label="deletE" onClick=(action "onError")}}
+	{{ui/ui-button color=constants.Color.Red light=true icon=constants.Icon.Delete label=constants.Label.Delete onClick=(action "onError")}}
 	{{ui/ui-button-gap}}
 	<br>
 	<br>
 	{{#ui/ui-toolbar dark=false light=false raised=false large=false bordered=false}}
-		{{ui/ui-toolbar-icon icon="delete" color="red" onClick=(action "onToolbarClick" 1)}}
+		{{ui/ui-toolbar-icon icon=constants.Icon.Delete color=constants.Color.Red onClick=(action "onToolbarClick" 1)}}
-		{{ui/ui-toolbar-icon icon="print" color="yellow" onClick=(action "onToolbarClick" 2)}}
+		{{ui/ui-toolbar-icon icon=constants.Icon.Print color=constants.Color.Yellow onClick=(action "onToolbarClick" 2)}}
-		{{ui/ui-toolbar-icon icon="settings" onClick=(action "onToolbarClick" 3)}}
+		{{ui/ui-toolbar-icon icon=constants.Icon.Settings onClick=(action "onToolbarClick" 3)}}
-		{{ui/ui-toolbar-icon icon="print" color="green" onClick=(action "onToolbarClick" 4)}}
+		{{ui/ui-toolbar-icon icon=constants.Icon.Print color=constants.Color.Green onClick=(action "onToolbarClick" 4)}}
-		{{ui/ui-toolbar-icon icon="person" color="" onClick=(action "onToolbarClick" 5)}}
+		{{ui/ui-toolbar-icon icon=constants.Icon.Person onClick=(action "onToolbarClick" 5)}}
+		{{ui/ui-toolbar-icon icon=constants.Icon.Plus color=constants.Color.Green onClick=(action "onToolbarClick" 5)}}
 	{{/ui/ui-toolbar}}
 	<br>
 	<br>
 	{{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true}}
-		{{ui/ui-toolbar-icon icon="delete" color="red" onClick=(action "onToolbarClick" 1)}}
+		{{ui/ui-toolbar-icon icon=constants.Icon.Delete color=constants.Color.Red onClick=(action "onToolbarClick" 1)}}
-		{{ui/ui-toolbar-icon icon="print" color="yellow" onClick=(action "onToolbarClick" 2)}}
+		{{ui/ui-toolbar-icon icon=constants.Icon.Print color=constants.Color.Yellow onClick=(action "onToolbarClick" 2)}}
-		{{ui/ui-toolbar-icon icon="settings" onClick=(action "onToolbarClick" 3)}}
+		{{ui/ui-toolbar-icon icon=constants.Icon.Settings onClick=(action "onToolbarClick" 3)}}
-		{{ui/ui-toolbar-icon icon="print" color="green" onClick=(action "onToolbarClick" 4)}}
+		{{ui/ui-toolbar-icon icon=constants.Icon.Print color=constants.Color.Green onClick=(action "onToolbarClick" 4)}}
-		{{ui/ui-toolbar-icon icon="person" color="" onClick=(action "onToolbarClick" 5)}}
+		{{ui/ui-toolbar-icon icon=constants.Icon.Person onClick=(action "onToolbarClick" 5)}}
+		{{ui/ui-toolbar-icon icon=constants.Icon.Plus color=constants.Color.Green onClick=(action "onToolbarClick" 5)}}
 	{{/ui/ui-toolbar}}
 	<br>
 	<br>
 	{{#ui/ui-toolbar dark=true light=false raised=true large=false bordered=true}}
-		{{ui/ui-toolbar-icon icon="delete" color="red" onClick=(action "onToolbarClick" 1)}}
+		{{ui/ui-toolbar-icon icon=constants.Icon.Delete color=constants.Color.Red onClick=(action "onToolbarClick" 1)}}
-		{{ui/ui-toolbar-icon icon="print" color="yellow" onClick=(action "onToolbarClick" 2)}}
+		{{ui/ui-toolbar-icon icon=constants.Icon.Print color=constants.Color.Yellow onClick=(action "onToolbarClick" 2)}}
-		{{ui/ui-toolbar-icon icon="settings" onClick=(action "onToolbarClick" 3)}}
+		{{ui/ui-toolbar-icon icon=constants.Icon.Settings onClick=(action "onToolbarClick" 3)}}
-		{{ui/ui-toolbar-icon icon="print" color="green" onClick=(action "onToolbarClick" 4)}}
+		{{ui/ui-toolbar-icon icon=constants.Icon.Print color=constants.Color.Green onClick=(action "onToolbarClick" 4)}}
-		{{ui/ui-toolbar-icon icon="person" color="" onClick=(action "onToolbarClick" 5)}}
+		{{ui/ui-toolbar-icon icon=constants.Icon.Person onClick=(action "onToolbarClick" 5)}}
+		{{ui/ui-toolbar-icon icon=constants.Icon.Plus color=constants.Color.Green onClick=(action "onToolbarClick" 5)}}
 	{{/ui/ui-toolbar}}
 	<br>
 	<br>
 	{{#ui/ui-toolbar dark=false light=false raised=false large=true bordered=false}}
-		{{ui/ui-toolbar-icon icon="delete" color="red" onClick=(action "onToolbarClick" 1)}}
+		{{ui/ui-toolbar-icon icon=constants.Icon.Delete color=constants.Color.Red onClick=(action "onToolbarClick" 1)}}
-		{{ui/ui-toolbar-icon icon="print" color="yellow" onClick=(action "onToolbarClick" 2)}}
+		{{ui/ui-toolbar-icon icon=constants.Icon.Print color=constants.Color.Yellow onClick=(action "onToolbarClick" 2)}}
-		{{ui/ui-toolbar-icon icon="settings" onClick=(action "onToolbarClick" 3)}}
+		{{ui/ui-toolbar-icon icon=constants.Icon.Settings onClick=(action "onToolbarClick" 3)}}
-		{{ui/ui-toolbar-icon icon="print" color="green" onClick=(action "onToolbarClick" 4)}}
+		{{ui/ui-toolbar-icon icon=constants.Icon.Print color=constants.Color.Green onClick=(action "onToolbarClick" 4)}}
-		{{ui/ui-toolbar-icon icon="person" color="" onClick=(action "onToolbarClick" 5)}}
+		{{ui/ui-toolbar-icon icon=constants.Icon.Person onClick=(action "onToolbarClick" 5)}}
+		{{ui/ui-toolbar-icon icon=constants.Icon.Plus color=constants.Color.Green onClick=(action "onToolbarClick" 5)}}
 	{{/ui/ui-toolbar}}
 	<br>
 	<br>
 	{{#ui/ui-toolbar dark=false light=true raised=true large=true bordered=true}}
-		{{ui/ui-toolbar-icon icon="delete" color="red" onClick=(action "onToolbarClick" 1)}}
+		{{ui/ui-toolbar-icon icon=constants.Icon.Delete color=constants.Color.Red onClick=(action "onToolbarClick" 1)}}
-		{{ui/ui-toolbar-icon icon="print" color="yellow" onClick=(action "onToolbarClick" 2)}}
+		{{ui/ui-toolbar-icon icon=constants.Icon.Print color=constants.Color.Yellow onClick=(action "onToolbarClick" 2)}}
-		{{ui/ui-toolbar-icon icon="settings" onClick=(action "onToolbarClick" 3)}}
+		{{ui/ui-toolbar-icon icon=constants.Icon.Settings onClick=(action "onToolbarClick" 3)}}
-		{{ui/ui-toolbar-icon icon="print" color="green" onClick=(action "onToolbarClick" 4)}}
+		{{ui/ui-toolbar-icon icon=constants.Icon.Print color=constants.Color.Green onClick=(action "onToolbarClick" 4)}}
-		{{ui/ui-toolbar-icon icon="person" color="" onClick=(action "onToolbarClick" 5)}}
+		{{ui/ui-toolbar-icon icon=constants.Icon.Person onClick=(action "onToolbarClick" 5)}}
+		{{ui/ui-toolbar-icon icon=constants.Icon.Plus color=constants.Color.Green onClick=(action "onToolbarClick" 5)}}
 	{{/ui/ui-toolbar}}
 	<br>
 	<br>
 	{{#ui/ui-toolbar dark=true light=false raised=true large=true bordered=true}}
-		{{ui/ui-toolbar-icon icon="delete" color="red" onClick=(action "onToolbarClick" 1)}}
+		{{ui/ui-toolbar-icon icon=constants.Icon.Delete color=constants.Color.Red onClick=(action "onToolbarClick" 1)}}
-		{{ui/ui-toolbar-icon icon="print" color="yellow" onClick=(action "onToolbarClick" 2)}}
+		{{ui/ui-toolbar-icon icon=constants.Icon.Print color=constants.Color.Yellow onClick=(action "onToolbarClick" 2)}}
-		{{ui/ui-toolbar-icon icon="settings" onClick=(action "onToolbarClick" 3)}}
+		{{ui/ui-toolbar-icon icon=constants.Icon.Settings onClick=(action "onToolbarClick" 3)}}
-		{{ui/ui-toolbar-icon icon="print" color="green" onClick=(action "onToolbarClick" 4)}}
+		{{ui/ui-toolbar-icon icon=constants.Icon.Print color=constants.Color.Green onClick=(action "onToolbarClick" 4)}}
-		{{ui/ui-toolbar-icon icon="person" color="" onClick=(action "onToolbarClick" 5)}}
+		{{ui/ui-toolbar-icon icon=constants.Icon.Person onClick=(action "onToolbarClick" 5)}}
+		{{ui/ui-toolbar-icon icon=constants.Icon.Plus color=constants.Color.Green tooltip="New space" onClick=(action "onToolbarClick" 5)}}
+	{{/ui/ui-toolbar}}
+	<br>
+	<br>
+	{{#ui/ui-toolbar dark=false light=true raised=true large=true bordered=true}}
+		{{ui/ui-toolbar-icon icon=constants.Icon.Plus color=constants.Color.Green onClick=(action "onToolbarClick" 5)}}
+		{{ui/ui-toolbar-icon icon=constants.Icon.Settings onClick=(action "onToolbarClick" 3)}}
 	{{/ui/ui-toolbar}}
 	<br>
 	<br>

gui/app/styles/core/bootstrap.scss

@@ -34,6 +34,7 @@ $modal-footer-border-color: 	$color-white;
 	background-color: $theme-500;
 	color: map-get($gray-shades, 100);
 	font-size: 1.2rem;
+	font-weight: 600;
 }
 
 // rounded corners

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

@@ -4,4 +4,5 @@
 @import "layout-footer.scss";
 @import "layout-content.scss";
 
+@import "common.scss";
 @import "master-internal.scss";

gui/app/styles/core/layout/common.scss

@@ -0,0 +1,60 @@
+// Styles that apply to all pages using master layout
+
+
+$display-break-1: 700px;
+$display-break-2: 900px;
+$display-break-3: 1200px;
+$display-break-4: 1600px;
+$display-break-5: 1800px;
+
+.master-page-heading {
+	font-size: 2rem;
+	font-weight: 700;
+	color: map-get($gray-shades, 800);
+}
+
+.master-page-desc {
+	font-size: 1.2rem;
+	font-weight: 400;
+	color: map-get($gray-shades, 700);
+}
+
+.grid-container-8-2 {
+	display: grid;
+	grid-template-columns: 1fr;
+	grid-template-rows: 2fr;
+
+	.grid-cell-1 {
+		grid-column-start: 1;
+		grid-row-start: 2;
+		padding: 0;
+		align-self: self-start;
+		justify-self: self-start;
+	}
+
+	.grid-cell-2 {
+		grid-column-start: 1;
+		grid-row-start: 1;
+		padding: 0;
+		align-self: self-start;
+		justify-self: self-start;
+	}
+
+	@media (min-width: $display-break-2) {
+		grid-template-columns: 8fr 2fr;
+		grid-template-rows: 1fr;
+
+		.grid-cell-1 {
+			grid-column-start: 1;
+			grid-row-start: 1;
+			padding: 0;
+		}
+
+		.grid-cell-2 {
+			grid-column-start: 2;
+			grid-row-start: 1;
+			padding: 0;
+			justify-self: self-end;
+		}
+	}
+}

gui/app/styles/core/layout/master-internal.scss

@@ -1,9 +1,3 @@
-$display-break-1: 700px;
-$display-break-2: 900px;
-$display-break-3: 1200px;
-$display-break-4: 1600px;
-$display-break-5: 1800px;
-
 // CSS GRID WITH FIXED SIDEBAR OUTSIDE GRID
 // Mobile-first layout
 .master-container {
@@ -121,7 +115,7 @@ $display-break-5: 1800px;
 
 		.master-content {
 			grid-column-start: 2;
-			padding: 10px;
+			padding: 20px;
 		}
 	}
 
@@ -304,6 +298,7 @@ $display-break-5: 1800px;
 
 		.master-content {
 			grid-column-start: 2;
+			padding: 40px 30px;
 		}
 	}
 
@@ -335,10 +330,11 @@ $display-break-5: 1800px;
 @media (min-width: $display-break-4) {
 	.master-container {
 		display: grid;
-		grid-template-columns: 370px auto;
+		grid-template-columns: 370px  minmax(auto, 1200px);
 
 		.master-content {
 			grid-column-start: 2;
+			padding: 40px 40px;
 		}
 	}
 

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

@@ -78,53 +78,3 @@
 .dmz-toolbar-bordered {
 	border: 1px solid map-get($gray-shades, 300);
 }
-
-
-// .dmz-toolbar-dark-small {
-// 	@extend .dmz-toolbar;
-// 	background-color: map-get($gray-shades, 200);
-// 	border: 1px solid map-get($gray-shades, 300);
-// 	@extend %toolbar-shadow;
-// }
-
-// .dmz-toolbar-dark-large {
-// 	@extend .dmz-toolbar;
-// 	background-color: map-get($gray-shades, 200);
-// 	border: 1px solid map-get($gray-shades, 300);
-// 	height: 40px;
-// 	padding: 7px 10px;
-// 	line-height: 33px;
-// 	@extend %toolbar-shadow;
-
-// 	> .dicon {
-// 		font-size: 20px;
-// 		font-weight: 500;
-// 		padding: 0 0.5rem;
-// 	}
-// }
-
-// .dmz-toolbar-small {
-// 	@extend .dmz-toolbar;
-// 	background-color: transparent;
-// }
-
-// .dmz-toolbar-large {
-// 	@extend .dmz-toolbar-dark-large;
-// 	background-color: transparent;
-// 	border: none;
-// 	box-shadow: none;
-// }
-
-// .dmz-toolbar-raised-small {
-// 	@extend .dmz-toolbar;
-// 	@extend %toolbar-shadow;
-// 	background-color: map-get($gray-shades, 100);
-// 	border: 1px solid map-get($gray-shades, 200);
-// }
-
-// .dmz-toolbar-raised-large {
-// 	@extend .dmz-toolbar-dark-large;
-// 	@extend %toolbar-shadow;
-// 	background-color: map-get($gray-shades, 100);
-// 	border: 1px solid map-get($gray-shades, 200);
-// }

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

@@ -1,6 +1,11 @@
 // https://github.com/kybishop/ember-attacher
 
 .ember-attacher-tooltip {
-	font-size: 0.9rem;
+	font-size: 0.9rem !important;
-	padding: 0.5rem 0.75rem;
+	padding: 0.5rem 0.75rem !important;
+	background-color: map-get($gray-shades, 600) !important;
+
+	> div {
+		background-color: map-get($gray-shades, 600) !important;
+	}
 }

gui/app/templates/application.hbs

@@ -1,2 +1 @@
 {{outlet}}
-{{user-notification notification="message"}}

gui/app/templates/components/document/view-revision.hbs

@@ -5,7 +5,7 @@
 		<div class="row">
 			<div class="col-12">
 				<div class="form-group">
-					{{ui-select tagName="span" class="revision-picker" content=revisions action=(action "onSelectRevision") optionValuePath="id" optionLabelPath="label"}}
+					{{ui/ui-select tagName="span" class="revision-picker" content=revisions action=(action "onSelectRevision") optionValuePath="id" optionLabelPath="label"}}
 				</div>
 			</div>
 		</div>

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

@@ -59,9 +59,9 @@
 {{/ui/ui-dialog}}
 
 {{#if showAdd}}
-	{{empty-state icon="direct" message="Add documents via + DOCUMENT"}}
+	{{ui/empty-state icon="direct" message="Add documents via + DOCUMENT"}}
 {{/if}}
 
 {{#if showLockout}}
-	{{empty-state icon="visibility" message="Space permissions are preventing you from viewing and creating documents"}}
+	{{ui/empty-state icon="visibility" message="Space permissions are preventing you from viewing and creating documents"}}
 {{/if}}

gui/app/templates/components/folder/settings-general.hbs

@@ -8,7 +8,7 @@
 
 		<div class="form-group">
 			<label>Space Type</label>
-			{{ui-select id="spacetypes-dropdown" content=spaceTypeOptions optionValuePath="id" optionLabelPath="label" selection=spaceType action=(action "onSetSpaceType")}}
+			{{ui/ui-select id="spacetypes-dropdown" content=spaceTypeOptions optionValuePath="id" optionLabelPath="label" selection=spaceType action=(action "onSetSpaceType")}}
 			<small class="form-text text-muted">Who can see this space?</small>
 		</div>
 

gui/app/templates/components/layout/page-desc.hbs

@@ -0,0 +1 @@
+{{desc}}

gui/app/templates/components/layout/page-heading.hbs

@@ -0,0 +1 @@
+{{title}}

gui/app/templates/components/section/code/type-editor.hbs

@@ -1,7 +1,7 @@
 {{#section/base-editor-inline document=document folder=folder page=page tip="Concise name that describes code snippet" isDirty=(action "isDirty") onCancel=(action "onCancel") onAction=(action "onAction")}}
 	<div class="section-code-editor">
 		<div class="syntax-selector">
-			{{ui-select id=syntaxId
+			{{ui/ui-select id=syntaxId
 				content=syntaxOptions
 				action=(action "onSyntaxChange")
 				optionValuePath="mode"

gui/app/templates/components/section/github/type-editor.hbs

@@ -5,7 +5,7 @@
 			<div class="col-6">
 				<div class="form-group">
 					<label>Select Organization</label>
-					{{ui-select id="owners-dropdown" content=owners action=(action "onOwnerChange") optionValuePath="id" optionLabelPath="name" selection=config.owner}}
+					{{ui/ui-select id="owners-dropdown" content=owners action=(action "onOwnerChange") optionValuePath="id" optionLabelPath="name" selection=config.owner}}
 					<small class="form-text text-muted">Select organization or user whose repository you want to show</small>
 				</div>
 				<div class="form-group">

gui/app/templates/components/section/papertrail/type-editor.hbs

@@ -33,7 +33,7 @@
 				</div>
 				<div class="form-group">
 					<label for="group-dropdown">Group</label>
-					{{ui-select id="group-dropdown" prompt="<group>" content=options.groups action=(action "onGroupsChange") optionValuePath="id" optionLabelPath="name" selection=config.group}}
+					{{ui/ui-select id="group-dropdown" prompt="<group>" content=options.groups action=(action "onGroupsChange") optionValuePath="id" optionLabelPath="name" selection=config.group}}
 					<small class="form-text text-muted">Optional Papertrail group</small>
 				</div>
 			</form>

gui/app/templates/components/section/trello/type-editor.hbs

@@ -9,7 +9,7 @@
 			{{else}}
 				<div class="form-group">
 					<label>Select Board</label>
-					{{ui-select id="boards-dropdown" content=boards action=(action "onBoardChange") optionValuePath="id" optionLabelPath="name" selection=config.board}}
+					{{ui/ui-select id="boards-dropdown" content=boards action=(action "onBoardChange") optionValuePath="id" optionLabelPath="name" selection=config.board}}
 				</div>
 				<div class="form-group">
 					<label for="airtable-embed-cod">Select Lists</label>

gui/app/templates/components/ui/ui-modal-buttons.hbs

@@ -0,0 +1 @@
+{{yield}}

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

@@ -0,0 +1,13 @@
+<div id={{contentId}} class="modal" tabindex="-1" role="dialog">
+	<div class="modal-dialog {{size}}" role="document">
+		<div class="modal-content">
+			<div class="modal-header">{{title}}</div>
+			<div class="modal-body">
+				{{yield}}
+			</div>
+			<div class="modal-footer">
+				{{outlet "buttons"}}
+			</div>
+		</div>
+	</div>
+</div>

gui/app/templates/components/ui/ui-toolbar-icon.hbs

@@ -0,0 +1,3 @@
+{{#if tooltip}}
+	{{#attach-tooltip showDelay=1000}}{{tooltip}}{{/attach-tooltip}}
+{{/if}}

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

@@ -0,0 +1,3 @@
+{{#if tooltip}}
+	{{#attach-tooltip showDelay=1000}}{{tooltip}}{{/attach-tooltip}}
+{{/if}}

gui/app/templates/components/user-notification.hbs

@@ -1,5 +0,0 @@
-<div class="user-notification">
-    {{#each notifications as |msg|}}
-        <p class="message">{{msg}}</p>
-    {{/each}}
-</div>

jsconfig.json

@@ -1,13 +1 @@
-{
+{"compilerOptions":{"target":"es6","experimentalDecorators":true},"exclude":["node_modules","bower_components","tmp","vendor",".git","dist"],"typeAcquisition":{"include":["underscore"]}}
-	"compilerOptions": {
-		"target": "es6",
-		"experimentalDecorators": true,
-		"allowSyntheticDefaultImports": true
-	},
-	"exclude": ["node_modules", "bower_components", "tmp", "vendor", ".git", "dist", "dist-prod", "gui/node_modules", "gui/dist", "gui/dist-prod", "gui/tmp"],
-	"typeAcquisition": {
-		"include": [
-			"underscore"
-		]
-	}
-}