fix reviews ContributionForm, ContributionForm.spec

webapp/components/ContributionForm/ContributionForm.spec.js

@@ -243,15 +243,7 @@ describe('ContributionForm.vue', () => {
           expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
         })
 
-        describe('questionable images should be blurred', () => {
+         
-          it('questionable images unset be blurred', async () => {
-            expectedParams.variables.imageUpload = imageUpload
-            wrapper.find(TeaserImage).vm.$emit('addTeaserImage', imageUpload)
-            expect(wrapper.find('.images-set-blur').exists()).toBe(false)
-            await wrapper.find('input[type="checkbox"]').trigger('click')
-            expect(wrapper.find('.images-set-blur').exists()).toBe(true)
-          })
-        })
 
         it("pushes the user to the post's page", async () => {
           wrapper.find('form').trigger('submit')

webapp/components/ContributionForm/ContributionForm.vue

@@ -19,11 +19,11 @@
           :src="contribution.image | proxyApiUrl"
         />
       </hc-teaser-image>
-      <ds-text align="right" class="blurBox">
+      <ds-text align="right" class="blur-box">
         <div v-show="blurImage">
           <img
             :src="contribution.image | proxyApiUrl"
-            class="blurImgPreview"
+            class="blur-img-preview"
             @click.prevent="unBlur"
           />
           <ds-button class="bluricon-post" icon="ban" primary @click.prevent="unBlur"></ds-button>
@@ -32,17 +32,17 @@
       <div style="clear: both" />
       <ds-card>
         <ds-text align="right">
-          <label for="blur_img">{{ $t('contribution.shockingPicture') }}</label>
+          <label for="blur-img">{{ $t('contribution.shockingPicture') }}</label>
           <input
             name="checkbox"
             class="blurImageCheckbox"
             type="checkbox"
-            id="blur_img"
+            id="blur-img"
             v-model="blurImage"
             @change="form.checkbox = blurImage"
           />
 
-          <label for="blur_img"><span class=""></span></label>
+          <label for="blur-img"><span class=""></span></label>
           <div>
             <a href="https://faq.human-connection.org/" target="_blank">
               <small>
@@ -340,13 +340,13 @@ export default {
   -o-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
-.blurBox {
+.blur-box {
   text-align: right;
   position: relative;
   top: -70px;
   float: right;
 }
-.blurImgPreview {
+.blur-img-preview {
   width: 100px;
 }
 

webapp/pages/post/_id/_slug/index.vue

@@ -7,14 +7,14 @@
       :class="{
         'post-card': true,
         'disabled-content': post.disabled,
-        'images-set-blur': post.blurImage,
+        'images-set-blur': blurred,
       }"
     >
       <ds-text v-show="post.blurImage" align="right" class="blurBox">
         <img
-          v-show="!blurred"
+          v-show="blurred"
           :src="post.image | proxyApiUrl"
-          class="blurImgPreview"
+          class="blur-img-preview"
           @click.prevent="unBlur"
         />
         <ds-button
@@ -22,14 +22,14 @@
           class="bluricon-post"
           icon="eye-slash"
           primary
-          @click.prevent="setBlur"
+          @click.prevent="blurred = false"
         ></ds-button>
         <ds-button
           v-else
           class="bluricon-post"
           icon="eye"
           primary
-          @click.prevent="unBlur"
+          @click.prevent="blurred = true"
         ></ds-button>
       </ds-text>
       <div style="clear: both" />
@@ -158,6 +158,7 @@ export default {
     Post(post) {
       this.post = post[0] || {}
       this.title = this.post.title
+      this.blurred = this.post.blurImage
     },
   },
   mounted() {
@@ -177,18 +178,6 @@ export default {
     },
   },
   methods: {
-    unBlur() {
-      if (this.post.blurImage) {
-        this.post.blurImage = false
-        this.blurred = true
-      }
-    },
-    setBlur() {
-      if (!this.post.blurImage) {
-        this.post.blurImage = true
-        this.blurred = false
-      }
-    },
     isAuthor(id) {
       return this.$store.getters['auth/user'].id === id
     },
@@ -265,7 +254,7 @@ export default {
   top: -70px;
   float: right;
 }
-.blurImgPreview {
+.blur-img-preview {
   width: 100px;
 }