Add QR code next to DM link

src/components/CopyLink.vue

@@ -1,11 +1,17 @@
 <template>
+<div>
   <v-expand-transition>
     <v-card class="ma-3" v-show="locationLink" flat>
       <v-container>
         <slot/>
         <v-row cols="12" class="qr-container ma-3">
-          <v-col cols="auto" v-if="$slots.qrCode">
-            <slot name="qrCode"/>
+          <v-col cols="auto">
+            <canvas
+              @click.stop="showFullScreenQR = true"
+              ref="roomQr"
+              class="qr"
+              id="room-qr"
+            ></canvas>
           </v-col>
           <v-col align-self="center" class="public-link">
             <div class="link">{{ locationLink }}</div>
@@ -15,55 +21,93 @@
           <v-col align="center" class="mt-0 pt-0">
             <v-btn
               id="btn-copy-room-link"
-              :color="publicRoomLinkCopied ? '#DEE6FF' : 'black'"
+              :color="locationLinkCopied ? '#DEE6FF' : 'black'"
               depressed
               @click.stop="copyRoomLink"
-              :class="{'filled-button' : true, 'link-copied-in-place' : publicRoomLinkCopied}"
-              >{{ $t(`room_info.${publicRoomLinkCopied ? 'link_copied' : i18nCopyLinkKey}`) }}</v-btn
+              :class="{'filled-button' : true, 'link-copied-in-place' : locationLinkCopied}"
+              >{{ $t(`room_info.${locationLinkCopied ? 'link_copied' : i18nCopyLinkKey}`) }}</v-btn
             >
           </v-col>
         </v-row>
       </v-container>
     </v-card>
   </v-expand-transition>
+  <QRCodePopup :show="showFullScreenQR" :message="locationLink" @close="showFullScreenQR = false" />
+</div>
 </template>
 
 <script>
+import QRCode from "qrcode";
+import QRCodePopup from './QRCodePopup.vue';
+
 export default {
-props: {
-  locationLink: {
-    type: String
+  components: {
+    QRCodePopup
   },
-  i18nCopyLinkKey: {
-    type: String,
-    default: 'copy_link'
-  }
-},
-data() {
-  return {
-    publicRoomLinkCopied: false,
-  }
-},
-methods: {
-  copyRoomLink() {
-    if(this.publicRoomLinkCopied) return
-    const self = this;
-    this.$copyText(this.locationLink).then(
-      function (ignored) {
-        // Success!
-        self.publicRoomLinkCopied = true;
-        setInterval(() => {
-          // Hide again
-          self.publicRoomLinkCopied = false;
-        }, 3000);
-      },
-      function (e) {
-        console.log(e);
+  props: {
+    locationLink: {
+      type: String
+    },
+    i18nCopyLinkKey: {
+      type: String,
+      default: 'copy_link'
+    }
+  },
+  data() {
+    return {
+      locationLinkCopied: false,
+      showFullScreenQR: false,
+    }
+  },
+  methods: {
+    copyRoomLink() {
+      if(this.locationLinkCopied) return
+      const self = this;
+      this.$copyText(this.locationLink).then(
+        function (ignored) {
+          // Success!
+          self.locationLinkCopied = true;
+          setInterval(() => {
+            // Hide again
+            self.locationLinkCopied = false;
+          }, 3000);
+        },
+        function (e) {
+          console.log(e);
+        }
+      );
+    },
+    updateQRCode() {
+      var fullUrl = this.locationLink;
+      var canvas = this.$refs.roomQr;
+      if (fullUrl && canvas) {
+        QRCode.toCanvas(
+          canvas,
+          fullUrl,
+          {
+            type: "image/png",
+            margin: 1,
+            width: 60,
+          },
+          function (error) {
+            if (error) console.error(error);
+            else console.log("success!");
+          }
+        );
       }
-    );
+    },
+  },
+  watch: {
+    locationLink: {
+      handler() {
+        this.updateQRCode();
+      }
+    }
+  },
+  mounted() {
+    this.updateQRCode();
   }
 }
-}
 </script>
 
 <style lang="scss">

src/components/RoomInfo.vue

@@ -78,16 +78,7 @@
         {{ $t("room_info.created_by", { user: creator }) }}
       </div>
     </div>
-    <copy-link :locationLink="publicRoomLink" i18nCopyLinkKey="copy_invite_link">
-      <template slot="qrCode">
-        <canvas
-          @click.stop="showFullScreenQR = true"
-          ref="roomQr"
-          class="qr"
-          id="room-qr"
-        ></canvas>
-      </template>
-    </copy-link>
+    <copy-link :locationLink="publicRoomLink" i18nCopyLinkKey="copy_invite_link" />
 
     <v-card class="account ma-3" flat>
       <v-card-title class="h2">{{ $t("room_info.permissions") }}</v-card-title>
@@ -258,8 +249,6 @@
       @close="showPurgeConfirmation = false"
     />
 
-    <QRCodePopup :show="showFullScreenQR" :message="publicRoomLink" @close="showFullScreenQR = false" />
-
     <RoomExport :room="room" v-if="exporting" v-on:close="exporting = false" />
   </div>
 </template>
@@ -271,9 +260,7 @@ import DeviceList from "../components/DeviceList";
 import RoomExport from "../components/RoomExport";
 import RoomAvatarPicker from "../components/RoomAvatarPicker";
 import CopyLink from "../components/CopyLink.vue"
-import QRCode from "qrcode";
 import roomInfoMixin from "./roomInfoMixin";
-import QRCodePopup from './QRCodePopup.vue';
 import util from "../plugins/utils";
 
 export default {
@@ -284,7 +271,6 @@ export default {
     PurgeRoomDialog,
     DeviceList,
     RoomExport,
-    QRCodePopup,
     RoomAvatarPicker,
     CopyLink
   },
@@ -296,7 +282,6 @@ export default {
       showAllMembers: false,
       showLeaveConfirmation: false,
       showPurgeConfirmation: false,
-      showFullScreenQR: false,
       expandedMembers: [],
       buildVersion: "",
       updatingJoinRule: false, // Flag if we are processing update curerntly
@@ -322,9 +307,6 @@ export default {
     this.user = this.$matrix.matrixClient.getUser(this.$matrix.currentUserId);
     this.displayName = this.user.displayName;
 
-    // Set QR code
-    this.updateQRCode();
-
     // Display build version
     const version = require("!!raw-loader!../assets/version.txt").default;
     console.log("Version", version);
@@ -383,13 +365,9 @@ export default {
 
   watch: {
     room: {
-      handler(ignoredNewVal, ignoredOldVal) {
+      handler() {
         console.log("RoomInfo: Current room changed");
         this.updateMembers();
-        this.$nextTick(() => {
-          // Wait a tick, we want to be sure that the QR canvas ref is already created!
-          this.updateQRCode();
-        });
       },
     },
   },
@@ -432,26 +410,6 @@ export default {
       }
     },
 
-    updateQRCode() {
-      var fullUrl = this.publicRoomLink;
-      var canvas = this.$refs.roomQr;
-      if (fullUrl && canvas) {
-        QRCode.toCanvas(
-          canvas,
-          fullUrl,
-          {
-            type: "image/png",
-            margin: 1,
-            width: 60,
-          },
-          function (error) {
-            if (error) console.error(error);
-            else console.log("success!");
-          }
-        );
-      }
-    },
-
     memberAvatar(member) {
       if (member) {
         return member.getAvatarUrl(
@@ -520,7 +478,6 @@ export default {
         })
         .finally(() => {
           this.updatingJoinRule = false;
-          this.updateQRCode();
         });
     },
     startPrivateChat(userId) {