Uses vue-masonry-css to display post attachments in a masonry style

Signed-off-by: Cyrille Bollu <cyrpub@bollu.be>

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",

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>
+

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({