From 998d72550f98e8668e9047762aa7dc748dc1f66c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Wed, 11 Nov 2020 15:56:30 +0100
Subject: [PATCH] Add placeholder for the description input
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
Co-authored-by: John Molakvoæ <skjnldsv@users.noreply.github.com>
---
 src/components/card/Description.vue | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/card/Description.vue b/src/components/card/Description.vue
index ceab646da..d021e1735 100644
--- a/src/components/card/Description.vue
+++ b/src/components/card/Description.vue
@@ -45,10 +45,13 @@
 			</Actions>
 		</h5>
 
-		<div v-if="!descriptionEditing"
+		<div v-if="!descriptionEditing && hasDescription"
 			id="description-preview"
 			@click="clickedPreview"
 			v-html="renderedDescription" />
+		<p v-else-if="!descriptionEditing" class="placeholder" @click="showEditor()">
+			{{ t('deck', 'Write a description …') }}
+		</p>
 		<VueEasymde v-else
 			:key="card.id"
 			ref="markdownEditor"
@@ -109,6 +112,7 @@ export default {
 				autofocus: true,
 				autosave: { enabled: false, uniqueId: 'unique' },
 				toolbar: false,
+				placeholder: t('deck', 'Write a description …'),
 			},
 			descriptionSaveTimeout: null,
 			descriptionSaving: false,
@@ -143,6 +147,9 @@ export default {
 		renderedDescription() {
 			return markdownIt.render(this.card.description || '')
 		},
+		hasDescription() {
+			return this.card?.description?.trim?.() !== ''
+		},
 	},
 	methods: {
 		showEditor() {
@@ -226,6 +233,11 @@ export default {
 	}
 }
 
+.placeholder {
+	color: var(--color-text-maxcontrast);
+	padding: 2px;
+}
+
 #description-preview {
 	min-height: 100px;
 
@@ -281,6 +293,10 @@ h5 {
 	color: var(--color-main-text);
 }
 
+.CodeMirror-placeholder {
+	color: var(--color-text-maxcontrast);
+}
+
 .editor-preview,
 .editor-statusbar {
 	display: none;