Document meta fields: better popovers & click-through editing

Non-admins receive popovers on hover.

Admins receive no popovers and get click-through to settings tab.

Space and document settings support jump to sub-section.

Co-Authored-By: Harvey Kandola <harvey@documize.com>

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

@@ -22,6 +22,7 @@ export default Component.extend(Modals, Tooltips, {
 	documentService: service('document'),
 	sessionService: service('session'),
 	categoryService: service('category'),
+	router: service(),
 
 	contributorMsg: '',
 	approverMsg: '',
@@ -29,6 +30,9 @@ export default Component.extend(Modals, Tooltips, {
 	isApprover: computed('permissions', function() {
 		return this.get('permissions.documentApprove');
 	}),
+	isSpaceAdmin: computed('permissions', function() {
+		return this.get('permissions.spaceOwner') || this.get('permissions.spaceManage');
+	}),
 	changeControlMsg: computed('document.protection', function() {
 		let p = this.get('document.protection');
 		let constants = this.get('constants');
@@ -97,32 +101,45 @@ export default Component.extend(Modals, Tooltips, {
 	popovers() {
 		let constants = this.get('constants');
 
-		$('#document-lifecycle-popover').popover('dispose');
+		if (this.get('permissions.documentLifecycle')) {
-		$('#document-protection-popover').popover('dispose');
+			$('#document-lifecycle-popover').addClass('cursor-pointer');
+		} else {
+			$('#document-lifecycle-popover').popover('dispose');
+			$('#document-lifecycle-popover').removeClass('cursor-pointer');
 
-		$('#document-lifecycle-popover').popover({
+			$('#document-lifecycle-popover').popover({
-			html: true,
+				html: true,
-			title: 'Lifecycle',
+				title: 'Lifecycle',
-			content: "<p>Draft &mdash; restricted visiblity and not searchable</p><p>Live &mdash; document visible to all</p><p>Archived &mdash; not visible or searchable</p>",
+				content: "<p>Draft &mdash; restricted visiblity and not searchable</p><p>Live &mdash; document visible to all</p><p>Archived &mdash; not visible or searchable</p>",
-			placement: 'top'
+				placement: 'top',
-		});
+				trigger: 'hover click'
-
+			});
-		let ccMsg = `<p>${this.changeControlMsg}</p>`;
-
-		if (this.get('document.protection') ===  constants.ProtectionType.Review) {
-			ccMsg += '<ul>'
-			ccMsg += `<li>${this.approvalMsg}</li>`;
-			if (this.get('userChanges')) ccMsg += `<li>Your contributions: ${this.contributorMsg}</li>`;
-			if (this.get('isApprover') && this.get('approverMsg.length') > 0) ccMsg += `<li>${this.approverMsg}</li>`;
-			ccMsg += '</ul>'
 		}
 
-		$('#document-protection-popover').popover({
+		if (this.get('permissions.documentApprove')) {
-			html: true,
+			$('#document-protection-popover').addClass('cursor-pointer');
-			title: 'Change Control',
+		} else {
-			content: ccMsg,
+			$('#document-protection-popover').popover('dispose');
-			placement: 'top'
+			$('#document-protection-popover').removeClass('cursor-pointer');
-		});
+
+			let ccMsg = `<p>${this.changeControlMsg}</p>`;
+
+			if (this.get('document.protection') ===  constants.ProtectionType.Review) {
+				ccMsg += '<ul>'
+				ccMsg += `<li>${this.approvalMsg}</li>`;
+				if (this.get('userChanges')) ccMsg += `<li>Your contributions: ${this.contributorMsg}</li>`;
+				if (this.get('isApprover') && this.get('approverMsg.length') > 0) ccMsg += `<li>${this.approverMsg}</li>`;
+				ccMsg += '</ul>'
+			}
+
+			$('#document-protection-popover').popover({
+				html: true,
+				title: 'Change Control',
+				content: ccMsg,
+				placement: 'top',
+				trigger: 'hover click'
+			});
+		}
 	},
 
 	workflowStatus() {
@@ -187,6 +204,20 @@ export default Component.extend(Modals, Tooltips, {
 			this.get('router').transitionTo('document',
 				space.get('id'), space.get('slug'),
 				version.documentId, this.get('document.slug'));
+		},
+
+		onEditLifecycle() {
+			//no op
+		},
+
+		onEditProtection() {
+			//no op
+		},
+
+		onEditCategory() {
+			if (!this.get('permissions.spaceManage')) return;
+
+			this.get('router').transitionTo('document.settings', {queryParams: {tab: 'meta'}});
 		}
 	}
 });

gui/app/pods/document/settings/controller.js

@@ -18,6 +18,7 @@ export default Controller.extend(Notifier, {
 	folderService: service('folder'),
 	documentService: service('document'),
 	localStorage: service('localStorage'),
+	queryParams: ['tab'],
 	tab: 'general',
 
 	actions: {

gui/app/pods/folder/settings/controller.js

@@ -17,6 +17,7 @@ export default Controller.extend(NotifierMixin, {
 	router: service(),
 	folderService: service('folder'),
 	localStorage: service('localStorage'),
+	queryParams: ['tab'],
 	tab: 'general',
 
 	actions: {

gui/app/styles/view/document/doc-meta.scss

@@ -24,7 +24,6 @@
 	background-color: $color-off-white;
 	font-weight: 800;
 	font-size: 1rem;
-	cursor: pointer;
 
 	&:hover {
 		color: $color-green;
@@ -50,7 +49,6 @@
 	color: $color-gray;
 	background-color: $color-off-white;
 	border: 2px solid $color-gray;
-	cursor: pointer;
 
 	&:hover {
 		color: $color-dark;

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

@@ -1,28 +1,28 @@
 {{#if (eq document.lifecycle constants.Lifecycle.Live)}}
-	<div id="document-lifecycle-popover" class="document-lifecycle-live text-uppercase">{{document.lifecycleLabel}}</div>
+	<div id="document-lifecycle-popover" class="document-lifecycle-live text-uppercase" {{action 'onEditLifecycle'}}>{{document.lifecycleLabel}}</div>
 {{/if}}
 {{#if (eq document.lifecycle constants.Lifecycle.Draft)}}
-	<div id="document-lifecycle-popover" class="document-lifecycle-draft text-uppercase">{{document.lifecycleLabel}}</div>
+	<div id="document-lifecycle-popover" class="document-lifecycle-draft text-uppercase" {{action 'onEditLifecycle'}}>{{document.lifecycleLabel}}</div>
 {{/if}}
 
 <div class="d-block d-sm-none margin-top-20" />
 <div class="d-sm-inline-block margin-left-20" />
 
 {{#if (eq document.protection constants.ProtectionType.None)}}
-	<div id="document-protection-popover" class="document-protection-unlocked text-uppercase">OPEN</div>
+	<div id="document-protection-popover" class="document-protection-unlocked text-uppercase" {{action 'onEditProtection'}}>OPEN</div>
 {{/if}}
 {{#if (eq document.protection constants.ProtectionType.Review)}}
-	<div id="document-protection-popover" class="document-protection-review text-uppercase">PROTECTED</div>
+	<div id="document-protection-popover" class="document-protection-review text-uppercase" {{action 'onEditProtection'}}>PROTECTED</div>
 {{/if}}
 {{#if (eq document.protection constants.ProtectionType.Lock)}}
-	<div id="document-protection-popover" class="document-protection-locked text-uppercase">LOCKED</div>
+	<div id="document-protection-popover" class="document-protection-locked text-uppercase" {{action 'onEditProtection'}}>LOCKED</div>
 {{/if}}
 
 <div class="d-block d-sm-none margin-top-20" />
 <div class="d-sm-inline-block margin-left-20" />
 
 {{#each selectedCategories as |cat|}}
-	<div class="document-category" data-toggle="tooltip" data-placement="top" title="Category">
+	<div class="document-category {{if isSpaceAdmin 'cursor-pointer'}}" data-toggle="tooltip" data-placement="top" title="Category">
 		{{cat.category}}
 	</div>
 {{/each}}
@@ -30,13 +30,13 @@
 <div class="d-block d-sm-none margin-top-20" />
 
 {{#each tagz as |t index|}}
-	<div class="document-tag" data-toggle="tooltip" data-placement="top" title="Tag">
+	<div class="document-tag {{if isSpaceAdmin 'cursor-pointer'}}" data-toggle="tooltip" data-placement="top" title="Tag" {{action 'onEditCategory'}}>
 		{{concat '#' t}}
 	</div>
 {{/each}}
 
 <div class="document-meta">
-	{{document/view-attachment document=document permissions=permissions}}
+	{{document/view-attachment document=document permissions=permissions {{action 'onEditCategory'}}}}
 </div>
 
 <div class="margin-top-70" />

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

@@ -29,7 +29,7 @@
 
 	{{#if spaceSettings}}
 		<div class="text-center {{if (gt categories.length 0) 'mt-4'}}">
-			{{#link-to 'folder.settings' space.id space.slug class="btn btn-secondary font-weight-bold"}}{{categoryLinkName}}{{/link-to}}
+			{{#link-to 'folder.settings' space.id space.slug (query-params tab="categories") class="btn btn-secondary font-weight-bold"}}{{categoryLinkName}}{{/link-to}}
 		</div>
 	{{/if}}
 </div>