Work on room info and start on profile view
This commit is contained in:
N-Pex
parent
6e0e1dd31c
commit
19e8b64e7b
8 changed files with 403 additions and 87 deletions
|
|
@ -25,9 +25,9 @@ $admin-fg: white;
|
|||
font-family: 'Inter', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 11 * $chat-text-size;
|
||||
color: white;
|
||||
background-color: #f74e4e !important;
|
||||
border: none;
|
||||
color: black;
|
||||
background-color: white !important;
|
||||
border: 1px solid black;
|
||||
border-radius: $chat-standard-padding / 2;
|
||||
height: $chat-standard-padding;
|
||||
margin-top: $chat-standard-padding-xs;
|
||||
|
|
@ -435,4 +435,70 @@ $admin-fg: white;
|
|||
padding-right: 10px;
|
||||
content: attr(title);
|
||||
}
|
||||
}
|
||||
|
||||
.room-info {
|
||||
background-color: #e0e0e0;
|
||||
height: 100%;
|
||||
.chat-header {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
.room-name {
|
||||
text-align: center;
|
||||
margin-top: 15px;
|
||||
}
|
||||
.back {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
margin: 10px 0px;
|
||||
font-weight: bold;
|
||||
font-size: 12 * $chat-text-size;
|
||||
}
|
||||
|
||||
.v-card {
|
||||
background-color: white;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.show-all {
|
||||
color: black;
|
||||
font-size: 14 * $chat-text-size;
|
||||
font-weight: bold;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.profile {
|
||||
background-color: white;
|
||||
height: 100%;
|
||||
.chat-header {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
.room-name {
|
||||
text-align: center;
|
||||
margin-top: 15px;
|
||||
}
|
||||
.back {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
margin: 10px 0px;
|
||||
font-weight: bold;
|
||||
font-size: 12 * $chat-text-size;
|
||||
}
|
||||
|
||||
.v-card {
|
||||
background-color: white;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.show-all {
|
||||
color: black;
|
||||
font-size: 14 * $chat-text-size;
|
||||
font-weight: bold;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
|
@ -8,4 +8,29 @@ $chat-standard-padding: 32px;
|
|||
$chat-standard-padding-s: 16px;
|
||||
$chat-standard-padding-xs: 8px;
|
||||
$chat-text-size: 1.0px;
|
||||
$chat-button-height: 50px;
|
||||
$chat-button-height: 50px;
|
||||
|
||||
.v-btn.outlined-button {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 11 * $chat-text-size;
|
||||
color: black;
|
||||
background-color: white !important;
|
||||
border: 1px solid black;
|
||||
border-radius: $chat-standard-padding / 2;
|
||||
height: $chat-standard-padding;
|
||||
margin-top: $chat-standard-padding-xs;
|
||||
margin-bottom: $chat-standard-padding-xs;
|
||||
}
|
||||
|
||||
.v-btn.filled-button {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 11 * $chat-text-size;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: $chat-standard-padding / 2;
|
||||
height: $chat-standard-padding;
|
||||
margin-top: $chat-standard-padding-xs;
|
||||
margin-bottom: $chat-standard-padding-xs;
|
||||
}
|
||||
|
|
@ -19,27 +19,19 @@
|
|||
</v-row>
|
||||
|
||||
<!-- "REALLY LEAVE?" dialog -->
|
||||
<v-dialog v-model="showLeaveConfirmation" class="ma-0 pa-0" width="50%">
|
||||
<v-card>
|
||||
<v-card-title>Are you sure you want to leave?</v-card-title>
|
||||
<v-card-text>
|
||||
<div>You may not be able to rejoin.</div>
|
||||
</v-card-text>
|
||||
<v-divider></v-divider>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn text @click="showLeaveConfirmation = false">Cancel</v-btn>
|
||||
<v-btn color="primary" text @click="doLeaveRoom();showLeaveConfirmation = false">Next</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
<LeaveRoomDialog :show="showLeaveConfirmation" :room="room" @close="showLeaveConfirmation = false" />
|
||||
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LeaveRoomDialog from '../components/LeaveRoomDialog';
|
||||
|
||||
export default {
|
||||
name: "ChatHeader",
|
||||
components: {
|
||||
LeaveRoomDialog
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
memberCount: null,
|
||||
|
|
|
|||
81
src/components/LeaveRoomDialog.vue
Normal file
81
src/components/LeaveRoomDialog.vue
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
<template>
|
||||
<v-dialog v-model="showDialog" v-show="room" class="ma-0 pa-0" width="50%">
|
||||
<v-card>
|
||||
<v-card-title>Are you sure you want to leave?</v-card-title>
|
||||
<v-card-text>
|
||||
<div>You may not be able to rejoin.</div>
|
||||
</v-card-text>
|
||||
<v-divider></v-divider>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn text @click="showDialog = false">Cancel</v-btn>
|
||||
<v-btn
|
||||
color="primary"
|
||||
text
|
||||
@click="
|
||||
doLeaveRoom();
|
||||
showDialog = false;
|
||||
"
|
||||
>Next</v-btn
|
||||
>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "LeaveRoomDialog",
|
||||
props: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: function () {
|
||||
return false;
|
||||
},
|
||||
},
|
||||
room: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showDialog: false,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
show: {
|
||||
handler(newVal, ignoredOldVal) {
|
||||
this.showDialog = newVal;
|
||||
},
|
||||
},
|
||||
showDialog() {
|
||||
if (!this.showDialog) {
|
||||
this.$emit('close');
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
doLeaveRoom() {
|
||||
//this.$matrix.matrixClient.forget(this.room.roomId, true, undefined)
|
||||
const roomId = this.room.roomId;
|
||||
this.$matrix.matrixClient
|
||||
.leave(roomId, undefined)
|
||||
.then(() => {
|
||||
console.log("Left room");
|
||||
this.$matrix.matrixClient.store.removeRoom(roomId);
|
||||
this.$navigation.push({ name: "Chat", params: { roomId: null } }, -1);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("Error leaving", err);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@/assets/css/chat.scss";
|
||||
</style>
|
||||
137
src/components/Profile.vue
Normal file
137
src/components/Profile.vue
Normal file
|
|
@ -0,0 +1,137 @@
|
|||
<template>
|
||||
<div v-if="room" class="profile">
|
||||
<div class="chat-header">
|
||||
<v-container fluid>
|
||||
<div class="room-name">My Profile</div>
|
||||
<v-btn
|
||||
text
|
||||
class="back"
|
||||
v-show="$navigation && $navigation.canPop()"
|
||||
@click.stop="$navigation.pop"
|
||||
>
|
||||
<v-icon>close</v-icon>
|
||||
</v-btn>
|
||||
|
||||
</v-container>
|
||||
</div>
|
||||
|
||||
<div @click="showEditDialog = true"><v-icon>lock</v-icon><span>Set password</span></div>
|
||||
|
||||
<!-- EDIT dialog -->
|
||||
<v-dialog v-model="showEditDialog" class="ma-0 pa-0" width="50%">
|
||||
<v-card>
|
||||
<v-card-title>Display name</v-card-title>
|
||||
<v-card-text>
|
||||
<v-text-field v-model="displayName" />
|
||||
</v-card-text>
|
||||
<v-divider></v-divider>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn text @click="showEditDialog = false">Cancel</v-btn>
|
||||
<v-btn
|
||||
color="primary"
|
||||
text
|
||||
@click="
|
||||
$matrix.matrixClient.setDisplayName(displayName);
|
||||
showEditDialog = false;
|
||||
"
|
||||
>Ok</v-btn
|
||||
>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "RoomInfo",
|
||||
data() {
|
||||
return {
|
||||
memberCount: null,
|
||||
showEditDialog: false,
|
||||
user: null,
|
||||
displayName: "",
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$matrix.on("Room.timeline", this.onEvent);
|
||||
this.updateMemberCount();
|
||||
this.user = this.$matrix.matrixClient.getUser(this.$matrix.currentUserId);
|
||||
this.displayName = this.user.displayName;
|
||||
},
|
||||
|
||||
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;
|
||||
},
|
||||
|
||||
viewProfile() {
|
||||
|
||||
},
|
||||
|
||||
upgradeAccount() {
|
||||
this.$matrix
|
||||
.upgradeGuestAccount()
|
||||
.then(user => {
|
||||
// Done, login with the "new" account to get a real token instead of our guest token.
|
||||
this.user = user;
|
||||
return this.$store.dispatch("auth/login", this.user);
|
||||
})
|
||||
.then(() => {
|
||||
console.log("Upgrade done!");
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("ERROR", err);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@/assets/css/chat.scss";
|
||||
</style>
|
||||
|
|
@ -1,38 +1,23 @@
|
|||
<template>
|
||||
<div v-if="room">
|
||||
<div v-if="room" class="room-info">
|
||||
<div class="chat-header">
|
||||
<v-container fluid>
|
||||
<v-row class="chat-header-row align-center">
|
||||
<v-col class="text-center flex-grow-0 flex-shrink-1 ma-0 pa-0">
|
||||
<v-btn
|
||||
v-show="$navigation && $navigation.canPop()"
|
||||
icon
|
||||
@click.stop="$navigation.pop"
|
||||
>
|
||||
<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>
|
||||
<div class="room-name" v-if="room">
|
||||
{{ room.summary.info.title }}
|
||||
</div>
|
||||
<v-btn
|
||||
text
|
||||
class="back"
|
||||
v-show="$navigation && $navigation.canPop()"
|
||||
@click.stop="$navigation.pop"
|
||||
>
|
||||
<v-icon>arrow_back</v-icon>
|
||||
<span>BACK</span>
|
||||
</v-btn>
|
||||
</v-container>
|
||||
</div>
|
||||
|
||||
<v-card class="members ma-3">
|
||||
<v-card class="members ma-3" flat>
|
||||
<v-card-title
|
||||
>Members<v-spacer></v-spacer>
|
||||
<div>{{ room.getJoinedMemberCount() }}</div></v-card-title
|
||||
|
|
@ -40,8 +25,9 @@
|
|||
<v-card-text>
|
||||
<div
|
||||
class="member ma-2"
|
||||
v-for="member in room.getJoinedMembers()"
|
||||
v-for="(member, index) in joinedMembers"
|
||||
:key="member.userId"
|
||||
v-show="showAllMembers || index < 5"
|
||||
>
|
||||
<v-avatar class="avatar" size="40" color="grey">
|
||||
<img v-if="memberAvatar(member)" :src="memberAvatar(member)" />
|
||||
|
|
@ -51,64 +37,59 @@
|
|||
</v-avatar>
|
||||
{{ member.user ? member.user.displayName : member.name
|
||||
}}{{ member.userId == $matrix.currentUserId ? " (you)" : "" }}
|
||||
<v-btn
|
||||
color="black"
|
||||
v-if="member.userId == $matrix.currentUserId"
|
||||
text
|
||||
absolute
|
||||
right
|
||||
@click.stop="showEditDialog = true"
|
||||
>edit</v-btn
|
||||
>
|
||||
</div>
|
||||
<div class="show-all" @click="showAllMembers = !showAllMembers">
|
||||
{{ showAllMembers ? "Hide" : "Show all" }}
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<v-card class="account ma-3">
|
||||
<v-card-title>Your account</v-card-title>
|
||||
<v-card class="account ma-3" flat>
|
||||
<v-card-title>My Profile</v-card-title>
|
||||
<v-card-text>
|
||||
<div v-if="$matrix.currentUser.is_guest">
|
||||
<div>You don't have a Keanu account, yet ;)</div>
|
||||
<v-btn dark block @click.stop="upgradeAccount">Login</v-btn>
|
||||
<div>
|
||||
Your identity <b>{{ displayName }}</b> is temporary. You can change
|
||||
your name or set a password to keep it.
|
||||
</div>
|
||||
<v-btn block class="outlined-button" @click.stop="viewProfile"
|
||||
>View</v-btn
|
||||
>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<!-- EDIT dialog -->
|
||||
<v-dialog v-model="showEditDialog" class="ma-0 pa-0" width="50%">
|
||||
<v-card>
|
||||
<v-card-title>Display name</v-card-title>
|
||||
<v-card-text>
|
||||
<v-text-field v-model="displayName" />
|
||||
</v-card-text>
|
||||
<v-divider></v-divider>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn text @click="showEditDialog = false">Cancel</v-btn>
|
||||
<v-btn
|
||||
color="primary"
|
||||
text
|
||||
@click="
|
||||
$matrix.matrixClient.setDisplayName(displayName);
|
||||
showEditDialog = false;
|
||||
"
|
||||
>Ok</v-btn
|
||||
<v-card class="account ma-3" flat>
|
||||
<v-card-text>
|
||||
<v-btn color="red" block class="filled-button" @click.stop="showLeaveConfirmation = true"
|
||||
>Leave group</v-btn
|
||||
>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
<div>
|
||||
Note: This step cannot be undone. Make sure you want to logout and delete the chat forever.
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<LeaveRoomDialog :show="showLeaveConfirmation" :room="room" @close="showLeaveConfirmation = false" />
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LeaveRoomDialog from '../components/LeaveRoomDialog';
|
||||
|
||||
export default {
|
||||
name: "RoomInfo",
|
||||
components: {
|
||||
LeaveRoomDialog
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
memberCount: null,
|
||||
showEditDialog: false,
|
||||
user: null,
|
||||
displayName: "",
|
||||
showAllMembers: false,
|
||||
showLeaveConfirmation: false
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -126,6 +107,23 @@ export default {
|
|||
room() {
|
||||
return this.$matrix.currentRoom;
|
||||
},
|
||||
|
||||
joinedMembers() {
|
||||
if (!this.room) {
|
||||
return [];
|
||||
}
|
||||
const myUserId = this.$matrix.currentUserId;
|
||||
return this.room.getJoinedMembers().sort((a, b) => {
|
||||
if (a.userId == myUserId) {
|
||||
return -1;
|
||||
} else if (b.userId == myUserId) {
|
||||
return 1;
|
||||
}
|
||||
const aName = a.user ? a.user.displayName : a.name;
|
||||
const bName = b.user ? b.user.displayName : b.name;
|
||||
return aName.localeCompare(bName);
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
|
|
@ -151,8 +149,6 @@ export default {
|
|||
this.memberCount = this.room.getJoinedMemberCount();
|
||||
},
|
||||
|
||||
showRoomInfo() {},
|
||||
|
||||
memberAvatar(member) {
|
||||
if (member) {
|
||||
return member.getAvatarUrl(
|
||||
|
|
@ -166,10 +162,18 @@ export default {
|
|||
return null;
|
||||
},
|
||||
|
||||
viewProfile() {
|
||||
this.$navigation.push({ name: "Profile" }, 1);
|
||||
},
|
||||
|
||||
leaveRoom() {
|
||||
console.log("Leave");
|
||||
},
|
||||
|
||||
upgradeAccount() {
|
||||
this.$matrix
|
||||
.upgradeGuestAccount()
|
||||
.then(user => {
|
||||
.then((user) => {
|
||||
// Done, login with the "new" account to get a real token instead of our guest token.
|
||||
this.user = user;
|
||||
return this.$store.dispatch("auth/login", this.user);
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import VueRouter from 'vue-router'
|
|||
import Chat from '../components/Chat.vue'
|
||||
import Join from '../components/Join.vue'
|
||||
import Login from '../components/Login.vue'
|
||||
import Profile from '../components/Profile.vue'
|
||||
import util from '../plugins/utils'
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
|
@ -25,6 +26,11 @@ const routes = [
|
|||
component: () => import('../components/RoomInfo.vue'),
|
||||
props: true,
|
||||
},
|
||||
{
|
||||
path: '/profile',
|
||||
name: 'Profile',
|
||||
component: Profile
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'Login',
|
||||
|
|
|
|||
|
|
@ -19,6 +19,11 @@ export default {
|
|||
next(routes[0]);
|
||||
return;
|
||||
}
|
||||
// If we have a room id param, it needs to be the same, else we call "next" with the correct one
|
||||
if (index >= 0 && routes[index].params && to.params && routes[index].params.roomId != to.params.roomId) {
|
||||
next(routes[0]);
|
||||
return;
|
||||
}
|
||||
if (index >= 0) {
|
||||
routes.splice(index + 1);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue