Implement new toolbar for document view

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

@@ -64,6 +64,14 @@ export default Component.extend(ModalMixin, AuthMixin, Notifier, {
 	},
 
 	actions: {
+		onShowTemplateModal() {
+			this.modalOpen("#document-template-modal", {show:true}, "#new-template-name");
+		},
+
+		onShowDeleteModal() {
+			this.modalOpen("#document-delete-modal", {show:true});
+		},
+
 		onDocumentDelete() {
 			this.modalClose('#document-delete-modal');
 

gui/app/constants/constants.js

@@ -210,12 +210,14 @@ let constants = EmberObject.extend({
 		BarChart: 'dicon-chart-bar-2',
 		Blocks: 'dicon-menu-6',
 		Bookmark: 'dicon-bookmark',
+		BookmarkSolid: 'dicon-bookmark-2',
 		BookmarkAdd: 'dicon-bookmark-add',
 		BookmarkDelete: 'dicon-bookmark-delete',
 		ButtonAction: 'dicon-button-2',
 		Category: 'dicon-flag',
 		Checkbox: 'dicon-shape-rectangle',
 		CheckboxChecked: 'dicon-i-check',
+		Copy: 'dicon-single-copy-04',
 		Database: 'dicon-database',
 		Download: 'dicon-download',
 		Delete: 'dicon-bin',
@@ -242,6 +244,7 @@ let constants = EmberObject.extend({
 		Send: 'dicon-send',
 		Settings: 'dicon-settings-gear',
 		Tag: 'dicon-delete-key',
+		TimeBack: 'dicon-time',
 		Unlocked: 'dicon-unlocked',
 		World: 'dicon-globe',
 	},

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

@@ -72,9 +72,6 @@
 		<div class="document-heading">
 			<h1 class="name">{{document.name}}</h1>
 			<h2 class="desc">{{document.excerpt}}</h2>
-			{{#if document.template}}
-				<span class="bg-warning p-1 pr-2 pl-2">Template</span>&nbsp;&nbsp;
-			{{/if}}
 		</div>
 	</div>
 

gui/app/styles/core/view/document/meta.scss

@@ -81,6 +81,19 @@
 		text-transform: uppercase;
 	}
 
+	> .label-template {
+		@include border-radius(3px);
+		@extend .no-select;
+		display: inline-block;
+		margin: 5px 5px 5px 0;
+		padding: 0.3rem 0.7rem;
+		font-size: 1.1rem;
+		font-weight: 500;
+		background-color: map-get($yellow-shades, 300);
+		color: map-get($yellow-shades, 800);
+		text-transform: uppercase;
+	}
+
 	> .document-heading {
 		.name {
 			color: map-get($gray-shades, 900);

gui/app/styles/core/view/document/section.scss

@@ -54,7 +54,7 @@
 	@include border-radius(5px);
 	@extend .no-select;
 	text-align: right;
-	margin: 2rem 0;
+	margin: 1.5rem 0;
 	display: block;
 	cursor: pointer;
 
@@ -64,6 +64,7 @@
 		vertical-align: middle;
 		padding: 0.5rem;
 		font-size: 16px;
+		@extend %toolbar-shadow;
 
 		&:hover {
 			color: map-get($yellow-shades, 700);

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

@@ -37,4 +37,10 @@
 		{{#if (eq document.protection constants.ProtectionType.Lock)}}LOCKED{{/if}}
 		{{#attach-tooltip showDelay=1000}}Change Control: Open · Protected · Locked{{/attach-tooltip}}
 	</div>
+	{{#if document.template}}
+		<div class="label-template">
+			Template
+			{{#attach-tooltip showDelay=1000}}This is a template{{/attach-tooltip}}
+		</div>
+	{{/if}}
 </div>

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

@@ -1,53 +1,34 @@
 <div class="no-print">
-	{{#if session.authenticated}}
+	{{#ui/ui-toolbar dark=false light=true raised=true large=true bordered=true}}
-		{{#if permissions.documentEdit}}
+		{{ui/ui-toolbar-icon icon=constants.Icon.Print color=constants.Color.Gray
-			{{#link-to "document.settings" space.id space.slug document.id document.slug class="button-icon-gray align-middle"}}
+			tooltip="Print" onClick=(action "onPrintDocument")}}
-				<i class="material-icons">settings</i>
-				{{#attach-tooltip showDelay=1000}}Settings &mdash; meta, lifecycle, workflow{{/attach-tooltip}}
-			{{/link-to}}
-			<div class="button-icon-gap" />
-		{{/if}}
-		{{#if permissions.documentAdd}}
-			<div id="document-template-button" class="button-icon-gray align-middle">
-				<i class="material-icons" data-toggle="modal" data-target="#document-template-modal" data-backdrop="static">content_copy</i>
-				{{#attach-tooltip showDelay=1000}}Save as template{{/attach-tooltip}}
-			</div>
-			<div class="button-icon-gap" />
-		{{/if}}
-	{{/if}}
 
-	<div id="document-print-button" class="button-icon-gray align-middle" {{action "onPrintDocument"}}>
+		{{ui/ui-toolbar-icon icon=constants.Icon.Download color=constants.Color.Gray
-		<i class="material-icons">print</i>
+			tooltip="Export as complete HTML file" onClick=(action "onExport")}}
-		{{#attach-tooltip showDelay=1000}}Print{{/attach-tooltip}}
-	</div>
-	<div class="button-icon-gap" />
-
-	<div id="space-export-button" class="button-icon-danger align-middle" {{action "onExport"}}>
-		<i class="material-icons">import_export</i>
-		{{#attach-tooltip showDelay=1000}}Export as HTML{{/attach-tooltip}}
-	</div>
-	<div class="button-icon-gap" />
 
 		{{#if pinState.isPinned}}
-		<div id="document-pin-button" class="button-icon-gold align-middle" {{action "onUnpin"}}>
+			{{ui/ui-toolbar-icon icon=constants.Icon.BookmarkDelete color=constants.Color.Yellow
-			<i class="material-icons">star</i>
+				tooltip="Remove from bookmarks" onClick=(action "onUnpin")}}
-			{{#attach-tooltip showDelay=1000}}Remove bookmark{{/attach-tooltip}}
-		</div>
-		<div class="button-icon-gap" />
 		{{else if session.authenticated}}
-		<div id="document-pin-button" class="button-icon-gray align-middle" {{action "onPin"}}>
+			{{ui/ui-toolbar-icon icon=constants.Icon.BookmarkAdd color=constants.Color.Gray
-			<i class="material-icons">star</i>
+				tooltip="Bookmark" onClick=(action "onPin")}}
-			{{#attach-tooltip showDelay=1000}}Add bookmark{{/attach-tooltip}}
+		{{/if}}
-		</div>
+
-		<div class="button-icon-gap" />
+		{{#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}}
-		<div id="document-delete-button" class="button-icon-danger align-middle">
+			{{ui/ui-toolbar-icon icon=constants.Icon.Delete color=constants.Color.Gray
-			<i class="material-icons" data-toggle="modal" data-target="#document-delete-modal" data-backdrop="static">delete</i>
+				tooltip="Delete" onClick=(action "onShowDeleteModal")}}
-			{{#attach-tooltip showDelay=1000}}Delete{{/attach-tooltip}}
-		</div>
 		{{/if}}
+
+		{{#if permissions.documentEdit}}
+			{{ui/ui-toolbar-icon icon=constants.Icon.Settings color=constants.Color.Green
+				tooltip="Rename, metadata, workflow" linkTo="document.settings"}}
+		{{/if}}
+	{{/ui/ui-toolbar}}
 </div>
 
 <div id="document-template-modal" class="modal" tabindex="-1" role="dialog">

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

@@ -39,7 +39,7 @@
 	{{/if}}
 
 	{{#if showLikes}}
-		<div class=" d-flex justify-content-center non-printable">
+		<div class=" d-flex justify-content-center no-print">
 			<div class="vote-box">
 				{{#unless voteThanks}}
 				<div class="prompt">

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

@@ -39,7 +39,7 @@
 			{{#if session.authenticated}}
 				{{#if hasPins}}
 					<div class="bookmarks" id="user-pins-button">
-						<i class={{concat "dicon " constants.Icon.Bookmark}}></i>
+						<i class={{concat "dicon " constants.Icon.BookmarkSolid}}></i>
 						{{#attach-popover class="ember-attacher-popper" hideOn="clickout" showOn="click" isShown=false}}
 							<div class="menu">
 								{{#if hasSpacePins}}