Show QR code and creator in room info

src/assets/css/chat.scss

@@ -373,7 +373,7 @@ $admin-fg: white;
 .room-name {
     font-family: 'Poppins', sans-serif;
     font-weight: 700;
-    font-size: 14 * $chat-text-size;
+    font-size: 18 * $chat-text-size;
     text-transform: uppercase;
     color: black;
 }
@@ -448,27 +448,14 @@ $admin-fg: white;
         background-color: #ededed;
         width: 100px !important;
         height: 100px !important;
-        margin-top: 20px;
         margin-bottom: 20px;
         .headline {
-            font-size: 80 * $chat-text-size !important;
+            font-size: 70 * $chat-text-size !important;
         }
     }
     
-    .room-title {
-        margin-bottom: 20px;
-        padding-bottom: 20px;
-        font-family: "Poppins", sans-serif;
-        font-style: normal;
-        font-weight: 800;
-        font-size: 40 * $chat-text-size;
-        line-height: 108.5%;
-        /* or 43px */
-        text-align: center;
-        letter-spacing: -0.8px;
-        
-        color: #000000;
-        overflow-wrap: break-word;
+    .avatar .headline {
+        font-size: 16 * $chat-text-size !important;
     }
 
     .room-name {
@@ -484,11 +471,30 @@ $admin-fg: white;
         font-size: 12 * $chat-text-size;
     }
 
+    .qr {
+        width: 120px;
+        height: 120px;
+        width: min(30vw, 30vh); 
+        height: min(30vw, 30vh); 
+        background-color: #e0e0e0;
+        margin-top: 15px;
+    }
+
     .v-card {
         background-color: white;
         border-radius: 20px;
     }
 
+    .member::after {
+        content: ' ';
+        display: block;
+        margin: 10px 0px;
+        bottom: 0px;
+        height: 1px;
+        background-color: #e1e1e1;
+        width: 100%;
+    }
+
     .show-all {
         color: black;
         font-size: 14 * $chat-text-size;

src/assets/css/main.scss

@@ -10,6 +10,25 @@ $chat-standard-padding-xs: 8px;
 $chat-text-size: 1.0px;
 $chat-button-height: 50px;
 
+.h1 {
+    font-family: 'Poppins', sans-serif;
+    font-weight: 800;
+    font-size: 36 * $chat-text-size;
+    text-align: center;
+    color: black;
+    line-height: 108.5%;
+    letter-spacing: -0.8px;
+    overflow-wrap: break-word;
+}
+
+.h2 {
+    font-family: 'Poppins', sans-serif;
+    font-weight: 700;
+    font-size: 24 * $chat-text-size;
+    text-align: center;
+    color: black;
+}
+
 .v-btn.outlined-button {
     font-family: 'Inter', sans-serif;
     font-weight: 700;

src/components/RoomInfo.vue

@@ -2,9 +2,7 @@
   <div v-if="room" class="room-info">
     <div class="chat-header">
       <v-container fluid>
-        <div class="room-name">
-          Info
-        </div>
+        <div class="room-name">Info</div>
         <v-btn
           text
           class="back"
@@ -17,20 +15,22 @@
       </v-container>
     </div>
 
-    <v-card class="members ma-3" flat>
-        <div class="text-center">
+    <v-card class="members ma-3 pa-3" flat>
+      <div class="text-center">
         <v-avatar class="room-avatar">
           <v-img v-if="roomAvatar" :src="roomAvatar" />
           <span v-else class="white--text headline">{{
             roomName.substring(0, 1).toUpperCase()
           }}</span>
         </v-avatar>
-        </div>
-        <div class="room-title">{{ roomName }}</div>
+        <div class="h1">{{ roomName }}</div>
+        <div class="small">Created by {{ creator }}</div>
+        <canvas class="qr" id="room-qr"></canvas>
+      </div>
     </v-card>
 
     <v-card class="members ma-3" flat>
-      <v-card-title
+      <v-card-title class="h2"
         >Members<v-spacer></v-spacer>
         <div>{{ room.getJoinedMemberCount() }}</div></v-card-title
       >
@@ -41,7 +41,7 @@
           :key="member.userId"
           v-show="showAllMembers || index < 5"
         >
-          <v-avatar class="avatar" size="40" color="grey">
+          <v-avatar class="avatar" size="32" color="grey">
             <img v-if="memberAvatar(member)" :src="memberAvatar(member)" />
             <span v-else class="white--text headline">{{
               member.name.substring(0, 1).toUpperCase()
@@ -57,7 +57,7 @@
     </v-card>
 
     <v-card class="account ma-3" flat>
-      <v-card-title>My Profile</v-card-title>
+      <v-card-title class="h2">My Profile</v-card-title>
       <v-card-text>
         <div v-if="$matrix.currentUser.is_guest">
           <div>
@@ -97,6 +97,7 @@
 
 <script>
 import LeaveRoomDialog from "../components/LeaveRoomDialog";
+import QRCode from "qrcode";
 
 export default {
   name: "RoomInfo",
@@ -117,6 +118,9 @@ export default {
     this.updateMemberCount();
     this.user = this.$matrix.matrixClient.getUser(this.$matrix.currentUserId);
     this.displayName = this.user.displayName;
+
+    // Set QR code
+    this.updateQRCode();
   },
 
   destroyed() {
@@ -128,6 +132,23 @@ export default {
       return this.$matrix.currentRoom;
     },
 
+    creator() {
+      if (this.room) {
+        const createEvent = this.room.currentState.getStateEvents("m.room.create", "");
+        if (!createEvent) {
+          console.warn("Room " + this.roomId + " does not have an m.room.create event");
+          return '';
+        }
+        const creatorId = createEvent.getContent().creator;
+        const member = this.room.getMember(creatorId);
+        if (!member) {
+          return creatorId;
+        }
+        return member.user ? member.user.displayName : member.name;
+      }
+      return "";
+    },
+
     roomName() {
       if (this.room) {
         return this.room.name;
@@ -165,6 +186,8 @@ export default {
       handler(newVal, ignoredOldVal) {
         console.log("RoomInfo: Current room changed");
         this.memberCount = newVal.getJoinedMemberCount();
+
+        this.updateQRCode();
       },
     },
   },
@@ -183,6 +206,24 @@ export default {
       this.memberCount = this.room.getJoinedMemberCount();
     },
 
+    updateQRCode() {
+      var fullUrl = this.$router.getRoomLink(this.room.getCanonicalAlias() || this.room.roomId);
+      var canvas = document.getElementById("room-qr");
+      QRCode.toCanvas(
+        canvas,
+        fullUrl,
+        {
+          type: "image/png",
+          margin: 1,
+          width: canvas.clientWidth,
+        },
+        function (error) {
+          if (error) console.error(error);
+          else console.log("success!");
+        }
+      );
+    },
+
     memberAvatar(member) {
       if (member) {
         return member.getAvatarUrl(

src/router/index.js

@@ -75,4 +75,8 @@ router.beforeEach((to, from, next) => {
   }
 });
 
+router.getRoomLink = function(roomId) {
+  return window.location.origin + "/#/room/" + roomId;
+}
+
 export default router