matei/zeroone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UPD: Visual upgrades

Browse Source
This commit is contained in:
Robert Kossessa
2024-01-25 01:05:23 +01:00
parent d90f2eea08
commit d86b01d3ca
8 changed files with 46 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/config/ConfigPane.vue Normal file
View File

@@ -0,0 +1,37 @@
<template>
<div>
<div
class="px-6 h-20 flex items-center bg-zinc-900 bg-opacity-40">
<div>
<h1 class="text-lg">
<ScrambleText class="align-middle" :text="$t(`config_options.${page}.title`)" />
</h1>
<p class="text-xs text-muted-foreground">
<ScrambleText class="align-middle" :text="$t(`config_options.${page}.subtitle`)" :replace-interval="5" />
</p>
</div>
</div>
<component :is="configPages[page]" />
</div>
</template>
<script setup>
import LEDsConfig from '@/components/config/pages/LEDsConfig.vue'
import ProfileConfig from '@/components/config/pages/ProfileConfig.vue'
import MappingConfig from '@/components/config/pages/MappingConfig.vue'
import HapticConfig from '@/components/config/pages/HapticConfig.vue'
import ScrambleText from '@/components/effects/ScrambleText.vue'
defineProps({
page: {
type: String,
default: 'profile_settings',
},
})
const configPages = {
profile_settings: ProfileConfig,
feedback_designer: HapticConfig,
mapping_configuration: MappingConfig,
light_designer: LEDsConfig,
}
</script>

48
src/components/config/ConfigSelect.vue Normal file
View File

@@ -0,0 +1,48 @@
<template>
<div>
<div
v-for="(config, index) in config_tabs"
:key="config"
:data-selected="current_tab===config.id"
class="px-4 h-20 flex items-center hover:bg-zinc-900 data-[selected=true]:bg-zinc-200 hover:data-[selected=true]:bg-zinc-100 data-[selected=true]:text-black border-solid border-0 border-b"
:class="config.disabled ? 'cursor-not-allowed' : 'cursor-pointer'"
@click="current_tab=config.disabled ? current_tab : config.id; $refs.configSelect[index].scramble()">
<div class="w-full">
<h1 class="text-lg" :class="{'text-muted-foreground': config.disabled}">
<ScrambleText ref="configSelect" class="align-middle" :text="$t(`config_options.${config.id}.title`)" />
<Badge
v-if="config.hasOwnProperty('badgeKey')"
v-t="config.badgeKey"
class="font-mono ml-2 rounded-full h-4 align-middle bg-zinc-900 text-muted-foreground" />
</h1>
<p class="text-xs" :class="current_tab===config.id?'text-black' : 'text-muted-foreground'">
{{ $t(`config_options.${config.id}.subtitle`) }}
</p>
</div>
<ChevronRight v-if="current_tab === config.id" class="float-right" />
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import ScrambleText from '@/components/effects/ScrambleText.vue'
import { Badge } from '@/components/ui/badge/index.js'
import { ChevronRight } from 'lucide-vue-next'
const config_tabs = ref([
{ id: 'profile_settings' },
{ id: 'feedback_designer' },
{ id: 'mapping_configuration' },
{ id: 'light_designer' },
{
id: 'gui_designer',
disabled: true,
badgeKey: 'common.coming_soon',
},
])
const current_tab = defineModel({
type: String,
default: 'profile_settings',
})
</script>

8
src/components/config/HapticConfig.vue → src/components/config/pages/HapticConfig.vue
View File

