From 0de7efdf20122903f2cf922c9d4c84bb080a1a51 Mon Sep 17 00:00:00 2001
From: Harvey Kandola <harvey@documize.com>
Date: Thu, 6 Dec 2018 20:13:03 +0000
Subject: [PATCH] Introduce new button and toolbar styles

---
 gui/app/pods/auth/forgot/template.hbs  |   2 +-
 gui/app/pods/auth/login/template.hbs   |   2 +-
 gui/app/pods/auth/reset/template.hbs   |   2 +-
 gui/app/pods/folders/template.hbs      |  28 ++---
 gui/app/pods/theming/template.hbs      |  88 +++++++++++++++-
 gui/app/styles/core/ui/all.scss        |  10 ++
 gui/app/styles/core/ui/ui-button.scss  | 140 +++++++++++++++++++++++++
 gui/app/styles/core/ui/ui-popup.scss   |  84 +++++++++++++++
 gui/app/styles/core/ui/ui-toolbar.scss |  88 ++++++++++++++++
 gui/app/styles/core/ui/ui-tooltip.scss |  83 ---------------
 gui/app/styles/core/view/auth.scss     |   2 +-
 11 files changed, 420 insertions(+), 109 deletions(-)
 create mode 100644 gui/app/styles/core/ui/ui-button.scss
 create mode 100644 gui/app/styles/core/ui/ui-popup.scss
 create mode 100644 gui/app/styles/core/ui/ui-toolbar.scss

diff --git a/gui/app/pods/auth/forgot/template.hbs b/gui/app/pods/auth/forgot/template.hbs
index 08f0c9fe..2fbd196b 100644
--- a/gui/app/pods/auth/forgot/template.hbs
+++ b/gui/app/pods/auth/forgot/template.hbs
@@ -2,7 +2,7 @@
 	<div class="auth-box">
 		<div class="logo">
 			<img src="/assets/img/logo-purple.png" title="Documize" alt="Documize" class="img-fluid" />
-			<div class="url">Authenticate with {{appMeta.appHost}}</div>
+			<div class="url">{{appMeta.appHost}}</div>
 		</div>
 		<div class="login-form">
 			{{forgot-password forgot=(action 'forgot')}}
diff --git a/gui/app/pods/auth/login/template.hbs b/gui/app/pods/auth/login/template.hbs
index 674ccb3f..035a5534 100644
--- a/gui/app/pods/auth/login/template.hbs
+++ b/gui/app/pods/auth/login/template.hbs
@@ -3,7 +3,7 @@
 		<div class="auth-box">
 			<div class="logo">
 				<img src="/assets/img/logo-purple.png" title="Documize" alt="Documize" class="img-fluid" />
-				<div class="url">Authenticate with {{appMeta.appHost}}</div>
+				<div class="url">{{appMeta.appHost}}</div>
 			</div>
 			<form {{action 'login' on="submit"}}>
 				<div class="form-group">
diff --git a/gui/app/pods/auth/reset/template.hbs b/gui/app/pods/auth/reset/template.hbs
index aa3c63c7..4a9a3869 100644
--- a/gui/app/pods/auth/reset/template.hbs
+++ b/gui/app/pods/auth/reset/template.hbs
@@ -2,7 +2,7 @@
 	<div class="auth-box">
 		<div class="logo">
 			<img src="/assets/img/logo-purple.png" title="Documize" alt="Documize" class="img-fluid" />
-			<div class="url">Authenticate with {{appMeta.appHost}}</div>
+			<div class="url">{{appMeta.appHost}}</div>
 		</div>
 		{{password-reset reset=(action 'reset')}}
 	</div>
diff --git a/gui/app/pods/folders/template.hbs b/gui/app/pods/folders/template.hbs
index f997a131..2b063aa3 100644
--- a/gui/app/pods/folders/template.hbs
+++ b/gui/app/pods/folders/template.hbs
@@ -1,20 +1,14 @@
-{{#layout/top-bar selectItem="spaces"}}
-{{/layout/top-bar}}
+{{#layout/master-sidebar selectedItem="spaces"}}
+{{/layout/master-sidebar}}
 
-{{#layout/middle-zone}}
-	{{#layout/middle-zone-content}}
-		{{spaces/space-list spaces=model}}
-	{{/layout/middle-zone-content}}
+{{#layout/master-content}}
 
-	{{#layout/middle-zone-sidebar}}
-		<div id="sidebar" class="sidebar">
-			<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}}
-		</div>
-	{{/layout/middle-zone-sidebar}}
+	<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">
 		<div class="modal-dialog" role="document">
@@ -47,7 +41,5 @@
 			</div>
 		</div>
 	</div>
-{{/layout/middle-zone}}
 
-{{#layout/bottom-bar}}
-{{/layout/bottom-bar}}
\ No newline at end of file
+{{/layout/master-content}}
diff --git a/gui/app/pods/theming/template.hbs b/gui/app/pods/theming/template.hbs
index f6b9d8ac..affe4dbb 100644
--- a/gui/app/pods/theming/template.hbs
+++ b/gui/app/pods/theming/template.hbs
@@ -6,10 +6,90 @@
 	<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>
+	<button class="dmz-button-green" {{action 'onSuccess'}}>save</button>
+	<div class="dmz-button-gap-right" />
+	<button class="dmz-button-yellow" {{action 'onInfo'}}>update</button>
+	<div class="dmz-button-gap-right" />
+	<button class="dmz-button-gray" {{action 'onWarn'}}>cancel</button>
+	<div class="dmz-button-gap-right" />
+	<button class="dmz-button-red" {{action 'onError'}}>delete</button>
+	<div class="dmz-button-gap-right" />
+	<br/>
+	<br/>
+	<button class="dmz-button-green-light">Save</button>
+	<div class="dmz-button-gap-right" />
+	<button class="dmz-button-yellow-light">Update</button>
+	<div class="dmz-button-gap-right" />
+	<button class="dmz-button-gray-light">cancel</button>
+	<div class="dmz-button-gap-right" />
+	<button class="dmz-button-red-light">Delete</button>
+	<div class="dmz-button-gap-right" />
+	<br/>
+	<br/>
+	<button class="dmz-button-green-light"><i class="dicon dicon-e-add"/>space</button>
+	<div class="dmz-button-gap-right" />
+	<button class="dmz-button-green-light"><i class="dicon dicon-e-add"/>content</button>
+	<div class="dmz-button-gap-right" />
+	<button class="dmz-button-yellow-light"><i class="dicon dicon-e-add"/>user</button>
+	<div class="dmz-button-gap-right" />
+	<button class="dmz-button-gray-light"><i class="dicon dicon-e-add"/>group</button>
+	<div class="dmz-button-gap-right" />
+	<br/>
+	<br/>
+	<div class="dmz-toolbar-dark-small">
+		<i class="dicon dicon-bin red"/>
+		<i class="dicon dicon-print yellow"/>
+		<i class="dicon dicon-settings-gear"/>
+		<i class="dicon dicon-print green"/>
+		<i class="dicon dicon-single-01"/>
+	</div>
+	<br/>
+	<br/>
+	<div class="dmz-toolbar-dark-large">
+		<i class="dicon dicon-bin red"/>
+		<i class="dicon dicon-print yellow"/>
+		<i class="dicon dicon-settings-gear"/>
+		<i class="dicon dicon-print green"/>
+		<i class="dicon dicon-single-01"/>
+	</div>
+	<br/>
+	<br/>
+	<div class="dmz-toolbar-small">
+		<i class="dicon dicon-bin red"/>
+		<i class="dicon dicon-print yellow"/>
+		<i class="dicon dicon-settings-gear"/>
+		<i class="dicon dicon-print green"/>
+		<i class="dicon dicon-single-01"/>
+	</div>
+	<br/>
+	<br/>
+	<div class="dmz-toolbar-large">
+		<i class="dicon dicon-bin red"/>
+		<i class="dicon dicon-print yellow"/>
+		<i class="dicon dicon-settings-gear"/>
+		<i class="dicon dicon-print green"/>
+		<i class="dicon dicon-single-01"/>
+	</div>
+	<br/>
+	<br/>
+	<div class="dmz-toolbar-raised-small">
+		<i class="dicon dicon-bin red"/>
+		<i class="dicon dicon-print yellow"/>
+		<i class="dicon dicon-settings-gear"/>
+		<i class="dicon dicon-print green"/>
+		<i class="dicon dicon-single-01"/>
+	</div>
+	<br/>
+	<br/>
+	<div class="dmz-toolbar-raised-large">
+		<i class="dicon dicon-bin red"/>
+		<i class="dicon dicon-print yellow"/>
+		<i class="dicon dicon-settings-gear"/>
+		<i class="dicon dicon-print green"/>
+		<i class="dicon dicon-single-01"/>
+	</div>
+	<br/>
+	<br/>
 	<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>
diff --git a/gui/app/styles/core/ui/all.scss b/gui/app/styles/core/ui/all.scss
index 46602392..a6871730 100644
--- a/gui/app/styles/core/ui/all.scss
+++ b/gui/app/styles/core/ui/all.scss
@@ -1 +1,11 @@
+@mixin button-shadow-light() {
+	box-shadow: 1px 1px 3px 0px map-get($gray-shades, 400);
+}
+@mixin button-shadow() {
+	box-shadow: 1px 1px 3px 0px map-get($gray-shades, 600);
+}
+
 @import "ui-tooltip";
+@import "ui-popup";
+@import "ui-button";
+@import "ui-toolbar";
diff --git a/gui/app/styles/core/ui/ui-button.scss b/gui/app/styles/core/ui/ui-button.scss
new file mode 100644
index 00000000..0f555d6d
--- /dev/null
+++ b/gui/app/styles/core/ui/ui-button.scss
@@ -0,0 +1,140 @@
+%dmz-button {
+	display: inline-block;
+    white-space: nowrap;
+    vertical-align: middle;
+    text-align: center;
+    padding: 0.375rem 0.75rem;
+    font-weight: 500;
+    font-size: 1rem;
+    line-height: 1.5;
+    border: 1px solid transparent;
+	@extend .no-select;
+	@include button-shadow();
+	@include border-radius(2px);
+	text-transform: uppercase;
+
+	> .dicon {
+		font-size: 0.7rem;
+		padding: 0 5px 0 0;
+		font-weight: 700;
+	}
+}
+
+// Button spacer utilities
+.dmz-button-gap-right {
+	margin: 0 5px 0 0;
+	display: inline-block;
+}
+.dmz-button-gap-left {
+	margin: 0 0 0 5px;
+	display: inline-block;
+}
+.dmz-button-gap-x {
+	margin: 0 5px;
+	display: inline-block;
+}
+.dmz-button-gap-top {
+	margin: 5px 0 0 0;
+	display: inline-block;
+}
+.dmz-button-gap-bottom {
+	margin: 0 0 5px 0;
+	display: inline-block;
+}
+.dmz-button-gap-y {
+	margin: 5px 0;
+	display: inline-block;
+}
+.dmz-button-gap-x-y {
+	margin: 5px;
+	display: inline-block;
+}
+
+// Colored buttons
+.dmz-button-green {
+	@extend %dmz-button;
+	background-color: map-get($green-shades, 600);
+	color: $color-white;
+	@include button-shadow();
+
+	&:hover {
+		background-color: map-get($green-shades, 700);
+	}
+}
+.dmz-button-green-light {
+	@extend %dmz-button;
+	background-color: map-get($green-shades, 200);
+	color: map-get($green-shades, 700);
+	border: 1px solid map-get($green-shades, 300);
+	@include button-shadow-light();
+
+	&:hover {
+		background-color: map-get($green-shades, 300);
+	}
+}
+
+.dmz-button-yellow {
+	@extend %dmz-button;
+	background-color: map-get($yellow-shades, 600);
+	color: $color-white;
+	@include button-shadow();
+
+	&:hover {
+		background-color: map-get($yellow-shades, 700);
+	}
+}
+.dmz-button-yellow-light {
+	@extend %dmz-button;
+	background-color: map-get($yellow-shades, 200);
+	color: map-get($yellow-shades, 700);
+	border: 1px solid map-get($yellow-shades, 300);
+	@include button-shadow-light();
+
+	&:hover {
+		background-color: map-get($yellow-shades, 300);
+	}
+}
+
+.dmz-button-red {
+	@extend %dmz-button;
+	background-color: map-get($red-shades, 600);
+	color: $color-white;
+	@include button-shadow();
+
+	&:hover {
+		background-color: map-get($red-shades, 700);
+	}
+}
+.dmz-button-red-light {
+	@extend %dmz-button;
+	background-color: map-get($red-shades, 100);
+	color: map-get($red-shades, 700);
+	border: 1px solid map-get($red-shades, 200);
+	@include button-shadow-light();
+
+	&:hover {
+		background-color: map-get($red-shades, 300);
+	}
+}
+
+.dmz-button-gray {
+	@extend %dmz-button;
+	background-color: map-get($gray-shades, 600);
+	color: $color-white;
+	@include button-shadow();
+
+	&:hover {
+		background-color: map-get($gray-shades, 700);
+	}
+}
+.dmz-button-gray-light {
+	@extend %dmz-button;
+	background-color: map-get($gray-shades, 200);
+	color: map-get($gray-shades, 700);
+	border: 1px solid map-get($gray-shades, 300);
+	@include button-shadow-light();
+
+	&:hover {
+		background-color: map-get($gray-shades, 300);
+	}
+}
diff --git a/gui/app/styles/core/ui/ui-popup.scss b/gui/app/styles/core/ui/ui-popup.scss
new file mode 100644
index 00000000..61b771bc
--- /dev/null
+++ b/gui/app/styles/core/ui/ui-popup.scss
@@ -0,0 +1,84 @@
+// https://github.com/kybishop/ember-attacher
+
+.ember-attacher-popper {
+	background-color: $color-white;
+	font-size: 1rem;
+	box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+	@include border-radius(3px);
+
+	> p {
+		margin: 4px;
+		padding: 0;
+	}
+
+	> .menu {
+		margin: 0;
+		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;
+		}
+	}
+}
diff --git a/gui/app/styles/core/ui/ui-toolbar.scss b/gui/app/styles/core/ui/ui-toolbar.scss
new file mode 100644
index 00000000..7382b8b4
--- /dev/null
+++ b/gui/app/styles/core/ui/ui-toolbar.scss
@@ -0,0 +1,88 @@
+%dmz-toolbar {
+	display: inline-block;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    border: 1px solid transparent;
+	height: 30px;
+	padding: 5px 10px;
+	line-height: 24px;
+	@extend .no-select;
+	@include border-radius(6px);
+
+	> .dicon {
+		font-size: 16px;
+		font-weight: 500;
+		color: map-get($gray-shades, 600);
+		padding: 0 0.25rem;
+		cursor: pointer;
+
+		&:hover {
+			color: map-get($gray-shades, 700);
+		}
+	}
+
+	> .red {
+		color: map-get($red-shades, 500);
+
+		&:hover {
+			color: map-get($red-shades, 600);
+		}
+	}
+
+	> .yellow {
+		color: map-get($yellow-shades, 600);
+
+		&:hover {
+			color: map-get($yellow-shades, 700);
+		}
+	}
+
+	> .green {
+		color: map-get($green-shades, 500);
+
+		&:hover {
+			color: map-get($green-shades, 600);
+		}
+	}
+}
+
+.dmz-toolbar-dark-small {
+	@extend %dmz-toolbar;
+	background-color: map-get($gray-shades, 200);
+}
+
+.dmz-toolbar-dark-large {
+	@extend %dmz-toolbar;
+	background-color: map-get($gray-shades, 200);
+	height: 36px;
+	padding: 5px 10px;
+	line-height: 33px;
+
+	> .dicon {
+		font-size: 20px;
+		font-weight: 500;
+	}
+}
+
+.dmz-toolbar-small {
+	@extend %dmz-toolbar;
+	background-color: transparent;
+}
+
+.dmz-toolbar-large {
+	@extend .dmz-toolbar-dark-large;
+	background-color: transparent;
+}
+
+.dmz-toolbar-raised-small {
+	@extend %dmz-toolbar;
+	background-color: map-get($gray-shades, 100);
+	@include button-shadow-light();
+}
+
+.dmz-toolbar-raised-large {
+	@extend .dmz-toolbar-dark-large;
+	background-color: map-get($gray-shades, 100);
+	@include button-shadow-light();
+}
diff --git a/gui/app/styles/core/ui/ui-tooltip.scss b/gui/app/styles/core/ui/ui-tooltip.scss
index 00afe4f2..decb6677 100644
--- a/gui/app/styles/core/ui/ui-tooltip.scss
+++ b/gui/app/styles/core/ui/ui-tooltip.scss
@@ -4,86 +4,3 @@
 	font-size: 0.9rem;
 	padding: 0.5rem 0.75rem;
 }
-
-.ember-attacher-popper {
-	background-color: $color-white;
-	font-size: 1rem;
-	box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
-	@include border-radius(3px);
-
-	> p {
-		margin: 4px;
-		padding: 0;
-	}
-
-	> .menu {
-		margin: 0;
-		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;
-		}
-	}
-}
diff --git a/gui/app/styles/core/view/auth.scss b/gui/app/styles/core/view/auth.scss
index ecdc2edf..95b904ad 100644
--- a/gui/app/styles/core/view/auth.scss
+++ b/gui/app/styles/core/view/auth.scss
@@ -28,7 +28,7 @@
 
 		> .url {
 			margin: 20px 0;
-			color: map-get($gray-shades, 600);
+			color: map-get($gray-shades, 700);
 			font-weight: 0.9rem;
 		}
 	}