butter/keanu-weblite
3
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;
}
.member::after {
content: " ";
display: block;
margin: 10px 0px;
bottom: 0px;
height: 1px;
background-color: #e1e1e1;
width: 100%;
}
.show-all {
color: black;
font-size: 14 * $chat-text-size;
font-weight: bold;
margin-left: 10px;
padding: 10px;
[dir="rtl"] & {
margin-left: initial;
margin-right: 10px;

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

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

1
src/components/DeviceList.vue
View file

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

128
src/components/RoomInfo.vue
View file

@ -166,58 +166,72 @@
>{{ $t("room_info.members") }}<v-spacer></v-spacer>
<div>{{ members.length }}</div></v-card-title
>
<v-card-text>
<div
class="member ma-2"
v-for="(member, index) in members"
:key="member.userId"
v-show="showAllMembers || index < SHOW_MEMBER_LIMIT"
@click="toggleMemberExpanded(member)"
>
<v-avatar class="avatar" size="32" color="grey">
<img v-if="memberAvatar(member)" :src="memberAvatar(member)" />
<span v-else class="white--text headline">{{
member.name.substring(0, 1).toUpperCase()
}}</span>
</v-avatar>
<span class="user-name">
{{
member.userId == $matrix.currentUserId
? $t("room_info.user_you", {
user: member.user ? member.user.displayName : member.name,
})
: $t("room_info.user", {
user: member.user ? member.user.displayName : member.name,
})
}}
</span>
<span v-if="isAdmin(member)" class="user-power">
{{ $t("room_info.user_admin") }}
</span>
<span v-else-if="isModerator(member)" class="user-power">
{{ $t("room_info.user_moderator") }}
</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-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 && expandedMembers.includes(member) && canKickUser(member)" class="start-private-chat clickable" @click="kickUser(member)">{{ $t("menu.user_kick") }}</div>
<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>
</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 && 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>
<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>
<DeviceList
v-if="expandedMembers.includes(member)"
:member="member"
/>
</div>
<div class="show-all" @click="showAllMembers = !showAllMembers" v-if="members.length > SHOW_MEMBER_LIMIT">
{{
showAllMembers ? $t("room_info.hide_all") : $t("room_info.show_all")
}}
</div>
</v-card-text>
<v-expansion-panels>
<v-expansion-panel v-for="(member, index) in members" :key="member.userId">
<v-expansion-panel-header
class="member"
v-show="showAllMembers || index < SHOW_MEMBER_LIMIT"
>
<div>
<v-avatar class="avatar" size="32" color="grey">
<img v-if="memberAvatar(member)" :src="memberAvatar(member)" />
<span v-else class="white--text headline">{{
member.name.substring(0, 1).toUpperCase()
}}</span>
</v-avatar>
<span class="user-name">
{{
member.userId == $matrix.currentUserId
? $t("room_info.user_you", {
user: member.user ? member.user.displayName : member.name,
})
: $t("room_info.user", {
user: member.user ? member.user.displayName : member.name,
})
}}
</span>
<span v-if="isAdmin(member)" class="user-power">
{{ $t("room_info.user_admin") }}
</span>
<span v-else-if="isModerator(member)" class="user-power">
{{ $t("room_info.user_moderator") }}
</span>
</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="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>
<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 v-if="member.userId != $matrix.currentUserId" class="mt-2">{{ String.fromCharCode(160) }}</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>
<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>
<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>
</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>
<!-- EXPORT CHAT -->
@ -282,7 +296,6 @@ export default {
showAllMembers: false,
showLeaveConfirmation: false,
showPurgeConfirmation: false,
expandedMembers: [],
buildVersion: "",
updatingJoinRule: false, // Flag if we are processing update curerntly
joinRules: [
@ -441,15 +454,6 @@ export default {
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.
* @param joinRule One of "invite" or "public". Currently always disables guest access.