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

Merge branch '578-room-members-ux-group-under-tabs-and-expansion-panel' into 'dev'

Browse source 
Room members ux: introduce Tabs and Expansion panels usage

Closes #578

See merge request keanuapp/keanuapp-weblite!278
This commit is contained in:
N Pex 2024-02-05 14:38:55 +00:00
commit f8e67afa31
4 changed files with 68 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/assets/css/chat.scss
View file

@ -994,21 +994,12 @@ body {
margin-left: 38px; margin-left: 38px;
} }
.member::after {
content: " ";
display: block;
margin: 10px 0px;
bottom: 0px;
height: 1px;
background-color: #e1e1e1;
width: 100%;
}
.show-all { .show-all {
color: black; color: black;
font-size: 14 * $chat-text-size; font-size: 14 * $chat-text-size;
font-weight: bold; font-weight: bold;
margin-left: 10px; margin-left: 10px;
padding: 10px;
[dir="rtl"] & { [dir="rtl"] & {
margin-left: initial; margin-left: initial;
margin-right: 10px; margin-right: 10px;

1
src/assets/translations/en.json
View file

@ -23,6 +23,7 @@
}, },
"menu": { "menu": {
"start_private_chat": "Direct Message with this user", "start_private_chat": "Direct Message with this user",
"actions": "actions",
"reply": "Reply", "reply": "Reply",
"edit": "Edit", "edit": "Edit",
"delete": "Delete", "delete": "Delete",

1
src/components/DeviceList.vue
View file

@ -1,6 +1,5 @@
<template> <template>
<v-list dense @click.native.stop="nullEvent"> <v-list dense @click.native.stop="nullEvent">
<v-subheader>{{$t('device_list.title')}}</v-subheader>
<v-list-item-group color="primary"> <v-list-item-group color="primary">
<v-list-item <v-list-item
v-for="device in devices" v-for="device in devices"

128
src/components/RoomInfo.vue
View file

@ -166,58 +166,72 @@
>{{ $t("room_info.members") }}<v-spacer></v-spacer> >{{ $t("room_info.members") }}<v-spacer></v-spacer>
<div>{{ members.length }}</div></v-card-title <div>{{ members.length }}</div></v-card-title
> >
<v-card-text> <v-expansion-panels>
<div <v-expansion-panel v-for="(member, index) in members" :key="member.userId">
class="member ma-2" <v-expansion-panel-header
v-for="(member, index) in members" class="member"
:key="member.userId" v-show="showAllMembers || index < SHOW_MEMBER_LIMIT"
v-show="showAllMembers || index < SHOW_MEMBER_LIMIT" >
@click="toggleMemberExpanded(member)" <div>
> <v-avatar class="avatar" size="32" color="grey">
<v-avatar class="avatar" size="32" color="grey"> <img v-if="memberAvatar(member)" :src="memberAvatar(member)" />
<img v-if="memberAvatar(member)" :src="memberAvatar(member)" /> <span v-else class="white--text headline">{{
<span v-else class="white--text headline">{{ member.name.substring(0, 1).toUpperCase()
member.name.substring(0, 1).toUpperCase() }}</span>
}}</span> </v-avatar>
</v-avatar> <span class="user-name">
<span class="user-name"> {{
{{ member.userId == $matrix.currentUserId
member.userId == $matrix.currentUserId ? $t("room_info.user_you", {
? $t("room_info.user_you", { user: member.user ? member.user.displayName : member.name,
user: member.user ? member.user.displayName : member.name, })
}) : $t("room_info.user", {
: $t("room_info.user", { user: member.user ? member.user.displayName : member.name,
user: member.user ? member.user.displayName : member.name, })
}) }}
}} </span>
</span> <span v-if="isAdmin(member)" class="user-power">
<span v-if="isAdmin(member)" class="user-power"> {{ $t("room_info.user_admin") }}
{{ $t("room_info.user_admin") }} </span>
</span> <span v-else-if="isModerator(member)" class="user-power">
<span v-else-if="isModerator(member)" class="user-power"> {{ $t("room_info.user_moderator") }}
{{ $t("room_info.user_moderator") }} </span>
</span> </div>
<div v-if="member.userId != $matrix.currentUserId && !$matrix.isDirectRoomWith(room, member.userId) && expandedMembers.includes(member)" class="start-private-chat clickable" @click="startPrivateChat(member.userId)">{{ $t("menu.start_private_chat") }}</div> </v-expansion-panel-header>
<div v-if="canKickUser(member) || canBanUser(member)"> <v-expansion-panel-content>
<div v-if="member.userId != $matrix.currentUserId && expandedMembers.includes(member)" class="mt-2">{{ String.fromCharCode(160) }}</div> <v-tabs>
<div v-if="member.userId != $matrix.currentUserId && expandedMembers.includes(member) && canKickUser(member)" class="start-private-chat clickable" @click="kickUser(member)">{{ $t("menu.user_kick") }}</div> <v-tab v-if="member.userId != $matrix.currentUserId">{{ $t("menu.actions") }}</v-tab>
<div v-if="member.userId != $matrix.currentUserId && expandedMembers.includes(member) && canBanUser(member)" class="start-private-chat clickable" @click="banUser(member)">{{ $t("menu.user_kick_and_ban") }}</div> <v-tab>{{$t('device_list.title')}}</v-tab>
</div> <!-- TODO: other rooms in common
<div v-if="member.userId != $matrix.currentUserId && expandedMembers.includes(member)" class="mt-2">{{ String.fromCharCode(160) }}</div> <v-tab v-if="member.userId != $matrix.currentUserId">{{ $t("menu.common_room") }}</v-tab>
<div v-if="member.userId != $matrix.currentUserId && expandedMembers.includes(member) && !isAdmin(member) && canMakeAdmin(member)" class="start-private-chat clickable" @click="makeAdmin(member)">{{ $t("menu.user_make_admin") }}</div> -->
<div v-if="member.userId != $matrix.currentUserId && expandedMembers.includes(member) && !isModerator(member) && !isAdmin(member) && canMakeModerator(member)" class="start-private-chat clickable" @click="makeModerator(member)">{{ $t("menu.user_make_moderator") }}</div> <v-tab-item v-if="member.userId != $matrix.currentUserId">
<div v-if="member.userId != $matrix.currentUserId && expandedMembers.includes(member) && isModerator(member) && canRevokeModerator(member)" class="start-private-chat clickable" @click="revokeModerator(member)">{{ $t("menu.user_revoke_moderator") }}</div> <div class="py-3">
<DeviceList <v-btn text v-if="member.userId != $matrix.currentUserId && !$matrix.isDirectRoomWith(room, member.userId)" class="start-private-chat clickable d-block text-none" @click="startPrivateChat(member.userId)">{{ $t("menu.start_private_chat") }}</v-btn>
v-if="expandedMembers.includes(member)" <div v-if="canKickUser(member) || canBanUser(member)">
:member="member" <div v-if="member.userId != $matrix.currentUserId" class="mt-2">{{ String.fromCharCode(160) }}</div>
/> <v-btn text v-if="member.userId != $matrix.currentUserId && canKickUser(member)" class="start-private-chat clickable d-block text-none" @click="kickUser(member)">{{ $t("menu.user_kick") }}</v-btn>
</div> <v-btn text v-if="member.userId != $matrix.currentUserId && canBanUser(member)" class="start-private-chat clickable d-block text-none" @click="banUser(member)">{{ $t("menu.user_kick_and_ban") }}</v-btn>
<div class="show-all" @click="showAllMembers = !showAllMembers" v-if="members.length > SHOW_MEMBER_LIMIT"> </div>
{{ <div v-if="member.userId != $matrix.currentUserId" class="mt-2">{{ String.fromCharCode(160) }}</div>
showAllMembers ? $t("room_info.hide_all") : $t("room_info.show_all") <v-btn text v-if="member.userId != $matrix.currentUserId && !isAdmin(member) && canMakeAdmin(member)" class="start-private-chat clickable d-block text-none" @click="makeAdmin(member)">{{ $t("menu.user_make_admin") }}</v-btn>
}} <v-btn text v-if="member.userId != $matrix.currentUserId && !isModerator(member) && !isAdmin(member) && canMakeModerator(member)" class="start-private-chat clickable d-block text-none" @click="makeModerator(member)">{{ $t("menu.user_make_moderator") }}</v-btn>
</div> <v-btn text v-if="member.userId != $matrix.currentUserId && isModerator(member) && canRevokeModerator(member)" class="start-private-chat clickable d-block text-none" @click="revokeModerator(member)">{{ $t("menu.user_revoke_moderator") }}</v-btn>
</v-card-text> </div>
</v-tab-item>
<v-tab-item>
<DeviceList :member="member" />
</v-tab-item>
<!-- <v-tab-item v-if="member.userId != $matrix.currentUserId">
{{ "TODO" }}
</v-tab-item> -->
</v-tabs>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
<div class="show-all p-2" @click="showAllMembers = !showAllMembers" v-if="members.length > SHOW_MEMBER_LIMIT">
{{ showAllMembers ? $t("room_info.hide_all") : $t("room_info.show_all") }}
</div>
</v-card> </v-card>
<!-- EXPORT CHAT --> <!-- EXPORT CHAT -->
@ -282,7 +296,6 @@ export default {
showAllMembers: false, showAllMembers: false,
showLeaveConfirmation: false, showLeaveConfirmation: false,
showPurgeConfirmation: false, showPurgeConfirmation: false,
expandedMembers: [],
buildVersion: "", buildVersion: "",
updatingJoinRule: false, // Flag if we are processing update curerntly updatingJoinRule: false, // Flag if we are processing update curerntly
joinRules: [ joinRules: [
@ -441,15 +454,6 @@ export default {
this.$navigation.push({ name: "Profile" }, 1); this.$navigation.push({ name: "Profile" }, 1);
}, },
toggleMemberExpanded(member) {
const index = this.expandedMembers.indexOf(member);
if (index > -1) {
this.expandedMembers.splice(index, 1);
} else {
this.expandedMembers.push(member);
}
},
/** /**
* Set room join rule. * Set room join rule.
* @param joinRule One of "invite" or "public". Currently always disables guest access. * @param joinRule One of "invite" or "public". Currently always disables guest access.