mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-19 06:43:51 +02:00
replace el-button-group with ToggleGroup
This commit is contained in:
pa
Natsumi
@@ -9,65 +9,85 @@
|
||||
<el-tab-pane name="Normal" :label="t('dialog.new_instance.normal')">
|
||||
<el-form :model="newInstanceDialog" label-width="150px">
|
||||
<el-form-item :label="t('dialog.new_instance.access_type')">
|
||||
<el-radio-group v-model="newInstanceDialog.accessType" size="small" @change="buildInstance">
|
||||
<el-radio-button value="public">{{
|
||||
<ToggleGroup
|
||||
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')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button value="group">{{
|
||||
}}</ToggleGroupItem>
|
||||
<ToggleGroupItem value="group">{{
|
||||
t('dialog.new_instance.access_type_group')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button value="friends+">{{
|
||||
}}</ToggleGroupItem>
|
||||
<ToggleGroupItem value="friends+">{{
|
||||
t('dialog.new_instance.access_type_friend_plus')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button value="friends">{{
|
||||
}}</ToggleGroupItem>
|
||||
<ToggleGroupItem value="friends">{{
|
||||
t('dialog.new_instance.access_type_friend')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button value="invite+">{{
|
||||
}}</ToggleGroupItem>
|
||||
<ToggleGroupItem value="invite+">{{
|
||||
t('dialog.new_instance.access_type_invite_plus')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button value="invite">{{
|
||||
}}</ToggleGroupItem>
|
||||
<ToggleGroupItem value="invite">{{
|
||||
t('dialog.new_instance.access_type_invite')
|
||||
}}</el-radio-button>
|
||||
</el-radio-group>
|
||||
}}</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="newInstanceDialog.accessType === 'group'"
|
||||
:label="t('dialog.new_instance.group_access_type')">
|
||||
<el-radio-group
|
||||
v-model="newInstanceDialog.groupAccessType"
|
||||
size="small"
|
||||
@change="buildInstance">
|
||||
<el-radio-button
|
||||
<ToggleGroup
|
||||
type="single"
|
||||
required
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:model-value="newInstanceDialog.groupAccessType"
|
||||
@update:model-value="(value) => {
|
||||
newInstanceDialog.groupAccessType = value;
|
||||
buildInstance();
|
||||
}">
|
||||
<ToggleGroupItem
|
||||
value="members"
|
||||
:disabled="
|
||||
!hasGroupPermission(newInstanceDialog.groupRef, 'group-instance-open-create')
|
||||
"
|
||||
>{{ t('dialog.new_instance.group_access_type_members') }}</el-radio-button
|
||||
:disabled="!hasGroupPermission(newInstanceDialog.groupRef, 'group-instance-open-create')"
|
||||
>{{ t('dialog.new_instance.group_access_type_members') }}</ToggleGroupItem
|
||||
>
|
||||
<el-radio-button
|
||||
<ToggleGroupItem
|
||||
value="plus"
|
||||
:disabled="
|
||||
!hasGroupPermission(newInstanceDialog.groupRef, 'group-instance-plus-create')
|
||||
"
|
||||
>{{ t('dialog.new_instance.group_access_type_plus') }}</el-radio-button
|
||||
:disabled="!hasGroupPermission(newInstanceDialog.groupRef, 'group-instance-plus-create')"
|
||||
>{{ t('dialog.new_instance.group_access_type_plus') }}</ToggleGroupItem
|
||||
>
|
||||
<el-radio-button
|
||||
<ToggleGroupItem
|
||||
value="public"
|
||||
:disabled="
|
||||
!hasGroupPermission(newInstanceDialog.groupRef, 'group-instance-public-create') ||
|
||||
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 :label="t('dialog.new_instance.region')">
|
||||
<el-radio-group v-model="newInstanceDialog.region" size="small" @change="buildInstance">
|
||||
<el-radio-button value="US West">{{ t('dialog.new_instance.region_usw') }}</el-radio-button>
|
||||
<el-radio-button value="US East">{{ t('dialog.new_instance.region_use') }}</el-radio-button>
|
||||
<el-radio-button value="Europe">{{ t('dialog.new_instance.region_eu') }}</el-radio-button>
|
||||
<el-radio-button value="Japan">{{ t('dialog.new_instance.region_jp') }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
<ToggleGroup
|
||||
type="single"
|
||||
required
|
||||
variant="outline"
|
||||
size="sm"
|
||||
: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
|
||||
v-if="newInstanceDialog.accessType === 'group'"
|
||||
@@ -172,55 +192,76 @@
|
||||
<el-tab-pane name="Legacy" :label="t('dialog.new_instance.legacy')">
|
||||
<el-form :model="newInstanceDialog" label-width="150px">
|
||||
<el-form-item :label="t('dialog.new_instance.access_type')">
|
||||
<el-radio-group
|
||||
v-model="newInstanceDialog.accessType"
|
||||
size="small"
|
||||
@change="buildLegacyInstance">
|
||||
<el-radio-button value="public">{{
|
||||
<ToggleGroup
|
||||
type="single"
|
||||
required
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:model-value="newInstanceDialog.accessType"
|
||||
@update:model-value="(value) => {
|
||||
newInstanceDialog.accessType = value;
|
||||
buildLegacyInstance();
|
||||
}">
|
||||
<ToggleGroupItem value="public">{{
|
||||
t('dialog.new_instance.access_type_public')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button value="group">{{
|
||||
}}</ToggleGroupItem>
|
||||
<ToggleGroupItem value="group">{{
|
||||
t('dialog.new_instance.access_type_group')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button value="friends+">{{
|
||||
}}</ToggleGroupItem>
|
||||
<ToggleGroupItem value="friends+">{{
|
||||
t('dialog.new_instance.access_type_friend_plus')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button value="friends">{{
|
||||
}}</ToggleGroupItem>
|
||||
<ToggleGroupItem value="friends">{{
|
||||
t('dialog.new_instance.access_type_friend')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button value="invite+">{{
|
||||
}}</ToggleGroupItem>
|
||||
<ToggleGroupItem value="invite+">{{
|
||||
t('dialog.new_instance.access_type_invite_plus')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button value="invite">{{
|
||||
}}</ToggleGroupItem>
|
||||
<ToggleGroupItem value="invite">{{
|
||||
t('dialog.new_instance.access_type_invite')
|
||||
}}</el-radio-button>
|
||||
</el-radio-group>
|
||||
}}</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="newInstanceDialog.accessType === 'group'"
|
||||
:label="t('dialog.new_instance.group_access_type')">
|
||||
<el-radio-group
|
||||
v-model="newInstanceDialog.groupAccessType"
|
||||
size="small"
|
||||
@change="buildLegacyInstance">
|
||||
<el-radio-button value="members">{{
|
||||
<ToggleGroup
|
||||
type="single"
|
||||
required
|
||||
variant="outline"
|
||||
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')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button value="plus">{{
|
||||
}}</ToggleGroupItem>
|
||||
<ToggleGroupItem value="plus">{{
|
||||
t('dialog.new_instance.group_access_type_plus')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button value="public">{{
|
||||
}}</ToggleGroupItem>
|
||||
<ToggleGroupItem value="public">{{
|
||||
t('dialog.new_instance.group_access_type_public')
|
||||
}}</el-radio-button>
|
||||
</el-radio-group>
|
||||
}}</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('dialog.new_instance.region')">
|
||||
<el-radio-group v-model="newInstanceDialog.region" size="small" @change="buildLegacyInstance">
|
||||
<el-radio-button value="US West">{{ t('dialog.new_instance.region_usw') }}</el-radio-button>
|
||||
<el-radio-button value="US East">{{ t('dialog.new_instance.region_use') }}</el-radio-button>
|
||||
<el-radio-button value="Europe">{{ t('dialog.new_instance.region_eu') }}</el-radio-button>
|
||||
<el-radio-button value="Japan">{{ t('dialog.new_instance.region_jp') }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
<ToggleGroup
|
||||
type="single"
|
||||
required
|
||||
variant="outline"
|
||||
size="sm"
|
||||
: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
|
||||
v-if="newInstanceDialog.accessType === 'group'"
|
||||
@@ -483,6 +524,8 @@
|
||||
import { toast } from 'vue-sonner';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { ToggleGroup, ToggleGroupItem } from '../ui/toggle-group';
|
||||
|
||||
import {
|
||||
copyToClipboard,
|
||||
getLaunchURL,
|
||||
|
||||
57
src/components/ui/toggle-group/ToggleGroup.vue
Normal file
57
src/components/ui/toggle-group/ToggleGroup.vue
Normal 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>
|
||||
45
src/components/ui/toggle-group/ToggleGroupItem.vue
Normal file
45
src/components/ui/toggle-group/ToggleGroupItem.vue
Normal 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>
|
||||
2
src/components/ui/toggle-group/index.js
Normal file
2
src/components/ui/toggle-group/index.js
Normal file
@@ -0,0 +1,2 @@
|
||||
export { default as ToggleGroup } from './ToggleGroup.vue';
|
||||
export { default as ToggleGroupItem } from './ToggleGroupItem.vue';
|
||||
35
src/components/ui/toggle/Toggle.vue
Normal file
35
src/components/ui/toggle/Toggle.vue
Normal 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>
|
||||
25
src/components/ui/toggle/index.js
Normal file
25
src/components/ui/toggle/index.js
Normal 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'
|
||||
}
|
||||
}
|
||||
);
|
||||
@@ -12,24 +12,27 @@
|
||||
</div>
|
||||
<div class="options-container-item">
|
||||
<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"
|
||||
size="small"
|
||||
:disabled="!openVR || !photonEventOverlay"
|
||||
@change="
|
||||
@update:model-value="
|
||||
setPhotonEventOverlayFilter($event);
|
||||
saveEventOverlay();
|
||||
">
|
||||
<el-radio-button value="VIP">{{
|
||||
<ToggleGroupItem value="VIP">{{
|
||||
t('view.settings.advanced.photon.event_hud.filter_favorites')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button value="Friends">{{
|
||||
}}</ToggleGroupItem>
|
||||
<ToggleGroupItem value="Friends">{{
|
||||
t('view.settings.advanced.photon.event_hud.filter_friends')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button value="Everyone">{{
|
||||
}}</ToggleGroupItem>
|
||||
<ToggleGroupItem value="Everyone">{{
|
||||
t('view.settings.advanced.photon.event_hud.filter_everyone')
|
||||
}}</el-radio-button>
|
||||
</el-radio-group>
|
||||
}}</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
</div>
|
||||
<div class="options-container-item">
|
||||
<el-button size="small" :icon="Timer" :disabled="!openVR" @click="promptPhotonOverlayMessageTimeout">{{
|
||||
@@ -65,24 +68,27 @@
|
||||
@change="saveEventOverlay('VRCX_TimeoutHudOverlay')"></simple-switch>
|
||||
<div class="options-container-item">
|
||||
<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"
|
||||
size="small"
|
||||
:disabled="!openVR || !timeoutHudOverlay"
|
||||
@change="
|
||||
@update:model-value="
|
||||
setTimeoutHudOverlayFilter($event);
|
||||
saveEventOverlay();
|
||||
">
|
||||
<el-radio-button label="VIP">{{
|
||||
<ToggleGroupItem value="VIP">{{
|
||||
t('view.settings.advanced.photon.timeout_hud.filter_favorites')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button label="Friends">{{
|
||||
}}</ToggleGroupItem>
|
||||
<ToggleGroupItem value="Friends">{{
|
||||
t('view.settings.advanced.photon.timeout_hud.filter_friends')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button label="Everyone">{{
|
||||
}}</ToggleGroupItem>
|
||||
<ToggleGroupItem value="Everyone">{{
|
||||
t('view.settings.advanced.photon.timeout_hud.filter_everyone')
|
||||
}}</el-radio-button>
|
||||
</el-radio-group>
|
||||
}}</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
</div>
|
||||
<div class="options-container-item">
|
||||
<el-button size="small" :icon="Timer" :disabled="!openVR" @click="promptPhotonLobbyTimeoutThreshold">{{
|
||||
@@ -99,6 +105,7 @@
|
||||
|
||||
import { useNotificationsSettingsStore, usePhotonStore } from '../../../stores';
|
||||
import { photonEventTableTypeFilterList } from '../../../shared/constants/photon';
|
||||
import { ToggleGroup, ToggleGroupItem } from '../../../components/ui/toggle-group';
|
||||
|
||||
import SimpleSwitch from './SimpleSwitch.vue';
|
||||
|
||||
|
||||
@@ -45,21 +45,24 @@
|
||||
<div v-if="!noUpdater" class="options-container-item">
|
||||
<span class="name">{{ t('view.settings.general.vrcx_updater.update_action') }}</span>
|
||||
<br />
|
||||
<el-radio-group
|
||||
<ToggleGroup
|
||||
type="single"
|
||||
required
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:model-value="autoUpdateVRCX"
|
||||
size="small"
|
||||
style="margin-top: 5px"
|
||||
@change="setAutoUpdateVRCX">
|
||||
<el-radio-button value="Off">{{
|
||||
@update:model-value="setAutoUpdateVRCX">
|
||||
<ToggleGroupItem value="Off">{{
|
||||
t('view.settings.general.vrcx_updater.auto_update_off')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button value="Notify">{{
|
||||
}}</ToggleGroupItem>
|
||||
<ToggleGroupItem value="Notify">{{
|
||||
t('view.settings.general.vrcx_updater.auto_update_notify')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button value="Auto Download">{{
|
||||
}}</ToggleGroupItem>
|
||||
<ToggleGroupItem value="Auto Download">{{
|
||||
t('view.settings.general.vrcx_updater.auto_update_download')
|
||||
}}</el-radio-button>
|
||||
</el-radio-group>
|
||||
}}</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
</div>
|
||||
<div v-else class="options-container-item">
|
||||
<span>{{ t('view.settings.general.vrcx_updater.updater_disabled') }}</span>
|
||||
@@ -242,21 +245,24 @@
|
||||
</TooltipWrapper>
|
||||
</span>
|
||||
<br />
|
||||
<el-radio-group
|
||||
<ToggleGroup
|
||||
type="single"
|
||||
required
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:model-value="autoAcceptInviteRequests"
|
||||
size="small"
|
||||
style="margin-top: 5px"
|
||||
@change="setAutoAcceptInviteRequests">
|
||||
<el-radio-button value="Off">{{
|
||||
@update:model-value="setAutoAcceptInviteRequests">
|
||||
<ToggleGroupItem value="Off">{{
|
||||
t('view.settings.general.automation.auto_invite_request_accept_off')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button value="All Favorites">{{
|
||||
}}</ToggleGroupItem>
|
||||
<ToggleGroupItem value="All Favorites">{{
|
||||
t('view.settings.general.automation.auto_invite_request_accept_favs')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button value="Selected Favorites">{{
|
||||
}}</ToggleGroupItem>
|
||||
<ToggleGroupItem value="Selected Favorites">{{
|
||||
t('view.settings.general.automation.auto_invite_request_accept_selected_favs')
|
||||
}}</el-radio-button>
|
||||
</el-radio-group>
|
||||
}}</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
</div>
|
||||
</div>
|
||||
<div class="options-container">
|
||||
@@ -301,6 +307,8 @@
|
||||
import { links } from '../../../../shared/constants';
|
||||
import { openExternalLink } from '../../../../shared/utils';
|
||||
|
||||
import { ToggleGroup, ToggleGroupItem } from '../../../../components/ui/toggle-group';
|
||||
|
||||
import SimpleSwitch from '../SimpleSwitch.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
@@ -17,9 +17,12 @@
|
||||
t('view.settings.notifications.notifications.desktop_notifications.when_to_display')
|
||||
}}</span>
|
||||
<br />
|
||||
<el-radio-group
|
||||
<ToggleGroup
|
||||
type="single"
|
||||
required
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:model-value="overlayToast"
|
||||
size="small"
|
||||
:disabled="
|
||||
(!overlayNotifications || !openVR) &&
|
||||
!xsNotifications &&
|
||||
@@ -27,23 +30,23 @@
|
||||
!ovrtWristNotifications
|
||||
"
|
||||
style="margin-top: 5px"
|
||||
@change="
|
||||
@update:model-value="
|
||||
setOverlayToast($event);
|
||||
saveOpenVROption();
|
||||
">
|
||||
<el-radio-button value="Never">{{
|
||||
<ToggleGroupItem value="Never">{{
|
||||
t('view.settings.notifications.notifications.conditions.never')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button value="Game Running">{{
|
||||
}}</ToggleGroupItem>
|
||||
<ToggleGroupItem value="Game Running">{{
|
||||
t('view.settings.notifications.notifications.conditions.inside_vrchat')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button value="Game Closed">{{
|
||||
}}</ToggleGroupItem>
|
||||
<ToggleGroupItem value="Game Closed">{{
|
||||
t('view.settings.notifications.notifications.conditions.outside_vrchat')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button value="Always">{{
|
||||
}}</ToggleGroupItem>
|
||||
<ToggleGroupItem value="Always">{{
|
||||
t('view.settings.notifications.notifications.conditions.always')
|
||||
}}</el-radio-button>
|
||||
</el-radio-group>
|
||||
}}</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
</div>
|
||||
<simple-switch
|
||||
:label="t('view.settings.notifications.notifications.steamvr_notifications.steamvr_overlay')"
|
||||
@@ -155,33 +158,36 @@
|
||||
t('view.settings.notifications.notifications.desktop_notifications.when_to_display')
|
||||
}}</span>
|
||||
<br />
|
||||
<el-radio-group
|
||||
<ToggleGroup
|
||||
type="single"
|
||||
required
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:model-value="desktopToast"
|
||||
size="small"
|
||||
style="margin-top: 5px"
|
||||
@change="setDesktopToast(String($event))">
|
||||
<el-radio-button value="Never">{{
|
||||
@update:model-value="setDesktopToast(String($event))">
|
||||
<ToggleGroupItem value="Never">{{
|
||||
t('view.settings.notifications.notifications.conditions.never')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button value="Desktop Mode">{{
|
||||
}}</ToggleGroupItem>
|
||||
<ToggleGroupItem value="Desktop Mode">{{
|
||||
t('view.settings.notifications.notifications.conditions.desktop')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button value="Inside VR">{{
|
||||
}}</ToggleGroupItem>
|
||||
<ToggleGroupItem value="Inside VR">{{
|
||||
t('view.settings.notifications.notifications.conditions.inside_vr')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button value="Outside VR">{{
|
||||
}}</ToggleGroupItem>
|
||||
<ToggleGroupItem value="Outside VR">{{
|
||||
t('view.settings.notifications.notifications.conditions.outside_vr')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button value="Game Running">{{
|
||||
}}</ToggleGroupItem>
|
||||
<ToggleGroupItem value="Game Running">{{
|
||||
t('view.settings.notifications.notifications.conditions.inside_vrchat')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button value="Game Closed">{{
|
||||
}}</ToggleGroupItem>
|
||||
<ToggleGroupItem value="Game Closed">{{
|
||||
t('view.settings.notifications.notifications.conditions.outside_vrchat')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button value="Always">{{
|
||||
}}</ToggleGroupItem>
|
||||
<ToggleGroupItem value="Always">{{
|
||||
t('view.settings.notifications.notifications.conditions.always')
|
||||
}}</el-radio-button>
|
||||
</el-radio-group>
|
||||
}}</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
</div>
|
||||
<simple-switch
|
||||
:label="
|
||||
@@ -197,27 +203,30 @@
|
||||
t('view.settings.notifications.notifications.text_to_speech.when_to_play')
|
||||
}}</span>
|
||||
<br />
|
||||
<el-radio-group
|
||||
<ToggleGroup
|
||||
type="single"
|
||||
required
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:model-value="notificationTTS"
|
||||
size="small"
|
||||
style="margin-top: 5px"
|
||||
@change="saveNotificationTTS">
|
||||
<el-radio-button value="Never">{{
|
||||
@update:model-value="saveNotificationTTS">
|
||||
<ToggleGroupItem value="Never">{{
|
||||
t('view.settings.notifications.notifications.conditions.never')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button value="Inside VR">{{
|
||||
}}</ToggleGroupItem>
|
||||
<ToggleGroupItem value="Inside VR">{{
|
||||
t('view.settings.notifications.notifications.conditions.inside_vr')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button value="Game Running">{{
|
||||
}}</ToggleGroupItem>
|
||||
<ToggleGroupItem value="Game Running">{{
|
||||
t('view.settings.notifications.notifications.conditions.inside_vrchat')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button value="Game Closed">{{
|
||||
}}</ToggleGroupItem>
|
||||
<ToggleGroupItem value="Game Closed">{{
|
||||
t('view.settings.notifications.notifications.conditions.outside_vrchat')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button value="Always">{{
|
||||
}}</ToggleGroupItem>
|
||||
<ToggleGroupItem value="Always">{{
|
||||
t('view.settings.notifications.notifications.conditions.always')
|
||||
}}</el-radio-button>
|
||||
</el-radio-group>
|
||||
}}</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
</div>
|
||||
<div class="options-container-item">
|
||||
<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 { Slider } from '../../../../components/ui/slider';
|
||||
import { ToggleGroup, ToggleGroupItem } from '../../../../components/ui/toggle-group';
|
||||
|
||||
import FeedFiltersDialog from '../../dialogs/FeedFiltersDialog.vue';
|
||||
import NotificationPositionDialog from '../../dialogs/NotificationPositionDialog.vue';
|
||||
|
||||
@@ -73,23 +73,26 @@
|
||||
</div>
|
||||
<div class="options-container-item">
|
||||
<span class="name">{{ t('view.settings.wrist_overlay.steamvr_wrist_overlay.display_overlay_on') }}</span>
|
||||
<el-radio-group
|
||||
:model-value="overlayHand"
|
||||
size="small"
|
||||
@change="
|
||||
setOverlayHand($event);
|
||||
saveOpenVROption();
|
||||
">
|
||||
<el-radio-button value="1">{{
|
||||
t('view.settings.wrist_overlay.steamvr_wrist_overlay.display_overlay_on_left')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button value="2">{{
|
||||
t('view.settings.wrist_overlay.steamvr_wrist_overlay.display_overlay_on_right')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button value="0">{{
|
||||
t('view.settings.wrist_overlay.steamvr_wrist_overlay.display_overlay_on_both')
|
||||
}}</el-radio-button>
|
||||
</el-radio-group>
|
||||
<ToggleGroup
|
||||
type="single"
|
||||
required
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:model-value="overlayHand"
|
||||
@update:model-value="
|
||||
setOverlayHand($event);
|
||||
saveOpenVROption();
|
||||
">
|
||||
<ToggleGroupItem value="1">{{
|
||||
t('view.settings.wrist_overlay.steamvr_wrist_overlay.display_overlay_on_left')
|
||||
}}</ToggleGroupItem>
|
||||
<ToggleGroupItem value="2">{{
|
||||
t('view.settings.wrist_overlay.steamvr_wrist_overlay.display_overlay_on_right')
|
||||
}}</ToggleGroupItem>
|
||||
<ToggleGroupItem value="0">{{
|
||||
t('view.settings.wrist_overlay.steamvr_wrist_overlay.display_overlay_on_both')
|
||||
}}</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
</div>
|
||||
<simple-switch
|
||||
:label="t('view.settings.wrist_overlay.steamvr_wrist_overlay.grey_background')"
|
||||
@@ -148,6 +151,7 @@
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { useNotificationsSettingsStore, useVrStore, useWristOverlaySettingsStore } from '../../../stores';
|
||||
import { ToggleGroup, ToggleGroupItem } from '../../../components/ui/toggle-group';
|
||||
|
||||
import SimpleSwitch from './SimpleSwitch.vue';
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<el-dialog
|
||||
:model-value="!!feedFiltersDialogMode"
|
||||
:title="dialogTitle"
|
||||
width="550px"
|
||||
width="600px"
|
||||
destroy-on-close
|
||||
@close="handleDialogClose">
|
||||
<div class="toggle-list" style="height: 75vh; overflow-y: auto">
|
||||
@@ -19,14 +19,22 @@
|
||||
</TooltipWrapper>
|
||||
</span>
|
||||
|
||||
<el-radio-group
|
||||
v-model="currentSharedFeedFilters[setting.key]"
|
||||
size="small"
|
||||
@change="saveSharedFeedFilters">
|
||||
<el-radio-button v-for="option in setting.options" :key="option.label" :value="option.label">
|
||||
<ToggleGroup
|
||||
type="single"
|
||||
required
|
||||
variant="outline"
|
||||
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) }}
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
</div>
|
||||
|
||||
<template v-if="photonLoggingEnabled">
|
||||
@@ -36,14 +44,22 @@
|
||||
</div>
|
||||
<div v-for="setting in photonFeedFiltersOptions" :key="setting.key" class="toggle-item">
|
||||
<span class="toggle-name">{{ setting.name }}</span>
|
||||
<el-radio-group
|
||||
v-model="currentSharedFeedFilters[setting.key]"
|
||||
size="small"
|
||||
@change="saveSharedFeedFilters">
|
||||
<el-radio-button v-for="option in setting.options" :key="option.label" :value="option.label">
|
||||
<ToggleGroup
|
||||
type="single"
|
||||
required
|
||||
variant="outline"
|
||||
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) }}
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
@@ -64,6 +80,7 @@
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { useNotificationsSettingsStore, usePhotonStore, useSharedFeedStore } from '../../../stores';
|
||||
import { ToggleGroup, ToggleGroupItem } from '../../../components/ui/toggle-group';
|
||||
import { feedFiltersOptions, sharedFeedFiltersDefaults } from '../../../shared/constants';
|
||||
|
||||
import configRepository from '../../../service/config';
|
||||
@@ -130,3 +147,11 @@
|
||||
emit('update:feedFiltersDialogMode', '');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.toggle-list .toggle-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user