Room avatar picker added to room details page

src/components/RoomAvatarPicker.vue

@@ -0,0 +1,68 @@
+<template>
+  <v-avatar class="room-avatar cursor-pointer" @click="showRoomAvatarPicker" v-if="isRoomAvatarLoaded">
+    <v-img v-if="roomAvatar" :src="roomAvatar"/>
+    <span v-else class="white--text headline">{{
+      roomName.substring(0, 1).toUpperCase()
+    }}</span>
+      <input
+      id="room-avatar-picker"
+      ref="roomAvatar"
+      type="file"
+      name="roomAvatar"
+      @change="handleRoomPickedAvatar($event)"
+      accept="image/*"
+      class="d-none"
+    />
+  </v-avatar>
+  <v-progress-circular
+    :rotate="360"
+    v-else
+    :width="3"
+    :value="loadValue"
+    color="primary"
+  >
+    {{ loadValue }}
+  </v-progress-circular>
+</template>
+
+<script>
+import util from "../plugins/utils";
+import roomInfoMixin from "./roomInfoMixin";
+
+export default {
+  name: "RoomAvatarPicker",
+  mixins: [roomInfoMixin],
+  data() {
+    return {
+      isRoomAvatarLoaded: true,
+      loadValue: 0
+    };
+  },
+  methods: {
+    showRoomAvatarPicker() {
+      this.$refs.roomAvatar.click();
+    },
+
+    setRoomAvatar(file) {
+      const self = this;
+      this.isRoomAvatarLoaded = false;
+      return util.setRoomAvatar(
+        this.$matrix.matrixClient,
+        this.room.roomId,
+        file,
+        function (progress) {
+          self.loadValue = Math.round(progress.loaded/progress.total * 100);
+          if(progress.loaded === progress.total) {
+            self.isRoomAvatarLoaded = true;
+          }
+        }
+      )
+    },
+    handleRoomPickedAvatar(event) {
+      if (event.target.files && event.target.files[0]) {
+        this.setRoomAvatar(event.target.files[0]);
+      }
+    }
+  }
+};
+</script>

src/components/RoomInfo.vue

@@ -24,12 +24,7 @@
     </div>
 
     <div class="members ma-3 pa-3 mt-0 pt-0 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>
+      <room-avatar-picker />
       <div class="name">{{ roomName }}</div>
       <div class="topic">{{ roomTopic }}</div>
       <div class="created-by">
@@ -190,7 +185,7 @@
         >{{ $t("room_info.purge") }}</v-btn
       >
     </div>
-    
+
     <div class="build-version">
       {{ $t("room_info.version_info", { version: buildVersion }) }}
     </div>
@@ -218,6 +213,7 @@ import LeaveRoomDialog from "../components/LeaveRoomDialog";
 import PurgeRoomDialog from "../components/PurgeRoomDialog";
 import DeviceList from "../components/DeviceList";
 import RoomExport from "../components/RoomExport";
+import RoomAvatarPicker from "../components/RoomAvatarPicker";
 import QRCode from "qrcode";
 import roomInfoMixin from "./roomInfoMixin";
 import QRCodePopup from './QRCodePopup.vue';
@@ -232,6 +228,7 @@ export default {
     DeviceList,
     RoomExport,
     QRCodePopup,
+    RoomAvatarPicker
   },
   data() {
     return {

src/components/RoomInfoBottomSheet.vue

@@ -5,30 +5,7 @@
   >
     <div class="room-info-sheet" ref="roomInfoSheetContent">
       <div class="text-center current-room">
-        <v-avatar class="room-avatar cursor-pointer" @click="showRoomAvatarPicker" v-if="isRoomAvatarLoaded">
-          <v-img v-if="roomAvatar" :src="roomAvatar"/>
-          <span v-else class="white--text headline">{{
-            roomName.substring(0, 1).toUpperCase()
-          }}</span>
-           <input
-            id="room-avatar-picker"
-            ref="roomAvatar"
-            type="file"
-            name="roomAvatar"
-            @change="handleRoomPickedAvatar($event)"
-            accept="image/*"
-            class="d-none"
-          />
-        </v-avatar>
-        <v-progress-circular
-          :rotate="360"
-          v-else
-          :width="3"
-          :value="loadValue"
-          color="primary"
-        >
-          {{ loadValue }}
-        </v-progress-circular>
+        <room-avatar-picker />
         <div class="h4">{{$t('room_info_sheet.this_room')}}</div>
         <div class="h2">{{ roomName }}</div>
         <v-btn
@@ -46,23 +23,18 @@
 </template>
 
 <script>
-import util from "../plugins/utils";
 import BottomSheet from "./BottomSheet";
-import RoomList from "./RoomList.vue";
+import RoomAvatarPicker from "./RoomAvatarPicker";
+import RoomList from "./RoomList";
 import roomInfoMixin from "./roomInfoMixin";
 
 export default {
   name: "RoomInfoBottomSheet",
   mixins: [roomInfoMixin],
-  data() {
-    return {
-      isRoomAvatarLoaded: true,
-      loadValue: 0
-    }
-  },
   components: {
     BottomSheet,
     RoomList,
+    RoomAvatarPicker,
   },
   methods: {
     open() {
@@ -81,35 +53,7 @@ export default {
     createRoom() {
       this.close();
       this.$navigation.push({ name: "CreateRoom" });
-    },
-
-    showRoomAvatarPicker() {
-      this.$refs.roomAvatar.click();
-    },
-
-    setRoomAvatar(file) {
-      const self = this;
-      this.isRoomAvatarLoaded = false;
-      return util.setRoomAvatar(
-        this.$matrix.matrixClient,
-        this.room.roomId,
-        file,
-        function (progress) {
-          self.loadValue = Math.round(progress.loaded/progress.total * 100);
-          if(progress.loaded === progress.total) {
-            self.isRoomAvatarLoaded = true;
-          }
-        }
-      );
-    },
-    /**
-     * Handle room picked avatar
-     */
-    handleRoomPickedAvatar(event) {
-      if (event.target.files && event.target.files[0]) {
-        this.setRoomAvatar(event.target.files[0]);
-      }
-    },
+    }
   }
 };
 </script>