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

replace el-button-group with ToggleGroup

Browse Source
This commit is contained in:
pa
2026-01-08 19:50:28 +09:00
committed by Natsumi
parent 9735073c7a
commit 914fea6ccf
11 changed files with 448 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/dialogs/NewInstanceDialog.vue
+114 -71
View File
@@ -9,65 +9,85 @@
<el-tab-pane name="Normal" :label="t('dialog.new_instance.normal')"> <el-tab-pane name="Normal" :label="t('dialog.new_instance.normal')">
<el-form :model="newInstanceDialog" label-width="150px"> <el-form :model="newInstanceDialog" label-width="150px">
<el-form-item :label="t('dialog.new_instance.access_type')"> <el-form-item :label="t('dialog.new_instance.access_type')">
<el-radio-group v-model="newInstanceDialog.accessType" size="small" @change="buildInstance"> <ToggleGroup
<el-radio-button value="public">{{ type="single"
required
variant="outline"
size="sm"
:model-value="newInstanceDialog.accessType"
@update:model-value="(value) => {
newInstanceDialog.accessType = value;
buildInstance();
}">
<ToggleGroupItem value="public">{{
t('dialog.new_instance.access_type_public') t('dialog.new_instance.access_type_public')
}}</el-radio-button> }}</ToggleGroupItem>
<el-radio-button value="group">{{ <ToggleGroupItem value="group">{{
t('dialog.new_instance.access_type_group') t('dialog.new_instance.access_type_group')
}}</el-radio-button> }}</ToggleGroupItem>
<el-radio-button value="friends+">{{ <ToggleGroupItem value="friends+">{{
t('dialog.new_instance.access_type_friend_plus') t('dialog.new_instance.access_type_friend_plus')
}}</el-radio-button> }}</ToggleGroupItem>
<el-radio-button value="friends">{{ <ToggleGroupItem value="friends">{{
t('dialog.new_instance.access_type_friend') t('dialog.new_instance.access_type_friend')
}}</el-radio-button> }}</ToggleGroupItem>
<el-radio-button value="invite+">{{ <ToggleGroupItem value="invite+">{{
t('dialog.new_instance.access_type_invite_plus') t('dialog.new_instance.access_type_invite_plus')
}}</el-radio-button> }}</ToggleGroupItem>
<el-radio-button value="invite">{{ <ToggleGroupItem value="invite">{{
t('dialog.new_instance.access_type_invite') t('dialog.new_instance.access_type_invite')
}}</el-radio-button> }}</ToggleGroupItem>
</el-radio-group> </ToggleGroup>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-if="newInstanceDialog.accessType === 'group'" v-if="newInstanceDialog.accessType === 'group'"
:label="t('dialog.new_instance.group_access_type')"> :label="t('dialog.new_instance.group_access_type')">
<el-radio-group <ToggleGroup
v-model="newInstanceDialog.groupAccessType" type="single"
size="small" required
@change="buildInstance"> variant="outline"
<el-radio-button size="sm"
:model-value="newInstanceDialog.groupAccessType"
@update:model-value="(value) => {
newInstanceDialog.groupAccessType = value;
buildInstance();
}">
<ToggleGroupItem
value="members" value="members"
:disabled=" :disabled="!hasGroupPermission(newInstanceDialog.groupRef, 'group-instance-open-create')"
!hasGroupPermission(newInstanceDialog.groupRef, 'group-instance-open-create') >{{ t('dialog.new_instance.group_access_type_members') }}</ToggleGroupItem
"
>{{ t('dialog.new_instance.group_access_type_members') }}</el-radio-button
> >
<el-radio-button <ToggleGroupItem
value="plus" value="plus"
:disabled=" :disabled="!hasGroupPermission(newInstanceDialog.groupRef, 'group-instance-plus-create')"
!hasGroupPermission(newInstanceDialog.groupRef, 'group-instance-plus-create') >{{ t('dialog.new_instance.group_access_type_plus') }}</ToggleGroupItem
"
>{{ t('dialog.new_instance.group_access_type_plus') }}</el-radio-button
> >
<el-radio-button <ToggleGroupItem
value="public" value="public"
:disabled=" :disabled="
!hasGroupPermission(newInstanceDialog.groupRef, 'group-instance-public-create') || !hasGroupPermission(newInstanceDialog.groupRef, 'group-instance-public-create') ||
newInstanceDialog.groupRef.privacy === 'private' newInstanceDialog.groupRef.privacy === 'private'
" "
>{{ t('dialog.new_instance.group_access_type_public') }}</el-radio-button >{{ t('dialog.new_instance.group_access_type_public') }}</ToggleGroupItem
> >
</el-radio-group> </ToggleGroup>
</el-form-item> </el-form-item>
<el-form-item :label="t('dialog.new_instance.region')"> <el-form-item :label="t('dialog.new_instance.region')">
<el-radio-group v-model="newInstanceDialog.region" size="small" @change="buildInstance"> <ToggleGroup
<el-radio-button value="US West">{{ t('dialog.new_instance.region_usw') }}</el-radio-button> type="single"
<el-radio-button value="US East">{{ t('dialog.new_instance.region_use') }}</el-radio-button> required
<el-radio-button value="Europe">{{ t('dialog.new_instance.region_eu') }}</el-radio-button> variant="outline"
<el-radio-button value="Japan">{{ t('dialog.new_instance.region_jp') }}</el-radio-button> size="sm"
</el-radio-group> :model-value="newInstanceDialog.region"
@update:model-value="(value) => {
newInstanceDialog.region = value;
buildInstance();
}">
<ToggleGroupItem value="US West">{{ t('dialog.new_instance.region_usw') }}</ToggleGroupItem>
<ToggleGroupItem value="US East">{{ t('dialog.new_instance.region_use') }}</ToggleGroupItem>
<ToggleGroupItem value="Europe">{{ t('dialog.new_instance.region_eu') }}</ToggleGroupItem>
<ToggleGroupItem value="Japan">{{ t('dialog.new_instance.region_jp') }}</ToggleGroupItem>
</ToggleGroup>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-if="newInstanceDialog.accessType === 'group'" v-if="newInstanceDialog.accessType === 'group'"
@@ -172,55 +192,76 @@
<el-tab-pane name="Legacy" :label="t('dialog.new_instance.legacy')"> <el-tab-pane name="Legacy" :label="t('dialog.new_instance.legacy')">
<el-form :model="newInstanceDialog" label-width="150px"> <el-form :model="newInstanceDialog" label-width="150px">
<el-form-item :label="t('dialog.new_instance.access_type')"> <el-form-item :label="t('dialog.new_instance.access_type')">
<el-radio-group <ToggleGroup
v-model="newInstanceDialog.accessType" type="single"
size="small" required
@change="buildLegacyInstance"> variant="outline"
<el-radio-button value="public">{{ size="sm"
:model-value="newInstanceDialog.accessType"
@update:model-value="(value) => {
newInstanceDialog.accessType = value;
buildLegacyInstance();
}">
<ToggleGroupItem value="public">{{
t('dialog.new_instance.access_type_public') t('dialog.new_instance.access_type_public')
}}</el-radio-button> }}</ToggleGroupItem>
<el-radio-button value="group">{{ <ToggleGroupItem value="group">{{
t('dialog.new_instance.access_type_group') t('dialog.new_instance.access_type_group')
}}</el-radio-button> }}</ToggleGroupItem>
<el-radio-button value="friends+">{{ <ToggleGroupItem value="friends+">{{
t('dialog.new_instance.access_type_friend_plus') t('dialog.new_instance.access_type_friend_plus')
}}</el-radio-button> }}</ToggleGroupItem>
<el-radio-button value="friends">{{ <ToggleGroupItem value="friends">{{
t('dialog.new_instance.access_type_friend') t('dialog.new_instance.access_type_friend')
}}</el-radio-button> }}</ToggleGroupItem>
<el-radio-button value="invite+">{{ <ToggleGroupItem value="invite+">{{
t('dialog.new_instance.access_type_invite_plus') t('dialog.new_instance.access_type_invite_plus')
}}</el-radio-button> }}</ToggleGroupItem>
<el-radio-button value="invite">{{ <ToggleGroupItem value="invite">{{
t('dialog.new_instance.access_type_invite') t('dialog.new_instance.access_type_invite')
}}</el-radio-button> }}</ToggleGroupItem>
</el-radio-group> </ToggleGroup>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-if="newInstanceDialog.accessType === 'group'" v-if="newInstanceDialog.accessType === 'group'"
:label="t('dialog.new_instance.group_access_type')"> :label="t('dialog.new_instance.group_access_type')">
<el-radio-group <ToggleGroup
v-model="newInstanceDialog.groupAccessType" type="single"
size="small" required
@change="buildLegacyInstance"> variant="outline"
<el-radio-button value="members">{{ size="sm"
:model-value="newInstanceDialog.groupAccessType"
@update:model-value="(value) => {
newInstanceDialog.groupAccessType = value;
buildLegacyInstance();
}">
<ToggleGroupItem value="members">{{
t('dialog.new_instance.group_access_type_members') t('dialog.new_instance.group_access_type_members')
}}</el-radio-button> }}</ToggleGroupItem>
<el-radio-button value="plus">{{ <ToggleGroupItem value="plus">{{
t('dialog.new_instance.group_access_type_plus') t('dialog.new_instance.group_access_type_plus')
}}</el-radio-button> }}</ToggleGroupItem>
<el-radio-button value="public">{{ <ToggleGroupItem value="public">{{
t('dialog.new_instance.group_access_type_public') t('dialog.new_instance.group_access_type_public')
}}</el-radio-button> }}</ToggleGroupItem>
</el-radio-group> </ToggleGroup>
</el-form-item> </el-form-item>
<el-form-item :label="t('dialog.new_instance.region')"> <el-form-item :label="t('dialog.new_instance.region')">
<el-radio-group v-model="newInstanceDialog.region" size="small" @change="buildLegacyInstance"> <ToggleGroup
<el-radio-button value="US West">{{ t('dialog.new_instance.region_usw') }}</el-radio-button> type="single"
<el-radio-button value="US East">{{ t('dialog.new_instance.region_use') }}</el-radio-button> required
<el-radio-button value="Europe">{{ t('dialog.new_instance.region_eu') }}</el-radio-button> variant="outline"
<el-radio-button value="Japan">{{ t('dialog.new_instance.region_jp') }}</el-radio-button> size="sm"
</el-radio-group> :model-value="newInstanceDialog.region"
@update:model-value="(value) => {
newInstanceDialog.region = value;
buildLegacyInstance();
}">
<ToggleGroupItem value="US West">{{ t('dialog.new_instance.region_usw') }}</ToggleGroupItem>
<ToggleGroupItem value="US East">{{ t('dialog.new_instance.region_use') }}</ToggleGroupItem>
<ToggleGroupItem value="Europe">{{ t('dialog.new_instance.region_eu') }}</ToggleGroupItem>
<ToggleGroupItem value="Japan">{{ t('dialog.new_instance.region_jp') }}</ToggleGroupItem>
</ToggleGroup>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-if="newInstanceDialog.accessType === 'group'" v-if="newInstanceDialog.accessType === 'group'"
@@ -483,6 +524,8 @@
import { toast } from 'vue-sonner'; import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { ToggleGroup, ToggleGroupItem } from '../ui/toggle-group';
import { import {
copyToClipboard, copyToClipboard,
getLaunchURL, getLaunchURL,
src/components/ui/toggle-group/ToggleGroup.vue
+57
View File
@@ -0,0 +1,57 @@
<script setup>
import { ToggleGroupRoot, useForwardPropsEmits } from 'reka-ui';
import { cn } from '@/lib/utils';
import { provide } from 'vue';
import { reactiveOmit } from '@vueuse/core';
const props = defineProps({
rovingFocus: { type: Boolean, required: false },
disabled: { type: Boolean, required: false },
orientation: { type: String, required: false },
dir: { type: String, required: false },
loop: { type: Boolean, required: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
name: { type: String, required: false },
required: { type: Boolean, required: false },
type: { type: String, required: false },
modelValue: { type: null, required: false },
defaultValue: { type: null, required: false },
class: { type: null, required: false },
variant: { type: null, required: false },
size: { type: null, required: false },
spacing: { type: Number, required: false, default: 0 }
});
const emits = defineEmits(['update:modelValue']);
provide('toggleGroup', {
variant: props.variant,
size: props.size,
spacing: props.spacing
});
const delegatedProps = reactiveOmit(props, 'class', 'size', 'variant');
const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script>
<template>
<ToggleGroupRoot
v-slot="slotProps"
data-slot="toggle-group"
:data-size="size"
:data-variant="variant"
:data-spacing="spacing"
:style="{
'--gap': spacing
}"
v-bind="forwarded"
:class="
cn(
'group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs',
props.class
)
">
<slot v-bind="slotProps" />
</ToggleGroupRoot>
</template>
src/components/ui/toggle-group/ToggleGroupItem.vue
+45
View File
@@ -0,0 +1,45 @@
<script setup>
import { ToggleGroupItem, useForwardProps } from 'reka-ui';
import { cn } from '@/lib/utils';
import { inject } from 'vue';
import { reactiveOmit } from '@vueuse/core';
import { toggleVariants } from '@/components/ui/toggle';
const props = defineProps({
value: { type: null, required: true },
disabled: { type: Boolean, required: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
class: { type: null, required: false },
variant: { type: null, required: false },
size: { type: null, required: false }
});
const context = inject('toggleGroup');
const delegatedProps = reactiveOmit(props, 'class', 'size', 'variant');
const forwardedProps = useForwardProps(delegatedProps);
</script>
<template>
<ToggleGroupItem
v-slot="slotProps"
data-slot="toggle-group-item"
:data-variant="context?.variant || variant"
:data-size="context?.size || size"
:data-spacing="context?.spacing"
v-bind="forwardedProps"
:class="
cn(
toggleVariants({
variant: context?.variant || variant,
size: context?.size || size
}),
'w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10',
'data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l',
props.class
)
">
<slot v-bind="slotProps" />
</ToggleGroupItem>
</template>
src/components/ui/toggle-group/index.js
+2
View File
@@ -0,0 +1,2 @@
export { default as ToggleGroup } from './ToggleGroup.vue';
export { default as ToggleGroupItem } from './ToggleGroupItem.vue';
src/components/ui/toggle/Toggle.vue
+35
View File
@@ -0,0 +1,35 @@
<script setup>
import { Toggle, useForwardPropsEmits } from 'reka-ui';
import { cn } from '@/lib/utils';
import { reactiveOmit } from '@vueuse/core';
import { toggleVariants } from '.';
const props = defineProps({
defaultValue: { type: Boolean, required: false },
modelValue: { type: [Boolean, null], required: false },
disabled: { type: Boolean, required: false, default: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
name: { type: String, required: false },
required: { type: Boolean, required: false },
class: { type: null, required: false },
variant: { type: null, required: false, default: 'default' },
size: { type: null, required: false, default: 'default' }
});
const emits = defineEmits(['update:modelValue']);
const delegatedProps = reactiveOmit(props, 'class', 'size', 'variant');
const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script>
<template>
<Toggle
v-slot="slotProps"
data-slot="toggle"
v-bind="forwarded"
:class="cn(toggleVariants({ variant, size }), props.class)">
<slot v-bind="slotProps" />
</Toggle>
</template>
src/components/ui/toggle/index.js
+25
View File
@@ -0,0 +1,25 @@
import { cva } from 'class-variance-authority';
export { default as Toggle } from './Toggle.vue';
export const toggleVariants = cva(
"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
{
variants: {
variant: {
default: 'bg-transparent',
outline:
'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground'
},
size: {
default: 'h-9 px-2 min-w-9',
sm: 'h-8 px-1.5 min-w-8',
lg: 'h-10 px-2.5 min-w-10'
}
},
defaultVariants: {
variant: 'default',
size: 'default'
}
}
);
src/views/Settings/components/PhotonSettings.vue
+27 -20
View File
@@ -12,24 +12,27 @@
</div> </div>
<div class="options-container-item"> <div class="options-container-item">
<span class="name">{{ t('view.settings.advanced.photon.event_hud.filter') }}</span> <span class="name">{{ t('view.settings.advanced.photon.event_hud.filter') }}</span>
<el-radio-group <ToggleGroup
type="single"
required
variant="outline"
size="sm"
:model-value="photonEventOverlayFilter" :model-value="photonEventOverlayFilter"
size="small"
:disabled="!openVR || !photonEventOverlay" :disabled="!openVR || !photonEventOverlay"
@change=" @update:model-value="
setPhotonEventOverlayFilter($event); setPhotonEventOverlayFilter($event);
saveEventOverlay(); saveEventOverlay();
"> ">
<el-radio-button value="VIP">{{ <ToggleGroupItem value="VIP">{{
t('view.settings.advanced.photon.event_hud.filter_favorites') t('view.settings.advanced.photon.event_hud.filter_favorites')
}}</el-radio-button> }}</ToggleGroupItem>
<el-radio-button value="Friends">{{ <ToggleGroupItem value="Friends">{{
t('view.settings.advanced.photon.event_hud.filter_friends') t('view.settings.advanced.photon.event_hud.filter_friends')
}}</el-radio-button> }}</ToggleGroupItem>
<el-radio-button value="Everyone">{{ <ToggleGroupItem value="Everyone">{{
t('view.settings.advanced.photon.event_hud.filter_everyone') t('view.settings.advanced.photon.event_hud.filter_everyone')
}}</el-radio-button> }}</ToggleGroupItem>
</el-radio-group> </ToggleGroup>
</div> </div>
<div class="options-container-item"> <div class="options-container-item">
<el-button size="small" :icon="Timer" :disabled="!openVR" @click="promptPhotonOverlayMessageTimeout">{{ <el-button size="small" :icon="Timer" :disabled="!openVR" @click="promptPhotonOverlayMessageTimeout">{{
@@ -65,24 +68,27 @@
@change="saveEventOverlay('VRCX_TimeoutHudOverlay')"></simple-switch> @change="saveEventOverlay('VRCX_TimeoutHudOverlay')"></simple-switch>
<div class="options-container-item"> <div class="options-container-item">
<span class="name">{{ t('view.settings.advanced.photon.timeout_hud.filter') }}</span> <span class="name">{{ t('view.settings.advanced.photon.timeout_hud.filter') }}</span>
<el-radio-group <ToggleGroup
type="single"
required
variant="outline"
size="sm"
:model-value="timeoutHudOverlayFilter" :model-value="timeoutHudOverlayFilter"
size="small"
:disabled="!openVR || !timeoutHudOverlay" :disabled="!openVR || !timeoutHudOverlay"
@change=" @update:model-value="
setTimeoutHudOverlayFilter($event); setTimeoutHudOverlayFilter($event);
saveEventOverlay(); saveEventOverlay();
"> ">
<el-radio-button label="VIP">{{ <ToggleGroupItem value="VIP">{{
t('view.settings.advanced.photon.timeout_hud.filter_favorites') t('view.settings.advanced.photon.timeout_hud.filter_favorites')
}}</el-radio-button> }}</ToggleGroupItem>
<el-radio-button label="Friends">{{ <ToggleGroupItem value="Friends">{{
t('view.settings.advanced.photon.timeout_hud.filter_friends') t('view.settings.advanced.photon.timeout_hud.filter_friends')
}}</el-radio-button> }}</ToggleGroupItem>
<el-radio-button label="Everyone">{{ <ToggleGroupItem value="Everyone">{{
t('view.settings.advanced.photon.timeout_hud.filter_everyone') t('view.settings.advanced.photon.timeout_hud.filter_everyone')
}}</el-radio-button> }}</ToggleGroupItem>
</el-radio-group> </ToggleGroup>
</div> </div>
<div class="options-container-item"> <div class="options-container-item">
<el-button size="small" :icon="Timer" :disabled="!openVR" @click="promptPhotonLobbyTimeoutThreshold">{{ <el-button size="small" :icon="Timer" :disabled="!openVR" @click="promptPhotonLobbyTimeoutThreshold">{{
@@ -99,6 +105,7 @@
import { useNotificationsSettingsStore, usePhotonStore } from '../../../stores'; import { useNotificationsSettingsStore, usePhotonStore } from '../../../stores';
import { photonEventTableTypeFilterList } from '../../../shared/constants/photon'; import { photonEventTableTypeFilterList } from '../../../shared/constants/photon';
import { ToggleGroup, ToggleGroupItem } from '../../../components/ui/toggle-group';
import SimpleSwitch from './SimpleSwitch.vue'; import SimpleSwitch from './SimpleSwitch.vue';
src/views/Settings/components/Tabs/GeneralTab.vue
+28 -20
View File
@@ -45,21 +45,24 @@
<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>
<br /> <br />
<el-radio-group <ToggleGroup
type="single"
required
variant="outline"
size="sm"
:model-value="autoUpdateVRCX" :model-value="autoUpdateVRCX"
size="small"
style="margin-top: 5px" style="margin-top: 5px"
@change="setAutoUpdateVRCX"> @update:model-value="setAutoUpdateVRCX">
<el-radio-button value="Off">{{ <ToggleGroupItem value="Off">{{
t('view.settings.general.vrcx_updater.auto_update_off') t('view.settings.general.vrcx_updater.auto_update_off')
}}</el-radio-button> }}</ToggleGroupItem>
<el-radio-button value="Notify">{{ <ToggleGroupItem value="Notify">{{
t('view.settings.general.vrcx_updater.auto_update_notify') t('view.settings.general.vrcx_updater.auto_update_notify')
}}</el-radio-button> }}</ToggleGroupItem>
<el-radio-button value="Auto Download">{{ <ToggleGroupItem value="Auto Download">{{
t('view.settings.general.vrcx_updater.auto_update_download') t('view.settings.general.vrcx_updater.auto_update_download')
}}</el-radio-button> }}</ToggleGroupItem>
</el-radio-group> </ToggleGroup>
</div> </div>
<div v-else class="options-container-item"> <div v-else class="options-container-item">
<span>{{ t('view.settings.general.vrcx_updater.updater_disabled') }}</span> <span>{{ t('view.settings.general.vrcx_updater.updater_disabled') }}</span>
@@ -242,21 +245,24 @@
</TooltipWrapper> </TooltipWrapper>
</span> </span>
<br /> <br />
<el-radio-group <ToggleGroup
type="single"
required
variant="outline"
size="sm"
:model-value="autoAcceptInviteRequests" :model-value="autoAcceptInviteRequests"
size="small"
style="margin-top: 5px" style="margin-top: 5px"
@change="setAutoAcceptInviteRequests"> @update:model-value="setAutoAcceptInviteRequests">
<el-radio-button value="Off">{{ <ToggleGroupItem value="Off">{{
t('view.settings.general.automation.auto_invite_request_accept_off') t('view.settings.general.automation.auto_invite_request_accept_off')
}}</el-radio-button> }}</ToggleGroupItem>
<el-radio-button value="All Favorites">{{ <ToggleGroupItem value="All Favorites">{{
t('view.settings.general.automation.auto_invite_request_accept_favs') t('view.settings.general.automation.auto_invite_request_accept_favs')
}}</el-radio-button> }}</ToggleGroupItem>
<el-radio-button value="Selected Favorites">{{ <ToggleGroupItem value="Selected Favorites">{{
t('view.settings.general.automation.auto_invite_request_accept_selected_favs') t('view.settings.general.automation.auto_invite_request_accept_selected_favs')
}}</el-radio-button> }}</ToggleGroupItem>
</el-radio-group> </ToggleGroup>
</div> </div>
</div> </div>
<div class="options-container"> <div class="options-container">
@@ -301,6 +307,8 @@
import { links } from '../../../../shared/constants'; import { links } from '../../../../shared/constants';
import { openExternalLink } from '../../../../shared/utils'; import { openExternalLink } from '../../../../shared/utils';
import { ToggleGroup, ToggleGroupItem } from '../../../../components/ui/toggle-group';
import SimpleSwitch from '../SimpleSwitch.vue'; import SimpleSwitch from '../SimpleSwitch.vue';
const { t } = useI18n(); const { t } = useI18n();
src/views/Settings/components/Tabs/NotificationsTab.vue
+54 -44
View File
@@ -17,9 +17,12 @@
t('view.settings.notifications.notifications.desktop_notifications.when_to_display') t('view.settings.notifications.notifications.desktop_notifications.when_to_display')
}}</span> }}</span>
<br /> <br />
<el-radio-group <ToggleGroup
type="single"
required
variant="outline"
size="sm"
:model-value="overlayToast" :model-value="overlayToast"
size="small"
:disabled=" :disabled="
(!overlayNotifications || !openVR) && (!overlayNotifications || !openVR) &&
!xsNotifications && !xsNotifications &&
@@ -27,23 +30,23 @@
!ovrtWristNotifications !ovrtWristNotifications
" "
style="margin-top: 5px" style="margin-top: 5px"
@change=" @update:model-value="
setOverlayToast($event); setOverlayToast($event);
saveOpenVROption(); saveOpenVROption();
"> ">
<el-radio-button value="Never">{{ <ToggleGroupItem value="Never">{{
t('view.settings.notifications.notifications.conditions.never') t('view.settings.notifications.notifications.conditions.never')
}}</el-radio-button> }}</ToggleGroupItem>
<el-radio-button value="Game Running">{{ <ToggleGroupItem value="Game Running">{{
t('view.settings.notifications.notifications.conditions.inside_vrchat') t('view.settings.notifications.notifications.conditions.inside_vrchat')
}}</el-radio-button> }}</ToggleGroupItem>
<el-radio-button value="Game Closed">{{ <ToggleGroupItem value="Game Closed">{{
t('view.settings.notifications.notifications.conditions.outside_vrchat') t('view.settings.notifications.notifications.conditions.outside_vrchat')
}}</el-radio-button> }}</ToggleGroupItem>
<el-radio-button value="Always">{{ <ToggleGroupItem value="Always">{{
t('view.settings.notifications.notifications.conditions.always') t('view.settings.notifications.notifications.conditions.always')
}}</el-radio-button> }}</ToggleGroupItem>
</el-radio-group> </ToggleGroup>
</div> </div>
<simple-switch <simple-switch
:label="t('view.settings.notifications.notifications.steamvr_notifications.steamvr_overlay')" :label="t('view.settings.notifications.notifications.steamvr_notifications.steamvr_overlay')"
@@ -155,33 +158,36 @@
t('view.settings.notifications.notifications.desktop_notifications.when_to_display') t('view.settings.notifications.notifications.desktop_notifications.when_to_display')
}}</span> }}</span>
<br /> <br />
<el-radio-group <ToggleGroup
type="single"
required
variant="outline"
size="sm"
:model-value="desktopToast" :model-value="desktopToast"
size="small"
style="margin-top: 5px" style="margin-top: 5px"
@change="setDesktopToast(String($event))"> @update:model-value="setDesktopToast(String($event))">
<el-radio-button value="Never">{{ <ToggleGroupItem value="Never">{{
t('view.settings.notifications.notifications.conditions.never') t('view.settings.notifications.notifications.conditions.never')
}}</el-radio-button> }}</ToggleGroupItem>
<el-radio-button value="Desktop Mode">{{ <ToggleGroupItem value="Desktop Mode">{{
t('view.settings.notifications.notifications.conditions.desktop') t('view.settings.notifications.notifications.conditions.desktop')
}}</el-radio-button> }}</ToggleGroupItem>
<el-radio-button value="Inside VR">{{ <ToggleGroupItem value="Inside VR">{{
t('view.settings.notifications.notifications.conditions.inside_vr') t('view.settings.notifications.notifications.conditions.inside_vr')
}}</el-radio-button> }}</ToggleGroupItem>
<el-radio-button value="Outside VR">{{ <ToggleGroupItem value="Outside VR">{{
t('view.settings.notifications.notifications.conditions.outside_vr') t('view.settings.notifications.notifications.conditions.outside_vr')
}}</el-radio-button> }}</ToggleGroupItem>
<el-radio-button value="Game Running">{{ <ToggleGroupItem value="Game Running">{{
t('view.settings.notifications.notifications.conditions.inside_vrchat') t('view.settings.notifications.notifications.conditions.inside_vrchat')
}}</el-radio-button> }}</ToggleGroupItem>
<el-radio-button value="Game Closed">{{ <ToggleGroupItem value="Game Closed">{{
t('view.settings.notifications.notifications.conditions.outside_vrchat') t('view.settings.notifications.notifications.conditions.outside_vrchat')
}}</el-radio-button> }}</ToggleGroupItem>
<el-radio-button value="Always">{{ <ToggleGroupItem value="Always">{{
t('view.settings.notifications.notifications.conditions.always') t('view.settings.notifications.notifications.conditions.always')
}}</el-radio-button> }}</ToggleGroupItem>
</el-radio-group> </ToggleGroup>
</div> </div>
<simple-switch <simple-switch
:label=" :label="
@@ -197,27 +203,30 @@
t('view.settings.notifications.notifications.text_to_speech.when_to_play') t('view.settings.notifications.notifications.text_to_speech.when_to_play')
}}</span> }}</span>
<br /> <br />
<el-radio-group <ToggleGroup
type="single"
required
variant="outline"
size="sm"
:model-value="notificationTTS" :model-value="notificationTTS"
size="small"
style="margin-top: 5px" style="margin-top: 5px"
@change="saveNotificationTTS"> @update:model-value="saveNotificationTTS">
<el-radio-button value="Never">{{ <ToggleGroupItem value="Never">{{
t('view.settings.notifications.notifications.conditions.never') t('view.settings.notifications.notifications.conditions.never')
}}</el-radio-button> }}</ToggleGroupItem>
<el-radio-button value="Inside VR">{{ <ToggleGroupItem value="Inside VR">{{
t('view.settings.notifications.notifications.conditions.inside_vr') t('view.settings.notifications.notifications.conditions.inside_vr')
}}</el-radio-button> }}</ToggleGroupItem>
<el-radio-button value="Game Running">{{ <ToggleGroupItem value="Game Running">{{
t('view.settings.notifications.notifications.conditions.inside_vrchat') t('view.settings.notifications.notifications.conditions.inside_vrchat')
}}</el-radio-button> }}</ToggleGroupItem>
<el-radio-button value="Game Closed">{{ <ToggleGroupItem value="Game Closed">{{
t('view.settings.notifications.notifications.conditions.outside_vrchat') t('view.settings.notifications.notifications.conditions.outside_vrchat')
}}</el-radio-button> }}</ToggleGroupItem>
<el-radio-button value="Always">{{ <ToggleGroupItem value="Always">{{
t('view.settings.notifications.notifications.conditions.always') t('view.settings.notifications.notifications.conditions.always')
}}</el-radio-button> }}</ToggleGroupItem>
</el-radio-group> </ToggleGroup>
</div> </div>
<div class="options-container-item"> <div class="options-container-item">
<span class="name">{{ t('view.settings.notifications.notifications.text_to_speech.tts_voice') }}</span> <span class="name">{{ t('view.settings.notifications.notifications.text_to_speech.tts_voice') }}</span>
@@ -272,6 +281,7 @@
import { useAdvancedSettingsStore, useNotificationsSettingsStore, useVrStore } from '../../../../stores'; import { useAdvancedSettingsStore, useNotificationsSettingsStore, useVrStore } from '../../../../stores';
import { Slider } from '../../../../components/ui/slider'; import { Slider } from '../../../../components/ui/slider';
import { ToggleGroup, ToggleGroupItem } from '../../../../components/ui/toggle-group';
import FeedFiltersDialog from '../../dialogs/FeedFiltersDialog.vue'; import FeedFiltersDialog from '../../dialogs/FeedFiltersDialog.vue';
import NotificationPositionDialog from '../../dialogs/NotificationPositionDialog.vue'; import NotificationPositionDialog from '../../dialogs/NotificationPositionDialog.vue';
src/views/Settings/components/WristOverlaySettings.vue
+21 -17
View File
@@ -73,23 +73,26 @@
</div> </div>
<div class="options-container-item"> <div class="options-container-item">
<span class="name">{{ t('view.settings.wrist_overlay.steamvr_wrist_overlay.display_overlay_on') }}</span> <span class="name">{{ t('view.settings.wrist_overlay.steamvr_wrist_overlay.display_overlay_on') }}</span>
<el-radio-group <ToggleGroup
:model-value="overlayHand" type="single"
size="small" required
@change=" variant="outline"
setOverlayHand($event); size="sm"
saveOpenVROption(); :model-value="overlayHand"
"> @update:model-value="
<el-radio-button value="1">{{ setOverlayHand($event);
t('view.settings.wrist_overlay.steamvr_wrist_overlay.display_overlay_on_left') saveOpenVROption();
}}</el-radio-button> ">
<el-radio-button value="2">{{ <ToggleGroupItem value="1">{{
t('view.settings.wrist_overlay.steamvr_wrist_overlay.display_overlay_on_right') t('view.settings.wrist_overlay.steamvr_wrist_overlay.display_overlay_on_left')
}}</el-radio-button> }}</ToggleGroupItem>
<el-radio-button value="0">{{ <ToggleGroupItem value="2">{{
t('view.settings.wrist_overlay.steamvr_wrist_overlay.display_overlay_on_both') t('view.settings.wrist_overlay.steamvr_wrist_overlay.display_overlay_on_right')
}}</el-radio-button> }}</ToggleGroupItem>
</el-radio-group> <ToggleGroupItem value="0">{{
t('view.settings.wrist_overlay.steamvr_wrist_overlay.display_overlay_on_both')
}}</ToggleGroupItem>
</ToggleGroup>
</div> </div>
<simple-switch <simple-switch
:label="t('view.settings.wrist_overlay.steamvr_wrist_overlay.grey_background')" :label="t('view.settings.wrist_overlay.steamvr_wrist_overlay.grey_background')"
@@ -148,6 +151,7 @@
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useNotificationsSettingsStore, useVrStore, useWristOverlaySettingsStore } from '../../../stores'; import { useNotificationsSettingsStore, useVrStore, useWristOverlaySettingsStore } from '../../../stores';
import { ToggleGroup, ToggleGroupItem } from '../../../components/ui/toggle-group';
import SimpleSwitch from './SimpleSwitch.vue'; import SimpleSwitch from './SimpleSwitch.vue';
src/views/Settings/dialogs/FeedFiltersDialog.vue
+40 -15
View File
@@ -2,7 +2,7 @@
<el-dialog <el-dialog
:model-value="!!feedFiltersDialogMode" :model-value="!!feedFiltersDialogMode"
:title="dialogTitle" :title="dialogTitle"
width="550px" width="600px"
destroy-on-close destroy-on-close
@close="handleDialogClose"> @close="handleDialogClose">
<div class="toggle-list" style="height: 75vh; overflow-y: auto"> <div class="toggle-list" style="height: 75vh; overflow-y: auto">
@@ -19,14 +19,22 @@
</TooltipWrapper> </TooltipWrapper>
</span> </span>
<el-radio-group <ToggleGroup
v-model="currentSharedFeedFilters[setting.key]" type="single"
size="small" required
@change="saveSharedFeedFilters"> variant="outline"
<el-radio-button v-for="option in setting.options" :key="option.label" :value="option.label"> size="sm"
:model-value="currentSharedFeedFilters[setting.key]"
@update:model-value="
(value) => {
currentSharedFeedFilters[setting.key] = value;
saveSharedFeedFilters();
}
">
<ToggleGroupItem v-for="option in setting.options" :key="option.label" :value="option.label">
{{ t(option.textKey) }} {{ t(option.textKey) }}
</el-radio-button> </ToggleGroupItem>
</el-radio-group> </ToggleGroup>
</div> </div>
<template v-if="photonLoggingEnabled"> <template v-if="photonLoggingEnabled">
@@ -36,14 +44,22 @@
</div> </div>
<div v-for="setting in photonFeedFiltersOptions" :key="setting.key" class="toggle-item"> <div v-for="setting in photonFeedFiltersOptions" :key="setting.key" class="toggle-item">
<span class="toggle-name">{{ setting.name }}</span> <span class="toggle-name">{{ setting.name }}</span>
<el-radio-group <ToggleGroup
v-model="currentSharedFeedFilters[setting.key]" type="single"
size="small" required
@change="saveSharedFeedFilters"> variant="outline"
<el-radio-button v-for="option in setting.options" :key="option.label" :value="option.label"> size="sm"
:model-value="currentSharedFeedFilters[setting.key]"
@update:model-value="
(value) => {
currentSharedFeedFilters[setting.key] = value;
saveSharedFeedFilters();
}
">
<ToggleGroupItem v-for="option in setting.options" :key="option.label" :value="option.label">
{{ t(option.textKey) }} {{ t(option.textKey) }}
</el-radio-button> </ToggleGroupItem>
</el-radio-group> </ToggleGroup>
</div> </div>
</template> </template>
</div> </div>
@@ -64,6 +80,7 @@
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useNotificationsSettingsStore, usePhotonStore, useSharedFeedStore } from '../../../stores'; import { useNotificationsSettingsStore, usePhotonStore, useSharedFeedStore } from '../../../stores';
import { ToggleGroup, ToggleGroupItem } from '../../../components/ui/toggle-group';
import { feedFiltersOptions, sharedFeedFiltersDefaults } from '../../../shared/constants'; import { feedFiltersOptions, sharedFeedFiltersDefaults } from '../../../shared/constants';
import configRepository from '../../../service/config'; import configRepository from '../../../service/config';
@@ -130,3 +147,11 @@
emit('update:feedFiltersDialogMode', ''); emit('update:feedFiltersDialogMode', '');
} }
</script> </script>
<style scoped>
.toggle-list .toggle-item {
display: flex;
align-items: center;
margin-bottom: 8px;
}
</style>