Style channel messages a bit differently

src/assets/css/channel.scss

@@ -0,0 +1,24 @@
+.chat-root.channel {
+    background-color: #f2f2f2;
+    .chat-content {
+        width: 100%;
+        max-width: 700px;
+        align-self: center;
+        background-color: white;
+    }
+
+    .messageOut, .messageIn {
+        display: flex;
+        flex-wrap: wrap;
+        .senderAndTime {
+            flex: 0 0 100%;
+        }
+        .content {
+            flex: 1 1 auto;
+        }
+        .bubble {
+            width: 100%;
+            max-width: 100%;
+        }
+    }
+}

src/assets/css/chat.scss

@@ -2,6 +2,7 @@
 @import "@/assets/css/main.scss";
 @import "@/assets/css/vendors/v-emoji-picker";
 @import "@/assets/css/filedrop.scss";
+@import "@/assets/css/channel.scss";
 
 $admin-bg: black;
 $admin-fg: white;

src/components/Chat.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="chat-root fill-height d-flex flex-column" :style="chatContainerStyle">
+  <div :class="{'chat-root': true, 'fill-height': true, 'd-flex': true, 'flex-column': true, 'channel': roomDisplayType == 'im.keanu.room_type_channel'}" :style="chatContainerStyle">
     <ChatHeaderPrivate class="chat-header flex-grow-0 flex-shrink-0"
       v-on:header-click="onHeaderClick"
       v-on:view-room-details="viewRoomDetails"
@@ -853,7 +853,7 @@ export default {
               this.onRoomNotJoined();
             } else {
               if (this.room) {
-                this.onRoomJoined(this.readMarker);
+                this.onRoomJoined(this.roomDisplayType == ROOM_TYPE_CHANNEL ? null : this.readMarker);
               } else {
                 this.waitingForRoomObject = true;
                 return; // no room, wait for it (we know we are joined so need to wait for sync to complete)
@@ -870,7 +870,7 @@ export default {
       // Were we waiting?
       if (this.room && this.room.roomId == this.roomId && this.waitingForRoomObject) {
         this.waitingForRoomObject = false;
-        this.onRoomJoined(this.readMarker);
+        this.onRoomJoined(this.roomDisplayType == ROOM_TYPE_CHANNEL ? null : this.readMarker);
       }
     },
     showMessageOperations(show) {
@@ -979,6 +979,8 @@ export default {
         this.newlyJoinedRoom = joinEvent.getLocalAge() < 1 * 60000 /* 1 minute */;
       }
 
+      this.reverseOrder = (this.room && this.roomDisplayType == ROOM_TYPE_CHANNEL);
+
       // Listen to events
       this.$matrix.on("Room.timeline", this.onEvent);
       this.$matrix.on("RoomMember.typing", this.onUserTyping);

src/components/chatMixin.js

@@ -1,4 +1,4 @@
-import util, { STATE_EVENT_ROOM_DELETION_NOTICE } from "../plugins/utils";
+import util, { ROOM_TYPE_CHANNEL, STATE_EVENT_ROOM_DELETION_NOTICE } from "../plugins/utils";
 import MessageIncomingText from "./messages/MessageIncomingText";
 import MessageIncomingFile from "./messages/MessageIncomingFile";
 import MessageIncomingImage from "./messages/MessageIncomingImage.vue";
@@ -54,9 +54,10 @@ import RoomEncrypted from "./messages/RoomEncrypted.vue";
 import RoomDeletionNotice from "./messages/RoomDeletionNotice.vue";
 import DebugEvent from "./messages/DebugEvent.vue";
 import roomDisplayOptionsMixin from "./roomDisplayOptionsMixin";
+import roomTypeMixin from "./roomTypeMixin";
 
 export default {
-  mixins: [ roomDisplayOptionsMixin ],
+  mixins: [ roomDisplayOptionsMixin, roomTypeMixin ],
   components: {
     ChatHeader,
     MessageIncomingText,
@@ -125,8 +126,10 @@ export default {
     },
 
     componentForEvent(event, isForExport = false) {
+      const isChannel = this.roomDisplayType === ROOM_TYPE_CHANNEL;
       switch (event.getType()) {
         case "m.room.member":
+          if (isChannel) break;
           if (event.getContent().membership == "join") {
             if (event.getPrevContent() && event.getPrevContent().membership == "join") {
               // We we already joined, so this must be a display name and/or avatar update!

src/components/messages/MessageIncoming.vue

@@ -14,7 +14,7 @@
       }}</span>
     </v-avatar>
     <!-- SLOT FOR CONTENT -->
-    <span ref="messageInOutRef">
+    <span ref="messageInOutRef" class="content">
       <slot></slot>
     </span>
     <div class="op-button" ref="opbutton" v-if="!event.isRedacted()">

src/components/messages/MessageOutgoing.vue

@@ -14,7 +14,7 @@
       </v-btn>
     </div>
     <!-- SLOT FOR CONTENT -->
-    <span ref="messageInOutRef">
+    <span ref="messageInOutRef" class="content">
       <slot></slot>
     </span>
     <v-avatar