From 5cde4c3ab8bea91554b3a386631ddb24022f554c Mon Sep 17 00:00:00 2001
From: profi248 <kostal.david8@gmail.com>
Date: Wed, 30 Dec 2020 17:56:20 +0100
Subject: [PATCH 1/2] Improve editor buttons UX

Rename "preview" buttons, as they are confusing, there's no obvious way to save your edit.
Change order of buttons in comments to be more friendly.
---
 cypress/integration/task/task.spec.js |  2 +-
 src/components/input/editor.vue       | 34 ++++++++++++++-------------
 2 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/cypress/integration/task/task.spec.js b/cypress/integration/task/task.spec.js
index 8f8dbbe64..efa398553 100644
--- a/cypress/integration/task/task.spec.js
+++ b/cypress/integration/task/task.spec.js
@@ -165,7 +165,7 @@ describe('Task', () => {
 			cy.get('.task-view .details.content.description .editor .vue-easymde .EasyMDEContainer .CodeMirror-scroll')
 				.type('{selectall}New Description')
 			cy.get('.task-view .details.content.description .editor a')
-				.contains('Preview')
+				.contains('Done')
 				.click()
 
 			cy.get('.task-view .details.content.description h3 span.is-small.has-text-success')
diff --git a/src/components/input/editor.vue b/src/components/input/editor.vue
index 2e44b8681..4c76b43f4 100644
--- a/src/components/input/editor.vue
+++ b/src/components/input/editor.vue
@@ -2,11 +2,9 @@
 	<div :class="{'is-pulled-up': isEditEnabled}" class="editor">
 		<div class="tabs is-right" v-if="hasPreview && isEditEnabled && !hasEditBottom">
 			<ul>
-				<li :class="{'is-active': isPreviewActive}" v-if="isEditActive">
-					<a @click="showPreview">Preview</a>
-				</li>
 				<li :class="{'is-active': isEditActive}">
-					<a @click="() => {isPreviewActive = false; isEditActive = true}">Edit</a>
+					<a v-if="!isEditActive" @click="toggleEdit">Edit</a>
+					<a v-else @click="toggleEdit">Done</a>
 				</li>
 			</ul>
 		</div>
@@ -23,17 +21,15 @@
 		</div>
 
 		<ul class="actions">
+			<template v-if="hasEditBottom">
+				<li :class="{'is-active': isEditActive}">
+					<a v-if="!isEditActive" @click="toggleEdit">Edit</a>
+					<a v-else @click="toggleEdit">Save</a>
+				</li>
+			</template>
 			<li v-for="(action, k) in bottomActions" :key="k">
 				<a @click="action.action">{{ action.title }}</a>
 			</li>
-			<template v-if="hasEditBottom">
-				<li :class="{'is-active': isPreviewActive}" v-if="isEditActive">
-					<a @click="showPreview">Preview</a>
-				</li>
-				<li :class="{'is-active': isEditActive}">
-					<a @click="() => {isPreviewActive = false; isEditActive = true}">Edit</a>
-				</li>
-			</template>
 		</ul>
 	</div>
 </template>
@@ -394,10 +390,16 @@ export default {
 			this.bubble()
 			this.renderPreview()
 		},
-		showPreview() {
-			this.isPreviewActive = true
-			this.isEditActive = false
-			this.renderPreview()
+		toggleEdit() {
+			if (this.isEditActive) {
+				this.isPreviewActive = true;
+				this.isEditActive = false;
+				this.renderPreview();
+				this.$emit('change');
+			} else {
+				this.isPreviewActive = false;
+				this.isEditActive = true;
+			}
 		},
 	},
 }
-- 
2.45.1


From c16c454f365de282bb8116b4a32ad6b1d81af467 Mon Sep 17 00:00:00 2001
From: profi248 <kostal.david8@gmail.com>
Date: Wed, 30 Dec 2020 21:39:41 +0100
Subject: [PATCH 2/2] clean up text editor button changes

---
 src/components/input/editor.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/input/editor.vue b/src/components/input/editor.vue
index 4c76b43f4..c651bd008 100644
--- a/src/components/input/editor.vue
+++ b/src/components/input/editor.vue
@@ -2,7 +2,7 @@
 	<div :class="{'is-pulled-up': isEditEnabled}" class="editor">
 		<div class="tabs is-right" v-if="hasPreview && isEditEnabled && !hasEditBottom">
 			<ul>
-				<li :class="{'is-active': isEditActive}">
+				<li>
 					<a v-if="!isEditActive" @click="toggleEdit">Edit</a>
 					<a v-else @click="toggleEdit">Done</a>
 				</li>
@@ -22,9 +22,9 @@
 
 		<ul class="actions">
 			<template v-if="hasEditBottom">
-				<li :class="{'is-active': isEditActive}">
+				<li>
 					<a v-if="!isEditActive" @click="toggleEdit">Edit</a>
-					<a v-else @click="toggleEdit">Save</a>
+					<a v-else @click="toggleEdit">Done</a>
 				</li>
 			</template>
 			<li v-for="(action, k) in bottomActions" :key="k">
@@ -395,7 +395,7 @@ export default {
 				this.isPreviewActive = true;
 				this.isEditActive = false;
 				this.renderPreview();
-				this.$emit('change');
+				this.bubble(0); // save instantly
 			} else {
 				this.isPreviewActive = false;
 				this.isEditActive = true;
-- 
2.45.1