Room details: add dialog to member list
This commit is contained in:
10G Meow
N-Pex
parent
eec0df7c97
commit
cebda1686e
13 changed files with 341 additions and 202 deletions
|
|
@ -189,6 +189,14 @@
|
|||
v-model="readOnlyRoom"
|
||||
></v-switch>
|
||||
</v-card-text>
|
||||
<v-card-text class="with-right-label" style="align-items:center" v-if="canViewRetentionPolicy">
|
||||
<div>
|
||||
<div class="option-title">{{ $t('room_info.message_retention') }}</div>
|
||||
<div class="option-text">{{ $t('room_info.message_retention_info') }}</div>
|
||||
</div>
|
||||
<div class="text-right">{{ messageRetention }}</div>
|
||||
<v-btn v-on:click="showMessageRetentionDialog = true" v-if="canChangeRetentionPolicy" icon size="x-small"><v-icon color="black">edit</v-icon></v-btn>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<v-card class="members ma-3" flat>
|
||||
|
|
@ -196,69 +204,48 @@
|
|||
>{{ $t("room_info.members") }}<v-spacer></v-spacer>
|
||||
<div>{{ members.length }}</div></v-card-title
|
||||
>
|
||||
<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>
|
||||
<v-list>
|
||||
<v-list-item-group>
|
||||
<template v-for="(member, index) in members" >
|
||||
<v-list-item
|
||||
:key="member.userId"
|
||||
class="member"
|
||||
v-show="showAllMembers || index < SHOW_MEMBER_LIMIT"
|
||||
@click="onListItemClick(member)"
|
||||
>
|
||||
<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-list-item>
|
||||
<v-divider
|
||||
v-if="(showAllMembers || index < SHOW_MEMBER_LIMIT) && index < members.length - 1"
|
||||
:key="index"
|
||||
></v-divider>
|
||||
</template>
|
||||
</v-list-item-group>
|
||||
</v-list>
|
||||
<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>
|
||||
|
|
@ -279,6 +266,13 @@
|
|||
{{ $t("room_info.version_info", { version: buildVersion }) }}
|
||||
</div>
|
||||
|
||||
<MemberActionDialog
|
||||
:show="showMemberActionConfirmation"
|
||||
:activeMember="activeMember || members[0]"
|
||||
:room="room"
|
||||
@close="showMemberActionConfirmation = false"
|
||||
/>
|
||||
|
||||
<LeaveRoomDialog
|
||||
:show="showLeaveConfirmation"
|
||||
:room="room"
|
||||
|
|
@ -306,11 +300,11 @@
|
|||
import LeaveRoomDialog from "../components/LeaveRoomDialog";
|
||||
import PurgeRoomDialog from "../components/PurgeRoomDialog";
|
||||
import MessageRetentionDialog from "../components/MessageRetentionDialog";
|
||||
import DeviceList from "../components/DeviceList";
|
||||
import RoomExport from "../components/RoomExport";
|
||||
import RoomAvatarPicker from "../components/RoomAvatarPicker";
|
||||
import CopyLink from "../components/CopyLink.vue"
|
||||
import RoomTypeSelector from "./RoomTypeSelector.vue";
|
||||
import MemberActionDialog from "./MemberActionDialog.vue"
|
||||
import roomInfoMixin from "./roomInfoMixin";
|
||||
import roomTypeMixin from "./roomTypeMixin";
|
||||
import util, { STATE_EVENT_ROOM_TYPE } from "../plugins/utils";
|
||||
|
|
@ -322,7 +316,7 @@ export default {
|
|||
LeaveRoomDialog,
|
||||
PurgeRoomDialog,
|
||||
MessageRetentionDialog,
|
||||
DeviceList,
|
||||
MemberActionDialog,
|
||||
RoomExport,
|
||||
RoomAvatarPicker,
|
||||
RoomTypeSelector,
|
||||
|
|
@ -333,6 +327,7 @@ export default {
|
|||
members: [],
|
||||
user: null,
|
||||
showAllMembers: false,
|
||||
showMemberActionConfirmation: false,
|
||||
showLeaveConfirmation: false,
|
||||
showPurgeConfirmation: false,
|
||||
showMessageRetentionDialog: false,
|
||||
|
|
@ -352,7 +347,8 @@ export default {
|
|||
},
|
||||
],
|
||||
SHOW_MEMBER_LIMIT: 5,
|
||||
exporting: false
|
||||
exporting: false,
|
||||
activeMember: null
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -446,6 +442,10 @@ export default {
|
|||
onMessageRetention(retention){
|
||||
const retentionPeriodsFound = this.retentionPeriods.find(rp => rp.value===retention)
|
||||
this.messageRetention = retentionPeriodsFound.text
|
||||
},
|
||||
onListItemClick(member) {
|
||||
this.activeMember = member
|
||||
this.showMemberActionConfirmation = true
|
||||
},
|
||||
onEvent(event) {
|
||||
if (this.room && this.room.roomId == event.getRoomId()) {
|
||||
|
|
@ -490,19 +490,6 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
memberAvatar(member) {
|
||||
if (member) {
|
||||
return member.getAvatarUrl(
|
||||
this.$matrix.matrixClient.getHomeserverUrl(),
|
||||
40,
|
||||
40,
|
||||
"scale",
|
||||
true
|
||||
);
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
viewProfile() {
|
||||
this.$navigation.push({ name: "Profile" }, 1);
|
||||
},
|
||||
|
|
@ -551,49 +538,11 @@ export default {
|
|||
this.updatingJoinRule = false;
|
||||
});
|
||||
},
|
||||
startPrivateChat(userId) {
|
||||
this.$matrix
|
||||
.getOrCreatePrivateChat(userId)
|
||||
.then((room) => {
|
||||
this.$nextTick(() => {
|
||||
this.$navigation.push(
|
||||
{
|
||||
name: "Chat",
|
||||
params: {
|
||||
roomId: util.sanitizeRoomId(
|
||||
room.getCanonicalAlias() || room.roomId
|
||||
),
|
||||
},
|
||||
},
|
||||
-1
|
||||
);
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
});
|
||||
},
|
||||
exportRoom() {
|
||||
if (this.room) {
|
||||
this.exporting = true;
|
||||
}
|
||||
},
|
||||
canKickUser(member) {
|
||||
if (this.room) {
|
||||
const myUserId = this.$matrix.currentUserId;
|
||||
const me = this.room.getMember(myUserId);
|
||||
return me && me.powerLevel > member.powerLevel && this.room.currentState && this.room.currentState.hasSufficientPowerLevelFor("kick", me.powerLevel);
|
||||
}
|
||||
return false;
|
||||
},
|
||||
canBanUser(member) {
|
||||
if (this.room) {
|
||||
const myUserId = this.$matrix.currentUserId;
|
||||
const me = this.room.getMember(myUserId);
|
||||
return me && me.powerLevelNorm > member.powerLevelNorm && this.room.currentState && this.room.currentState.hasSufficientPowerLevelFor("ban", me.powerLevel);
|
||||
}
|
||||
return false;
|
||||
},
|
||||
/**
|
||||
* Return true if we can change power levels in the room, i.e. make read only room
|
||||
*/
|
||||
|
|
@ -610,76 +559,6 @@ export default {
|
|||
}
|
||||
return false;
|
||||
},
|
||||
// TODO - following power level comparisons assume that default power levels are used in the room!
|
||||
isAdmin(member) {
|
||||
return member.powerLevelNorm > 50;
|
||||
},
|
||||
isModerator(member) {
|
||||
return member.powerLevelNorm > 0 && member.powerLevelNorm <= 50;
|
||||
},
|
||||
/**
|
||||
* Return true if WE can make the member an admin
|
||||
* @param member
|
||||
*/
|
||||
canMakeAdmin(ignoredmember) {
|
||||
if (this.room) {
|
||||
const myUserId = this.$matrix.currentUserId;
|
||||
const me = this.room.getMember(myUserId);
|
||||
return me && this.isAdmin(me);
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
/**
|
||||
* Return true if WE can make the member a moderator
|
||||
* @param member
|
||||
*/
|
||||
canMakeModerator(ignoredmember) {
|
||||
if (this.room) {
|
||||
const myUserId = this.$matrix.currentUserId;
|
||||
const me = this.room.getMember(myUserId);
|
||||
return me && this.isAdmin(me);
|
||||
}
|
||||
return false;
|
||||
},
|
||||
/**
|
||||
* Return true if WE can "unmake" the member a moderator
|
||||
* @param member
|
||||
*/
|
||||
canRevokeModerator(member) {
|
||||
if (this.room) {
|
||||
const myUserId = this.$matrix.currentUserId;
|
||||
const me = this.room.getMember(myUserId);
|
||||
return me && this.isAdmin(me) && me.powerLevel > member.powerLevel;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
makeAdmin(member) {
|
||||
if (this.room) {
|
||||
this.$matrix.makeAdmin(this.room.roomId, member.userId)
|
||||
}
|
||||
},
|
||||
makeModerator(member) {
|
||||
if (this.room) {
|
||||
this.$matrix.makeModerator(this.room.roomId, member.userId)
|
||||
}
|
||||
},
|
||||
revokeModerator(member) {
|
||||
if (this.room) {
|
||||
this.$matrix.revokeModerator(this.room.roomId, member.userId)
|
||||
}
|
||||
},
|
||||
kickUser(member) {
|
||||
if (this.room) {
|
||||
this.$matrix.kickUser(this.room.roomId, member.userId)
|
||||
}
|
||||
},
|
||||
banUser(member) {
|
||||
if (this.room) {
|
||||
this.$matrix.banUser(this.room.roomId, member.userId)
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Go back to previous page, or if none on the stack, go back to current room view.
|
||||
*/
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue