Vuetify updates
This commit is contained in:
parent
c913a40e18
commit
c47b975723
43 changed files with 197 additions and 150 deletions
|
|
@ -1,54 +1,61 @@
|
|||
<template>
|
||||
<v-list dense class="room-list">
|
||||
<v-list-item-group @change="roomChange" color="primary">
|
||||
|
||||
<v-list-item v-if="showCreate" @click.stop="$emit('newroom')" class="room-list-room" :value="null">
|
||||
<v-list-item-avatar class="round" size="42" color="#d9d9d9">
|
||||
<v-list-item v-if="showCreate" @click.stop="$emit('newroom')" class="room-list-room" :value="null">
|
||||
<template v-slot:prepend>
|
||||
<v-avatar class="round" size="42" color="#d9d9d9">
|
||||
<v-icon size="11">$vuetify.icons.ic_new_room</v-icon>
|
||||
</v-list-item-avatar>
|
||||
<v-list-item-title class="room-list-new-room">{{
|
||||
$t("menu.new_room")
|
||||
}}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-avatar>
|
||||
</template>
|
||||
|
||||
<!-- invites -->
|
||||
<v-list-item :disabled="roomsProcessing[room.roomId]" v-for="room in invitedRooms" :key="room.roomId"
|
||||
:value="room" class="room-list-room">
|
||||
<v-list-item-avatar size="42" color="#d9d9d9">
|
||||
<v-list-item-title class="room-list-new-room">{{
|
||||
$t("menu.new_room")
|
||||
}}</v-list-item-title>
|
||||
</v-list-item>
|
||||
|
||||
<!-- invites -->
|
||||
<v-list-item :disabled="roomsProcessing[room.roomId]" v-for="room in invitedRooms" :key="room.roomId"
|
||||
:value="room.roomId" class="room-list-room">
|
||||
<template v-slot:prepend>
|
||||
<v-avatar size="42" color="#d9d9d9">
|
||||
<AuthedImage v-if="roomAvatar(room)" :src="roomAvatar(room)" />
|
||||
<span v-else class="white--text headline">{{
|
||||
<span v-else class="text-white headline">{{
|
||||
room.name.substring(0, 1).toUpperCase()
|
||||
}}</span>
|
||||
</v-list-item-avatar>
|
||||
<v-list-item-title class="room-list-name">{{ room.name }}</v-list-item-title>
|
||||
<v-list-item-subtitle>{{ room.topic }}</v-list-item-subtitle>
|
||||
<v-list-item-action>
|
||||
<v-btn id="btn-accept" class="filled-button" depressed color="black" @click.stop="acceptInvitation(room)">{{
|
||||
$t("menu.join") }}</v-btn>
|
||||
<v-btn v-if="!room.isServiceNoticeRoom" id="btn-reject" class="filled-button" color="black" @click.stop="rejectInvitation(room)" text>{{
|
||||
</v-avatar>
|
||||
</template>
|
||||
|
||||
<v-list-item-title class="room-list-name">{{ room.name }}</v-list-item-title>
|
||||
<v-list-item-subtitle>{{ room.topic }}</v-list-item-subtitle>
|
||||
<v-list-item-action>
|
||||
<v-btn id="btn-accept" class="filled-button" depressed color="black" @click.stop="acceptInvitation(room)">{{
|
||||
$t("menu.join") }}</v-btn>
|
||||
<v-btn v-if="!room.isServiceNoticeRoom" id="btn-reject" class="filled-button" color="black"
|
||||
@click.stop="rejectInvitation(room)" text>{{
|
||||
$t("menu.ignore") }}</v-btn>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
|
||||
<v-list-item v-for="room in joinedRooms" :key="room.roomId" :value="room" class="room-list-room">
|
||||
<v-list-item-avatar size="42" color="#d9d9d9" :class="[{'rounded-circle': isDirect(room)}]">
|
||||
<v-list-item v-for="room in joinedRooms" :key="room.roomId" :value="room.roomId"
|
||||
@click="currentRoomId = room.roomId" class="room-list-room">
|
||||
<template v-slot:prepend>
|
||||
<v-avatar size="42" color="#d9d9d9" :class="[{ 'rounded-circle': isDirect(room) }]">
|
||||
<AuthedImage v-if="roomAvatar(room)" :src="roomAvatar(room)" />
|
||||
<span v-else class="white--text headline">{{
|
||||
<span v-else class="text-white headline">{{
|
||||
room.name.substring(0, 1).toUpperCase()
|
||||
}}</span>
|
||||
</v-list-item-avatar>
|
||||
<v-list-item-title class="room-list-name">{{ room.name }}
|
||||
<!-- <v-icon class="ml-2 mb-1" size="10" v-if="isPublic(room)">$vuetify.icons.ic_public</v-icon> -->
|
||||
</v-list-item-title>
|
||||
<v-list-item-subtitle class="room-list-new-messages" v-if="notificationCount(room) > 0">
|
||||
{{ $t("room.room_list_new_messages", { count: notificationCount(room) }) }}
|
||||
</v-list-item-subtitle>
|
||||
<v-list-item-action>
|
||||
<v-icon size="16" v-if="room.roomId == $matrix.currentRoomId">$vuetify.icons.ic_circle_filled</v-icon>
|
||||
<v-icon size="16" v-else>$vuetify.icons.ic_circle</v-icon>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
</v-list-item-group>
|
||||
</v-avatar>
|
||||
</template>
|
||||
<v-list-item-title class="room-list-name">{{ room.name }}
|
||||
<!-- <v-icon class="ml-2 mb-1" size="10" v-if="isPublic(room)">$vuetify.icons.ic_public</v-icon> -->
|
||||
</v-list-item-title>
|
||||
<v-list-item-subtitle class="room-list-new-messages" v-if="notificationCount(room) > 0">
|
||||
{{ $t("room.room_list_new_messages", { count: notificationCount(room) }) }}
|
||||
</v-list-item-subtitle>
|
||||
<v-list-item-action>
|
||||
<v-icon size="16" v-if="room.roomId == $matrix.currentRoomId">$vuetify.icons.ic_circle_filled</v-icon>
|
||||
<v-icon size="16" v-else>$vuetify.icons.ic_circle</v-icon>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</template>
|
||||
|
||||
|
|
@ -75,6 +82,8 @@ export default {
|
|||
},
|
||||
|
||||
data: () => ({
|
||||
currentRoomId: null,
|
||||
|
||||
/** A list of rooms currently processing some operation, like "join" or "reject" */
|
||||
roomsProcessing: {},
|
||||
}),
|
||||
|
|
@ -181,25 +190,25 @@ export default {
|
|||
isDirect(room) {
|
||||
return this.$matrix.isDirectRoom(room);
|
||||
},
|
||||
},
|
||||
|
||||
roomChange(room) {
|
||||
if (room == null || room == undefined || room == 0) {
|
||||
watch: {
|
||||
currentRoomId() {
|
||||
if (this.currentRoomId == null || this.currentRoomId == undefined) {
|
||||
// Ignore, this is caused by "new room" etc.
|
||||
return;
|
||||
}
|
||||
if (room.isServiceNoticeRoom && room.selfMembership === "invite") {
|
||||
return; // Nothing should happen when click on invite to server notices room, just the "join" button is enabled.
|
||||
}
|
||||
this.$emit("close");
|
||||
this.$navigation.push(
|
||||
{
|
||||
name: "Chat",
|
||||
params: { roomId: util.sanitizeRoomId(room.roomId) },
|
||||
params: { roomId: util.sanitizeRoomId(this.currentRoomId) },
|
||||
},
|
||||
-1
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue