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

Add language selection dropdown to the login view

Browse Source
This commit is contained in:
pa
2026-02-12 21:42:14 +09:00
parent e643b6b5ad
commit 6b78bebae6
2 changed files with 65 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/components/dialogs/UserDialog/UserSummaryHeader.vue
View File

@@ -74,29 +74,22 @@
@click="copyUserDisplayName(currentUser.username)"></span>
</template>
</div>
<div style="margin-top: 5px" v-show="!userDialog.loading">
<div class="mt-2 flex items-center gap-1" v-show="!userDialog.loading">
<TooltipWrapper side="top" :content="t('dialog.user.tags.trust_level')">
<Badge
variant="outline"
class="name"
:class="userDialog.ref.$trustClass"
style="margin-right: 5px; margin-top: 5px">
<Shield class="mr-1 h-4 w-4 inline-block" /> {{ userDialog.ref.$trustLevel }}
<Badge variant="outline" class="name" :class="userDialog.ref.$trustClass">
<Shield class="h-4 w-4" /> {{ userDialog.ref.$trustLevel }}
</Badge>
</TooltipWrapper>
<TooltipWrapper
v-if="userDialog.ref.ageVerified && userDialog.ref.ageVerificationStatus"
side="top"
:content="t('dialog.user.tags.age_verified')">
<Badge
variant="outline"
class="x-tag-age-verification"
style="margin-right: 5px; margin-top: 5px">
<Badge variant="outline" class="x-tag-age-verification">
<template v-if="userDialog.ref.ageVerificationStatus === '18+'">
<IdCard class="mr-1 h-4 w-4 inline-block" /> 18+
<IdCard class="h-4 w-4" /> 18+
</template>
<template v-else>
<IdCard class="mr-1 h-4 w-4 inline-block" />
<IdCard class="h-4 w-4" />
</template>
</Badge>
</TooltipWrapper>
@@ -104,8 +97,8 @@
v-if="userDialog.isFriend && userDialog.friend"
side="top"
:content="t('dialog.user.tags.friend_number')">
<Badge variant="outline" class="x-tag-friend" style="margin-right: 5px; margin-top: 5px">
<UserPlus class="mr-1 h-4 w-4 inline-block" />
<Badge variant="outline" class="x-tag-friend">
<UserPlus class="h-4 w-4" />
{{ userDialog.ref.$friendNumber ? userDialog.ref.$friendNumber : '' }}
</Badge>
</TooltipWrapper>
@@ -113,11 +106,8 @@
v-if="userDialog.mutualFriendCount"
side="top"
:content="t('dialog.user.tags.mutual_friends')">
<Badge
variant="outline"
class="x-tag-mutual-friend border-zinc-500/50! dark:border-zinc-400!"
style="margin-right: 5px; margin-top: 5px">
<Users class="mr-1 h-4 w-4 inline-block" />
<Badge variant="outline" class="x-tag-mutual-friend border-zinc-500/50! dark:border-zinc-400!">
<Users class="h-4 w-4" />
{{ userDialog.mutualFriendCount }}
</Badge>
</TooltipWrapper>
@@ -128,60 +118,35 @@
<Badge
variant="outline"
class="x-tag-discord cursor-pointer"
style="margin-right: 5px; margin-top: 5px"
@click="openDiscordProfile(userDialog.ref.discordId)">
<i class="ri-discord-line mr-1 h-4 w-4 inline-block" style="height: 1em; width: 1em"></i>
<i class="ri-discord-line text-xs"></i>
{{ t('dialog.user.tags.discord') }}
</Badge>
</TooltipWrapper>
<Badge
v-if="userDialog.ref.$isTroll"
variant="outline"
class="x-tag-troll"
style="margin-right: 5px; margin-top: 5px">
Nuisance
</Badge>
<Badge
v-if="userDialog.ref.$isProbableTroll"
variant="outline"
class="x-tag-troll"
style="margin-right: 5px; margin-top: 5px">
<Badge v-if="userDialog.ref.$isTroll" variant="outline" class="x-tag-troll"> Nuisance </Badge>
<Badge v-if="userDialog.ref.$isProbableTroll" variant="outline" class="x-tag-troll">
Almost Nuisance
</Badge>
<Badge
v-if="userDialog.ref.$isModerator"
variant="outline"
class="x-tag-vip"
style="margin-right: 5px; margin-top: 5px">
<Badge v-if="userDialog.ref.$isModerator" variant="outline" class="x-tag-vip">
{{ t('dialog.user.tags.vrchat_team') }}
</Badge>
<TooltipWrapper v-if="userDialog.ref.$platform === 'standalonewindows'" side="top" content="PC">
<Badge variant="outline" class="x-tag-platform-pc" style="margin-right: 5px; margin-top: 5px">
<Monitor class="h-4 w-4 x-tag-platform-pc" />
<Badge variant="outline" class="x-tag-platform-pc">
<Monitor class="m-0.5 x-tag-platform-pc" />
</Badge>
</TooltipWrapper>
<TooltipWrapper v-else-if="userDialog.ref.$platform === 'android'" side="top" content="Android">
<Badge
variant="outline"
class="x-tag-platform-quest"
style="margin-right: 5px; margin-top: 5px">
<Smartphone class="h-4 w-4 x-tag-platform-quest" />
<Badge variant="outline" class="x-tag-platform-quest">
<Smartphone class="m-0.5 x-tag-platform-quest" />
</Badge>
</TooltipWrapper>
<TooltipWrapper v-else-if="userDialog.ref.$platform === 'ios'" side="top" content="iOS">
<Badge
variant="outline"
class="text-[#8e8e93] border-[#8e8e93]"
style="margin-right: 5px; margin-top: 5px">
<Apple class="h-4 w-4 text-[#8e8e93]" />
<Badge variant="outline" class="text-[#8e8e93] border-[#8e8e93]">
<Apple class="m-0.5 text-[#8e8e93]" />
</Badge>
</TooltipWrapper>
<Badge
v-else-if="userDialog.ref.$platform"
variant="outline"
class="x-tag-platform-other"
style="margin-right: 5px; margin-top: 5px">
<Badge v-else-if="userDialog.ref.$platform" variant="outline" class="x-tag-platform-other">
{{ userDialog.ref.$platform }}
</Badge>
@@ -193,10 +158,10 @@
color: userDialog.ref.$customTagColour,
'border-color': userDialog.ref.$customTagColour
}"
style="margin-right: 5px; margin-top: 5px"
>{{ userDialog.ref.$customTag }}</Badge
>
<br />
</div>
<div class="mt-1">
<TooltipWrapper v-for="badge in userDialog.ref.badges" :key="badge.badgeId" side="top">
<template #content>
<span>{{ badge.badgeName }}</span>
@@ -261,7 +226,7 @@
</div>
</TooltipWrapper>
</div>
<div style="margin-top: 5px">
<div>
<span style="font-size: 12px" v-text="userDialog.ref.statusDescription"></span>
</div>
</div>

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

