Start on chat header and room info
This commit is contained in:
N-Pex
parent
1f3f3ff177
commit
059c84cb24
7 changed files with 256 additions and 37 deletions
30
src/App.vue
30
src/App.vue
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<v-app>
|
||||
<v-app-bar app dark flat color="#008860">
|
||||
<!-- <v-app-bar app dark flat color="#008860">
|
||||
<v-app-bar-nav-icon @click.stop="openDrawer = !openDrawer">
|
||||
<v-icon>menu</v-icon>
|
||||
</v-app-bar-nav-icon>
|
||||
|
|
@ -8,36 +8,24 @@
|
|||
<v-toolbar-title
|
||||
>Keanu{{ $matrix.currentRoom ? (" - " + $matrix.currentRoom.summary.info.title) : "" }}</v-toolbar-title
|
||||
>
|
||||
</v-app-bar> -->
|
||||
|
||||
<v-spacer></v-spacer>
|
||||
<v-navigation-drawer app v-model="openDrawer">
|
||||
<v-list nav dense>
|
||||
|
||||
<template v-if="!currentUser && $route.path != '/login'">
|
||||
<template v-if="!currentUser && $route.path != '/login'">
|
||||
<v-btn color="green" dark to="/login" replace
|
||||
><v-icon>mdi-login</v-icon>Login</v-btn
|
||||
>
|
||||
</template>
|
||||
<template v-else-if="currentUser">
|
||||
<span class="ma-2">{{ currentUser.name }}</span>
|
||||
<v-menu bottom left>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn dark icon v-bind="attrs" v-on="on">
|
||||
<v-icon>settings</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
|
||||
<v-list>
|
||||
<div class="ma-2">{{ currentUser.user_id }}</div>
|
||||
<v-list-item @click.prevent="logOut">
|
||||
<v-list-item-icon><v-icon>logout</v-icon></v-list-item-icon>
|
||||
<v-list-item-title>Logout</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
<!-- <v-btn color="green" dark @click.prevent="logOut" replace><v-icon>mdi-logout</v-icon>Logout</v-btn> -->
|
||||
</template>
|
||||
</v-app-bar>
|
||||
|
||||
<v-navigation-drawer app v-model="openDrawer">
|
||||
<v-list nav dense>
|
||||
<RoomList
|
||||
v-if="$matrix.ready"
|
||||
@close="openDrawer = false"
|
||||
|
|
@ -49,7 +37,11 @@
|
|||
<router-view />
|
||||
</v-main>
|
||||
|
||||
<v-footer app class="copyright">Powered by Guardian Project. Version: {{ buildVersion }}</v-footer>
|
||||
<v-footer app class="copyright">
|
||||
<v-btn icon x-small @click.stop="openDrawer = !openDrawer">
|
||||
<v-icon>menu</v-icon>
|
||||
</v-btn>
|
||||
Powered by Guardian Project. Version: {{ buildVersion }}</v-footer>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -20,6 +20,51 @@ $chat-text-size: 0.7pt;
|
|||
background-color: $chat-background;
|
||||
overflow: hidden;
|
||||
|
||||
.chat-header {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #e2e2e2;
|
||||
.chat-header-row {
|
||||
margin: 0;
|
||||
padding: 4px 10px;
|
||||
align-items: center;
|
||||
}
|
||||
.members-icon {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.chat-header-members {
|
||||
position: relative;
|
||||
}
|
||||
.num-members {
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
font-family: 'Titillium Web', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 11 * $chat-text-size;
|
||||
color: black;
|
||||
}
|
||||
.room-name {
|
||||
font-family: 'Titillium Web', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 18 * $chat-text-size;
|
||||
color: black;
|
||||
}
|
||||
.v-btn.leave-button {
|
||||
font-family: 'Titillium Web', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14 * $chat-text-size;
|
||||
color: white;
|
||||
background-color: #cc0000 !important;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
height: $chat-standard-padding;
|
||||
margin-top: $chat-standard-padding-xs;
|
||||
margin-bottom: $chat-standard-padding-xs;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-content {
|
||||
margin: 0;
|
||||
padding-top: $chat-standard-padding-s;
|
||||
|
|
@ -43,19 +88,6 @@ $chat-text-size: 0.7pt;
|
|||
}
|
||||
}
|
||||
|
||||
.v-btn {
|
||||
font-family: 'Titillium Web', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 17 * $chat-text-size;
|
||||
color: white;
|
||||
background-color: #00eea0 !important;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
height: $chat-standard-padding;
|
||||
margin-top: $chat-standard-padding-xs;
|
||||
margin-bottom: $chat-standard-padding-xs;
|
||||
}
|
||||
|
||||
.input-area {
|
||||
background-color: #e2e2e2;
|
||||
margin: 0;
|
||||
|
|
@ -85,7 +117,6 @@ $chat-text-size: 0.7pt;
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
min-width: 48px;
|
||||
min-height: 48px;
|
||||
}
|
||||
.input-area-text {
|
||||
max-height: 30vh;
|
||||
|
|
|
|||
|
|
@ -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
77
src/components/ChatHeader.vue
Normal 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>
|
||||
|
|
@ -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
113
src/components/RoomInfo.vue
Normal 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>
|
||||
|
|
@ -11,6 +11,12 @@ const routes = [
|
|||
name: 'Chat',
|
||||
component: Chat
|
||||
},
|
||||
{
|
||||
path: '/info',
|
||||
name: 'RoomInfo',
|
||||
component: () => import('../components/RoomInfo.vue'),
|
||||
props: true,
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
component: Login
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue