Complete UI refactoring to new nav and toolbar UX

Compact design!

gui/app/components/folder/space-toolbar.js

@@ -19,7 +19,6 @@ import Notifier from '../../mixins/notifier';
 import Component from '@ember/component';
 
 export default Component.extend(ModalMixin, AuthMixin, Notifier, {
-	classNames: ["display-inline-block"],
 	spaceService: service('folder'),
 	localStorage: service(),
 	templateService: service('template'),

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

@@ -22,7 +22,7 @@ export default Component.extend({
 
 	calcClass: computed(function() {
 		// Prepare icon class name
-		this.iconClass = this.get('constants').Icon.TriangleSmallDown;
+		this.iconClass = this.get('constants').Icon.ArrowSmallDown;
 
 		// Prepare button class name
 		let bc = 'dropdown';

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

@@ -12,7 +12,7 @@
 import Component from '@ember/component';
 
 export default Component.extend({
-	classNames: ['dmz-toolbar', 'non-printable'],
+	classNames: ['dmz-toolbar'],
 	classNameBindings:
 		['raised:dmz-toolbar-raised',
 		'bordered:dmz-toolbar-bordered',

gui/app/constants/constants.js

@@ -358,6 +358,8 @@ let constants = EmberObject.extend({
 		Share: 'Share',
 		SignIn: 'Sign In',
 		Sort: 'Sort',
+		Space: 'Space',
+		Spaces: 'Spaces',
 		Unassigned: 'Unassigned',
 		Update: 'Update',
 		Upload: 'Upload',

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

@@ -1,6 +1,10 @@
 <Layout::MasterNavigation />
 <Layout::MasterToolbar>
-	<div class="zone-1" />
+	<div class="zone-1">
+		{{#link-to "folders"}}
+			{{ui/ui-button themed=true uppercase=true icon=constants.Icon.ArrowLeft label=constants.Label.Spaces}}
+		{{/link-to}}
+	</div>
 	<div class="zone-2" />
 	<div class="zone-3">
 		{{folder/space-toolbar

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

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

gui/app/pods/folders/template.hbs

@@ -4,10 +4,15 @@
 	<div class="zone-2" />
 	<div class="zone-3">
 		{{#if (or session.isEditor session.isAdmin)}}
-			{{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true tooltip="New space"}}
+			{{#ui/ui-toolbar dark=false light=false raised=false large=false bordered=false}}
 				{{#if session.isEditor}}
-					{{ui/ui-toolbar-icon icon=constants.Icon.Plus color=constants.Color.Green onClick=(action "onShowModal")}}
+					{{ui/ui-toolbar-button icon=constants.Icon.Plus color=constants.Color.Green
-					{{ui/ui-toolbar-label label="SPACE" color=constants.Color.Green onClick=(action "onShowModal")}}
+						label=constants.Label.Space
+						onClick=(action "onShowModal")}}
+				{{/if}}
+				{{#if session.isAdmin}}
+					{{ui/ui-toolbar-icon icon=constants.Icon.Settings color=constants.Color.Green
+						tooltip="Space settings" linkTo="customize"}}
 				{{/if}}
 			{{/ui/ui-toolbar}}
 		{{/if}}

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

@@ -85,6 +85,10 @@
 						font-weight: bold;
 						background-color: $color-white;
 						@extend .no-select;
+
+						&:hover {
+							background-color: $theme-100;
+						}
 					}
 				}
 			}
@@ -108,12 +112,13 @@
 			flex-wrap: wrap;
 			align-items: center;
 			justify-content: space-between;
-			padding: 0 15px;
+			padding: 0 15px 0 20px;
 
 			> div[class^="zone-"], > div[class*=" zone-"] {
 				margin: 0;
-				// padding: 10px 10px;
+				padding: 0;
 				align-items: center;
+				align-self: center;
 
 				> .label {
 					font-size: 1rem;

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

@@ -8,7 +8,7 @@
 	// -webkit-box-shadow: 0 20px 66px 0 rgba(34,48,73,0.2);
     // box-shadow: 0 20px 66px 0 rgba(34,48,73,0.2);
 
-	@include border-radius(5px);
+	@include border-radius(3px);
 
 	> p {
 		margin: 4px;
@@ -36,6 +36,7 @@
 			&:hover {
 				color: $color-black;
 				background-color: map-get($yellow-shades, 100);
+				@include border-radius(3px);
 			}
 		}
 

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

@@ -6,6 +6,7 @@
 .dmz-toolbar {
 	display: inline-flex;
 	flex-basis: auto;
+	align-items: center;
     text-align: center;
     white-space: nowrap;
     border: 1px solid transparent;
@@ -37,7 +38,7 @@
 
 	> .label {
 		font-size: 14px;
-		font-weight: 500;
+		font-weight: 400;
 		color: map-get($gray-shades, 600);
 		padding: 0 0.5rem;
 		align-self: center;
@@ -85,7 +86,7 @@
 		> .label {
 			display: inline-block;
 			font-size: 1rem;
-			font-weight: 500;
+			font-weight: 400;
 			color: $theme-500;
 			padding: 0 0 0 0.5rem;
 			vertical-align: text-bottom;
@@ -114,6 +115,7 @@
 		white-space: nowrap;
 		text-align: center;
 		padding: 0.375rem 0.75rem;
+		margin: 0 0.5rem;
 		font-weight: 500;
 		font-size: 1rem;
 		border: 1px solid transparent;
@@ -122,7 +124,7 @@
 		@extend .no-select;
 		@include border-radius(2px);
 		outline: none;
-		background-color: map-get($green-shades, 600);
+		background-color: map-get($gray-shades, 600);
 		color: $color-white;
 		// @include button-shadow();
 
@@ -134,6 +136,7 @@
 
 		> .label {
 			display: inline-block;
+			font-size: 1rem;
 			margin: 0;
 			padding: 0;
 		}
@@ -150,9 +153,12 @@
 		color: $color-white;
 
 		&:hover {
-			background-color: map-get($green-shades, 700);
+			color: $color-white;
+			border-color: map-get($green-shades, 500);
+			background-color: map-get($green-shades, 500);
 		}
 	}
+
 	.button-green-light {
 		@extend %button;
 		background-color: map-get($green-shades, 200);

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

@@ -1,34 +1,7 @@
 {{#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">
-					{{#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-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"}}>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"}}
+			{{#ui/ui-toolbar-dropdown label="Actions" arrow=true}}
 				{{#attach-popover class="ember-attacher-popper" hideOn="clickout" showOn="click" isShown=false}}
 					<ul class="menu">
 						<li class="item" {{action "onShowRequestContributionModal"}}>Request contribution</li>
@@ -42,26 +15,45 @@
 						<li class="item" {{action "onShareModal"}}>Share via secure external link</li>
 					</ul>
 				{{/attach-popover}}
-			{{/ui/ui-toolbar-icon}}
+			{{/ui/ui-toolbar-dropdown}}
-			<Ui::UiToolbarDivider />
 		{{/if}}
 	{{/if}}
 
-	{{#if (or pinState.isPinned session.authenticated permissions.documentAdd permissions.documentDelete)}}
+	{{#ui/ui-toolbar-dropdown label="Content" arrow=true}}
-		{{#ui/ui-toolbar-dropdown label="More" arrow=true}}
+		{{#attach-popover class="ember-attacher-popper" hideOn="clickout" showOn="click" isShown=false}}
+			<ul class="menu">
+				{{#if pinState.isPinned}}
+					<li class="item" {{action "onUnpin"}}>Remove bookmark</li>
+					<li class="divider"/>
+				{{else if session.authenticated}}
+					<li class="item" {{action "onPin"}}>Bookmark</li>
+					<li class="divider"/>
+				{{/if}}
+				<li class="item" {{action "onPrintDocument"}}>Print</li>
+				<li class="item" {{action "onExport"}}>Download</li>
+				{{#if permissions.documentAdd}}
+					<li class="divider"/>
+					<li class="item" {{action "onShowTemplateModal"}}>Publish template</li>
+				{{/if}}
+				{{#if permissions.documentDelete}}
+					<li class="divider"/>
+					<li class="item red" {{action "onShowDeleteModal"}}>Delete</li>
+				{{/if}}
+
+			</ul>
+		{{/attach-popover}}
+	{{/ui/ui-toolbar-dropdown}}
+
+
+	{{#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">
-					{{#if pinState.isPinned}}
+					{{#if showActivity}}
-						<li class="item" {{action "onUnpin"}}>Remove bookmark</li>
+						{{#link-to "document.activity" class="item"}}Activity summary{{/link-to}}
-					{{else if session.authenticated}}
-						<li class="item" {{action "onPin"}}>Bookmark</li>
 					{{/if}}
-					{{#if permissions.documentAdd}}
+					{{#if showRevisions}}
-						<li class="item" {{action "onShowTemplateModal"}}>Save as template</li>
+						{{#link-to "document.revisions" class="item"}}Revisions{{/link-to}}
-					{{/if}}
-					{{#if permissions.documentDelete}}
-						<li class="divider"/>
-						<li class="item red" {{action "onShowDeleteModal"}}>Delete</li>
 					{{/if}}
 				</ul>
 			{{/attach-popover}}
@@ -69,7 +61,6 @@
 	{{/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}}

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

@@ -1,37 +1,41 @@
 {{#ui/ui-toolbar dark=false light=false raised=false large=false bordered=false}}
-	{{#if hasDocuments}}
+	{{#if (or hasDocuments pinState.isPinned session.authenticated)}}
-		{{ui/ui-toolbar-icon icon=constants.Icon.Export color=constants.Color.Gray
+		{{#ui/ui-toolbar-dropdown label="Content" arrow=true}}
-			tooltip="Export as HTML" onClick=(action "onShowExport")}}
+			{{#attach-popover class="ember-attacher-popper" hideOn="clickout" showOn="click" isShown=false}}
+				<div class="menu">
+					{{#if pinState.isPinned}}
+						<li class="item" {{action "onUnpin"}}>Remove bookmark</li>
+					{{else if session.authenticated}}
+						<li class="item" {{action "onPin"}}>Bookmark</li>
+					{{/if}}
+					{{#if hasDocuments}}
+						<li class="item" {{action "onShowExport"}}>Download</li>
+					{{/if}}
+				</div>
+			{{/attach-popover}}
+		{{/ui/ui-toolbar-dropdown}}
 	{{/if}}
-	{{#if pinState.isPinned}}
+
-		{{ui/ui-toolbar-icon icon=constants.Icon.BookmarkDelete color=constants.Color.Yellow
+	{{#if permissions.documentAdd}}
-			tooltip="Remove view from bookmarks" onClick=(action "onUnpin")}}
+		{{#ui/ui-toolbar-dropdown label="New" arrow=true}}
-	{{else if session.authenticated}}
+			{{#attach-popover class="ember-attacher-popper" hideOn="clickout" showOn="click" isShown=false}}
-		{{ui/ui-toolbar-icon icon=constants.Icon.BookmarkAdd color=constants.Color.Gray
+				<div class="menu">
-			tooltip="Bookmark this view" onClick=(action "onPin")}}
+					<li class="item" {{action "onShowEmptyDocModal"}}>Blank canvas</li>
+					{{#if hasTemplates}}
+						<li class="item" {{action "onShowTemplateDocModal"}}>From template</li>
+					{{/if}}
+					<li class="item" {{action "onShowImportDocModal"}}>Import files</li>
+				</div>
+			{{/attach-popover}}
+		{{/ui/ui-toolbar-dropdown}}
 	{{/if}}
 
 	{{#if (or permissions.spaceOwner permissions.spaceManage)}}
-		{{ui/ui-toolbar-icon icon=constants.Icon.Settings color=constants.Color.Gray
+		{{ui/ui-toolbar-icon icon=constants.Icon.Settings color=constants.Color.Green
 			tooltip="Space settings" linkTo="folder.settings"}}
 	{{/if}}
 {{/ui/ui-toolbar}}
 
-{{#if permissions.documentAdd}}
-	{{#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>
-				{{#if hasTemplates}}
-					<a class="item" href="#" {{action "onShowTemplateDocModal"}}>From template</a>
-				{{/if}}
-				<a class="item" href="#" {{action "onShowImportDocModal"}}>Import files</a>
-			</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">

gui/app/templates/components/layout/master-navigation.hbs

@@ -28,13 +28,6 @@
 						{{/link-to}}
 					{{/if}}
 				{{/if}}
-				{{#if (and session.authenticated session.isAdmin)}}
-					{{#link-to "customize.general" class=(if (eq selectedItem "settings") "option selected" "option")}}
-						<i class={{concat "dicon " constants.Icon.Settings}}>
-							{{#attach-tooltip showDelay=1000}}Settings{{/attach-tooltip}}
-						</i>
-					{{/link-to}}
-				{{/if}}
 				{{#link-to "search" class=(if (eq selectedItem "search") "option selected" "option")}}
 					<i class={{concat "dicon " constants.Icon.Search}}>
 						{{#attach-tooltip showDelay=1000}}Search{{/attach-tooltip}}

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

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+	<g stroke-linecap="round" stroke-linejoin="round" stroke-width="2" fill="#111111" stroke="#111111">
+		<g class="nc-loop_dots-05-32">
+			<circle data-color="color-2" fill="none" stroke-miterlimit="10" cx="16" cy="16" r="3"
+				transform="translate(0 3.364000000001397)"></circle>
+			<circle fill="none" stroke="#111111" stroke-miterlimit="10" cx="4" cy="16" r="3"
+				transform="translate(0 5.364000000001397)"></circle>
+			<circle fill="none" stroke="#111111" stroke-miterlimit="10" cx="28" cy="16" r="3"
+				transform="translate(0 1.364000000001397)"></circle>
+		</g>
+		<script>!function () { function t(t) { this.element = t, this.dots = [this.element.getElementsByTagName("circle")[1], this.element.getElementsByTagName("circle")[0], this.element.getElementsByTagName("circle")[2]], this.animationId, this.start = null, this.init() } if (!window.requestAnimationFrame) { var i = null; window.requestAnimationFrame = function (t, n) { var e = (new Date).getTime(); i || (i = e); var a = Math.max(0, 16 - (e - i)), o = window.setTimeout(function () { t(e + a) }, a); return i = e + a, o } } t.prototype.init = function () { var t = this; this.animationId = window.requestAnimationFrame(t.triggerAnimation.bind(t)) }, t.prototype.reset = function () { var t = this; window.cancelAnimationFrame(t.animationId) }, t.prototype.triggerAnimation = function (t) { var i = this; this.start || (this.start = t); var n = t - this.start, e = Math.min(n / 40, 23); 930 > n || (this.start = this.start + 930); for (var a = [], o = 0; 3 > o; o++) { a[o] = Math.max(e - 2 * o, 0); if (a[o] > 8) (a[o] = 16 - a[o]); a[o] = Math.max(a[o], 0), this.dots[o].setAttribute("transform", "translate(0 " + a[o] + ")"); } if (document.documentElement.contains(this.element)) window.requestAnimationFrame(i.triggerAnimation.bind(i)) }; var n = document.getElementsByClassName("nc-loop_dots-05-32"), e = []; if (n) for (var a = 0; n.length > a; a++)!function (i) { e.push(new t(n[i])) }(a); document.addEventListener("visibilitychange", function () { "hidden" == document.visibilityState ? e.forEach(function (t) { t.reset() }) : e.forEach(function (t) { t.init() }) }) }();</script>
+	</g>
+</svg>