119 lines
2.9 KiB
Vue
119 lines
2.9 KiB
Vue
<template>
|
|
<BottomSheet
|
|
class="room-info-bottom-sheet"
|
|
ref="sheet"
|
|
>
|
|
<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>
|
|
<div class="h4">{{$t('room_info_sheet.this_room')}}</div>
|
|
<div class="h2">{{ roomName }}</div>
|
|
<v-btn
|
|
id="btn-room-details"
|
|
height="20px"
|
|
color="black"
|
|
class="filled-button"
|
|
@click.stop="showDetails"
|
|
>{{$t('room_info_sheet.view_details')}}</v-btn
|
|
>
|
|
</div>
|
|
<room-list :title="'Other rooms'" v-on:close="close" v-on:newroom="createRoom" :showCreate="true" />
|
|
</div>
|
|
</BottomSheet>
|
|
</template>
|
|
|
|
<script>
|
|
import util from "../plugins/utils";
|
|
import BottomSheet from "./BottomSheet";
|
|
import RoomList from "./RoomList.vue";
|
|
import roomInfoMixin from "./roomInfoMixin";
|
|
|
|
export default {
|
|
name: "RoomInfoBottomSheet",
|
|
mixins: [roomInfoMixin],
|
|
data() {
|
|
return {
|
|
isRoomAvatarLoaded: true,
|
|
loadValue: 0
|
|
}
|
|
},
|
|
components: {
|
|
BottomSheet,
|
|
RoomList,
|
|
},
|
|
methods: {
|
|
open() {
|
|
this.$refs.sheet.open();
|
|
},
|
|
|
|
close() {
|
|
this.$refs.sheet.close();
|
|
},
|
|
|
|
showDetails() {
|
|
this.close();
|
|
this.$navigation.push({ name: "RoomInfo" });
|
|
},
|
|
|
|
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>
|
|
|
|
<style lang="scss">
|
|
@import "@/assets/css/chat.scss";
|
|
</style>
|