From 9c6369e8d8ac31dea18218f7f387d2d2277070cc Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Tue, 17 Aug 2021 21:10:32 +0200
Subject: [PATCH] Make editor edit button at the bottom the default and make
 sure the done button stands out more

---
 src/components/input/editor.vue            | 48 +++++++++-------------
 src/components/tasks/partials/comments.vue |  1 -
 src/styles/components/task.scss            | 15 -------
 src/styles/theme/variables/variables.scss  |  3 --
 4 files changed, 19 insertions(+), 48 deletions(-)

diff --git a/src/components/input/editor.vue b/src/components/input/editor.vue
index 1b8f1440..fe03f380 100644
--- a/src/components/input/editor.vue
+++ b/src/components/input/editor.vue
@@ -1,24 +1,5 @@
 <template>
-	<div :class="{'is-pulled-up': isEditEnabled}" class="editor">
-		<div class="is-pulled-right mb-4" v-if="hasPreview && isEditEnabled && !hasEditBottom">
-			<x-button
-				v-if="!isEditActive"
-				@click="toggleEdit"
-				:shadow="false"
-				type="secondary"
-			>
-				<icon icon="pen"/>
-			</x-button>
-			<x-button
-				v-else
-				@click="toggleEdit"
-				:shadow="false"
-				type="secondary"
-			>
-				{{ $t('input.editor.done') }}
-			</x-button>
-		</div>
-
+	<div class="editor">
 		<div class="clear"></div>
 
 		<vue-easymde
@@ -32,7 +13,7 @@
 		<div class="preview content" v-html="preview" v-if="isPreviewActive && text !== ''">
 		</div>
 
-		<p class="has-text-centered has-text-grey is-italic" v-if="isPreviewActive && text === '' && emptyText !== ''">
+		<p class="has-text-centered has-text-grey is-italic" v-if="showPreviewText">
 			{{ emptyText }}
 			<template v-if="isEditEnabled">
 				<a @click="toggleEdit">{{ $t('input.editor.edit') }}</a>.
@@ -40,10 +21,10 @@
 		</p>
 
 		<ul class="actions">
-			<template v-if="hasEditBottom && isEditEnabled">
+			<template v-if="isEditEnabled && !showPreviewText">
 				<li>
 					<a v-if="!isEditActive" @click="toggleEdit">{{ $t('input.editor.edit') }}</a>
-					<a v-else @click="toggleEdit">{{ $t('input.editor.done') }}</a>
+					<a v-else @click="toggleEdit" class="done-edit">{{ $t('input.editor.done') }}</a>
 				</li>
 			</template>
 			<li v-for="(action, k) in bottomActions" :key="k">
@@ -97,10 +78,6 @@ export default {
 		isEditEnabled: {
 			default: true,
 		},
-		hasEditBottom: {
-			type: Boolean,
-			default: false,
-		},
 		bottomActions: {
 			default: () => [],
 		},
@@ -109,6 +86,11 @@ export default {
 			default: () => '',
 		},
 	},
+	computed: {
+		showPreviewText() {
+			return this.isPreviewActive && this.text === '' && this.emptyText !== ''
+		},
+	},
 	data() {
 		return {
 			text: '',
@@ -468,8 +450,12 @@ export default {
 		clear: both;
 	}
 
-	.preview.content ul li input[type="checkbox"] {
-		margin-right: .5rem;
+	.preview.content {
+		margin-bottom: .5rem;
+
+		ul li input[type="checkbox"] {
+			margin-right: .5rem;
+		}
 	}
 }
 
@@ -548,6 +534,10 @@ ul.actions {
 
 	&, a {
 		color: $grey-500;
+
+		&.done-edit {
+			color: $primary;
+		}
 	}
 
 	a:hover {
diff --git a/src/components/tasks/partials/comments.vue b/src/components/tasks/partials/comments.vue
index aed70c4e..7576f8ac 100644
--- a/src/components/tasks/partials/comments.vue
+++ b/src/components/tasks/partials/comments.vue
@@ -77,7 +77,6 @@
 							}
 						"
 						v-model="c.comment"
-						:has-edit-bottom="true"
 						:bottom-actions="actions[c.id]"
 					/>
 				</div>
diff --git a/src/styles/components/task.scss b/src/styles/components/task.scss
index 64d864e2..ecc81c59 100644
--- a/src/styles/components/task.scss
+++ b/src/styles/components/task.scss
@@ -117,21 +117,6 @@
         }
       }
     }
-
-    &.description .editor {
-
-      &.is-pulled-up {
-        margin-top: -3rem;
-      }
-
-      .tabs {
-        margin-bottom: 0;
-
-        ul {
-          border-bottom: none;
-        }
-      }
-    }
   }
 
   .details, .heading {
diff --git a/src/styles/theme/variables/variables.scss b/src/styles/theme/variables/variables.scss
index bbb4761b..dbc7532b 100644
--- a/src/styles/theme/variables/variables.scss
+++ b/src/styles/theme/variables/variables.scss
@@ -21,9 +21,6 @@ $transition-duration: 100ms;
 $flash-background-duration: 750ms;
 
 $vikunja-font: 'Quicksand', sans-serif;
-$vikunja-light-text: $grey-100;
-$vikunja-blue: #7F23FF; // #7F23FF; // #5974d9
-$vikunja-green: #4DB788;
 
 $navbar-padding: 2rem;
 $vikunja-nav-background: $light-background;