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

4
src/App.vue
View File

@@ -1,9 +1,9 @@
<script setup> <script setup>
import ProfileManager from '@/components/ProfileManager.vue' import ProfileManager from '@/components/ProfileManager.vue'
import DevicePreview from '@/components/device/DevicePreview.vue' import DevicePreview from '@/components/device/DevicePreview.vue'
import ConfigPane from '@/components/ConfigPane.vue' import ConfigPane from '@/components/config/ConfigPane.vue'
import Navbar from '@/components/Navbar.vue' import Navbar from '@/components/Navbar.vue'
import ConfigSelect from '@/components/ConfigSelect.vue' import ConfigSelect from '@/components/config/ConfigSelect.vue'
import { ref } from 'vue' import { ref } from 'vue'
const currentConfigPage = ref('profile_settings') const currentConfigPage = ref('profile_settings')

29
src/components/ProfileManager.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<div <div
class="px-4 h-20 flex items-center"> class="w-full px-4 h-20 flex items-center">
<div> <div>
<h1 class="text-lg"> <h1 class="text-lg">
{{ $t(`profiles.title`) }}<span class="text-sm text-zinc-600"> ({{ profiles.length }}/{{ maxProfiles {{ $t(`profiles.title`) }}<span class="text-sm text-zinc-600"> ({{ profiles.length }}/{{ maxProfiles
@@ -23,19 +23,23 @@
v-model="filter" v-model="filter"
:placeholder="$t('profiles.filter_placeholder')" :placeholder="$t('profiles.filter_placeholder')"
class="grow h-full bg-transparent text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50"> class="grow h-full bg-transparent text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50">
<button class="h-full flex justify-center items-center aspect-square border-solid border-0 border-l hover:bg-zinc-900">
<Plus />
</button>
</div> </div>
<Separator /> <Separator />
<div v-if="filteredProfiles.length === 0"> <div v-if="filteredProfiles.length === 0">
<div class="flex flex-col items-center justify-center h-32"> <div class="flex flex-col items-center justify-center h-32">
<ScrambleText scramble-on-mount fill-interval="5" class="text-sm text-muted-foreground" :text="$t('profiles.not_found')" /> <ScrambleText
scramble-on-mount fill-interval="5" class="text-sm text-muted-foreground"
:text="$t('profiles.not_found')" />
</div> </div>
</div> </div>
<div> <div>
<Collapsible <Collapsible
v-for="[profileTag, tagProfiles] in filteredProfilesByTag" :key="profileTag" :default-open="true" v-for="[profileTag, tagProfiles] in filteredProfilesByTag" :key="profileTag" v-model:open="collapse[profileTag]"
:open="collapse[profileTag]"> :default-open="true">
<CollapsibleTrigger <CollapsibleTrigger
v-model="collapse[profileTag]"
class="w-full h-12 py-2 text-left text-muted-foreground text-sm hover:bg-zinc-900"> class="w-full h-12 py-2 text-left text-muted-foreground text-sm hover:bg-zinc-900">
<ChevronRight class="chevrot h-4 w-4 mb-0.5 ml-4 inline-block transition-transform" /> <ChevronRight class="chevrot h-4 w-4 mb-0.5 ml-4 inline-block transition-transform" />
{{ profileTag }}<span class="font-heading text-sm text-zinc-600"> ({{ tagProfiles.length }})</span> {{ profileTag }}<span class="font-heading text-sm text-zinc-600"> ({{ tagProfiles.length }})</span>
@@ -56,7 +60,12 @@
</button> </button>
<button <button
:data-selected="currentProfile===profile.id" :data-selected="currentProfile===profile.id"
class="h-full bg-orange-950 hover:bg-orange-700 aspect-square text-black hidden justify-center items-center delete-button data-[selected=true]:bg-orange-600 hover:data-[selected=true]:bg-orange-500"> class="flex w-0 h-12 transition-all text-zinc-100 justify-center items-center profile-button hover:bg-opacity-100 bg-opacity-50 bg-zinc-900 data-[selected=true]:bg-zinc-200 hover:data-[selected=true]:bg-zinc-100 data-[selected=true]:text-black">
<Copy class="h-4 w-4" />
</button>
<button
:data-selected="currentProfile===profile.id"
class="flex w-0 h-12 transition-all bg-orange-900 text-zinc-100 justify-center items-center profile-button hover:bg-orange-700 data-[selected=true]:bg-orange-600 hover:data-[selected=true]:bg-orange-500 data-[selected=true]:text-black">
<Trash2 class="h-4 w-4" /> <Trash2 class="h-4 w-4" />
</button> </button>
</div> </div>
@@ -70,7 +79,7 @@
<script setup> <script setup>
import SchemaTest from '@/components/SchemaTest.vue' import SchemaTest from '@/components/SchemaTest.vue'
import { Separator } from '@/components/ui/separator/index.js' import { Separator } from '@/components/ui/separator/index.js'
import { FileDigit, ChevronRight, Search, Trash2 } from 'lucide-vue-next' import { FileDigit, ChevronRight, Search, Trash2, Copy, Plus } from 'lucide-vue-next'
import axios from 'axios' import axios from 'axios'
import { computed, onMounted, ref } from 'vue' import { computed, onMounted, ref } from 'vue'
import { import {
@@ -126,12 +135,12 @@ onMounted(() => {
fetchProfiles() fetchProfiles()
}) })
</script> </script>
<style> <style scoped>
[data-state=open] > .chevrot { [data-state=open] > .chevrot {
transform: rotate(90deg); transform: rotate(90deg);
} }
.profile-row:hover .delete-button { .profile-row:hover .profile-button {
display: flex; width: 3rem /* 48px */;
} }
</style> </style>

8
src/components/ConfigPane.vue → src/components/config/ConfigPane.vue
View File

@@ -15,10 +15,10 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import LEDsConfig from '@/components/config/LEDsConfig.vue' import LEDsConfig from '@/components/config/pages/LEDsConfig.vue'
import ProfileConfig from '@/components/config/ProfileConfig.vue' import ProfileConfig from '@/components/config/pages/ProfileConfig.vue'
import MappingConfig from '@/components/config/MappingConfig.vue' import MappingConfig from '@/components/config/pages/MappingConfig.vue'
import HapticConfig from '@/components/config/HapticConfig.vue' import HapticConfig from '@/components/config/pages/HapticConfig.vue'
import ScrambleText from '@/components/effects/ScrambleText.vue' import ScrambleText from '@/components/effects/ScrambleText.vue'
defineProps({ defineProps({

4
src/components/ConfigSelect.vue → src/components/config/ConfigSelect.vue
View File

@@ -7,7 +7,7 @@
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="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'" :class="config.disabled ? 'cursor-not-allowed' : 'cursor-pointer'"
@click="current_tab=config.disabled ? current_tab : config.id; $refs.configSelect[index].scramble()"> @click="current_tab=config.disabled ? current_tab : config.id; $refs.configSelect[index].scramble()">
<div> <div class="w-full">
<h1 class="text-lg" :class="{'text-muted-foreground': config.disabled}"> <h1 class="text-lg" :class="{'text-muted-foreground': config.disabled}">
<ScrambleText ref="configSelect" class="align-middle" :text="$t(`config_options.${config.id}.title`)" /> <ScrambleText ref="configSelect" class="align-middle" :text="$t(`config_options.${config.id}.title`)" />
<Badge <Badge
@@ -19,6 +19,7 @@
{{ $t(`config_options.${config.id}.subtitle`) }} {{ $t(`config_options.${config.id}.subtitle`) }}
</p> </p>
</div> </div>
<ChevronRight v-if="current_tab === config.id" class="float-right" />
</div> </div>
</div> </div>
</template> </template>
@@ -26,6 +27,7 @@
import { ref } from 'vue' import { ref } from 'vue'
import ScrambleText from '@/components/effects/ScrambleText.vue' import ScrambleText from '@/components/effects/ScrambleText.vue'
import { Badge } from '@/components/ui/badge/index.js' import { Badge } from '@/components/ui/badge/index.js'
import { ChevronRight } from 'lucide-vue-next'
const config_tabs = ref([ const config_tabs = ref([
{ id: 'profile_settings' }, { id: 'profile_settings' },

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

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

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

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

7
src/main.js
View File

@@ -13,7 +13,12 @@ import Ajv from 'ajv'
// Create a new store instance // Create a new store instance
const store = createStore({ const store = createStore({
state() { state() {
return {} return {
device: {
connected: false,
profiles: [],
},
}
}, },
mutations: {}, mutations: {},
}) })