Set up frontend/backend to add imageAspectRatio

- on create and update

backend/src/schema/resolvers/posts.js

@@ -121,7 +121,6 @@ export default {
       } finally {
         session.close()
       }
-
       return post
     },
     UpdatePost: async (_parent, params, context, _resolveInfo) => {
@@ -297,7 +296,15 @@ export default {
   },
   Post: {
     ...Resolver('Post', {
-      undefinedToNull: ['activityId', 'objectId', 'image', 'language', 'pinnedAt', 'pinned', 'teaserImageHeight'],
+      undefinedToNull: [
+        'activityId',
+        'objectId',
+        'image',
+        'language',
+        'pinnedAt',
+        'pinned',
+        'imageAspectRatio',
+      ],
       hasMany: {
         tags: '-[:TAGGED]->(related:Tag)',
         categories: '-[:CATEGORIZED]->(related:Category)',

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

@@ -118,7 +118,7 @@ type Post {
   contentExcerpt: String
   image: String
   imageUpload: Upload
-  teaserImageHeight: String
+  imageAspectRatio: Float
   visibility: Visibility
   deleted: Boolean
   disabled: Boolean
@@ -183,6 +183,7 @@ type Mutation {
     language: String
     categoryIds: [ID]
     contentExcerpt: String
+    imageAspectRatio: Float
   ): Post
   UpdatePost(
     id: ID!
@@ -195,7 +196,7 @@ type Mutation {
     visibility: Visibility
     language: String
     categoryIds: [ID]
-    teaserImageHeight: String
+    imageAspectRatio: Float
   ): Post
   DeletePost(id: ID!): Post
   AddPostEmotions(to: _PostInput!, data: _EMOTEDInput!): EMOTED
@@ -220,6 +221,7 @@ type Query {
     offset: Int
     orderBy: [_PostOrdering]
     filter: _PostFilter
+    imageAspectRatio: Float
   ): [Post]
   PostsEmotionsCountByEmotion(postId: ID!, data: _EMOTEDInput!): Int!
   PostsEmotionsByCurrentUser(postId: ID!): [String]

webapp/components/ContributionForm/ContributionForm.vue

@@ -7,7 +7,11 @@
     @submit="submit"
   >
     <template slot-scope="{ errors }">
-      <hc-teaser-image :contribution="contribution" @addTeaserImage="addTeaserImage" @addTeaserImageHeight="addTeaserImageHeight">
+      <hc-teaser-image
+        :contribution="contribution"
+        @addTeaserImage="addTeaserImage"
+        @addImageAspectRatio="addImageAspectRatio"
+      >
         <img
           v-if="contribution"
           class="contribution-image"
@@ -128,6 +132,7 @@ export default {
       title: '',
       content: '',
       teaserImage: null,
+      imageAspectRatio: null,
       image: null,
       language: null,
       categoryIds: [],
@@ -190,12 +195,10 @@ export default {
         content,
         image,
         teaserImage,
-        teaserImageHeight,
+        imageAspectRatio,
         categoryIds,
       } = this.form
       this.loading = true
-      console.log('file', teaserImage)
-      console.log('imageHeight', typeof teaserImageHeight)
       this.$apollo
         .mutate({
           mutation: this.id ? PostMutations().UpdatePost : PostMutations().CreatePost,
@@ -207,7 +210,7 @@ export default {
             language,
             image,
             imageUpload: teaserImage,
-            teaserImageHeight
+            imageAspectRatio,
           },
         })
         .then(({ data }) => {
@@ -231,9 +234,8 @@ export default {
     addTeaserImage(file) {
       this.form.teaserImage = file
     },
-    addTeaserImageHeight(height) {
+    addImageAspectRatio(aspectRatio) {
-      console.log(height.toString())
+      this.form.imageAspectRatio = aspectRatio
-      this.form.teaserImageHeight = height.toString()
     },
     categoryIds(categories) {
       return categories.map(c => c.id)

webapp/components/Editor/ContextMenu.vue

@@ -22,24 +22,11 @@ export default {
         content: content,
         duration: [400, 200],
         inertia: true,
-<<<<<<< Updated upstream
         interactive: true,
-=======
-        // interactive: true,
->>>>>>> Stashed changes
         placement,
         showOnInit,
         theme: 'human-connection',
         trigger,
-<<<<<<< Updated upstream
-=======
-        onCreate(instance) {
-          instance.popperInstance.reference = {
-            ...virtualNode,
-            // popperOptions: { positionFixed: true },
-          }
-        },
->>>>>>> Stashed changes
         onMount(instance) {
           const input = instance.popper.querySelector('input')
 
@@ -92,7 +79,6 @@ export default {
   .tippy-roundarrow {
     fill: $color-primary;
   }
-<<<<<<< Updated upstream
   .tippy-popper[x-placement^='top'] & .tippy-arrow {
     border-top-color: $color-primary;
   }
@@ -105,10 +91,5 @@ export default {
   .tippy-popper[x-placement^='right'] & .tippy-arrow {
     border-right-color: $color-primary;
   }
-=======
-  // .tippy-popper {
-  //   pointer-events: auto;
-  // }
->>>>>>> Stashed changes
 }
 </style>

webapp/components/PostCard/PostCard.vue

@@ -4,7 +4,7 @@
     :image="post.image | proxyApiUrl"
     :class="{ 'post-card': true, 'disabled-content': post.disabled, 'post--pinned': isPinned }"
   >
-    <ds-placeholder v-if="showPlaceholder && post.teaserImageHeight" class="placeholder-image">
+    <ds-placeholder v-if="showPlaceholder && post.imageAspectRatio" class="placeholder-image">
       I'm a placeholder
     </ds-placeholder>
     <!-- Post Link Target -->
@@ -104,7 +104,7 @@ export default {
     showPlaceholder: {
       type: Boolean,
       default: true,
-    }
+    },
   },
   data() {
     return {
@@ -135,10 +135,10 @@ export default {
     },
     cssVars() {
       return {
-        '--height': this.post.teaserImageHeight + 'px'
+        '--height': this.post.imageAspectRatio + 'px',
-      }
       }
     },
+  },
   methods: {
     async deletePostCallback() {
       try {
@@ -158,9 +158,8 @@ export default {
       this.$emit('unpinPost', post)
     },
     hidePlaceholder() {
-      console.log('this has been called')
       this.imageLoading = false
-    }
+    },
   },
 }
 </script>
@@ -207,6 +206,6 @@ export default {
 }
 
 .placeholder-image {
-  height: var(--height)
+  height: var(--height);
 }
 </style>

webapp/components/TeaserImage/TeaserImage.vue

@@ -9,7 +9,7 @@
     @vdropzone-thumbnail="transformImage"
   >
     <div class="crop-overlay" ref="cropperOverlay" v-show="showCropper">
-      <ds-button @click="cropImage" class="crop-confirm" primary>
+      <ds-button @click.native="cropImage" class="crop-confirm" primary>
         {{ $t('contribution.teaserImage.cropperConfirm') }}
       </ds-button>
       <ds-button @click="cancelCrop" class="crop-cancel" icon="close"></ds-button>
@@ -111,15 +111,13 @@ export default {
     cropImage() {
       this.showCropper = false
       const canvas = this.cropper.getCroppedCanvas()
-      console.log('canvas', canvas)
       canvas.toBlob(blob => {
+        const imageAspectRatio = canvas.width / canvas.height
         this.setupPreview(canvas)
         this.removeCropper()
-        console.log(blob)
         const croppedImageFile = new File([blob], this.file.name, { type: this.file.type })
-        console.log('croppedImageFile', croppedImageFile)
         this.$emit('addTeaserImage', croppedImageFile)
-        this.$emit('addTeaserImageHeight', canvas.height)
+        this.$emit('addImageAspectRatio', imageAspectRatio)
       })
     },
     setupPreview(canvas) {

webapp/graphql/Fragments.js

@@ -64,7 +64,7 @@ export const postFragment = lang => gql`
       role
     }
     pinnedAt
-    teaserImageHeight
+    imageAspectRatio
   }
 `
 export const commentFragment = lang => gql`

webapp/graphql/PostMutations.js

@@ -9,6 +9,7 @@ export default () => {
         $language: String
         $categoryIds: [ID]
         $imageUpload: Upload
+        $imageAspectRatio: Float
       ) {
         CreatePost(
           title: $title
@@ -16,6 +17,7 @@ export default () => {
           language: $language
           categoryIds: $categoryIds
           imageUpload: $imageUpload
+          imageAspectRatio: $imageAspectRatio
         ) {
           title
           slug
@@ -34,7 +36,7 @@ export default () => {
         $imageUpload: Upload
         $categoryIds: [ID]
         $image: String
-        $teaserImageHeight: String
+        $imageAspectRatio: Float
       ) {
         UpdatePost(
           id: $id
@@ -44,7 +46,7 @@ export default () => {
           imageUpload: $imageUpload
           categoryIds: $categoryIds
           image: $image
-          teaserImageHeight: $teaserImageHeight
+          imageAspectRatio: $imageAspectRatio
         ) {
           id
           title
@@ -57,7 +59,7 @@ export default () => {
             name
             role
           }
-          teaserImageHeight
+          imageAspectRatio
         }
       }
     `,

webapp/pages/index.vue

@@ -208,7 +208,7 @@ export default {
     },
     hidePlaceholder() {
       this.showPlaceholder = false
-    }
+    },
   },
   apollo: {
     Post: {