mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-25 01:33:51 +02:00
663 lines
28 KiB
Vue
663 lines
28 KiB
Vue
<template>
|
|
<div>
|
|
<div class="options-container mt-0">
|
|
<span class="header">{{ t('view.settings.appearance.appearance.header') }}</span>
|
|
<div class="options-container-item">
|
|
<span class="name">{{ t('view.settings.appearance.appearance.language') }}</span>
|
|
<Select :model-value="appLanguage" @update:modelValue="changeAppLanguage">
|
|
<SelectTrigger size="sm">
|
|
<SelectValue :placeholder="appLanguageDisplayName" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectItem v-for="language in languageCodes" :key="language" :value="language">
|
|
{{ getLanguageName(language) }}
|
|
</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div class="options-container-item">
|
|
<span class="name">
|
|
{{ t('view.settings.appearance.appearance.font_family') }}
|
|
</span>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger as-child>
|
|
<Button variant="outline" size="sm" class="min-w-[180px] justify-between font-normal">
|
|
<span class="truncate">{{ fontDropdownDisplayText }}</span>
|
|
<ChevronDown class="ml-2 size-4 shrink-0 opacity-50" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuCheckboxItem
|
|
v-for="option in westernFontItems"
|
|
:key="option.key"
|
|
:model-value="appFontFamily === option.key"
|
|
@select="handleSelectWesternFont(option.key)">
|
|
{{ option.label }}
|
|
</DropdownMenuCheckboxItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuCheckboxItem
|
|
v-for="option in cjkFontItems"
|
|
:key="option.key"
|
|
:model-value="appCjkFontPack === option.key && appFontFamily !== 'custom'"
|
|
@select="handleSelectCjkFont(option.key)">
|
|
{{ option.label }}
|
|
</DropdownMenuCheckboxItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuCheckboxItem
|
|
:model-value="appFontFamily === 'custom'"
|
|
@select="handleSelectCustomFont">
|
|
{{ t('view.settings.appearance.appearance.font_family_custom') }}
|
|
</DropdownMenuCheckboxItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
<Dialog v-model:open="customFontDialogOpen">
|
|
<DialogContent class="sm:max-w-md">
|
|
<DialogHeader>
|
|
<DialogTitle>{{
|
|
t('view.settings.appearance.appearance.font_family_custom_dialog_title')
|
|
}}</DialogTitle>
|
|
<DialogDescription>{{
|
|
t('view.settings.appearance.appearance.font_family_custom_dialog_description')
|
|
}}</DialogDescription>
|
|
</DialogHeader>
|
|
<Input v-model="customFontInput" placeholder="'My Font', Arial, sans-serif" />
|
|
<DialogFooter>
|
|
<Button variant="outline" @click="customFontDialogOpen = false">
|
|
{{ t('dialog.alertdialog.cancel') }}
|
|
</Button>
|
|
<Button @click="saveCustomFont">
|
|
{{ t('dialog.alertdialog.ok') }}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
<div v-if="!isLinux" class="options-container-item">
|
|
<span class="name">{{ t('view.settings.appearance.appearance.zoom') }}</span>
|
|
<NumberField
|
|
v-model="zoomLevel"
|
|
:step="1"
|
|
:format-options="{ maximumFractionDigits: 0 }"
|
|
class="w-32"
|
|
@update:modelValue="setZoomLevel">
|
|
<NumberFieldContent>
|
|
<NumberFieldDecrement />
|
|
<NumberFieldInput />
|
|
<NumberFieldIncrement />
|
|
</NumberFieldContent>
|
|
</NumberField>
|
|
</div>
|
|
<simple-switch
|
|
:label="t('view.settings.appearance.appearance.show_notification_icon_dot')"
|
|
:value="notificationIconDot"
|
|
@change="
|
|
setNotificationIconDot();
|
|
saveOpenVROption();
|
|
" />
|
|
<simple-switch
|
|
:label="t('view.settings.appearance.appearance.vrcplus_profile_icons')"
|
|
:value="displayVRCPlusIconsAsAvatar"
|
|
@change="
|
|
setDisplayVRCPlusIconsAsAvatar();
|
|
saveOpenVROption();
|
|
" />
|
|
</div>
|
|
<div class="options-container">
|
|
<span class="header">{{ t('view.settings.appearance.display.header') }}</span>
|
|
<simple-switch
|
|
:label="t('view.settings.appearance.appearance.show_instance_id')"
|
|
:value="showInstanceIdInLocation"
|
|
@change="setShowInstanceIdInLocation" />
|
|
<simple-switch
|
|
:label="t('view.settings.appearance.appearance.nicknames')"
|
|
:value="!hideNicknames"
|
|
@change="
|
|
setHideNicknames();
|
|
saveOpenVROption();
|
|
" />
|
|
<simple-switch
|
|
:label="t('view.settings.appearance.appearance.age_gated_instances')"
|
|
:value="isAgeGatedInstancesVisible"
|
|
@change="setIsAgeGatedInstancesVisible" />
|
|
<simple-switch
|
|
:label="t('view.settings.appearance.appearance.striped_data_table_mode')"
|
|
:value="isDataTableStriped"
|
|
@change="toggleStripedDataTable" />
|
|
<simple-switch
|
|
:label="t('view.settings.appearance.appearance.toggle_pointer_on_hover')"
|
|
:value="showPointerOnHover"
|
|
@change="togglePointerOnHover" />
|
|
</div>
|
|
<div class="options-container">
|
|
<span class="header">{{ t('view.settings.appearance.sorting_tables.header') }}</span>
|
|
<div class="options-container-item">
|
|
<span class="name">{{ t('view.settings.appearance.appearance.sort_favorite_by') }}</span>
|
|
<RadioGroup
|
|
:model-value="sortFavorites ? 'true' : 'false'"
|
|
class="gap-2 flex"
|
|
style="margin-top: 8px"
|
|
@update:modelValue="handleSortFavoritesRadio">
|
|
<div class="flex items-center space-x-2">
|
|
<RadioGroupItem id="sortFavorites-false" value="false" />
|
|
<label for="sortFavorites-false">
|
|
{{ t('view.settings.appearance.appearance.sort_favorite_by_name') }}
|
|
</label>
|
|
</div>
|
|
<div class="flex items-center space-x-2">
|
|
<RadioGroupItem id="sortFavorites-true" value="true" />
|
|
<label for="sortFavorites-true">
|
|
{{ t('view.settings.appearance.appearance.sort_favorite_by_date') }}
|
|
</label>
|
|
</div>
|
|
</RadioGroup>
|
|
</div>
|
|
<div class="options-container-item">
|
|
<span class="name">{{ t('view.settings.appearance.appearance.sort_instance_users_by') }}</span>
|
|
<RadioGroup
|
|
:model-value="instanceUsersSortAlphabetical ? 'true' : 'false'"
|
|
class="gap-2 flex"
|
|
style="margin-top: 8px"
|
|
@update:modelValue="handleInstanceUsersSortAlphabeticalRadio">
|
|
<div class="flex items-center space-x-2">
|
|
<RadioGroupItem id="instanceUsersSortAlphabetical-false" value="false" />
|
|
<label for="instanceUsersSortAlphabetical-false">
|
|
{{ t('view.settings.appearance.appearance.sort_instance_users_by_time') }}
|
|
</label>
|
|
</div>
|
|
<div class="flex items-center space-x-2">
|
|
<RadioGroupItem id="instanceUsersSortAlphabetical-true" value="true" />
|
|
<label for="instanceUsersSortAlphabetical-true">
|
|
{{ t('view.settings.appearance.appearance.sort_instance_users_by_alphabet') }}
|
|
</label>
|
|
</div>
|
|
</RadioGroup>
|
|
</div>
|
|
|
|
<div class="options-container-item">
|
|
<span class="name">{{ t('view.settings.appearance.appearance.table_page_sizes') }}</span>
|
|
<Popover v-model:open="tablePageSizesOpen">
|
|
<ListboxRoot v-model="tablePageSizesModel" highlight-on-hover multiple>
|
|
<PopoverAnchor class="inline-flex w-75">
|
|
<TagsInput v-slot="{ modelValue: tags }" v-model="tablePageSizesModel" class="w-full">
|
|
<TagsInputItem v-for="item in tags" :key="item.toString()" :value="item.toString()">
|
|
<TagsInputItemText />
|
|
<TagsInputItemDelete />
|
|
</TagsInputItem>
|
|
|
|
<ListboxFilter v-model="tablePageSizesSearchTerm" as-child>
|
|
<TagsInputInput
|
|
:placeholder="t('view.settings.appearance.appearance.table_page_sizes')"
|
|
@keydown.enter.prevent="addTablePageSizeFromInput"
|
|
@keydown.down="tablePageSizesOpen = true" />
|
|
</ListboxFilter>
|
|
|
|
<PopoverTrigger as-child>
|
|
<Button size="icon-sm" variant="ghost" class="order-last self-start ml-auto">
|
|
<ChevronDown class="size-3.5" />
|
|
</Button>
|
|
</PopoverTrigger>
|
|
</TagsInput>
|
|
</PopoverAnchor>
|
|
|
|
<PopoverContent class="p-1" @open-auto-focus.prevent>
|
|
<ListboxContent
|
|
class="max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto empty:after:content-['No_options'] empty:p-1 empty:after:block"
|
|
tabindex="0">
|
|
<ListboxItem
|
|
v-for="size in filteredTablePageSizeOptions"
|
|
:key="size"
|
|
class="data-highlighted:bg-accent data-highlighted:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
|
|
:value="size"
|
|
@select="tablePageSizesSearchTerm = ''">
|
|
<span>{{ size }}</span>
|
|
|
|
<ListboxItemIndicator class="ml-auto inline-flex items-center justify-center">
|
|
<CheckIcon />
|
|
</ListboxItemIndicator>
|
|
</ListboxItem>
|
|
</ListboxContent>
|
|
</PopoverContent>
|
|
</ListboxRoot>
|
|
</Popover>
|
|
</div>
|
|
|
|
<div class="options-container-item">
|
|
<Button size="sm" variant="outline" @click="showTableLimitsDialog">{{
|
|
t('view.settings.appearance.appearance.table_entries_settings')
|
|
}}</Button>
|
|
</div>
|
|
</div>
|
|
<TableLimitsDialog />
|
|
<div class="options-container">
|
|
<span class="header">{{ t('view.settings.appearance.timedate.header') }}</span>
|
|
<div class="options-container-item">
|
|
<span class="name">{{ t('view.settings.appearance.timedate.time_format') }}</span>
|
|
<RadioGroup
|
|
:model-value="dtHour12 ? 'true' : 'false'"
|
|
class="gap-2 flex"
|
|
style="margin-top: 8px"
|
|
@update:modelValue="handleDtHour12Radio">
|
|
<div class="flex items-center space-x-2">
|
|
<RadioGroupItem id="dtHour12-true" value="true" />
|
|
<label for="dtHour12-true">
|
|
{{ t('view.settings.appearance.timedate.time_format_12') }}
|
|
</label>
|
|
</div>
|
|
<div class="flex items-center space-x-2">
|
|
<RadioGroupItem id="dtHour12-false" value="false" />
|
|
<label for="dtHour12-false">
|
|
{{ t('view.settings.appearance.timedate.time_format_24') }}
|
|
</label>
|
|
</div>
|
|
</RadioGroup>
|
|
</div>
|
|
<simple-switch
|
|
:label="t('view.settings.appearance.timedate.force_iso_date_format')"
|
|
:value="dtIsoFormat"
|
|
@change="setDtIsoFormat" />
|
|
</div>
|
|
|
|
<div class="options-container">
|
|
<span class="header">{{ t('view.settings.appearance.user_dialog.header') }}</span>
|
|
<simple-switch
|
|
:label="t('view.settings.appearance.user_dialog.vrchat_notes')"
|
|
:value="!hideUserNotes"
|
|
@change="setHideUserNotes" />
|
|
<simple-switch
|
|
:label="t('view.settings.appearance.user_dialog.vrcx_memos')"
|
|
:value="!hideUserMemos"
|
|
@change="setHideUserMemos" />
|
|
</div>
|
|
<div class="options-container">
|
|
<span class="header">{{ t('view.settings.appearance.friend_log.header') }}</span>
|
|
<simple-switch
|
|
:label="t('view.settings.appearance.friend_log.hide_unfriends')"
|
|
:value="hideUnfriends"
|
|
@change="setHideUnfriends"></simple-switch>
|
|
</div>
|
|
<div class="options-container">
|
|
<span class="header">{{ t('view.settings.appearance.user_colors.header') }}</span>
|
|
<simple-switch
|
|
:label="t('view.settings.appearance.user_colors.random_colors_from_user_id')"
|
|
:value="randomUserColours"
|
|
@change="updateTrustColor('', '', true)"></simple-switch>
|
|
<div class="flex flex-col gap-1">
|
|
<div>
|
|
<span class="x-tag-untrusted">{{
|
|
t('view.settings.appearance.user_colors.trust_levels.visitor')
|
|
}}</span>
|
|
<PresetColorPicker
|
|
:model-value="trustColor.untrusted"
|
|
:presets="['#CCCCCC']"
|
|
@change="updateTrustColor('untrusted', $event)" />
|
|
</div>
|
|
<div>
|
|
<span class="x-tag-basic">{{
|
|
t('view.settings.appearance.user_colors.trust_levels.new_user')
|
|
}}</span>
|
|
<PresetColorPicker
|
|
:model-value="trustColor.basic"
|
|
:presets="['#1778ff']"
|
|
@change="updateTrustColor('basic', $event)" />
|
|
</div>
|
|
<div>
|
|
<span class="x-tag-known">{{ t('view.settings.appearance.user_colors.trust_levels.user') }}</span>
|
|
<PresetColorPicker
|
|
:model-value="trustColor.known"
|
|
:presets="['#2bcf5c']"
|
|
@change="updateTrustColor('known', $event)" />
|
|
</div>
|
|
<div>
|
|
<span class="x-tag-trusted">{{
|
|
t('view.settings.appearance.user_colors.trust_levels.known_user')
|
|
}}</span>
|
|
<PresetColorPicker
|
|
:model-value="trustColor.trusted"
|
|
:presets="['#ff7b42']"
|
|
@change="updateTrustColor('trusted', $event)" />
|
|
</div>
|
|
<div>
|
|
<span class="x-tag-veteran">{{
|
|
t('view.settings.appearance.user_colors.trust_levels.trusted_user')
|
|
}}</span>
|
|
<PresetColorPicker
|
|
:model-value="trustColor.veteran"
|
|
:presets="['#b18fff', '#8143e6', '#ff69b4', '#b52626', '#ffd000', '#abcdef']"
|
|
@change="updateTrustColor('veteran', $event)" />
|
|
</div>
|
|
<div>
|
|
<span class="x-tag-vip">{{
|
|
t('view.settings.appearance.user_colors.trust_levels.vrchat_team')
|
|
}}</span>
|
|
<PresetColorPicker
|
|
:model-value="trustColor.vip"
|
|
:presets="['#ff2626']"
|
|
@change="updateTrustColor('vip', $event)" />
|
|
</div>
|
|
<div>
|
|
<span class="x-tag-troll">{{
|
|
t('view.settings.appearance.user_colors.trust_levels.nuisance')
|
|
}}</span>
|
|
<PresetColorPicker
|
|
:model-value="trustColor.troll"
|
|
:presets="['#782f2f']"
|
|
@change="updateTrustColor('troll', $event)" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectGroup,
|
|
SelectItem,
|
|
SelectSeparator,
|
|
SelectTrigger,
|
|
SelectValue
|
|
} from '@/components/ui/select';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuCheckboxItem,
|
|
DropdownMenuContent,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger
|
|
} from '@/components/ui/dropdown-menu';
|
|
import { ListboxContent, ListboxFilter, ListboxItem, ListboxItemIndicator, ListboxRoot, useFilter } from 'reka-ui';
|
|
import {
|
|
NumberField,
|
|
NumberFieldContent,
|
|
NumberFieldDecrement,
|
|
NumberFieldIncrement,
|
|
NumberFieldInput
|
|
} from '@/components/ui/number-field';
|
|
import {
|
|
TagsInput,
|
|
TagsInputInput,
|
|
TagsInputItem,
|
|
TagsInputItemDelete,
|
|
TagsInputItemText
|
|
} from '@/components/ui/tags-input';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle
|
|
} from '@/components/ui/dialog';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
|
|
import { computed, onBeforeUnmount, ref, watch } from 'vue';
|
|
import { CheckIcon, ChevronDown } from 'lucide-vue-next';
|
|
import { useAppearanceSettingsStore, useFavoriteStore, useVrStore } from '@/stores';
|
|
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
|
|
import { getLanguageName, languageCodes } from '@/localization';
|
|
import { APP_CJK_FONT_PACKS, APP_FONT_CONFIG, APP_FONT_DEFAULT_KEY, APP_FONT_FAMILIES } from '@/shared/constants';
|
|
import { Button } from '@/components/ui/button';
|
|
import { storeToRefs } from 'pinia';
|
|
import { toast } from 'vue-sonner';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
import PresetColorPicker from '@/components/PresetColorPicker.vue';
|
|
import TableLimitsDialog from '@/components/dialogs/TableLimitsDialog.vue';
|
|
import { saveSortFavoritesOption } from '@/coordinators/favoriteCoordinator';
|
|
|
|
import SimpleSwitch from '../SimpleSwitch.vue';
|
|
|
|
const { t } = useI18n();
|
|
|
|
const appearanceSettingsStore = useAppearanceSettingsStore();
|
|
const { saveOpenVROption, updateVRConfigVars } = useVrStore();
|
|
|
|
const {
|
|
appLanguage,
|
|
displayVRCPlusIconsAsAvatar,
|
|
appFontFamily,
|
|
customFontFamily,
|
|
appCjkFontPack,
|
|
hideNicknames,
|
|
showInstanceIdInLocation,
|
|
isAgeGatedInstancesVisible,
|
|
sortFavorites,
|
|
instanceUsersSortAlphabetical,
|
|
dtHour12,
|
|
dtIsoFormat,
|
|
hideUserNotes,
|
|
hideUserMemos,
|
|
hideUnfriends,
|
|
randomUserColours,
|
|
trustColor,
|
|
notificationIconDot,
|
|
tablePageSizes,
|
|
isDataTableStriped,
|
|
showPointerOnHover
|
|
} = storeToRefs(appearanceSettingsStore);
|
|
|
|
const appLanguageDisplayName = computed(() => getLanguageName(String(appLanguage.value)));
|
|
|
|
const {
|
|
setDisplayVRCPlusIconsAsAvatar,
|
|
setHideNicknames,
|
|
setShowInstanceIdInLocation,
|
|
setIsAgeGatedInstancesVisible,
|
|
setInstanceUsersSortAlphabetical,
|
|
setDtHour12,
|
|
setDtIsoFormat,
|
|
setHideUserNotes,
|
|
setHideUserMemos,
|
|
setHideUnfriends,
|
|
updateTrustColor,
|
|
changeAppLanguage,
|
|
showTableLimitsDialog,
|
|
setNotificationIconDot,
|
|
setTablePageSizes,
|
|
toggleStripedDataTable,
|
|
togglePointerOnHover,
|
|
setAppFontFamily,
|
|
setCustomFontFamily,
|
|
setAppCjkFontPack
|
|
} = appearanceSettingsStore;
|
|
|
|
const fontDropdownDisplayText = computed(() => {
|
|
if (appFontFamily.value === 'custom') {
|
|
return t('view.settings.appearance.appearance.font_family_custom');
|
|
}
|
|
const western = t(`view.settings.appearance.appearance.font_family_${appFontFamily.value}`);
|
|
const cjk =
|
|
appCjkFontPack.value === 'system'
|
|
? t('view.settings.appearance.appearance.font_family_system_ui')
|
|
: t(`view.settings.appearance.appearance.cjk_font_pack_${appCjkFontPack.value}`);
|
|
return `${western} / ${cjk}`;
|
|
});
|
|
|
|
const westernFontItems = computed(() => {
|
|
return APP_FONT_FAMILIES.filter((key) => key !== 'custom' && key !== 'system_ui').map((key) => ({
|
|
key,
|
|
label: t(`view.settings.appearance.appearance.font_family_${key}`)
|
|
}));
|
|
});
|
|
|
|
const cjkFontItems = computed(() => {
|
|
return APP_CJK_FONT_PACKS.map((key) => ({
|
|
key,
|
|
label:
|
|
key === 'system'
|
|
? t('view.settings.appearance.appearance.font_family_system_ui')
|
|
: t(`view.settings.appearance.appearance.cjk_font_pack_${key}`)
|
|
}));
|
|
});
|
|
|
|
const FONT_FAMILY_REGEX =
|
|
/^\s*(([-_\p{L}][\p{L}\p{N}_\s-]*)|'[^']+'|"[^"]+")\s*(,\s*(([-_\p{L}][\p{L}\p{N}_\s-]*)|'[^']+'|"[^"]+")\s*)*$/u;
|
|
|
|
const customFontDialogOpen = ref(false);
|
|
const customFontInput = ref('');
|
|
|
|
function handleSelectWesternFont(key) {
|
|
setAppFontFamily(key);
|
|
}
|
|
|
|
function handleSelectCjkFont(key) {
|
|
if (appFontFamily.value === 'custom') {
|
|
setAppFontFamily(APP_FONT_DEFAULT_KEY);
|
|
}
|
|
setAppCjkFontPack(key);
|
|
}
|
|
|
|
function handleSelectCustomFont() {
|
|
const cssVarValue = getComputedStyle(document.documentElement).getPropertyValue('--font-western-primary').trim();
|
|
const currentKey = String(appFontFamily.value || APP_FONT_DEFAULT_KEY)
|
|
.trim()
|
|
.toLowerCase();
|
|
const fallbackFont = APP_FONT_CONFIG[currentKey]?.cssName || APP_FONT_CONFIG[APP_FONT_DEFAULT_KEY].cssName;
|
|
customFontInput.value = customFontFamily.value?.trim() || cssVarValue || fallbackFont;
|
|
customFontDialogOpen.value = true;
|
|
}
|
|
|
|
function saveCustomFont() {
|
|
const trimmed = customFontInput.value.trim();
|
|
if (!trimmed || !FONT_FAMILY_REGEX.test(trimmed)) {
|
|
toast.error(t('view.settings.appearance.appearance.font_family_custom_invalid'));
|
|
return;
|
|
}
|
|
setCustomFontFamily(trimmed);
|
|
setAppFontFamily('custom');
|
|
customFontDialogOpen.value = false;
|
|
}
|
|
|
|
const zoomLevel = ref(100);
|
|
const isLinux = computed(() => LINUX);
|
|
let cleanupWheel = null;
|
|
|
|
onBeforeUnmount(() => {
|
|
if (cleanupWheel) {
|
|
cleanupWheel();
|
|
}
|
|
});
|
|
|
|
initGetZoomLevel();
|
|
|
|
/**
|
|
*
|
|
* @param value
|
|
*/
|
|
function handleSortFavoritesRadio(value) {
|
|
const nextValue = value === 'true';
|
|
if (nextValue !== sortFavorites.value) {
|
|
saveSortFavoritesOption();
|
|
}
|
|
}
|
|
|
|
/**
|
|
*
|
|
* @param value
|
|
*/
|
|
function handleInstanceUsersSortAlphabeticalRadio(value) {
|
|
const nextValue = value === 'true';
|
|
if (nextValue !== instanceUsersSortAlphabetical.value) {
|
|
setInstanceUsersSortAlphabetical();
|
|
}
|
|
}
|
|
|
|
/**
|
|
*
|
|
* @param value
|
|
*/
|
|
function handleDtHour12Radio(value) {
|
|
const nextValue = value === 'true';
|
|
if (nextValue !== dtHour12.value) {
|
|
setDtHour12();
|
|
updateVRConfigVars();
|
|
}
|
|
}
|
|
|
|
const tablePageSizesModel = computed({
|
|
get: () => tablePageSizes.value.map(String),
|
|
set: (values) => {
|
|
const rawLength = Array.isArray(values) ? values.length : 0;
|
|
setTablePageSizes(values);
|
|
if (rawLength && rawLength !== tablePageSizes.value.length) {
|
|
toast.error(t('view.settings.appearance.appearance.table_page_sizes_error'));
|
|
}
|
|
}
|
|
});
|
|
|
|
const TABLE_PAGE_SIZE_SUGGESTIONS = Object.freeze([5, 10, 15, 20, 25, 30, 50, 75, 100, 150, 200, 250, 500, 1000]);
|
|
|
|
const tablePageSizesOpen = ref(false);
|
|
const tablePageSizesSearchTerm = ref('');
|
|
|
|
const { contains } = useFilter({ sensitivity: 'base' });
|
|
|
|
const tablePageSizeOptions = computed(() => {
|
|
const current = Array.isArray(tablePageSizes.value) ? tablePageSizes.value : [];
|
|
const merged = new Set([...TABLE_PAGE_SIZE_SUGGESTIONS, ...current].map((v) => String(v)));
|
|
return Array.from(merged).sort((a, b) => Number(a) - Number(b));
|
|
});
|
|
|
|
const filteredTablePageSizeOptions = computed(() => {
|
|
if (tablePageSizesSearchTerm.value === '') {
|
|
return tablePageSizeOptions.value;
|
|
}
|
|
return tablePageSizeOptions.value.filter((option) => contains(option, tablePageSizesSearchTerm.value));
|
|
});
|
|
|
|
watch(tablePageSizesSearchTerm, (value) => {
|
|
if (value) {
|
|
tablePageSizesOpen.value = true;
|
|
}
|
|
});
|
|
|
|
/**
|
|
*
|
|
*/
|
|
function addTablePageSizeFromInput() {
|
|
const raw = String(tablePageSizesSearchTerm.value ?? '').trim();
|
|
if (!raw) {
|
|
return;
|
|
}
|
|
if (!Array.isArray(tablePageSizesModel.value)) {
|
|
tablePageSizesModel.value = [raw];
|
|
} else if (!tablePageSizesModel.value.includes(raw)) {
|
|
tablePageSizesModel.value = [...tablePageSizesModel.value, raw];
|
|
}
|
|
tablePageSizesSearchTerm.value = '';
|
|
}
|
|
|
|
/**
|
|
*
|
|
*/
|
|
async function initGetZoomLevel() {
|
|
const handleWheel = (event) => {
|
|
if (event.ctrlKey) {
|
|
getZoomLevel();
|
|
}
|
|
};
|
|
window.addEventListener('wheel', handleWheel);
|
|
cleanupWheel = () => {
|
|
window.removeEventListener('wheel', handleWheel);
|
|
};
|
|
getZoomLevel();
|
|
}
|
|
|
|
/**
|
|
*
|
|
*/
|
|
async function getZoomLevel() {
|
|
zoomLevel.value = ((await AppApi.GetZoom()) + 10) * 10;
|
|
}
|
|
|
|
/**
|
|
*
|
|
*/
|
|
function setZoomLevel() {
|
|
AppApi.SetZoom(zoomLevel.value / 10 - 10);
|
|
}
|
|
</script>
|