test review

backend/src/models/Post.js

@@ -45,5 +45,5 @@ module.exports = {
     default: () => new Date().toISOString(),
   },
   language: { type: 'string', allow: [null] },
-  checkedBlur: { type: 'boolean', default: false },
+  blurImage: { type: 'boolean', default: false },
 }

backend/src/schema/resolvers/posts.js

@@ -304,7 +304,7 @@ export default {
         'language',
         'pinnedAt',
         'pinned',
-        'checkedBlur',
+        'blurImage',
       ],
       hasMany: {
         tags: '-[:TAGGED]->(related:Tag)',

backend/src/schema/types/type/Post.gql

@@ -82,7 +82,7 @@ input _PostFilter {
   emotions_none: _PostEMOTEDFilter
   emotions_single: _PostEMOTEDFilter
   emotions_every: _PostEMOTEDFilter
-  checkedBlur: Boolean
+  blurImage: Boolean
 }
 
 enum _PostOrdering {
@@ -128,7 +128,7 @@ type Post {
   createdAt: String
   updatedAt: String
   language: String
-  checkedBlur: Boolean
+  blurImage: Boolean
   pinnedAt: String @cypher(
       statement: "MATCH (this)<-[pinned:PINNED]-(:User) WHERE NOT this.deleted = true AND NOT this.disabled = true RETURN pinned.createdAt"
     )
@@ -184,7 +184,7 @@ type Mutation {
     language: String
     categoryIds: [ID]
     contentExcerpt: String
-    checkedBlur: Boolean
+    blurImage: Boolean
   ): Post
   UpdatePost(
     id: ID!
@@ -197,7 +197,7 @@ type Mutation {
     visibility: Visibility
     language: String
     categoryIds: [ID]
-    checkedBlur: Boolean
+    blurImage: Boolean
   ): Post
   DeletePost(id: ID!): Post
   AddPostEmotions(to: _PostInput!, data: _EMOTEDInput!): EMOTED
@@ -218,7 +218,7 @@ type Query {
     createdAt: String
     updatedAt: String
     language: String
-    checkedBlur: Boolean
+    blurImage: Boolean
     first: Int
     offset: Int
     orderBy: [_PostOrdering]

backend/src/seed/seed-db.js

@@ -352,7 +352,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
         language: sample(languages),
         image: faker.image.unsplash.food(),
         categoryIds: ['cat16'],
-        checkedBlur: true,
+        blurImage: true,
       }),
       factory.create('Post', {
         author: bobDerBaumeister,
@@ -360,28 +360,28 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
         language: sample(languages),
         image: faker.image.unsplash.technology(),
         categoryIds: ['cat1'],
-        checkedBlur: false,
+        blurImage: false,
       }),
       factory.create('Post', {
         author: huey,
         id: 'p3',
         language: sample(languages),
         categoryIds: ['cat3'],
-        checkedBlur: false,
+        blurImage: false,
       }),
       factory.create('Post', {
         author: dewey,
         id: 'p4',
         language: sample(languages),
         categoryIds: ['cat4'],
-        checkedBlur: false,
+        blurImage: false,
       }),
       factory.create('Post', {
         author: louie,
         id: 'p5',
         language: sample(languages),
         categoryIds: ['cat5'],
-        checkedBlur: false,
+        blurImage: false,
       }),
       factory.create('Post', {
         authorId: 'u1',
@@ -389,20 +389,20 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
         language: sample(languages),
         image: faker.image.unsplash.buildings(),
         categoryIds: ['cat6'],
-        checkedBlur: false,
+        blurImage: false,
       }),
       factory.create('Post', {
         author: huey,
         id: 'p9',
         language: sample(languages),
         categoryIds: ['cat9'],
-        checkedBlur: false,
+        blurImage: false,
       }),
       factory.create('Post', {
         author: dewey,
         id: 'p10',
         categoryIds: ['cat10'],
-        checkedBlur: true,
+        blurImage: true,
       }),
       factory.create('Post', {
         author: louie,
@@ -410,14 +410,14 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
         language: sample(languages),
         image: faker.image.unsplash.people(),
         categoryIds: ['cat11'],
-        checkedBlur: false,
+        blurImage: false,
       }),
       factory.create('Post', {
         author: bobDerBaumeister,
         id: 'p13',
         language: sample(languages),
         categoryIds: ['cat13'],
-        checkedBlur: false,
+        blurImage: false,
       }),
       factory.create('Post', {
         author: jennyRostock,
@@ -425,14 +425,14 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
         language: sample(languages),
         image: faker.image.unsplash.objects(),
         categoryIds: ['cat14'],
-        checkedBlur: false,
+        blurImage: false,
       }),
       factory.create('Post', {
         author: huey,
         id: 'p15',
         language: sample(languages),
         categoryIds: ['cat15'],
-        checkedBlur: false,
+        blurImage: false,
       }),
     ])
 
@@ -451,14 +451,14 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
         $title: String!
         $content: String!
         $categoryIds: [ID]
-        $checkedBlur: Boolean
+        $blurImage: Boolean
       ) {
         CreatePost(
           id: $id
           title: $title
           content: $content
           categoryIds: $categoryIds
-          checkedBlur: $checkedBlur
+          blurImage: $blurImage
         ) {
           id
         }
@@ -473,7 +473,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
           title: `Nature Philosophy Yoga`,
           content: hashtag1,
           categoryIds: ['cat2'],
-          checkedBlur: false,
+          blurImage: false,
         },
       }),
       mutate({
@@ -483,7 +483,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
           title: 'This is post #7',
           content: `${mention1} ${faker.lorem.paragraph()}`,
           categoryIds: ['cat7'],
-          checkedBlur: false,
+          blurImage: false,
         },
       }),
       mutate({
@@ -494,7 +494,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
           title: `Quantum Flow Theory explains Quantum Gravity`,
           content: hashtagAndMention1,
           categoryIds: ['cat8'],
-          checkedBlur: false,
+          blurImage: false,
         },
       }),
       mutate({
@@ -504,7 +504,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
           title: 'This is post #12',
           content: `${mention2} ${faker.lorem.paragraph()}`,
           categoryIds: ['cat12'],
-          checkedBlur: false,
+          blurImage: false,
         },
       }),
     ])

