New toolbar styling and layout controls

Built to work with forthcoming feature set that requires display of more options.

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

@@ -0,0 +1,84 @@
+// 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 { computed } from '@ember/object';
+import Component from '@ember/component';
+
+export default Component.extend({
+	tagName: 'button',
+	classNames: [],
+	classNameBindings: ['calcClass'],
+	attributeBindings: ['calcAttrs:data-dismiss', 'submitAttrs:type'],
+	label: '',
+	icon: '',
+	color: '',
+	light: false,
+	themed: false,
+	dismiss: false,
+	truncate: false,
+	stretch: false,
+	uppercase: true,
+	iconClass: '',
+	hasIcon: computed('iconClass', function() {
+		return this.iconClass.trim() != '';
+	}),
+
+	calcClass: computed(function() {
+		// Prepare icon class name
+		this.iconClass = this.icon;
+
+		// Prepare button class name
+		let bc = 'button';
+
+		if (this.themed) {
+			bc += 'theme';
+		} else {
+			bc += '-' + this.color;
+		}
+
+		if (this.light) {
+			bc += '-light';
+		}
+
+		if (!this.uppercase) {
+			bc += ' text-case-normal';
+		}
+
+		if (this.truncate) {
+			bc += ' text-truncate';
+		}
+
+		if (this.stretch) {
+			bc += ' max-width-100 text-left';
+		}
+
+		return bc;
+	}),
+
+	calcAttrs: computed(function() {
+		if (this.dismiss) {
+			return 'modal';
+		}
+
+		return null;
+	}),
+
+	submitAttrs: computed(function() {
+		return this.submit ? "submit": null;
+	}),
+
+	click(e) {
+		if (!_.isUndefined(this.onClick)) {
+			e.preventDefault();
+			this.onClick(e);
+		}
+	}
+});

gui/app/components/ui/ui-toolbar-divider.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: ['divider'],
+});

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

@@ -0,0 +1,55 @@
+// 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 { computed } from '@ember/object';
+import Component from '@ember/component';
+
+export default Component.extend({
+	classNames: [],
+	classNameBindings: ['calcClass'],
+	label: '',
+	color: '',
+	arrow: true,
+	iconClass: '',
+
+	calcClass: computed(function() {
+		// Prepare icon class name
+		this.iconClass = this.get('constants').Icon.TriangleSmallDown;
+
+		// Prepare button class name
+		let bc = 'dropdown';
+
+		if (!this.themed) {
+			bc += ' dropdown-' + this.color;
+		}
+
+		return bc;
+	}),
+
+	calcAttrs: computed(function() {
+		if (this.dismiss) {
+			return 'modal';
+		}
+
+		return null;
+	}),
+
+	submitAttrs: computed(function() {
+		return this.submit ? "submit": null;
+	}),
+
+	click(e) {
+		if (!_.isUndefined(this.onClick)) {
+			e.preventDefault();
+			this.onClick(e);
+		}
+	}
+});

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

@@ -15,12 +15,10 @@ 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,

gui/app/pods/document/index/template.hbs

@@ -1,8 +1,8 @@
 <Layout::MasterNavigation />
 <Layout::MasterToolbar>
 	<div class="zone-1">
