Issue #115

Also, this should handle issue #153.

src/assets/css/chat.scss

@@ -688,7 +688,7 @@ $admin-fg: white;
 }
 
 .room-info {
-    background-color: #e0e0e0;
+    background-color: #e8e8e8;
     height: 100%;
     .chat-header {
         background-color: transparent;

src/assets/css/main.scss

@@ -78,7 +78,8 @@ body { position:absolute; top:0; bottom:0; right:0; left:0; }
     color: white;
     border: none;
     border-radius: $chat-standard-padding / 2;
-    height: $chat-standard-padding;
+    height: $chat-standard-padding !important;
+    min-height: $chat-standard-padding !important;
     margin-top: $chat-standard-padding-xs;
     margin-bottom: $chat-standard-padding-xs;
 }

src/assets/translations/en.json

@@ -188,7 +188,8 @@
     "hide_all": "Hide",
     "show_all": "Show all >",
     "leave_room": "Leave",
-    "version_info": "Powered by Guardian Project. Version: {version}"
+    "version_info": "Powered by Guardian Project. Version: {version}",
+    "scan_code": "Scan to join the room"
   },
   "room_info_sheet": {
     "this_room": "This group",

src/components/BottomSheet.vue

@@ -18,7 +18,7 @@
       :style="{ top: `${isMove ? y : calcY()}px` }"
     >
       <div class="bottom-sheet-handle"><div class="bottom-sheet-handle-decoration" /></div>
-      <div style="position:absolute;top:20px;left:0;right:0;bottom:0;overflow-y:auto;padding:20px">
+      <div ref="sheetContent" style="position:absolute;top:20px;left:0;right:0;bottom:0;overflow-y:auto;padding:20px">
         <slot></slot>
       </div>
     </div>
@@ -119,6 +119,9 @@ export default {
     },
     setState(state) {
       this.state = state;
+      if (state == "closed") {
+        this.scrollToTop();
+      }
     },
     onBackgroundClick() {
       if (this.state == "open") {
@@ -127,6 +130,12 @@ export default {
         this.setState("closed");
       }
     },
+    scrollToTop() {
+      const container = this.$refs.sheetContent;
+      if (container) {
+        container.scrollTo(0, 0);
+      }
+    },
   },
 };
 </script>

src/components/QRCodePopup.vue

@@ -0,0 +1,102 @@
+<template>
+  <v-dialog v-model="showDialog" class="ma-0 pa-0" width="80%">
+    <div class="dialog-content text-center" ref="qrContainer">
+      <div class="d-flex flex-column text-center" style="align-items:center">
+      <canvas
+        ref="qr"
+        class="qr"
+        id="qr"
+        :style="qrStyle"
+      ></canvas>
+      </div>
+      <div>{{ $t("room_info.scan_code") }}</div>
+    </div>
+  </v-dialog>
+</template>
+<script>
+import roomInfoMixin from "./roomInfoMixin";
+import QRCode from "qrcode";
+
+export default {
+  name: "QRCodePopup",
+  mixins: [roomInfoMixin],
+  props: {
+    show: {
+      type: Boolean,
+      default: function () {
+        return false;
+      },
+    },
+    message: {
+      type: String,
+      default: function () {
+        return false;
+      },
+    },
+  },
+  data() {
+    return {
+      showDialog: false,
+    };
+  },
+  mounted() {
+    this.updateQR(this.message);
+  },
+  computed: {
+    qrStyle() {
+      const w = document.documentElement.clientWidth;
+      const h = document.documentElement.clientHeight;
+      const s = 0.6 * Math.min(w,h);
+      return "width: " + s + "px;height:" + s + "px;";
+    }
+  },
+  watch: {
+    show: {
+      handler(newVal, ignoredOldVal) {
+        this.showDialog = newVal;
+      },
+    },
+    showDialog() {
+      if (!this.showDialog) {
+        this.$emit("close");
+      } else {
+        this.$nextTick(() => {
+        this.updateQR(this.message);
+        });
+      }
+    },
+    message: {
+      handler(message) {
+        this.updateQR(message);
+      },
+    },
+  },
+
+  methods: {
+    updateQR(message) {
+      var canvas = this.$refs.qr;
+      var canvasContainer = this.$refs.qrContainer;
+        if (message && canvas && canvasContainer) {
+          this.$nextTick(() => {
+          QRCode.toCanvas(
+            canvas,
+            message,
+            {
+              type: "image/png",
+              margin: 1,
+              width: Math.min(0.7 * canvasContainer.clientWidth, 0.7 * canvasContainer.clientHeight),
+            },
+            function (error) {
+              if (error) console.error(error);
+            }
+          );
+          });
+        }
+    }
+  },
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/css/chat.scss";
+</style>

src/components/RoomInfo.vue

@@ -40,7 +40,12 @@
       <v-container fluid class="pa-0" v-show="publicRoomLink">
         <v-row cols="12" class="qr-container ma-3">
           <v-col cols="auto">
-            <canvas ref="roomQr" class="qr" id="room-qr"></canvas>
+            <canvas
+              @click.stop="showFullScreenQR = true"
+              ref="roomQr"
+              class="qr"
+              id="room-qr"
+            ></canvas>
           </v-col>
           <v-col align-self="center">
             <div class="link">{{ publicRoomLink }}</div>
@@ -185,6 +190,9 @@
       :room="room"
       @close="showPurgeConfirmation = false"
     />
+
+    <QRCodePopup :show="showFullScreenQR" :message="publicRoomLink" @close="showFullScreenQR = false" />
+
   </div>
 </template>
 
@@ -194,6 +202,7 @@ import PurgeRoomDialog from "../components/PurgeRoomDialog";
 import DeviceList from "../components/DeviceList";
 import QRCode from "qrcode";
 import roomInfoMixin from "./roomInfoMixin";
+import QRCodePopup from './QRCodePopup.vue';
 
 export default {
   name: "RoomInfo",
@@ -202,6 +211,7 @@ export default {
     LeaveRoomDialog,
     PurgeRoomDialog,
     DeviceList,
+    QRCodePopup,
   },
   data() {
     return {
@@ -211,6 +221,7 @@ export default {
       showAllMembers: false,
       showLeaveConfirmation: false,
       showPurgeConfirmation: false,
+      showFullScreenQR: false,
       expandedMembers: [],
       buildVersion: "",
       updatingJoinRule: false, // Flag if we are processing update curerntly