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

replace some el-button

Browse Source
This commit is contained in:
pa
2026-01-11 16:01:43 +09:00
committed by Natsumi
parent 2043a321a4
commit 316d8ca9ba
24 changed files with 870 additions and 727 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/LastJoin.vue
+1 -1
View File
@@ -4,7 +4,7 @@
<template #content> <template #content>
<span>{{ t('dialog.user.info.last_join') }} <Timer :epoch="lastJoin" /></span> <span>{{ t('dialog.user.info.last_join') }} <Timer :epoch="lastJoin" /></span>
</template> </template>
<i class="ri-history-line"></i> <i class="ri-map-pin-time-line text-muted-foreground"></i>
</TooltipWrapper> </TooltipWrapper>
</span> </span>
</template> </template>
src/components/NavMenu.vue
+4 -4
View File
@@ -12,13 +12,12 @@
style="padding: 7px"></el-progress> style="padding: 7px"></el-progress>
</div> </div>
<div v-else-if="pendingVRCXUpdate || pendingVRCXInstall" class="pending-update"> <div v-else-if="pendingVRCXUpdate || pendingVRCXInstall" class="pending-update">
<el-button <Button
type="success" variant="outline"
plain
style="font-size: 19px; height: 36px; width: 44px; margin: 10px" style="font-size: 19px; height: 36px; width: 44px; margin: 10px"
@click="showVRCXUpdateDialog"> @click="showVRCXUpdateDialog">
<i class="ri-download-line"></i> <i class="ri-download-line"></i>
</el-button> </Button>
</div> </div>
<el-menu ref="navMenuRef" class="nav-menu" :collapse="isCollapsed" :collapse-transition="false"> <el-menu ref="navMenuRef" class="nav-menu" :collapse="isCollapsed" :collapse-transition="false">
@@ -249,6 +248,7 @@
<script setup> <script setup>
import { computed, defineAsyncComponent, onMounted, ref, watch } from 'vue'; import { computed, defineAsyncComponent, onMounted, ref, watch } from 'vue';
import { ElMessageBox, dayjs } from 'element-plus'; import { ElMessageBox, dayjs } from 'element-plus';
import { Button } from '@/components/ui/button';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
src/components/dialogs/AvatarDialog/AvatarDialog.vue
+56 -60
View File
@@ -179,57 +179,57 @@
v-text="avatarDialog.ref.description"></span> v-text="avatarDialog.ref.description"></span>
</div> </div>
</div> </div>
<div style="flex: none; margin-left: 10px"> <div class="flex items-center">
<TooltipWrapper <TooltipWrapper
v-if="avatarDialog.inCache" v-if="avatarDialog.inCache"
side="top" side="top"
:content="t('dialog.avatar.actions.delete_cache_tooltip')"> :content="t('dialog.avatar.actions.delete_cache_tooltip')">
<el-button <Button
:icon="Delete" class="rounded-full mr-2"
size="large" size="icon-lg"
circle variant="outline"
:disabled="isGameRunning && avatarDialog.cacheLocked" :disabled="isGameRunning && avatarDialog.cacheLocked"
@click="deleteVRChatCache(avatarDialog.ref)"></el-button> @click="deleteVRChatCache(avatarDialog.ref)"
><Trash2
/></Button>
</TooltipWrapper> </TooltipWrapper>
<TooltipWrapper <TooltipWrapper
v-if="avatarDialog.isFavorite" v-if="avatarDialog.isFavorite"
side="top" side="top"
:content="t('dialog.avatar.actions.favorite_tooltip')"> :content="t('dialog.avatar.actions.favorite_tooltip')">
<el-button <Button class="rounded-full" size="icon-lg" @click="avatarDialogCommand('Add Favorite')"
type="warning" ><Star
:icon="StarFilled" /></Button>
size="large"
circle
style="margin-left: 5px"
@click="avatarDialogCommand('Add Favorite')"></el-button>
</TooltipWrapper> </TooltipWrapper>
<TooltipWrapper v-else side="top" :content="t('dialog.avatar.actions.favorite_tooltip')"> <TooltipWrapper v-else side="top" :content="t('dialog.avatar.actions.favorite_tooltip')">
<el-button <Button
type="default" class="rounded-full"
:icon="Star" size="icon-lg"
size="large" variant="outline"
circle @click="avatarDialogCommand('Add Favorite')"
style="margin-left: 5px" ><Star
@click="avatarDialogCommand('Add Favorite')"></el-button> /></Button>
</TooltipWrapper> </TooltipWrapper>
<TooltipWrapper side="top" :content="t('dialog.avatar.actions.select')"> <TooltipWrapper side="top" :content="t('dialog.avatar.actions.select')">
<el-button <Button
type="default" class="rounded-full ml-2"
:icon="Check" size="icon-lg"
size="large" variant="outline"
circle
:disabled="currentUser.currentAvatar === avatarDialog.id" :disabled="currentUser.currentAvatar === avatarDialog.id"
style="margin-left: 5px" @click="selectAvatarWithoutConfirmation(avatarDialog.id)">
@click="selectAvatarWithoutConfirmation(avatarDialog.id)"></el-button> <CircleCheck
/></Button>
</TooltipWrapper> </TooltipWrapper>
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger as-child> <DropdownMenuTrigger as-child>
<el-button <Button
:type="avatarDialog.isBlocked ? 'danger' : 'default'" class="rounded-full ml-2"
:icon="MoreFilled" :variant="avatarDialog.isBlocked ? 'destructive' : 'outline'"
size="large" size="icon-lg">
style="margin-left: 5px" <Ellipsis />
circle></el-button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent> <DropdownMenuContent>
<DropdownMenuItem @click="avatarDialogCommand('Refresh')"> <DropdownMenuItem @click="avatarDialogCommand('Refresh')">
@@ -442,12 +442,13 @@
}}<TooltipWrapper side="top" :content="t('dialog.avatar.info.id_tooltip')"> }}<TooltipWrapper side="top" :content="t('dialog.avatar.info.id_tooltip')">
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger as-child> <DropdownMenuTrigger as-child>
<el-button <Button
type="default" class="rounded-full text-xs"
:icon="CopyDocument" size="icon-sm"
size="small" variant="outline"
circle @click.stop
@click.stop></el-button> ><i class="ri-file-copy-line"></i
></Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent> <DropdownMenuContent>
<DropdownMenuItem @click="copyAvatarId(avatarDialog.id)"> <DropdownMenuItem @click="copyAvatarId(avatarDialog.id)">
@@ -511,19 +512,20 @@
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane name="JSON" :label="t('dialog.avatar.json.header')" style="max-height: 50vh" lazy> <el-tab-pane name="JSON" :label="t('dialog.avatar.json.header')" style="max-height: 50vh" lazy>
<el-button <Button
type="default" class="rounded-full h-6 w-6 mr-2"
size="small" size="icon-sm"
:icon="Refresh" variant="outline"
circle @click="refreshAvatarDialogTreeData()">
@click="refreshAvatarDialogTreeData"></el-button> <RefreshCcw />
<el-button </Button>
type="default" <Button
size="small" class="rounded-full h-6 w-6"
:icon="Download" size="icon-sm"
circle variant="outline"
style="margin-left: 5px" @click="downloadAndSaveJson(avatarDialog.id, avatarDialog.ref)">
@click="downloadAndSaveJson(avatarDialog.id, avatarDialog.ref)"></el-button> <Download />
</Button>
<vue-json-pretty :data="treeData" :deep="2" :theme="isDarkMode ? 'dark' : 'light'" show-icon /> <vue-json-pretty :data="treeData" :deep="2" :theme="isDarkMode ? 'dark' : 'light'" show-icon />
<br /> <br />
<vue-json-pretty <vue-json-pretty
@@ -547,26 +549,20 @@
<script setup> <script setup>
import { import {
Back,
Check,
CircleCheck,
CircleClose, CircleClose,
CopyDocument,
Delete, Delete,
Download, Download,
Edit, Edit,
MoreFilled,
Picture, Picture,
Refresh, Refresh,
Right,
Share, Share,
Star,
StarFilled,
Upload, Upload,
User, User,
Warning Warning
} from '@element-plus/icons-vue'; } from '@element-plus/icons-vue';
import { CircleCheck, Ellipsis, RefreshCcw, Star, Trash2 } from 'lucide-vue-next';
import { computed, defineAsyncComponent, nextTick, ref, watch } from 'vue'; import { computed, defineAsyncComponent, nextTick, ref, watch } from 'vue';
import { Button } from '@/components/ui/button';
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';
src/components/dialogs/AvatarDialog/SetAvatarTagsDialog.vue
+11 -10
View File
@@ -35,14 +35,14 @@
<br /> <br />
<template <template
v-if="setAvatarTagsDialog.ownAvatars.length === props.setAvatarTagsDialog.selectedAvatarIds.length"> v-if="setAvatarTagsDialog.ownAvatars.length === props.setAvatarTagsDialog.selectedAvatarIds.length">
<el-button size="small" @click="setAvatarTagsSelectToggle">{{ <Button size="sm" variant="outline" @click="setAvatarTagsSelectToggle">{{
t('dialog.set_avatar_tags.select_none') t('dialog.set_avatar_tags.select_none')
}}</el-button> }}</Button>
</template> </template>
<template v-else> <template v-else>
<el-button size="small" @click="setAvatarTagsSelectToggle">{{ <Button size="sm" variant="outline" @click="setAvatarTagsSelectToggle">{{
t('dialog.set_avatar_tags.select_all') t('dialog.set_avatar_tags.select_all')
}}</el-button> }}</Button>
</template> </template>
<span style="margin-left: 5px" <span style="margin-left: 5px"
>{{ props.setAvatarTagsDialog.selectedAvatarIds.length }} / >{{ props.setAvatarTagsDialog.selectedAvatarIds.length }} /
@@ -76,24 +76,25 @@
<span v-else class="extra" v-text="avatar.releaseStatus"></span> <span v-else class="extra" v-text="avatar.releaseStatus"></span>
<span class="extra" v-text="avatarTagStrings.get(avatar.id)"></span> <span class="extra" v-text="avatarTagStrings.get(avatar.id)"></span>
</div> </div>
<el-button text size="small" style="margin-left: 5px" @click.stop> <Button size="sm" variant="ghost" style="margin-left: 5px" @click.stop>
<el-checkbox <el-checkbox
:model-value="props.setAvatarTagsDialog.selectedAvatarIds.includes(avatar.id)" :model-value="props.setAvatarTagsDialog.selectedAvatarIds.includes(avatar.id)"
@click="toggleAvatarSelection(avatar.id)"></el-checkbox> @click="toggleAvatarSelection(avatar.id)"></el-checkbox>
</el-button> </Button>
</div> </div>
</div> </div>
</template> </template>
<template #footer> <template #footer>
<el-button @click="closeSetAvatarTagsDialog">{{ t('dialog.set_avatar_tags.cancel') }}</el-button> <Button variant="secondary" @click="closeSetAvatarTagsDialog">{{
<el-button type="primary" @click="saveSetAvatarTagsDialog">{{ t('dialog.set_avatar_tags.cancel')
t('dialog.set_avatar_tags.save') }}</Button>
}}</el-button> <Button @click="saveSetAvatarTagsDialog">{{ t('dialog.set_avatar_tags.save') }}</Button>
</template> </template>
</el-dialog> </el-dialog>
</template> </template>
<script setup> <script setup>
import { Button } from '@/components/ui/button';
import { Loading } from '@element-plus/icons-vue'; import { Loading } from '@element-plus/icons-vue';
import { toast } from 'vue-sonner'; import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
src/components/dialogs/GroupDialog/GroupDialog.vue
+174 -117
View File
@@ -357,12 +357,13 @@
<Location :location="room.tag" style="display: inline-block" /> <Location :location="room.tag" style="display: inline-block" />
<InviteYourself :location="room.tag" style="margin-left: 5px" /> <InviteYourself :location="room.tag" style="margin-left: 5px" />
<TooltipWrapper side="top" content="Refresh player count"> <TooltipWrapper side="top" content="Refresh player count">
<el-button <Button
size="small" class="rounded-full w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
:icon="Refresh" size="icon"
style="margin-left: 5px" variant="outline"
circle @click="refreshInstancePlayerCount(room.tag)"
@click="refreshInstancePlayerCount(room.tag)" /> ><i class="ri-refresh-line"></i
></Button>
</TooltipWrapper> </TooltipWrapper>
<LastJoin :location="room.tag" :currentlocation="lastLocation.location" /> <LastJoin :location="room.tag" :currentlocation="lastLocation.location" />
<InstanceInfo <InstanceInfo
@@ -485,22 +486,20 @@
</TooltipWrapper> </TooltipWrapper>
<template v-if="hasGroupPermission(groupDialog.ref, 'group-announcement-manage')"> <template v-if="hasGroupPermission(groupDialog.ref, 'group-announcement-manage')">
<TooltipWrapper side="top" :content="t('dialog.group.posts.edit_tooltip')"> <TooltipWrapper side="top" :content="t('dialog.group.posts.edit_tooltip')">
<el-button <Button
text size="sm"
:icon="Edit" variant="ghost"
size="small"
style="margin-left: 5px; padding: 0" style="margin-left: 5px; padding: 0"
@click=" @click="
showGroupPostEditDialog(groupDialog.id, groupDialog.announcement) showGroupPostEditDialog(groupDialog.id, groupDialog.announcement)
" /> "></Button>
</TooltipWrapper> </TooltipWrapper>
<TooltipWrapper side="top" :content="t('dialog.group.posts.delete_tooltip')"> <TooltipWrapper side="top" :content="t('dialog.group.posts.delete_tooltip')">
<el-button <Button
text size="sm"
:icon="Delete" variant="ghost"
size="small"
style="margin-left: 5px; padding: 0" style="margin-left: 5px; padding: 0"
@click="confirmDeleteGroupPost(groupDialog.announcement)" /> @click="confirmDeleteGroupPost(groupDialog.announcement)"></Button>
</TooltipWrapper> </TooltipWrapper>
</template> </template>
</div> </div>
@@ -621,13 +620,12 @@
<span class="extra" <span class="extra"
>{{ groupDialog.ref.$url }} >{{ groupDialog.ref.$url }}
<TooltipWrapper side="top" :content="t('dialog.group.info.url_tooltip')"> <TooltipWrapper side="top" :content="t('dialog.group.info.url_tooltip')">
<el-button <Button
type="default" class="rounded-full"
size="small" size="icon"
:icon="CopyDocument" variant="outline"
circle
style="margin-left: 5px" style="margin-left: 5px"
@click="copyToClipboard(groupDialog.ref.$url)" /> </TooltipWrapper @click="copyToClipboard(groupDialog.ref.$url)"></Button> </TooltipWrapper
></span> ></span>
</div> </div>
</div> </div>
@@ -637,13 +635,12 @@
<span class="extra" <span class="extra"
>{{ groupDialog.id }} >{{ groupDialog.id }}
<TooltipWrapper side="top" :content="t('dialog.group.info.id_tooltip')"> <TooltipWrapper side="top" :content="t('dialog.group.info.id_tooltip')">
<el-button <Button
type="default" class="rounded-full"
size="small" size="icon"
:icon="CopyDocument" variant="outline"
circle
style="margin-left: 5px" style="margin-left: 5px"
@click="copyToClipboard(groupDialog.id)" /> </TooltipWrapper @click="copyToClipboard(groupDialog.id)"></Button> </TooltipWrapper
></span> ></span>
</div> </div>
</div> </div>
@@ -797,22 +794,24 @@
<template <template
v-if="hasGroupPermission(groupDialog.ref, 'group-announcement-manage')"> v-if="hasGroupPermission(groupDialog.ref, 'group-announcement-manage')">
<TooltipWrapper side="top" :content="t('dialog.group.posts.edit_tooltip')"> <TooltipWrapper side="top" :content="t('dialog.group.posts.edit_tooltip')">
<el-button <Button
text size="icon-sm"
:icon="Edit" class="h-6 w-6 text-xs text-muted-foreground hover:text-foreground"
size="small" variant="ghost"
style="margin-left: 5px" @click="showGroupPostEditDialog(groupDialog.id, post)"
@click="showGroupPostEditDialog(groupDialog.id, post)" /> ><i class="ri-pencil-line"></i
></Button>
</TooltipWrapper> </TooltipWrapper>
<TooltipWrapper <TooltipWrapper
side="top" side="top"
:content="t('dialog.group.posts.delete_tooltip')"> :content="t('dialog.group.posts.delete_tooltip')">
<el-button <Button
text size="icon-sm"
:icon="Delete" class="h-6 w-6 text-xs text-muted-foreground hover:text-foreground"
size="small" variant="ghost"
style="margin-left: 5px" @click="confirmDeleteGroupPost(post)"
@click="confirmDeleteGroupPost(post)" /> ><i class="ri-delete-bin-line"></i
></Button>
</TooltipWrapper> </TooltipWrapper>
</template> </template>
</div> </div>
@@ -832,20 +831,23 @@
t('dialog.group.members.friends_only') t('dialog.group.members.friends_only')
}}</span> }}</span>
<div style="margin-top: 10px"> <div style="margin-top: 10px">
<el-button <Button
type="default" class="rounded-full h-6 w-6"
size="small" variant="outline"
:icon="Refresh" size="icon-sm"
:loading="isGroupMembersLoading" :loading="isGroupMembersLoading"
circle circle
@click="loadAllGroupMembers" /> @click="loadAllGroupMembers">
<el-button <Spinner v-if="isGroupMembersLoading" /><RefreshCcw v-else
type="default" /></Button>
size="small" <Button
:icon="Download" class="rounded-full h-6 w-6 ml-2"
circle size="icon-sm"
variant="outline"
style="margin-left: 5px" style="margin-left: 5px"
@click="downloadAndSaveJson(`${groupDialog.id}_members`, groupDialog.members)" /> @click="downloadAndSaveJson(`${groupDialog.id}_members`, groupDialog.members)">
<Download class="h-4 w-4" />
</Button>
<span <span
v-if="groupDialog.memberSearch.length" v-if="groupDialog.memberSearch.length"
style="font-size: 14px; margin-left: 5px; margin-right: 5px" style="font-size: 14px; margin-left: 5px; margin-right: 5px"
@@ -856,62 +858,41 @@
> >
<div <div
v-if="hasGroupPermission(groupDialog.ref, 'group-members-manage')" v-if="hasGroupPermission(groupDialog.ref, 'group-members-manage')"
style="float: right"> style="float: right"
class="flex items-center">
<span style="margin-right: 5px">{{ t('dialog.group.members.sort_by') }}</span> <span style="margin-right: 5px">{{ t('dialog.group.members.sort_by') }}</span>
<DropdownMenu> <Select
<DropdownMenuTrigger v-model="groupDialogMemberSortValue"
as-child :disabled="isGroupMembersLoading || groupDialog.memberSearch.length > 0">
:disabled="isGroupMembersLoading || groupDialog.memberSearch.length > 0"> <SelectTrigger class="h-8 w-45 mr-1">
<el-button <SelectValue :placeholder="t('dialog.group.members.sort_by')" />
size="small" </SelectTrigger>
:disabled="isGroupMembersLoading || groupDialog.memberSearch.length > 0" <SelectContent>
@click.stop> <SelectItem
<span>
{{ t(groupDialog.memberSortOrder.name) }}
<el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
</span>
</el-button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem
v-for="item in groupDialogSortingOptions" v-for="item in groupDialogSortingOptions"
:key="item.name" :key="item.value"
@click="setGroupMemberSortOrder(item)"> :value="item.value">
{{ t(item.name) }} {{ t(item.name) }}
</DropdownMenuItem> </SelectItem>
</DropdownMenuContent> </SelectContent>
</DropdownMenu> </Select>
<span style="margin-right: 5px">{{ t('dialog.group.members.filter') }}</span> <span class="ml-2 mr-1">{{ t('dialog.group.members.filter') }}</span>
<DropdownMenu> <div style="display: inline-block; width: 220px">
<DropdownMenuTrigger <VirtualCombobox
as-child v-model="groupDialogMemberFilterKey"
:disabled="isGroupMembersLoading || groupDialog.memberSearch.length > 0"> :groups="groupDialogMemberFilterGroups"
<el-button :disabled="isGroupMembersLoading || groupDialog.memberSearch.length > 0"
size="small" :placeholder="t('dialog.group.members.filter')"
:disabled="isGroupMembersLoading || groupDialog.memberSearch.length > 0" :search-placeholder="t('dialog.group.members.search')"
@click.stop> :clearable="false"
<span> :close-on-select="true">
{{ t(groupDialog.memberFilter.name) }} <template #trigger="{ text }">
<el-icon style="margin-left: 5px"><ArrowDown /></el-icon> <span class="truncate">
{{ text || t('dialog.group.members.filter') }}
</span> </span>
</el-button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem
v-for="item in groupDialogFilterOptions"
:key="item.name"
@click="setGroupMemberFilter(item)">
{{ t(item.name) }}
</DropdownMenuItem>
<template v-for="role in groupDialog.ref.roles" :key="role.name">
<DropdownMenuItem
v-if="!role.defaultRole"
@click="setGroupMemberFilter(role)">
{{ role.name }}
</DropdownMenuItem>
</template> </template>
</DropdownMenuContent> </VirtualCombobox>
</DropdownMenu> </div>
</div> </div>
<el-input <el-input
v-model="groupDialog.memberSearch" v-model="groupDialog.memberSearch"
@@ -1107,19 +1088,20 @@
</el-tabs> </el-tabs>
</el-tab-pane> </el-tab-pane>
<el-tab-pane name="JSON" :label="t('dialog.group.json.header')" lazy> <el-tab-pane name="JSON" :label="t('dialog.group.json.header')" lazy>
<el-button <Button
type="default" class="rounded-full h-6 w-6 mr-2"
size="small" size="icon-sm"
:icon="Refresh" variant="outline"
circle @click="refreshGroupDialogTreeData()">
@click="refreshGroupDialogTreeData()" /> <RefreshCcw />
<el-button </Button>
type="default" <Button
size="small" class="rounded-full h-6 w-6"
:icon="Download" size="icon-sm"
circle variant="outline"
style="margin-left: 5px" @click="downloadAndSaveJson(groupDialog.id, groupDialog.ref)">
@click="downloadAndSaveJson(groupDialog.id, groupDialog.ref)" /> <Download />
</Button>
<vue-json-pretty <vue-json-pretty
:data="groupDialog.treeData" :data="groupDialog.treeData"
:deep="2" :deep="2"
@@ -1137,7 +1119,6 @@
<script setup> <script setup>
import { import {
ArrowDown,
Bell, Bell,
ChatLineSquare, ChatLineSquare,
Check, Check,
@@ -1145,7 +1126,6 @@
CircleClose, CircleClose,
Close, Close,
CollectionTag, CollectionTag,
CopyDocument,
Delete, Delete,
Download, Download,
Edit, Edit,
@@ -1162,8 +1142,13 @@
View, View,
Warning Warning
} from '@element-plus/icons-vue'; } from '@element-plus/icons-vue';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { computed, nextTick, reactive, ref, watch } from 'vue'; import { computed, nextTick, reactive, ref, watch } from 'vue';
import { Button } from '@/components/ui/button';
import { ElMessageBox } from 'element-plus'; import { ElMessageBox } from 'element-plus';
import { RefreshCcw } from 'lucide-vue-next';
import { Spinner } from '@/components/ui/spinner';
import { VirtualCombobox } from '@/components/ui/virtual-combobox';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner'; import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
@@ -1240,6 +1225,78 @@
const groupDialogGalleryCurrentName = ref('0'); const groupDialogGalleryCurrentName = ref('0');
const groupDialogTabCurrentName = ref('0'); const groupDialogTabCurrentName = ref('0');
const isGroupGalleryLoading = ref(false); const isGroupGalleryLoading = ref(false);
const groupDialogMemberSortValue = computed({
get() {
return groupDialog.value?.memberSortOrder?.value ?? '';
},
set(value) {
const option = Object.values(groupDialogSortingOptions).find((item) => item.value === value);
if (option) {
setGroupMemberSortOrder(option);
}
}
});
const groupDialogMemberFilterKey = computed({
get() {
const filter = groupDialog.value?.memberFilter;
if (!filter) return null;
if (filter.id === null) return 'everyone';
if (filter.id === '') return 'usersWithNoRole';
return `role:${filter.id}`;
},
set(key) {
if (!key) return;
if (key === 'everyone') {
setGroupMemberFilter(groupDialogFilterOptions.everyone);
return;
}
if (key === 'usersWithNoRole') {
setGroupMemberFilter(groupDialogFilterOptions.usersWithNoRole);
return;
}
if (key.startsWith('role:')) {
const roleId = key.slice('role:'.length);
const role = groupDialog.value?.ref?.roles?.find((r) => r.id === roleId);
if (role) {
setGroupMemberFilter(role);
}
}
}
});
const groupDialogMemberFilterGroups = computed(() => {
const filterItems = Object.values(groupDialogFilterOptions).map((item) => ({
value: item.id === null ? 'everyone' : item.id === '' ? 'usersWithNoRole' : `role:${item.id}`,
label: t(item.name),
search: t(item.name)
}));
const roleItems = (groupDialog.value?.ref?.roles ?? [])
.filter((role) => !role.defaultRole)
.map((role) => ({
value: `role:${role.id}`,
label: role.name,
search: role.name
}));
return [
{
key: 'filters',
label: t('dialog.group.members.filter'),
items: filterItems
},
{
key: 'roles',
label: 'Roles',
items: roleItems
}
].filter((group) => group.items.length);
});
const selectedGalleryFile = ref({ const selectedGalleryFile = ref({
selectedFileId: '', selectedFileId: '',
selectedImageUrl: '' selectedImageUrl: ''
src/components/dialogs/GroupDialog/GroupPostEditDialog.vue
+15 -10
View File
@@ -75,29 +75,33 @@
style="flex: none; width: 60px; height: 60px; border-radius: 4px; object-fit: cover" style="flex: none; width: 60px; height: 60px; border-radius: 4px; object-fit: cover"
@click="showFullscreenImageDialog(gallerySelectDialog.selectedImageUrl)" @click="showFullscreenImageDialog(gallerySelectDialog.selectedImageUrl)"
loading="lazy" /> loading="lazy" />
<el-button size="small" style="vertical-align: top" @click="clearImageGallerySelect"> <Button
size="sm"
variant="outline"
style="vertical-align: top"
@click="clearImageGallerySelect">
{{ t('dialog.invite_message.clear_selected_image') }} {{ t('dialog.invite_message.clear_selected_image') }}
</el-button> </Button>
</div> </div>
</template> </template>
<template v-else> <template v-else>
<el-button size="small" style="margin-right: 5px" @click="showGallerySelectDialog"> <Button size="sm" variant="outline" @click="showGallerySelectDialog">
{{ t('dialog.invite_message.select_image') }} {{ t('dialog.invite_message.select_image') }}
</el-button> </Button>
</template> </template>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<template #footer> <template #footer>
<el-button @click="groupPostEditDialog.visible = false"> <Button variant="secondary" @click="groupPostEditDialog.visible = false">
{{ t('dialog.group_post_edit.cancel') }} {{ t('dialog.group_post_edit.cancel') }}
</el-button> </Button>
<el-button v-if="groupPostEditDialog.postId" @click="editGroupPost"> <Button v-if="groupPostEditDialog.postId" @click="editGroupPost">
{{ t('dialog.group_post_edit.edit_post') }} {{ t('dialog.group_post_edit.edit_post') }}
</el-button> </Button>
<el-button v-else @click="createGroupPost"> <Button v-else @click="createGroupPost">
{{ t('dialog.group_post_edit.create_post') }} {{ t('dialog.group_post_edit.create_post') }}
</el-button> </Button>
</template> </template>
<GallerySelectDialog <GallerySelectDialog
:gallery-select-dialog="gallerySelectDialog" :gallery-select-dialog="gallerySelectDialog"
@@ -108,6 +112,7 @@
<script setup> <script setup>
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
import { Button } from '@/components/ui/button';
import { toast } from 'vue-sonner'; import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
src/components/dialogs/InviteDialog/SendInviteConfirmDialog.vue
+4 -4
View File
@@ -11,12 +11,12 @@
</div> </div>
<template #footer> <template #footer>
<el-button type="default" @click="cancelInviteConfirm"> <Button variant="secondary" @click="cancelInviteConfirm">
{{ t('dialog.invite_message.cancel') }} {{ t('dialog.invite_message.cancel') }}
</el-button> </Button>
<el-button type="primary" @click="sendInviteConfirm"> <Button @click="sendInviteConfirm">
{{ t('dialog.invite_message.confirm') }} {{ t('dialog.invite_message.confirm') }}
</el-button> </Button>
</template> </template>
</el-dialog> </el-dialog>
</template> </template>
src/components/dialogs/NewInstanceDialog.vue
+39 -38
View File
@@ -366,73 +366,74 @@
</el-tabs> </el-tabs>
<template v-if="newInstanceDialog.selectedTab === 'Normal'" #footer> <template v-if="newInstanceDialog.selectedTab === 'Normal'" #footer>
<template v-if="newInstanceDialog.instanceCreated"> <template v-if="newInstanceDialog.instanceCreated">
<el-button @click="copyInstanceUrl(newInstanceDialog.location)">{{ <Button variant="outline" class="mr-2" @click="copyInstanceUrl(newInstanceDialog.location)">{{
t('dialog.new_instance.copy_url') t('dialog.new_instance.copy_url')
}}</el-button> }}</Button>
<el-button @click="selfInvite(newInstanceDialog.location)">{{ <Button variant="outline" class="mr-2" @click="selfInvite(newInstanceDialog.location)">{{
t('dialog.new_instance.self_invite') t('dialog.new_instance.self_invite')
}}</el-button> }}</Button>
<el-button <Button
variant="outline"
class="mr-2"
:disabled=" :disabled="
(newInstanceDialog.accessType === 'friends' || newInstanceDialog.accessType === 'invite') && (newInstanceDialog.accessType === 'friends' || newInstanceDialog.accessType === 'invite') &&
newInstanceDialog.userId !== currentUser.id newInstanceDialog.userId !== currentUser.id
" "
@click="showInviteDialog(newInstanceDialog.location)" @click="showInviteDialog(newInstanceDialog.location)"
>{{ t('dialog.new_instance.invite') }}</el-button >{{ t('dialog.new_instance.invite') }}</Button
> >
<template v-if="canOpenInstanceInGame"> <template v-if="canOpenInstanceInGame">
<el-button @click="showLaunchDialog(newInstanceDialog.location, newInstanceDialog.shortName)">{{ <Button
t('dialog.new_instance.launch') variant="secondary"
}}</el-button> class="mr-2"
<el-button @click="handleAttachGame(newInstanceDialog.location, newInstanceDialog.shortName)"> @click="showLaunchDialog(newInstanceDialog.location, newInstanceDialog.shortName)"
>{{ t('dialog.new_instance.launch') }}</Button
>
<Button @click="handleAttachGame(newInstanceDialog.location, newInstanceDialog.shortName)">
{{ t('dialog.new_instance.open_ingame') }} {{ t('dialog.new_instance.open_ingame') }}
</el-button> </Button>
</template> </template>
<template v-else> <template v-else>
<el-button <Button @click="showLaunchDialog(newInstanceDialog.location, newInstanceDialog.shortName)">{{
type="primary" t('dialog.new_instance.launch')
@click="showLaunchDialog(newInstanceDialog.location, newInstanceDialog.shortName)" }}</Button>
>{{ t('dialog.new_instance.launch') }}</el-button
>
</template> </template>
</template> </template>
<template v-else> <template v-else>
<el-button type="primary" @click="handleCreateNewInstance">{{ <Button @click="handleCreateNewInstance">{{ t('dialog.new_instance.create_instance') }}</Button>
t('dialog.new_instance.create_instance')
}}</el-button>
</template> </template>
</template> </template>
<template v-else-if="newInstanceDialog.selectedTab === 'Legacy'" #footer> <template v-else-if="newInstanceDialog.selectedTab === 'Legacy'" #footer>
<el-button @click="copyInstanceUrl(newInstanceDialog.location)">{{ <Button variant="outline" class="mr-2" @click="copyInstanceUrl(newInstanceDialog.location)">{{
t('dialog.new_instance.copy_url') t('dialog.new_instance.copy_url')
}}</el-button> }}</Button>
<el-button @click="selfInvite(newInstanceDialog.location)">{{ <Button variant="outline" class="mr-2" @click="selfInvite(newInstanceDialog.location)">{{
t('dialog.new_instance.self_invite') t('dialog.new_instance.self_invite')
}}</el-button> }}</Button>
<el-button <Button
variant="outline"
:disabled=" :disabled="
(newInstanceDialog.accessType === 'friends' || newInstanceDialog.accessType === 'invite') && (newInstanceDialog.accessType === 'friends' || newInstanceDialog.accessType === 'invite') &&
newInstanceDialog.userId !== currentUser.id newInstanceDialog.userId !== currentUser.id
" "
@click="showInviteDialog(newInstanceDialog.location)" @click="showInviteDialog(newInstanceDialog.location)"
>{{ t('dialog.new_instance.invite') }}</el-button >{{ t('dialog.new_instance.invite') }}</Button
> >
<template v-if="canOpenInstanceInGame"> <template v-if="canOpenInstanceInGame">
<el-button @click="showLaunchDialog(newInstanceDialog.location, newInstanceDialog.shortName)">{{ <Button
t('dialog.new_instance.launch') variant="secondary"
}}</el-button> class="mr-2"
<el-button @click="showLaunchDialog(newInstanceDialog.location, newInstanceDialog.shortName)"
type="primary" >{{ t('dialog.new_instance.launch') }}</Button
@click="handleAttachGame(newInstanceDialog.location, newInstanceDialog.shortName)"> >
<Button @click="handleAttachGame(newInstanceDialog.location, newInstanceDialog.shortName)">
{{ t('dialog.new_instance.open_ingame') }} {{ t('dialog.new_instance.open_ingame') }}
</el-button> </Button>
</template> </template>
<template v-else> <template v-else>
<el-button <Button @click="showLaunchDialog(newInstanceDialog.location, newInstanceDialog.shortName)">{{
type="primary" t('dialog.new_instance.launch')
@click="showLaunchDialog(newInstanceDialog.location, newInstanceDialog.shortName)" }}</Button>
>{{ t('dialog.new_instance.launch') }}</el-button
>
</template> </template>
</template> </template>
<InviteDialog :invite-dialog="inviteDialog" @closeInviteDialog="closeInviteDialog" /> <InviteDialog :invite-dialog="inviteDialog" @closeInviteDialog="closeInviteDialog" />
@@ -441,6 +442,7 @@
<script setup> <script setup>
import { computed, nextTick, ref, watch } from 'vue'; import { computed, nextTick, ref, watch } from 'vue';
import { Button } from '@/components/ui/button';
import { Check as CheckIcon } from 'lucide-vue-next'; import { Check as CheckIcon } from 'lucide-vue-next';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner'; import { toast } from 'vue-sonner';
@@ -467,7 +469,6 @@
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '../ui/select'; import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
import { groupRequest, instanceRequest, worldRequest } from '../../api'; import { groupRequest, instanceRequest, worldRequest } from '../../api';
import { ToggleGroup, ToggleGroupItem } from '../ui/toggle-group'; import { ToggleGroup, ToggleGroupItem } from '../ui/toggle-group';
import { Button } from '../ui/button';
import { VirtualCombobox } from '../ui/virtual-combobox'; import { VirtualCombobox } from '../ui/virtual-combobox';
import { getNextDialogIndex } from '../../shared/utils/base/ui'; import { getNextDialogIndex } from '../../shared/utils/base/ui';
src/components/dialogs/UserDialog/UserDialog.vue
+344 -270
View File
@@ -28,26 +28,31 @@
"> ">
<div style="flex: none"> <div style="flex: none">
<template v-if="isRealInstance(userDialog.$location.tag)"> <template v-if="isRealInstance(userDialog.$location.tag)">
<Launch :location="userDialog.$location.tag" /> <div class="flex items-center mb-1">
<InviteYourself <Launch :location="userDialog.$location.tag" />
:location="userDialog.$location.tag" <InviteYourself
:shortname="userDialog.$location.shortName" :location="userDialog.$location.tag"
style="margin-left: 5px" /> :shortname="userDialog.$location.shortName"
<TooltipWrapper side="top" :content="t('dialog.user.info.refresh_instance_info')" style="margin-left: 5px" />
><el-button <TooltipWrapper
size="small" side="top"
:icon="Refresh" :content="t('dialog.user.info.refresh_instance_info')"
style="margin-left: 5px" ><Button
circle class="rounded-full w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
@click="refreshInstancePlayerCount(userDialog.$location.tag)"></el-button> size="icon"
</TooltipWrapper> variant="outline"
<LastJoin @click="refreshInstancePlayerCount(userDialog.$location.tag)"
:location="userDialog.$location.tag" ><i class="ri-refresh-line"></i
:currentlocation="lastLocation.location" /> ></Button>
<InstanceInfo </TooltipWrapper>
:location="userDialog.$location.tag" <LastJoin
:instance="userDialog.instance.ref" :location="userDialog.$location.tag"
:friendcount="userDialog.instance.friendCount" /> :currentlocation="lastLocation.location" />
<InstanceInfo
:location="userDialog.$location.tag"
:instance="userDialog.instance.ref"
:friendcount="userDialog.instance.friendCount" />
</div>
</template> </template>
<Location <Location
:location="userDialog.ref.location" :location="userDialog.ref.location"
@@ -234,23 +239,24 @@
>{{ bioCache.translated || userDialog.ref.bio || '-' }}</pre >{{ bioCache.translated || userDialog.ref.bio || '-' }}</pre
> >
<div style="float: right"> <div style="float: right">
<el-button <Button
v-if="translationApi && userDialog.ref.bio" v-if="translationApi && userDialog.ref.bio"
text class="w-3 h-6 text-xs mr-0.5"
size="small" size="icon-sm"
:loading="translateLoading" variant="ghost"
:disabled="translateLoading" @click="translateBio">
style="margin-left: 5px; padding: 0" <Spinner v-if="translateLoading" class="size-1" />
@click="translateBio" <i v-else class="ri-translate-2"> </i
><i class="ri-translate-2"></i ></Button>
></el-button> <Button
<el-button class="w-3 h-6 text-xs"
size="icon-sm"
variant="ghost"
v-if="userDialog.id === currentUser.id" v-if="userDialog.id === currentUser.id"
text
:icon="Edit"
size="small"
style="margin-left: 5px; padding: 0" style="margin-left: 5px; padding: 0"
@click="showBioDialog"></el-button> @click="showBioDialog"
><i class="ri-pencil-line"></i
></Button>
</div> </div>
<div style="margin-top: 5px" class="flex items-center"> <div style="margin-top: 5px" class="flex items-center">
<TooltipWrapper v-for="(link, index) in userDialog.ref.bioLinks" :key="index"> <TooltipWrapper v-for="(link, index) in userDialog.ref.bioLinks" :key="index">
@@ -496,13 +502,14 @@
<span class="name">{{ t('dialog.user.info.home_location') }}</span> <span class="name">{{ t('dialog.user.info.home_location') }}</span>
<span class="extra"> <span class="extra">
<span v-text="userDialog.$homeLocationName"></span> <span v-text="userDialog.$homeLocationName"></span>
<el-button <Button
size="small" class="rounded-full text-xs ml-1"
:icon="Delete" size="icon-sm"
circle variant="outline"
style="margin-left: 5px" style="margin-left: 5px"
@click.stop="resetHome()"> @click.stop="resetHome()"
</el-button> ><i class="ri-delete-bin-line"></i>
</Button>
</span> </span>
</div> </div>
</div> </div>
@@ -514,12 +521,13 @@
<TooltipWrapper side="top" :content="t('dialog.user.info.id_tooltip')"> <TooltipWrapper side="top" :content="t('dialog.user.info.id_tooltip')">
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger as-child> <DropdownMenuTrigger as-child>
<el-button <Button
type="default" class="rounded-full text-xs"
:icon="CopyDocument" size="icon-sm"
size="small" variant="outline"
circle @click.stop
@click.stop></el-button> ><i class="ri-file-copy-line"></i
></Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent> <DropdownMenuContent>
<DropdownMenuItem @click="copyUserId(userDialog.id)"> <DropdownMenuItem @click="copyUserId(userDialog.id)">
@@ -562,24 +570,22 @@
</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>
<DropdownMenu> <Select
<DropdownMenuTrigger as-child :disabled="userDialog.isMutualFriendsLoading"> :model-value="userDialogMutualFriendSortingKey"
<el-button size="small" :disabled="userDialog.isMutualFriendsLoading" @click.stop> :disabled="userDialog.isMutualFriendsLoading"
<span> @update:modelValue="setUserDialogMutualFriendSortingByKey">
{{ t(userDialog.mutualFriendSorting.name) }} <SelectTrigger size="sm" @click.stop>
<el-icon style="margin-left: 5px"><ArrowDown /></el-icon> <SelectValue />
</span> </SelectTrigger>
</el-button> <SelectContent>
</DropdownMenuTrigger> <SelectItem
<DropdownMenuContent>
<DropdownMenuItem
v-for="(item, key) in userDialogMutualFriendSortingOptions" v-for="(item, key) in userDialogMutualFriendSortingOptions"
:key="key" :key="String(key)"
@click="setUserDialogMutualFriendSorting(item)"> :value="String(key)">
{{ t(item.name) }} {{ t(item.name) }}
</DropdownMenuItem> </SelectItem>
</DropdownMenuContent> </SelectContent>
</DropdownMenu> </Select>
</div> </div>
</div> </div>
<div <div
@@ -641,96 +647,80 @@
<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>
<DropdownMenu> <Select
<DropdownMenuTrigger as-child :disabled="userDialog.isGroupsLoading"> :model-value="userDialogGroupSortingKey"
<el-button size="small" :disabled="userDialog.isGroupsLoading" @click.stop> :disabled="userDialog.isGroupsLoading"
<span> @update:modelValue="setUserDialogGroupSortingByKey">
{{ t(userDialog.groupSorting.name) }} <SelectTrigger size="sm" @click.stop>
<el-icon style="margin-left: 5px"><ArrowDown /></el-icon> <SelectValue />
</span> </SelectTrigger>
</el-button> <SelectContent>
</DropdownMenuTrigger> <SelectItem
<DropdownMenuContent>
<DropdownMenuItem
v-for="(item, key) in userDialogGroupSortingOptions" v-for="(item, key) in userDialogGroupSortingOptions"
:key="key" :key="String(key)"
:value="String(key)"
:disabled=" :disabled="
item === userDialogGroupSortingOptions.inGame && item === userDialogGroupSortingOptions.inGame &&
userDialog.id !== currentUser.id userDialog.id !== currentUser.id
" ">
@click="setUserDialogGroupSorting(item)">
{{ t(item.name) }} {{ t(item.name) }}
</DropdownMenuItem> </SelectItem>
</DropdownMenuContent> </SelectContent>
</DropdownMenu> </Select>
</template> </template>
<el-button <Button
variant="outline"
size="sm"
v-if="userDialogGroupEditMode" v-if="userDialogGroupEditMode"
size="small"
:icon="Edit"
style="margin-right: 5px; height: 29px; padding: 7px 15px"
@click="exitEditModeCurrentUserGroups"> @click="exitEditModeCurrentUserGroups">
{{ t('dialog.user.groups.exit_edit_mode') }} {{ t('dialog.user.groups.exit_edit_mode') }}
</el-button> </Button>
<el-button <Button
size="sm"
variant="outline"
v-else-if="currentUser.id === userDialog.id" v-else-if="currentUser.id === userDialog.id"
size="small" class="ml-2"
:icon="Edit"
style="margin-right: 5px; height: 29px; padding: 7px 15px"
@click="editModeCurrentUserGroups"> @click="editModeCurrentUserGroups">
{{ t('dialog.user.groups.edit_mode') }} {{ t('dialog.user.groups.edit_mode') }}
</el-button> </Button>
</div> </div>
</div> </div>
<div v-loading="userDialog.isGroupsLoading" style="margin-top: 10px"> <div v-loading="userDialog.isGroupsLoading" style="margin-top: 10px">
<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) -->
<DropdownMenu> <Select :model-value="bulkGroupActionValue" @update:modelValue="handleBulkGroupAction">
<DropdownMenuTrigger as-child> <SelectTrigger size="sm" style="margin-right: 5px; margin-bottom: 5px" @click.stop>
<el-button <SelectValue :placeholder="t('dialog.group.actions.manage_selected')" />
size="small" </SelectTrigger>
:icon="Setting" <SelectContent>
style=" <SelectItem value="visibility:visible">
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') }} {{ t('dialog.group.actions.visibility_everyone') }}
</DropdownMenuItem> </SelectItem>
<DropdownMenuItem @click="bulkSetVisibility('friends')"> <SelectItem value="visibility:friends">
{{ t('dialog.group.actions.visibility_friends') }} {{ t('dialog.group.actions.visibility_friends') }}
</DropdownMenuItem> </SelectItem>
<DropdownMenuItem @click="bulkSetVisibility('hidden')"> <SelectItem value="visibility:hidden">
{{ t('dialog.group.actions.visibility_hidden') }} {{ t('dialog.group.actions.visibility_hidden') }}
</DropdownMenuItem> </SelectItem>
<DropdownMenuSeparator /> <SelectItem value="leave">
<DropdownMenuItem variant="destructive" @click="bulkLeaveGroups">
<Delete class="size-4" />
{{ t('dialog.user.groups.leave_group_tooltip') }} {{ t('dialog.user.groups.leave_group_tooltip') }}
</DropdownMenuItem> </SelectItem>
</DropdownMenuContent> </SelectContent>
</DropdownMenu> </Select>
<!-- Select All button --> <!-- Select All button -->
<el-button <Button
size="small" size="sm"
:icon="userDialogGroupAllSelected ? Close : Check" variant="outline"
style="height: 29px; padding: 7px 15px; margin-bottom: 5px" style="padding: 7px 15px; margin-bottom: 5px"
@click="selectAllGroups"> @click="selectAllGroups">
{{ {{
userDialogGroupAllSelected userDialogGroupAllSelected
? t('dialog.group.actions.deselect_all') ? t('dialog.group.actions.deselect_all')
: t('dialog.group.actions.select_all') : t('dialog.group.actions.select_all')
}} }}
</el-button> </Button>
<div <div
v-for="group in userDialogGroupEditGroups" v-for="group in userDialogGroupEditGroups"
@@ -755,7 +745,7 @@
<div style="margin-right: 3px; margin-left: 5px" @click.stop> <div style="margin-right: 3px; margin-left: 5px" @click.stop>
<el-button <el-button
size="small" size="small"
:icon="Download" :icon="DownloadIcon"
style=" style="
display: block; display: block;
padding: 7px; padding: 7px;
@@ -767,7 +757,7 @@
</el-button> </el-button>
<el-button <el-button
size="small" size="small"
:icon="Download" :icon="DownloadIcon"
style="display: block; padding: 7px; font-size: 9px; margin-left: 0" style="display: block; padding: 7px; font-size: 9px; margin-left: 0"
@click="moveGroupBottom(group.id)"> @click="moveGroupBottom(group.id)">
</el-button> </el-button>
@@ -810,43 +800,40 @@
<span>({{ group.memberCount }})</span> <span>({{ group.memberCount }})</span>
</span> </span>
</div> </div>
<DropdownMenu v-if="group.myMember?.visibility"> <Select
<DropdownMenuTrigger as-child :disabled="group.privacy !== 'default'"> v-if="group.myMember?.visibility"
<el-button :disabled="group.privacy !== 'default'" @click.stop size="small"> :model-value="group.myMember.visibility"
<span v-if="group.myMember.visibility === 'visible'">{{ :disabled="group.privacy !== 'default'"
t('dialog.group.tags.visible') @update:modelValue="(value) => setGroupVisibility(group.id, value)">
}}</span> <SelectTrigger size="sm" @click.stop>
<span v-else-if="group.myMember.visibility === 'friends'">{{ <SelectValue
t('dialog.group.tags.friends') :placeholder="
}}</span> group.myMember.visibility === 'visible'
<span v-else-if="group.myMember.visibility === 'hidden'">{{ ? t('dialog.group.tags.visible')
t('dialog.group.tags.hidden') : group.myMember.visibility === 'friends'
}}</span> ? t('dialog.group.tags.friends')
<span v-else>{{ group.myMember.visibility }}</span> : group.myMember.visibility === 'hidden'
<el-icon style="margin-left: 5px"><ArrowDown /></el-icon> ? t('dialog.group.tags.hidden')
</el-button> : group.myMember.visibility
</DropdownMenuTrigger> " />
<DropdownMenuContent> </SelectTrigger>
<DropdownMenuItem @click="setGroupVisibility(group.id, 'visible')"> <SelectContent>
<Check v-if="group.myMember.visibility === 'visible'" class="size-4" /> <SelectItem value="visible">
{{ t('dialog.group.actions.visibility_everyone') }} {{ t('dialog.group.actions.visibility_everyone') }}
</DropdownMenuItem> </SelectItem>
<DropdownMenuItem @click="setGroupVisibility(group.id, 'friends')"> <SelectItem value="friends">
<Check v-if="group.myMember.visibility === 'friends'" class="size-4" />
{{ t('dialog.group.actions.visibility_friends') }} {{ t('dialog.group.actions.visibility_friends') }}
</DropdownMenuItem> </SelectItem>
<DropdownMenuItem @click="setGroupVisibility(group.id, 'hidden')"> <SelectItem value="hidden">
<Check v-if="group.myMember.visibility === 'hidden'" class="size-4" />
{{ t('dialog.group.actions.visibility_hidden') }} {{ t('dialog.group.actions.visibility_hidden') }}
</DropdownMenuItem> </SelectItem>
</DropdownMenuContent> </SelectContent>
</DropdownMenu> </Select>
<!--//- JSON is missing isSubscribedToAnnouncements, can't be implemented--> <!--//- JSON is missing isSubscribedToAnnouncements, can't be implemented-->
<!-- <el-button <!-- <Button size="sm" variant="outline"
@click.stop=" @click.stop="
setGroupSubscription(group.id, !group.myMember.isSubscribedToAnnouncements) setGroupSubscription(group.id, !group.myMember.isSubscribedToAnnouncements)
" ">
size="small">
<span v-if="group.myMember.isSubscribedToAnnouncements" <span v-if="group.myMember.isSubscribedToAnnouncements"
><el-icon style="margin-left: 5px"><MuteNotification /></el-icon> ><el-icon style="margin-left: 5px"><MuteNotification /></el-icon>
{{ t('dialog.group.tags.subscribed') }}</span {{ t('dialog.group.tags.subscribed') }}</span
@@ -855,24 +842,26 @@
><el-icon style="margin-left: 5px"><Bell /></el-icon> ><el-icon style="margin-left: 5px"><Bell /></el-icon>
{{ t('dialog.group.tags.unsubscribed') }}</span {{ t('dialog.group.tags.unsubscribed') }}</span
> >
</el-button> --> </Button> -->
<TooltipWrapper side="right" :content="t('dialog.user.groups.leave_group_tooltip')"> <TooltipWrapper side="right" :content="t('dialog.user.groups.leave_group_tooltip')">
<el-button <Button
class="rounded-full h-6 w-6"
size="icon-sm"
variant="outline"
v-if="shiftHeld" v-if="shiftHeld"
size="small"
:icon="Close"
circle
style="color: var(--el-color-danger); margin-left: 5px" style="color: var(--el-color-danger); margin-left: 5px"
@click.stop="leaveGroup(group.id)"> @click.stop="leaveGroup(group.id)">
</el-button> <LogOut />
<el-button </Button>
<Button
class="rounded-full h-6 w-6 text-red-600"
size="icon-sm"
variant="outline"
v-else v-else
size="small"
:icon="Delete"
circle
style="margin-left: 5px" style="margin-left: 5px"
@click.stop="leaveGroupPrompt(group.id)"> @click.stop="leaveGroupPrompt(group.id)">
</el-button> <LogOut />
</Button>
</TooltipWrapper> </TooltipWrapper>
</div> </div>
</div> </div>
@@ -1036,44 +1025,40 @@
}}</span> }}</span>
</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 class="mr-1">{{ t('dialog.user.worlds.sort_by') }}</span>
<DropdownMenu> <Select
<DropdownMenuTrigger as-child :disabled="userDialog.isWorldsLoading"> :model-value="userDialogWorldSortingKey"
<el-button size="small" :disabled="userDialog.isWorldsLoading" @click.stop> :disabled="userDialog.isWorldsLoading"
<span> @update:modelValue="setUserDialogWorldSortingByKey">
{{ t(userDialog.worldSorting.name) }} <SelectTrigger size="sm" @click.stop>
<el-icon style="margin-left: 5px"><ArrowDown /></el-icon> <SelectValue />
</span> </SelectTrigger>
</el-button> <SelectContent>
</DropdownMenuTrigger> <SelectItem
<DropdownMenuContent>
<DropdownMenuItem
v-for="(item, key) in userDialogWorldSortingOptions" v-for="(item, key) in userDialogWorldSortingOptions"
:key="key" :key="String(key)"
@click="setUserDialogWorldSorting(item)"> :value="String(key)">
{{ t(item.name) }} {{ t(item.name) }}
</DropdownMenuItem> </SelectItem>
</DropdownMenuContent> </SelectContent>
</DropdownMenu> </Select>
<span style="margin: 0 5px">{{ t('dialog.user.worlds.order_by') }}</span> <span class="ml-2 mr-1">{{ t('dialog.user.worlds.order_by') }}</span>
<DropdownMenu> <Select
<DropdownMenuTrigger as-child :disabled="userDialog.isWorldsLoading"> :model-value="userDialogWorldOrderKey"
<el-button size="small" :disabled="userDialog.isWorldsLoading" @click.stop> :disabled="userDialog.isWorldsLoading"
<span> @update:modelValue="setUserDialogWorldOrderByKey">
{{ t(userDialog.worldOrder.name) }} <SelectTrigger size="sm" @click.stop>
<el-icon style="margin-left: 5px"><ArrowDown /></el-icon> <SelectValue />
</span> </SelectTrigger>
</el-button> <SelectContent>
</DropdownMenuTrigger> <SelectItem
<DropdownMenuContent>
<DropdownMenuItem
v-for="(item, key) in userDialogWorldOrderOptions" v-for="(item, key) in userDialogWorldOrderOptions"
:key="key" :key="String(key)"
@click="setUserDialogWorldOrder(item)"> :value="String(key)">
{{ t(item.name) }} {{ t(item.name) }}
</DropdownMenuItem> </SelectItem>
</DropdownMenuContent> </SelectContent>
</DropdownMenu> </Select>
</div> </div>
</div> </div>
<div <div
@@ -1097,7 +1082,8 @@
</el-tab-pane> </el-tab-pane>
<el-tab-pane name="Favorite Worlds" :label="t('dialog.user.favorite_worlds.header')" lazy> <el-tab-pane name="Favorite Worlds" :label="t('dialog.user.favorite_worlds.header')" lazy>
<el-button <!-- <Button
variant="outline"
v-if="userFavoriteWorlds && userFavoriteWorlds.length > 0" v-if="userFavoriteWorlds && userFavoriteWorlds.length > 0"
type="default" type="default"
:loading="userDialog.isFavoriteWorldsLoading" :loading="userDialog.isFavoriteWorldsLoading"
@@ -1106,7 +1092,7 @@
circle circle
style="position: absolute; right: 15px; bottom: 15px; z-index: 99" style="position: absolute; right: 15px; bottom: 15px; z-index: 99"
@click="getUserFavoriteWorlds(userDialog.id)"> @click="getUserFavoriteWorlds(userDialog.id)">
</el-button> </Button> -->
<el-tabs <el-tabs
ref="favoriteWorldsRef" ref="favoriteWorldsRef"
v-loading="userDialog.isFavoriteWorldsLoading" v-loading="userDialog.isFavoriteWorldsLoading"
@@ -1186,51 +1172,43 @@
t('dialog.user.avatars.total_count', { count: userDialogAvatars.length }) t('dialog.user.avatars.total_count', { count: userDialogAvatars.length })
}}</span> }}</span>
</div> </div>
<div> <div class="flex items-center">
<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 class="mr-1">{{ t('dialog.user.avatars.sort_by') }}</span>
<DropdownMenu> <Select
<DropdownMenuTrigger as-child :disabled="userDialog.isWorldsLoading"> :model-value="userDialog.avatarSorting"
<el-button size="small" :disabled="userDialog.isWorldsLoading" @click.stop> :disabled="userDialog.isWorldsLoading"
<span> @update:modelValue="changeUserDialogAvatarSorting">
{{ t(`dialog.user.avatars.sort_by_${userDialog.avatarSorting}`) }} <SelectTrigger size="sm" @click.stop>
<el-icon style="margin-left: 5px"><ArrowDown /></el-icon> <SelectValue
</span> :placeholder="
</el-button> t(`dialog.user.avatars.sort_by_${userDialog.avatarSorting}`)
</DropdownMenuTrigger> " />
<DropdownMenuContent> </SelectTrigger>
<DropdownMenuItem @click="changeUserDialogAvatarSorting('name')"> <SelectContent>
{{ t('dialog.user.avatars.sort_by_name') }} <SelectItem value="name">{{
</DropdownMenuItem> t('dialog.user.avatars.sort_by_name')
<DropdownMenuItem @click="changeUserDialogAvatarSorting('update')"> }}</SelectItem>
{{ t('dialog.user.avatars.sort_by_update') }} <SelectItem value="update">{{
</DropdownMenuItem> t('dialog.user.avatars.sort_by_update')
</DropdownMenuContent> }}</SelectItem>
</DropdownMenu> </SelectContent>
<span style="margin-right: 5px; margin-left: 10px">{{ </Select>
t('dialog.user.avatars.group_by') <span class="ml-2 mr-1">{{ t('dialog.user.avatars.group_by') }}</span>
}}</span> <Select
<DropdownMenu> :model-value="userDialog.avatarReleaseStatus"
<DropdownMenuTrigger as-child :disabled="userDialog.isWorldsLoading"> :disabled="userDialog.isWorldsLoading"
<el-button size="small" :disabled="userDialog.isWorldsLoading" @click.stop> @update:modelValue="(value) => (userDialog.avatarReleaseStatus = value)">
<span> <SelectTrigger size="sm" @click.stop>
{{ t(`dialog.user.avatars.${userDialog.avatarReleaseStatus}`) }} <SelectValue
<el-icon style="margin-left: 5px"><ArrowDown /></el-icon> :placeholder="t(`dialog.user.avatars.${userDialog.avatarReleaseStatus}`)" />
</span> </SelectTrigger>
</el-button> <SelectContent>
</DropdownMenuTrigger> <SelectItem value="all">{{ t('dialog.user.avatars.all') }}</SelectItem>
<DropdownMenuContent> <SelectItem value="public">{{ t('dialog.user.avatars.public') }}</SelectItem>
<DropdownMenuItem @click="userDialog.avatarReleaseStatus = 'all'"> <SelectItem value="private">{{ t('dialog.user.avatars.private') }}</SelectItem>
{{ t('dialog.user.avatars.all') }} </SelectContent>
</DropdownMenuItem> </Select>
<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> </template>
</div> </div>
</div> </div>
@@ -1264,16 +1242,20 @@
</el-tab-pane> </el-tab-pane>
<el-tab-pane name="JSON" :label="t('dialog.user.json.header')" lazy style="height: 50vh"> <el-tab-pane name="JSON" :label="t('dialog.user.json.header')" lazy style="height: 50vh">
<el-button type="default" size="small" :icon="Refresh" circle @click="refreshUserDialogTreeData()"> <Button
</el-button> class="rounded-full h-6 w-6 mr-2"
<el-button size="icon-sm"
type="default" variant="outline"
size="small" @click="refreshUserDialogTreeData()">
:icon="Download" <RefreshCcw />
circle </Button>
style="margin-left: 5px" <Button
class="rounded-full h-6 w-6"
size="icon-sm"
variant="outline"
@click="downloadAndSaveJson(userDialog.id, userDialog.ref)"> @click="downloadAndSaveJson(userDialog.id, userDialog.ref)">
</el-button> <Download />
</Button>
<vue-json-pretty <vue-json-pretty
:data="userDialog.treeData" :data="userDialog.treeData"
:deep="2" :deep="2"
@@ -1304,25 +1286,28 @@
<script setup> <script setup>
import { import {
ArrowDown,
Bottom, Bottom,
Check,
Close,
CollectionTag, CollectionTag,
CopyDocument, Download as DownloadIcon,
Delete,
Download,
Edit,
Loading, Loading,
MoreFilled, MoreFilled,
Refresh, Refresh,
Setting,
Top, Top,
View, View,
Warning Warning
} from '@element-plus/icons-vue'; } from '@element-plus/icons-vue';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { computed, defineAsyncComponent, nextTick, ref, watch } from 'vue'; import { computed, defineAsyncComponent, nextTick, ref, watch } from 'vue';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger
} from '@/components/ui/dropdown-menu';
import { Download, LogOut, RefreshCcw } from 'lucide-vue-next';
import { Button } from '@/components/ui/button';
import { ElMessageBox } from 'element-plus'; import { ElMessageBox } from 'element-plus';
import { Spinner } from '@/components/ui/spinner';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner'; import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
@@ -1376,13 +1361,6 @@
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/';
@@ -2368,6 +2346,9 @@
} }
async function translateBio() { async function translateBio() {
if (translateLoading.value) {
return;
}
const bio = userDialog.value.ref.bio; const bio = userDialog.value.ref.bio;
if (!bio) { if (!bio) {
return; return;
@@ -2455,6 +2436,25 @@
copyToClipboard(displayName, 'User DisplayName copied to clipboard'); copyToClipboard(displayName, 'User DisplayName copied to clipboard');
} }
const userDialogGroupSortingKey = computed(() => {
const current = userDialog.value.groupSorting;
const found = Object.entries(userDialogGroupSortingOptions).find(([, option]) => {
if (option === current) {
return true;
}
return option?.value === current?.value || option?.name === current?.name;
});
return found ? String(found[0]) : '';
});
function setUserDialogGroupSortingByKey(key) {
const option = userDialogGroupSortingOptions[key];
if (!option) {
return;
}
setUserDialogGroupSorting(option);
}
async function setUserDialogGroupSorting(sortOrder) { async function setUserDialogGroupSorting(sortOrder) {
const D = userDialog.value; const D = userDialog.value;
if (D.groupSorting.value === sortOrder.value) { if (D.groupSorting.value === sortOrder.value) {
@@ -2464,6 +2464,25 @@
await sortCurrentUserGroups(); await sortCurrentUserGroups();
} }
const userDialogMutualFriendSortingKey = computed(() => {
const current = userDialog.value.mutualFriendSorting;
const found = Object.entries(userDialogMutualFriendSortingOptions).find(([, option]) => {
if (option === current) {
return true;
}
return option?.value === current?.value || option?.name === current?.name;
});
return found ? String(found[0]) : '';
});
function setUserDialogMutualFriendSortingByKey(key) {
const option = userDialogMutualFriendSortingOptions[key];
if (!option) {
return;
}
setUserDialogMutualFriendSorting(option);
}
async function setUserDialogMutualFriendSorting(sortOrder) { async function setUserDialogMutualFriendSorting(sortOrder) {
const D = userDialog.value; const D = userDialog.value;
D.mutualFriendSorting = sortOrder; D.mutualFriendSorting = sortOrder;
@@ -2524,6 +2543,23 @@
}); });
} }
const bulkGroupActionValue = ref('');
function handleBulkGroupAction(value) {
bulkGroupActionValue.value = value;
if (value === 'leave') {
bulkLeaveGroups();
} else if (typeof value === 'string' && value.startsWith('visibility:')) {
const newVisibility = value.slice('visibility:'.length);
bulkSetVisibility(newVisibility);
}
nextTick(() => {
bulkGroupActionValue.value = '';
});
}
// Apply the given visibility to all selected groups // Apply the given visibility to all selected groups
async function bulkSetVisibility(newVisibility) { async function bulkSetVisibility(newVisibility) {
for (const groupId of userDialogGroupEditSelectedGroupIds.value) { for (const groupId of userDialogGroupEditSelectedGroupIds.value) {
@@ -2593,6 +2629,25 @@
refreshUserDialogWorlds(); refreshUserDialogWorlds();
} }
const userDialogWorldSortingKey = computed(() => {
const current = userDialog.value.worldSorting;
const found = Object.entries(userDialogWorldSortingOptions).find(([, option]) => {
if (option === current) {
return true;
}
return option?.value === current?.value || option?.name === current?.name;
});
return found ? String(found[0]) : '';
});
function setUserDialogWorldSortingByKey(key) {
const option = userDialogWorldSortingOptions[key];
if (!option) {
return;
}
setUserDialogWorldSorting(option);
}
async function setUserDialogWorldOrder(order) { async function setUserDialogWorldOrder(order) {
const D = userDialog.value; const D = userDialog.value;
if (D.worldOrder.value === order.value) { if (D.worldOrder.value === order.value) {
@@ -2602,6 +2657,25 @@
refreshUserDialogWorlds(); refreshUserDialogWorlds();
} }
const userDialogWorldOrderKey = computed(() => {
const current = userDialog.value.worldOrder;
const found = Object.entries(userDialogWorldOrderOptions).find(([, option]) => {
if (option === current) {
return true;
}
return option?.value === current?.value || option?.name === current?.name;
});
return found ? String(found[0]) : '';
});
function setUserDialogWorldOrderByKey(key) {
const option = userDialogWorldOrderOptions[key];
if (!option) {
return;
}
setUserDialogWorldOrder(option);
}
function changeUserDialogAvatarSorting(sortOption) { function changeUserDialogAvatarSorting(sortOption) {
const D = userDialog.value; const D = userDialog.value;
D.avatarSorting = sortOption; D.avatarSorting = sortOption;
src/components/dialogs/WorldDialog/WorldDialog.vue
+63 -54
View File
@@ -165,30 +165,37 @@
v-if="worldDialog.inCache" v-if="worldDialog.inCache"
side="top" side="top"
:content="t('dialog.world.actions.delete_cache_tooltip')"> :content="t('dialog.world.actions.delete_cache_tooltip')">
<el-button <Button
:icon="Delete" class="rounded-full mr-2"
size="large" size="icon-lg"
circle variant="outline"
:disabled="isGameRunning && worldDialog.cacheLocked" :disabled="isGameRunning && worldDialog.cacheLocked"
@click="deleteVRChatCache(worldDialog.ref)" /> @click="deleteVRChatCache(worldDialog.ref)"
><Trash2
/></Button>
</TooltipWrapper> </TooltipWrapper>
<TooltipWrapper side="top" :content="t('dialog.world.actions.favorites_tooltip')"> <TooltipWrapper
<el-button v-if="worldDialog.isFavorite"
:type="worldDialog.isFavorite ? 'warning' : 'default'" side="top"
:icon="worldDialog.isFavorite ? StarFilled : Star" :content="t('dialog.world.actions.favorites_tooltip')">
size="large" <Button class="rounded-full" size="icon-lg" @click="worldDialogCommand('Add Favorite')"
circle ><Star
style="margin-left: 5px" /></Button>
@click="worldDialogCommand('Add Favorite')" /> </TooltipWrapper>
<TooltipWrapper v-else side="top" :content="t('dialog.world.actions.favorites_tooltip')">
<Button
class="rounded-full"
size="icon-lg"
variant="outline"
@click="worldDialogCommand('Add Favorite')"
><Star
/></Button>
</TooltipWrapper> </TooltipWrapper>
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger as-child> <DropdownMenuTrigger as-child>
<el-button <Button variant="outline" size="icon-lg" class="rounded-full ml-2">
type="default" <Ellipsis />
:icon="MoreFilled" </Button>
size="large"
style="margin-left: 5px"
circle />
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent> <DropdownMenuContent>
<DropdownMenuItem @click="worldDialogCommand('Refresh')"> <DropdownMenuItem @click="worldDialogCommand('Refresh')">
@@ -343,24 +350,26 @@
<TooltipWrapper <TooltipWrapper
side="top" side="top"
:content="t('dialog.world.instances.refresh_instance_info')"> :content="t('dialog.world.instances.refresh_instance_info')">
<el-button <Button
size="small" class="rounded-full w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
:icon="Refresh" size="icon"
style="margin-left: 5px" variant="outline"
circle @click="refreshInstancePlayerCount(room.tag)"
@click="refreshInstancePlayerCount(room.tag)" /> ><i class="ri-refresh-line"></i
></Button>
</TooltipWrapper> </TooltipWrapper>
<TooltipWrapper <TooltipWrapper
v-if="instanceJoinHistory.get(room.$location.tag)" v-if="instanceJoinHistory.get(room.$location.tag)"
side="top" side="top"
:content="t('dialog.previous_instances.info')"> :content="t('dialog.previous_instances.info')">
<el-button <Button
size="small" class="rounded-full w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
:icon="DataLine" size="icon-sm"
variant="outline"
style="margin-left: 5px" style="margin-left: 5px"
plain @click="showPreviousInstancesInfoDialog(room.location)"
circle ><i class="ri-history-line"></i
@click="showPreviousInstancesInfoDialog(room.location)" /> ></Button>
</TooltipWrapper> </TooltipWrapper>
<LastJoin :location="room.$location.tag" :currentlocation="lastLocation.location" /> <LastJoin :location="room.$location.tag" :currentlocation="lastLocation.location" />
<InstanceInfo <InstanceInfo
@@ -452,12 +461,13 @@
<TooltipWrapper side="top" :content="t('dialog.world.info.id_tooltip')"> <TooltipWrapper side="top" :content="t('dialog.world.info.id_tooltip')">
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger as-child> <DropdownMenuTrigger as-child>
<el-button <Button
type="default" class="rounded-full text-xs"
:icon="CopyDocument" size="icon-sm"
size="small" variant="outline"
circle @click.stop
@click.stop /> ><i class="ri-file-copy-line"></i
></Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent> <DropdownMenuContent>
<DropdownMenuItem @click="copyWorldId()"> <DropdownMenuItem @click="copyWorldId()">
@@ -690,19 +700,20 @@
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane name="JSON" :label="t('dialog.world.json.header')" style="max-height: 50vh" lazy> <el-tab-pane name="JSON" :label="t('dialog.world.json.header')" style="max-height: 50vh" lazy>
<el-button <Button
type="default" class="rounded-full h-6 w-6 mr-2"
size="small" size="icon-sm"
:icon="Refresh" variant="outline"
circle @click="refreshWorldDialogTreeData()">
@click="refreshWorldDialogTreeData"></el-button> <RefreshCcw />
<el-button </Button>
type="default" <Button
size="small" class="rounded-full h-6 w-6"
:icon="Download" size="icon-sm"
circle variant="outline"
style="margin-left: 5px" @click="downloadAndSaveJson(worldDialog.id, worldDialog.ref)">
@click="downloadAndSaveJson(worldDialog.id, worldDialog.ref)"></el-button> <Download />
</Button>
<vue-json-pretty :data="treeData" :deep="2" :theme="isDarkMode ? 'dark' : 'light'" show-icon /> <vue-json-pretty :data="treeData" :deep="2" :theme="isDarkMode ? 'dark' : 'light'" show-icon />
<br /> <br />
<vue-json-pretty <vue-json-pretty
@@ -737,7 +748,6 @@
import { import {
ArrowDown, ArrowDown,
Check, Check,
CopyDocument,
DataLine, DataLine,
Delete, Delete,
Download, Download,
@@ -747,12 +757,9 @@
Loading, Loading,
MagicStick, MagicStick,
Message, Message,
MoreFilled,
Picture, Picture,
Refresh, Refresh,
Share, Share,
Star,
StarFilled,
Upload, Upload,
User, User,
UserFilled, UserFilled,
@@ -760,6 +767,8 @@
Warning Warning
} from '@element-plus/icons-vue'; } from '@element-plus/icons-vue';
import { computed, defineAsyncComponent, nextTick, ref, watch } from 'vue'; import { computed, defineAsyncComponent, nextTick, ref, watch } from 'vue';
import { Ellipsis, RefreshCcw, Star, Trash2 } from 'lucide-vue-next';
import { Button } from '@/components/ui/button';
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';
src/plugin/components.js
+2 -1
View File
@@ -1,3 +1,5 @@
import { TooltipWrapper } from '../components/ui/tooltip';
import AvatarInfo from '../components/AvatarInfo.vue'; import AvatarInfo from '../components/AvatarInfo.vue';
import CountdownTimer from '../components/CountdownTimer.vue'; import CountdownTimer from '../components/CountdownTimer.vue';
import DataTable from '../components/DataTable.vue'; import DataTable from '../components/DataTable.vue';
@@ -9,7 +11,6 @@ import Launch from '../components/Launch.vue';
import Location from '../components/Location.vue'; import Location from '../components/Location.vue';
import LocationWorld from '../components/LocationWorld.vue'; import LocationWorld from '../components/LocationWorld.vue';
import Timer from '../components/Timer.vue'; import Timer from '../components/Timer.vue';
import { TooltipWrapper } from '../components/ui/tooltip';
export function initComponents(app) { export function initComponents(app) {
app.component('Location', Location); app.component('Location', Location);
src/views/Charts/components/MutualFriends.vue
+16 -8
View File
@@ -3,7 +3,14 @@
<div class="options-container mutual-graph__toolbar"> <div class="options-container mutual-graph__toolbar">
<div class="mutual-graph__actions"> <div class="mutual-graph__actions">
<TooltipWrapper :content="t('view.charts.mutual_friend.force_dialog.open_label')" side="top"> <TooltipWrapper :content="t('view.charts.mutual_friend.force_dialog.open_label')" side="top">
<el-button circle :icon="Setting" :disabled="!graphReady" @click="openForceDialog"></el-button> <Button
class="rounded-full"
size="icon"
variant="outline"
:disabled="!graphReady"
@click="openForceDialog">
<Settings />
</Button>
</TooltipWrapper> </TooltipWrapper>
<TooltipWrapper :content="fetchButtonLabel" side="top"> <TooltipWrapper :content="fetchButtonLabel" side="top">
<el-button type="primary" :disabled="fetchButtonDisabled" :loading="isFetching" @click="startFetch"> <el-button type="primary" :disabled="fetchButtonDisabled" :loading="isFetching" @click="startFetch">
@@ -14,9 +21,9 @@
v-if="isFetching" v-if="isFetching"
:content="t('view.charts.mutual_friend.actions.stop_fetching')" :content="t('view.charts.mutual_friend.actions.stop_fetching')"
side="top"> side="top">
<el-button type="danger" plain :disabled="status.cancelRequested" @click="cancelFetch"> <Button variant="destructive" :disabled="status.cancelRequested" @click="cancelFetch">
{{ t('view.charts.mutual_friend.actions.stop') }} {{ t('view.charts.mutual_friend.actions.stop') }}
</el-button> </Button>
</TooltipWrapper> </TooltipWrapper>
</div> </div>
</div> </div>
@@ -90,12 +97,12 @@
<template #footer> <template #footer>
<div class="mutual-graph__dialog-footer"> <div class="mutual-graph__dialog-footer">
<el-button @click="resetForceSettings">{{ <Button variant="secondary" class="mr-2" @click="resetForceSettings">{{
t('view.charts.mutual_friend.force_dialog.reset') t('view.charts.mutual_friend.force_dialog.reset')
}}</el-button> }}</Button>
<el-button type="primary" :disabled="!graphReady" @click="applyForceSettings"> <Button :disabled="!graphReady" @click="applyForceSettings">
{{ t('view.charts.mutual_friend.force_dialog.apply') }} {{ t('view.charts.mutual_friend.force_dialog.apply') }}
</el-button> </Button>
</div> </div>
</template> </template>
</el-dialog> </el-dialog>
@@ -104,8 +111,9 @@
<script setup> <script setup>
import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'; import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
import { Button } from '@/components/ui/button';
import { ElMessageBox } from 'element-plus'; import { ElMessageBox } from 'element-plus';
import { Setting } from '@element-plus/icons-vue'; import { Settings } from 'lucide-vue-next';
import { onBeforeRouteLeave } from 'vue-router'; import { onBeforeRouteLeave } from 'vue-router';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner'; import { toast } from 'vue-sonner';
src/views/Notifications/dialogs/EditAndSendInviteResponseDialog.vue
+6 -8
View File
@@ -20,20 +20,18 @@
style="margin-top: 10px"> style="margin-top: 10px">
</el-input> </el-input>
<template #footer> <template #footer>
<el-button @click="cancelEditAndSendInviteResponse">{{ <Button variant="secondary" class="mr-2" @click="cancelEditAndSendInviteResponse">{{
t('dialog.edit_send_invite_response_message.cancel') t('dialog.edit_send_invite_response_message.cancel')
}}</el-button> }}</Button>
<el-button <Button @click="saveEditAndSendInviteResponse" :disabled="!editAndSendInviteResponseDialog.newMessage">{{
type="primary" t('dialog.edit_send_invite_response_message.send')
@click="saveEditAndSendInviteResponse" }}</Button>
:disabled="!editAndSendInviteResponseDialog.newMessage"
>{{ t('dialog.edit_send_invite_response_message.send') }}</el-button
>
</template> </template>
</el-dialog> </el-dialog>
</template> </template>
<script setup> <script setup>
import { Button } from '@/components/ui/button';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner'; import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
src/views/Settings/components/Tabs/AdvancedTab.vue
+35 -53
View File
@@ -106,18 +106,18 @@
:long-label="true" :long-label="true"
@change="setAvatarRemoteDatabase(!avatarRemoteDatabase)" /> @change="setAvatarRemoteDatabase(!avatarRemoteDatabase)" />
<div class="options-container-item"> <div class="options-container-item">
<el-button size="small" :icon="User" @click="showAvatarProviderDialog">{{ <Button size="sm" variant="outline" @click="showAvatarProviderDialog">{{
t('view.settings.advanced.advanced.remote_database.avatar_database_provider') t('view.settings.advanced.advanced.remote_database.avatar_database_provider')
}}</el-button> }}</Button>
</div> </div>
</div> </div>
<template v-if="!isLinux"> <template v-if="!isLinux">
<div class="options-container"> <div class="options-container">
<span class="header">{{ t('view.settings.advanced.advanced.app_launcher.header') }}</span> <span class="header">{{ t('view.settings.advanced.advanced.app_launcher.header') }}</span>
<br /> <br />
<el-button size="small" :icon="Folder" style="margin-top: 5px" @click="openShortcutFolder()">{{ <Button size="sm" variant="outline" style="margin-top: 5px" @click="openShortcutFolder()">{{
t('view.settings.advanced.advanced.app_launcher.folder') t('view.settings.advanced.advanced.app_launcher.folder')
}}</el-button> }}</Button>
<simple-switch <simple-switch
:label="t('view.settings.advanced.advanced.remote_database.enable')" :label="t('view.settings.advanced.advanced.remote_database.enable')"
:value="enableAppLauncher" :value="enableAppLauncher"
@@ -145,9 +145,9 @@
:long-label="true" :long-label="true"
@change="changeYouTubeApi('VRCX_youtubeAPI')" /> @change="changeYouTubeApi('VRCX_youtubeAPI')" />
<div class="options-container-item"> <div class="options-container-item">
<el-button size="small" :icon="CaretRight" @click="showYouTubeApiDialog">{{ <Button size="sm" variant="outline" @click="showYouTubeApiDialog">{{
t('view.settings.advanced.advanced.youtube_api.youtube_api_key') t('view.settings.advanced.advanced.youtube_api.youtube_api_key')
}}</el-button> }}</Button>
</div> </div>
</div> </div>
<div class="options-container"> <div class="options-container">
@@ -159,9 +159,9 @@
:long-label="true" :long-label="true"
@change="changeTranslationAPI('VRCX_translationAPI')" /> @change="changeTranslationAPI('VRCX_translationAPI')" />
<div class="options-container-item"> <div class="options-container-item">
<el-button size="small" @click="showTranslationApiDialog" <Button size="sm" variant="outline" @click="showTranslationApiDialog"
><i class="ri-translate-2" style="margin-right: 5px"></i ><i class="ri-translate-2" style="margin-right: 5px"></i
>{{ t('view.settings.advanced.advanced.translation_api.translation_api_key') }}</el-button >{{ t('view.settings.advanced.advanced.translation_api.translation_api_key') }}</Button
> >
</div> </div>
</div> </div>
@@ -192,17 +192,18 @@
:long-label="true" :long-label="true"
@change="setShowConfirmationOnSwitchAvatar" /> @change="setShowConfirmationOnSwitchAvatar" />
<div class="options-container-item"> <div class="options-container-item">
<el-button <Button
size="small" size="sm"
:icon="Paperclip" variant="outline"
class="mr-2"
@click="openExternalLink('https://github.com/vrcx-team/VRCX/wiki/Launch-parameters-&-VRCX.json')" @click="openExternalLink('https://github.com/vrcx-team/VRCX/wiki/Launch-parameters-&-VRCX.json')"
>{{ t('view.settings.advanced.advanced.launch_commands.docs') }}</el-button >{{ t('view.settings.advanced.advanced.launch_commands.docs') }}</Button
> >
<el-button <Button
size="small" size="sm"
:icon="Paperclip" variant="outline"
@click="openExternalLink('https://github.com/Myrkie/open-in-vrcx')" @click="openExternalLink('https://github.com/Myrkie/open-in-vrcx')"
>{{ t('view.settings.advanced.advanced.launch_commands.website_userscript') }}</el-button >{{ t('view.settings.advanced.advanced.launch_commands.website_userscript') }}</Button
> >
</div> </div>
</div> </div>
@@ -210,15 +211,15 @@
<span class="header">{{ t('view.settings.advanced.advanced.cache_debug.header') }}</span> <span class="header">{{ t('view.settings.advanced.advanced.cache_debug.header') }}</span>
<br /> <br />
<div class="options-container-item"> <div class="options-container-item">
<el-button size="small" :icon="DeleteFilled" @click="clearVRCXCache">{{ <Button size="sm" variant="outline" class="mr-2" @click="clearVRCXCache">{{
t('view.settings.advanced.advanced.cache_debug.clear_cache') t('view.settings.advanced.advanced.cache_debug.clear_cache')
}}</el-button> }}</Button>
<el-button size="small" :icon="Timer" @click="promptAutoClearVRCXCacheFrequency">{{ <Button size="sm" variant="outline" class="mr-2" @click="promptAutoClearVRCXCacheFrequency">{{
t('view.settings.advanced.advanced.cache_debug.auto_clear_cache') t('view.settings.advanced.advanced.cache_debug.auto_clear_cache')
}}</el-button> }}</Button>
<el-button size="small" :icon="Refresh" @click="refreshCacheSize">{{ <Button size="sm" variant="outline" @click="refreshCacheSize">{{
t('view.settings.advanced.advanced.cache_debug.refresh_cache') t('view.settings.advanced.advanced.cache_debug.refresh_cache')
}}</el-button> }}</Button>
</div> </div>
<simple-switch <simple-switch
@@ -263,17 +264,17 @@
</span> </span>
</div> </div>
<div class="options-container-item"> <div class="options-container-item">
<el-button size="small" :icon="Tickets" @click="showConsole">{{ <Button size="sm" variant="outline" @click="showConsole">{{
t('view.settings.advanced.advanced.cache_debug.show_console') t('view.settings.advanced.advanced.cache_debug.show_console')
}}</el-button> }}</Button>
</div> </div>
</div> </div>
<div class="options-container"> <div class="options-container">
<span class="sub-header">{{ t('view.settings.advanced.advanced.sqlite_table_size.header') }}</span> <span class="sub-header">{{ t('view.settings.advanced.advanced.sqlite_table_size.header') }}</span>
<div class="options-container-item"> <div class="options-container-item">
<el-button size="small" :icon="Refresh" @click="getSqliteTableSizes">{{ <Button size="sm" variant="outline" @click="getSqliteTableSizes">{{
t('view.settings.advanced.advanced.sqlite_table_size.refresh') t('view.settings.advanced.advanced.sqlite_table_size.refresh')
}}</el-button> }}</Button>
</div> </div>
<div class="options-container-item"> <div class="options-container-item">
<span class="name"> <span class="name">
@@ -353,22 +354,14 @@
<div class="header-bar"> <div class="header-bar">
<span class="header">{{ t('view.profile.config_json') }}</span> <span class="header">{{ t('view.profile.config_json') }}</span>
<TooltipWrapper side="top" :content="t('view.profile.refresh_tooltip')"> <TooltipWrapper side="top" :content="t('view.profile.refresh_tooltip')">
<el-button <Button class="rounded-full mr-2" size="icon-sm" variant="outline" @click="refreshConfigTreeData()">
type="default" <RefreshCcw />
size="small" </Button>
:icon="Refresh"
circle
style="margin-left: 5px"
@click="refreshConfigTreeData()"></el-button>
</TooltipWrapper> </TooltipWrapper>
<TooltipWrapper side="top" :content="t('view.profile.clear_results_tooltip')"> <TooltipWrapper side="top" :content="t('view.profile.clear_results_tooltip')">
<el-button <Button class="rounded-full" size="icon-sm" variant="outline" @click="configTreeData = {}">
type="default" <Trash2
size="small" /></Button>
:icon="Delete"
circle
style="margin-left: 5px"
@click="configTreeData = {}"></el-button>
</TooltipWrapper> </TooltipWrapper>
</div> </div>
<vue-json-pretty <vue-json-pretty
@@ -391,20 +384,9 @@
</template> </template>
<script setup> <script setup>
import { import { Folder, Goods, Operation } from '@element-plus/icons-vue';
CaretRight,
Delete,
DeleteFilled,
Folder,
Goods,
Operation,
Paperclip,
Refresh,
Tickets,
Timer,
User
} from '@element-plus/icons-vue';
import { computed, reactive, ref } from 'vue'; import { computed, reactive, ref } from 'vue';
import { RefreshCcw, Trash2 } from 'lucide-vue-next';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { ButtonGroup } from '@/components/ui/button-group'; import { ButtonGroup } from '@/components/ui/button-group';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
src/views/Settings/components/Tabs/AppearanceTab.vue
+3 -3
View File
@@ -165,9 +165,9 @@
:value="compactTableMode" :value="compactTableMode"
@change="setCompactTableMode" /> @change="setCompactTableMode" />
<div class="options-container-item"> <div class="options-container-item">
<el-button size="small" :icon="Notebook" style="margin-right: 10px" @click="promptMaxTableSizeDialog">{{ <Button size="sm" variant="outline" @click="promptMaxTableSizeDialog">{{
t('view.settings.appearance.appearance.table_max_size') t('view.settings.appearance.appearance.table_max_size')
}}</el-button> }}</Button>
</div> </div>
</div> </div>
<div class="options-container"> <div class="options-container">
@@ -425,9 +425,9 @@
} from '@/components/ui/tags-input'; } from '@/components/ui/tags-input';
import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from '@/components/ui/popover'; import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { computed, onBeforeUnmount, ref, watch } from 'vue'; import { computed, onBeforeUnmount, ref, watch } from 'vue';
import { ArrowRight, Notebook } from '@element-plus/icons-vue';
import { CheckIcon, ChevronDown } from 'lucide-vue-next'; import { CheckIcon, ChevronDown } from 'lucide-vue-next';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'; import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { ArrowRight } from '@element-plus/icons-vue';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner'; import { toast } from 'vue-sonner';
src/views/Settings/components/Tabs/GeneralTab.vue
+10 -9
View File
@@ -35,12 +35,12 @@
<div class="options-container"> <div class="options-container">
<span class="header">{{ t('view.settings.general.vrcx_updater.header') }}</span> <span class="header">{{ t('view.settings.general.vrcx_updater.header') }}</span>
<div class="options-container-item"> <div class="options-container-item">
<el-button size="small" :icon="Document" @click="showChangeLogDialog">{{ <Button size="sm" variant="outline" class="mr-2" @click="showChangeLogDialog">{{
t('view.settings.general.vrcx_updater.change_log') t('view.settings.general.vrcx_updater.change_log')
}}</el-button> }}</Button>
<el-button v-if="!noUpdater" size="small" :icon="Upload" @click="showVRCXUpdateDialog()">{{ <Button size="sm" variant="outline" v-if="!noUpdater" @click="showVRCXUpdateDialog()">{{
t('view.settings.general.vrcx_updater.change_build') t('view.settings.general.vrcx_updater.change_build')
}}</el-button> }}</Button>
</div> </div>
<div v-if="!noUpdater" class="options-container-item"> <div v-if="!noUpdater" class="options-container-item">
<span class="name">{{ t('view.settings.general.vrcx_updater.update_action') }}</span> <span class="name">{{ t('view.settings.general.vrcx_updater.update_action') }}</span>
@@ -104,9 +104,9 @@
:tooltip="t('view.settings.general.application.disable_gpu_acceleration_tooltip')" :tooltip="t('view.settings.general.application.disable_gpu_acceleration_tooltip')"
@change="setDisableVrOverlayGpuAcceleration" /> @change="setDisableVrOverlayGpuAcceleration" />
<div class="options-container-item"> <div class="options-container-item">
<el-button size="small" :icon="Connection" @click="promptProxySettings">{{ <Button size="sm" variant="outline" @click="promptProxySettings">{{
t('view.settings.general.application.proxy') t('view.settings.general.application.proxy')
}}</el-button> }}</Button>
</div> </div>
</div> </div>
<div class="options-container"> <div class="options-container">
@@ -291,9 +291,9 @@
<p>{{ t('view.settings.general.legal_notice.disclaimer2') }}</p> <p>{{ t('view.settings.general.legal_notice.disclaimer2') }}</p>
</div> </div>
<div class="options-container-item"> <div class="options-container-item">
<el-button size="small" @click="openOSSDialog">{{ <Button size="sm" variant="outline" @click="openOSSDialog">{{
t('view.settings.general.legal_notice.open_source_software_notice') t('view.settings.general.legal_notice.open_source_software_notice')
}}</el-button> }}</Button>
</div> </div>
</div> </div>
<OpenSourceSoftwareNoticeDialog v-if="ossDialog" v-model:ossDialog="ossDialog" /> <OpenSourceSoftwareNoticeDialog v-if="ossDialog" v-model:ossDialog="ossDialog" />
@@ -301,8 +301,9 @@
</template> </template>
<script setup> <script setup>
import { Connection, Document, InfoFilled, Upload } from '@element-plus/icons-vue';
import { computed, defineAsyncComponent, ref } from 'vue'; import { computed, defineAsyncComponent, ref } from 'vue';
import { Button } from '@/components/ui/button';
import { InfoFilled } from '@element-plus/icons-vue';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
src/views/Settings/components/Tabs/NotificationsTab.vue
+13 -13
View File
@@ -3,9 +3,9 @@
<div class="options-container" style="margin-top: 0"> <div class="options-container" style="margin-top: 0">
<span class="header">{{ t('view.settings.notifications.notifications.header') }}</span> <span class="header">{{ t('view.settings.notifications.notifications.header') }}</span>
<div class="options-container-item"> <div class="options-container-item">
<el-button size="small" :icon="ChatSquare" @click="showNotyFeedFiltersDialog">{{ <Button size="sm" variant="outline" @click="showNotyFeedFiltersDialog">{{
t('view.settings.notifications.notifications.notification_filter') t('view.settings.notifications.notifications.notification_filter')
}}</el-button> }}</Button>
</div> </div>
</div> </div>
<div class="options-container"> <div class="options-container">
@@ -65,14 +65,14 @@
saveOpenVROption(); saveOpenVROption();
" /> " />
<div class="options-container-item"> <div class="options-container-item">
<el-button <Button
size="small" size="sm"
:icon="Rank" variant="outline"
:disabled="!overlayNotifications || !openVR" :disabled="!overlayNotifications || !openVR"
@click="showNotificationPositionDialog" @click="showNotificationPositionDialog"
>{{ >{{
t('view.settings.notifications.notifications.steamvr_notifications.notification_position') t('view.settings.notifications.notifications.steamvr_notifications.notification_position')
}}</el-button }}</Button
> >
</div> </div>
</template> </template>
@@ -85,14 +85,14 @@
</div> </div>
</div> </div>
<div class="options-container-item"> <div class="options-container-item">
<el-button <Button
size="small" size="sm"
:icon="Timer" variant="outline"
:disabled="(!overlayNotifications || !openVR) && !xsNotifications" :disabled="(!overlayNotifications || !openVR) && !xsNotifications"
@click="promptNotificationTimeout" @click="promptNotificationTimeout"
>{{ >{{
t('view.settings.notifications.notifications.steamvr_notifications.notification_timeout') t('view.settings.notifications.notifications.steamvr_notifications.notification_timeout')
}}</el-button }}</Button
> >
</div> </div>
<simple-switch <simple-switch
@@ -262,9 +262,9 @@
:placeholder="t('view.settings.notifications.notifications.text_to_speech.tts_test_placeholder')" :placeholder="t('view.settings.notifications.notifications.text_to_speech.tts_test_placeholder')"
:rows="1" :rows="1"
style="width: 175px; display: inline-block"></el-input> style="width: 175px; display: inline-block"></el-input>
<el-button size="small" :icon="VideoPlay" style="margin-left: 10px" @click="testNotificationTTS">{{ <Button size="sm" variant="outline" style="margin-left: 10px" @click="testNotificationTTS">{{
t('view.settings.notifications.notifications.text_to_speech.play') t('view.settings.notifications.notifications.text_to_speech.play')
}}</el-button> }}</Button>
</div> </div>
</div> </div>
<NotificationPositionDialog v-model:isNotificationPositionDialogVisible="isNotificationPositionDialogVisible" /> <NotificationPositionDialog v-model:isNotificationPositionDialogVisible="isNotificationPositionDialogVisible" />
@@ -274,8 +274,8 @@
<script setup> <script setup>
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { ChatSquare, Rank, Timer, VideoPlay } from '@element-plus/icons-vue';
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
import { Button } from '@/components/ui/button';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
src/views/Settings/components/Tabs/PicturesTab.vue
+10 -9
View File
@@ -23,9 +23,9 @@
:value="screenshotHelperCopyToClipboard" :value="screenshotHelperCopyToClipboard"
@change="setScreenshotHelperCopyToClipboard()" @change="setScreenshotHelperCopyToClipboard()"
:long-label="true" /> :long-label="true" />
<el-button size="small" :icon="Delete" @click="askDeleteAllScreenshotMetadata()">{{ <Button size="sm" variant="outline" @click="askDeleteAllScreenshotMetadata()">{{
t('view.settings.advanced.advanced.delete_all_screenshot_metadata.button') t('view.settings.advanced.advanced.delete_all_screenshot_metadata.button')
}}</el-button> }}</Button>
</div> </div>
<div class="options-container"> <div class="options-container">
@@ -46,15 +46,15 @@
t('view.settings.advanced.advanced.user_generated_content.description') t('view.settings.advanced.advanced.user_generated_content.description')
}}</span> }}</span>
</div> </div>
<el-button size="small" :icon="Folder" @click="openUGCFolder()">{{ <Button size="sm" variant="outline" @click="openUGCFolder()">{{
t('view.settings.advanced.advanced.user_generated_content.folder') t('view.settings.advanced.advanced.user_generated_content.folder')
}}</el-button> }}</Button>
<el-button size="small" :icon="FolderOpened" @click="openUGCFolderSelector()">{{ <Button size="sm" variant="outline" @click="openUGCFolderSelector()">{{
t('view.settings.advanced.advanced.user_generated_content.set_folder') t('view.settings.advanced.advanced.user_generated_content.set_folder')
}}</el-button> }}</Button>
<el-button size="small" :icon="Delete" @click="resetUGCFolder()" v-if="ugcFolderPath">{{ <Button size="sm" variant="outline" @click="resetUGCFolder()" v-if="ugcFolderPath">{{
t('view.settings.advanced.advanced.user_generated_content.reset_override') t('view.settings.advanced.advanced.user_generated_content.reset_override')
}}</el-button> }}</Button>
<br /> <br />
<br /> <br />
<br /> <br />
@@ -101,7 +101,8 @@
</template> </template>
<script setup> <script setup>
import { Delete, Folder, FolderOpened, InfoFilled } from '@element-plus/icons-vue'; import { Button } from '@/components/ui/button';
import { InfoFilled } from '@element-plus/icons-vue';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
src/views/Settings/components/WristOverlaySettings.vue
+5 -5
View File
@@ -2,12 +2,12 @@
<div class="options-container" style="margin-top: 0"> <div class="options-container" style="margin-top: 0">
<span class="header">{{ t('view.settings.wrist_overlay.steamvr_wrist_overlay.header') }}</span> <span class="header">{{ t('view.settings.wrist_overlay.steamvr_wrist_overlay.header') }}</span>
<div class="options-container-item"> <div class="options-container-item">
<el-button <Button
size="small" size="sm"
:icon="Files" variant="outline"
:disabled="!openVR || !overlayWrist" :disabled="!openVR || !overlayWrist"
@click="emit('open-feed-filters')" @click="emit('open-feed-filters')"
>{{ t('view.settings.wrist_overlay.steamvr_wrist_overlay.wrist_feed_filters') }}</el-button >{{ t('view.settings.wrist_overlay.steamvr_wrist_overlay.wrist_feed_filters') }}</Button
> >
</div> </div>
<div class="options-container-item"> <div class="options-container-item">
@@ -156,7 +156,7 @@
</template> </template>
<script setup> <script setup>
import { Files } from '@element-plus/icons-vue'; import { Button } from '@/components/ui/button';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
src/views/Settings/dialogs/FeedFiltersDialog.vue
+6 -3
View File
@@ -65,16 +65,19 @@
</div> </div>
<template #footer> <template #footer>
<el-button @click="currentResetFunction">{{ t('dialog.shared_feed_filters.reset') }}</el-button> <Button variant="secondary" @click="currentResetFunction">{{
<el-button type="primary" style="margin-left: 10px" @click="handleDialogClose">{{ t('dialog.shared_feed_filters.reset')
}}</Button>
<Button style="margin-left: 10px" @click="handleDialogClose">{{
t('dialog.shared_feed_filters.close') t('dialog.shared_feed_filters.close')
}}</el-button> }}</Button>
</template> </template>
</el-dialog> </el-dialog>
</template> </template>
<script setup> <script setup>
import { InfoFilled, Warning } from '@element-plus/icons-vue'; import { InfoFilled, Warning } from '@element-plus/icons-vue';
import { Button } from '@/components/ui/button';
import { computed } from 'vue'; import { computed } from 'vue';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
src/views/Settings/dialogs/VRChatConfigDialog.vue
+21 -20
View File
@@ -29,20 +29,16 @@
<div style="margin-top: 10px"> <div style="margin-top: 10px">
<span style="margin-right: 5px">{{ t('dialog.config_json.delete_all_cache') }}</span> <span style="margin-right: 5px">{{ t('dialog.config_json.delete_all_cache') }}</span>
<el-button <Button size="sm" variant="outline" style="margin-left: 5px" @click="showDeleteAllVRChatCacheConfirm">{{
size="small" t('dialog.config_json.delete_cache')
style="margin-left: 5px" }}</Button>
:icon="Delete"
@click="showDeleteAllVRChatCacheConfirm"
>{{ t('dialog.config_json.delete_cache') }}</el-button
>
</div> </div>
<div style="margin-top: 10px"> <div style="margin-top: 10px">
<span style="margin-right: 5px">{{ t('dialog.config_json.delete_old_cache') }}</span> <span style="margin-right: 5px">{{ t('dialog.config_json.delete_old_cache') }}</span>
<el-button size="small" style="margin-left: 5px" :icon="FolderDelete" @click="sweepVRChatCache">{{ <Button size="sm" variant="outline" style="margin-left: 5px" @click="sweepVRChatCache">{{
t('dialog.config_json.sweep_cache') t('dialog.config_json.sweep_cache')
}}</el-button> }}</Button>
</div> </div>
<div v-for="(item, value) in VRChatConfigList" :key="value" style="display: block; margin-top: 10px"> <div v-for="(item, value) in VRChatConfigList" :key="value" style="display: block; margin-top: 10px">
@@ -58,11 +54,11 @@
@input="refreshDialogValues" @input="refreshDialogValues"
style="flex: 1; margin-top: 5px"> style="flex: 1; margin-top: 5px">
<template #append> <template #append>
<el-button <Button
size="sm"
variant="outline"
v-if="item.folderBrowser" v-if="item.folderBrowser"
size="small" @click="openConfigFolderBrowser(value)"></Button>
:icon="FolderOpened"
@click="openConfigFolderBrowser(value)"></el-button>
</template> </template>
</el-input> </el-input>
</div> </div>
@@ -153,15 +149,19 @@
<template #footer> <template #footer>
<div style="display: flex; align-items: center; justify-content: space-between"> <div style="display: flex; align-items: center; justify-content: space-between">
<div> <div>
<el-button @click="openExternalLink('https://docs.vrchat.com/docs/configuration-file')">{{ <Button
t('dialog.config_json.vrchat_docs') variant="ghost"
}}</el-button> @click="openExternalLink('https://docs.vrchat.com/docs/configuration-file')"
>{{ t('dialog.config_json.vrchat_docs') }}</Button
>
</div> </div>
<div> <div>
<el-button @click="closeDialog">{{ t('dialog.config_json.cancel') }}</el-button> <Button variant="secondary" class="mr-2" @click="closeDialog">{{
<el-button type="primary" :disabled="loading" @click="saveVRChatConfigFile">{{ t('dialog.config_json.cancel')
}}</Button>
<Button :disabled="loading" @click="saveVRChatConfigFile">{{
t('dialog.config_json.save') t('dialog.config_json.save')
}}</el-button> }}</Button>
</div> </div>
</div> </div>
</template> </template>
@@ -170,9 +170,10 @@
<script setup> <script setup>
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Delete, FolderDelete, FolderOpened, Refresh } from '@element-plus/icons-vue';
import { computed, ref, watch } from 'vue'; import { computed, ref, watch } from 'vue';
import { Button } from '@/components/ui/button';
import { ElMessageBox } from 'element-plus'; import { ElMessageBox } from 'element-plus';
import { Refresh } from '@element-plus/icons-vue';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner'; import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
src/views/Tools/dialogs/GroupCalendarDialog.vue
+3 -2
View File
@@ -9,13 +9,13 @@
<template #header> <template #header>
<div class="dialog-title-container"> <div class="dialog-title-container">
<span>{{ t('dialog.group_calendar.header') }}</span> <span>{{ t('dialog.group_calendar.header') }}</span>
<el-button @click="toggleViewMode" type="primary" size="small" class="view-toggle-btn"> <Button size="sm" variant="outline" @click="toggleViewMode" class="view-toggle-btn">
{{ {{
viewMode === 'timeline' viewMode === 'timeline'
? t('dialog.group_calendar.list_view') ? t('dialog.group_calendar.list_view')
: t('dialog.group_calendar.calendar_view') : t('dialog.group_calendar.calendar_view')
}} }}
</el-button> </Button>
</div> </div>
<div class="featured-switch"> <div class="featured-switch">
<span class="featured-switch-text">{{ t('dialog.group_calendar.featured_events') }}</span> <span class="featured-switch-text">{{ t('dialog.group_calendar.featured_events') }}</span>
@@ -126,6 +126,7 @@
<script setup> <script setup>
import { computed, onMounted, ref, watch } from 'vue'; import { computed, onMounted, ref, watch } from 'vue';
import { ArrowRight } from '@element-plus/icons-vue'; import { ArrowRight } from '@element-plus/icons-vue';
import { Button } from '@/components/ui/button';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
src/views/Tools/dialogs/NoteExportDialog.vue
+5 -4
View File
@@ -31,9 +31,9 @@
</span> </span>
<template v-if="errors"> <template v-if="errors">
<el-button size="small" @click="errors = ''"> <Button size="sm" variant="outline" @click="errors = ''">
{{ t('dialog.note_export.clear_errors') }} {{ t('dialog.note_export.clear_errors') }}
</el-button> </Button>
<h2 style="font-weight: bold; margin: 0"> <h2 style="font-weight: bold; margin: 0">
{{ t('dialog.note_export.errors') }} {{ t('dialog.note_export.errors') }}
</h2> </h2>
@@ -79,7 +79,7 @@
<el-table-column :label="t('table.import.skip_export')" width="90" align="right"> <el-table-column :label="t('table.import.skip_export')" width="90" align="right">
<template #default="{ row }"> <template #default="{ row }">
<el-button text :icon="Close" size="small" @click="removeFromNoteExportTable(row)"></el-button> <Button size="sm" variant="ghost" @click="removeFromNoteExportTable(row)"></Button>
</template> </template>
</el-table-column> </el-table-column>
</DataTable> </DataTable>
@@ -87,8 +87,9 @@
</template> </template>
<script setup> <script setup>
import { Close, Loading } from '@element-plus/icons-vue';
import { ref, watch } from 'vue'; import { ref, watch } from 'vue';
import { Button } from '@/components/ui/button';
import { Loading } from '@element-plus/icons-vue';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
src/views/Tools/dialogs/ScreenshotMetadataDialog.vue
+24 -21
View File
@@ -16,37 +16,40 @@
}}</span> }}</span>
<br /> <br />
<br /> <br />
<el-button size="small" :icon="FolderOpened" @click="getAndDisplayScreenshotFromFile">{{ <Button size="sm" variant="outline" class="mr-2" @click="getAndDisplayScreenshotFromFile">{{
t('dialog.screenshot_metadata.browse') t('dialog.screenshot_metadata.browse')
}}</el-button> }}</Button>
<el-button size="small" :icon="Picture" @click="getAndDisplayLastScreenshot">{{ <Button size="sm" variant="outline" class="mr-2" @click="getAndDisplayLastScreenshot">{{
t('dialog.screenshot_metadata.last_screenshot') t('dialog.screenshot_metadata.last_screenshot')
}}</el-button> }}</Button>
<el-button <Button
size="small" size="sm"
:icon="CopyDocument" variant="outline"
class="mr-2"
@click="copyImageToClipboard(screenshotMetadataDialog.metadata.filePath)" @click="copyImageToClipboard(screenshotMetadataDialog.metadata.filePath)"
>{{ t('dialog.screenshot_metadata.copy_image') }}</el-button >{{ t('dialog.screenshot_metadata.copy_image') }}</Button
> >
<el-button <Button
size="small" size="sm"
:icon="Folder" variant="outline"
class="mr-2"
@click="openImageFolder(screenshotMetadataDialog.metadata.filePath)" @click="openImageFolder(screenshotMetadataDialog.metadata.filePath)"
>{{ t('dialog.screenshot_metadata.open_folder') }}</el-button >{{ t('dialog.screenshot_metadata.open_folder') }}</Button
> >
<el-button <Button
size="sm"
variant="outline"
class="mr-2"
v-if="isLocalUserVrcPlusSupporter && screenshotMetadataDialog.metadata.filePath" v-if="isLocalUserVrcPlusSupporter && screenshotMetadataDialog.metadata.filePath"
size="small"
:icon="Upload"
@click="uploadScreenshotToGallery" @click="uploadScreenshotToGallery"
>{{ t('dialog.screenshot_metadata.upload') }}</el-button >{{ t('dialog.screenshot_metadata.upload') }}</Button
> >
<el-button <Button
size="sm"
variant="outline"
v-if="screenshotMetadataDialog.metadata.filePath" v-if="screenshotMetadataDialog.metadata.filePath"
size="small"
:icon="Delete"
@click="deleteMetadata(screenshotMetadataDialog.metadata.filePath)" @click="deleteMetadata(screenshotMetadataDialog.metadata.filePath)"
>{{ t('dialog.screenshot_metadata.delete_metadata') }}</el-button >{{ t('dialog.screenshot_metadata.delete_metadata') }}</Button
> >
<br /> <br />
<br /> <br />
@@ -157,9 +160,9 @@
</template> </template>
<script setup> <script setup>
import { CopyDocument, Delete, Folder, FolderOpened, Picture, Upload } from '@element-plus/icons-vue';
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { reactive, ref, watch } from 'vue'; import { reactive, ref, watch } from 'vue';
import { Button } from '@/components/ui/button';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner'; import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';