blur the image ok.

backend/src/models/Post.js

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

backend/src/schema/resolvers/posts.js

@@ -297,7 +297,15 @@ export default {
   },
   Post: {
     ...Resolver('Post', {
-      undefinedToNull: ['activityId', 'objectId', 'image', 'language', 'pinnedAt', 'pinned'],
+      undefinedToNull: [
+        'activityId',
+        'objectId',
+        'image',
+        'language',
+        'pinnedAt',
+        'pinned',
+        'checkedBlur',
+      ],
       hasMany: {
         tags: '-[:TAGGED]->(related:Tag)',
         categories: '-[:CATEGORIZED]->(related:Category)',

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

@@ -82,6 +82,7 @@ input _PostFilter {
   emotions_none: _PostEMOTEDFilter
   emotions_single: _PostEMOTEDFilter
   emotions_every: _PostEMOTEDFilter
+  checkedBlur: Boolean
 }
 
 enum _PostOrdering {
@@ -127,6 +128,7 @@ type Post {
   createdAt: String
   updatedAt: String
   language: String
+  checkedBlur: Boolean
   pinnedAt: String @cypher(
       statement: "MATCH (this)<-[pinned:PINNED]-(:User) WHERE NOT this.deleted = true AND NOT this.disabled = true RETURN pinned.createdAt"
     )
@@ -140,7 +142,6 @@ type Post {
       LIMIT 10
       """
     )
-
   tags: [Tag]! @relation(name: "TAGGED", direction: "OUT")
   categories: [Category]! @relation(name: "CATEGORIZED", direction: "OUT")
 
@@ -183,6 +184,7 @@ type Mutation {
     language: String
     categoryIds: [ID]
     contentExcerpt: String
+    checkedBlur: Boolean
   ): Post
   UpdatePost(
     id: ID!
@@ -195,6 +197,7 @@ type Mutation {
     visibility: Visibility
     language: String
     categoryIds: [ID]
+    checkedBlur: Boolean
   ): Post
   DeletePost(id: ID!): Post
   AddPostEmotions(to: _PostInput!, data: _EMOTEDInput!): EMOTED
@@ -215,6 +218,7 @@ type Query {
     createdAt: String
     updatedAt: String
     language: String
+    checkedBlur: Boolean
     first: Int
     offset: Int
     orderBy: [_PostOrdering]

backend/src/seed/seed-db.js

@@ -352,6 +352,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
         language: sample(languages),
         image: faker.image.unsplash.food(),
         categoryIds: ['cat16'],
+        checkedBlur: true,
       }),
       factory.create('Post', {
         author: bobDerBaumeister,
@@ -359,24 +360,28 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
         language: sample(languages),
         image: faker.image.unsplash.technology(),
         categoryIds: ['cat1'],
+        checkedBlur: false,
       }),
       factory.create('Post', {
         author: huey,
         id: 'p3',
         language: sample(languages),
         categoryIds: ['cat3'],
+        checkedBlur: false,
       }),
       factory.create('Post', {
         author: dewey,
         id: 'p4',
         language: sample(languages),
         categoryIds: ['cat4'],
+        checkedBlur: false,
       }),
       factory.create('Post', {
         author: louie,
         id: 'p5',
         language: sample(languages),
         categoryIds: ['cat5'],
+        checkedBlur: false,
       }),
       factory.create('Post', {
         authorId: 'u1',
@@ -384,17 +389,20 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
         language: sample(languages),
         image: faker.image.unsplash.buildings(),
         categoryIds: ['cat6'],
+        checkedBlur: false,
       }),
       factory.create('Post', {
         author: huey,
         id: 'p9',
         language: sample(languages),
         categoryIds: ['cat9'],
+        checkedBlur: false,
       }),
       factory.create('Post', {
         author: dewey,
         id: 'p10',
         categoryIds: ['cat10'],
+        checkedBlur: true,
       }),
       factory.create('Post', {
         author: louie,
@@ -402,12 +410,14 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
         language: sample(languages),
         image: faker.image.unsplash.people(),
         categoryIds: ['cat11'],
+        checkedBlur: false,
       }),
       factory.create('Post', {
         author: bobDerBaumeister,
         id: 'p13',
         language: sample(languages),
         categoryIds: ['cat13'],
+        checkedBlur: false,
       }),
       factory.create('Post', {
         author: jennyRostock,
@@ -415,12 +425,14 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
         language: sample(languages),
         image: faker.image.unsplash.objects(),
         categoryIds: ['cat14'],
+        checkedBlur: false,
       }),
       factory.create('Post', {
         author: huey,
         id: 'p15',
         language: sample(languages),
         categoryIds: ['cat15'],
+        checkedBlur: false,
       }),
     ])
 
@@ -434,8 +446,20 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
     const hashtagAndMention1 =
       'The new physics of <a class="hashtag" data-hashtag-id="QuantenFlussTheorie" href="/?hashtag=QuantenFlussTheorie">#QuantenFlussTheorie</a> can explain <a class="hashtag" data-hashtag-id="QuantumGravity" href="/?hashtag=QuantumGravity">#QuantumGravity</a>! <a class="mention" data-mention-id="u1" href="/profile/u1">@peter-lustig</a> got that already. ;-)'
     const createPostMutation = gql`
-      mutation($id: ID, $title: String!, $content: String!, $categoryIds: [ID]) {
+      mutation(
-        CreatePost(id: $id, title: $title, content: $content, categoryIds: $categoryIds) {
+        $id: ID
+        $title: String!
+        $content: String!
+        $categoryIds: [ID]
+        $checkedBlur: Boolean
+      ) {
+        CreatePost(
+          id: $id
+          title: $title
+          content: $content
+          categoryIds: $categoryIds
+          checkedBlur: $checkedBlur
+        ) {
           id
         }
       }
@@ -449,6 +473,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
           title: `Nature Philosophy Yoga`,
           content: hashtag1,
           categoryIds: ['cat2'],
+          checkedBlur: false,
         },
       }),
       mutate({
@@ -458,6 +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,
         },
       }),
       mutate({
@@ -468,6 +494,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
           title: `Quantum Flow Theory explains Quantum Gravity`,
           content: hashtagAndMention1,
           categoryIds: ['cat8'],
+          checkedBlur: false,
         },
       }),
       mutate({
@@ -477,6 +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,
         },
       }),
     ])

webapp/components/ContributionForm/ContributionForm.spec.js

@@ -245,10 +245,9 @@ describe('ContributionForm.vue', () => {
           expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
         })
 
-        describe('questionable images should be blurred', () => { 
+        describe('questionable images should be blurred', () => {
-     
           it('questionable images unset be blurred', async () => {
-            await  wrapper.find('input[type="checkbox"]').trigger('click')
+            await wrapper.find('input[type="checkbox"]').trigger('click')
             expect(wrapper.find('input[type="checkbox"]').exists()).toBe(true)
           })
         })

webapp/components/ContributionForm/ContributionForm.vue

@@ -15,6 +15,27 @@
         />
       </hc-teaser-image>
       <ds-card>
+        <ds-space />
+        <ds-text align="right">
+          <label for="blur_img">{{ $t('contribution.shockingPicture') }}</label>
+          <input
+            name="checkedBlur"
+            type="checkbox"
+            id="blur_img"
+            :checked="checkedBlur"
+            @change="checkedChange"
+          />
+
+          <label for="blur_img"><span class=""></span></label>
+          <div>
+            <a href="https://faq.human-connection.org/" target="_blank">
+              <small>
+                {{ $t('contribution.shockingPicture-text') }}
+                <ds-icon name="question-circle" />
+              </small>
+            </a>
+          </div>
+        </ds-text>
         <ds-space />
         <client-only>
           <hc-user :user="currentUser" :trunc="35" />
@@ -78,28 +99,7 @@
             <ds-icon name="warning"></ds-icon>
           </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
@@ -153,11 +153,13 @@ export default {
       image: null,
       language: null,
       categoryIds: [],
+      checkedBlur: false,
     }
     let id = null
     let slug = null
     const form = { ...formDefaults }
     if (this.contribution && this.contribution.id) {
+      //  console.log("edit jaaa")
       id = this.contribution.id
       slug = this.contribution.slug
       form.title = this.contribution.title
@@ -168,7 +170,12 @@ export default {
           ? languageOptions.find(o => this.contribution.language === o.value)
           : null
       form.categoryIds = this.categoryIds(this.contribution.categories)
+      form.checkedBlur = this.contribution.checkedBlur
+
+      // console.log(this.contribution.checkedBlur)
+      // console.log(this.contribution)
     }
+
     return {
       form,
       formSchema: {
@@ -186,6 +193,7 @@ export default {
           },
         },
         language: { required: true },
+        checkedBlur: { required: false },
       },
       languageOptions,
       id,
@@ -194,9 +202,13 @@ export default {
       users: [],
       contentMin: 3,
       hashtags: [],
-      checkedBlur: false,
       elem: null,
-       elem1: null,
+      checkedBlur: false,
+    }
+  },
+  created() {
+    if (this.contribution && this.contribution.checkedBlur) {
+      this.checkedChange()
     }
   },
   computed: {
@@ -209,21 +221,29 @@ export default {
   },
   methods: {
     checkedChange() {
-      this.elem  = this.$el.querySelector('img')
+      // console.log( 'checkedChange')
-      this.elem1 = this.$el.querySelector('img.thumbnail-preview')
+      // console.log( 'this.checkedBlur old', this.checkedBlur)
+      // console.log( 'THIS', this.$el)
+      // console.log( 'THIS.form', this.form)
+
+      if (this.$el) {
+        this.elem = this.$el.querySelector('img')
+      } else {
+      }
       if (this.checkedBlur) {
         this.elem.classList.remove('img-blur-in')
         this.checkedBlur = false
+        this.form.checkedBlur = false
+        this.form.checkbox = false
       } else {
         if (this.elem != null) {
-             this.elem.classList.add('img-blur-in') 
+          this.elem.classList.add('img-blur-in')
         }
-         if (this.elem1 != null) {
-             this.elem1.classList.add('img-blur-in')
-        }
-     
         this.checkedBlur = true
+        this.form.checkedBlur = true
+        this.form.checkbox = true
       }
+      //  console.log( 'this.checkedBlur new', this.checkedBlur)
     },
     submit() {
       const {
@@ -246,6 +266,7 @@ export default {
             language,
             image,
             imageUpload: teaserImage,
+            checkedBlur: this.form.checkbox,
           },
         })
         .then(({ data }) => {
@@ -307,6 +328,21 @@ export default {
 }
 </script>
 
+<style lang="scss">
+.img-blur-in .ds-card-image 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;
+}
+</style>
+
 <style lang="scss" scoped>
 .smallTag {
   width: 100%;
@@ -345,17 +381,4 @@ input[type='checkbox'] + label span {
 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>

webapp/components/PostCard/PostCard.vue

@@ -2,8 +2,17 @@
   <ds-card
     :lang="post.language"
     :image="post.image | proxyApiUrl"
-    :class="{ 'post-card': true, 'disabled-content': post.disabled, 'post--pinned': isPinned }"
+    :class="{
+      'post-card': true,
+      'disabled-content': post.disabled,
+      'post--pinned': isPinned,
+      'images-set-blur': post.checkedBlur,
+    }"
   >
+    <ds-text v-show="post.checkedBlur" align="center" class="blurbox">
+      <ds-button class="bluricon" icon="eye-slash" primary></ds-button>
+    </ds-text>
+
     <!-- Post Link Target -->
     <nuxt-link
       class="post-link"
@@ -144,8 +153,35 @@ export default {
 }
 </script>
 
+<style lang="scss">
+.images-set-blur .ds-card-image 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 {
+  padding: 13px 0px;
+  top: 67px;
+  right: 34px;
+  left: 25px;
+  position: absolute;
+  color: floralwhite;
+}
+.bluricon {
+  font-size: xx-large;
+}
+</style>
+
 <style lang="scss" scoped>
-.ds-card-image img {
+.ds-card-image {
   width: 100%;
   max-height: 2000px;
   object-fit: contain;

webapp/components/TeaserImage/TeaserImage.vue

@@ -103,6 +103,7 @@ export default {
       if (contributionImage) contributionImage.remove()
     },
     initCropper() {
+      // console.log(' new Image initCropper')
       this.image = new Image()
       this.image.src = URL.createObjectURL(this.file)
       this.editor.appendChild(this.image)
@@ -119,6 +120,7 @@ export default {
       }, 'image/jpeg')
     },
     setupPreview(canvas) {
+      // console.log(' new Image setupPreview')
       this.image = new Image()
       this.image.src = canvas.toDataURL()
       this.image.classList.add('thumbnail-preview')

webapp/graphql/Fragments.js

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

webapp/graphql/PostMutations.js

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

webapp/locales/de.json

@@ -397,6 +397,7 @@
         "filterALL": "Alle Beiträge anzeigen",
         "success": "Gespeichert!",
         "languageSelectLabel": "Sprache",
+        "languageSelectText": "Sprache wählen",
         "categories": {
             "infoSelectedNoOfMaxCategories": "{chosen} von {max} Kategorien ausgewählt"
         },
@@ -429,8 +430,9 @@
         },
         "teaserImage": {
             "cropperConfirm": "Bestätigen"
-        },
+        },        
-        "languageSelectText": "Sprache wählen"
+        "shockingPicture" : "Anstößiges Bild",
+        "shockingPicture-text" : "Beitragsbild wird Verschwommen dargestellt"
     },
     "comment": {
         "edit": "Kommentar bearbeiten",

webapp/locales/en.json

@@ -644,7 +644,9 @@
     },
     "teaserImage": {
       "cropperConfirm": "Confirm"
-    }
+    },
+    "shockingPicture" : "Shocking Picture",
+    "shockingPicture-text" : "Contribution picture is blurred"
   },
   "code-of-conduct": {
     "subheader": "for the social network of the Human Connection gGmbH",