From 3be4a067f608a8c2fde3804024ade0c18146c04f Mon Sep 17 00:00:00 2001
From: Cyrille Bollu <cyrpub@bollu.be>
Date: Fri, 19 Jul 2019 13:21:20 +0200
Subject: [PATCH] Uses vue-masonry-css to display post attachments in a masonry
 style

Signed-off-by: Cyrille Bollu <cyrpub@bollu.be>
---
 package.json                      |  2 +-
 src/components/PostAttachment.vue | 24 ++++++++++--------------
 src/main.js                       |  2 ++
 3 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index 9d8b1fde..3143e5de 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
 		"test:coverage": "jest --coverage"
 	},
 	"dependencies": {
-		"hooper": "^0.3.1",
+		"vue-masonry-css": "^1.0.3",
 		"linkifyjs": "^2.1.8",
 		"nextcloud-axios": "^0.2.0",
 		"nextcloud-vue": "^0.11.4",
diff --git a/src/components/PostAttachment.vue b/src/components/PostAttachment.vue
index 1f592b23..4a2dacc4 100644
--- a/src/components/PostAttachment.vue
+++ b/src/components/PostAttachment.vue
@@ -1,21 +1,16 @@
 <template>
-	<hooper>
-		<slide v-for="(slide,idx) in attachments" :key="slide.id" :index="idx">
-			<img :src="OC.generateUrl('/apps/social/document/get?id=' + slide.id)" />
-		</slide>
-	</hooper>
+	<masonry>
+		<div v-for="(item,idx) in attachments" :key="idx">
+			<img :src="OC.generateUrl('/apps/social/document/get/resized?id=' + item.id)" />
+		</div>
+	</masonry>
 </template>
 
 <script>
 
-import { Hooper, Slide } from 'hooper';
-import 'hooper/dist/hooper.css';
-
 export default {
 	name: 'PostAttachment',
 	components: {
-		Hooper,
-		Slide
 	},
 	mixins: [],
 	props: {
@@ -35,8 +30,9 @@ export default {
 </script>
 
 <style scoped lang="scss">
-	.post-attachment {
-		display: flex;
-		flex-grow: 1;
-	}
+       .post-attachment {
+               display: flex;
+               flex-grow: 1;
+       }
 </style>
+
diff --git a/src/main.js b/src/main.js
index cc235656..1cbcd78c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -30,6 +30,7 @@ import vuetwemoji from 'vue-twemoji'
 import contenteditableDirective from 'vue-contenteditable-directive'
 import ClickOutside from 'vue-click-outside'
 import VTooltip from 'nextcloud-vue/dist/Directives/Tooltip'
+import VueMasonry from 'vue-masonry-css'
 
 sync(store, router)
 
@@ -56,6 +57,7 @@ Vue.use(vuetwemoji, {
 	className: 'emoji', // custom className for image output
 	size: 'twemoji' // image size
 })
+Vue.use(VueMasonry);
 
 /* eslint-disable-next-line no-new */
 new Vue({