Vuetify updates

This commit is contained in:
N-Pex 2025-05-06 10:53:34 +02:00
parent c913a40e18
commit c47b975723
43 changed files with 197 additions and 150 deletions

View file

@ -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>