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

refactor auto change status dialog ui style

Browse Source
This commit is contained in:
pa
2026-02-12 14:50:45 +09:00
parent 8a4cc88e39
commit 30ecb00063
1 changed files with 153 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/views/Tools/dialogs/AutoChangeStatusDialog.vue
View File

@@ -5,20 +5,21 @@
<DialogTitle>{{ t('view.settings.general.automation.auto_change_status') }}</DialogTitle> <DialogTitle>{{ t('view.settings.general.automation.auto_change_status') }}</DialogTitle>
</DialogHeader> </DialogHeader>
<div class="grid gap-4"> <FieldGroup class="gap-4">
<SimpleSwitch <SimpleSwitch
:label="t('view.settings.general.automation.auto_change_status')" :label="t('view.settings.general.automation.auto_change_status')"
:value="autoStateChangeEnabled" :value="autoStateChangeEnabled"
:tooltip="t('view.settings.general.automation.auto_state_change_tooltip')" :tooltip="t('view.settings.general.automation.auto_state_change_tooltip')"
@change="setAutoStateChangeEnabled" /> @change="setAutoStateChangeEnabled" />
<div> <Field>
<span class="text-sm">{{ t('view.settings.general.automation.alone_status') }}</span> <FieldLabel>{{ t('view.settings.general.automation.alone_status') }}</FieldLabel>
<FieldContent>
<Select <Select
:model-value="autoStateChangeAloneStatus" :model-value="autoStateChangeAloneStatus"
:disabled="!autoStateChangeEnabled" :disabled="!autoStateChangeEnabled"
@update:modelValue="setAutoStateChangeAloneStatus"> @update:modelValue="setAutoStateChangeAloneStatus">
<SelectTrigger style="margin-top: 8px" size="sm"> <SelectTrigger size="sm">
<SelectValue /> <SelectValue />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@@ -38,7 +39,6 @@
</Select> </Select>
<SimpleSwitch <SimpleSwitch
style="margin-top: 8px"
:label="t('view.settings.general.automation.change_status_description')" :label="t('view.settings.general.automation.change_status_description')"
:value="autoStateChangeAloneDescEnabled" :value="autoStateChangeAloneDescEnabled"
:disabled="!autoStateChangeEnabled" :disabled="!autoStateChangeEnabled"
@@ -49,18 +49,19 @@
:disabled="!autoStateChangeEnabled" :disabled="!autoStateChangeEnabled"
:maxlength="32" :maxlength="32"
:placeholder="t('view.settings.general.automation.status_description_placeholder')" :placeholder="t('view.settings.general.automation.status_description_placeholder')"
style="margin-top: 8px"
size="sm" size="sm"
@update:modelValue="setAutoStateChangeAloneDesc" /> @update:modelValue="setAutoStateChangeAloneDesc" />
</div> </FieldContent>
</Field>
<div> <Field>
<span class="text-sm">{{ t('view.settings.general.automation.company_status') }}</span> <FieldLabel>{{ t('view.settings.general.automation.company_status') }}</FieldLabel>
<FieldContent>
<Select <Select
:model-value="autoStateChangeCompanyStatus" :model-value="autoStateChangeCompanyStatus"
:disabled="!autoStateChangeEnabled" :disabled="!autoStateChangeEnabled"
@update:modelValue="setAutoStateChangeCompanyStatus"> @update:modelValue="setAutoStateChangeCompanyStatus">
<SelectTrigger style="margin-top: 8px" size="sm"> <SelectTrigger size="sm">
<SelectValue /> <SelectValue />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@@ -80,7 +81,6 @@
</Select> </Select>
<SimpleSwitch <SimpleSwitch
style="margin-top: 8px"
:label="t('view.settings.general.automation.change_status_description')" :label="t('view.settings.general.automation.change_status_description')"
:value="autoStateChangeCompanyDescEnabled" :value="autoStateChangeCompanyDescEnabled"
:disabled="!autoStateChangeEnabled" :disabled="!autoStateChangeEnabled"
@@ -91,37 +91,42 @@
:disabled="!autoStateChangeEnabled" :disabled="!autoStateChangeEnabled"
:maxlength="32" :maxlength="32"
:placeholder="t('view.settings.general.automation.status_description_placeholder')" :placeholder="t('view.settings.general.automation.status_description_placeholder')"
style="margin-top: 8px"
size="sm" size="sm"
@update:modelValue="setAutoStateChangeCompanyDesc" /> @update:modelValue="setAutoStateChangeCompanyDesc" />
</div> </FieldContent>
</Field>
<div> <Field>
<span class="text-sm">{{ t('view.settings.general.automation.allowed_instance_types') }}</span> <FieldLabel>{{ t('view.settings.general.automation.allowed_instance_types') }}</FieldLabel>
<FieldContent>
<Select <Select
:model-value="autoStateChangeInstanceTypes" :model-value="autoStateChangeInstanceTypes"
:disabled="!autoStateChangeEnabled" :disabled="!autoStateChangeEnabled"
multiple multiple
@update:modelValue="setAutoStateChangeInstanceTypes"> @update:modelValue="setAutoStateChangeInstanceTypes">
<SelectTrigger style="margin-top: 8px" size="sm"> <SelectTrigger size="sm">
<SelectValue <SelectValue
:placeholder="t('view.settings.general.automation.instance_type_placeholder')" /> :placeholder="t('view.settings.general.automation.instance_type_placeholder')" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem v-for="instanceType in instanceTypes" :key="instanceType" :value="instanceType"> <SelectItem
v-for="instanceType in instanceTypes"
:key="instanceType"
:value="instanceType">
{{ instanceType }} {{ instanceType }}
</SelectItem> </SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
</div> </FieldContent>
</Field>
<div> <Field>
<span class="text-sm">{{ t('view.settings.general.automation.alone_condition') }}</span> <FieldLabel>{{ t('view.settings.general.automation.alone_condition') }}</FieldLabel>
<FieldContent>
<RadioGroup <RadioGroup
:model-value="autoStateChangeNoFriends ? 'true' : 'false'" :model-value="autoStateChangeNoFriends ? 'true' : 'false'"
:disabled="!autoStateChangeEnabled" :disabled="!autoStateChangeEnabled"
class="gap-2 flex" class="gap-2 flex"
style="margin-top: 8px"
@update:modelValue="handleAutoStateChangeNoFriendsRadio"> @update:modelValue="handleAutoStateChangeNoFriendsRadio">
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">
<RadioGroupItem id="autoStateChangeNoFriends-false" value="false" /> <RadioGroupItem id="autoStateChangeNoFriends-false" value="false" />
@@ -136,26 +141,25 @@
</label> </label>
</div> </div>
</RadioGroup> </RadioGroup>
</div> </FieldContent>
</Field>
<div> <Field>
<span class="text-sm" <FieldLabel>
>{{ t('view.settings.general.automation.auto_invite_request_accept') }} {{ t('view.settings.general.automation.auto_invite_request_accept') }}
<TooltipWrapper <TooltipWrapper
side="top" side="top"
style="margin-left: 5px"
:content="t('view.settings.general.automation.auto_invite_request_accept_tooltip')"> :content="t('view.settings.general.automation.auto_invite_request_accept_tooltip')">
<Info class="inline-block" /> <Info class="inline-block" />
</TooltipWrapper> </TooltipWrapper>
</span> </FieldLabel>
<br /> <FieldContent>
<ToggleGroup <ToggleGroup
type="single" type="single"
required required
variant="outline" variant="outline"
size="sm" size="sm"
:model-value="autoAcceptInviteRequests" :model-value="autoAcceptInviteRequests"
style="margin-top: 5px"
@update:model-value="setAutoAcceptInviteRequests"> @update:model-value="setAutoAcceptInviteRequests">
<ToggleGroupItem 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')
@@ -167,8 +171,9 @@
t('view.settings.general.automation.auto_invite_request_accept_selected_favs') t('view.settings.general.automation.auto_invite_request_accept_selected_favs')
}}</ToggleGroupItem> }}</ToggleGroupItem>
</ToggleGroup> </ToggleGroup>
</div> </FieldContent>
</div> </Field>
</FieldGroup>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
</template> </template>
@@ -176,6 +181,7 @@
<script setup> <script setup>
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'; import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Field, FieldContent, FieldGroup, FieldLabel } from '@/components/ui/field';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'; import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'; import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
import { Info } from 'lucide-vue-next'; import { Info } from 'lucide-vue-next';