Merge pull request #377 from Ma27/preview-button-toggle

gui/editors: toggle Preview/Edit button

docker-compose.yaml

@@ -14,7 +14,7 @@ version: "3"
 
 services:
   db:
-    image: postgres:latest
+    image: postgres:12
     restart: always
     ports:
       - 5432:5432

gui/app/components/section/base-editor-inline.js

@@ -27,6 +27,10 @@ export default Component.extend(Modals, Notifier, {
 		return `page-editor-${page.id}`;
 	}),
 	previewText: 'Preview',
+	previewIcon: computed('previewIcon', function () {
+		let constants = this.get('constants');
+		return constants.Icon.Preview;
+	}),
 	pageTitle: '',
 
 	didReceiveAttrs() {
@@ -102,8 +106,10 @@ export default Component.extend(Modals, Notifier, {
 		},
 
 		onPreview() {
+			let constants = this.get('constants');
 			let pt = this.get('previewText');
 			this.set('previewText', pt === 'Preview' ? 'Edit Mode' : 'Preview');
+			this.set('previewIcon', pt === 'Preview' ? constants.Icon.Edit : constants.Icon.Preview);
 			return this.get('onPreview')();
 		},
 

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

@@ -39,6 +39,7 @@ export default Component.extend({
 	click(e) {
 		if (!_.isUndefined(this.onClick)) {
 			this.onClick(e);
+			this.notifyPropertyChange('calcClass');
 			return;
 		}
 

gui/app/templates/components/section/base-editor-inline.hbs

@@ -29,8 +29,8 @@
 						tooltip="Insert Link" onClick=(action "onShowLinkModal")}}
 				{{/if}}
 				{{#if previewButton}}
-					{{ui/ui-toolbar-icon icon=constants.Icon.Preview color=constants.Color.Gray
-						tooltip="Preview changes" onClick=(action "onPreview")}}
+					{{ui/ui-toolbar-icon icon=previewIcon color=constants.Color.Gray
+						tooltip=previewText onClick=(action "onPreview")}}
 				{{/if}}
 				{{ui/ui-toolbar-icon icon=constants.Icon.Tick color=constants.Color.Green tooltip="Save changes" onClick=(action "onAction")}}
 				{{ui/ui-toolbar-icon icon=constants.Icon.Cross color=constants.Color.Red tooltip="Cancel editing" onClick=(action "onCancel")}}