butter/keanu-weblite
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

New room list and chat header design

Browse source
This commit is contained in:
N Pex 2023-03-03 14:43:53 +00:00
parent 7396fbc959
commit baf0120eee
23 changed files with 651 additions and 287 deletions
Download patch file Download diff file Expand all files Collapse all files

97
src/components/RoomList.vue
View file

@ -1,70 +1,59 @@
<template>
<v-list dense class="room-list">
<div class="h4">{{ title }}</div>
<v-list-item-group v-model="currentRoomId" color="primary">
<v-list-item v-if="showCreate" @click.stop="$emit('newroom')">
<v-list-item v-if="showCreate" @click.stop="$emit('newroom')" class="room-list-room">
<v-list-item-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-content>
<v-list-item-title class="new-room">{{
<v-list-item-title class="room-list-new-room">{{
$t("menu.new_room")
}}</v-list-item-title>
</v-list-item-content>
</v-list-item>
<!-- invites -->
<v-list-item
:disabled="roomsProcessing[room.roomId]"
v-for="room in invitedRooms"
:key="room.roomId"
:value="room.roomId"
>
<v-list-item-avatar size="40" color="#e0e0e0">
<v-img v-if="room.avatar" :src="room.avatar" />
<v-list-item :disabled="roomsProcessing[room.roomId]" v-for="room in invitedRooms" :key="room.roomId"
:value="room.roomId" class="room-list-room">
<v-list-item-avatar size="42" color="#d9d9d9">
<v-img v-if="roomAvatar(room)" :src="roomAvatar(room)" />
<span v-else class="white--text headline">{{
room.name.substring(0, 1).toUpperCase()
}}</span>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>{{ room.name }}</v-list-item-title>
<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-content>
<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
id="btn-reject"
class="filled-button"
color="black"
@click.stop="rejectInvitation(room)"
text
>{{ $t("menu.ignore") }}</v-btn
>
<v-btn id="btn-accept" class="filled-button" depressed color="black" @click.stop="acceptInvitation(room)">{{
$t("menu.join") }}</v-btn>
<v-btn 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
v-for="room in joinedRooms"
:key="room.roomId"
:value="room.roomId"
>
<v-list-item-avatar size="40" color="#e0e0e0">
<v-img v-if="room.avatar" :src="room.avatar" />
<v-list-item v-for="room in joinedRooms" :key="room.roomId" :value="room.roomId" class="room-list-room"
#default="{ active }">
<v-list-item-avatar size="42" color="#d9d9d9">
<v-img v-if="roomAvatar(room)" :src="roomAvatar(room)" />
<span v-else class="white--text headline">{{
room.name.substring(0, 1).toUpperCase()
}}</span>
</v-list-item-avatar>
<div class="room-list-notification-count" v-if="notificationCount(room) > 0">
{{ notificationCount(room) }}
</div>
<v-list-item-content>
<v-list-item-title>{{ room.name }}</v-list-item-title>
<v-list-item-subtitle>{{ room.topic }}</v-list-item-subtitle>
<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-content>
<v-list-item-action>
<v-icon size="16" v-if="active">$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-list>
@ -108,6 +97,26 @@ export default {
},
methods: {
roomAvatar(room) {
if (this.isDirect(room)) {
if (room.avatar) {
return room.avatar;
}
const membersNotMe = room.getMembers().filter(m => m.userId != this.$matrix.currentUserId);
if (membersNotMe && membersNotMe.length == 1) {
return membersNotMe[0].getAvatarUrl(
this.$matrix.matrixClient.getHomeserverUrl(),
42,
42,
"scale",
true
);
}
} else {
return room.avatar;
}
},
sortItemsOnName(items) {
if (items == null) {
return [];
@ -166,6 +175,14 @@ export default {
Vue.delete(this.roomsProcessing, room.roomId);
});
},
isPublic(room) {
return this.$matrix.getRoomJoinRule(room) === "public"
},
isDirect(room) {
return this.$matrix.isDirectRoom(room);
}
},
watch: {