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

replace some el-button

Browse Source
This commit is contained in:
pa
2026-01-11 12:24:58 +09:00
committed by Natsumi
parent 66d8addc9f
commit 2043a321a4
34 changed files with 317 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/IconPicker.vue
View File

@@ -1,10 +1,9 @@
<template> <template>
<Popover v-model:open="visible"> <Popover v-model:open="visible">
<PopoverTrigger asChild> <PopoverTrigger asChild>
<el-button class="icon-picker__trigger" plain> <Button>
<i v-if="modelValue" :class="modelValue"></i> {{ t('nav_menu.icon_picker.pick_icon') }}
<span>{{ t('nav_menu.icon_picker.pick_icon') }}</span> </Button>
</el-button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent side="bottom" align="start" class="w-155"> <PopoverContent side="bottom" align="start" class="w-155">
<div class="icon-picker"> <div class="icon-picker">
@@ -47,6 +46,7 @@
<script setup> <script setup>
import { computed, ref, watch } from 'vue'; import { computed, ref, watch } from 'vue';
import { Button } from '@/components/ui/button';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { Popover, PopoverContent, PopoverTrigger } from './ui/popover'; import { Popover, PopoverContent, PopoverTrigger } from './ui/popover';
@@ -145,14 +145,6 @@
</script> </script>
<style scoped> <style scoped>
.icon-picker__trigger {
display: inline-flex;
align-items: center;
gap: 6px;
min-width: 110px;
justify-content: center;
}
.icon-picker__trigger i { .icon-picker__trigger i {
font-size: 16px; font-size: 16px;
} }

9
src/components/InstanceInfo.vue
View File

@@ -7,12 +7,12 @@
>Closed At: {{ formatDateFilter(props.instance.closedAt, 'long') }}<br >Closed At: {{ formatDateFilter(props.instance.closedAt, 'long') }}<br
/></span> /></span>
<template v-if="state.canCloseInstance"> <template v-if="state.canCloseInstance">
<el-button <Button
class="mt-1"
size="sm"
:disabled="!!props.instance.closedAt" :disabled="!!props.instance.closedAt"
size="small"
type="primary"
@click="closeInstance(props.location)"> @click="closeInstance(props.location)">
{{ t('dialog.user.info.close_instance') }} </el-button {{ t('dialog.user.info.close_instance') }} </Button
><br /><br /> ><br /><br />
</template> </template>
<span <span
@@ -64,6 +64,7 @@
<script setup> <script setup>
import { reactive, watch } from 'vue'; import { reactive, watch } from 'vue';
import { Button } from '@/components/ui/button';
import { CaretBottom } from '@element-plus/icons-vue'; import { CaretBottom } from '@element-plus/icons-vue';
import { ElMessageBox } from 'element-plus'; import { ElMessageBox } from 'element-plus';
import { toast } from 'vue-sonner'; import { toast } from 'vue-sonner';

3
src/components/LastJoin.vue
View File

@@ -4,14 +4,13 @@
<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>
<el-icon style="display: inline-block"><Location /></el-icon> <i class="ri-history-line"></i>
</TooltipWrapper> </TooltipWrapper>
</span> </span>
</template> </template>
<script setup> <script setup>
import { ref, watch } from 'vue'; import { ref, watch } from 'vue';
import { Location } from '@element-plus/icons-vue';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';

10
src/components/Launch.vue
View File

@@ -1,13 +1,19 @@
<template> <template>
<div v-if="isVisible" class="inline-block"> <div v-if="isVisible" class="inline-block">
<TooltipWrapper side="top" :content="t('dialog.user.info.launch_invite_tooltip')" <TooltipWrapper side="top" :content="t('dialog.user.info.launch_invite_tooltip')"
><el-button @click="confirm" size="small" :icon="SwitchButton" circle /> ><Button
class="rounded-full w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
size="icon"
variant="outline"
@click="confirm"
><i class="ri-login-box-line"></i
></Button>
</TooltipWrapper> </TooltipWrapper>
</div> </div>
</template> </template>
<script setup> <script setup>
import { SwitchButton } from '@element-plus/icons-vue'; import { Button } from '@/components/ui/button';
import { computed } from 'vue'; import { computed } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';

9
src/components/dialogs/AvatarDialog/SetAvatarStylesDialog.vue
View File

@@ -68,15 +68,18 @@
</template> </template>
<template #footer> <template #footer>
<el-button @click="closeSetAvatarStylesDialog">{{ t('dialog.set_avatar_styles.cancel') }}</el-button> <Button variant="secondary" @click="closeSetAvatarStylesDialog">{{
<el-button type="primary" @click="saveSetAvatarStylesDialog"> t('dialog.set_avatar_styles.cancel')
}}</Button>
<Button @click="saveSetAvatarStylesDialog">
{{ t('dialog.set_avatar_styles.save') }} {{ t('dialog.set_avatar_styles.save') }}
</el-button> </Button>
</template> </template>
</el-dialog> </el-dialog>
</template> </template>
<script setup> <script setup>
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';
import { watch } from 'vue'; import { watch } from 'vue';

62
src/components/dialogs/ChooseFavoriteGroupDialog.vue
View File

@@ -3,59 +3,68 @@
<div v-loading="loading"> <div v-loading="loading">
<span style="display: block; text-align: center">{{ t('dialog.favorite.vrchat_favorites') }}</span> <span style="display: block; text-align: center">{{ t('dialog.favorite.vrchat_favorites') }}</span>
<template v-if="favoriteDialog.currentGroup && favoriteDialog.currentGroup.key"> <template v-if="favoriteDialog.currentGroup && favoriteDialog.currentGroup.key">
<el-button <Button
style="display: block; width: 100%; margin: 10px 0; white-space: initial; height: auto" variant="outline"
style="width: 100%; white-space: initial"
class="my-1"
@click="deleteFavoriteNoConfirm(favoriteDialog.objectId)"> @click="deleteFavoriteNoConfirm(favoriteDialog.objectId)">
<el-icon style="margin-right: 5px"><Check /></el-icon> <Check />{{ favoriteDialog.currentGroup.displayName }} ({{ favoriteDialog.currentGroup.count }} /
{{ favoriteDialog.currentGroup.displayName }} ({{ favoriteDialog.currentGroup.count }} /
{{ favoriteDialog.currentGroup.capacity }}) {{ favoriteDialog.currentGroup.capacity }})
</el-button> </Button>
</template> </template>
<template v-else> <template v-else>
<el-button <Button
variant="outline"
v-for="group in groups" v-for="group in groups"
:key="group.key" :key="group.key"
style="display: block; width: 100%; margin: 10px 0; white-space: initial; height: auto" style="width: 100%; white-space: initial"
class="my-1"
@click="addFavorite(group)"> @click="addFavorite(group)">
{{ group.displayName }} ({{ group.count }} / {{ group.capacity }}) {{ group.displayName }} ({{ group.count }} / {{ group.capacity }})
</el-button> </Button>
</template> </template>
</div> </div>
<div v-if="favoriteDialog.type === 'world'" style="margin-top: 20px"> <div v-if="favoriteDialog.type === 'world'" style="margin-top: 20px">
<span style="display: block; text-align: center">{{ t('dialog.favorite.local_favorites') }}</span> <span style="display: block; text-align: center">{{ t('dialog.favorite.local_favorites') }}</span>
<template v-for="group in localWorldFavoriteGroups" :key="group"> <template v-for="group in localWorldFavoriteGroups" :key="group">
<el-button <Button
variant="outline"
v-if="hasLocalWorldFavorite(favoriteDialog.objectId, group)" v-if="hasLocalWorldFavorite(favoriteDialog.objectId, group)"
style="display: block; width: 100%; margin: 10px 0; white-space: initial; height: auto" style="width: 100%; white-space: initial"
class="my-1"
@click="removeLocalWorldFavorite(favoriteDialog.objectId, group)"> @click="removeLocalWorldFavorite(favoriteDialog.objectId, group)">
<el-icon style="margin-right: 5px"><Check /></el-icon> <Check />{{ group }} ({{ localWorldFavGroupLength(group) }})
{{ group }} ({{ localWorldFavGroupLength(group) }}) </Button>
</el-button> <Button
<el-button variant="outline"
v-else v-else
style="display: block; width: 100%; margin: 10px 0; white-space: initial; height: auto" style="width: 100%; white-space: initial"
class="my-1"
@click="addLocalWorldFavorite(favoriteDialog.objectId, group)"> @click="addLocalWorldFavorite(favoriteDialog.objectId, group)">
{{ group }} ({{ localWorldFavGroupLength(group) }}) {{ group }} ({{ localWorldFavGroupLength(group) }})
</el-button> </Button>
</template> </template>
</div> </div>
<div v-if="favoriteDialog.type === 'avatar'" style="margin-top: 20px"> <div v-if="favoriteDialog.type === 'avatar'" style="margin-top: 20px">
<span style="display: block; text-align: center">{{ t('dialog.favorite.local_avatar_favorites') }}</span> <span style="text-align: center">{{ t('dialog.favorite.local_avatar_favorites') }}</span>
<template v-for="group in localAvatarFavoriteGroups" :key="group"> <template v-for="group in localAvatarFavoriteGroups" :key="group">
<el-button <Button
variant="outline"
v-if="hasLocalAvatarFavorite(favoriteDialog.objectId, group)" v-if="hasLocalAvatarFavorite(favoriteDialog.objectId, group)"
style="display: block; width: 100%; margin: 10px 0; white-space: initial; height: auto" style="width: 100%; white-space: initial"
class="my-1"
@click="removeLocalAvatarFavorite(favoriteDialog.objectId, group)"> @click="removeLocalAvatarFavorite(favoriteDialog.objectId, group)">
<el-icon style="margin-right: 5px"><Check /></el-icon> <Check />{{ group }} ({{ localAvatarFavGroupLength(group) }})
{{ group }} ({{ localAvatarFavGroupLength(group) }}) </Button>
</el-button> <Button
<el-button variant="outline"
v-else v-else
style="display: block; width: 100%; margin: 10px 0; white-space: initial; height: auto" style="width: 100%; white-space: initial"
class="my-1"
:disabled="!isLocalUserVrcPlusSupporter" :disabled="!isLocalUserVrcPlusSupporter"
@click="addLocalAvatarFavorite(favoriteDialog.objectId, group)"> @click="addLocalAvatarFavorite(favoriteDialog.objectId, group)">
{{ group }} ({{ localAvatarFavGroupLength(group) }}) {{ group }} ({{ localAvatarFavGroupLength(group) }})
</el-button> </Button>
</template> </template>
</div> </div>
</el-dialog> </el-dialog>
@@ -63,7 +72,8 @@
<script setup> <script setup>
import { computed, nextTick, ref, watch } from 'vue'; import { computed, nextTick, ref, watch } from 'vue';
import { Check } from '@element-plus/icons-vue'; import { Button } from '@/components/ui/button';
import { Check } from 'lucide-vue-next';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';

9
src/components/dialogs/InviteDialog/EditAndSendInviteDialog.vue
View File

@@ -21,17 +21,18 @@
style="margin-top: 10px"></el-input> style="margin-top: 10px"></el-input>
<template #footer> <template #footer>
<el-button @click="cancelEditAndSendInvite"> <Button variant="secondary" @click="cancelEditAndSendInvite">
{{ t('dialog.edit_send_invite_message.cancel') }} {{ t('dialog.edit_send_invite_message.cancel') }}
</el-button> </Button>
<el-button type="primary" @click="saveEditAndSendInvite" :disabled="!editAndSendInviteDialog.newMessage"> <Button @click="saveEditAndSendInvite" :disabled="!editAndSendInviteDialog.newMessage">
{{ t('dialog.edit_send_invite_message.send') }} {{ t('dialog.edit_send_invite_message.send') }}
</el-button> </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';

35
src/components/dialogs/InviteDialog/InviteDialog.vue
View File

@@ -9,22 +9,25 @@
<div v-if="inviteDialog.visible" v-loading="inviteDialog.loading"> <div v-if="inviteDialog.visible" v-loading="inviteDialog.loading">
<Location :location="inviteDialog.worldId" :link="false" /> <Location :location="inviteDialog.worldId" :link="false" />
<br /> <br />
<el-button size="small" style="margin-top: 10px" @click="addSelfToInvite">{{ <Button size="sm" class="mr-2" variant="outline" style="margin-top: 10px" @click="addSelfToInvite">{{
t('dialog.invite.add_self') t('dialog.invite.add_self')
}}</el-button> }}</Button>
<el-button <Button
size="small" size="sm"
class="mr-2"
variant="outline"
:disabled="inviteDialog.friendsInInstance.length === 0" :disabled="inviteDialog.friendsInInstance.length === 0"
style="margin-top: 10px" style="margin-top: 10px"
@click="addFriendsInInstanceToInvite" @click="addFriendsInInstanceToInvite"
>{{ t('dialog.invite.add_friends_in_instance') }}</el-button >{{ t('dialog.invite.add_friends_in_instance') }}</Button
> >
<el-button <Button
size="small" size="sm"
variant="outline"
:disabled="vipFriends.length === 0" :disabled="vipFriends.length === 0"
style="margin-top: 10px" style="margin-top: 10px"
@click="addFavoriteFriendsToInvite" @click="addFavoriteFriendsToInvite"
>{{ t('dialog.invite.add_favorite_friends') }}</el-button >{{ t('dialog.invite.add_favorite_friends') }}</Button
> >
<div style="width: 100%; margin-top: 15px"> <div style="width: 100%; margin-top: 15px">
@@ -61,15 +64,16 @@
</div> </div>
<template #footer> <template #footer>
<el-button :disabled="inviteDialog.loading || !inviteDialog.userIds.length" @click="showSendInviteDialog">{{ <Button
t('dialog.invite.invite_with_message') variant="secondary"
}}</el-button> class="mr-2"
<el-button
type="primary"
:disabled="inviteDialog.loading || !inviteDialog.userIds.length" :disabled="inviteDialog.loading || !inviteDialog.userIds.length"
@click="sendInvite" @click="showSendInviteDialog"
>{{ t('dialog.invite.invite') }}</el-button >{{ t('dialog.invite.invite_with_message') }}</Button
> >
<Button :disabled="inviteDialog.loading || !inviteDialog.userIds.length" @click="sendInvite">{{
t('dialog.invite.invite')
}}</Button>
</template> </template>
<SendInviteDialog <SendInviteDialog
v-model:sendInviteDialogVisible="sendInviteDialogVisible" v-model:sendInviteDialogVisible="sendInviteDialogVisible"
@@ -81,6 +85,7 @@
<script setup> <script setup>
import { computed, ref } from 'vue'; import { computed, ref } 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 { ElMessageBox } from 'element-plus'; import { ElMessageBox } from 'element-plus';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';

44
src/components/dialogs/LaunchDialog.vue
View File

@@ -8,20 +8,23 @@
style="width: 230px" style="width: 230px"
@click="$event.target.tagName === 'INPUT' && $event.target.select()" /> @click="$event.target.tagName === 'INPUT' && $event.target.select()" />
<TooltipWrapper side="right" :content="t('dialog.launch.copy_tooltip')"> <TooltipWrapper side="right" :content="t('dialog.launch.copy_tooltip')">
<el-button <Button
size="small" class="rounded-full ml-1"
:icon="CopyDocument" size="icon-sm"
style="margin-left: 5px" variant="ghost"
circle @click="copyInstanceMessage(launchDialog.url)"
@click="copyInstanceMessage(launchDialog.url)" /> ><Copy
/></Button>
</TooltipWrapper> </TooltipWrapper>
</el-form-item> </el-form-item>
<el-form-item v-if="launchDialog.shortUrl"> <el-form-item v-if="launchDialog.shortUrl">
<template #label> <template #label>
<div class="flex items-center">
<span>{{ t('dialog.launch.short_url') }}</span> <span>{{ t('dialog.launch.short_url') }}</span>
<TooltipWrapper side="top" :content="t('dialog.launch.short_url_notice')"> <TooltipWrapper side="top" :content="t('dialog.launch.short_url_notice')">
<el-icon style="display: inline-block; margin-left: 5px"><Warning /></el-icon> <el-icon style="display: inline-block; margin-left: 5px"><Warning /></el-icon>
</TooltipWrapper> </TooltipWrapper>
</div>
</template> </template>
<el-input <el-input
v-model="launchDialog.shortUrl" v-model="launchDialog.shortUrl"
@@ -29,12 +32,13 @@
style="width: 230px" style="width: 230px"
@click="$event.target.tagName === 'INPUT' && $event.target.select()" /> @click="$event.target.tagName === 'INPUT' && $event.target.select()" />
<TooltipWrapper side="right" :content="t('dialog.launch.copy_tooltip')"> <TooltipWrapper side="right" :content="t('dialog.launch.copy_tooltip')">
<el-button <Button
size="small" class="rounded-full ml-1"
:icon="CopyDocument" size="icon-sm"
style="display: inline-block; margin-left: 5px" variant="ghost"
circle @click="copyInstanceMessage(launchDialog.shortUrl)"
@click="copyInstanceMessage(launchDialog.shortUrl)" /> ><Copy
/></Button>
</TooltipWrapper> </TooltipWrapper>
</el-form-item> </el-form-item>
<el-form-item :label="t('dialog.launch.location')"> <el-form-item :label="t('dialog.launch.location')">
@@ -44,12 +48,13 @@
style="width: 230px" style="width: 230px"
@click="$event.target.tagName === 'INPUT' && $event.target.select()" /> @click="$event.target.tagName === 'INPUT' && $event.target.select()" />
<TooltipWrapper side="right" :content="t('dialog.launch.copy_tooltip')"> <TooltipWrapper side="right" :content="t('dialog.launch.copy_tooltip')">
<el-button <Button
size="small" class="rounded-full ml-1"
:icon="CopyDocument" size="icon-sm"
style="display: inline-block; margin-left: 5px" variant="ghost"
circle @click="copyInstanceMessage(launchDialog.location)"
@click="copyInstanceMessage(launchDialog.location)" /> ><Copy
/></Button>
</TooltipWrapper> </TooltipWrapper>
</el-form-item> </el-form-item>
</el-form> </el-form>
@@ -121,11 +126,12 @@
DropdownMenuItem, DropdownMenuItem,
DropdownMenuTrigger DropdownMenuTrigger
} from '@/components/ui/dropdown-menu'; } from '@/components/ui/dropdown-menu';
import { CopyDocument, Warning } from '@element-plus/icons-vue';
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 { Copy } from 'lucide-vue-next';
import { ElMessageBox } from 'element-plus'; import { ElMessageBox } from 'element-plus';
import { MoreHorizontal } from 'lucide-vue-next'; import { MoreHorizontal } from 'lucide-vue-next';
import { Warning } 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';

6
src/components/dialogs/ModerateGroupDialog.vue
View File

@@ -39,21 +39,21 @@
</div> </div>
</div> </div>
<template #footer> <template #footer>
<el-button <Button
type="primary"
:disabled="!moderateGroupDialog.userId || !moderateGroupDialog.groupId" :disabled="!moderateGroupDialog.userId || !moderateGroupDialog.groupId"
@click=" @click="
showGroupMemberModerationDialog(moderateGroupDialog.groupId, moderateGroupDialog.userId); showGroupMemberModerationDialog(moderateGroupDialog.groupId, moderateGroupDialog.userId);
moderateGroupDialog.visible = false; moderateGroupDialog.visible = false;
"> ">
{{ t('dialog.moderate_group.moderation_tools') }} {{ t('dialog.moderate_group.moderation_tools') }}
</el-button> </Button>
</template> </template>
</el-dialog> </el-dialog>
</template> </template>
<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 { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';

13
src/components/dialogs/SendBoopDialog.vue
View File

@@ -61,17 +61,22 @@
</div> </div>
<template #footer> <template #footer>
<el-button size="small" @click="showGalleryPage">{{ t('dialog.boop_dialog.emoji_manager') }}</el-button> <Button size="sm" variant="outline" class="mr-2" @click="showGalleryPage">{{
<el-button size="small" @click="closeDialog">{{ t('dialog.boop_dialog.cancel') }}</el-button> t('dialog.boop_dialog.emoji_manager')
<el-button size="small" :disabled="!sendBoopDialog.userId" @click="sendBoop">{{ }}</Button>
<Button size="sm" variant="secondary" class="mr-2" @click="closeDialog">{{
t('dialog.boop_dialog.cancel')
}}</Button>
<Button size="sm" :disabled="!sendBoopDialog.userId" @click="sendBoop">{{
t('dialog.boop_dialog.send') t('dialog.boop_dialog.send')
}}</el-button> }}</Button>
</template> </template>
</el-dialog> </el-dialog>
</template> </template>
<script setup> <script setup>
import { computed, ref, watch } from 'vue'; import { computed, 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 { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';

4
src/components/dialogs/UserDialog/EditNoteAndMemoDialog.vue
View File

@@ -38,8 +38,8 @@
</template> </template>
<template #footer> <template #footer>
<div class="dialog-footer"> <div class="dialog-footer">
<el-button @click="cancel">Cancel</el-button> <Button variant="secondary" @click="cancel">Cancel</Button>
<el-button type="primary" @click="saveChanges"> Confirm </el-button> <Button @click="saveChanges"> Confirm </Button>
</div> </div>
</template> </template>
</el-dialog> </el-dialog>

55
src/components/dialogs/UserDialog/UserActionDropdown.vue
View File

@@ -1,40 +1,29 @@
<template> <template>
<div style="flex: none"> <div style="flex: none" class="flex items-center">
<template v-if="(currentUser.id !== userDialog.ref.id && userDialog.isFriend) || userDialog.isFavorite"> <template v-if="(currentUser.id !== userDialog.ref.id && userDialog.isFriend) || userDialog.isFavorite">
<TooltipWrapper <TooltipWrapper
v-if="userDialog.isFavorite" v-if="userDialog.isFavorite"
side="top" side="top"
:content="t('dialog.user.actions.unfavorite_tooltip')"> :content="t('dialog.user.actions.unfavorite_tooltip')">
<el-button <Button class="rounded-full" size="icon-lg" @click="userDialogCommand('Add Favorite')"><Star /></Button>
type="warning"
:icon="StarFilled"
size="large"
circle
@click="userDialogCommand('Add Favorite')"></el-button>
</TooltipWrapper> </TooltipWrapper>
<TooltipWrapper v-else side="top" :content="t('dialog.user.actions.favorite_tooltip')"> <TooltipWrapper v-else side="top" :content="t('dialog.user.actions.favorite_tooltip')">
<el-button <Button class="rounded-full" size="icon-lg" variant="outline" @click="userDialogCommand('Add Favorite')"
type="default" ><Star
:icon="Star" /></Button>
size="large"
circle
@click="userDialogCommand('Add Favorite')"></el-button>
</TooltipWrapper> </TooltipWrapper>
</template> </template>
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger as-child> <DropdownMenuTrigger as-child>
<el-button <div class="ml-2">
:type=" <Button variant="outline" size="icon-lg" class="rounded-full">
userDialog.incomingRequest || userDialog.outgoingRequest <Ellipsis />
? 'success' <span
: userDialog.isBlock || userDialog.isMute v-if="dotClass"
? 'danger' class="absolute -right-0.5 -top-0.5 h-2.5 w-2.5 rounded-full ring-2 ring-background"
: 'default' :class="dotClass" />
" </Button>
:icon="MoreFilled" </div>
size="large"
circle
style="margin-left: 5px"></el-button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent> <DropdownMenuContent>
<DropdownMenuItem @click="onCommand('Refresh')"> <DropdownMenuItem @click="onCommand('Refresh')">
@@ -244,21 +233,20 @@
Flag, Flag,
Message, Message,
Microphone, Microphone,
MoreFilled,
Mute, Mute,
Operation, Operation,
Picture,
Plus, Plus,
Pointer, Pointer,
Postcard, Postcard,
Refresh, Refresh,
Share, Share,
Star,
StarFilled,
SwitchButton, SwitchButton,
User, User,
UserFilled UserFilled
} from '@element-plus/icons-vue'; } from '@element-plus/icons-vue';
import { MoreHorizontal as Ellipsis, Star } from 'lucide-vue-next';
import { Button } from '@/components/ui/button';
import { computed } from 'vue';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
@@ -285,6 +273,15 @@
const { isGameRunning } = storeToRefs(useGameStore()); const { isGameRunning } = storeToRefs(useGameStore());
const { lastLocation } = storeToRefs(useLocationStore()); const { lastLocation } = storeToRefs(useLocationStore());
const hasRequest = computed(() => userDialog.value.incomingRequest || userDialog.value.outgoingRequest);
const hasRisk = computed(() => userDialog.value.isBlock || userDialog.value.isMute);
const dotClass = computed(() => {
if (hasRequest.value) return 'bg-emerald-500';
if (hasRisk.value) return 'bg-destructive';
return null;
});
function onCommand(command) { function onCommand(command) {
props.userDialogCommand(command); props.userDialogCommand(command);
} }

15
src/components/dialogs/VRCXUpdateDialog.vue
View File

@@ -53,25 +53,26 @@
</div> </div>
<template #footer> <template #footer>
<el-button v-if="updateInProgress" type="primary" @click="cancelUpdate"> <Button variant="secondary" class="mr-2" v-if="updateInProgress" @click="cancelUpdate">
{{ t('dialog.vrcx_updater.cancel') }} {{ t('dialog.vrcx_updater.cancel') }}
</el-button> </Button>
<el-button <Button
variant="default"
v-if="VRCXUpdateDialog.release !== pendingVRCXInstall" v-if="VRCXUpdateDialog.release !== pendingVRCXInstall"
:disabled="updateInProgress" :disabled="updateInProgress"
type="primary"
@click="installVRCXUpdate"> @click="installVRCXUpdate">
{{ t('dialog.vrcx_updater.download') }} {{ t('dialog.vrcx_updater.download') }}
</el-button> </Button>
<el-button v-if="!updateInProgress && pendingVRCXInstall" type="primary" @click="restartVRCX(true)"> <Button variant="default" v-if="!updateInProgress && pendingVRCXInstall" @click="restartVRCX(true)">
{{ t('dialog.vrcx_updater.install') }} {{ t('dialog.vrcx_updater.install') }}
</el-button> </Button>
</template> </template>
</el-dialog> </el-dialog>
</template> </template>
<script setup> <script setup>
import { nextTick, ref, watch } from 'vue'; import { nextTick, ref, watch } 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';

9
src/components/dialogs/WorldDialog/SetWorldTagsDialog.vue
View File

@@ -77,12 +77,12 @@
</el-checkbox> </el-checkbox>
<template #footer> <template #footer>
<div style="display: flex"> <div style="display: flex">
<el-button @click="isVisible = false"> <Button variant="secondary" @click="isVisible = false">
{{ t('dialog.set_world_tags.cancel') }} {{ t('dialog.set_world_tags.cancel') }}
</el-button> </Button>
<el-button type="primary" @click="saveSetWorldTagsDialog"> <Button @click="saveSetWorldTagsDialog">
{{ t('dialog.set_world_tags.save') }} {{ t('dialog.set_world_tags.save') }}
</el-button> </Button>
</div> </div>
</template> </template>
</el-dialog> </el-dialog>
@@ -90,6 +90,7 @@
<script setup> <script setup>
import { computed, ref, watch } from 'vue'; import { computed, ref, watch } 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';

7
src/components/ui/button/Button.vue
View File

@@ -1,6 +1,7 @@
<script setup> <script setup>
import { Primitive } from 'reka-ui'; import { Primitive } from 'reka-ui';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
import { computed } from 'vue';
import { buttonVariants } from '.'; import { buttonVariants } from '.';
@@ -8,9 +9,12 @@
variant: { type: null, required: false }, variant: { type: null, required: false },
size: { type: null, required: false }, size: { type: null, required: false },
class: { type: null, required: false }, class: { type: null, required: false },
disabled: { type: Boolean, required: false },
asChild: { type: Boolean, required: false }, asChild: { type: Boolean, required: false },
as: { type: null, required: false, default: 'button' } as: { type: null, required: false, default: 'button' }
}); });
const isNativeButton = computed(() => props.as === 'button' && !props.asChild);
</script> </script>
<template> <template>
@@ -18,6 +22,9 @@
data-slot="button" data-slot="button"
:as="as" :as="as"
:as-child="asChild" :as-child="asChild"
:disabled="isNativeButton ? props.disabled : undefined"
:data-disabled="props.disabled ? '' : undefined"
:aria-disabled="props.disabled || undefined"
:class="cn(buttonVariants({ variant, size }), props.class)"> :class="cn(buttonVariants({ variant, size }), props.class)">
<slot /> <slot />
</Primitive> </Primitive>

2
src/components/ui/button/index.js
View File

@@ -3,7 +3,7 @@ import { cva } from 'class-variance-authority';
export { default as Button } from './Button.vue'; export { default as Button } from './Button.vue';
export const buttonVariants = cva( export const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:bg-muted disabled:text-muted-foreground disabled:shadow-none disabled:opacity-100 aria-disabled:pointer-events-none aria-disabled:bg-muted aria-disabled:text-muted-foreground aria-disabled:shadow-none aria-disabled:opacity-100 data-[disabled]:pointer-events-none data-[disabled]:bg-muted data-[disabled]:text-muted-foreground data-[disabled]:shadow-none data-[disabled]:opacity-100 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
{ {
variants: { variants: {
variant: { variant: {

12
src/components/ui/spinner/Spinner.vue Normal file
View File

@@ -0,0 +1,12 @@
<script setup>
import { Loader2Icon } from 'lucide-vue-next';
import { cn } from '@/lib/utils';
const props = defineProps({
class: { type: null, required: false }
});
</script>
<template>
<Loader2Icon role="status" aria-label="Loading" :class="cn('size-4 animate-spin', props.class)" />
</template>

1
src/components/ui/spinner/index.js Normal file
View File

@@ -0,0 +1 @@
export { default as Spinner } from "./Spinner.vue";

20
src/views/Charts/components/InstanceActivity.vue
View File

@@ -21,15 +21,24 @@
</div> </div>
<div> <div>
<TooltipWrapper :content="t('view.charts.instance_activity.refresh')" side="top" <TooltipWrapper :content="t('view.charts.instance_activity.refresh')" side="top">
><el-button :icon="Refresh" circle style="margin-right: 5px" @click="reloadData"></el-button <Button
></TooltipWrapper> class="rounded-full"
size="icon"
variant="outline"
style="margin-right: 5px"
@click="reloadData">
<RefreshCcw />
</Button>
</TooltipWrapper>
<Popover> <Popover>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<div> <div>
<TooltipWrapper :content="t('view.charts.instance_activity.settings.header')" side="top"> <TooltipWrapper :content="t('view.charts.instance_activity.settings.header')" side="top">
<el-button :icon="Setting" style="margin-right: 5px" circle></el-button> <Button class="rounded-full" size="icon" variant="outline" style="margin-right: 5px">
<Settings />
</Button>
</TooltipWrapper> </TooltipWrapper>
</div> </div>
</PopoverTrigger> </PopoverTrigger>
@@ -132,7 +141,8 @@
<script setup> <script setup>
import { computed, nextTick, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue'; import { computed, nextTick, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { ArrowLeft, ArrowRight, InfoFilled, Refresh, Setting, WarningFilled } from '@element-plus/icons-vue'; import { ArrowLeft, ArrowRight, InfoFilled, WarningFilled } from '@element-plus/icons-vue';
import { RefreshCcw, Settings } 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';

8
src/views/FriendsLocations/FriendsLocations.vue
View File

@@ -13,9 +13,9 @@
<PopoverTrigger asChild> <PopoverTrigger asChild>
<div> <div>
<TooltipWrapper :content="t('view.charts.instance_activity.settings.header')" side="top"> <TooltipWrapper :content="t('view.charts.instance_activity.settings.header')" side="top">
<el-button style="margin-right: 5px" circle <Button class="rounded-full mr-2" size="icon" variant="outline">
><i class="ri-settings-3-line"></i <Settings />
></el-button> </Button>
</TooltipWrapper> </TooltipWrapper>
</div> </div>
</PopoverTrigger> </PopoverTrigger>
@@ -164,6 +164,8 @@
<script setup> <script setup>
import { computed, nextTick, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue'; import { computed, nextTick, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { Loading, Search } from '@element-plus/icons-vue'; import { Loading, Search } from '@element-plus/icons-vue';
import { Button } from '@/components/ui/button';
import { Settings } from 'lucide-vue-next';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';

41
src/views/Login/Login.vue
View File

@@ -1,16 +1,14 @@
<template> <template>
<div style="float: left; margin: 5px; z-index: 3000"> <div style="float: left; margin: 5px; z-index: 3000">
<TooltipWrapper v-if="!noUpdater" side="top" :content="t('view.login.updater')"> <TooltipWrapper v-if="!noUpdater" side="top" :content="t('view.login.updater')">
<el-button type="default" size="small" :icon="Download" circle @click="showVRCXUpdateDialog"></el-button> <Button class="rounded-full mr-2 text-xs" size="icon-sm" variant="ghost" @click="showVRCXUpdateDialog"
><CircleArrowDown
/></Button>
</TooltipWrapper> </TooltipWrapper>
<TooltipWrapper side="top" :content="t('view.login.proxy_settings')"> <TooltipWrapper side="top" :content="t('view.login.proxy_settings')">
<el-button <Button class="rounded-full text-xs" size="icon-sm" variant="ghost" @click="promptProxySettings"
type="default" ><Route
size="small" /></Button>
:icon="Connection"
style="margin-left: 5px"
circle
@click="promptProxySettings"></el-button>
</TooltipWrapper> </TooltipWrapper>
</div> </div>
<div v-loading="loginForm.loading" class="x-login-container"> <div v-loading="loginForm.loading" class="x-login-container">
@@ -79,16 +77,15 @@
clearable></el-input> clearable></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button native-type="submit" type="primary" style="width: 100%">{{ <Button type="submit" size="lg" style="width: 100%">{{ t('view.login.login') }}</Button>
t('view.login.login')
}}</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-button <Button
type="primary" variant="Secondary"
size="lg"
style="width: 100%" style="width: 100%"
@click="openExternalLink('https://vrchat.com/register')" @click="openExternalLink('https://vrchat.com/register')"
>{{ t('view.login.register') }}</el-button >{{ t('view.login.register') }}</Button
> >
</div> </div>
@@ -113,13 +110,14 @@
<span class="extra" v-text="user.user.username"></span> <span class="extra" v-text="user.user.username"></span>
<span class="extra" v-text="user.loginParams.endpoint"></span> <span class="extra" v-text="user.loginParams.endpoint"></span>
</div> </div>
<el-button <Button
type="default" class="rounded-full"
size="small" size="icon-sm"
:icon="Delete" variant="ghost"
style="margin-left: 10px" style="margin-left: 10px"
circle @click.stop="clickDeleteSavedLogin(user.user.id)"
@click.stop="clickDeleteSavedLogin(user.user.id)"></el-button> ><i class="ri-delete-bin-line h-3 w-3"></i
></Button>
</div> </div>
</div> </div>
</div> </div>
@@ -149,8 +147,9 @@
<script setup> <script setup>
import { onBeforeMount, onBeforeUnmount, ref, watch } from 'vue'; import { onBeforeMount, onBeforeUnmount, ref, watch } from 'vue';
import { Connection, Delete, Download } from '@element-plus/icons-vue'; import { CircleArrowDown, Route } from 'lucide-vue-next';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import { Button } from '@/components/ui/button';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';

5
src/views/PlayerList/components/PhotonEventTable.vue
View File

@@ -25,9 +25,9 @@
clearable clearable
style="width: 150px" style="width: 150px"
@input="photonEventTableFilterChange"></el-input> @input="photonEventTableFilterChange"></el-input>
<el-button @click="emitShowChatboxBlacklist">{{ <Button variant="outline" @click="emitShowChatboxBlacklist">{{
t('view.player_list.photon.chatbox_blacklist') t('view.player_list.photon.chatbox_blacklist')
}}</el-button> }}</Button>
<TooltipWrapper side="bottom" :content="t('view.player_list.photon.status_tooltip')"> <TooltipWrapper side="bottom" :content="t('view.player_list.photon.status_tooltip')">
<div style="display: inline-flex; align-items: center; font-size: 14px"> <div style="display: inline-flex; align-items: center; font-size: 14px">
<span v-if="ipcEnabled && !photonEventIcon">🟢</span> <span v-if="ipcEnabled && !photonEventIcon">🟢</span>
@@ -389,6 +389,7 @@
<script setup> <script setup>
import { ArrowRight, Download } from '@element-plus/icons-vue'; import { ArrowRight, Download } 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';

12
src/views/PlayerList/dialogs/ChatboxBlacklistDialog.vue
View File

@@ -14,18 +14,18 @@
style="margin-top: 5px" style="margin-top: 5px"
@change="saveChatboxBlacklist"> @change="saveChatboxBlacklist">
<template #append> <template #append>
<el-button <Button
:icon="Delete" variant="outline"
@click=" @click="
chatboxBlacklist.splice(index, 1); chatboxBlacklist.splice(index, 1);
saveChatboxBlacklist(); saveChatboxBlacklist();
"> ">
</el-button> </Button>
</template> </template>
</el-input> </el-input>
<el-button size="small" style="margin-top: 5px" @click="chatboxBlacklist.push('')"> <Button size="sm" variant="outline" style="margin-top: 5px" @click="chatboxBlacklist.push('')">
{{ t('dialog.chatbox_blacklist.add_item') }} {{ t('dialog.chatbox_blacklist.add_item') }}
</el-button> </Button>
<br /> <br />
<h2>{{ t('dialog.chatbox_blacklist.user_blacklist') }}</h2> <h2>{{ t('dialog.chatbox_blacklist.user_blacklist') }}</h2>
<Badge <Badge
@@ -55,7 +55,7 @@
</template> </template>
<script setup> <script setup>
import { Delete } 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';

15
src/views/Search/Search.vue
View File

@@ -5,15 +5,13 @@
:model-value="searchText" :model-value="searchText"
:placeholder="t('view.search.search_placeholder')" :placeholder="t('view.search.search_placeholder')"
style="flex: 1" style="flex: 1"
clearable
@input="updateSearchText" @input="updateSearchText"
@keyup.enter="search"></el-input> @keyup.enter="search"></el-input>
<TooltipWrapper side="bottom" :content="t('view.search.clear_results_tooltip')"> <TooltipWrapper side="bottom" :content="t('view.search.clear_results_tooltip')">
<el-button <Button class="rounded-full mr-2" size="icon-sm" variant="ghost" @click="handleClearSearch"
type="default" ><Trash2
:icon="Delete" /></Button>
circle
style="flex: none; margin-left: 10px"
@click="handleClearSearch"></el-button>
</TooltipWrapper> </TooltipWrapper>
</div> </div>
<el-tabs ref="searchTabRef" style="margin-top: 15px" @tab-click="searchText = ''"> <el-tabs ref="searchTabRef" style="margin-top: 15px" @tab-click="searchText = ''">
@@ -337,10 +335,11 @@
<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 { Back, Delete, Refresh, Right } from '@element-plus/icons-vue'; import { Back, Refresh, Right } from '@element-plus/icons-vue';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'; import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
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 { Trash2 } from 'lucide-vue-next';
import { ref } from 'vue'; import { ref } from 'vue';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
@@ -374,7 +373,7 @@
const { showUserDialog, refreshUserDialogAvatars } = useUserStore(); const { showUserDialog, refreshUserDialogAvatars } = useUserStore();
const { showAvatarDialog, lookupAvatars, cachedAvatars } = useAvatarStore(); const { showAvatarDialog, lookupAvatars, cachedAvatars } = useAvatarStore();
const { cachedWorlds, showWorldDialog } = useWorldStore(); const { cachedWorlds, showWorldDialog } = useWorldStore();
const { showGroupDialog, applyGroup } = useGroupStore(); const { showGroupDialog } = useGroupStore();
const { searchText, searchUserResults } = storeToRefs(useSearchStore()); const { searchText, searchUserResults } = storeToRefs(useSearchStore());
const { clearSearch, moreSearchUser } = useSearchStore(); const { clearSearch, moreSearchUser } = useSearchStore();
const { cachedConfig } = storeToRefs(useAuthStore()); const { cachedConfig } = storeToRefs(useAuthStore());

10
src/views/Settings/components/PhotonSettings.vue
View File

@@ -35,9 +35,9 @@
</ToggleGroup> </ToggleGroup>
</div> </div>
<div class="options-container-item"> <div class="options-container-item">
<el-button size="small" :icon="Timer" :disabled="!openVR" @click="promptPhotonOverlayMessageTimeout">{{ <Button size="sm" variant="outline" :disabled="!openVR" @click="promptPhotonOverlayMessageTimeout">{{
t('view.settings.advanced.photon.event_hud.message_timeout') t('view.settings.advanced.photon.event_hud.message_timeout')
}}</el-button> }}</Button>
</div> </div>
<div class="options-container-item"> <div class="options-container-item">
<Select <Select
@@ -92,15 +92,15 @@
</ToggleGroup> </ToggleGroup>
</div> </div>
<div class="options-container-item"> <div class="options-container-item">
<el-button size="small" :icon="Timer" :disabled="!openVR" @click="promptPhotonLobbyTimeoutThreshold">{{ <Button size="sm" variant="outline" :disabled="!openVR" @click="promptPhotonLobbyTimeoutThreshold">{{
t('view.settings.advanced.photon.timeout_hud.timeout_threshold') t('view.settings.advanced.photon.timeout_hud.timeout_threshold')
}}</el-button> }}</Button>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { Timer } 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';

16
src/views/Settings/dialogs/ChangelogDialog.vue
View File

@@ -21,20 +21,24 @@
style="height: 62vh; overflow-y: auto; margin-top: 10px" /> style="height: 62vh; overflow-y: auto; margin-top: 10px" />
</div> </div>
<template #footer> <template #footer>
<el-button @click="openExternalLink('https://github.com/vrcx-team/VRCX/releases')"> <Button
variant="ghost"
class="mr-2"
@click="openExternalLink('https://github.com/vrcx-team/VRCX/releases')">
{{ t('dialog.change_log.github') }} {{ t('dialog.change_log.github') }}
</el-button> </Button>
<el-button @click="openExternalLink('https://patreon.com/Natsumi_VRCX')"> <Button variant="outline" class="mr-2" @click="openExternalLink('https://patreon.com/Natsumi_VRCX')">
{{ t('dialog.change_log.donate') }} {{ t('dialog.change_log.donate') }}
</el-button> </Button>
<el-button @click="closeDialog"> <Button @click="closeDialog">
{{ t('dialog.change_log.close') }} {{ t('dialog.change_log.close') }}
</el-button> </Button>
</template> </template>
</el-dialog> </el-dialog>
</template> </template>
<script setup> <script setup>
import { Button } from '@/components/ui/button';
import { defineAsyncComponent } from 'vue'; import { defineAsyncComponent } from 'vue';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';

22
src/views/Settings/dialogs/LaunchOptionsDialog.vue
View File

@@ -38,16 +38,23 @@
</template> </template>
<template #footer> <template #footer>
<div style="display: flex"> <div class="flex items-center justify-between">
<el-button @click="openExternalLink('https://docs.vrchat.com/docs/launch-options')"> <div>
<Button
variant="outline"
class="mr-2"
@click="openExternalLink('https://docs.vrchat.com/docs/launch-options')">
{{ t('dialog.launch_options.vrchat_docs') }} {{ t('dialog.launch_options.vrchat_docs') }}
</el-button> </Button>
<el-button @click="openExternalLink('https://docs.unity3d.com/Manual/CommandLineArguments.html')"> <Button
variant="outline"
@click="openExternalLink('https://docs.unity3d.com/Manual/CommandLineArguments.html')">
{{ t('dialog.launch_options.unity_manual') }} {{ t('dialog.launch_options.unity_manual') }}
</el-button> </Button>
<el-button type="primary" style="margin-left: auto" @click="updateLaunchOptions"> </div>
<Button @click="updateLaunchOptions">
{{ t('dialog.launch_options.save') }} {{ t('dialog.launch_options.save') }}
</el-button> </Button>
</div> </div>
</template> </template>
</el-dialog> </el-dialog>
@@ -55,6 +62,7 @@
<script setup> <script setup>
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 { toast } from 'vue-sonner'; import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';

5
src/views/Settings/dialogs/NotificationPositionDialog.vue
View File

@@ -78,15 +78,16 @@
<template #footer> <template #footer>
<div style="display: flex"> <div style="display: flex">
<el-button type="primary" style="margin-left: auto" @click="closeDialog"> <Button @click="closeDialog">
{{ t('dialog.notification_position.ok') }} {{ t('dialog.notification_position.ok') }}
</el-button> </Button>
</div> </div>
</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 { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';

6
src/views/Settings/dialogs/PrimaryPasswordDialog.vue
View File

@@ -25,20 +25,20 @@
show-password> show-password>
</el-input> </el-input>
<template #footer> <template #footer>
<el-button <Button
type="primary"
:disabled=" :disabled="
enablePrimaryPasswordDialog.password.length === 0 || enablePrimaryPasswordDialog.password.length === 0 ||
enablePrimaryPasswordDialog.password !== enablePrimaryPasswordDialog.rePassword enablePrimaryPasswordDialog.password !== enablePrimaryPasswordDialog.rePassword
" "
@click="handleSetPrimaryPassword()"> @click="handleSetPrimaryPassword()">
{{ t('dialog.primary_password.ok') }} {{ t('dialog.primary_password.ok') }}
</el-button> </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 { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';

24
src/views/Settings/dialogs/TranslationApiDialog.vue
View File

@@ -86,11 +86,9 @@
</template> </template>
<template #footer> <template #footer>
<div style="display: flex"> <div class="flex items-center justify-between">
<el-button v-if="form.translationApiType === 'openai'" @click="testOpenAiTranslation" plain> <Button
{{ t('dialog.translation_api.test') }} variant="outline"
</el-button>
<el-button
v-if="form.translationApiType === 'google'" v-if="form.translationApiType === 'google'"
@click=" @click="
openExternalLink( openExternalLink(
@@ -98,10 +96,19 @@
) )
"> ">
{{ t('dialog.translation_api.guide') }} {{ t('dialog.translation_api.guide') }}
</el-button> </Button>
<el-button type="primary" style="margin-left: auto" @click="saveTranslationApiConfig"> <div>
<Button
variant="secondary"
class="mr-2"
v-if="form.translationApiType === 'openai'"
@click="testOpenAiTranslation">
{{ t('dialog.translation_api.test') }}
</Button>
<Button style="margin-left: auto" @click="saveTranslationApiConfig">
{{ t('dialog.translation_api.save') }} {{ t('dialog.translation_api.save') }}
</el-button> </Button>
</div>
</div> </div>
</template> </template>
</el-dialog> </el-dialog>
@@ -110,6 +117,7 @@
<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 { reactive, watch } from 'vue'; import { reactive, 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';

11
src/views/Settings/dialogs/YouTubeApiDialog.vue
View File

@@ -17,19 +17,20 @@
</el-input> </el-input>
<template #footer> <template #footer>
<div style="display: flex"> <div class="flex items-center justify-between">
<el-button @click="openExternalLink('https://smashballoon.com/doc/youtube-api-key/')"> <Button variant="outline" @click="openExternalLink('https://smashballoon.com/doc/youtube-api-key/')">
{{ t('dialog.youtube_api.guide') }} {{ t('dialog.youtube_api.guide') }}
</el-button> </Button>
<el-button type="primary" style="margin-left: auto" @click="testYouTubeApiKey"> <Button style="margin-left: auto" @click="testYouTubeApiKey">
{{ t('dialog.youtube_api.save') }} {{ t('dialog.youtube_api.save') }}
</el-button> </Button>
</div> </div>
</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';

17
src/views/Sidebar/components/FriendItem.vue
View File

@@ -38,13 +38,13 @@
</template> </template>
<template v-else-if="!friend.ref && !isRefreshFriendsLoading"> <template v-else-if="!friend.ref && !isRefreshFriendsLoading">
<span>{{ friend.name || friend.id }}</span> <span>{{ friend.name || friend.id }}</span>
<el-button <Button
text size="sm"
:icon="Close" variant="ghost"
size="small" class="mr-1 w-6 h-6 text-xs"
style="margin-left: 5px" @click.stop="$emit('confirm-delete-friend', friend.id)"
@click.stop="$emit('confirm-delete-friend', friend.id)"> ><i class="ri-delete-bin-2-line"></i>
</el-button> </Button>
</template> </template>
<el-skeleton v-else animated class="skeleton" :throttle="100"> <el-skeleton v-else animated class="skeleton" :throttle="100">
@@ -62,7 +62,8 @@
</template> </template>
<script setup> <script setup>
import { Close, Loading, WarningFilled } from '@element-plus/icons-vue'; import { Loading, WarningFilled } 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';

7
src/views/Tools/dialogs/EditInviteMessageDialog.vue
View File

@@ -18,16 +18,15 @@
style="margin-top: 10px"></el-input> style="margin-top: 10px"></el-input>
</div> </div>
<template #footer> <template #footer>
<el-button @click="closeDialog">{{ t('dialog.edit_invite_message.cancel') }}</el-button> <Button variant="secondary" @click="closeDialog">{{ t('dialog.edit_invite_message.cancel') }}</Button>
<el-button type="primary" @click="saveEditInviteMessage">{{ <Button @click="saveEditInviteMessage">{{ t('dialog.edit_invite_message.save') }}</Button>
t('dialog.edit_invite_message.save')
}}</el-button>
</template> </template>
</el-dialog> </el-dialog>
</template> </template>
<script setup> <script setup>
import { ref, watch } from 'vue'; import { ref, watch } 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';