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>
import ProfileManager from '@/components/ProfileManager.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 ConfigSelect from '@/components/ConfigSelect.vue'
import ConfigSelect from '@/components/config/ConfigSelect.vue'
import { ref } from 'vue'
const currentConfigPage = ref('profile_settings')

29
src/components/ProfileManager.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<div
class="px-4 h-20 flex items-center">
class="w-full px-4 h-20 flex items-center">
<div>
<h1 class="text-lg">
{{ $t(`profiles.title`) }}<span class="text-sm text-zinc-600"> ({{ profiles.length }}/{{ maxProfiles
@@ -23,19 +23,23 @@
v-model="filter"
: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">
<button class="h-full flex justify-center items-center aspect-square border-solid border-0 border-l hover:bg-zinc-900">
<Plus />
</button>
</div>
<Separator />
<div v-if="filteredProfiles.length === 0">
<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>
<Collapsible
v-for="[profileTag, tagProfiles] in filteredProfilesByTag" :key="profileTag" :default-open="true"
:open="collapse[profileTag]">
v-for="[profileTag, tagProfiles] in filteredProfilesByTag" :key="profileTag" v-model:open="collapse[profileTag]"
:default-open="true">
<CollapsibleTrigger
v-model="collapse[profileTag]"
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" />
{{ profileTag }}<span class="font-heading text-sm text-zinc-600"> ({{ tagProfiles.length }})</span>
@@ -56,7 +60,12 @@
</button>
<button
: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" />
</button>
</div>
@@ -70,7 +79,7 @@
<script setup>
import SchemaTest from '@/components/SchemaTest.vue'
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 { computed, onMounted, ref } from 'vue'
import {
@@ -126,12 +135,12 @@ onMounted(() => {
fetchProfiles()
})
</script>
<style>
<style scoped>
[data-state=open] > .chevrot {
transform: rotate(90deg);
}
.profile-row:hover .delete-button {
display: flex;
.profile-row:hover .profile-button {
width: 3rem /* 48px */;
}
</style>

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

@@ -15,10 +15,10 @@
</div>
</template>
<script setup>
import LEDsConfig from '@/components/config/LEDsConfig.vue'
import ProfileConfig from '@/components/config/ProfileConfig.vue'
import MappingConfig from '@/components/config/MappingConfig.vue'
import HapticConfig from '@/components/config/HapticConfig.vue'
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({

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="config.disabled ? 'cursor-not-allowed' : 'cursor-pointer'"
@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}">
<ScrambleText ref="configSelect" class="align-middle" :text="$t(`config_options.${config.id}.title`)" />
<Badge
@@ -19,6 +19,7 @@
{{ $t(`config_options.${config.id}.subtitle`) }}
</p>
</div>
<ChevronRight v-if="current_tab === config.id" class="float-right" />
</div>
</div>
</template>
@@ -26,6 +27,7 @@
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' },

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') }}

7
src/main.js
View File

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