mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-24 17:23:50 +02:00
refactor auto change status dialog ui style
This commit is contained in:
pa
@@ -5,170 +5,175 @@
|
|||||||
<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>
|
||||||
<Select
|
<FieldContent>
|
||||||
:model-value="autoStateChangeAloneStatus"
|
<Select
|
||||||
:disabled="!autoStateChangeEnabled"
|
:model-value="autoStateChangeAloneStatus"
|
||||||
@update:modelValue="setAutoStateChangeAloneStatus">
|
:disabled="!autoStateChangeEnabled"
|
||||||
<SelectTrigger style="margin-top: 8px" size="sm">
|
@update:modelValue="setAutoStateChangeAloneStatus">
|
||||||
<SelectValue />
|
<SelectTrigger size="sm">
|
||||||
</SelectTrigger>
|
<SelectValue />
|
||||||
<SelectContent>
|
</SelectTrigger>
|
||||||
<SelectItem value="join me">
|
<SelectContent>
|
||||||
<i class="x-user-status joinme"></i> {{ t('dialog.user.status.join_me') }}
|
<SelectItem value="join me">
|
||||||
</SelectItem>
|
<i class="x-user-status joinme"></i> {{ t('dialog.user.status.join_me') }}
|
||||||
<SelectItem value="active">
|
</SelectItem>
|
||||||
<i class="x-user-status online"></i> {{ t('dialog.user.status.online') }}
|
<SelectItem value="active">
|
||||||
</SelectItem>
|
<i class="x-user-status online"></i> {{ t('dialog.user.status.online') }}
|
||||||
<SelectItem value="ask me">
|
</SelectItem>
|
||||||
<i class="x-user-status askme"></i> {{ t('dialog.user.status.ask_me') }}
|
<SelectItem value="ask me">
|
||||||
</SelectItem>
|
<i class="x-user-status askme"></i> {{ t('dialog.user.status.ask_me') }}
|
||||||
<SelectItem value="busy">
|
</SelectItem>
|
||||||
<i class="x-user-status busy"></i> {{ t('dialog.user.status.busy') }}
|
<SelectItem value="busy">
|
||||||
</SelectItem>
|
<i class="x-user-status busy"></i> {{ t('dialog.user.status.busy') }}
|
||||||
</SelectContent>
|
</SelectItem>
|
||||||
</Select>
|
</SelectContent>
|
||||||
|
</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"
|
@change="setAutoStateChangeAloneDescEnabled" />
|
||||||
@change="setAutoStateChangeAloneDescEnabled" />
|
<Input
|
||||||
<Input
|
v-if="autoStateChangeAloneDescEnabled"
|
||||||
v-if="autoStateChangeAloneDescEnabled"
|
:model-value="autoStateChangeAloneDesc"
|
||||||
:model-value="autoStateChangeAloneDesc"
|
: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')"
|
size="sm"
|
||||||
style="margin-top: 8px"
|
@update:modelValue="setAutoStateChangeAloneDesc" />
|
||||||
size="sm"
|
</FieldContent>
|
||||||
@update:modelValue="setAutoStateChangeAloneDesc" />
|
</Field>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
<Field>
|
||||||
<span class="text-sm">{{ t('view.settings.general.automation.company_status') }}</span>
|
<FieldLabel>{{ t('view.settings.general.automation.company_status') }}</FieldLabel>
|
||||||
<Select
|
<FieldContent>
|
||||||
:model-value="autoStateChangeCompanyStatus"
|
<Select
|
||||||
:disabled="!autoStateChangeEnabled"
|
:model-value="autoStateChangeCompanyStatus"
|
||||||
@update:modelValue="setAutoStateChangeCompanyStatus">
|
:disabled="!autoStateChangeEnabled"
|
||||||
<SelectTrigger style="margin-top: 8px" size="sm">
|
@update:modelValue="setAutoStateChangeCompanyStatus">
|
||||||
<SelectValue />
|
<SelectTrigger size="sm">
|
||||||
</SelectTrigger>
|
<SelectValue />
|
||||||
<SelectContent>
|
</SelectTrigger>
|
||||||
<SelectItem value="join me">
|
<SelectContent>
|
||||||
<i class="x-user-status joinme"></i> {{ t('dialog.user.status.join_me') }}
|
<SelectItem value="join me">
|
||||||
</SelectItem>
|
<i class="x-user-status joinme"></i> {{ t('dialog.user.status.join_me') }}
|
||||||
<SelectItem value="active">
|
</SelectItem>
|
||||||
<i class="x-user-status online"></i> {{ t('dialog.user.status.online') }}
|
<SelectItem value="active">
|
||||||
</SelectItem>
|
<i class="x-user-status online"></i> {{ t('dialog.user.status.online') }}
|
||||||
<SelectItem value="ask me">
|
</SelectItem>
|
||||||
<i class="x-user-status askme"></i> {{ t('dialog.user.status.ask_me') }}
|
<SelectItem value="ask me">
|
||||||
</SelectItem>
|
<i class="x-user-status askme"></i> {{ t('dialog.user.status.ask_me') }}
|
||||||
<SelectItem value="busy">
|
</SelectItem>
|
||||||
<i class="x-user-status busy"></i> {{ t('dialog.user.status.busy') }}
|
<SelectItem value="busy">
|
||||||
</SelectItem>
|
<i class="x-user-status busy"></i> {{ t('dialog.user.status.busy') }}
|
||||||
</SelectContent>
|
</SelectItem>
|
||||||
</Select>
|
</SelectContent>
|
||||||
|
</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"
|
@change="setAutoStateChangeCompanyDescEnabled" />
|
||||||
@change="setAutoStateChangeCompanyDescEnabled" />
|
<Input
|
||||||
<Input
|
v-if="autoStateChangeCompanyDescEnabled"
|
||||||
v-if="autoStateChangeCompanyDescEnabled"
|
:model-value="autoStateChangeCompanyDesc"
|
||||||
:model-value="autoStateChangeCompanyDesc"
|
: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')"
|
size="sm"
|
||||||
style="margin-top: 8px"
|
@update:modelValue="setAutoStateChangeCompanyDesc" />
|
||||||
size="sm"
|
</FieldContent>
|
||||||
@update:modelValue="setAutoStateChangeCompanyDesc" />
|
</Field>
|
||||||
</div>
|
|
||||||
|
|
||||||
<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>
|
||||||
<Select
|
<FieldContent>
|
||||||
:model-value="autoStateChangeInstanceTypes"
|
<Select
|
||||||
:disabled="!autoStateChangeEnabled"
|
:model-value="autoStateChangeInstanceTypes"
|
||||||
multiple
|
:disabled="!autoStateChangeEnabled"
|
||||||
@update:modelValue="setAutoStateChangeInstanceTypes">
|
multiple
|
||||||
<SelectTrigger style="margin-top: 8px" size="sm">
|
@update:modelValue="setAutoStateChangeInstanceTypes">
|
||||||
<SelectValue
|
<SelectTrigger size="sm">
|
||||||
:placeholder="t('view.settings.general.automation.instance_type_placeholder')" />
|
<SelectValue
|
||||||
</SelectTrigger>
|
:placeholder="t('view.settings.general.automation.instance_type_placeholder')" />
|
||||||
<SelectContent>
|
</SelectTrigger>
|
||||||
<SelectItem v-for="instanceType in instanceTypes" :key="instanceType" :value="instanceType">
|
<SelectContent>
|
||||||
{{ instanceType }}
|
<SelectItem
|
||||||
</SelectItem>
|
v-for="instanceType in instanceTypes"
|
||||||
</SelectContent>
|
:key="instanceType"
|
||||||
</Select>
|
:value="instanceType">
|
||||||
</div>
|
{{ instanceType }}
|
||||||
|
</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</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>
|
||||||
<RadioGroup
|
<FieldContent>
|
||||||
:model-value="autoStateChangeNoFriends ? 'true' : 'false'"
|
<RadioGroup
|
||||||
:disabled="!autoStateChangeEnabled"
|
:model-value="autoStateChangeNoFriends ? 'true' : 'false'"
|
||||||
class="gap-2 flex"
|
:disabled="!autoStateChangeEnabled"
|
||||||
style="margin-top: 8px"
|
class="gap-2 flex"
|
||||||
@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" />
|
||||||
<label for="autoStateChangeNoFriends-false">
|
<label for="autoStateChangeNoFriends-false">
|
||||||
{{ t('view.settings.general.automation.alone') }}
|
{{ t('view.settings.general.automation.alone') }}
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center space-x-2">
|
<div class="flex items-center space-x-2">
|
||||||
<RadioGroupItem id="autoStateChangeNoFriends-true" value="true" />
|
<RadioGroupItem id="autoStateChangeNoFriends-true" value="true" />
|
||||||
<label for="autoStateChangeNoFriends-true">
|
<label for="autoStateChangeNoFriends-true">
|
||||||
{{ t('view.settings.general.automation.no_friends') }}
|
{{ t('view.settings.general.automation.no_friends') }}
|
||||||
</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')
|
}}</ToggleGroupItem>
|
||||||
}}</ToggleGroupItem>
|
<ToggleGroupItem 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')
|
}}</ToggleGroupItem>
|
||||||
}}</ToggleGroupItem>
|
<ToggleGroupItem 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')
|
}}</ToggleGroupItem>
|
||||||
}}</ToggleGroupItem>
|
</ToggleGroup>
|
||||||
</ToggleGroup>
|
</FieldContent>
|
||||||
</div>
|
</Field>
|
||||||
</div>
|
</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';
|
||||||
|
|||||||
Reference in New Issue
Block a user