From bb2800ec4067ab3fc09ac61bfff65555fd65a0b1 Mon Sep 17 00:00:00 2001
From: profi248 <kostal.david8@gmail.com>
Date: Wed, 30 Dec 2020 21:52:43 +0000
Subject: [PATCH] Improve editor buttons UX (#361)

Co-authored-by: konrad <konrad@kola-entertainments.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/361
Reviewed-by: konrad <konrad@kola-entertainments.de>
Co-authored-by: profi248 <kostal.david8@gmail.com>
Co-committed-by: profi248 <kostal.david8@gmail.com>
---
 cypress/integration/task/task.spec.js |  2 +-
 src/components/input/editor.vue       | 36 ++++++++++++++-------------
 2 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/cypress/integration/task/task.spec.js b/cypress/integration/task/task.spec.js
index 8f8dbbe6..efa39855 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 2e44b868..c651bd00 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>
+				<li>
+					<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>
+					<a v-if="!isEditActive" @click="toggleEdit">Edit</a>
+					<a v-else @click="toggleEdit">Done</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.bubble(0); // save instantly
+			} else {
+				this.isPreviewActive = false;
+				this.isEditActive = true;
+			}
 		},
 	},
 }