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

improve theme color selection ux

Browse Source
This commit is contained in:
pa
2026-01-23 21:57:54 +09:00
parent 694183fb41
commit c30d7265ff
1 changed files with 20 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/NavMenu.vue
View File

@@ -197,31 +197,27 @@
<span>{{ themeDisplayName(theme) }}</span> <span>{{ themeDisplayName(theme) }}</span>
</DropdownMenuCheckboxItem> </DropdownMenuCheckboxItem>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<DropdownMenuLabel class="px-2 py-2 font-normal">
<DropdownMenuSub> <div class="flex items-center justify-around">
<DropdownMenuSubTrigger> <TooltipWrapper
<span>{{ t('view.settings.appearance.theme_color.header') }}</span>
</DropdownMenuSubTrigger>
<DropdownMenuSubContent
side="right"
align="start"
class="w-54 max-h-80 overflow-auto">
<DropdownMenuCheckboxItem
v-for="theme in themeColors" v-for="theme in themeColors"
:key="theme.key" :key="theme.key"
:model-value="currentThemeColor === theme.key" side="top"
:disabled="isApplyingThemeColor" :content="themeColorDisplayName(theme)"
indicator-position="right" :delay-duration="600">
@select="handleThemeColorSelect(theme)"> <button
<span class="flex items-center gap-2 min-w-0 flex-1"> type="button"
<span :disabled="isApplyingThemeColor"
class="h-3 w-3 shrink-0 rounded-sm" :aria-pressed="currentThemeColor === theme.key"
:style="{ backgroundColor: theme.swatch }" /> :aria-label="themeColorDisplayName(theme)"
<span class="truncate">{{ themeColorDisplayName(theme) }}</span> :title="themeColorDisplayName(theme)"
</span> @click="handleThemeColorSelect(theme)"
</DropdownMenuCheckboxItem> class="h-3.5 w-3.5 shrink-0 rounded-sm"
</DropdownMenuSubContent> :class="currentThemeColor === theme.key ? 'ring-1 --ring' : ''"
</DropdownMenuSub> :style="{ backgroundColor: theme.swatch }"></button>
</TooltipWrapper>
</div>
</DropdownMenuLabel>
</DropdownMenuSubContent> </DropdownMenuSubContent>
</DropdownMenuSub> </DropdownMenuSub>
@@ -325,6 +321,7 @@
import { computed, defineAsyncComponent, onMounted, ref, watch } from 'vue'; import { computed, defineAsyncComponent, onMounted, ref, watch } from 'vue';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'; import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
import { ChevronRight, Heart } from 'lucide-vue-next'; import { ChevronRight, Heart } from 'lucide-vue-next';
import { TooltipWrapper } from '@/components/ui/tooltip';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';