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

UPD: Lots of refactoring

Browse Source
This commit is contained in:
Robert Kossessa
2024-01-28 14:38:23 +01:00
parent f4b764cc90
commit 6d2c20b056
8 changed files with 104 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/components/config/pages/ProfileConfig.vue
View File

@@ -1,23 +1,5 @@
<template>
<div class="w-96">
<ConfigSection :title="$t('config_options.profile_settings.connection_type.title')" :icon-component="Cable">
<div class="w-full flex text-muted-foreground">
<button
class="hover:bg-zinc-900 grow flex flex-col justify-center items-center py-4">
<img class="w-24 size-w mb-2" src="@/assets/gui-ico/ico-usb-logo.svg" alt="usb-logo">
<span
class="text-xs leading-3 text-wrap">{{ $t('config_options.profile_settings.connection_type.usb')
}}</span>
</button>
<button
class="hover:bg-zinc-900 grow flex flex-col justify-center items-center py-4">
<img class="w-24 size-w mb-2" src="@/assets/gui-ico/ico-midi-logo.svg" alt="midi-logo">
<span
class="text-xs leading-3 text-wrap">{{ $t('config_options.profile_settings.connection_type.midi')
}}</span>
</button>
</div>
</ConfigSection>
<ConfigSection :title="$t('config_options.profile_settings.profile_properties.title')" :icon-component="Type">
<div class="flex flex-col p-8 py-4">
<span
@@ -51,6 +33,13 @@
</div>
</div>
</ConfigSection>
<ConfigSection :title="$t('config_options.profile_settings.connection_type.title')" :icon-component="Cable">
<div class="flex font-heading">
<ConnectionTypeButton
v-for="(option, key) in connectionTypeOptions" :key="key" :title="$t(option.titleKey)"
:icon="option.icon" :selected="connectionType===key" @select="connectionType=key" />
</div>
</ConfigSection>
<ConfigSection
:title="$t('config_options.profile_settings.internal_profile_toggle.title')"
@@ -58,11 +47,12 @@
<p class="flex flex-col p-8 py-4 text-muted-foreground text-xs">
{{ $t('config_options.profile_settings.internal_profile_toggle.subtitle') }}
<Separator class="mt-4" />
<span class="space-y-4">{{ $t('config_options.profile_settings.internal_profile_toggle.operation')
}}: <Badge class="bg-orange-500">SHIFT</Badge> + <Badge
<span class="py-4 space-y-4">{{ $t('config_options.profile_settings.internal_profile_toggle.operation')
}}:<br>
<Badge class="bg-orange-500">SHIFT</Badge> + <Badge
class="bg-zinc-500">Fn3</Badge> + <Badge>Rotation</Badge></span>
<Separator class="my-4" />
<span>{{ $t('config_options.profile_settings.internal_profile_toggle.warning') }}</span>
<Separator/>
<span class="pt-4">{{ $t('config_options.profile_settings.internal_profile_toggle.warning') }}</span>
</p>
</ConfigSection>
</div>
@@ -70,24 +60,26 @@
<script setup>
import { Label } from '@/components/ui/label/index.js'
import { Switch } from '@/components/ui/switch/index.js'
import { Replace, Type, Cable } from 'lucide-vue-next'
import { Cable, Replace, Type } from 'lucide-vue-next'
import ConfigSection from '@/components/config/ConfigSection.vue'
import { Separator } from '@/components/ui/separator/index.js'
import { ref } from 'vue'
import UsbIcon from '@/assets/gui-ico/ico-usb-logo.svg'
import MidiIcon from '@/assets/gui-ico/ico-midi-logo.svg'
import ConnectionTypeButton from '@/components/config/ConnectionTypeButton.vue'
import { Badge } from '@/components/ui/badge'
const connectionType = ref('usb')
const connectionType = ref('usb') // TODO: replace with actual value
</script>
<style scoped>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
const connectionTypeOptions = {
usb: {
icon: UsbIcon,
titleKey: 'config_options.profile_settings.connection_type.usb',
},
midi: {
icon: MidiIcon,
titleKey: 'config_options.profile_settings.connection_type.midi',
},
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
text-align: center;
}
</style>
</script>