-		{{#link-to "folder.index" folder.id folder.slug class="no-print"}}
-			{{ui/ui-button color=constants.Color.Gray outline=true uppercase=false icon=constants.Icon.ArrowLeft label=folder.name}}
+		{{#link-to "folder.index" folder.id folder.slug}}
+			{{ui/ui-button themed=true uppercase=false icon=constants.Icon.ArrowLeft label=folder.name}}
 		{{/link-to}}
 	</div>
 	<div class="zone-2" />

gui/app/pods/document/revisions/template.hbs

@@ -2,7 +2,7 @@
 <Layout::MasterToolbar>
 	<div class="zone-1">
 		{{#link-to "document.index"}}
-			{{ui/ui-button color=constants.Color.Gray outline=true uppercase=false icon=constants.Icon.ArrowLeft label=document.name}}
+			{{ui/ui-button themed=true uppercase=false icon=constants.Icon.ArrowLeft label=document.name}}
 		{{/link-to}}
 	</div>
 	<div class="zone-2" />

gui/app/pods/document/section/template.hbs

@@ -2,7 +2,7 @@
 <Layout::MasterToolbar>
 	<div class="zone-1">
 		{{#link-to "document.index" model.folder.id model.folder.slug model.document.id model.document.slug}}
-			{{ui/ui-button color=constants.Color.Gray outline=true uppercase=false icon=constants.Icon.ArrowLeft label=model.document.name}}
+			{{ui/ui-button themed=true uppercase=false icon=constants.Icon.ArrowLeft label=model.document.name}}
 		{{/link-to}}
 	</div>
 	<div class="zone-2" />

gui/app/pods/document/settings/template.hbs

@@ -2,7 +2,7 @@
 <Layout::MasterToolbar>
 	<div class="zone-1">
 		{{#link-to "document.index"}}
-			{{ui/ui-button color=constants.Color.Gray outline=true uppercase=false icon=constants.Icon.ArrowLeft label=model.document.name}}
+			{{ui/ui-button themed=true uppercase=false icon=constants.Icon.ArrowLeft label=model.document.name}}
 		{{/link-to}}
 	</div>
 	<div class="zone-2" />

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

@@ -2,4 +2,5 @@
 @import "spacing.scss";
 @import "headings.scss";
 @import "layout.scss";
+@import "toolbar.scss";
 @import "sidebar.scss";

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

@@ -1,130 +1,3 @@
-// *****************************************************************
-// Define mobile-first layout for top navigation bar and toolbar.
-// *****************************************************************
-.master-navigation {
-	display: block;
-	height: auto;
-	width: 100%;
-
-	> .navbar {
-		display: block;
-		height: 40px;
-		width: 100%;
-		background-color: $theme-500;
-		text-align: center;
-		padding: 0;
-		z-index: 999;
-
-		> .container {
-			display: flex;
-			flex-grow: 1;
-			flex-direction: row;
-			align-items: center;
-			justify-content: space-between;
-			flex-wrap: wrap;
-			width: 100%;
-			padding: 0 20px;
-
-			> .options {
-				> .selected {
-					> .dicon {
-						color: $color-white !important;
-					}
-				}
-
-				> .option {
-					cursor: pointer;
-					display: inline-block;
-
-					> .dicon {
-						display: inline-block;
-						color: $theme-300;
-						font-size: 20px;
-						padding: 10px 10px;
-					}
-
-					&:hover {
-						> .dicon {
-							color: $theme-400 !important;
-						}
-					}
-				}
-
-				> a.option {
-					color: $theme-300;
-
-					&:hover {
-						color: $color-white;
-					}
-				}
-
-				> .invalid-plan {
-					> .dicon {
-						color: map-get($yellow-shades, 600) !important;
-					}
-				}
-
-				> .user-gravatar-container {
-					display: inline-block;
-					margin: 0;
-					padding: 7px 10px;
-					vertical-align: top;
-
-					> .user-gravatar {
-						display: inline-block;
-						cursor: pointer;
-						position: relative;
-						width: 26px;
-						height: 26px;
-						line-height: 26px;
-						padding: 0;
-						border-radius: 50%;
-						font-size: 0.85rem;
-						text-align: center;
-						color: $theme-500;
-						font-weight: bold;
-						background-color: $color-white;
-						@extend .no-select;
-					}
-				}
-			}
-		}
-	}
-
-	> .toolbar {
-		display: block;
-		height: auto;
-		height: 50px;
-		width: 100%;
-		background-color: $color-sidebar;
-		background-color: $theme-100;
-		text-align: center;
-		padding: 0;
-		z-index: 999;
-
-		> .container {
-			display: flex;
-			flex-grow: 1;
-			flex-direction: row;
-			align-items: center;
-			justify-content: space-between;
-			flex-wrap: wrap;
-			width: 100%;
-			padding: 0 10px;
-
-			> div[class^="zone-"], div[class*=" zone-"] {
-				margin: 0;
-				padding: 10px 10px;
-				justify-content: center;
-
-				> .label {
-					font-size: 1rem;
-				}
-			}
-		}
-	}
-}
-
 // *****************************************************************
 // Define mobile-first layout for main content zone with a sidebar.
 // *****************************************************************

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

@@ -0,0 +1,124 @@
+// *****************************************************************
+// Define mobile-first layout for top navigation bar and toolbar.
+// *****************************************************************
+.master-navigation {
+	display: block;
+	height: auto;
+	width: 100%;
+
+	> .navbar {
+		display: block;
+		height: 40px;
+		width: 100%;
+		background-color: $theme-500;
+		text-align: center;
+		padding: 0;
+		z-index: 999;
+
+		> .container {
+			display: flex;
+			flex-grow: 1;
+			flex-direction: row;
+			align-items: center;
+			justify-content: space-between;
+			flex-wrap: wrap;
+			width: 100%;
+			padding: 0 20px;
+
+			> .options {
+				> .selected {
+					> .dicon {
+						color: $color-white !important;
+					}
+				}
+
+				> .option {
+					cursor: pointer;
+					display: inline-block;
+
+					> .dicon {
+						display: inline-block;
+						color: $theme-300;
+						font-size: 20px;
+						padding: 10px 10px;
+					}
+
+					&:hover {
+						> .dicon {
+							color: $theme-400 !important;
+						}
+					}
+				}
+
+				> a.option {
+					color: $theme-300;
+
+					&:hover {
+						color: $color-white;
+					}
+				}
+
+				> .invalid-plan {
+					> .dicon {
+						color: map-get($yellow-shades, 600) !important;
+					}
+				}
+
+				> .user-gravatar-container {
+					display: inline-block;
+					margin: 0;
+					padding: 7px 10px;
+					vertical-align: top;
+
+					> .user-gravatar {
+						display: inline-block;
+						cursor: pointer;
+						position: relative;
+						width: 26px;
+						height: 26px;
+						line-height: 26px;
+						padding: 0;
+						border-radius: 50%;
+						font-size: 0.85rem;
+						text-align: center;
+						color: $theme-500;
+						font-weight: bold;
+						background-color: $color-white;
+						@extend .no-select;
+					}
+				}
+			}
+		}
+	}
+
+	> .toolbar {
+		display: block;
+		width: 100%;
+		background-color: $color-sidebar;
+		background-color: $theme-100;
+		padding: 0;
+		// z-index: 999;
+
+		> .container {
+			height: 50px;
+			width: 100%;
+			display: flex;
+			flex-grow: 1;
+			flex-direction: row;
+			flex-wrap: wrap;
+			align-items: center;
+			justify-content: space-between;
+			padding: 0 15px;
+
+			> div[class^="zone-"], > div[class*=" zone-"] {
+				margin: 0;
+				// padding: 10px 10px;
+				align-items: center;
+
+				> .label {
+					font-size: 1rem;
+				}
+			}
+		}
+	}
+}

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

@@ -179,12 +179,12 @@
 
 .dmz-button-theme {
 	@extend %dmz-button;
-	background-color: $theme-800;
+	background-color: $theme-500;
 	color: $color-white;
 	@include button-shadow();
 
 	&:hover {
-		background-color: $theme-600;
+		background-color: $theme-700;
 	}
 }
 .dmz-button-theme-light {

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

@@ -40,16 +40,16 @@
 		}
 
 		> .header {
-			color: map-get($gray-shades, 800);
-			background-color: map-get($gray-shades, 300);
+			color: $color-white;
+			background-color: $theme-500;
 			font-size: 1rem;
 			font-weight: 600;
 			cursor: auto;
 
 			&:hover {
-				color: map-get($gray-shades, 800);
-				background-color: map-get($gray-shades, 300);
-			}
+				color: $color-white;
+				background-color: $theme-500;
+				}
 		}
 
 		> .divider {

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

@@ -1,5 +1,6 @@
 %toolbar-shadow {
 	box-shadow: 1px 1px 3px 0px map-get($gray-shades, 200);
+	box-shadow: none;
 }
 
 .dmz-toolbar {
@@ -7,27 +8,29 @@
 	flex-basis: auto;
     text-align: center;
     white-space: nowrap;
-    vertical-align: middle;
     border: 1px solid transparent;
-	height: 30px;
 	width: auto;
 	padding: 6px 10px;
-	line-height: 24px;
 	@extend .no-select;
-	@include border-radius(6px);
+	@include border-radius(4px);
 
 	> .dicon {
-		font-size: 16px;
-		font-weight: 500;
-		color: map-get($gray-shades, 600);
+		font-size: 20px;
+		color: $theme-500;
 		padding: 0 0.5rem;
 		cursor: pointer;
 
 		&:hover {
-			color: map-get($gray-shades, 700);
+			color: $theme-400;
 		}
 	}
 
+	> .divider {
+		margin: 0 6px;
+		width: 1px;
+		background-color: $theme-200;
+	}
+
 	> .icon-selected {
 		color: map-get($yellow-shades, 600);
 	}
@@ -68,17 +71,137 @@
 			color: map-get($green-shades, 600);
 		}
 	}
-}
 
-.dmz-toolbar-large {
-	height: 40px;
-	padding: 9px 10px;
-	line-height: 33px;
+	> .dropdown {
+		display: inline-block;
+		cursor: pointer;
 
-	> .dicon {
-		font-size: 20px;
+		&:hover {
+			> .label, > .dicon {
+				color: $theme-400;
+			}
+		}
+
+		> .label {
+			display: inline-block;
+			font-size: 1rem;
+			font-weight: 500;
+			color: $theme-500;
+			padding: 0 0 0 0.5rem;
+			vertical-align: text-bottom;
+		}
+
+		> .dicon {
+			font-size: 20px;
+			color: $theme-500;
+			padding: 0 0.3rem 0 0;
+			vertical-align: bottom;
+		}
+	}
+
+	> .dropdown-green {
+		> .label, > .dicon {
+			color: map-get($green-shades, 500);
+
+			&:hover {
+				color: map-get($green-shades, 600);
+			}
+		}
+	}
+
+	> %button {
+		display: inline-block;
+		white-space: nowrap;
+		text-align: center;
+		padding: 0.375rem 0.75rem;
 		font-weight: 500;
-		padding: 0 0.5rem;
+		font-size: 1rem;
+		border: 1px solid transparent;
+		text-transform: uppercase;
+		cursor: pointer;
+		@extend .no-select;
+		@include border-radius(2px);
+		outline: none;
+		background-color: map-get($green-shades, 600);
+		color: $color-white;
+		// @include button-shadow();
+
+		> .dicon {
+			font-size: 1rem;
+			padding: 0.2rem 0.4rem 0 0;
+			font-weight: 500;
+		}
+
+		> .label {
+			display: inline-block;
+			margin: 0;
+			padding: 0;
+		}
+
+		&:hover {
+			color: map-get($gray-shades, 800);
+			border-color: map-get($gray-shades, 500);
+		}
+	}
+
+	.button-green {
+		@extend %button;
+		background-color: map-get($green-shades, 600);
+		color: $color-white;
+
+		&:hover {
+			background-color: map-get($green-shades, 700);
+		}
+	}
+	.button-green-light {
+		@extend %button;
+		background-color: map-get($green-shades, 200);
+		color: map-get($green-shades, 700);
+		border: 1px solid map-get($green-shades, 300);
+
+		&:hover {
+			background-color: map-get($green-shades, 300);
+		}
+	}
+
+	.button-yellow {
+		@extend %button;
+		background-color: map-get($yellow-shades, 600);
+		color: $color-white;
+
+		&:hover {
+			background-color: map-get($yellow-shades, 700);
+		}
+	}
+	.button-yellow-light {
+		@extend %button;
+		background-color: map-get($yellow-shades, 200);
+		color: map-get($yellow-shades, 700);
+		border: 1px solid map-get($yellow-shades, 300);
+
+		&:hover {
+			background-color: map-get($yellow-shades, 300);
+		}
+	}
+
+	.button-red {
+		@extend %button;
+		background-color: map-get($red-shades, 600);
+		color: $color-white;
+
+		&:hover {
+			background-color: map-get($red-shades, 700);
+		}
+	}
+	.button-red-light {
+		@extend %button;
+		background-color: map-get($red-shades, 100);
+		color: map-get($red-shades, 700);
+		border: 1px solid map-get($red-shades, 200);
+
+		&:hover {
+			background-color: map-get($red-shades, 200);
+		}
 	}
 }
 
@@ -88,6 +211,7 @@
 
 .dmz-toolbar-light {
 	background-color: map-get($gray-shades, 100);
+	background-color: $color-white;
 }
 
 .dmz-toolbar-raised {

gui/app/templates/components/document/document-toolbar.hbs

@@ -1,14 +1,53 @@
-<div class="text-right no-print">
-	{{#ui/ui-toolbar dark=false light=false raised=false large=true bordered=false}}
-		{{#ui/ui-toolbar-icon icon=constants.Icon.Export color=constants.Color.Gray tooltip="Print, PDF, Export"}}
+{{#ui/ui-toolbar dark=false light=false raised=false large=true bordered=false}}
+	{{#if (or showActivity showRevisions)}}
+		{{#ui/ui-toolbar-dropdown label="History" arrow=true}}
 			{{#attach-popover class="ember-attacher-popper" hideOn="clickout" showOn="click" isShown=false}}
 				<ul class="menu">
-					<li class="item" {{action "onExport"}}>Export as HTML file</li>
-					<li class="item" {{action "onPrintDocument"}}>Print...</li>
+					{{#if showActivity}}
+						{{#link-to "document.activity" class="item"}}Activity summary{{/link-to}}
+					{{/if}}
+					{{#if showRevisions}}
+						{{#link-to "document.revisions" class="item"}}Revisions{{/link-to}}
+					{{/if}}
 				</ul>
 			{{/attach-popover}}
-		{{/ui/ui-toolbar-icon}}
+		{{/ui/ui-toolbar-dropdown}}
+		<Ui::UiToolbarDivider />
+	{{/if}}
 
+	{{#ui/ui-toolbar-dropdown label="Export" arrow=true}}
+		{{#attach-popover class="ember-attacher-popper" hideOn="clickout" showOn="click" isShown=false}}
+			<ul class="menu">
+				<li class="item" {{action "onPrintDocument"}}>Send to print...</li>
+				<li class="item" {{action "onExport"}}>Download HTML file</li>
+			</ul>
+		{{/attach-popover}}
+	{{/ui/ui-toolbar-dropdown}}
+
+	<Ui::UiToolbarDivider />
+
+	{{#if (eq appMeta.edition constants.Product.EnterpriseEdition)}}
+		{{#if permissions.documentEdit}}
+			{{#ui/ui-toolbar-icon icon=constants.Icon.UserAssign color=constants.Color.Gray tooltip="Actions & Sharing"}}
+				{{#attach-popover class="ember-attacher-popper" hideOn="clickout" showOn="click" isShown=false}}
+					<ul class="menu">
+						<li class="item" {{action "onShowRequestContributionModal"}}>Request contribution</li>
+						<li class="item" {{action "onShowRequestFeedbackModal"}}>Request feedback</li>
+						<li class="item" {{action "onShowRequestReadModal"}}>Request read</li>
+						{{#if (eq document.lifecycle constants.Lifecycle.Draft)}}
+							<li class="divider"/>
+							<li class="item" {{action "onShowPublishModal"}}>Request publication</li>
+						{{/if}}
+						<li class="divider"/>
+						<li class="item" {{action "onShareModal"}}>Share via secure external link</li>
+					</ul>
+				{{/attach-popover}}
+			{{/ui/ui-toolbar-icon}}
+			<Ui::UiToolbarDivider />
+		{{/if}}
+	{{/if}}
+
+	{{#if (or pinState.isPinned session.authenticated)}}
 		{{#if pinState.isPinned}}
 			{{ui/ui-toolbar-icon icon=constants.Icon.BookmarkDelete color=constants.Color.Yellow
 				tooltip="Remove from bookmarks" onClick=(action "onUnpin")}}
@@ -16,57 +55,24 @@
 			{{ui/ui-toolbar-icon icon=constants.Icon.BookmarkAdd color=constants.Color.Gray
 				tooltip="Bookmark" onClick=(action "onPin")}}
 		{{/if}}
-
-		{{#if permissions.documentEdit}}
-			{{ui/ui-toolbar-icon icon=constants.Icon.Settings color=constants.Color.Gray
-				tooltip="Rename, Categories, Tag, Status, Workflow" linkTo="document.settings"}}
-		{{/if}}
-	{{/ui/ui-toolbar}}
-
-	{{#if hasToolbar}}
-		{{#ui/ui-toolbar dark=false light=true raised=true large=true bordered=true}}
-			{{#if (eq appMeta.edition constants.Product.EnterpriseEdition)}}
-				{{#if permissions.documentEdit}}
-					{{#ui/ui-toolbar-icon icon=constants.Icon.UserAssign color=constants.Color.Gray tooltip="Actions & Sharing"}}
-						{{#attach-popover class="ember-attacher-popper" hideOn="clickout" showOn="click" isShown=false}}
-							<ul class="menu">
-								<li class="item" {{action "onShowRequestContributionModal"}}>Request contribution</li>
-								<li class="item" {{action "onShowRequestFeedbackModal"}}>Request feedback</li>
-								<li class="item" {{action "onShowRequestReadModal"}}>Request read</li>
-								{{#if (eq document.lifecycle constants.Lifecycle.Draft)}}
-									<li class="divider"/>
-									<li class="item" {{action "onShowPublishModal"}}>Request publication</li>
-								{{/if}}
-								<li class="divider"/>
-								<li class="item" {{action "onShareModal"}}>Share via secure external link</li>
-							</ul>
-						{{/attach-popover}}
-					{{/ui/ui-toolbar-icon}}
-				{{/if}}
-			{{/if}}
-
-			{{#if showActivity}}
-				{{ui/ui-toolbar-icon icon=constants.Icon.Pulse color=constants.Color.Gray
-					tooltip="See content activity" linkTo="document.activity"}}
-			{{/if}}
-
-			{{#if showRevisions}}
-				{{ui/ui-toolbar-icon icon=constants.Icon.TimeBack color=constants.Color.Gray
-					tooltip="Revisions and rollback" linkTo="document.revisions"}}
-			{{/if}}
-
-			{{#if permissions.documentAdd}}
-				{{ui/ui-toolbar-icon icon=constants.Icon.Copy color=constants.Color.Gray
-					tooltip="Save as template" onClick=(action "onShowTemplateModal")}}
-			{{/if}}
-
-			{{#if permissions.documentDelete}}
-				{{ui/ui-toolbar-icon icon=constants.Icon.Delete color=constants.Color.Gray
-					tooltip="Delete" onClick=(action "onShowDeleteModal")}}
-			{{/if}}
-		{{/ui/ui-toolbar}}
 	{{/if}}
-</div>
+
+	{{#if permissions.documentAdd}}
+		{{ui/ui-toolbar-icon icon=constants.Icon.Copy
+			tooltip="Save as template" onClick=(action "onShowTemplateModal")}}
+	{{/if}}
+
+	{{#if permissions.documentDelete}}
+		{{ui/ui-toolbar-icon icon=constants.Icon.Delete
+			tooltip="Delete" onClick=(action "onShowDeleteModal")}}
+	{{/if}}
+
+	{{#if permissions.documentEdit}}
+		<Ui::UiToolbarDivider />
+		{{ui/ui-toolbar-icon icon=constants.Icon.Settings color=constants.Color.Green
+			tooltip="Rename, Categories, Tag, Status, Workflow" linkTo="document.settings"}}
+	{{/if}}
+{{/ui/ui-toolbar}}
 
 <div id="document-template-modal" class="modal" tabindex="-1" role="dialog">
 	<div class="modal-dialog" role="document">

gui/app/templates/components/folder/space-toolbar.hbs

@@ -1,4 +1,4 @@
-{{#ui/ui-toolbar dark=false light=false raised=false large=true bordered=false}}
+{{#ui/ui-toolbar dark=false light=false raised=false large=false bordered=false}}
 	{{#if hasDocuments}}
 		{{ui/ui-toolbar-icon icon=constants.Icon.Export color=constants.Color.Gray
 			tooltip="Export as HTML" onClick=(action "onShowExport")}}
@@ -18,9 +18,8 @@
 {{/ui/ui-toolbar}}
 
 {{#if permissions.documentAdd}}
-	{{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true}}
-		{{ui/ui-toolbar-icon icon=constants.Icon.Plus color=constants.Color.Green}}
-		{{ui/ui-toolbar-label label="CONTENT" color=constants.Color.Green}}
+	{{#ui/ui-toolbar dark=false light=false raised=false large=false bordered=false}}
+		{{ui/ui-toolbar-button color=constants.Color.Green uppercase=false icon=constants.Icon.Plus label="CONTENT"}}
 		{{#attach-popover class="ember-attacher-popper" hideOn="clickout" showOn="click" isShown=false}}
 			<div class="menu">
 				<a class="item" href="#" {{action "onShowEmptyDocModal"}}>Blank canvas</a>
@@ -31,88 +30,88 @@
 			</div>
 		{{/attach-popover}}
 	{{/ui/ui-toolbar}}
+{{/if}}
 
-	<div id="empty-doc-modal" class="modal" tabindex="-1" role="dialog">
-		<div class="modal-dialog" role="document">
-			<div class="modal-content">
-				<div class="modal-header">Blank Canvas</div>
-				<div class="modal-body">
-					<form onsubmit={{action "onAddEmptyDoc"}}>
-						<div class="form-group">
-							<label for="empty-doc-name">Document Name</label>
-							{{input id="empty-doc-name" type="text" value=emptyDocName placeholder="Enter name" class=(if emptyDocNameError "form-control mousetrap is-invalid" "form-control mousetrap") autocomplete="off"}}
-						</div>
-					</form>
-				</div>
-				<div class="modal-footer">
-					{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Cancel dismiss=true}}
-					{{ui/ui-button-gap}}
-					{{ui/ui-button color=constants.Color.Green light=true label=constants.Label.Add onClick=(action "onAddEmptyDoc")}}
-				</div>
+<div id="empty-doc-modal" class="modal" tabindex="-1" role="dialog">
+	<div class="modal-dialog" role="document">
+		<div class="modal-content">
+			<div class="modal-header">Blank Canvas</div>
+			<div class="modal-body">
+				<form onsubmit={{action "onAddEmptyDoc"}}>
+					<div class="form-group">
+						<label for="empty-doc-name">Document Name</label>
+						{{input id="empty-doc-name" type="text" value=emptyDocName placeholder="Enter name" class=(if emptyDocNameError "form-control mousetrap is-invalid" "form-control mousetrap") autocomplete="off"}}
+					</div>
+				</form>
+			</div>
+			<div class="modal-footer">
+				{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Cancel dismiss=true}}
+				{{ui/ui-button-gap}}
+				{{ui/ui-button color=constants.Color.Green light=true label=constants.Label.Add onClick=(action "onAddEmptyDoc")}}
 			</div>
 		</div>
 	</div>
-	<div id="template-doc-modal" class="modal" tabindex="-1" role="dialog">
-		<div class="modal-dialog" role="document">
-			<div class="modal-content">
-				<div class="modal-header">From Template</div>
-				<div class="modal-body">
-					<form onsubmit={{action "onAddTemplateDoc"}}>
-						<div class="form-group">
-							<label for="template-doc-name">Document Name</label>
-							{{input id="template-doc-name" type="text" value=templateDocName placeholder="Enter name" class=(if templateDocNameError "form-control mousetrap is-invalid" "form-control mousetrap") autocomplete="off"}}
-						</div>
-						<div class="widget-list-picker">
-							<ul class="options">
-								{{#each templates as |item|}}
-									<li class="option {{if item.selected "selected"}}" {{action "onSelectTemplate" item}}>
-										<div class="text text-truncate">
-											{{item.name}}<br>{{item.excerpt}}
-										</div>
-										{{#if item.selected}}
-											<i class="dicon {{constants.Icon.Tick}}" />
-										{{/if}}
-									</li>
-								{{/each}}
-							</ul>
-						</div>
-					</form>
-				</div>
-				<div class="modal-footer">
-					{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Cancel dismiss=true}}
-					{{ui/ui-button-gap}}
-					{{ui/ui-button color=constants.Color.Green light=true label=constants.Label.Add onClick=(action "onAddTemplateDoc")}}
-				</div>
-			</div>
-		</div>
-	</div>
-	<div id="import-doc-modal" class="modal" tabindex="-1" role="dialog">
-		<div class="modal-dialog" role="document">
-			<div class="modal-content">
-				<div class="modal-header">Import Files</div>
-				<div class="modal-body">
-					<div class="import-zone">
-						<button id="import-document-button" type="button" class="dmz-button-yellow-light text-center">
-							<br>
-							Click to select files or drag-drop files
-							<br><br>
-							.doc, .docx, .md, .markdown
-							<br><br>
-						</button>
-						<div class="import-status">
-							{{#each importStatus as |status|}}
-								<p>{{status}}</p>
+</div>
+<div id="template-doc-modal" class="modal" tabindex="-1" role="dialog">
+	<div class="modal-dialog" role="document">
+		<div class="modal-content">
+			<div class="modal-header">From Template</div>
+			<div class="modal-body">
+				<form onsubmit={{action "onAddTemplateDoc"}}>
+					<div class="form-group">
+						<label for="template-doc-name">Document Name</label>
+						{{input id="template-doc-name" type="text" value=templateDocName placeholder="Enter name" class=(if templateDocNameError "form-control mousetrap is-invalid" "form-control mousetrap") autocomplete="off"}}
+					</div>
+					<div class="widget-list-picker">
+						<ul class="options">
+							{{#each templates as |item|}}
+								<li class="option {{if item.selected "selected"}}" {{action "onSelectTemplate" item}}>
+									<div class="text text-truncate">
+										{{item.name}}<br>{{item.excerpt}}
+									</div>
+									{{#if item.selected}}
+										<i class="dicon {{constants.Icon.Tick}}" />
+									{{/if}}
+								</li>
 							{{/each}}
-						</div>
+						</ul>
+					</div>
+				</form>
+			</div>
+			<div class="modal-footer">
+				{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Cancel dismiss=true}}
+				{{ui/ui-button-gap}}
+				{{ui/ui-button color=constants.Color.Green light=true label=constants.Label.Add onClick=(action "onAddTemplateDoc")}}
+			</div>
+		</div>
+	</div>
+</div>
+<div id="import-doc-modal" class="modal" tabindex="-1" role="dialog">
+	<div class="modal-dialog" role="document">
+		<div class="modal-content">
+			<div class="modal-header">Import Files</div>
+			<div class="modal-body">
+				<div class="import-zone">
+					<button id="import-document-button" type="button" class="dmz-button-yellow-light text-center">
+						<br>
+						Click to select files or drag-drop files
+						<br><br>
+						.doc, .docx, .md, .markdown
+						<br><br>
+					</button>
+					<div class="import-status">
+						{{#each importStatus as |status|}}
+							<p>{{status}}</p>
+						{{/each}}
 					</div>
 				</div>
-				<div class="modal-footer">
-					{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Cancel dismiss=true}}
-				</div>
+			</div>
+			<div class="modal-footer">
+				{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Cancel dismiss=true}}
 			</div>
 		</div>
 	</div>
-{{/if}}
+</div>
 
 <div id="space-export-modal" class="modal" tabindex="-1" role="dialog">
 	<div class="modal-dialog" role="document">

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

@@ -0,0 +1,5 @@
+{{#if hasIcon}}
+	<i class="dicon {{iconClass}}"/>
+{{/if}}
+<div class="label" title={{label}}>{{label}}</div>
+{{yield}}

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

@@ -0,0 +1,5 @@
+<div class="label" title={{label}}>{{label}}</div>
+{{#if this.arrow}}
+	<i class="dicon {{iconClass}}"/>
+{{/if}}
+{{yield}}