From 4ce0db1ccdb854a942188c48441a9ef2464eae98 Mon Sep 17 00:00:00 2001
From: Christian Wolf <github@christianwolf.email>
Date: Wed, 18 Nov 2020 17:46:38 +0100
Subject: [PATCH] Added option to check ingredients

Signed-off-by: Christian Wolf <github@christianwolf.email>
---
 src/components/RecipeIngredient.vue | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/components/RecipeIngredient.vue b/src/components/RecipeIngredient.vue
index 214986743..2e9fca348 100644
--- a/src/components/RecipeIngredient.vue
+++ b/src/components/RecipeIngredient.vue
@@ -1,5 +1,8 @@
 <template>
-    <li :class="{ 'header': isHeader() }">{{ displayIngredient }}</li>
+    <li :class="{ 'header': isHeader() }" @click="toggleDone">
+    	<div class="checkmark" :class="{ 'done': isDone }">✔</div>
+    	{{ displayIngredient }}
+	</li>
 </template>
 
 <script>
@@ -9,6 +12,7 @@ export default {
     data () {
         return {
             headerPrefix: "## ",
+            isDone: false,
         }
     },
     computed: {
@@ -25,6 +29,9 @@ export default {
                 return true
             }
             return false
+        },
+        toggleDone: function() {
+        	this.isDone = !this.isDone
         }
     }
 
@@ -43,5 +50,19 @@ li {
         list-style-type: none;
         font-variant: small-caps;
     }
-
+    
+    li > div.checkmark {
+    	display: inline;
+    	visibility: hidden;
+    }
+    li > div.done {
+    	visibility: visible;
+    }
+    
+    li:hover > div.checkmark {
+    	visibility: visible;
+    	opacity: 0.5;
+    	color: var(--color-primary-element);
+    }
+    
 </style>