Guest avatars
This commit is contained in:
N-Pex
parent
7b2b8df829
commit
dbd7c28660
18 changed files with 301 additions and 103 deletions
|
|
@ -1,45 +1,65 @@
|
|||
<template>
|
||||
<div v-if="room">
|
||||
<v-container fluid>
|
||||
<v-row class="chat-header-row align-center">
|
||||
<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="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-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-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>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</div>
|
||||
|
||||
<v-card class="members ma-3">
|
||||
<v-card-title>Members<v-spacer></v-spacer><div>{{ room.getJoinedMemberCount() }}</div></v-card-title>
|
||||
<v-card-title
|
||||
>Members<v-spacer></v-spacer>
|
||||
<div>{{ room.getJoinedMemberCount() }}</div></v-card-title
|
||||
>
|
||||
<v-card-text>
|
||||
<div class="member ma-2" 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.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
|
||||
class="member ma-2"
|
||||
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.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>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
|
@ -54,22 +74,29 @@
|
|||
</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-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
|
|
@ -82,7 +109,7 @@ export default {
|
|||
showEditDialog: false,
|
||||
user: null,
|
||||
displayName: "",
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$matrix.on("Room.timeline", this.onEvent);
|
||||
|
|
@ -106,8 +133,8 @@ export default {
|
|||
handler(newVal, ignoredOldVal) {
|
||||
console.log("RoomInfo: Current room changed");
|
||||
this.memberCount = newVal.getJoinedMemberCount();
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
|
@ -124,9 +151,7 @@ export default {
|
|||
this.memberCount = this.room.getJoinedMemberCount();
|
||||
},
|
||||
|
||||
showRoomInfo() {
|
||||
|
||||
},
|
||||
showRoomInfo() {},
|
||||
|
||||
memberAvatar(member) {
|
||||
if (member) {
|
||||
|
|
@ -142,14 +167,20 @@ export default {
|
|||
},
|
||||
|
||||
upgradeAccount() {
|
||||
this.$matrix.upgradeGuestAccount()
|
||||
.then(() => {
|
||||
console.log("Done");
|
||||
})
|
||||
.catch(err => {
|
||||
console.log("ERROR", err);
|
||||
})
|
||||
}
|
||||
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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue