Componentize new UI buttons and toolbar

gui/app/components/ui/ui-toolbar.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({
+	classNames: ['dmz-toolbar', 'non-printable'],
+	classNameBindings:
+		['raised:dmz-toolbar-raised',
+		'large:dmz-toolbar-large',
+		'bordered:dmz-toolbar-bordered',
+		'light:dmz-toolbar-light',
+		'dark:dmz-toolbar-dark'],
+	raised: false,
+	large: false,
+	bordered: false,
+	dark: false,
+	light: false,
+
+	actions: {
+	}
+});

gui/app/pods/theming/template.hbs

@@ -6,6 +6,11 @@
 	<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 class="dmz-button-theme">save</button>
+	<div class="dmz-button-gap-right" />
+	<button class="dmz-button-theme-light">update</button>
+	<br/>
+	<br/>
 	<button class="dmz-button-green" {{action 'onSuccess'}}>save</button>
 	<div class="dmz-button-gap-right" />
 	<button class="dmz-button-yellow" {{action 'onInfo'}}>update</button>
@@ -16,78 +21,80 @@
 	<div class="dmz-button-gap-right" />
 	<br/>
 	<br/>
-	<button class="dmz-button-green-light">Save</button>
+	<button class="dmz-button-green-light"><div class='label'>Save</div></button>
 	<div class="dmz-button-gap-right" />
-	<button class="dmz-button-yellow-light">Update</button>
+	<button class="dmz-button-yellow-light"><div class='label'>Update</div></button>
 	<div class="dmz-button-gap-right" />
-	<button class="dmz-button-gray-light">cancel</button>
+	<button class="dmz-button-gray-light"><div class='label'>cancel</div></button>
 	<div class="dmz-button-gap-right" />
-	<button class="dmz-button-red-light">Delete</button>
+	<button class="dmz-button-red-light"><div class='label'>Delete</div></button>
 	<div class="dmz-button-gap-right" />
 	<br/>
 	<br/>
-	<button class="dmz-button-green-light"><i class="dicon dicon-e-add"/>space</button>
+	<button class="dmz-button-green-light"><i class="dicon dicon-e-add"/><div class='label'>space</div></button>
 	<div class="dmz-button-gap-right" />
-	<button class="dmz-button-green-light"><i class="dicon dicon-e-add"/>content</button>
+	<button class="dmz-button-green-light"><i class="dicon dicon-e-add"/><div class='label'>content</div></button>
 	<div class="dmz-button-gap-right" />
-	<button class="dmz-button-yellow-light"><i class="dicon dicon-e-add"/>user</button>
+	<button class="dmz-button-yellow-light"><i class="dicon dicon-e-add"/><div class='label'>user</div></button>
 	<div class="dmz-button-gap-right" />
-	<button class="dmz-button-gray-light"><i class="dicon dicon-e-add"/>group</button>
+	<button class="dmz-button-gray-light"><i class="dicon dicon-e-add"/><div class='label'>group</div></button>
+	<div class="dmz-button-gap-right" />
+	<button class="dmz-button-red-light"><i class="dicon dicon-bin"/><div class='label'>delete</div></button>
 	<div class="dmz-button-gap-right" />
 	<br/>
 	<br/>
-	<div class="dmz-toolbar-dark-small">
+	{{#ui/ui-toolbar dark=false light=false raised=false large=false bordered=false}}
 		<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>
+	{{/ui/ui-toolbar}}
 	<br/>
 	<br/>
-	<div class="dmz-toolbar-dark-large">
+	{{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true}}
 		<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>
+	{{/ui/ui-toolbar}}
 	<br/>
 	<br/>
-	<div class="dmz-toolbar-small">
+	{{#ui/ui-toolbar dark=true light=false raised=true large=false bordered=true}}
 		<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>
+	{{/ui/ui-toolbar}}
 	<br/>
 	<br/>
-	<div class="dmz-toolbar-large">
+	{{#ui/ui-toolbar dark=false light=false raised=false large=true bordered=false}}
 		<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>
+	{{/ui/ui-toolbar}}
 	<br/>
 	<br/>
-	<div class="dmz-toolbar-raised-small">
+	{{#ui/ui-toolbar dark=false light=true raised=true large=true bordered=true}}
 		<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>
+	{{/ui/ui-toolbar}}
 	<br/>
 	<br/>
-	<div class="dmz-toolbar-raised-large">
+	{{#ui/ui-toolbar dark=true light=false raised=true large=true bordered=true}}
 		<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>
+	{{/ui/ui-toolbar}}
 	<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>

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

@@ -1,10 +1,3 @@
-@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";

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

@@ -1,3 +1,10 @@
+@mixin button-shadow-light() {
+	box-shadow: 1px 1px 3px 0px map-get($gray-shades, 300);
+}
+@mixin button-shadow() {
+	box-shadow: 1px 1px 3px 0px map-get($gray-shades, 500);
+}
+
 %dmz-button {
 	display: inline-block;
     white-space: nowrap;
@@ -8,15 +15,23 @@
     font-size: 1rem;
     line-height: 1.5;
     border: 1px solid transparent;
+	text-transform: uppercase;
+	cursor: pointer;
 	@extend .no-select;
 	@include button-shadow();
 	@include border-radius(2px);
-	text-transform: uppercase;
 
 	> .dicon {
-		font-size: 0.7rem;
+		font-size: 1rem;
-		padding: 0 5px 0 0;
+		padding: 0.2rem 0.4rem 0 0;
-		font-weight: 700;
+		font-weight: 500;
+	}
+
+	> .label {
+		display: inline-block;
+		margin: 0;
+		padding: 0;
+		vertical-align: top;
 	}
 }
 
@@ -113,7 +128,7 @@
 	@include button-shadow-light();
 
 	&:hover {
-		background-color: map-get($red-shades, 300);
+		background-color: map-get($red-shades, 200);
 	}
 }
 
@@ -138,3 +153,25 @@
 		background-color: map-get($gray-shades, 300);
 	}
 }
+
+.dmz-button-theme {
+	@extend %dmz-button;
+	background-color: $theme-800;
+	color: $color-white;
+	@include button-shadow();
+
+	&:hover {
+		background-color: $theme-600;
+	}
+}
+.dmz-button-theme-light {
+	@extend %dmz-button;
+	background-color: $theme-100;
+	color: $theme-800;
+	border: 1px solid $theme-200;
+	@include button-shadow-light();
+
+	&:hover {
+		background-color: $theme-200;
+	}
+}

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

@@ -1,4 +1,8 @@
-%dmz-toolbar {
+%toolbar-shadow {
+	box-shadow: 1px 1px 3px 0px map-get($gray-shades, 200);
+}
+
+.dmz-toolbar {
 	display: inline-block;
     text-align: center;
     white-space: nowrap;
@@ -47,42 +51,80 @@
 	}
 }
 
-.dmz-toolbar-dark-small {
+.dmz-toolbar-large {
-	@extend %dmz-toolbar;
+	height: 40px;
-	background-color: map-get($gray-shades, 200);
+	padding: 7px 10px;
-}
-
-.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;
+		padding: 0 0.5rem;
 	}
 }
 
-.dmz-toolbar-small {
+.dmz-toolbar-dark {
-	@extend %dmz-toolbar;
+	background-color: map-get($gray-shades, 200);
-	background-color: transparent;
 }
 
-.dmz-toolbar-large {
+.dmz-toolbar-light {
-	@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 {
+.dmz-toolbar-raised {
-	@extend .dmz-toolbar-dark-large;
+	@extend %toolbar-shadow;
-	background-color: map-get($gray-shades, 100);
-	@include button-shadow-light();
 }
+
+.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/templates/components/ui/ui-toolbar.hbs

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