Experimental "file drop" mode

src/components/messages/MessageIncomingThread.vue

@@ -0,0 +1,114 @@
+<template>
+  <message-incoming v-bind="{ ...$props, ...$attrs }" v-on="$listeners">
+    <div class="bubble">
+      <div class="message">
+        <v-container fluid class="imageCollection">
+          <v-row wrap>
+            <v-col v-for="({ size, item }) in layoutedItems()" :key="item.event.getId()" :cols="size">
+              <v-img :aspect-ratio="16 / 9" :src="item.src" cover />
+            </v-col>
+          </v-row>
+        </v-container>
+        <i v-if="event.isRedacted()" class="deleted-text">
+          <v-icon :color="this.senderIsAdminOrModerator(this.event) ? 'white' : ''" size="small">block</v-icon>
+          {{ $t('message.incoming_message_deleted_text') }}
+        </i>
+        <span v-html="linkify($sanitize(messageText))" v-else />
+        <span class="edit-marker" v-if="event.replacingEventId() && !event.isRedacted()">
+          {{ $t('message.edited') }}
+        </span>
+      </div>
+    </div>
+  </message-incoming>
+</template>
+
+<script>
+import MessageIncoming from "./MessageIncoming.vue";
+import messageMixin from "./messageMixin";
+import util from "../../plugins/utils";
+
+export default {
+  extends: MessageIncoming,
+  components: { MessageIncoming },
+  mixins: [messageMixin],
+  data() {
+    return {
+      items: []
+    }
+  },
+  mounted() {
+    this.items = this.timelineSet.relations.getAllChildEventsForEvent(this.event.getId()).map(e => {
+      let ret = {
+        event: e,
+        src: null,
+      };
+      ret.promise =
+        util
+          .getThumbnail(this.$matrix.matrixClient, e, 100, 100)
+          .then((url) => {
+            ret.src = url;
+          })
+          .catch((err) => {
+            console.log("Failed to fetch thumbnail: ", err);
+          });
+      return ret;
+    })
+  },
+  methods: {
+    layoutedItems() {
+      if (!this.items || this.items.length == 0) { return [] }
+      let array = this.items.slice(0);
+      let rows = []
+      while (array.length > 0) {
+        if (array.length >= 7) {
+          rows.push({ size: 6, item: array[0] });
+          rows.push({ size: 6, item: array[1] });
+          rows.push({ size: 12, item: array[2] });
+          rows.push({ size: 3, item: array[3] });
+          rows.push({ size: 3, item: array[4] });
+          rows.push({ size: 3, item: array[5] });
+          rows.push({ size: 3, item: array[6] });
+          array = array.slice(7);
+        } else if (array.length >= 3) {
+          rows.push({ size: 6, item: array[0] });
+          rows.push({ size: 6, item: array[1] });
+          rows.push({ size: 12, item: array[2] });
+          array = array.slice(3);
+        } else if (array.length >= 2) {
+          rows.push({ size: 6, item: array[0] });
+          rows.push({ size: 6, item: array[1] });
+          array = array.slice(2);
+        } else {
+          rows.push({ size: 12, item: array[0] });
+          array = array.slice(1);
+        }
+      }
+      return rows
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/css/chat.scss";
+</style>
+
+<style lang="scss" scoped>
+
+.bubble {
+  width: 100%;
+}
+
+.imageCollection {
+  border-radius: 15px;
+  padding: 0;
+  overflow: hidden;
+  .row {
+    margin: -4px; // Compensate for column padding, so the border-radius above looks round!
+    padding: 0;
+  }
+  .col {
+    padding: 2px;
+  }
+}
+</style>