MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-05-02 04:56:06 +02:00
Code Issues Packages Projects Releases Wiki Activity

dropdown

Browse Source
This commit is contained in:
pa
2026-01-07 23:24:54 +09:00
committed by Natsumi
parent dd45ca9545
commit a6b3244717
11 changed files with 928 additions and 847 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/dialogs/AvatarDialog/AvatarDialog.vue
+106 -88
View File
@@ -222,94 +222,105 @@
style="margin-left: 5px" style="margin-left: 5px"
@click="selectAvatarWithoutConfirmation(avatarDialog.id)"></el-button> @click="selectAvatarWithoutConfirmation(avatarDialog.id)"></el-button>
</TooltipWrapper> </TooltipWrapper>
<el-dropdown trigger="click" style="margin-left: 5px" @command="avatarDialogCommand"> <DropdownMenu>
<DropdownMenuTrigger as-child>
<el-button <el-button
:type="avatarDialog.isBlocked ? 'danger' : 'default'" :type="avatarDialog.isBlocked ? 'danger' : 'default'"
:icon="MoreFilled" :icon="MoreFilled"
size="large" size="large"
circle></el-button> circle></el-button>
<template #dropdown> </DropdownMenuTrigger>
<el-dropdown-menu> <DropdownMenuContent>
<el-dropdown-item :icon="Refresh" command="Refresh">{{ <DropdownMenuItem @click="avatarDialogCommand('Refresh')">
t('dialog.avatar.actions.refresh') <Refresh class="size-4" />
}}</el-dropdown-item> {{ t('dialog.avatar.actions.refresh') }}
<el-dropdown-item :icon="Share" command="Share">{{ </DropdownMenuItem>
t('dialog.avatar.actions.share') <DropdownMenuItem @click="avatarDialogCommand('Share')">
}}</el-dropdown-item> <Share class="size-4" />
<el-dropdown-item {{ t('dialog.avatar.actions.share') }}
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem
v-if="avatarDialog.isBlocked" v-if="avatarDialog.isBlocked"
:icon="CircleCheck" variant="destructive"
command="Unblock Avatar" @click="avatarDialogCommand('Unblock Avatar')">
style="color: #f56c6c" <CircleCheck class="size-4" />
divided {{ t('dialog.avatar.actions.unblock') }}
>{{ t('dialog.avatar.actions.unblock') }}</el-dropdown-item </DropdownMenuItem>
> <DropdownMenuItem v-else @click="avatarDialogCommand('Block Avatar')">
<el-dropdown-item v-else :icon="CircleClose" command="Block Avatar" divided>{{ <CircleClose class="size-4" />
t('dialog.avatar.actions.block') {{ t('dialog.avatar.actions.block') }}
}}</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item <DropdownMenuItem
v-if="/quest/.test(avatarDialog.ref.tags)" v-if="/quest/.test(avatarDialog.ref.tags)"
:icon="Check" @click="avatarDialogCommand('Select Fallback Avatar')">
command="Select Fallback Avatar" <Check class="size-4" />
>{{ t('dialog.avatar.actions.select_fallback') }}</el-dropdown-item {{ t('dialog.avatar.actions.select_fallback') }}
> </DropdownMenuItem>
<template v-if="avatarDialog.ref.authorId === currentUser.id"> <template v-if="avatarDialog.ref.authorId === currentUser.id">
<el-dropdown-item <DropdownMenuSeparator />
<DropdownMenuItem
v-if="avatarDialog.ref.releaseStatus === 'public'" v-if="avatarDialog.ref.releaseStatus === 'public'"
:icon="User" @click="avatarDialogCommand('Make Private')">
command="Make Private" <User class="size-4" />
divided {{ t('dialog.avatar.actions.make_private') }}
>{{ t('dialog.avatar.actions.make_private') }}</el-dropdown-item </DropdownMenuItem>
> <DropdownMenuItem v-else @click="avatarDialogCommand('Make Public')">
<el-dropdown-item v-else :icon="User" command="Make Public" divided>{{ <User class="size-4" />
t('dialog.avatar.actions.make_public') {{ t('dialog.avatar.actions.make_public') }}
}}</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item :icon="Edit" command="Rename">{{ <DropdownMenuItem @click="avatarDialogCommand('Rename')">
t('dialog.avatar.actions.rename') <Edit class="size-4" />
}}</el-dropdown-item> {{ t('dialog.avatar.actions.rename') }}
<el-dropdown-item :icon="Edit" command="Change Description">{{ </DropdownMenuItem>
t('dialog.avatar.actions.change_description') <DropdownMenuItem @click="avatarDialogCommand('Change Description')">
}}</el-dropdown-item> <Edit class="size-4" />
<el-dropdown-item :icon="Edit" command="Change Content Tags">{{ {{ t('dialog.avatar.actions.change_description') }}
t('dialog.avatar.actions.change_content_tags') </DropdownMenuItem>
}}</el-dropdown-item> <DropdownMenuItem @click="avatarDialogCommand('Change Content Tags')">
<el-dropdown-item :icon="Edit" command="Change Styles and Author Tags">{{ <Edit class="size-4" />
t('dialog.avatar.actions.change_styles_author_tags') {{ t('dialog.avatar.actions.change_content_tags') }}
}}</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item :icon="Picture" command="Change Image">{{ <DropdownMenuItem @click="avatarDialogCommand('Change Styles and Author Tags')">
t('dialog.avatar.actions.change_image') <Edit class="size-4" />
}}</el-dropdown-item> {{ t('dialog.avatar.actions.change_styles_author_tags') }}
<el-dropdown-item </DropdownMenuItem>
<DropdownMenuItem @click="avatarDialogCommand('Change Image')">
<Picture class="size-4" />
{{ t('dialog.avatar.actions.change_image') }}
</DropdownMenuItem>
<DropdownMenuItem
v-if="avatarDialog.ref.unityPackageUrl" v-if="avatarDialog.ref.unityPackageUrl"
:icon="Download" @click="avatarDialogCommand('Download Unity Package')">
command="Download Unity Package" <Download class="size-4" />
>{{ t('dialog.avatar.actions.download_package') }}</el-dropdown-item {{ t('dialog.avatar.actions.download_package') }}
> </DropdownMenuItem>
<el-dropdown-item <DropdownMenuSeparator />
<DropdownMenuItem
v-if="avatarDialog.hasImposter" v-if="avatarDialog.hasImposter"
:icon="Refresh" variant="destructive"
command="Regenerate Imposter" @click="avatarDialogCommand('Regenerate Imposter')">
style="color: #f56c6c" <Refresh class="size-4" />
divided {{ t('dialog.avatar.actions.regenerate_impostor') }}
>{{ t('dialog.avatar.actions.regenerate_impostor') }}</el-dropdown-item </DropdownMenuItem>
> <DropdownMenuItem
<el-dropdown-item
v-if="avatarDialog.hasImposter" v-if="avatarDialog.hasImposter"
:icon="Delete" variant="destructive"
command="Delete Imposter" @click="avatarDialogCommand('Delete Imposter')">
style="color: #f56c6c" <Delete class="size-4" />
>{{ t('dialog.avatar.actions.delete_impostor') }}</el-dropdown-item {{ t('dialog.avatar.actions.delete_impostor') }}
> </DropdownMenuItem>
<el-dropdown-item v-else :icon="User" command="Create Imposter" divided>{{ <DropdownMenuItem v-else @click="avatarDialogCommand('Create Imposter')">
t('dialog.avatar.actions.create_impostor') <User class="size-4" />
}}</el-dropdown-item> {{ t('dialog.avatar.actions.create_impostor') }}
<el-dropdown-item :icon="Delete" command="Delete" style="color: #f56c6c">{{ </DropdownMenuItem>
t('dialog.avatar.actions.delete') <DropdownMenuItem variant="destructive" @click="avatarDialogCommand('Delete')">
}}</el-dropdown-item> <Delete class="size-4" />
{{ t('dialog.avatar.actions.delete') }}
</DropdownMenuItem>
</template> </template>
</el-dropdown-menu> </DropdownMenuContent>
</template> </DropdownMenu>
</el-dropdown>
</div> </div>
</div> </div>
</div> </div>
@@ -428,24 +439,24 @@
<span class="extra" <span class="extra"
>{{ avatarDialog.id >{{ avatarDialog.id
}}<TooltipWrapper side="top" :content="t('dialog.avatar.info.id_tooltip')"> }}<TooltipWrapper side="top" :content="t('dialog.avatar.info.id_tooltip')">
<el-dropdown trigger="click" size="small" style="margin-left: 5px"> <DropdownMenu>
<DropdownMenuTrigger as-child>
<el-button <el-button
type="default" type="default"
:icon="CopyDocument" :icon="CopyDocument"
size="small" size="small"
circle circle
@click.stop></el-button> @click.stop></el-button>
<template #dropdown> </DropdownMenuTrigger>
<el-dropdown-menu> <DropdownMenuContent>
<el-dropdown-item @click="copyAvatarId(avatarDialog.id)">{{ <DropdownMenuItem @click="copyAvatarId(avatarDialog.id)">
t('dialog.avatar.info.copy_id') {{ t('dialog.avatar.info.copy_id') }}
}}</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item @click="copyAvatarUrl(avatarDialog.id)">{{ <DropdownMenuItem @click="copyAvatarUrl(avatarDialog.id)">
t('dialog.avatar.info.copy_url') {{ t('dialog.avatar.info.copy_url') }}
}}</el-dropdown-item> </DropdownMenuItem>
</el-dropdown-menu> </DropdownMenuContent>
</template> </DropdownMenu>
</el-dropdown>
</TooltipWrapper></span </TooltipWrapper></span
> >
</div> </div>
@@ -566,7 +577,7 @@
User, User,
Warning Warning
} from '@element-plus/icons-vue'; } from '@element-plus/icons-vue';
import { computed, defineAsyncComponent, nextTick, reactive, ref, watch } from 'vue'; import { computed, defineAsyncComponent, nextTick, ref, watch } from 'vue';
import { ElMessageBox } from 'element-plus'; import { ElMessageBox } from 'element-plus';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner'; import { toast } from 'vue-sonner';
@@ -585,6 +596,13 @@
replaceVrcPackageUrl, replaceVrcPackageUrl,
timeToText timeToText
} from '../../../shared/utils'; } from '../../../shared/utils';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger
} from '../../ui/dropdown-menu';
import { useAvatarStore, useFavoriteStore, useGalleryStore, useGameStore, useUserStore } from '../../../stores'; import { useAvatarStore, useFavoriteStore, useGalleryStore, useGameStore, useUserStore } from '../../../stores';
import { avatarModerationRequest, avatarRequest, favoriteRequest, miscRequest } from '../../../api'; import { avatarModerationRequest, avatarRequest, favoriteRequest, miscRequest } from '../../../api';
import { AppDebug } from '../../../service/appConfig.js'; import { AppDebug } from '../../../service/appConfig.js';
src/components/dialogs/GroupDialog/GroupDialog.vue
+115 -97
View File
@@ -231,102 +231,108 @@
@click="joinGroup(groupDialog.id)"></el-button> @click="joinGroup(groupDialog.id)"></el-button>
</TooltipWrapper> </TooltipWrapper>
</template> </template>
<el-dropdown trigger="click" style="margin-left: 5px" @command="groupDialogCommand"> <DropdownMenu>
<DropdownMenuTrigger as-child>
<el-button <el-button
:type="groupDialog.ref.membershipStatus === 'userblocked' ? 'danger' : 'default'" :type="groupDialog.ref.membershipStatus === 'userblocked' ? 'danger' : 'default'"
:icon="MoreFilled" :icon="MoreFilled"
size="large" size="large"
class="ml-1.25"
circle></el-button> circle></el-button>
<template #dropdown> </DropdownMenuTrigger>
<el-dropdown-menu> <DropdownMenuContent>
<el-dropdown-item :icon="Refresh" command="Refresh"> <DropdownMenuItem @click="groupDialogCommand('Refresh')">
<Refresh class="size-4" />
{{ t('dialog.group.actions.refresh') }} {{ t('dialog.group.actions.refresh') }}
</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item :icon="Share" command="Share"> <DropdownMenuItem @click="groupDialogCommand('Share')">
<Share class="size-4" />
{{ t('dialog.group.actions.share') }} {{ t('dialog.group.actions.share') }}
</el-dropdown-item> </DropdownMenuItem>
<template v-if="groupDialog.inGroup"> <template v-if="groupDialog.inGroup">
<template v-if="groupDialog.ref.myMember"> <template v-if="groupDialog.ref.myMember">
<el-dropdown-item <DropdownMenuSeparator />
<DropdownMenuItem
v-if="groupDialog.ref.myMember.isSubscribedToAnnouncements" v-if="groupDialog.ref.myMember.isSubscribedToAnnouncements"
:icon="MuteNotification" @click="groupDialogCommand('Unsubscribe To Announcements')">
command="Unsubscribe To Announcements" <MuteNotification class="size-4" />
divided>
{{ t('dialog.group.actions.unsubscribe') }} {{ t('dialog.group.actions.unsubscribe') }}
</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item <DropdownMenuItem
v-else v-else
:icon="Bell" @click="groupDialogCommand('Subscribe To Announcements')">
command="Subscribe To Announcements" <Bell class="size-4" />
divided>
{{ t('dialog.group.actions.subscribe') }} {{ t('dialog.group.actions.subscribe') }}
</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item <DropdownMenuItem
v-if="hasGroupPermission(groupDialog.ref, 'group-invites-manage')" v-if="hasGroupPermission(groupDialog.ref, 'group-invites-manage')"
:icon="Message" @click="groupDialogCommand('Invite To Group')">
command="Invite To Group"> <Message class="size-4" />
{{ t('dialog.group.actions.invite_to_group') }} {{ t('dialog.group.actions.invite_to_group') }}
</el-dropdown-item> </DropdownMenuItem>
<template <template
v-if="hasGroupPermission(groupDialog.ref, 'group-announcement-manage')"> v-if="hasGroupPermission(groupDialog.ref, 'group-announcement-manage')">
<el-dropdown-item :icon="Tickets" command="Create Post"> <DropdownMenuItem @click="groupDialogCommand('Create Post')">
<Tickets class="size-4" />
{{ t('dialog.group.actions.create_post') }} {{ t('dialog.group.actions.create_post') }}
</el-dropdown-item> </DropdownMenuItem>
</template> </template>
<el-dropdown-item <DropdownMenuItem
:disabled="!hasGroupModerationPermission(groupDialog.ref)" :disabled="!hasGroupModerationPermission(groupDialog.ref)"
:icon="Operation" @click="groupDialogCommand('Moderation Tools')">
command="Moderation Tools"> <Operation class="size-4" />
{{ t('dialog.group.actions.moderation_tools') }} {{ t('dialog.group.actions.moderation_tools') }}
</el-dropdown-item> </DropdownMenuItem>
<template <template
v-if=" v-if="groupDialog.ref.myMember && groupDialog.ref.privacy === 'default'">
groupDialog.ref.myMember && groupDialog.ref.privacy === 'default' <DropdownMenuSeparator />
"> <DropdownMenuItem @click="groupDialogCommand('Visibility Everyone')">
<el-dropdown-item :icon="View" command="Visibility Everyone" divided> <View class="size-4" />
<el-icon v-if="groupDialog.ref.myMember.visibility === 'visible'" <Check
><Check v-if="groupDialog.ref.myMember.visibility === 'visible'"
/></el-icon> class="size-4" />
{{ t('dialog.group.actions.visibility_everyone') }} {{ t('dialog.group.actions.visibility_everyone') }}
</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item :icon="View" command="Visibility Friends"> <DropdownMenuItem @click="groupDialogCommand('Visibility Friends')">
<el-icon v-if="groupDialog.ref.myMember.visibility === 'friends'" <View class="size-4" />
><Check <Check
/></el-icon> v-if="groupDialog.ref.myMember.visibility === 'friends'"
class="size-4" />
{{ t('dialog.group.actions.visibility_friends') }} {{ t('dialog.group.actions.visibility_friends') }}
</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item :icon="View" command="Visibility Hidden"> <DropdownMenuItem @click="groupDialogCommand('Visibility Hidden')">
<el-icon v-if="groupDialog.ref.myMember.visibility === 'hidden'" <View class="size-4" />
><Check <Check
/></el-icon> v-if="groupDialog.ref.myMember.visibility === 'hidden'"
class="size-4" />
{{ t('dialog.group.actions.visibility_hidden') }} {{ t('dialog.group.actions.visibility_hidden') }}
</el-dropdown-item> </DropdownMenuItem>
</template> </template>
<el-dropdown-item <DropdownMenuSeparator />
:icon="Delete" <DropdownMenuItem
command="Leave Group" variant="destructive"
style="color: #f56c6c" @click="groupDialogCommand('Leave Group')">
divided> <Delete class="size-4" />
{{ t('dialog.group.actions.leave') }} {{ t('dialog.group.actions.leave') }}
</el-dropdown-item> </DropdownMenuItem>
</template> </template>
</template> </template>
<template v-else> <template v-else>
<el-dropdown-item <DropdownMenuSeparator />
<DropdownMenuItem
v-if="groupDialog.ref.membershipStatus === 'userblocked'" v-if="groupDialog.ref.membershipStatus === 'userblocked'"
:icon="CircleCheck" variant="destructive"
command="Unblock Group" @click="groupDialogCommand('Unblock Group')">
style="color: #f56c6c" <CircleCheck class="size-4" />
divided>
{{ t('dialog.group.actions.unblock') }} {{ t('dialog.group.actions.unblock') }}
</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item v-else :icon="CircleClose" command="Block Group" divided> <DropdownMenuItem v-else @click="groupDialogCommand('Block Group')">
<CircleClose class="size-4" />
{{ t('dialog.group.actions.block') }} {{ t('dialog.group.actions.block') }}
</el-dropdown-item> </DropdownMenuItem>
</template> </template>
</el-dropdown-menu> </DropdownMenuContent>
</template> </DropdownMenu>
</el-dropdown>
</div> </div>
</div> </div>
</div> </div>
@@ -852,55 +858,60 @@
v-if="hasGroupPermission(groupDialog.ref, 'group-members-manage')" v-if="hasGroupPermission(groupDialog.ref, 'group-members-manage')"
style="float: right"> style="float: right">
<span style="margin-right: 5px">{{ t('dialog.group.members.sort_by') }}</span> <span style="margin-right: 5px">{{ t('dialog.group.members.sort_by') }}</span>
<el-dropdown <DropdownMenu>
trigger="click" <DropdownMenuTrigger
size="small" as-child
style="margin-right: 5px"
:disabled="isGroupMembersLoading || groupDialog.memberSearch.length > 0"> :disabled="isGroupMembersLoading || groupDialog.memberSearch.length > 0">
<el-button size="small" @click.stop> <el-button
<span size="small"
>{{ t(groupDialog.memberSortOrder.name) }} :disabled="isGroupMembersLoading || groupDialog.memberSearch.length > 0"
@click.stop>
<span>
{{ t(groupDialog.memberSortOrder.name) }}
<el-icon style="margin-left: 5px"><ArrowDown /></el-icon> <el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
</span> </span>
</el-button> </el-button>
<template #dropdown> </DropdownMenuTrigger>
<el-dropdown-menu> <DropdownMenuContent>
<el-dropdown-item <DropdownMenuItem
v-for="item in groupDialogSortingOptions" v-for="item in groupDialogSortingOptions"
:key="item.name" :key="item.name"
@click="setGroupMemberSortOrder(item)" @click="setGroupMemberSortOrder(item)">
v-text="t(item.name)" /> {{ t(item.name) }}
</el-dropdown-menu> </DropdownMenuItem>
</template> </DropdownMenuContent>
</el-dropdown> </DropdownMenu>
<span style="margin-right: 5px">{{ t('dialog.group.members.filter') }}</span> <span style="margin-right: 5px">{{ t('dialog.group.members.filter') }}</span>
<el-dropdown <DropdownMenu>
trigger="click" <DropdownMenuTrigger
size="small" as-child
style="margin-right: 5px"
:disabled="isGroupMembersLoading || groupDialog.memberSearch.length > 0"> :disabled="isGroupMembersLoading || groupDialog.memberSearch.length > 0">
<el-button size="small" @click.stop> <el-button
<span size="small"
>{{ t(groupDialog.memberFilter.name) }} :disabled="isGroupMembersLoading || groupDialog.memberSearch.length > 0"
<el-icon style="margin-left: 5px"><ArrowDown /></el-icon @click.stop>
></span> <span>
{{ t(groupDialog.memberFilter.name) }}
<el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
</span>
</el-button> </el-button>
<template #dropdown> </DropdownMenuTrigger>
<el-dropdown-menu> <DropdownMenuContent>
<el-dropdown-item <DropdownMenuItem
v-for="item in groupDialogFilterOptions" v-for="item in groupDialogFilterOptions"
:key="item.name" :key="item.name"
@click="setGroupMemberFilter(item)" @click="setGroupMemberFilter(item)">
v-text="t(item.name)" /> {{ t(item.name) }}
</DropdownMenuItem>
<template v-for="role in groupDialog.ref.roles" :key="role.name"> <template v-for="role in groupDialog.ref.roles" :key="role.name">
<el-dropdown-item <DropdownMenuItem
v-if="!role.defaultRole" v-if="!role.defaultRole"
@click="setGroupMemberFilter(role)" @click="setGroupMemberFilter(role)">
v-text="role.name" /> {{ role.name }}
</DropdownMenuItem>
</template> </template>
</el-dropdown-menu> </DropdownMenuContent>
</template> </DropdownMenu>
</el-dropdown>
</div> </div>
<el-input <el-input
v-model="groupDialog.memberSearch" v-model="groupDialog.memberSearch"
@@ -1176,6 +1187,13 @@
userImage, userImage,
userStatusClass userStatusClass
} from '../../../shared/utils'; } from '../../../shared/utils';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger
} from '../../ui/dropdown-menu';
import { useGalleryStore, useGroupStore, useLocationStore, useUserStore } from '../../../stores'; import { useGalleryStore, useGroupStore, useLocationStore, useUserStore } from '../../../stores';
import { groupDialogFilterOptions, groupDialogSortingOptions } from '../../../shared/constants'; import { groupDialogFilterOptions, groupDialogSortingOptions } from '../../../shared/constants';
import { Badge } from '../../ui/badge'; import { Badge } from '../../ui/badge';
src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
+49 -35
View File
@@ -24,10 +24,9 @@
</span> </span>
<div style="float: right; margin-top: 5px"> <div style="float: right; margin-top: 5px">
<span style="margin-right: 5px">{{ t('dialog.group.members.sort_by') }}</span> <span style="margin-right: 5px">{{ t('dialog.group.members.sort_by') }}</span>
<el-dropdown <DropdownMenu>
trigger="click" <DropdownMenuTrigger
size="small" as-child
style="margin-right: 5px"
:disabled=" :disabled="
Boolean( Boolean(
isGroupMembersLoading || isGroupMembersLoading ||
@@ -35,28 +34,35 @@
!hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage') !hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage')
) )
"> ">
<el-button size="small" @click.stop> <el-button
<span size="small"
>{{ t(memberSortOrder.name) }} :disabled="
Boolean(
isGroupMembersLoading ||
memberSearch.length ||
!hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage')
)
"
@click.stop>
<span>
{{ t(memberSortOrder.name) }}
<el-icon style="margin-left: 5px"><ArrowDown /></el-icon> <el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
</span> </span>
</el-button> </el-button>
<template #dropdown> </DropdownMenuTrigger>
<el-dropdown-menu> <DropdownMenuContent>
<el-dropdown-item <DropdownMenuItem
v-for="item in groupDialogSortingOptions" v-for="item in groupDialogSortingOptions"
:key="item.name" :key="item.name"
@click="setGroupMemberSortOrder(item)"> @click="setGroupMemberSortOrder(item)">
{{ t(item.name) }} {{ t(item.name) }}
</el-dropdown-item> </DropdownMenuItem>
</el-dropdown-menu> </DropdownMenuContent>
</template> </DropdownMenu>
</el-dropdown>
<span style="margin-right: 5px">{{ t('dialog.group.members.filter') }}</span> <span style="margin-right: 5px">{{ t('dialog.group.members.filter') }}</span>
<el-dropdown <DropdownMenu>
trigger="click" <DropdownMenuTrigger
size="small" as-child
style="margin-right: 5px"
:disabled=" :disabled="
Boolean( Boolean(
isGroupMembersLoading || isGroupMembersLoading ||
@@ -64,29 +70,36 @@
!hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage') !hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage')
) )
"> ">
<el-button size="small" @click.stop> <el-button
<span size="small"
>{{ t(memberFilter.name) }} :disabled="
<el-icon style="margin-left: 5px"><ArrowDown /></el-icon Boolean(
></span> isGroupMembersLoading ||
memberSearch.length ||
!hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage')
)
"
@click.stop>
<span>
{{ t(memberFilter.name) }}
<el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
</span>
</el-button> </el-button>
<template #dropdown> </DropdownMenuTrigger>
<el-dropdown-menu> <DropdownMenuContent>
<el-dropdown-item <DropdownMenuItem
v-for="item in groupDialogFilterOptions" v-for="item in groupDialogFilterOptions"
:key="item.name" :key="item.name"
@click="setGroupMemberFilter(item)" @click="setGroupMemberFilter(item)">
v-text="t(item.name)"></el-dropdown-item> {{ t(item.name) }}
</DropdownMenuItem>
<template v-for="role in groupMemberModeration.groupRef.roles" :key="role.name"> <template v-for="role in groupMemberModeration.groupRef.roles" :key="role.name">
<el-dropdown-item <DropdownMenuItem v-if="!role.defaultRole" @click="setGroupMemberFilter(role)">
v-if="!role.defaultRole"
@click="setGroupMemberFilter(role)">
{{ t(role.name) }} {{ t(role.name) }}
</el-dropdown-item> </DropdownMenuItem>
</template> </template>
</el-dropdown-menu> </DropdownMenuContent>
</template> </DropdownMenu>
</el-dropdown>
</div> </div>
<el-input <el-input
v-model="memberSearch" v-model="memberSearch"
@@ -869,6 +882,7 @@
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { debounce, formatDateFilter, hasGroupPermission, userImage, userImageFull } from '../../../shared/utils'; import { debounce, formatDateFilter, hasGroupPermission, userImage, userImageFull } from '../../../shared/utils';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../../ui/dropdown-menu';
import { useAppearanceSettingsStore, useGalleryStore, useGroupStore, useUserStore } from '../../../stores'; import { useAppearanceSettingsStore, useGalleryStore, useGroupStore, useUserStore } from '../../../stores';
import { groupDialogFilterOptions, groupDialogSortingOptions } from '../../../shared/constants'; import { groupDialogFilterOptions, groupDialogSortingOptions } from '../../../shared/constants';
import { groupRequest, userRequest } from '../../../api'; import { groupRequest, userRequest } from '../../../api';
src/components/dialogs/UserDialog/UserActionDropdown.vue
+167 -134
View File
@@ -21,7 +21,8 @@
@click="userDialogCommand('Add Favorite')"></el-button> @click="userDialogCommand('Add Favorite')"></el-button>
</TooltipWrapper> </TooltipWrapper>
</template> </template>
<el-dropdown trigger="click" @command="onCommand"> <DropdownMenu>
<DropdownMenuTrigger as-child>
<el-button <el-button
:type=" :type="
userDialog.incomingRequest || userDialog.outgoingRequest userDialog.incomingRequest || userDialog.outgoingRequest
@@ -34,173 +35,198 @@
size="large" size="large"
circle circle
style="margin-left: 5px"></el-button> style="margin-left: 5px"></el-button>
<template #dropdown> </DropdownMenuTrigger>
<el-dropdown-menu> <DropdownMenuContent>
<el-dropdown-item :icon="Refresh" command="Refresh">{{ <DropdownMenuItem @click="onCommand('Refresh')">
t('dialog.user.actions.refresh') <Refresh class="size-4" />
}}</el-dropdown-item> {{ t('dialog.user.actions.refresh') }}
<el-dropdown-item :icon="Share" command="Share">{{ </DropdownMenuItem>
t('dialog.user.actions.share') <DropdownMenuItem @click="onCommand('Share')">
}}</el-dropdown-item> <Share class="size-4" />
{{ t('dialog.user.actions.share') }}
</DropdownMenuItem>
<template v-if="userDialog.ref.id === currentUser.id"> <template v-if="userDialog.ref.id === currentUser.id">
<el-dropdown-item :icon="UserFilled" command="Show Avatar Author">{{ <DropdownMenuItem @click="onCommand('Show Avatar Author')">
t('dialog.user.actions.show_avatar_author') <UserFilled class="size-4" />
}}</el-dropdown-item> {{ t('dialog.user.actions.show_avatar_author') }}
<el-dropdown-item :icon="UserFilled" command="Show Fallback Avatar Details">{{ </DropdownMenuItem>
t('dialog.user.actions.show_fallback_avatar') <DropdownMenuItem @click="onCommand('Show Fallback Avatar Details')">
}}</el-dropdown-item> <UserFilled class="size-4" />
<el-dropdown-item :icon="Edit" command="Edit Social Status" divided>{{ {{ t('dialog.user.actions.show_fallback_avatar') }}
t('dialog.user.actions.edit_status') </DropdownMenuItem>
}}</el-dropdown-item> <DropdownMenuSeparator />
<el-dropdown-item :icon="Edit" command="Edit Language">{{ <DropdownMenuItem @click="onCommand('Edit Social Status')">
t('dialog.user.actions.edit_language') <Edit class="size-4" />
}}</el-dropdown-item> {{ t('dialog.user.actions.edit_status') }}
<el-dropdown-item :icon="Edit" command="Edit Bio">{{ </DropdownMenuItem>
t('dialog.user.actions.edit_bio') <DropdownMenuItem @click="onCommand('Edit Language')">
}}</el-dropdown-item> <Edit class="size-4" />
<el-dropdown-item :icon="Edit" command="Edit Pronouns">{{ {{ t('dialog.user.actions.edit_language') }}
t('dialog.user.actions.edit_pronouns') </DropdownMenuItem>
}}</el-dropdown-item> <DropdownMenuItem @click="onCommand('Edit Bio')">
<el-dropdown-item :icon="SwitchButton" command="Logout" divided>{{ <Edit class="size-4" />
t('dialog.user.actions.logout') {{ t('dialog.user.actions.edit_bio') }}
}}</el-dropdown-item> </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>
<template v-else> <template v-else>
<template v-if="userDialog.isFriend"> <template v-if="userDialog.isFriend">
<el-dropdown-item :icon="Postcard" command="Request Invite" divided>{{ <DropdownMenuSeparator />
t('dialog.user.actions.request_invite') <DropdownMenuItem @click="onCommand('Request Invite')">
}}</el-dropdown-item> <Postcard class="size-4" />
<el-dropdown-item :icon="Postcard" command="Request Invite Message">{{ {{ t('dialog.user.actions.request_invite') }}
t('dialog.user.actions.request_invite_with_message') </DropdownMenuItem>
}}</el-dropdown-item> <DropdownMenuItem @click="onCommand('Request Invite Message')">
<Postcard class="size-4" />
{{ t('dialog.user.actions.request_invite_with_message') }}
</DropdownMenuItem>
<template v-if="isGameRunning"> <template v-if="isGameRunning">
<el-dropdown-item <DropdownMenuItem
:disabled="!checkCanInvite(lastLocation.location)" :disabled="!checkCanInvite(lastLocation.location)"
:icon="Message" @click="onCommand('Invite')">
command="Invite" <Message class="size-4" />
>{{ t('dialog.user.actions.invite') }}</el-dropdown-item {{ t('dialog.user.actions.invite') }}
> </DropdownMenuItem>
<el-dropdown-item <DropdownMenuItem
:disabled="!checkCanInvite(lastLocation.location)" :disabled="!checkCanInvite(lastLocation.location)"
:icon="Message" @click="onCommand('Invite Message')">
command="Invite Message" <Message class="size-4" />
>{{ t('dialog.user.actions.invite_with_message') }}</el-dropdown-item {{ t('dialog.user.actions.invite_with_message') }}
> </DropdownMenuItem>
</template> </template>
<el-dropdown-item <DropdownMenuItem :disabled="!currentUser.isBoopingEnabled" @click="onCommand('Send Boop')">
:disabled="!currentUser.isBoopingEnabled" <Pointer class="size-4" />
:icon="Pointer" {{ t('dialog.user.actions.send_boop') }}
command="Send Boop" </DropdownMenuItem>
>{{ t('dialog.user.actions.send_boop') }}</el-dropdown-item
>
</template> </template>
<template v-else-if="userDialog.incomingRequest"> <template v-else-if="userDialog.incomingRequest">
<el-dropdown-item :icon="Check" command="Accept Friend Request">{{ <DropdownMenuItem @click="onCommand('Accept Friend Request')">
t('dialog.user.actions.accept_friend_request') <Check class="size-4" />
}}</el-dropdown-item> {{ t('dialog.user.actions.accept_friend_request') }}
<el-dropdown-item :icon="Close" command="Decline Friend Request">{{ </DropdownMenuItem>
t('dialog.user.actions.decline_friend_request') <DropdownMenuItem @click="onCommand('Decline Friend Request')">
}}</el-dropdown-item> <Close class="size-4" />
{{ t('dialog.user.actions.decline_friend_request') }}
</DropdownMenuItem>
</template> </template>
<el-dropdown-item <DropdownMenuItem
v-else-if="userDialog.outgoingRequest" v-else-if="userDialog.outgoingRequest"
:icon="Close" @click="onCommand('Cancel Friend Request')">
command="Cancel Friend Request"> <Close class="size-4" />
{{ t('dialog.user.actions.cancel_friend_request') }} {{ t('dialog.user.actions.cancel_friend_request') }}
</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item v-else :icon="Plus" command="Send Friend Request">{{ <DropdownMenuItem v-else @click="onCommand('Send Friend Request')">
t('dialog.user.actions.send_friend_request') <Plus class="size-4" />
}}</el-dropdown-item> {{ t('dialog.user.actions.send_friend_request') }}
<el-dropdown-item :icon="Message" command="Invite To Group">{{ </DropdownMenuItem>
t('dialog.user.actions.invite_to_group') <DropdownMenuItem @click="onCommand('Invite To Group')">
}}</el-dropdown-item> <Message class="size-4" />
<el-dropdown-item :icon="Operation" command="Group Moderation">{{ {{ t('dialog.user.actions.invite_to_group') }}
t('dialog.user.actions.group_moderation') </DropdownMenuItem>
}}</el-dropdown-item> <DropdownMenuItem @click="onCommand('Group Moderation')">
<el-dropdown-item :icon="Edit" command="Edit Note Memo"> Edit Note and Memo </el-dropdown-item> <Operation class="size-4" />
<el-dropdown-item :icon="UserFilled" command="Show Avatar Author" divided>{{ {{ t('dialog.user.actions.group_moderation') }}
t('dialog.user.actions.show_avatar_author') </DropdownMenuItem>
}}</el-dropdown-item> <DropdownMenuItem @click="onCommand('Edit Note Memo')">
<el-dropdown-item :icon="UserFilled" command="Show Fallback Avatar Details">{{ <Edit class="size-4" />
t('dialog.user.actions.show_fallback_avatar') Edit Note and Memo
}}</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item :icon="DataLine" command="Previous Instances">{{ <DropdownMenuSeparator />
t('dialog.user.actions.show_previous_instances') <DropdownMenuItem @click="onCommand('Show Avatar Author')">
}}</el-dropdown-item> <UserFilled class="size-4" />
<el-dropdown-item {{ 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" v-if="userDialog.isBlock"
:icon="CircleCheck" variant="destructive"
command="Moderation Unblock" @click="onCommand('Moderation Unblock')">
divided <CircleCheck class="size-4" />
style="color: var(--el-color-danger)">
{{ t('dialog.user.actions.moderation_unblock') }} {{ t('dialog.user.actions.moderation_unblock') }}
</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item <DropdownMenuItem
v-else v-else
:icon="CircleClose" :disabled="userDialog.ref.$isModerator"
command="Moderation Block" @click="onCommand('Moderation Block')">
divided <CircleClose class="size-4" />
:disabled="userDialog.ref.$isModerator">
{{ t('dialog.user.actions.moderation_block') }} {{ t('dialog.user.actions.moderation_block') }}
</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item <DropdownMenuItem
v-if="userDialog.isMute" v-if="userDialog.isMute"
:icon="Microphone" variant="destructive"
command="Moderation Unmute" @click="onCommand('Moderation Unmute')">
style="color: var(--el-color-danger)"> <Microphone class="size-4" />
{{ t('dialog.user.actions.moderation_unmute') }} {{ t('dialog.user.actions.moderation_unmute') }}
</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item <DropdownMenuItem
v-else v-else
:icon="Mute" :disabled="userDialog.ref.$isModerator"
command="Moderation Mute" @click="onCommand('Moderation Mute')">
:disabled="userDialog.ref.$isModerator"> <Mute class="size-4" />
{{ t('dialog.user.actions.moderation_mute') }} {{ t('dialog.user.actions.moderation_mute') }}
</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item <DropdownMenuItem
v-if="userDialog.isMuteChat" v-if="userDialog.isMuteChat"
:icon="ChatLineRound" variant="destructive"
command="Moderation Enable Chatbox" @click="onCommand('Moderation Enable Chatbox')">
style="color: var(--el-color-danger)"> <ChatLineRound class="size-4" />
{{ t('dialog.user.actions.moderation_enable_chatbox') }} {{ t('dialog.user.actions.moderation_enable_chatbox') }}
</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item v-else :icon="ChatDotRound" command="Moderation Disable Chatbox"> <DropdownMenuItem v-else @click="onCommand('Moderation Disable Chatbox')">
<ChatDotRound class="size-4" />
{{ t('dialog.user.actions.moderation_disable_chatbox') }} {{ t('dialog.user.actions.moderation_disable_chatbox') }}
</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item :icon="User" command="Show Avatar"> <DropdownMenuItem @click="onCommand('Show Avatar')">
<el-icon v-if="userDialog.isShowAvatar" style="margin-right: 5px"><Check /></el-icon> <User class="size-4" />
<Check v-if="userDialog.isShowAvatar" class="size-4" />
<span>{{ t('dialog.user.actions.moderation_show_avatar') }}</span> <span>{{ t('dialog.user.actions.moderation_show_avatar') }}</span>
</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item :icon="User" command="Hide Avatar"> <DropdownMenuItem @click="onCommand('Hide Avatar')">
<el-icon v-if="userDialog.isHideAvatar" style="margin-right: 5px"><Check /></el-icon> <User class="size-4" />
<Check v-if="userDialog.isHideAvatar" class="size-4" />
<span>{{ t('dialog.user.actions.moderation_hide_avatar') }}</span> <span>{{ t('dialog.user.actions.moderation_hide_avatar') }}</span>
</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item <DropdownMenuItem
v-if="userDialog.isInteractOff" v-if="userDialog.isInteractOff"
:icon="Pointer" variant="destructive"
command="Moderation Enable Avatar Interaction" @click="onCommand('Moderation Enable Avatar Interaction')">
style="color: var(--el-color-danger)"> <Pointer class="size-4" />
{{ t('dialog.user.actions.moderation_enable_avatar_interaction') }} {{ t('dialog.user.actions.moderation_enable_avatar_interaction') }}
</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item v-else :icon="CircleClose" command="Moderation Disable Avatar Interaction"> <DropdownMenuItem v-else @click="onCommand('Moderation Disable Avatar Interaction')">
<CircleClose class="size-4" />
{{ t('dialog.user.actions.moderation_disable_avatar_interaction') }} {{ t('dialog.user.actions.moderation_disable_avatar_interaction') }}
</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item :icon="Flag" command="Report Hacking" :disabled="userDialog.ref.$isModerator"> <DropdownMenuItem :disabled="userDialog.ref.$isModerator" @click="onCommand('Report Hacking')">
<Flag class="size-4" />
{{ t('dialog.user.actions.report_hacking') }} {{ t('dialog.user.actions.report_hacking') }}
</el-dropdown-item> </DropdownMenuItem>
<template v-if="userDialog.isFriend"> <template v-if="userDialog.isFriend">
<el-dropdown-item <DropdownMenuSeparator />
:icon="Delete" <DropdownMenuItem variant="destructive" @click="onCommand('Unfriend')">
command="Unfriend" <Delete class="size-4" />
divided
style="color: var(--el-color-danger)">
{{ t('dialog.user.actions.unfriend') }} {{ t('dialog.user.actions.unfriend') }}
</el-dropdown-item> </DropdownMenuItem>
</template> </template>
</template> </template>
</el-dropdown-menu> </DropdownMenuContent>
</template> </DropdownMenu>
</el-dropdown>
</div> </div>
</template> </template>
@@ -236,6 +262,13 @@
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger
} from '../../ui/dropdown-menu';
import { useGameStore, useLocationStore, useUserStore } from '../../../stores'; import { useGameStore, useLocationStore, useUserStore } from '../../../stores';
import { checkCanInvite } from '../../../shared/utils'; import { checkCanInvite } from '../../../shared/utils';
src/components/dialogs/UserDialog/UserDialog.vue
+149 -177
View File
@@ -512,27 +512,28 @@
<span class="extra"> <span class="extra">
{{ userDialog.id }} {{ userDialog.id }}
<TooltipWrapper side="top" :content="t('dialog.user.info.id_tooltip')"> <TooltipWrapper side="top" :content="t('dialog.user.info.id_tooltip')">
<el-dropdown trigger="click" size="small" style="margin-left: 5px" @click.stop> <DropdownMenu>
<DropdownMenuTrigger as-child>
<el-button <el-button
type="default" type="default"
:icon="CopyDocument" :icon="CopyDocument"
size="small" size="small"
circle></el-button> circle
<template #dropdown> @click.stop></el-button>
<el-dropdown-menu> </DropdownMenuTrigger>
<el-dropdown-item @click="copyUserId(userDialog.id)">{{ <DropdownMenuContent>
t('dialog.user.info.copy_id') <DropdownMenuItem @click="copyUserId(userDialog.id)">
}}</el-dropdown-item> {{ t('dialog.user.info.copy_id') }}
<el-dropdown-item @click="copyUserURL(userDialog.id)">{{ </DropdownMenuItem>
t('dialog.user.info.copy_url') <DropdownMenuItem @click="copyUserURL(userDialog.id)">
}}</el-dropdown-item> {{ t('dialog.user.info.copy_url') }}
<el-dropdown-item </DropdownMenuItem>
@click="copyUserDisplayName(userDialog.ref.displayName)" <DropdownMenuItem
>{{ t('dialog.user.info.copy_display_name') }}</el-dropdown-item @click="copyUserDisplayName(userDialog.ref.displayName)">
> {{ t('dialog.user.info.copy_display_name') }}
</el-dropdown-menu> </DropdownMenuItem>
</template> </DropdownMenuContent>
</el-dropdown> </DropdownMenu>
</TooltipWrapper> </TooltipWrapper>
</span> </span>
</div> </div>
@@ -561,29 +562,24 @@
</div> </div>
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<span style="margin-right: 5px">{{ t('dialog.user.groups.sort_by') }}</span> <span style="margin-right: 5px">{{ t('dialog.user.groups.sort_by') }}</span>
<el-dropdown <DropdownMenu>
trigger="click" <DropdownMenuTrigger as-child :disabled="userDialog.isMutualFriendsLoading">
size="small" <el-button size="small" :disabled="userDialog.isMutualFriendsLoading" @click.stop>
style="margin-right: 5px" <span>
:disabled="userDialog.isMutualFriendsLoading" {{ t(userDialog.mutualFriendSorting.name) }}
@click.stop>
<el-button size="small">
<span
>{{ t(userDialog.mutualFriendSorting.name) }}
<el-icon style="margin-left: 5px"><ArrowDown /></el-icon> <el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
</span> </span>
</el-button> </el-button>
<template #dropdown> </DropdownMenuTrigger>
<el-dropdown-menu> <DropdownMenuContent>
<el-dropdown-item <DropdownMenuItem
v-for="(item, key) in userDialogMutualFriendSortingOptions" v-for="(item, key) in userDialogMutualFriendSortingOptions"
:key="key" :key="key"
@click="setUserDialogMutualFriendSorting(item)" @click="setUserDialogMutualFriendSorting(item)">
>{{ t(item.name) }} {{ t(item.name) }}
</el-dropdown-item> </DropdownMenuItem>
</el-dropdown-menu> </DropdownMenuContent>
</template> </DropdownMenu>
</el-dropdown>
</div> </div>
</div> </div>
<div <div
@@ -645,33 +641,28 @@
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<template v-if="!userDialogGroupEditMode"> <template v-if="!userDialogGroupEditMode">
<span style="margin-right: 5px">{{ t('dialog.user.groups.sort_by') }}</span> <span style="margin-right: 5px">{{ t('dialog.user.groups.sort_by') }}</span>
<el-dropdown <DropdownMenu>
trigger="click" <DropdownMenuTrigger as-child :disabled="userDialog.isGroupsLoading">
size="small" <el-button size="small" :disabled="userDialog.isGroupsLoading" @click.stop>
style="margin-right: 5px" <span>
:disabled="userDialog.isGroupsLoading" {{ t(userDialog.groupSorting.name) }}
@click.stop>
<el-button size="small">
<span
>{{ t(userDialog.groupSorting.name) }}
<el-icon style="margin-left: 5px"><ArrowDown /></el-icon> <el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
</span> </span>
</el-button> </el-button>
<template #dropdown> </DropdownMenuTrigger>
<el-dropdown-menu> <DropdownMenuContent>
<el-dropdown-item <DropdownMenuItem
v-for="(item, key) in userDialogGroupSortingOptions" v-for="(item, key) in userDialogGroupSortingOptions"
:key="key" :key="key"
:disabled=" :disabled="
item === userDialogGroupSortingOptions.inGame && item === userDialogGroupSortingOptions.inGame &&
userDialog.id !== currentUser.id userDialog.id !== currentUser.id
" "
@click="setUserDialogGroupSorting(item)" @click="setUserDialogGroupSorting(item)">
>{{ t(item.name) }} {{ t(item.name) }}
</el-dropdown-item> </DropdownMenuItem>
</el-dropdown-menu> </DropdownMenuContent>
</template> </DropdownMenu>
</el-dropdown>
</template> </template>
<el-button <el-button
v-if="userDialogGroupEditMode" v-if="userDialogGroupEditMode"
@@ -695,32 +686,38 @@
<template v-if="userDialogGroupEditMode"> <template v-if="userDialogGroupEditMode">
<div class="x-friend-list" style="margin-top: 10px; margin-bottom: 15px; max-height: unset"> <div class="x-friend-list" style="margin-top: 10px; margin-bottom: 15px; max-height: unset">
<!-- Bulk actions dropdown (shown only in edit mode) --> <!-- Bulk actions dropdown (shown only in edit mode) -->
<el-dropdown trigger="click"> <DropdownMenu>
<DropdownMenuTrigger as-child>
<el-button <el-button
size="small" size="small"
:icon="Setting" :icon="Setting"
style="margin-right: 5px; height: 29px; padding: 7px 15px; margin-bottom: 5px"> style="
margin-right: 5px;
height: 29px;
padding: 7px 15px;
margin-bottom: 5px;
">
{{ t('dialog.group.actions.manage_selected') }} {{ t('dialog.group.actions.manage_selected') }}
<el-icon style="margin-left: 5px"><ArrowDown /></el-icon> <el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
</el-button> </el-button>
<template #dropdown> </DropdownMenuTrigger>
<el-dropdown-menu> <DropdownMenuContent>
<el-dropdown-item @click="bulkSetVisibility('visible')"> <DropdownMenuItem @click="bulkSetVisibility('visible')">
{{ t('dialog.group.actions.visibility_everyone') }} {{ t('dialog.group.actions.visibility_everyone') }}
</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item @click="bulkSetVisibility('friends')"> <DropdownMenuItem @click="bulkSetVisibility('friends')">
{{ t('dialog.group.actions.visibility_friends') }} {{ t('dialog.group.actions.visibility_friends') }}
</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item @click="bulkSetVisibility('hidden')"> <DropdownMenuItem @click="bulkSetVisibility('hidden')">
{{ t('dialog.group.actions.visibility_hidden') }} {{ t('dialog.group.actions.visibility_hidden') }}
</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item divided @click="bulkLeaveGroups"> <DropdownMenuSeparator />
<el-icon><Delete /></el-icon> <DropdownMenuItem variant="destructive" @click="bulkLeaveGroups">
<Delete class="size-4" />
{{ t('dialog.user.groups.leave_group_tooltip') }} {{ t('dialog.user.groups.leave_group_tooltip') }}
</el-dropdown-item> </DropdownMenuItem>
</el-dropdown-menu> </DropdownMenuContent>
</template> </DropdownMenu>
</el-dropdown>
<!-- Select All button --> <!-- Select All button -->
<el-button <el-button
@@ -813,11 +810,8 @@
<span>({{ group.memberCount }})</span> <span>({{ group.memberCount }})</span>
</span> </span>
</div> </div>
<el-dropdown <DropdownMenu v-if="group.myMember?.visibility">
v-if="group.myMember?.visibility" <DropdownMenuTrigger as-child :disabled="group.privacy !== 'default'">
trigger="click"
size="small"
style="margin-right: 5px">
<el-button :disabled="group.privacy !== 'default'" @click.stop size="small"> <el-button :disabled="group.privacy !== 'default'" @click.stop size="small">
<span v-if="group.myMember.visibility === 'visible'">{{ <span v-if="group.myMember.visibility === 'visible'">{{
t('dialog.group.tags.visible') t('dialog.group.tags.visible')
@@ -831,31 +825,22 @@
<span v-else>{{ group.myMember.visibility }}</span> <span v-else>{{ group.myMember.visibility }}</span>
<el-icon style="margin-left: 5px"><ArrowDown /></el-icon> <el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
</el-button> </el-button>
<template #dropdown> </DropdownMenuTrigger>
<el-dropdown-menu> <DropdownMenuContent>
<el-dropdown-item @click="setGroupVisibility(group.id, 'visible')"> <DropdownMenuItem @click="setGroupVisibility(group.id, 'visible')">
<el-icon v-if="group.myMember.visibility === 'visible'" <Check v-if="group.myMember.visibility === 'visible'" class="size-4" />
><Check {{ t('dialog.group.actions.visibility_everyone') }}
/></el-icon> </DropdownMenuItem>
{{ <DropdownMenuItem @click="setGroupVisibility(group.id, 'friends')">
t('dialog.group.actions.visibility_everyone') <Check v-if="group.myMember.visibility === 'friends'" class="size-4" />
}}</el-dropdown-item {{ t('dialog.group.actions.visibility_friends') }}
> </DropdownMenuItem>
<el-dropdown-item @click="setGroupVisibility(group.id, 'friends')"> <DropdownMenuItem @click="setGroupVisibility(group.id, 'hidden')">
<el-icon v-if="group.myMember.visibility === 'friends'" <Check v-if="group.myMember.visibility === 'hidden'" class="size-4" />
><Check {{ t('dialog.group.actions.visibility_hidden') }}
/></el-icon> </DropdownMenuItem>
{{ t('dialog.group.actions.visibility_friends') }}</el-dropdown-item </DropdownMenuContent>
> </DropdownMenu>
<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>
<!--//- JSON is missing isSubscribedToAnnouncements, can't be implemented--> <!--//- JSON is missing isSubscribedToAnnouncements, can't be implemented-->
<!-- <el-button <!-- <el-button
@click.stop=" @click.stop="
@@ -1052,53 +1037,43 @@
</div> </div>
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<span style="margin-right: 5px">{{ t('dialog.user.worlds.sort_by') }}</span> <span style="margin-right: 5px">{{ t('dialog.user.worlds.sort_by') }}</span>
<el-dropdown <DropdownMenu>
trigger="click" <DropdownMenuTrigger as-child :disabled="userDialog.isWorldsLoading">
size="small" <el-button size="small" :disabled="userDialog.isWorldsLoading" @click.stop>
style="margin-right: 5px" <span>
:disabled="userDialog.isWorldsLoading" {{ t(userDialog.worldSorting.name) }}
@click.stop> <el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
<el-button size="small"> </span>
<span
>{{ t(userDialog.worldSorting.name) }}
<el-icon style="margin-left: 5px"><ArrowDown /></el-icon
></span>
</el-button> </el-button>
<template #dropdown> </DropdownMenuTrigger>
<el-dropdown-menu> <DropdownMenuContent>
<el-dropdown-item <DropdownMenuItem
v-for="(item, key) in userDialogWorldSortingOptions" v-for="(item, key) in userDialogWorldSortingOptions"
:key="key" :key="key"
@click="setUserDialogWorldSorting(item)"> @click="setUserDialogWorldSorting(item)">
{{ t(item.name) }} {{ t(item.name) }}
</el-dropdown-item> </DropdownMenuItem>
</el-dropdown-menu> </DropdownMenuContent>
</template> </DropdownMenu>
</el-dropdown>
<span style="margin: 0 5px">{{ t('dialog.user.worlds.order_by') }}</span> <span style="margin: 0 5px">{{ t('dialog.user.worlds.order_by') }}</span>
<el-dropdown <DropdownMenu>
trigger="click" <DropdownMenuTrigger as-child :disabled="userDialog.isWorldsLoading">
size="small" <el-button size="small" :disabled="userDialog.isWorldsLoading" @click.stop>
style="margin-right: 5px" <span>
:disabled="userDialog.isWorldsLoading" {{ t(userDialog.worldOrder.name) }}
@click.stop> <el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
<el-button size="small"> </span>
<span
>{{ t(userDialog.worldOrder.name) }}
<el-icon style="margin-left: 5px"><ArrowDown /></el-icon
></span>
</el-button> </el-button>
<template #dropdown> </DropdownMenuTrigger>
<el-dropdown-menu> <DropdownMenuContent>
<el-dropdown-item <DropdownMenuItem
v-for="(item, key) in userDialogWorldOrderOptions" v-for="(item, key) in userDialogWorldOrderOptions"
:key="key" :key="key"
@click="setUserDialogWorldOrder(item)"> @click="setUserDialogWorldOrder(item)">
{{ t(item.name) }} {{ t(item.name) }}
</el-dropdown-item> </DropdownMenuItem>
</el-dropdown-menu> </DropdownMenuContent>
</template> </DropdownMenu>
</el-dropdown>
</div> </div>
</div> </div>
<div <div
@@ -1214,58 +1189,48 @@
<div> <div>
<template v-if="userDialog.ref.id === currentUser.id"> <template v-if="userDialog.ref.id === currentUser.id">
<span style="margin-right: 5px">{{ t('dialog.user.avatars.sort_by') }}</span> <span style="margin-right: 5px">{{ t('dialog.user.avatars.sort_by') }}</span>
<el-dropdown <DropdownMenu>
trigger="click" <DropdownMenuTrigger as-child :disabled="userDialog.isWorldsLoading">
size="small" <el-button size="small" :disabled="userDialog.isWorldsLoading" @click.stop>
style="margin-right: 5px" <span>
:disabled="userDialog.isWorldsLoading" {{ t(`dialog.user.avatars.sort_by_${userDialog.avatarSorting}`) }}
@click.stop> <el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
<el-button size="small"> </span>
<span
>{{ t(`dialog.user.avatars.sort_by_${userDialog.avatarSorting}`) }}
<el-icon style="margin-left: 5px"><ArrowDown /></el-icon
></span>
</el-button> </el-button>
<template #dropdown> </DropdownMenuTrigger>
<el-dropdown-menu> <DropdownMenuContent>
<el-dropdown-item @click="changeUserDialogAvatarSorting('name')"> <DropdownMenuItem @click="changeUserDialogAvatarSorting('name')">
{{ t('dialog.user.avatars.sort_by_name') }} {{ t('dialog.user.avatars.sort_by_name') }}
</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item @click="changeUserDialogAvatarSorting('update')"> <DropdownMenuItem @click="changeUserDialogAvatarSorting('update')">
{{ t('dialog.user.avatars.sort_by_update') }} {{ t('dialog.user.avatars.sort_by_update') }}
</el-dropdown-item> </DropdownMenuItem>
</el-dropdown-menu> </DropdownMenuContent>
</template> </DropdownMenu>
</el-dropdown>
<span style="margin-right: 5px; margin-left: 10px">{{ <span style="margin-right: 5px; margin-left: 10px">{{
t('dialog.user.avatars.group_by') t('dialog.user.avatars.group_by')
}}</span> }}</span>
<el-dropdown <DropdownMenu>
trigger="click" <DropdownMenuTrigger as-child :disabled="userDialog.isWorldsLoading">
size="small" <el-button size="small" :disabled="userDialog.isWorldsLoading" @click.stop>
style="margin-right: 5px" <span>
:disabled="userDialog.isWorldsLoading" {{ t(`dialog.user.avatars.${userDialog.avatarReleaseStatus}`) }}
@click.stop> <el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
<el-button size="small"> </span>
<span
>{{ t(`dialog.user.avatars.${userDialog.avatarReleaseStatus}`) }}
<el-icon style="margin-left: 5px"><ArrowDown /></el-icon
></span>
</el-button> </el-button>
<template #dropdown> </DropdownMenuTrigger>
<el-dropdown-menu> <DropdownMenuContent>
<el-dropdown-item @click="userDialog.avatarReleaseStatus = 'all'"> <DropdownMenuItem @click="userDialog.avatarReleaseStatus = 'all'">
{{ t('dialog.user.avatars.all') }} {{ t('dialog.user.avatars.all') }}
</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item @click="userDialog.avatarReleaseStatus = 'public'"> <DropdownMenuItem @click="userDialog.avatarReleaseStatus = 'public'">
{{ t('dialog.user.avatars.public') }} {{ t('dialog.user.avatars.public') }}
</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item @click="userDialog.avatarReleaseStatus = 'private'"> <DropdownMenuItem @click="userDialog.avatarReleaseStatus = 'private'">
{{ t('dialog.user.avatars.private') }} {{ t('dialog.user.avatars.private') }}
</el-dropdown-item> </DropdownMenuItem>
</el-dropdown-menu> </DropdownMenuContent>
</template> </DropdownMenu>
</el-dropdown>
</template> </template>
</div> </div>
</div> </div>
@@ -1412,6 +1377,13 @@
userRequest, userRequest,
worldRequest worldRequest
} from '../../../api'; } from '../../../api';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger
} from '../../ui/dropdown-menu';
import { processBulk, request } from '../../../service/request'; import { processBulk, request } from '../../../service/request';
import { userDialogGroupSortingOptions, userDialogMutualFriendSortingOptions } from '../../../shared/constants'; import { userDialogGroupSortingOptions, userDialogMutualFriendSortingOptions } from '../../../shared/constants';
import { userDialogWorldOrderOptions, userDialogWorldSortingOptions } from '../../../shared/constants/'; import { userDialogWorldOrderOptions, userDialogWorldSortingOptions } from '../../../shared/constants/';
src/components/dialogs/WorldDialog/WorldDialog.vue
+102 -76
View File
@@ -181,110 +181,124 @@
style="margin-left: 5px" style="margin-left: 5px"
@click="worldDialogCommand('Add Favorite')" /> @click="worldDialogCommand('Add Favorite')" />
</TooltipWrapper> </TooltipWrapper>
<el-dropdown trigger="click" style="margin-left: 5px" @command="worldDialogCommand"> <DropdownMenu>
<DropdownMenuTrigger as-child>
<el-button type="default" :icon="MoreFilled" size="large" circle /> <el-button type="default" :icon="MoreFilled" size="large" circle />
<template #dropdown> </DropdownMenuTrigger>
<el-dropdown-menu> <DropdownMenuContent>
<el-dropdown-item :icon="Refresh" command="Refresh"> <DropdownMenuItem @click="worldDialogCommand('Refresh')">
<Refresh class="size-4" />
{{ t('dialog.world.actions.refresh') }} {{ t('dialog.world.actions.refresh') }}
</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item :icon="Share" command="Share"> <DropdownMenuItem @click="worldDialogCommand('Share')">
<Share class="size-4" />
{{ t('dialog.world.actions.share') }} {{ t('dialog.world.actions.share') }}
</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item :icon="Flag" command="New Instance" divided> <DropdownMenuSeparator />
<DropdownMenuItem @click="worldDialogCommand('New Instance')">
<Flag class="size-4" />
{{ t('dialog.world.actions.new_instance') }} {{ t('dialog.world.actions.new_instance') }}
</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item :icon="Message" command="New Instance and Self Invite"> <DropdownMenuItem @click="worldDialogCommand('New Instance and Self Invite')">
<Message class="size-4" />
{{ {{
canOpenInstanceInGame canOpenInstanceInGame
? t('dialog.world.actions.new_instance_and_open_ingame') ? t('dialog.world.actions.new_instance_and_open_ingame')
: t('dialog.world.actions.new_instance_and_self_invite') : t('dialog.world.actions.new_instance_and_self_invite')
}} }}
</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item <DropdownMenuSeparator />
<DropdownMenuItem
v-if=" v-if="
currentUser.$homeLocation && currentUser.$homeLocation &&
currentUser.$homeLocation.worldId === worldDialog.id currentUser.$homeLocation.worldId === worldDialog.id
" "
:icon="MagicStick" @click="worldDialogCommand('Reset Home')">
command="Reset Home" <MagicStick class="size-4" />
divided>
{{ t('dialog.world.actions.reset_home') }} {{ t('dialog.world.actions.reset_home') }}
</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item v-else :icon="HomeFilled" command="Make Home" divided> <DropdownMenuItem v-else @click="worldDialogCommand('Make Home')">
<HomeFilled class="size-4" />
{{ t('dialog.world.actions.make_home') }} {{ t('dialog.world.actions.make_home') }}
</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item :icon="DataLine" command="Previous Instances"> <DropdownMenuItem @click="worldDialogCommand('Previous Instances')">
<DataLine class="size-4" />
{{ t('dialog.world.actions.show_previous_instances') }} {{ t('dialog.world.actions.show_previous_instances') }}
</el-dropdown-item> </DropdownMenuItem>
<template v-if="currentUser.id !== worldDialog.ref.authorId"> <template v-if="currentUser.id !== worldDialog.ref.authorId">
<el-dropdown-item <DropdownMenuItem
:disabled="!worldDialog.hasPersistData" :disabled="!worldDialog.hasPersistData"
:icon="Upload" @click="worldDialogCommand('Delete Persistent Data')">
command="Delete Persistent Data"> <Upload class="size-4" />
{{ t('dialog.world.actions.delete_persistent_data') }} {{ t('dialog.world.actions.delete_persistent_data') }}
</el-dropdown-item> </DropdownMenuItem>
</template> </template>
<template v-else> <template v-else>
<el-dropdown-item :icon="Edit" command="Rename"> <DropdownMenuItem @click="worldDialogCommand('Rename')">
<Edit class="size-4" />
{{ t('dialog.world.actions.rename') }} {{ t('dialog.world.actions.rename') }}
</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item :icon="Edit" command="Change Description"> <DropdownMenuItem @click="worldDialogCommand('Change Description')">
<Edit class="size-4" />
{{ t('dialog.world.actions.change_description') }} {{ t('dialog.world.actions.change_description') }}
</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item :icon="Edit" command="Change Capacity"> <DropdownMenuItem @click="worldDialogCommand('Change Capacity')">
<Edit class="size-4" />
{{ t('dialog.world.actions.change_capacity') }} {{ t('dialog.world.actions.change_capacity') }}
</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item :icon="Edit" command="Change Recommended Capacity"> <DropdownMenuItem @click="worldDialogCommand('Change Recommended Capacity')">
<Edit class="size-4" />
{{ t('dialog.world.actions.change_recommended_capacity') }} {{ t('dialog.world.actions.change_recommended_capacity') }}
</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item :icon="Edit" command="Change YouTube Preview"> <DropdownMenuItem @click="worldDialogCommand('Change YouTube Preview')">
<Edit class="size-4" />
{{ t('dialog.world.actions.change_preview') }} {{ t('dialog.world.actions.change_preview') }}
</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item :icon="Edit" command="Change Tags"> <DropdownMenuItem @click="worldDialogCommand('Change Tags')">
<Edit class="size-4" />
{{ t('dialog.world.actions.change_warnings_settings_tags') }} {{ t('dialog.world.actions.change_warnings_settings_tags') }}
</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item :icon="Edit" command="Change Allowed Domains"> <DropdownMenuItem @click="worldDialogCommand('Change Allowed Domains')">
<Edit class="size-4" />
{{ t('dialog.world.actions.change_allowed_video_player_domains') }} {{ t('dialog.world.actions.change_allowed_video_player_domains') }}
</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item v-if="isWindows" :icon="Picture" command="Change Image"> <DropdownMenuItem v-if="isWindows" @click="worldDialogCommand('Change Image')">
<Picture class="size-4" />
{{ t('dialog.world.actions.change_image') }} {{ t('dialog.world.actions.change_image') }}
</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item <DropdownMenuItem
v-if="worldDialog.ref.unityPackageUrl" v-if="worldDialog.ref.unityPackageUrl"
:icon="Download" @click="worldDialogCommand('Download Unity Package')">
command="Download Unity Package"> <Download class="size-4" />
{{ t('dialog.world.actions.download_package') }} {{ t('dialog.world.actions.download_package') }}
</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item <DropdownMenuSeparator />
<DropdownMenuItem
v-if=" v-if="
worldDialog.ref?.tags?.includes('system_approved') || worldDialog.ref?.tags?.includes('system_approved') ||
worldDialog.ref?.tags?.includes('system_labs') worldDialog.ref?.tags?.includes('system_labs')
" "
:icon="View" @click="worldDialogCommand('Unpublish')">
command="Unpublish" <View class="size-4" />
divided>
{{ t('dialog.world.actions.unpublish') }} {{ t('dialog.world.actions.unpublish') }}
</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item v-else :icon="View" command="Publish" divided> <DropdownMenuItem v-else @click="worldDialogCommand('Publish')">
<View class="size-4" />
{{ t('dialog.world.actions.publish_to_labs') }} {{ t('dialog.world.actions.publish_to_labs') }}
</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item <DropdownMenuItem
:disabled="!worldDialog.hasPersistData" :disabled="!worldDialog.hasPersistData"
:icon="Upload" @click="worldDialogCommand('Delete Persistent Data')">
command="Delete Persistent Data"> <Upload class="size-4" />
{{ t('dialog.world.actions.delete_persistent_data') }} {{ t('dialog.world.actions.delete_persistent_data') }}
</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item <DropdownMenuItem variant="destructive" @click="worldDialogCommand('Delete')">
:icon="Delete" <Delete class="size-4" />
command="Delete"
style="color: var(--el-color-danger)">
{{ t('dialog.world.actions.delete') }} {{ t('dialog.world.actions.delete') }}
</el-dropdown-item> </DropdownMenuItem>
</template> </template>
</el-dropdown-menu> </DropdownMenuContent>
</template> </DropdownMenu>
</el-dropdown>
</div> </div>
</div> </div>
</div> </div>
@@ -431,22 +445,27 @@
{{ worldDialog.id }} {{ worldDialog.id }}
</span> </span>
<TooltipWrapper side="top" :content="t('dialog.world.info.id_tooltip')"> <TooltipWrapper side="top" :content="t('dialog.world.info.id_tooltip')">
<el-dropdown trigger="click" size="small" style="margin-left: 5px" @click.stop> <DropdownMenu>
<el-button type="default" :icon="CopyDocument" size="small" circle /> <DropdownMenuTrigger as-child>
<template #dropdown> <el-button
<el-dropdown-menu> type="default"
<el-dropdown-item @click="copyWorldId()"> :icon="CopyDocument"
size="small"
circle
@click.stop />
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem @click="copyWorldId()">
{{ t('dialog.world.info.copy_id') }} {{ t('dialog.world.info.copy_id') }}
</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item @click="copyWorldUrl()"> <DropdownMenuItem @click="copyWorldUrl()">
{{ t('dialog.world.info.copy_url') }} {{ t('dialog.world.info.copy_url') }}
</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item @click="copyWorldName()"> <DropdownMenuItem @click="copyWorldName()">
{{ t('dialog.world.info.copy_name') }} {{ t('dialog.world.info.copy_name') }}
</el-dropdown-item> </DropdownMenuItem>
</el-dropdown-menu> </DropdownMenuContent>
</template> </DropdownMenu>
</el-dropdown>
</TooltipWrapper> </TooltipWrapper>
</div> </div>
</div> </div>
@@ -780,6 +799,13 @@
useUserStore, useUserStore,
useWorldStore useWorldStore
} from '../../../stores'; } from '../../../stores';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger
} from '../../ui/dropdown-menu';
import { favoriteRequest, miscRequest, userRequest, worldRequest } from '../../../api'; import { favoriteRequest, miscRequest, userRequest, worldRequest } from '../../../api';
import { Badge } from '../../ui/badge'; import { Badge } from '../../ui/badge';
import { database } from '../../../service/database.js'; import { database } from '../../../service/database.js';
src/components/ui/dropdown-menu/DropdownMenuContent.vue
+1 -1
View File
@@ -51,7 +51,7 @@
v-bind="{ ...$attrs, ...forwarded }" v-bind="{ ...$attrs, ...forwarded }"
:class=" :class="
cn( cn(
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md', 'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-10000 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
props.class props.class
) )
"> ">
src/components/ui/dropdown-menu/DropdownMenuLabel.vue
+1 -1
View File
@@ -19,7 +19,7 @@
data-slot="dropdown-menu-label" data-slot="dropdown-menu-label"
:data-inset="inset ? '' : undefined" :data-inset="inset ? '' : undefined"
v-bind="forwardedProps" v-bind="forwardedProps"
:class="cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', props.class)"> :class="cn('px-2 py-1.5 text-sm font-medium data-inset:pl-8', props.class)">
<slot /> <slot />
</DropdownMenuLabel> </DropdownMenuLabel>
</template> </template>
src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
+1 -1
View File
@@ -26,7 +26,7 @@
v-bind="forwarded" v-bind="forwarded"
:class=" :class="
cn( cn(
'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4', 'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
props.class props.class
) )
"> ">
src/components/ui/dropdown-menu/DropdownMenuSubContent.vue
+1 -1
View File
@@ -46,7 +46,7 @@
v-bind="forwarded" v-bind="forwarded"
:class=" :class="
cn( cn(
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg', 'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-10000 min-w-32 origin-(--reka-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
props.class props.class
) )
"> ">
src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
+1 -1
View File
@@ -23,7 +23,7 @@
v-bind="forwardedProps" v-bind="forwardedProps"
:class=" :class="
cn( cn(
'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8', 'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-inset:pl-8',
props.class props.class
) )
"> ">