move Auto Change Status settings to a dialog in Tools view

This commit is contained in:
pa
2026-02-05 18:01:26 +09:00
parent 2d4d6816d3
commit cb0c241580
3 changed files with 234 additions and 160 deletions

View File

@@ -149,133 +149,6 @@
</Button>
</div>
</div>
<div class="options-container">
<span class="header">{{ t('view.settings.general.automation.header') }}</span>
<simple-switch
:label="t('view.settings.general.automation.auto_change_status')"
:value="autoStateChangeEnabled"
:tooltip="t('view.settings.general.automation.auto_state_change_tooltip')"
@change="setAutoStateChangeEnabled" />
<div class="options-container-item">
<span class="name">{{ t('view.settings.general.automation.alone_status') }}</span>
<Select
:model-value="autoStateChangeAloneStatus"
:disabled="!autoStateChangeEnabled"
@update:modelValue="setAutoStateChangeAloneStatus">
<SelectTrigger style="margin-top: 8px" size="sm">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="join me">
<i class="x-user-status joinme"></i> {{ t('dialog.user.status.join_me') }}
</SelectItem>
<SelectItem value="active">
<i class="x-user-status online"></i> {{ t('dialog.user.status.online') }}
</SelectItem>
<SelectItem value="ask me">
<i class="x-user-status askme"></i> {{ t('dialog.user.status.ask_me') }}
</SelectItem>
<SelectItem value="busy">
<i class="x-user-status busy"></i> {{ t('dialog.user.status.busy') }}
</SelectItem>
</SelectContent>
</Select>
</div>
<div class="options-container-item">
<span class="name">{{ t('view.settings.general.automation.company_status') }}</span>
<Select
:model-value="autoStateChangeCompanyStatus"
:disabled="!autoStateChangeEnabled"
@update:modelValue="setAutoStateChangeCompanyStatus">
<SelectTrigger style="margin-top: 8px" size="sm">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="join me">
<i class="x-user-status joinme"></i> {{ t('dialog.user.status.join_me') }}
</SelectItem>
<SelectItem value="active">
<i class="x-user-status online"></i> {{ t('dialog.user.status.online') }}
</SelectItem>
<SelectItem value="ask me">
<i class="x-user-status askme"></i> {{ t('dialog.user.status.ask_me') }}
</SelectItem>
<SelectItem value="busy">
<i class="x-user-status busy"></i> {{ t('dialog.user.status.busy') }}
</SelectItem>
</SelectContent>
</Select>
</div>
<div class="options-container-item">
<span class="name">{{ t('view.settings.general.automation.allowed_instance_types') }}</span>
<Select
:model-value="autoStateChangeInstanceTypes"
:disabled="!autoStateChangeEnabled"
multiple
@update:modelValue="setAutoStateChangeInstanceTypes">
<SelectTrigger style="margin-top: 8px" size="sm">
<SelectValue :placeholder="t('view.settings.general.automation.instance_type_placeholder')" />
</SelectTrigger>
<SelectContent>
<SelectItem v-for="instanceType in instanceTypes" :key="instanceType" :value="instanceType">
{{ instanceType }}
</SelectItem>
</SelectContent>
</Select>
</div>
<div class="options-container-item">
<span class="name">{{ t('view.settings.general.automation.alone_condition') }}</span>
<RadioGroup
:model-value="autoStateChangeNoFriends ? 'true' : 'false'"
:disabled="!autoStateChangeEnabled"
class="gap-2 flex"
style="margin-top: 8px"
@update:modelValue="handleAutoStateChangeNoFriendsRadio">
<div class="flex items-center space-x-2">
<RadioGroupItem id="autoStateChangeNoFriends-false" value="false" />
<label for="autoStateChangeNoFriends-false">
{{ t('view.settings.general.automation.alone') }}
</label>
</div>
<div class="flex items-center space-x-2">
<RadioGroupItem id="autoStateChangeNoFriends-true" value="true" />
<label for="autoStateChangeNoFriends-true">
{{ t('view.settings.general.automation.no_friends') }}
</label>
</div>
</RadioGroup>
</div>
<div class="options-container-item">
<span class="name"
>{{ t('view.settings.general.automation.auto_invite_request_accept') }}
<TooltipWrapper
side="top"
style="margin-left: 5px"
:content="t('view.settings.general.automation.auto_invite_request_accept_tooltip')">
<Info class="inline-block" />
</TooltipWrapper>
</span>
<br />
<ToggleGroup
type="single"
required
variant="outline"
size="sm"
:model-value="autoAcceptInviteRequests"
style="margin-top: 5px"
@update:model-value="setAutoAcceptInviteRequests">
<ToggleGroupItem value="Off">{{
t('view.settings.general.automation.auto_invite_request_accept_off')
}}</ToggleGroupItem>
<ToggleGroupItem value="All Favorites">{{
t('view.settings.general.automation.auto_invite_request_accept_favs')
}}</ToggleGroupItem>
<ToggleGroupItem value="Selected Favorites">{{
t('view.settings.general.automation.auto_invite_request_accept_selected_favs')
}}</ToggleGroupItem>
</ToggleGroup>
</div>
</div>
<div class="options-container">
<span class="header">{{ t('view.settings.general.contributors.header') }}</span>
<div class="options-container-item">
@@ -313,13 +186,11 @@
<script setup>
import { computed, defineAsyncComponent, ref } from 'vue';
import { Button } from '@/components/ui/button';
import { Info } from 'lucide-vue-next';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../../../components/ui/select';
import { useFavoriteStore, useGeneralSettingsStore, useVRCXUpdaterStore } from '../../../../stores';
import { RadioGroup, RadioGroupItem } from '../../../../components/ui/radio-group';
import { ToggleGroup, ToggleGroupItem } from '../../../../components/ui/toggle-group';
import { links } from '../../../../shared/constants';
import { openExternalLink } from '../../../../shared/utils';
@@ -342,13 +213,7 @@
udonExceptionLogging,
logResourceLoad,
logEmptyAvatars,
autoLoginDelayEnabled,
autoStateChangeEnabled,
autoStateChangeAloneStatus,
autoStateChangeCompanyStatus,
autoStateChangeInstanceTypes,
autoStateChangeNoFriends,
autoAcceptInviteRequests
autoLoginDelayEnabled
} = storeToRefs(generalSettingsStore);
const {
@@ -362,12 +227,6 @@
setLogEmptyAvatars,
setAutoLoginDelayEnabled,
promptAutoLoginDelaySeconds,
setAutoStateChangeEnabled,
setAutoStateChangeAloneStatus,
setAutoStateChangeCompanyStatus,
setAutoStateChangeInstanceTypes,
setAutoStateChangeNoFriends,
setAutoAcceptInviteRequests,
setLocalFavoriteFriendsGroups,
promptProxySettings
} = generalSettingsStore;
@@ -377,17 +236,6 @@
const { appVersion, autoUpdateVRCX, latestAppVersion, noUpdater } = storeToRefs(vrcxUpdaterStore);
const { setAutoUpdateVRCX, checkForVRCXUpdate, showVRCXUpdateDialog, showChangeLogDialog } = vrcxUpdaterStore;
const instanceTypes = ref([
'invite',
'invite+',
'friends',
'friends+',
'public',
'groupPublic',
'groupPlus',
'groupOnly'
]);
const ossDialog = ref(false);
const isLinux = computed(() => LINUX);
const isMacOS = computed(() => {
@@ -401,11 +249,4 @@
function openOSSDialog() {
ossDialog.value = true;
}
function handleAutoStateChangeNoFriendsRadio(value) {
const nextValue = value === 'true';
if (nextValue !== autoStateChangeNoFriends.value) {
setAutoStateChangeNoFriends();
}
}
</script>

View File

@@ -170,6 +170,21 @@
</div>
</div>
</Card>
<Card class="tool-card p-0 gap-0">
<div class="tool-content" @click="showAutoChangeStatusDialog">
<div class="tool-icon text-2xl">
<Settings />
</div>
<div class="tool-info">
<div class="tool-name">
{{ t('view.settings.general.automation.auto_change_status') }}
</div>
<div class="tool-description">
{{ t('view.settings.general.automation.auto_state_change_tooltip') }}
</div>
</div>
</div>
</Card>
</div>
</div>
@@ -301,6 +316,9 @@
v-model:isEditInviteMessagesDialogVisible="isEditInviteMessagesDialogVisible"
@close="isEditInviteMessagesDialogVisible = false" />
<RegistryBackupDialog />
<AutoChangeStatusDialog
:isAutoChangeStatusDialogVisible="isAutoChangeStatusDialogVisible"
@close="isAutoChangeStatusDialogVisible = false" />
</template>
</div>
</template>
@@ -331,6 +349,8 @@
import { useLaunchStore } from '../../stores/launch';
import { useVrcxStore } from '../../stores/vrcx';
import AutoChangeStatusDialog from './dialogs/AutoChangeStatusDialog.vue';
const GroupCalendarDialog = defineAsyncComponent(() => import('./dialogs/GroupCalendarDialog.vue'));
const NoteExportDialog = defineAsyncComponent(() => import('./dialogs/NoteExportDialog.vue'));
const EditInviteMessageDialog = defineAsyncComponent(() => import('./dialogs/EditInviteMessagesDialog.vue'));
@@ -364,6 +384,7 @@
const isExportFriendsListDialogVisible = ref(false);
const isExportAvatarsListDialogVisible = ref(false);
const isEditInviteMessagesDialogVisible = ref(false);
const isAutoChangeStatusDialogVisible = ref(false);
const isToolsTabVisible = computed(() => route.name === 'tools');
const showGroupCalendarDialog = () => {
@@ -386,6 +407,10 @@
isEditInviteMessagesDialogVisible.value = true;
};
const showAutoChangeStatusDialog = () => {
isAutoChangeStatusDialogVisible.value = true;
};
function showExportDiscordNamesDialog() {
isExportDiscordNamesDialogVisible.value = true;
}

View File

@@ -0,0 +1,208 @@
<template>
<Dialog :open="isAutoChangeStatusDialogVisible" @update:open="(open) => !open && closeDialog()">
<DialogContent class="sm:max-w-xl">
<DialogHeader>
<DialogTitle>{{ t('view.settings.general.automation.auto_change_status') }}</DialogTitle>
</DialogHeader>
<div class="grid gap-4">
<SimpleSwitch
:label="t('view.settings.general.automation.auto_change_status')"
:value="autoStateChangeEnabled"
:tooltip="t('view.settings.general.automation.auto_state_change_tooltip')"
@change="setAutoStateChangeEnabled" />
<div>
<span class="text-sm">{{ t('view.settings.general.automation.alone_status') }}</span>
<Select
:model-value="autoStateChangeAloneStatus"
:disabled="!autoStateChangeEnabled"
@update:modelValue="setAutoStateChangeAloneStatus">
<SelectTrigger style="margin-top: 8px" size="sm">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="join me">
<i class="x-user-status joinme"></i> {{ t('dialog.user.status.join_me') }}
</SelectItem>
<SelectItem value="active">
<i class="x-user-status online"></i> {{ t('dialog.user.status.online') }}
</SelectItem>
<SelectItem value="ask me">
<i class="x-user-status askme"></i> {{ t('dialog.user.status.ask_me') }}
</SelectItem>
<SelectItem value="busy">
<i class="x-user-status busy"></i> {{ t('dialog.user.status.busy') }}
</SelectItem>
</SelectContent>
</Select>
</div>
<div>
<span class="text-sm">{{ t('view.settings.general.automation.company_status') }}</span>
<Select
:model-value="autoStateChangeCompanyStatus"
:disabled="!autoStateChangeEnabled"
@update:modelValue="setAutoStateChangeCompanyStatus">
<SelectTrigger style="margin-top: 8px" size="sm">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="join me">
<i class="x-user-status joinme"></i> {{ t('dialog.user.status.join_me') }}
</SelectItem>
<SelectItem value="active">
<i class="x-user-status online"></i> {{ t('dialog.user.status.online') }}
</SelectItem>
<SelectItem value="ask me">
<i class="x-user-status askme"></i> {{ t('dialog.user.status.ask_me') }}
</SelectItem>
<SelectItem value="busy">
<i class="x-user-status busy"></i> {{ t('dialog.user.status.busy') }}
</SelectItem>
</SelectContent>
</Select>
</div>
<div>
<span class="text-sm">{{ t('view.settings.general.automation.allowed_instance_types') }}</span>
<Select
:model-value="autoStateChangeInstanceTypes"
:disabled="!autoStateChangeEnabled"
multiple
@update:modelValue="setAutoStateChangeInstanceTypes">
<SelectTrigger style="margin-top: 8px" size="sm">
<SelectValue
:placeholder="t('view.settings.general.automation.instance_type_placeholder')" />
</SelectTrigger>
<SelectContent>
<SelectItem v-for="instanceType in instanceTypes" :key="instanceType" :value="instanceType">
{{ instanceType }}
</SelectItem>
</SelectContent>
</Select>
</div>
<div>
<span class="text-sm">{{ t('view.settings.general.automation.alone_condition') }}</span>
<RadioGroup
:model-value="autoStateChangeNoFriends ? 'true' : 'false'"
:disabled="!autoStateChangeEnabled"
class="gap-2 flex"
style="margin-top: 8px"
@update:modelValue="handleAutoStateChangeNoFriendsRadio">
<div class="flex items-center space-x-2">
<RadioGroupItem id="autoStateChangeNoFriends-false" value="false" />
<label for="autoStateChangeNoFriends-false">
{{ t('view.settings.general.automation.alone') }}
</label>
</div>
<div class="flex items-center space-x-2">
<RadioGroupItem id="autoStateChangeNoFriends-true" value="true" />
<label for="autoStateChangeNoFriends-true">
{{ t('view.settings.general.automation.no_friends') }}
</label>
</div>
</RadioGroup>
</div>
<div>
<span class="text-sm"
>{{ t('view.settings.general.automation.auto_invite_request_accept') }}
<TooltipWrapper
side="top"
style="margin-left: 5px"
:content="t('view.settings.general.automation.auto_invite_request_accept_tooltip')">
<Info class="inline-block" />
</TooltipWrapper>
</span>
<br />
<ToggleGroup
type="single"
required
variant="outline"
size="sm"
:model-value="autoAcceptInviteRequests"
style="margin-top: 5px"
@update:model-value="setAutoAcceptInviteRequests">
<ToggleGroupItem value="Off">{{
t('view.settings.general.automation.auto_invite_request_accept_off')
}}</ToggleGroupItem>
<ToggleGroupItem value="All Favorites">{{
t('view.settings.general.automation.auto_invite_request_accept_favs')
}}</ToggleGroupItem>
<ToggleGroupItem value="Selected Favorites">{{
t('view.settings.general.automation.auto_invite_request_accept_selected_favs')
}}</ToggleGroupItem>
</ToggleGroup>
</div>
</div>
</DialogContent>
</Dialog>
</template>
<script setup>
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
import { Info } from 'lucide-vue-next';
import { computed } from 'vue';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
import { useGeneralSettingsStore } from '../../../stores';
import SimpleSwitch from '../../Settings/components/SimpleSwitch.vue';
defineProps({
isAutoChangeStatusDialogVisible: {
type: Boolean
}
});
const emit = defineEmits(['close']);
const { t } = useI18n();
const generalSettingsStore = useGeneralSettingsStore();
const {
autoStateChangeEnabled,
autoStateChangeAloneStatus,
autoStateChangeCompanyStatus,
autoStateChangeInstanceTypes,
autoStateChangeNoFriends,
autoAcceptInviteRequests
} = storeToRefs(generalSettingsStore);
const {
setAutoStateChangeEnabled,
setAutoStateChangeAloneStatus,
setAutoStateChangeCompanyStatus,
setAutoStateChangeInstanceTypes,
setAutoStateChangeNoFriends,
setAutoAcceptInviteRequests
} = generalSettingsStore;
const instanceTypes = computed(() => [
'invite',
'invite+',
'friends',
'friends+',
'public',
'groupPublic',
'groupPlus',
'groupOnly'
]);
function handleAutoStateChangeNoFriendsRadio(value) {
const nextValue = value === 'true';
if (nextValue !== autoStateChangeNoFriends.value) {
setAutoStateChangeNoFriends();
}
}
function closeDialog() {
emit('close');
}
</script>