From f7aeb3c61673a706fcc1b82af96630b0c6403d1e Mon Sep 17 00:00:00 2001
From: ogerly <landmatrosen@googlemail.com>
Date: Mon, 25 Nov 2019 11:23:57 +0100
Subject: [PATCH] added checkbox for blure Images in contribution form

---
 .../ContributionForm/ContributionForm.spec.js |   8 ++
 .../ContributionForm/ContributionForm.vue     |  69 ++++++++++++++++++
 .../checkbox-set-blank-checked-line.png       | Bin 0 -> 1742 bytes
 3 files changed, 77 insertions(+)
 create mode 100644 webapp/static/img/checkbox/checkbox-set-blank-checked-line.png

diff --git a/webapp/components/ContributionForm/ContributionForm.spec.js b/webapp/components/ContributionForm/ContributionForm.spec.js
index 52f77b3f2..185e9ad56 100644
--- a/webapp/components/ContributionForm/ContributionForm.spec.js
+++ b/webapp/components/ContributionForm/ContributionForm.spec.js
@@ -245,6 +245,14 @@ describe('ContributionForm.vue', () => {
           expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
         })
 
+        describe('questionable images should be blurred', () => { 
+     
+          it('questionable images unset be blurred', async () => {
+            await  wrapper.find('input[type="checkbox"]').trigger('click')
+            expect(wrapper.find('input[type="checkbox"]').exists()).toBe(true)
+          })
+        })
+
         it("pushes the user to the post's page", async () => {
           wrapper.find('form').trigger('submit')
           await mocks.$apollo.mutate
diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue
index 734e3be81..aa74b498c 100644
--- a/webapp/components/ContributionForm/ContributionForm.vue
+++ b/webapp/components/ContributionForm/ContributionForm.vue
@@ -79,6 +79,28 @@
           </ds-chip>
         </ds-text>
         <ds-space />
+        <ds-text align="right">
+          <label for="bad-img">Anstösiger Inhalt</label>
+          <input
+            id="bad-img"
+            type="checkbox"
+            name="checkbox"
+            :checked="checkedBlur"
+            @change="checkedChange"
+          />
+          <label for="bad-img">
+            <span class=""></span>
+          </label>
+          <div>
+            <a href="https://faq.human-connection.org/" target="_blank">
+              <small>
+                Bilder werden Verschwommen dargestellt
+                <ds-icon name="question-circle" />
+              </small>
+            </a>
+          </div>
+        </ds-text>
+        <ds-space />
         <div slot="footer" style="text-align: right">
           <ds-button
             class="cancel-button"
@@ -172,6 +194,9 @@ export default {
       users: [],
       contentMin: 3,
       hashtags: [],
+      checkedBlur: false,
+      elem: null,
+       elem1: null,
     }
   },
   computed: {
@@ -183,6 +208,23 @@ export default {
     }),
   },
   methods: {
+    checkedChange() {
+      this.elem  = this.$el.querySelector('img')
+      this.elem1 = this.$el.querySelector('img.thumbnail-preview')
+      if (this.checkedBlur) {
+        this.elem.classList.remove('img-blur-in')
+        this.checkedBlur = false
+      } else {
+        if (this.elem != null) {
+             this.elem.classList.add('img-blur-in') 
+        }
+         if (this.elem1 != null) {
+             this.elem1.classList.add('img-blur-in')
+        }
+     
+        this.checkedBlur = true
+      }
+    },
     submit() {
       const {
         language: { value: language },
@@ -289,4 +331,31 @@ export default {
     cursor: default;
   }
 }
+input[type='checkbox'] {
+  display: none;
+}
+input[type='checkbox'] + label span {
+  display: inline-block;
+  width: 29px;
+  height: 27px;
+  vertical-align: middle;
+  background: url(../../static/img/checkbox/checkbox-set-blank-checked-line.png) left top no-repeat;
+  cursor: pointer;
+}
+input[type='checkbox']:checked + label span {
+  background: url(../../static/img/checkbox/checkbox-set-blank-checked-line.png) -30px top no-repeat;
+}
+
+.img-blur-in {
+  -webkit-filter: blur(32px);
+  -moz-filter: blur(32px);
+  -ms-filter: blur(32px);
+  -o-filter: blur(32px);
+  filter: blur(32px);
+  -webkit-transition: all ease 0.2s;
+  -moz-transition: all ease 0.2s;
+  -ms-transition: all ease 0.2s;
+  -o-transition: all ease 0.2s;
+  transition: all ease 0.2s;
+}
 </style>
diff --git a/webapp/static/img/checkbox/checkbox-set-blank-checked-line.png b/webapp/static/img/checkbox/checkbox-set-blank-checked-line.png
new file mode 100644
index 0000000000000000000000000000000000000000..5411a44368d8dd45fc4fc6efb4883ac0a058f96a
GIT binary patch
literal 1742
zcmeHG`)kc%7=LDEtc>4?c0`HNEPGp0b{fVk9GaCa*Ra?9(jm98<<{Dw!-Ss3Bz`cL
z9l6%TC_lJ7R@iYlcA+rRvBb{YAD{R87x>8!^49tGea`bdpXc-WJny$+dLXw~a{pu^
z>XkPsC!Z)`CEm~WNW^nWc55G^M4CROU;;uSLu84VNQl%$#*ndOn2eB7m$ZhgCCg-m
zth!n@#Fm(eg;-sy7!pguBtoJ<A~mFzlu3mY0k8oLEHtB9-5htUF>H(&qi!rBYmH@N
z#aMMLkYsC^4U1uQq);o?2pbV23XW(sYK^i{F^Z{R4KR=fOVC0NgMkfbV4+!^AQ$7X
zwPLM0eHe>~*|JzxCl@S`6t*H(6zV|=wN}}xScN?J0h;KB9ncRFPzcrl18J~CDR^Ko
zumKG$b<VjoVjN*sXC(AtEFuvWg|Cnc7D%!RD}030FaW$z4x^zKR>BX^L^tdJCkTc@
zum%`NqZ72i1A~DLXmu-c)kq`8QEUuGLLbH=5>>ZAZ~cyiw^6rGZ%K}n=et|4XQkul
zx#PC&33ik{4Q}}!EvLYn1ZZ3bYzgK;lQ+t{iGTf3ym?D1J`P%!AD96e|K#~oQwQAP
zWvK1BW>V2wqLf?imvCTs$^fEnOY(BY7Hm8mi;fLE&!+4L%|p9BZrw7lt^9pc#j(uF
zgpw1#Mtp0n+}M3*>ELR98K2l550`DzyT{`hE%WZ*`@Xx_-|xu5j?!WC3YVuRWp;Eu
z|Lk8_pSq{@weQ^Hn$<~1n>y19{be7QuB)%jdQnv3@Aou<j+BP-fwRNc#?+n8dKHXy
z?yEnU^)?uL_w`Fb$?Zt=)A~8FL4B8p!!`ROzTnyT=0~k>PG!AX6e}(nx%JGZCSR~F
zem*VI-Znh-Qu*N@E2f1y->fRCjqkm%p(^)7s5)L9-O=bD@}#+|rL;0SzEP)U#JYZ>
z?Rq?;<1$_r^geenwz^^Nm4=_ARxBR%=yc1o`#0Y{m~|uMYp=>p3Y7(Xy{DxenVj;h
zvH8%<tE1aO!5UpNtaeWR)f4OUVpY*0mnJVe)HLG%AAjh_!}L{=%!<#u!XbBQ^Ckpx
J>c-9A{u_Uxgg*cP

literal 0
HcmV?d00001