@@ -18,7 +18,7 @@
<TabsTrigger value="fd">
<div class="grid grid-flow-row auto-rows-max justify-items-center ">
<div class="size-16 mb-2">
<img src="../../assets/gui-ico/ico-fd.svg">
<img src="../../../assets/gui-ico/ico-fd.svg">
</div>
<span
class="text-xs leading-3 text-wrap">{{ $t('config_options.feedback_designer.feedback_type.fine_detents')
@@ -28,7 +28,7 @@
<TabsTrigger value="cd">
<div class="grid grid-flow-row auto-rows-max justify-items-center">
<div class="size-16 mb-2">
<img src="../../assets/gui-ico/ico-cd.svg">
<img src="../../../assets/gui-ico/ico-cd.svg">
</div>
<span
class="text-xs leading-3 text-wrap">{{ $t('config_options.feedback_designer.feedback_type.coarse_detents')
@@ -38,7 +38,7 @@
<TabsTrigger value="vr">
<div class="grid grid-flow-row auto-rows-max justify-items-center">
<div class="size-16 mb-2">
<img src="../../assets/gui-ico/ico-vf.svg">
<img src="../../../assets/gui-ico/ico-vf.svg">
</div>
<span
class="text-xs leading-3 text-wrap">{{ $t('config_options.feedback_designer.feedback_type.viscous_rotation')
@@ -48,7 +48,7 @@
<TabsTrigger value="rt">
<div class="grid grid-flow-row auto-rows-max justify-items-center">
<div class="size-16 mb-2">
<img src="../../assets/gui-ico/ico-rc.svg">
<img src="../../../assets/gui-ico/ico-rc.svg">
</div>
<span class="text-xs leading-3 text-wrap">
{{ $t('config_options.feedback_designer.feedback_type.return_to_center') }}

8
src/components/config/LEDsConfig.vue → src/components/config/pages/LEDsConfig.vue
View File

@@ -17,7 +17,7 @@
<TabsTrigger value="fd">
<div class="grid grid-flow-row auto-rows-max justify-items-center ">
<div class="size-16 mb-2">
<img src="../../assets/gui-ico/ico-fd.svg">
<img src="../../../assets/gui-ico/ico-fd.svg">
</div>
<span class="text-xs leading-3 text-wrap">
Fine Detents
@@ -27,7 +27,7 @@
<TabsTrigger value="cd">
<div class="grid grid-flow-row auto-rows-max justify-items-center">
<div class="size-16 mb-2">
<img src="../../assets/gui-ico/ico-cd.svg">
<img src="../../../assets/gui-ico/ico-cd.svg">
</div>
<span class="text-xs leading-3 text-wrap">
Coarse Detents
@@ -37,7 +37,7 @@
<TabsTrigger value="vr">
<div class="grid grid-flow-row auto-rows-max justify-items-center">
<div class="size-16 mb-2">
<img src="../../assets/gui-ico/ico-vf.svg">
<img src="../../../assets/gui-ico/ico-vf.svg">
</div>
<span class="text-xs leading-3 text-wrap">
Viscous Rotation
@@ -47,7 +47,7 @@
<TabsTrigger value="rt">
<div class="grid grid-flow-row auto-rows-max justify-items-center">
<div class="size-16 mb-2">
<img src="../../assets/gui-ico/ico-rc.svg">
<img src="../../../assets/gui-ico/ico-rc.svg">
</div>
<span class="text-xs leading-3 text-wrap">
Return to Center

8
src/components/config/MappingConfig.vue → src/components/config/pages/MappingConfig.vue
View File

@@ -18,7 +18,7 @@
<TabsTrigger value="fd">
<div class="grid grid-flow-row auto-rows-max justify-items-center ">
<div class="size-16 mb-2">
<img src="../../assets/gui-ico/ico-key-o.svg">
<img src="../../../assets/gui-ico/ico-key-o.svg">
</div>
<span class="text-xs leading-3 text-wrap">
{{ $t('config_options.mapping_configuration.key_mapping.switch.a') }}
@@ -29,7 +29,7 @@
<TabsTrigger value="cd">
<div class="grid grid-flow-row auto-rows-max justify-items-center">
<div class="size-16 mb-2">
<img src="../../assets/gui-ico/ico-key.svg">
<img src="../../../assets/gui-ico/ico-key.svg">
</div>
<span class="text-xs leading-3 text-wrap">
{{ $t('config_options.mapping_configuration.key_mapping.switch.b') }}
@@ -40,7 +40,7 @@
<TabsTrigger value="vr">
<div class="grid grid-flow-row auto-rows-max justify-items-center">
<div class="size-16 mb-2">
<img src="../../assets/gui-ico/ico-key-g.svg">
<img src="../../../assets/gui-ico/ico-key-g.svg">
</div>
<span class="text-xs leading-3 text-wrap">
{{ $t('config_options.mapping_configuration.key_mapping.switch.c') }}
@@ -51,7 +51,7 @@
<TabsTrigger value="rt">
<div class="grid grid-flow-row auto-rows-max justify-items-center">
<div class="size-16 mb-2">
<img src="../../assets/gui-ico/ico-key-d.svg">
<img src="../../../assets/gui-ico/ico-key-d.svg">
</div>
<span class="text-xs leading-3 text-wrap">
{{ $t('config_options.mapping_configuration.key_mapping.switch.d') }}