MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-19 06:43:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

improve color picker UI

Browse Source
This commit is contained in:
pa
2026-01-22 21:50:28 +09:00
parent 0a0af0db75
commit 24d45d5967
3 changed files with 32 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/PresetColorPicker.vue
View File

@@ -59,8 +59,8 @@
<Popover>
<PopoverTrigger as-child>
<Button variant="outline" size="sm" class="flex items-center gap-2 px-2" :disabled="disabled">
<span class="h-4 w-4 rounded border" :style="{ backgroundColor: safeValue }" />
<span class="font-mono text-xs opacity-80">
<span class="h-4 w-4 rounded" :style="{ backgroundColor: safeValue }" />
<span class="text-xs opacity-80">
{{ displayText }}
</span>

11
src/localization/en.json
View File

@@ -656,7 +656,16 @@
},
"user_colors": {
"header": "User Colors",
"random_colors_from_user_id": "Random Colors from User ID"
"random_colors_from_user_id": "Random Colors from User ID",
"trust_levels": {
"visitor": "Visitor",
"new_user": "New User",
"user": "User",
"known_user": "Known User",
"trusted_user": "Trusted User",
"vrchat_team": "VRChat Team",
"nuisance": "Nuisance"
}
},
"friend_log": {
"header": "Friend Log",

28
src/views/Settings/components/Tabs/AppearanceTab.vue
View File

@@ -369,51 +369,63 @@
:label="t('view.settings.appearance.user_colors.random_colors_from_user_id')"
:value="randomUserColours"
@change="updateTrustColor('', '', true)"></simple-switch>
<div>
<div class="flex flex-col gap-1">
<div>
<span class="text-[18px] align-top x-tag-untrusted">Visitor</span>
<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="text-[18px] align-top x-tag-basic">New User</span>
<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="text-[18px] align-top x-tag-known">User</span>
<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="text-[18px] align-top x-tag-trusted">Known User</span>
<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="text-[18px] align-top x-tag-veteran">Trusted User</span>
<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="text-[18px] align-top x-tag-vip">VRChat Team</span>
<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="text-[18px] align-top x-tag-troll">Nuisance</span>
<span class="x-tag-troll">{{
t('view.settings.appearance.user_colors.trust_levels.nuisance')
}}</span>
<PresetColorPicker
:model-value="trustColor.troll"
:presets="['#782f2f']"