webapp/components/ContributionForm/ContributionForm.spec.js

@@ -199,7 +199,7 @@ describe('ContributionForm.vue', () => {
               categoryIds: ['cat12'],
               imageUpload: null,
               image: null,
-              checkedBlur: false,
+              blurImage: false,
             },
           }
           postTitleInput = wrapper.find('.ds-input')
@@ -244,8 +244,10 @@ describe('ContributionForm.vue', () => {
 
         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)
+            expect(wrapper.find('img.img-blur-in').exists()).toBe(true)
           })
         })
 

webapp/components/ContributionForm/ContributionForm.vue

@@ -40,11 +40,12 @@
         <ds-text align="right">
           <label for="blur_img">{{ $t('contribution.shockingPicture') }}</label>
           <input
-            name="checkedBlur"
+            name="blurImage"
+            class="blurImageCheckbox"
             type="checkbox"
             id="blur_img"
             :checked="checkedBlur"
-            @change="checkedChange"
+            @change="(checkedBlur = !checkedBlur), (form.checkbox = !checkedBlur)"
           />
 
           <label for="blur_img"><span class=""></span></label>
@@ -190,7 +191,7 @@ export default {
           ? languageOptions.find(o => this.contribution.language === o.value)
           : null
       form.categoryIds = this.categoryIds(this.contribution.categories)
-      form.checkbox = this.contribution.checkedBlur
+      form.checkbox = this.contribution.blurImage
     }
 
     return {
@@ -225,7 +226,7 @@ export default {
   },
   created() {},
   mounted() {
-    if (this.contribution && this.contribution.checkedBlur === true) {
+    if (this.contribution && this.contribution.blurImage === true) {
       this.checkedChange()
       this.$el.querySelector('.hc-attachments-upload-area-post img').classList.add('img-blur-in')
     }
@@ -246,15 +247,19 @@ export default {
     },
     checkedChange() {
       if (this.$el) {
+        console.log(this.$el.querySelector('.crop-overlay'))
+        console.log(document.querySelector('.crop-overlay'))
         this.elem = this.$el.querySelector('img')
       } else {
       }
       if (this.checkedBlur) {
         this.elem.classList.remove('img-blur-in')
+        document.querySelector('.crop-overlay').classList.remove('images-set-blur')
         this.checkedBlur = false
         this.form.checkbox = false
       } else {
         if (this.elem != null) {
+          
           this.elem.classList.add('img-blur-in')
         }
         this.checkedBlur = true
@@ -282,7 +287,7 @@ export default {
             language,
             image,
             imageUpload: teaserImage,
-            checkedBlur: this.form.checkbox,
+            blurImage: this.form.checkbox,
           },
         })
         .then(({ data }) => {
@@ -357,7 +362,18 @@ export default {
   -o-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
-
+.images-set-blur img{
+  -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;
+}
 .blurBox {
   text-align: right;
   position: relative;

webapp/components/PostCard/PostCard.vue

@@ -6,7 +6,7 @@
       'post-card': true,
       'disabled-content': post.disabled,
       'post--pinned': isPinned,
-      'images-set-blur': post.checkedBlur,
+      'images-set-blur': post.blurImage,
     }"
   >
     <!-- Post Link Target -->

webapp/graphql/Fragments.js

@@ -46,7 +46,7 @@ export const postFragment = lang => gql`
     slug
     image
     language
-    checkedBlur
+    blurImage
     author {
       ...user
     }

webapp/graphql/PostMutations.js

@@ -9,7 +9,7 @@ export default () => {
         $language: String
         $categoryIds: [ID]
         $imageUpload: Upload
-        $checkedBlur: Boolean
+        $blurImage: Boolean
       ) {
         CreatePost(
           title: $title
@@ -17,14 +17,14 @@ export default () => {
           language: $language
           categoryIds: $categoryIds
           imageUpload: $imageUpload
-          checkedBlur: $checkedBlur
+          blurImage: $blurImage
         ) {
           title
           slug
           content
           contentExcerpt
           language
-          checkedBlur
+          blurImage
         }
       }
     `,
@@ -37,7 +37,7 @@ export default () => {
         $imageUpload: Upload
         $categoryIds: [ID]
         $image: String
-        $checkedBlur: Boolean
+        $blurImage: Boolean
       ) {
         UpdatePost(
           id: $id
@@ -47,7 +47,7 @@ export default () => {
           imageUpload: $imageUpload
           categoryIds: $categoryIds
           image: $image
-          checkedBlur: $checkedBlur
+          blurImage: $blurImage
         ) {
           id
           title
@@ -55,7 +55,7 @@ export default () => {
           content
           contentExcerpt
           language
-          checkedBlur
+          blurImage
           pinnedBy {
             id
             name

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

@@ -7,12 +7,12 @@
       :class="{
         'post-card': true,
         'disabled-content': post.disabled,
-        'images-set-blur': post.checkedBlur,
+        'images-set-blur': post.blurImage,
       }"
     >
       <ds-text align="right" class="blurBox">
         <ds-button
-          v-show="post.checkedBlur"
+          v-show="post.blurImage"
           class="bluricon-post"
           icon="eye"
           primary
@@ -26,7 +26,7 @@
           @click.prevent="Blur"
         ></ds-button>
         <img
-          v-show="post.checkedBlur"
+          v-show="post.blurImage"
           :src="post.image | proxyApiUrl"
           class="blurImgPreview"
           @click.prevent="unBlur"
@@ -178,14 +178,14 @@ export default {
   },
   methods: {
     unBlur() {
-      if (this.post.checkedBlur) {
+      if (this.post.blurImage) {
-        this.post.checkedBlur = false
+        this.post.blurImage = false
         this.blur = true
       }
     },
     Blur() {
-      if (!this.post.checkedBlur) {
+      if (!this.post.blurImage) {
-        this.post.checkedBlur = true
+        this.post.blurImage = true
         this.blur = false
       }
     },