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

room members ux: Tabs and Expanssion panels usage

Browse source
This commit is contained in:
10G Meow 2024-02-04 20:59:58 +02:00
parent 63810b0208
commit 38b02ff2cf
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"

70
src/components/RoomInfo.vue
View file

@ -166,14 +166,13 @@
>{{ $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">{{
@ -197,27 +196,42 @@
<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 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> </div>
</v-expansion-panel-header>
<v-expansion-panel-content>
<v-tabs>
<v-tab v-if="member.userId != $matrix.currentUserId">{{ $t("menu.actions") }}</v-tab>
<v-tab>{{$t('device_list.title')}}</v-tab>
<!-- TODO: other rooms in common
<v-tab v-if="member.userId != $matrix.currentUserId">{{ $t("menu.common_room") }}</v-tab>
-->
<v-tab-item v-if="member.userId != $matrix.currentUserId">
<div class="py-3">
<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>
<div v-if="canKickUser(member) || canBanUser(member)"> <div v-if="canKickUser(member) || canBanUser(member)">
<div v-if="member.userId != $matrix.currentUserId && expandedMembers.includes(member)" class="mt-2">{{ String.fromCharCode(160) }}</div> <div v-if="member.userId != $matrix.currentUserId" class="mt-2">{{ String.fromCharCode(160) }}</div>
<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-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-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-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> </div>
<div v-if="member.userId != $matrix.currentUserId && expandedMembers.includes(member)" class="mt-2">{{ String.fromCharCode(160) }}</div> <div v-if="member.userId != $matrix.currentUserId" class="mt-2">{{ String.fromCharCode(160) }}</div>
<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> <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>
<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-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-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> <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>
<DeviceList
v-if="expandedMembers.includes(member)"
:member="member"
/>
</div> </div>
<div class="show-all" @click="showAllMembers = !showAllMembers" v-if="members.length > SHOW_MEMBER_LIMIT"> </v-tab-item>
{{ <v-tab-item>
showAllMembers ? $t("room_info.hide_all") : $t("room_info.show_all") <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> </div>
</v-card-text>
</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.