mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-20 15:23:50 +02:00
dropdown
This commit is contained in:
pa
Natsumi
@@ -21,186 +21,212 @@
|
||||
@click="userDialogCommand('Add Favorite')"></el-button>
|
||||
</TooltipWrapper>
|
||||
</template>
|
||||
<el-dropdown trigger="click" @command="onCommand">
|
||||
<el-button
|
||||
:type="
|
||||
userDialog.incomingRequest || userDialog.outgoingRequest
|
||||
? 'success'
|
||||
: userDialog.isBlock || userDialog.isMute
|
||||
? 'danger'
|
||||
: 'default'
|
||||
"
|
||||
:icon="MoreFilled"
|
||||
size="large"
|
||||
circle
|
||||
style="margin-left: 5px"></el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item :icon="Refresh" command="Refresh">{{
|
||||
t('dialog.user.actions.refresh')
|
||||
}}</el-dropdown-item>
|
||||
<el-dropdown-item :icon="Share" command="Share">{{
|
||||
t('dialog.user.actions.share')
|
||||
}}</el-dropdown-item>
|
||||
<template v-if="userDialog.ref.id === currentUser.id">
|
||||
<el-dropdown-item :icon="UserFilled" command="Show Avatar Author">{{
|
||||
t('dialog.user.actions.show_avatar_author')
|
||||
}}</el-dropdown-item>
|
||||
<el-dropdown-item :icon="UserFilled" command="Show Fallback Avatar Details">{{
|
||||
t('dialog.user.actions.show_fallback_avatar')
|
||||
}}</el-dropdown-item>
|
||||
<el-dropdown-item :icon="Edit" command="Edit Social Status" divided>{{
|
||||
t('dialog.user.actions.edit_status')
|
||||
}}</el-dropdown-item>
|
||||
<el-dropdown-item :icon="Edit" command="Edit Language">{{
|
||||
t('dialog.user.actions.edit_language')
|
||||
}}</el-dropdown-item>
|
||||
<el-dropdown-item :icon="Edit" command="Edit Bio">{{
|
||||
t('dialog.user.actions.edit_bio')
|
||||
}}</el-dropdown-item>
|
||||
<el-dropdown-item :icon="Edit" command="Edit Pronouns">{{
|
||||
t('dialog.user.actions.edit_pronouns')
|
||||
}}</el-dropdown-item>
|
||||
<el-dropdown-item :icon="SwitchButton" command="Logout" divided>{{
|
||||
t('dialog.user.actions.logout')
|
||||
}}</el-dropdown-item>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger as-child>
|
||||
<el-button
|
||||
:type="
|
||||
userDialog.incomingRequest || userDialog.outgoingRequest
|
||||
? 'success'
|
||||
: userDialog.isBlock || userDialog.isMute
|
||||
? 'danger'
|
||||
: 'default'
|
||||
"
|
||||
:icon="MoreFilled"
|
||||
size="large"
|
||||
circle
|
||||
style="margin-left: 5px"></el-button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem @click="onCommand('Refresh')">
|
||||
<Refresh class="size-4" />
|
||||
{{ t('dialog.user.actions.refresh') }}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem @click="onCommand('Share')">
|
||||
<Share class="size-4" />
|
||||
{{ t('dialog.user.actions.share') }}
|
||||
</DropdownMenuItem>
|
||||
<template v-if="userDialog.ref.id === currentUser.id">
|
||||
<DropdownMenuItem @click="onCommand('Show Avatar Author')">
|
||||
<UserFilled class="size-4" />
|
||||
{{ t('dialog.user.actions.show_avatar_author') }}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem @click="onCommand('Show Fallback Avatar Details')">
|
||||
<UserFilled class="size-4" />
|
||||
{{ t('dialog.user.actions.show_fallback_avatar') }}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem @click="onCommand('Edit Social Status')">
|
||||
<Edit class="size-4" />
|
||||
{{ t('dialog.user.actions.edit_status') }}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem @click="onCommand('Edit Language')">
|
||||
<Edit class="size-4" />
|
||||
{{ t('dialog.user.actions.edit_language') }}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem @click="onCommand('Edit Bio')">
|
||||
<Edit class="size-4" />
|
||||
{{ t('dialog.user.actions.edit_bio') }}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem @click="onCommand('Edit Pronouns')">
|
||||
<Edit class="size-4" />
|
||||
{{ t('dialog.user.actions.edit_pronouns') }}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem @click="onCommand('Logout')">
|
||||
<SwitchButton class="size-4" />
|
||||
{{ t('dialog.user.actions.logout') }}
|
||||
</DropdownMenuItem>
|
||||
</template>
|
||||
<template v-else>
|
||||
<template v-if="userDialog.isFriend">
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem @click="onCommand('Request Invite')">
|
||||
<Postcard class="size-4" />
|
||||
{{ t('dialog.user.actions.request_invite') }}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem @click="onCommand('Request Invite Message')">
|
||||
<Postcard class="size-4" />
|
||||
{{ t('dialog.user.actions.request_invite_with_message') }}
|
||||
</DropdownMenuItem>
|
||||
<template v-if="isGameRunning">
|
||||
<DropdownMenuItem
|
||||
:disabled="!checkCanInvite(lastLocation.location)"
|
||||
@click="onCommand('Invite')">
|
||||
<Message class="size-4" />
|
||||
{{ t('dialog.user.actions.invite') }}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
:disabled="!checkCanInvite(lastLocation.location)"
|
||||
@click="onCommand('Invite Message')">
|
||||
<Message class="size-4" />
|
||||
{{ t('dialog.user.actions.invite_with_message') }}
|
||||
</DropdownMenuItem>
|
||||
</template>
|
||||
<DropdownMenuItem :disabled="!currentUser.isBoopingEnabled" @click="onCommand('Send Boop')">
|
||||
<Pointer class="size-4" />
|
||||
{{ t('dialog.user.actions.send_boop') }}
|
||||
</DropdownMenuItem>
|
||||
</template>
|
||||
<template v-else>
|
||||
<template v-if="userDialog.isFriend">
|
||||
<el-dropdown-item :icon="Postcard" command="Request Invite" divided>{{
|
||||
t('dialog.user.actions.request_invite')
|
||||
}}</el-dropdown-item>
|
||||
<el-dropdown-item :icon="Postcard" command="Request Invite Message">{{
|
||||
t('dialog.user.actions.request_invite_with_message')
|
||||
}}</el-dropdown-item>
|
||||
<template v-if="isGameRunning">
|
||||
<el-dropdown-item
|
||||
:disabled="!checkCanInvite(lastLocation.location)"
|
||||
:icon="Message"
|
||||
command="Invite"
|
||||
>{{ t('dialog.user.actions.invite') }}</el-dropdown-item
|
||||
>
|
||||
<el-dropdown-item
|
||||
:disabled="!checkCanInvite(lastLocation.location)"
|
||||
:icon="Message"
|
||||
command="Invite Message"
|
||||
>{{ t('dialog.user.actions.invite_with_message') }}</el-dropdown-item
|
||||
>
|
||||
</template>
|
||||
<el-dropdown-item
|
||||
:disabled="!currentUser.isBoopingEnabled"
|
||||
:icon="Pointer"
|
||||
command="Send Boop"
|
||||
>{{ t('dialog.user.actions.send_boop') }}</el-dropdown-item
|
||||
>
|
||||
</template>
|
||||
<template v-else-if="userDialog.incomingRequest">
|
||||
<el-dropdown-item :icon="Check" command="Accept Friend Request">{{
|
||||
t('dialog.user.actions.accept_friend_request')
|
||||
}}</el-dropdown-item>
|
||||
<el-dropdown-item :icon="Close" command="Decline Friend Request">{{
|
||||
t('dialog.user.actions.decline_friend_request')
|
||||
}}</el-dropdown-item>
|
||||
</template>
|
||||
<el-dropdown-item
|
||||
v-else-if="userDialog.outgoingRequest"
|
||||
:icon="Close"
|
||||
command="Cancel Friend Request">
|
||||
{{ t('dialog.user.actions.cancel_friend_request') }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item v-else :icon="Plus" command="Send Friend Request">{{
|
||||
t('dialog.user.actions.send_friend_request')
|
||||
}}</el-dropdown-item>
|
||||
<el-dropdown-item :icon="Message" command="Invite To Group">{{
|
||||
t('dialog.user.actions.invite_to_group')
|
||||
}}</el-dropdown-item>
|
||||
<el-dropdown-item :icon="Operation" command="Group Moderation">{{
|
||||
t('dialog.user.actions.group_moderation')
|
||||
}}</el-dropdown-item>
|
||||
<el-dropdown-item :icon="Edit" command="Edit Note Memo"> Edit Note and Memo </el-dropdown-item>
|
||||
<el-dropdown-item :icon="UserFilled" command="Show Avatar Author" divided>{{
|
||||
t('dialog.user.actions.show_avatar_author')
|
||||
}}</el-dropdown-item>
|
||||
<el-dropdown-item :icon="UserFilled" command="Show Fallback Avatar Details">{{
|
||||
t('dialog.user.actions.show_fallback_avatar')
|
||||
}}</el-dropdown-item>
|
||||
<el-dropdown-item :icon="DataLine" command="Previous Instances">{{
|
||||
t('dialog.user.actions.show_previous_instances')
|
||||
}}</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
v-if="userDialog.isBlock"
|
||||
:icon="CircleCheck"
|
||||
command="Moderation Unblock"
|
||||
divided
|
||||
style="color: var(--el-color-danger)">
|
||||
{{ t('dialog.user.actions.moderation_unblock') }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
v-else
|
||||
:icon="CircleClose"
|
||||
command="Moderation Block"
|
||||
divided
|
||||
:disabled="userDialog.ref.$isModerator">
|
||||
{{ t('dialog.user.actions.moderation_block') }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
v-if="userDialog.isMute"
|
||||
:icon="Microphone"
|
||||
command="Moderation Unmute"
|
||||
style="color: var(--el-color-danger)">
|
||||
{{ t('dialog.user.actions.moderation_unmute') }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
v-else
|
||||
:icon="Mute"
|
||||
command="Moderation Mute"
|
||||
:disabled="userDialog.ref.$isModerator">
|
||||
{{ t('dialog.user.actions.moderation_mute') }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
v-if="userDialog.isMuteChat"
|
||||
:icon="ChatLineRound"
|
||||
command="Moderation Enable Chatbox"
|
||||
style="color: var(--el-color-danger)">
|
||||
{{ t('dialog.user.actions.moderation_enable_chatbox') }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item v-else :icon="ChatDotRound" command="Moderation Disable Chatbox">
|
||||
{{ t('dialog.user.actions.moderation_disable_chatbox') }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item :icon="User" command="Show Avatar">
|
||||
<el-icon v-if="userDialog.isShowAvatar" style="margin-right: 5px"><Check /></el-icon>
|
||||
<span>{{ t('dialog.user.actions.moderation_show_avatar') }}</span>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item :icon="User" command="Hide Avatar">
|
||||
<el-icon v-if="userDialog.isHideAvatar" style="margin-right: 5px"><Check /></el-icon>
|
||||
<span>{{ t('dialog.user.actions.moderation_hide_avatar') }}</span>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
v-if="userDialog.isInteractOff"
|
||||
:icon="Pointer"
|
||||
command="Moderation Enable Avatar Interaction"
|
||||
style="color: var(--el-color-danger)">
|
||||
{{ t('dialog.user.actions.moderation_enable_avatar_interaction') }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item v-else :icon="CircleClose" command="Moderation Disable Avatar Interaction">
|
||||
{{ t('dialog.user.actions.moderation_disable_avatar_interaction') }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item :icon="Flag" command="Report Hacking" :disabled="userDialog.ref.$isModerator">
|
||||
{{ t('dialog.user.actions.report_hacking') }}
|
||||
</el-dropdown-item>
|
||||
<template v-if="userDialog.isFriend">
|
||||
<el-dropdown-item
|
||||
:icon="Delete"
|
||||
command="Unfriend"
|
||||
divided
|
||||
style="color: var(--el-color-danger)">
|
||||
{{ t('dialog.user.actions.unfriend') }}
|
||||
</el-dropdown-item>
|
||||
</template>
|
||||
<template v-else-if="userDialog.incomingRequest">
|
||||
<DropdownMenuItem @click="onCommand('Accept Friend Request')">
|
||||
<Check class="size-4" />
|
||||
{{ t('dialog.user.actions.accept_friend_request') }}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem @click="onCommand('Decline Friend Request')">
|
||||
<Close class="size-4" />
|
||||
{{ t('dialog.user.actions.decline_friend_request') }}
|
||||
</DropdownMenuItem>
|
||||
</template>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<DropdownMenuItem
|
||||
v-else-if="userDialog.outgoingRequest"
|
||||
@click="onCommand('Cancel Friend Request')">
|
||||
<Close class="size-4" />
|
||||
{{ t('dialog.user.actions.cancel_friend_request') }}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem v-else @click="onCommand('Send Friend Request')">
|
||||
<Plus class="size-4" />
|
||||
{{ t('dialog.user.actions.send_friend_request') }}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem @click="onCommand('Invite To Group')">
|
||||
<Message class="size-4" />
|
||||
{{ t('dialog.user.actions.invite_to_group') }}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem @click="onCommand('Group Moderation')">
|
||||
<Operation class="size-4" />
|
||||
{{ t('dialog.user.actions.group_moderation') }}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem @click="onCommand('Edit Note Memo')">
|
||||
<Edit class="size-4" />
|
||||
Edit Note and Memo
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem @click="onCommand('Show Avatar Author')">
|
||||
<UserFilled class="size-4" />
|
||||
{{ t('dialog.user.actions.show_avatar_author') }}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem @click="onCommand('Show Fallback Avatar Details')">
|
||||
<UserFilled class="size-4" />
|
||||
{{ t('dialog.user.actions.show_fallback_avatar') }}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem @click="onCommand('Previous Instances')">
|
||||
<DataLine class="size-4" />
|
||||
{{ t('dialog.user.actions.show_previous_instances') }}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
v-if="userDialog.isBlock"
|
||||
variant="destructive"
|
||||
@click="onCommand('Moderation Unblock')">
|
||||
<CircleCheck class="size-4" />
|
||||
{{ t('dialog.user.actions.moderation_unblock') }}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
v-else
|
||||
:disabled="userDialog.ref.$isModerator"
|
||||
@click="onCommand('Moderation Block')">
|
||||
<CircleClose class="size-4" />
|
||||
{{ t('dialog.user.actions.moderation_block') }}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
v-if="userDialog.isMute"
|
||||
variant="destructive"
|
||||
@click="onCommand('Moderation Unmute')">
|
||||
<Microphone class="size-4" />
|
||||
{{ t('dialog.user.actions.moderation_unmute') }}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
v-else
|
||||
:disabled="userDialog.ref.$isModerator"
|
||||
@click="onCommand('Moderation Mute')">
|
||||
<Mute class="size-4" />
|
||||
{{ t('dialog.user.actions.moderation_mute') }}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
v-if="userDialog.isMuteChat"
|
||||
variant="destructive"
|
||||
@click="onCommand('Moderation Enable Chatbox')">
|
||||
<ChatLineRound class="size-4" />
|
||||
{{ t('dialog.user.actions.moderation_enable_chatbox') }}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem v-else @click="onCommand('Moderation Disable Chatbox')">
|
||||
<ChatDotRound class="size-4" />
|
||||
{{ t('dialog.user.actions.moderation_disable_chatbox') }}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem @click="onCommand('Show Avatar')">
|
||||
<User class="size-4" />
|
||||
<Check v-if="userDialog.isShowAvatar" class="size-4" />
|
||||
<span>{{ t('dialog.user.actions.moderation_show_avatar') }}</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem @click="onCommand('Hide Avatar')">
|
||||
<User class="size-4" />
|
||||
<Check v-if="userDialog.isHideAvatar" class="size-4" />
|
||||
<span>{{ t('dialog.user.actions.moderation_hide_avatar') }}</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
v-if="userDialog.isInteractOff"
|
||||
variant="destructive"
|
||||
@click="onCommand('Moderation Enable Avatar Interaction')">
|
||||
<Pointer class="size-4" />
|
||||
{{ t('dialog.user.actions.moderation_enable_avatar_interaction') }}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem v-else @click="onCommand('Moderation Disable Avatar Interaction')">
|
||||
<CircleClose class="size-4" />
|
||||
{{ t('dialog.user.actions.moderation_disable_avatar_interaction') }}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem :disabled="userDialog.ref.$isModerator" @click="onCommand('Report Hacking')">
|
||||
<Flag class="size-4" />
|
||||
{{ t('dialog.user.actions.report_hacking') }}
|
||||
</DropdownMenuItem>
|
||||
<template v-if="userDialog.isFriend">
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem variant="destructive" @click="onCommand('Unfriend')">
|
||||
<Delete class="size-4" />
|
||||
{{ t('dialog.user.actions.unfriend') }}
|
||||
</DropdownMenuItem>
|
||||
</template>
|
||||
</template>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -236,6 +262,13 @@
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger
|
||||
} from '../../ui/dropdown-menu';
|
||||
import { useGameStore, useLocationStore, useUserStore } from '../../../stores';
|
||||
import { checkCanInvite } from '../../../shared/utils';
|
||||
|
||||
|
||||
@@ -512,27 +512,28 @@
|
||||
<span class="extra">
|
||||
{{ userDialog.id }}
|
||||
<TooltipWrapper side="top" :content="t('dialog.user.info.id_tooltip')">
|
||||
<el-dropdown trigger="click" size="small" style="margin-left: 5px" @click.stop>
|
||||
<el-button
|
||||
type="default"
|
||||
:icon="CopyDocument"
|
||||
size="small"
|
||||
circle></el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item @click="copyUserId(userDialog.id)">{{
|
||||
t('dialog.user.info.copy_id')
|
||||
}}</el-dropdown-item>
|
||||
<el-dropdown-item @click="copyUserURL(userDialog.id)">{{
|
||||
t('dialog.user.info.copy_url')
|
||||
}}</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
@click="copyUserDisplayName(userDialog.ref.displayName)"
|
||||
>{{ t('dialog.user.info.copy_display_name') }}</el-dropdown-item
|
||||
>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger as-child>
|
||||
<el-button
|
||||
type="default"
|
||||
:icon="CopyDocument"
|
||||
size="small"
|
||||
circle
|
||||
@click.stop></el-button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem @click="copyUserId(userDialog.id)">
|
||||
{{ t('dialog.user.info.copy_id') }}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem @click="copyUserURL(userDialog.id)">
|
||||
{{ t('dialog.user.info.copy_url') }}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
@click="copyUserDisplayName(userDialog.ref.displayName)">
|
||||
{{ t('dialog.user.info.copy_display_name') }}
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</TooltipWrapper>
|
||||
</span>
|
||||
</div>
|
||||
@@ -561,29 +562,24 @@
|
||||
</div>
|
||||
<div style="display: flex; align-items: center">
|
||||
<span style="margin-right: 5px">{{ t('dialog.user.groups.sort_by') }}</span>
|
||||
<el-dropdown
|
||||
trigger="click"
|
||||
size="small"
|
||||
style="margin-right: 5px"
|
||||
:disabled="userDialog.isMutualFriendsLoading"
|
||||
@click.stop>
|
||||
<el-button size="small">
|
||||
<span
|
||||
>{{ t(userDialog.mutualFriendSorting.name) }}
|
||||
<el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
|
||||
</span>
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item
|
||||
v-for="(item, key) in userDialogMutualFriendSortingOptions"
|
||||
:key="key"
|
||||
@click="setUserDialogMutualFriendSorting(item)"
|
||||
>{{ t(item.name) }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger as-child :disabled="userDialog.isMutualFriendsLoading">
|
||||
<el-button size="small" :disabled="userDialog.isMutualFriendsLoading" @click.stop>
|
||||
<span>
|
||||
{{ t(userDialog.mutualFriendSorting.name) }}
|
||||
<el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
|
||||
</span>
|
||||
</el-button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem
|
||||
v-for="(item, key) in userDialogMutualFriendSortingOptions"
|
||||
:key="key"
|
||||
@click="setUserDialogMutualFriendSorting(item)">
|
||||
{{ t(item.name) }}
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@@ -645,33 +641,28 @@
|
||||
<div style="display: flex; align-items: center">
|
||||
<template v-if="!userDialogGroupEditMode">
|
||||
<span style="margin-right: 5px">{{ t('dialog.user.groups.sort_by') }}</span>
|
||||
<el-dropdown
|
||||
trigger="click"
|
||||
size="small"
|
||||
style="margin-right: 5px"
|
||||
:disabled="userDialog.isGroupsLoading"
|
||||
@click.stop>
|
||||
<el-button size="small">
|
||||
<span
|
||||
>{{ t(userDialog.groupSorting.name) }}
|
||||
<el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
|
||||
</span>
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item
|
||||
v-for="(item, key) in userDialogGroupSortingOptions"
|
||||
:key="key"
|
||||
:disabled="
|
||||
item === userDialogGroupSortingOptions.inGame &&
|
||||
userDialog.id !== currentUser.id
|
||||
"
|
||||
@click="setUserDialogGroupSorting(item)"
|
||||
>{{ t(item.name) }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger as-child :disabled="userDialog.isGroupsLoading">
|
||||
<el-button size="small" :disabled="userDialog.isGroupsLoading" @click.stop>
|
||||
<span>
|
||||
{{ t(userDialog.groupSorting.name) }}
|
||||
<el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
|
||||
</span>
|
||||
</el-button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem
|
||||
v-for="(item, key) in userDialogGroupSortingOptions"
|
||||
:key="key"
|
||||
:disabled="
|
||||
item === userDialogGroupSortingOptions.inGame &&
|
||||
userDialog.id !== currentUser.id
|
||||
"
|
||||
@click="setUserDialogGroupSorting(item)">
|
||||
{{ t(item.name) }}
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</template>
|
||||
<el-button
|
||||
v-if="userDialogGroupEditMode"
|
||||
@@ -695,32 +686,38 @@
|
||||
<template v-if="userDialogGroupEditMode">
|
||||
<div class="x-friend-list" style="margin-top: 10px; margin-bottom: 15px; max-height: unset">
|
||||
<!-- Bulk actions dropdown (shown only in edit mode) -->
|
||||
<el-dropdown trigger="click">
|
||||
<el-button
|
||||
size="small"
|
||||
:icon="Setting"
|
||||
style="margin-right: 5px; height: 29px; padding: 7px 15px; margin-bottom: 5px">
|
||||
{{ t('dialog.group.actions.manage_selected') }}
|
||||
<el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item @click="bulkSetVisibility('visible')">
|
||||
{{ t('dialog.group.actions.visibility_everyone') }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item @click="bulkSetVisibility('friends')">
|
||||
{{ t('dialog.group.actions.visibility_friends') }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item @click="bulkSetVisibility('hidden')">
|
||||
{{ t('dialog.group.actions.visibility_hidden') }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item divided @click="bulkLeaveGroups">
|
||||
<el-icon><Delete /></el-icon>
|
||||
{{ t('dialog.user.groups.leave_group_tooltip') }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger as-child>
|
||||
<el-button
|
||||
size="small"
|
||||
:icon="Setting"
|
||||
style="
|
||||
margin-right: 5px;
|
||||
height: 29px;
|
||||
padding: 7px 15px;
|
||||
margin-bottom: 5px;
|
||||
">
|
||||
{{ t('dialog.group.actions.manage_selected') }}
|
||||
<el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
|
||||
</el-button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem @click="bulkSetVisibility('visible')">
|
||||
{{ t('dialog.group.actions.visibility_everyone') }}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem @click="bulkSetVisibility('friends')">
|
||||
{{ t('dialog.group.actions.visibility_friends') }}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem @click="bulkSetVisibility('hidden')">
|
||||
{{ t('dialog.group.actions.visibility_hidden') }}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem variant="destructive" @click="bulkLeaveGroups">
|
||||
<Delete class="size-4" />
|
||||
{{ t('dialog.user.groups.leave_group_tooltip') }}
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
<!-- Select All button -->
|
||||
<el-button
|
||||
@@ -813,49 +810,37 @@
|
||||
<span>({{ group.memberCount }})</span>
|
||||
</span>
|
||||
</div>
|
||||
<el-dropdown
|
||||
v-if="group.myMember?.visibility"
|
||||
trigger="click"
|
||||
size="small"
|
||||
style="margin-right: 5px">
|
||||
<el-button :disabled="group.privacy !== 'default'" @click.stop size="small">
|
||||
<span v-if="group.myMember.visibility === 'visible'">{{
|
||||
t('dialog.group.tags.visible')
|
||||
}}</span>
|
||||
<span v-else-if="group.myMember.visibility === 'friends'">{{
|
||||
t('dialog.group.tags.friends')
|
||||
}}</span>
|
||||
<span v-else-if="group.myMember.visibility === 'hidden'">{{
|
||||
t('dialog.group.tags.hidden')
|
||||
}}</span>
|
||||
<span v-else>{{ group.myMember.visibility }}</span>
|
||||
<el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item @click="setGroupVisibility(group.id, 'visible')">
|
||||
<el-icon v-if="group.myMember.visibility === 'visible'"
|
||||
><Check
|
||||
/></el-icon>
|
||||
{{
|
||||
t('dialog.group.actions.visibility_everyone')
|
||||
}}</el-dropdown-item
|
||||
>
|
||||
<el-dropdown-item @click="setGroupVisibility(group.id, 'friends')">
|
||||
<el-icon v-if="group.myMember.visibility === 'friends'"
|
||||
><Check
|
||||
/></el-icon>
|
||||
{{ t('dialog.group.actions.visibility_friends') }}</el-dropdown-item
|
||||
>
|
||||
<el-dropdown-item @click="setGroupVisibility(group.id, 'hidden')"
|
||||
><el-icon v-if="group.myMember.visibility === 'hidden'"
|
||||
><Check
|
||||
/></el-icon>
|
||||
{{ t('dialog.group.actions.visibility_hidden') }}</el-dropdown-item
|
||||
>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<DropdownMenu v-if="group.myMember?.visibility">
|
||||
<DropdownMenuTrigger as-child :disabled="group.privacy !== 'default'">
|
||||
<el-button :disabled="group.privacy !== 'default'" @click.stop size="small">
|
||||
<span v-if="group.myMember.visibility === 'visible'">{{
|
||||
t('dialog.group.tags.visible')
|
||||
}}</span>
|
||||
<span v-else-if="group.myMember.visibility === 'friends'">{{
|
||||
t('dialog.group.tags.friends')
|
||||
}}</span>
|
||||
<span v-else-if="group.myMember.visibility === 'hidden'">{{
|
||||
t('dialog.group.tags.hidden')
|
||||
}}</span>
|
||||
<span v-else>{{ group.myMember.visibility }}</span>
|
||||
<el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
|
||||
</el-button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem @click="setGroupVisibility(group.id, 'visible')">
|
||||
<Check v-if="group.myMember.visibility === 'visible'" class="size-4" />
|
||||
{{ t('dialog.group.actions.visibility_everyone') }}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem @click="setGroupVisibility(group.id, 'friends')">
|
||||
<Check v-if="group.myMember.visibility === 'friends'" class="size-4" />
|
||||
{{ t('dialog.group.actions.visibility_friends') }}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem @click="setGroupVisibility(group.id, 'hidden')">
|
||||
<Check v-if="group.myMember.visibility === 'hidden'" class="size-4" />
|
||||
{{ t('dialog.group.actions.visibility_hidden') }}
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<!--//- JSON is missing isSubscribedToAnnouncements, can't be implemented-->
|
||||
<!-- <el-button
|
||||
@click.stop="
|
||||
@@ -1052,53 +1037,43 @@
|
||||
</div>
|
||||
<div style="display: flex; align-items: center">
|
||||
<span style="margin-right: 5px">{{ t('dialog.user.worlds.sort_by') }}</span>
|
||||
<el-dropdown
|
||||
trigger="click"
|
||||
size="small"
|
||||
style="margin-right: 5px"
|
||||
:disabled="userDialog.isWorldsLoading"
|
||||
@click.stop>
|
||||
<el-button size="small">
|
||||
<span
|
||||
>{{ t(userDialog.worldSorting.name) }}
|
||||
<el-icon style="margin-left: 5px"><ArrowDown /></el-icon
|
||||
></span>
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item
|
||||
v-for="(item, key) in userDialogWorldSortingOptions"
|
||||
:key="key"
|
||||
@click="setUserDialogWorldSorting(item)">
|
||||
{{ t(item.name) }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger as-child :disabled="userDialog.isWorldsLoading">
|
||||
<el-button size="small" :disabled="userDialog.isWorldsLoading" @click.stop>
|
||||
<span>
|
||||
{{ t(userDialog.worldSorting.name) }}
|
||||
<el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
|
||||
</span>
|
||||
</el-button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem
|
||||
v-for="(item, key) in userDialogWorldSortingOptions"
|
||||
:key="key"
|
||||
@click="setUserDialogWorldSorting(item)">
|
||||
{{ t(item.name) }}
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<span style="margin: 0 5px">{{ t('dialog.user.worlds.order_by') }}</span>
|
||||
<el-dropdown
|
||||
trigger="click"
|
||||
size="small"
|
||||
style="margin-right: 5px"
|
||||
:disabled="userDialog.isWorldsLoading"
|
||||
@click.stop>
|
||||
<el-button size="small">
|
||||
<span
|
||||
>{{ t(userDialog.worldOrder.name) }}
|
||||
<el-icon style="margin-left: 5px"><ArrowDown /></el-icon
|
||||
></span>
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item
|
||||
v-for="(item, key) in userDialogWorldOrderOptions"
|
||||
:key="key"
|
||||
@click="setUserDialogWorldOrder(item)">
|
||||
{{ t(item.name) }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger as-child :disabled="userDialog.isWorldsLoading">
|
||||
<el-button size="small" :disabled="userDialog.isWorldsLoading" @click.stop>
|
||||
<span>
|
||||
{{ t(userDialog.worldOrder.name) }}
|
||||
<el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
|
||||
</span>
|
||||
</el-button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem
|
||||
v-for="(item, key) in userDialogWorldOrderOptions"
|
||||
:key="key"
|
||||
@click="setUserDialogWorldOrder(item)">
|
||||
{{ t(item.name) }}
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@@ -1214,58 +1189,48 @@
|
||||
<div>
|
||||
<template v-if="userDialog.ref.id === currentUser.id">
|
||||
<span style="margin-right: 5px">{{ t('dialog.user.avatars.sort_by') }}</span>
|
||||
<el-dropdown
|
||||
trigger="click"
|
||||
size="small"
|
||||
style="margin-right: 5px"
|
||||
:disabled="userDialog.isWorldsLoading"
|
||||
@click.stop>
|
||||
<el-button size="small">
|
||||
<span
|
||||
>{{ t(`dialog.user.avatars.sort_by_${userDialog.avatarSorting}`) }}
|
||||
<el-icon style="margin-left: 5px"><ArrowDown /></el-icon
|
||||
></span>
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item @click="changeUserDialogAvatarSorting('name')">
|
||||
{{ t('dialog.user.avatars.sort_by_name') }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item @click="changeUserDialogAvatarSorting('update')">
|
||||
{{ t('dialog.user.avatars.sort_by_update') }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger as-child :disabled="userDialog.isWorldsLoading">
|
||||
<el-button size="small" :disabled="userDialog.isWorldsLoading" @click.stop>
|
||||
<span>
|
||||
{{ t(`dialog.user.avatars.sort_by_${userDialog.avatarSorting}`) }}
|
||||
<el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
|
||||
</span>
|
||||
</el-button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem @click="changeUserDialogAvatarSorting('name')">
|
||||
{{ t('dialog.user.avatars.sort_by_name') }}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem @click="changeUserDialogAvatarSorting('update')">
|
||||
{{ t('dialog.user.avatars.sort_by_update') }}
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<span style="margin-right: 5px; margin-left: 10px">{{
|
||||
t('dialog.user.avatars.group_by')
|
||||
}}</span>
|
||||
<el-dropdown
|
||||
trigger="click"
|
||||
size="small"
|
||||
style="margin-right: 5px"
|
||||
:disabled="userDialog.isWorldsLoading"
|
||||
@click.stop>
|
||||
<el-button size="small">
|
||||
<span
|
||||
>{{ t(`dialog.user.avatars.${userDialog.avatarReleaseStatus}`) }}
|
||||
<el-icon style="margin-left: 5px"><ArrowDown /></el-icon
|
||||
></span>
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item @click="userDialog.avatarReleaseStatus = 'all'">
|
||||
{{ t('dialog.user.avatars.all') }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item @click="userDialog.avatarReleaseStatus = 'public'">
|
||||
{{ t('dialog.user.avatars.public') }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item @click="userDialog.avatarReleaseStatus = 'private'">
|
||||
{{ t('dialog.user.avatars.private') }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger as-child :disabled="userDialog.isWorldsLoading">
|
||||
<el-button size="small" :disabled="userDialog.isWorldsLoading" @click.stop>
|
||||
<span>
|
||||
{{ t(`dialog.user.avatars.${userDialog.avatarReleaseStatus}`) }}
|
||||
<el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
|
||||
</span>
|
||||
</el-button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem @click="userDialog.avatarReleaseStatus = 'all'">
|
||||
{{ t('dialog.user.avatars.all') }}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem @click="userDialog.avatarReleaseStatus = 'public'">
|
||||
{{ t('dialog.user.avatars.public') }}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem @click="userDialog.avatarReleaseStatus = 'private'">
|
||||
{{ t('dialog.user.avatars.private') }}
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1412,6 +1377,13 @@
|
||||
userRequest,
|
||||
worldRequest
|
||||
} from '../../../api';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger
|
||||
} from '../../ui/dropdown-menu';
|
||||
import { processBulk, request } from '../../../service/request';
|
||||
import { userDialogGroupSortingOptions, userDialogMutualFriendSortingOptions } from '../../../shared/constants';
|
||||
import { userDialogWorldOrderOptions, userDialogWorldSortingOptions } from '../../../shared/constants/';
|
||||
|
||||
Reference in New Issue
Block a user