@@ -3,14 +3,30 @@
<div style="position: absolute; top: 0; left: 0; margin: 5px">
<TooltipWrapper v-if="!noUpdater" side="top" :content="t('view.login.updater')">
<Button class="rounded-full mr-2 text-xs" size="icon-sm" variant="ghost" @click="showVRCXUpdateDialog"
><CircleArrowDown
><ArrowBigDownDash
/></Button>
</TooltipWrapper>
<TooltipWrapper side="top" :content="t('view.login.proxy_settings')">
<Button class="rounded-full text-xs" size="icon-sm" variant="ghost" @click="promptProxySettings"
><Route
<Button class="rounded-full mr-2 text-xs" size="icon-sm" variant="ghost" @click="promptProxySettings"
><Earth
/></Button>
</TooltipWrapper>
<DropdownMenu>
<DropdownMenuTrigger as-child>
<Button class="rounded-full text-xs" size="icon-sm" variant="ghost">
<Languages />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent class="max-h-80 overflow-y-auto text-xs">
<DropdownMenuCheckboxItem
v-for="language in languageCodes"
:key="language"
:model-value="appLanguage === language"
@select="changeAppLanguage(language)">
{{ getLanguageName(language) }}
</DropdownMenuCheckboxItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
<div class="x-login">
<div class="x-login-form-container">
@@ -60,11 +76,11 @@
</Field>
</VeeField>
</FieldGroup>
<label class="inline-flex items-center gap-2 mr-2">
<label class="inline-flex items-center gap-2 mr-2 text-sm">
<Checkbox v-model="loginForm.saveCredentials" />
<span>{{ t('view.login.field.saveCredentials') }}</span>
</label>
<label class="inline-flex items-center gap-2" style="margin-top: 10px">
<label class="inline-flex items-center gap-2 text-sm" style="margin-top: 10px">
<Checkbox v-model="enableCustomEndpoint" @update:modelValue="handleCustomEndpointToggle" />
<span>{{ t('view.login.field.devEndpoint') }}</span>
</label>
@@ -145,12 +161,11 @@
<span class="block truncate text-xs" v-text="user.loginParams.endpoint"></span>
</div>
<Button
class="rounded-full"
size="icon-sm"
variant="ghost"
style="margin-left: 10px"
class="cursor-pointer ml-2"
@click.stop="clickDeleteSavedLogin(user.user.id)"
><Trash2 class="h-3 w-3"
><Minus class="text-sm"
/></Button>
</div>
</div>
@@ -186,8 +201,14 @@
<script setup>
import { Field, FieldContent, FieldError, FieldGroup, FieldLabel } from '@/components/ui/field';
import { ArrowBigDownDash, Earth, Languages, Minus } from 'lucide-vue-next';
import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuTrigger
} from '@/components/ui/dropdown-menu';
import { onBeforeMount, onBeforeUnmount, ref, watch } from 'vue';
import { CircleArrowDown, Route, Trash2 } from 'lucide-vue-next';
import { Field as VeeField, useForm } from 'vee-validate';
import { useRoute, useRouter } from 'vue-router';
import { Button } from '@/components/ui/button';
@@ -198,7 +219,13 @@
import { useI18n } from 'vue-i18n';
import { z } from 'zod';
import { useAuthStore, useGeneralSettingsStore, useVRCXUpdaterStore } from '../../stores';
import {
useAppearanceSettingsStore,
useAuthStore,
useGeneralSettingsStore,
useVRCXUpdaterStore
} from '../../stores';
import { getLanguageName, languageCodes } from '../../localization';
import { openExternalLink, userImage } from '../../shared/utils';
import { AppDebug } from '../../service/appConfig';
import { watchState } from '../../service/watchState';
@@ -211,6 +238,10 @@
const { promptProxySettings } = useGeneralSettingsStore();
const { noUpdater } = storeToRefs(useVRCXUpdaterStore());
const appearanceSettingsStore = useAppearanceSettingsStore();
const { appLanguage } = storeToRefs(appearanceSettingsStore);
const { changeAppLanguage } = appearanceSettingsStore;
const { t } = useI18n();
const savedCredentials = ref({});