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

replace el-dropdown

Browse Source
This commit is contained in:
pa
2026-01-08 22:41:05 +09:00
committed by Natsumi
parent 3d37cebefc
commit 4eabeb11e0
21 changed files with 799 additions and 683 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/views/Settings/components/SimpleSwitch.vue
View File

@@ -34,6 +34,7 @@
.simple-switch {
font-size: 12px;
display: flex;
align-items: center;
}
.simple-switch > .name {
width: 225px;

63
src/views/Settings/components/Tabs/AppearanceTab.vue
View File

@@ -4,45 +4,33 @@
<span class="header">{{ t('view.settings.appearance.appearance.header') }}</span>
<div class="options-container-item">
<span class="name">{{ t('view.settings.appearance.appearance.language') }}</span>
<el-dropdown trigger="click" size="small" @click.stop>
<el-button size="small">
<span>
{{ getLanguageName(appLanguage) }} <el-icon class="el-icon--right"> <ArrowDown /></el-icon
></span>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item
v-for="language in languageCodes"
:key="language"
:class="{ 'is-active': appLanguage === language }"
@click="changeAppLanguage(language)"
v-text="getLanguageName(language)" />
</el-dropdown-menu>
</template>
</el-dropdown>
<Select :model-value="appLanguage" @update:modelValue="changeAppLanguage">
<SelectTrigger size="sm">
<SelectValue :placeholder="getLanguageName(appLanguage)" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem v-for="language in languageCodes" :key="language" :value="language">
{{ getLanguageName(language) }}
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div>
<div class="options-container-item">
<span class="name">{{ t('view.settings.appearance.appearance.theme_mode') }}</span>
<el-dropdown trigger="click" size="small" @click.stop>
<el-button size="small">
<span
>{{ t(`view.settings.appearance.appearance.theme_mode_${themeMode}`) }}
<el-icon class="el-icon--right"><ArrowDown /></el-icon
></span>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item
v-for="(config, themeKey) in THEME_CONFIG"
:key="themeKey"
@click="saveThemeMode(themeKey)"
:class="{ 'is-active': themeMode === themeKey }">
<Select :model-value="themeMode" @update:modelValue="saveThemeMode">
<SelectTrigger size="sm">
<SelectValue :placeholder="t(`view.settings.appearance.appearance.theme_mode_${themeMode}`)" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem v-for="(config, themeKey) in THEME_CONFIG" :key="themeKey" :value="themeKey">
{{ t(`view.settings.appearance.appearance.theme_mode_${themeKey}`) }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div>
<div v-if="!isLinux" class="options-container-item">
<span class="name">{{ t('view.settings.appearance.appearance.zoom') }}</span>
@@ -314,7 +302,7 @@
:label="t('view.settings.appearance.user_colors.random_colors_from_user_id')"
:value="randomUserColours"
@change="updateTrustColor('', '', true)"></simple-switch>
<div class="options-container-item">
<div>
<div>
<el-color-picker
:model-value="trustColor.untrusted"
@@ -384,8 +372,9 @@
</template>
<script setup>
import { ArrowDown, ArrowRight, Notebook } from '@element-plus/icons-vue';
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { computed, onBeforeUnmount, ref } from 'vue';
import { ArrowRight, Notebook } from '@element-plus/icons-vue';
import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';

49
src/views/Settings/components/Tabs/NotificationsTab.vue
View File

@@ -230,22 +230,21 @@
</div>
<div class="options-container-item">
<span class="name">{{ t('view.settings.notifications.notifications.text_to_speech.tts_voice') }}</span>
<el-dropdown trigger="click" size="small" @command="(voice) => changeTTSVoice(voice)">
<el-button size="small" :disabled="notificationTTS === 'Never'">
<span
>{{ getTTSVoiceName() }} <el-icon style="margin-left: 5px"><ArrowDown /></el-icon
></span>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item
v-for="(voice, index) in TTSvoices"
:key="index"
:command="index"
v-text="voice.name" />
</el-dropdown-menu>
</template>
</el-dropdown>
<Select
:model-value="ttsVoiceIndex"
:disabled="notificationTTS === 'Never'"
@update:modelValue="(v) => (ttsVoiceIndex = v)">
<SelectTrigger size="sm">
<SelectValue :placeholder="getTTSVoiceName()" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem v-for="(voice, index) in TTSvoices" :key="index" :value="index">
{{ voice.name }}
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div>
<simple-switch
:label="t('view.settings.notifications.notifications.text_to_speech.use_memo_nicknames')"
@@ -274,14 +273,15 @@
</template>
<script setup>
import { ArrowDown, ChatSquare, Rank, Timer, VideoPlay } from '@element-plus/icons-vue';
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 { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
import { useAdvancedSettingsStore, useNotificationsSettingsStore, useVrStore } from '../../../../stores';
import { Slider } from '../../../../components/ui/slider';
import { ToggleGroup, ToggleGroupItem } from '../../../../components/ui/toggle-group';
import { Slider } from '../../../../components/ui/slider';
import FeedFiltersDialog from '../../dialogs/FeedFiltersDialog.vue';
import NotificationPositionDialog from '../../dialogs/NotificationPositionDialog.vue';
@@ -345,6 +345,19 @@
}
});
const ttsVoiceIndex = computed({
get: () => {
const currentName = getTTSVoiceName();
const idx = TTSvoices.value.findIndex((v) => v?.name === currentName);
return idx >= 0 ? idx : null;
},
set: (value) => {
if (typeof value === 'number') {
changeTTSVoice(value);
}
}
});
function showNotyFeedFiltersDialog() {
feedFiltersDialogMode.value = 'noty';
}