butter/keanu-weblite
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Start on chat header and room info

Browse source
This commit is contained in:
N-Pex 2020-12-04 17:15:18 +01:00
parent 1f3f3ff177
commit 059c84cb24
7 changed files with 256 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/Chat.vue
View file

@ -1,5 +1,6 @@
<template>
<div class="chat-root fill-height d-flex flex-column" ma-0 pa-0>
<ChatHeader class="chat-header flex-grow-1 flex-shrink-1" />
<div
class="chat-content flex-grow-1 flex-shrink-1"
ref="chatContainer"
@ -160,6 +161,7 @@ import RoomAvatarChanged from "./messages/RoomAvatarChanged.vue";
import DebugEvent from "./messages/DebugEvent.vue";
import util from "../plugins/utils";
import MessageOperations from "./messages/MessageOperations.vue";
import ChatHeader from "./ChatHeader";
// from https://kirbysayshi.com/2013/08/19/maintaining-scroll-position-knockoutjs-list.html
function ScrollPosition(node) {
@ -192,6 +194,7 @@ export default {
name: "Chat",
components: {
ChatHeader,
MessageIncomingText,
MessageIncomingImage,
MessageIncomingAudio,
@ -304,7 +307,6 @@ export default {
return event.touches[0].clientY;
},
touchStart(e, event) {
console.log("TouchStart");
if (this.selectedEvent != event) {
this.showContextMenu = false;
}
@ -314,11 +316,9 @@ export default {
this.touchTimer = setTimeout(this.touchTimerElapsed, 500);
},
touchEnd() {
console.log("TouchEnd");
this.touchTimer && clearTimeout(this.touchTimer);
},
touchCancel() {
console.log("TouchCancel");
this.touchTimer && clearTimeout(this.touchTimer);
},
touchMove(e) {

77
src/components/ChatHeader.vue Normal file
View file

@ -0,0 +1,77 @@
<template>
<v-container fluid>
<v-row class="chat-header-row">
<v-col
class="chat-header-members text-center flex-grow-0 flex-shrink-1 ma-0 pa-0"
>
<v-btn icon class="members-icon" @click.stop="showRoomInfo">
<v-icon>people</v-icon>
</v-btn>
<div class="num-members">{{ memberCount }}</div>
</v-col>
<v-col class="flex-grow-1 flex-shrink-1 ma-0 pa-0">
<div class="room-name" v-if="room">{{ room.summary.info.title }}</div>
</v-col>
<v-col class="text-center flex-grow-0 flex-shrink-1 ma-0 pa-0">
<v-btn class="leave-button">Leave</v-btn>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "ChatHeader",
data() {
return {
memberCount: null,
};
},
mounted() {
this.$matrix.on("Room.timeline", this.onEvent);
this.updateMemberCount();
},
destroyed() {
this.$matrix.off("Room.timeline", this.onEvent);
},
computed: {
room() {
return this.$matrix.currentRoom;
},
},
watch: {
room: {
handler(newVal, ignoredOldVal) {
this.memberCount = newVal.getJoinedMemberCount();
},
},
},
methods: {
onEvent(event) {
if (event.getRoomId() !== this.roomId) {
return; // Not for this room
}
if (event.getType() == "m.room.member") {
this.updateMemberCount();
}
},
updateMemberCount() {
this.memberCount = this.room.getJoinedMemberCount();
},
showRoomInfo() {
this.$router.push({ name: "RoomInfo" });
},
},
};
</script>
<style lang="scss">
@import "@/assets/css/chat.scss";
</style>

2
src/components/Login.vue
View file

@ -68,7 +68,7 @@ export default {
},
created() {
if (this.loggedIn) {
this.$router.push("/profile");
this.$router.replace({name: "Chat"});
}
},
watch: {

113
src/components/RoomInfo.vue Normal file
View file

@ -0,0 +1,113 @@
<template>
<div>
<v-container fluid>
<v-row class="chat-header-row">
<v-col class="text-center flex-grow-0 flex-shrink-1 ma-0 pa-0">
<v-btn icon @click.stop="$router.go(-1)">
<v-icon>arrow_back</v-icon>
</v-btn>
</v-col>
<!-- <v-col class="chat-header-members text-center flex-grow-0 flex-shrink-1 ma-0 pa-0">
<v-btn icon class="members-icon" @click.stop="showRoomInfo">
<v-icon>people</v-icon>
</v-btn>
<div class="num-members">{{ memberCount }}</div>
</v-col> -->
<v-col class="flex-grow-1 flex-shrink-1 ma-0 pa-0">
<div class="room-name" v-if="room">{{ room.summary.info.title }}</div>
</v-col>
<!-- <v-col class="text-center flex-grow-0 flex-shrink-1 ma-0 pa-0">
<v-btn class="leave-button">Leave</v-btn>
</v-col> -->
</v-row>
</v-container>
<h3>Work in progress!</h3>
<div v-for="member in room.getJoinedMembers()" :key="member.userId">
<v-avatar class="avatar" size="40" color="grey">
<img
v-if="memberAvatar(member)"
:src="memberAvatar(member)"
/>
<span v-else class="white--text headline">{{
member.name.substring(0, 1).toUpperCase()
}}</span>
</v-avatar>
{{ member.name }}
</div>
</div>
</template>
<script>
export default {
name: "RoomInfo",
data() {
return {
memberCount: null
}
},
mounted() {
this.$matrix.on("Room.timeline", this.onEvent);
this.updateMemberCount();
},
destroyed() {
this.$matrix.off("Room.timeline", this.onEvent);
},
computed: {
room() {
return this.$matrix.currentRoom;
},
},
watch: {
room: {
handler(newVal, ignoredOldVal) {
console.log("RoomInfo: Current room changed");
this.memberCount = newVal.getJoinedMemberCount();
}
}
},
methods: {
onEvent(event) {
if (event.getRoomId() !== this.roomId) {
return; // Not for this room
}
if (event.getType() == "m.room.member") {
this.updateMemberCount();
}
},
updateMemberCount() {
this.memberCount = this.room.getJoinedMemberCount();
},
showRoomInfo() {
},
memberAvatar(member) {
if (member) {
return member.getAvatarUrl(
this.$matrix.matrixClient.getHomeserverUrl(),
40,
40,
"scale",
true
);
}
return null;
},
},
};
</script>
<style lang="scss">
@import "@/assets/css/chat.scss";
</style>