Delete teaser image

webapp/components/ContributionForm/ContributionForm.vue

@@ -7,6 +7,12 @@
     @submit="submit"
   >
     <template slot-scope="{ errors }">
+      <ds-button
+        @click.prevent="deleteImage"
+        icon="close"
+        v-show="showDeleteButton != ''"
+        class="delete-image"
+      ></ds-button>
       <hc-teaser-image
         :contribution="contribution"
         @addTeaserImage="addTeaserImage"
@@ -175,6 +181,7 @@ export default {
       users: [],
       contentMin: 3,
       hashtags: [],
+      showDeleteButton: this.contribution ? this.contribution.image : false,
     }
   },
   computed: {
@@ -238,6 +245,11 @@ export default {
     categoryIds(categories) {
       return categories.map(c => c.id)
     },
+    deleteImage() {
+      this.form.image = ''
+      this.contribution.image = ''
+      this.showDeleteButton = ''
+    },
   },
   apollo: {
     User: {
@@ -297,4 +309,11 @@ export default {
     cursor: default;
   }
 }
+.delete-image {
+  right: 3px;
+  position: relative;
+  z-index: 1;
+  float: right;
+  top: 42px;
+}
 </style>

webapp/components/TeaserImage/TeaserImage.vue

@@ -12,7 +12,7 @@
       <ds-button @click.stop.prevent="cropImage" class="crop-confirm" primary>
         {{ $t('contribution.teaserImage.cropperConfirm') }}
       </ds-button>
-      <ds-button @click="cancelCrop" class="crop-cancel" icon="close"></ds-button>
+      <ds-button @click.prevent="cancelCrop" class="crop-cancel" icon="close"></ds-button>
     </div>
     <div
       :class="{
@@ -118,6 +118,7 @@ export default {
         const croppedImageFile = new File([blob], this.file.name, { type: this.file.type })
         this.$emit('addTeaserImage', croppedImageFile)
         this.$emit('addImageAspectRatio', imageAspectRatio)
+        this.$emit('showDeleteButton', this.file.name)
       }, 'image/jpeg')
     },
     setupPreview(canvas) {