UPD: Refactor App into vue components
broke quite a few things along the way
This commit is contained in:
Robert Kossessa
1058
src/App.vue
1058
src/App.vue
File diff suppressed because it is too large
Load Diff
25
src/ConfigPane.vue
Normal file
25
src/ConfigPane.vue
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<component :is="configPages[page]" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import LEDsConfig from '@/LEDsConfig.vue'
|
||||||
|
import ProgramConfig from '@/ProgramConfig.vue'
|
||||||
|
import MappingConfig from '@/MappingConfig.vue'
|
||||||
|
import HapticConfig from '@/HapticConfig.vue'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
page: {
|
||||||
|
type: String,
|
||||||
|
default: 'program_settings',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const configPages = {
|
||||||
|
program_settings: ProgramConfig,
|
||||||
|
feedback_designer: HapticConfig,
|
||||||
|
mapping_configuration: MappingConfig,
|
||||||
|
light_designer: LEDsConfig,
|
||||||
|
}
|
||||||
|
</script>
|
||||||
25
src/DevicePreview.vue
Normal file
25
src/DevicePreview.vue
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<div class="p-4">
|
||||||
|
<h1 class="text-lg">
|
||||||
|
<ScrambleReveal :text="$t('preview.title')" />
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<QuickPreview />
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
|
||||||
|
<h2>{{ $t('config_options.title') }}</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import QuickPreview from '@/components/patterns/QuickPreview.vue'
|
||||||
|
import ScrambleReveal from '@/components/ScrambleText.vue'
|
||||||
|
import ConfigSelect from '@/ConfigSelect.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'DevicePreview',
|
||||||
|
components: { ConfigSelect, ScrambleReveal, QuickPreview },
|
||||||
|
}
|
||||||
|
</script>
|
||||||
240
src/HapticConfig.vue
Normal file
240
src/HapticConfig.vue
Normal file
@@ -0,0 +1,240 @@
|
|||||||
|
<template>
|
||||||
|
<TabsContent value="haptic-config" class="mt-0">
|
||||||
|
<div class="w-96 bg-zinc-900 bg-opacity-40">
|
||||||
|
|
||||||
|
<div class="space-y-1 p-6">
|
||||||
|
<h1 class="leading-none text-lg">
|
||||||
|
{{ $t('config_options.feedback_designer.title') }}
|
||||||
|
</h1>
|
||||||
|
<p class="text-xs text-muted-foreground">
|
||||||
|
{{ $t('config_options.feedback_designer.subtitle') }}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Separator />
|
||||||
|
<ScrollArea class="h-[720px]">
|
||||||
|
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
|
||||||
|
|
||||||
|
<div class="flex-none">
|
||||||
|
<GaugeCircle class="h-4 w-4" />
|
||||||
|
</div>
|
||||||
|
<div class="flex-initial"><h2 class="text-sm px-2 py-4">
|
||||||
|
{{ $t('config_options.feedback_designer.feedback_type.title') }}</h2></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
|
||||||
|
<Tabs default-value="fd">
|
||||||
|
<TabsList class="grid grid-cols-4 h-auto text-muted-foreground">
|
||||||
|
<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">
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
class="text-xs leading-3 text-wrap">{{ $t('config_options.feedback_designer.feedback_type.fine_detents')
|
||||||
|
}}</span>
|
||||||
|
</div>
|
||||||
|
</TabsTrigger>
|
||||||
|
<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">
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
class="text-xs leading-3 text-wrap">{{ $t('config_options.feedback_designer.feedback_type.coarse_detents')
|
||||||
|
}}</span>
|
||||||
|
</div>
|
||||||
|
</TabsTrigger>
|
||||||
|
<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">
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
class="text-xs leading-3 text-wrap">{{ $t('config_options.feedback_designer.feedback_type.viscous_rotation')
|
||||||
|
}}</span>
|
||||||
|
</div>
|
||||||
|
</TabsTrigger>
|
||||||
|
<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">
|
||||||
|
</div>
|
||||||
|
<span class="text-xs leading-3 text-wrap">
|
||||||
|
{{ $t('config_options.feedback_designer.feedback_type.return_to_center') }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
|
||||||
|
</Tabs>
|
||||||
|
|
||||||
|
<Separator />
|
||||||
|
<div class="flex flex-col p-8 pt-4">
|
||||||
|
<span
|
||||||
|
class="text-sm text-muted-foreground font-mono h-8 text-center">{{ $t('config_options.feedback_designer.total_positions')
|
||||||
|
}}</span>
|
||||||
|
|
||||||
|
<div class="flex w-full max-w-sm items-center gap-0">
|
||||||
|
<Button
|
||||||
|
type="submit" class="rounded-none text-xl font-pixellg align-middle font-bold"
|
||||||
|
@click="count--">
|
||||||
|
-
|
||||||
|
</Button>
|
||||||
|
<Input
|
||||||
|
id="positions"
|
||||||
|
v-model="count"
|
||||||
|
class="rounded-none border-none text-5xl font-pixellg focus-visible:ring-0"
|
||||||
|
type="number" placeholder="10" max="65535" min="10" />
|
||||||
|
<Button
|
||||||
|
type="submit" class="rounded-none text-xl font-pixellg font-bold"
|
||||||
|
@click="count++">
|
||||||
|
+
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
|
||||||
|
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
|
||||||
|
|
||||||
|
<div class="flex-none">
|
||||||
|
<AudioWaveform class="h-4 w-4" />
|
||||||
|
</div>
|
||||||
|
<div class="grow">
|
||||||
|
<h2 class="text-sm px-2 py-4">{{ $t('config_options.feedback_designer.haptic_response.title')
|
||||||
|
}}</h2>
|
||||||
|
</div>
|
||||||
|
<div class="flex-none">
|
||||||
|
<Toggle
|
||||||
|
class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline"
|
||||||
|
size="sm" :default-value="true" aria-label="EnablePrimary">
|
||||||
|
<Power class="w-4 h-4" />
|
||||||
|
</Toggle>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
|
||||||
|
<div class="flex flex-col p-8 pt-4">
|
||||||
|
<span
|
||||||
|
class="text-sm text-muted-foreground font-mono">{{ $t('config_options.feedback_designer.haptic_response.feedback_strength')
|
||||||
|
}}</span>
|
||||||
|
<Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
|
||||||
|
<div class="flex flex-row px-1 py-1.5">
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
<div class="flex flex-col p-8 pt-4">
|
||||||
|
<span
|
||||||
|
class="text-sm text-muted-foreground font-mono">{{ $t('config_options.feedback_designer.haptic_response.bounce_back_strength')
|
||||||
|
}}</span>
|
||||||
|
<Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
|
||||||
|
<div class="flex flex-row px-1 py-1.5">
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
<div class="flex flex-col p-8 pt-4">
|
||||||
|
<span
|
||||||
|
class="text-sm text-muted-foreground font-mono">{{ $t('config_options.feedback_designer.haptic_response.output_ramp_dampening')
|
||||||
|
}}</span>
|
||||||
|
<Slider :default-value="[4]" :max="4" :step="1" class="pt-4" />
|
||||||
|
<div class="flex flex-row px-1 py-1.5">
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
|
||||||
|
|
||||||
|
<div class="flex-none">
|
||||||
|
<AudioLines class="h-4 w-4" />
|
||||||
|
</div>
|
||||||
|
<div class="grow"><h2 class="text-sm px-2 py-4">
|
||||||
|
{{ $t('config_options.feedback_designer.auditory_response.title') }}</h2></div>
|
||||||
|
<div class="flex-none">
|
||||||
|
<Toggle
|
||||||
|
class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline"
|
||||||
|
size="sm" :default-value="true" aria-label="EnablePrimary">
|
||||||
|
<Power class="w-4 h-4" />
|
||||||
|
</Toggle>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
<div class="flex flex-col p-8 pt-4">
|
||||||
|
<span
|
||||||
|
class="text-sm text-muted-foreground font-mono">{{ $t('config_options.feedback_designer.auditory_response.haptic_level')
|
||||||
|
}}</span>
|
||||||
|
<Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
|
||||||
|
<div class="flex flex-row px-1 py-1.5">
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
<div class="flex flex-col p-8 pt-4">
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="text-sm text-muted-foreground font-mono">{{ $t('config_options.feedback_designer.auditory_response.magnitude')
|
||||||
|
}}</span>
|
||||||
|
<Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
|
||||||
|
<div class="flex flex-row px-1 py-1.5">
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono text-left">Faint</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono indent-2">Soft</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono indent-7">Medium</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono text-right">Hard</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</ScrollArea>
|
||||||
|
<Separator />
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { ScrollArea } from '@/components/ui/scroll-area/index.js'
|
||||||
|
import { Tabs } from '@/components/ui/tabs/index.js'
|
||||||
|
import { Slider } from '@/components/ui/slider/index.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'HapticConfig',
|
||||||
|
components: { Slider, Tabs, ScrollArea },
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
input::-webkit-outer-spin-button,
|
||||||
|
input::-webkit-inner-spin-button {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Firefox */
|
||||||
|
input[type=number] {
|
||||||
|
-moz-appearance: textfield;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
214
src/LEDsConfig.vue
Normal file
214
src/LEDsConfig.vue
Normal file
@@ -0,0 +1,214 @@
|
|||||||
|
<template>
|
||||||
|
<TabsContent value="led-config" class="mt-0">
|
||||||
|
<div class="w-96 bg-zinc-900 bg-opacity-40">
|
||||||
|
|
||||||
|
<div class="space-y-1 p-6">
|
||||||
|
<h1 class="leading-none text-lg">
|
||||||
|
{{ $t('config_options.light_designer.title') }}
|
||||||
|
</h1>
|
||||||
|
<p class="text-xs text-muted-foreground">
|
||||||
|
{{ $t('config_options.light_designer.subtitle') }}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Separator />
|
||||||
|
<ScrollArea class="h-[720px]">
|
||||||
|
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
|
||||||
|
|
||||||
|
<div class="flex-none">
|
||||||
|
<GaugeCircle class="h-4 w-4" />
|
||||||
|
</div>
|
||||||
|
<div class="flex-initial"><h2 class="text-sm px-2 py-4">Feedback Type</h2></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
|
||||||
|
<Tabs default-value="fd">
|
||||||
|
<TabsList class="grid grid-cols-4 h-auto text-muted-foreground">
|
||||||
|
<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">
|
||||||
|
</div>
|
||||||
|
<span class="text-xs leading-3 text-wrap">
|
||||||
|
Fine Detents
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</TabsTrigger>
|
||||||
|
<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">
|
||||||
|
</div>
|
||||||
|
<span class="text-xs leading-3 text-wrap">
|
||||||
|
Coarse Detents
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</TabsTrigger>
|
||||||
|
<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">
|
||||||
|
</div>
|
||||||
|
<span class="text-xs leading-3 text-wrap">
|
||||||
|
Viscous Rotation
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</TabsTrigger>
|
||||||
|
<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">
|
||||||
|
</div>
|
||||||
|
<span class="text-xs leading-3 text-wrap">
|
||||||
|
Return to Center
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
|
||||||
|
</Tabs>
|
||||||
|
|
||||||
|
<Separator />
|
||||||
|
<div class="flex flex-col p-8 pt-4">
|
||||||
|
<span class="text-sm text-muted-foreground font-mono h-8 text-center">Total Positions</span>
|
||||||
|
|
||||||
|
<div class="flex w-full max-w-sm items-center gap-0">
|
||||||
|
<Button type="submit" class="rounded-l-full text-xl font-mono align-middle font-bold">
|
||||||
|
-
|
||||||
|
</Button>
|
||||||
|
<Input
|
||||||
|
id="positions" class="rounded-none text-xl font-pixellg" type="number" placeholder="10"
|
||||||
|
default-value="60" max="65535" min="10" />
|
||||||
|
<Button type="submit" class="rounded-r-full text-xl font-mono font-bold">
|
||||||
|
+
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
|
||||||
|
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
|
||||||
|
|
||||||
|
<div class="flex-none">
|
||||||
|
<AudioWaveform class="h-4 w-4" />
|
||||||
|
</div>
|
||||||
|
<div class="grow">
|
||||||
|
<h2 class="text-sm px-2 py-4">Haptic Response</h2>
|
||||||
|
</div>
|
||||||
|
<div class="flex-none">
|
||||||
|
<Toggle
|
||||||
|
class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline"
|
||||||
|
size="sm" :default-value="true" aria-label="EnablePrimary">
|
||||||
|
<Power class="w-4 h-4" />
|
||||||
|
</Toggle>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
|
||||||
|
<div class="flex flex-col p-8 pt-4">
|
||||||
|
<span class="text-sm text-muted-foreground font-mono">Feedback Strength</span>
|
||||||
|
<Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
|
||||||
|
<div class="flex flex-row px-1 py-1.5">
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
<div class="flex flex-col p-8 pt-4">
|
||||||
|
<span class="text-sm text-muted-foreground font-mono">Bounce Back Strength</span>
|
||||||
|
<Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
|
||||||
|
<div class="flex flex-row px-1 py-1.5">
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
<div class="flex flex-col p-8 pt-4">
|
||||||
|
<span class="text-sm text-muted-foreground font-mono">Output Ramp Dampening</span>
|
||||||
|
<Slider :default-value="[4]" :max="4" :step="1" class="pt-4" />
|
||||||
|
<div class="flex flex-row px-1 py-1.5">
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
|
||||||
|
|
||||||
|
<div class="flex-none">
|
||||||
|
<AudioLines class="h-4 w-4" />
|
||||||
|
</div>
|
||||||
|
<div class="grow"><h2 class="text-sm px-2 py-4"> Auditory Response</h2></div>
|
||||||
|
<div class="flex-none">
|
||||||
|
<Toggle
|
||||||
|
class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline"
|
||||||
|
size="sm" :default-value="true" aria-label="EnablePrimary">
|
||||||
|
<Power class="w-4 h-4" />
|
||||||
|
</Toggle>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
<div class="flex flex-col p-8 pt-4">
|
||||||
|
<span class="text-sm text-muted-foreground font-mono">Auditory Haptic Level</span>
|
||||||
|
<Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
|
||||||
|
<div class="flex flex-row px-1 py-1.5">
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
<div class="flex flex-col p-8 pt-4">
|
||||||
|
|
||||||
|
<span class="text-sm text-muted-foreground font-mono">Auditory Magnitude</span>
|
||||||
|
<Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
|
||||||
|
<div class="flex flex-row px-1 py-1.5">
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono text-left">Faint</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono indent-2">Soft</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono indent-7">Medium</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono text-right">Hard</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</ScrollArea>
|
||||||
|
<Separator />
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'LEDsConfig',
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
input::-webkit-outer-spin-button,
|
||||||
|
input::-webkit-inner-spin-button {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Firefox */
|
||||||
|
input[type=number] {
|
||||||
|
-moz-appearance: textfield;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
279
src/MappingConfig.vue
Normal file
279
src/MappingConfig.vue
Normal file
@@ -0,0 +1,279 @@
|
|||||||
|
<template>
|
||||||
|
<TabsContent value="map-config" class="mt-0">
|
||||||
|
<div class="w-96 bg-zinc-900 bg-opacity-40">
|
||||||
|
|
||||||
|
<div class="space-y-1 p-6">
|
||||||
|
<h1 class="leading-none text-lg">
|
||||||
|
{{ $t('config_options.mapping_configuration.title') }}
|
||||||
|
</h1>
|
||||||
|
<p class="text-xs text-muted-foreground">
|
||||||
|
{{ $t('config_options.mapping_configuration.subtitle') }}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Separator />
|
||||||
|
<ScrollArea class="h-[720px]">
|
||||||
|
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
|
||||||
|
|
||||||
|
<div class="flex-none">
|
||||||
|
<Keyboard class="h-4 w-4" />
|
||||||
|
</div>
|
||||||
|
<div class="flex-initial"><h2 class="text-sm px-2 py-4">
|
||||||
|
{{ $t('config_options.mapping_configuration.key_mapping.title') }}</h2></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
|
||||||
|
<Tabs default-value="fd">
|
||||||
|
<TabsList class="grid grid-cols-4 h-auto text-muted-foreground">
|
||||||
|
<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">
|
||||||
|
</div>
|
||||||
|
<span class="text-xs leading-3 text-wrap">
|
||||||
|
{{ $t('config_options.mapping_configuration.key_mapping.switch.a') }}
|
||||||
|
<Badge class="bg-orange-400 mt-2">Shift</Badge>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</TabsTrigger>
|
||||||
|
<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">
|
||||||
|
</div>
|
||||||
|
<span class="text-xs leading-3 text-wrap">
|
||||||
|
{{ $t('config_options.mapping_configuration.key_mapping.switch.b') }}
|
||||||
|
<Badge class="bg-zinc-400 mt-2">Fn1</Badge>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</TabsTrigger>
|
||||||
|
<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">
|
||||||
|
</div>
|
||||||
|
<span class="text-xs leading-3 text-wrap">
|
||||||
|
{{ $t('config_options.mapping_configuration.key_mapping.switch.c') }}
|
||||||
|
<Badge class="bg-zinc-400 mt-2">Fn2</Badge>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</TabsTrigger>
|
||||||
|
<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">
|
||||||
|
</div>
|
||||||
|
<span class="text-xs leading-3 text-wrap">
|
||||||
|
{{ $t('config_options.mapping_configuration.key_mapping.switch.d') }}
|
||||||
|
<Badge class="bg-zinc-400 mt-2">M0</Badge>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
|
||||||
|
</Tabs>
|
||||||
|
|
||||||
|
<Separator />
|
||||||
|
<Command>
|
||||||
|
|
||||||
|
<CommandList>
|
||||||
|
<CommandEmpty>{{ $t('config_options.mapping_configuration.key_mapping.not_found') }}
|
||||||
|
|
||||||
|
</CommandEmpty>
|
||||||
|
<CommandInput
|
||||||
|
:placeholder="$t('config_options.mapping_configuration.key_mapping.search_placeholder')" />
|
||||||
|
<CommandGroup heading="Common">
|
||||||
|
<CommandItem value="backspace">
|
||||||
|
<Squircle color="grey" class="w-4 h-4 mr-2" />
|
||||||
|
Backspace
|
||||||
|
</CommandItem>
|
||||||
|
<CommandItem value="delete">
|
||||||
|
<Squircle color="grey" class="w-4 h-4 mr-2" />
|
||||||
|
Delete
|
||||||
|
</CommandItem>
|
||||||
|
<CommandItem value="enter">
|
||||||
|
<Squircle color="grey" class="w-4 h-4 mr-2" />
|
||||||
|
Enter
|
||||||
|
</CommandItem>
|
||||||
|
<CommandItem value="end">
|
||||||
|
<Squircle color="grey" class="w-4 h-4 mr-2" />
|
||||||
|
End
|
||||||
|
</CommandItem>
|
||||||
|
<CommandItem value="arrow up">
|
||||||
|
<Squircle color="grey" class="w-4 h-4 mr-2" />
|
||||||
|
Arrow Up
|
||||||
|
</CommandItem>
|
||||||
|
<CommandItem value="arrow down">
|
||||||
|
<Squircle color="grey" class="w-4 h-4 mr-2" />
|
||||||
|
Arrow Down
|
||||||
|
</CommandItem>
|
||||||
|
<CommandItem value="arrow left">
|
||||||
|
<Squircle color="grey" class="w-4 h-4 mr-2" />
|
||||||
|
Arrow Left
|
||||||
|
</CommandItem>
|
||||||
|
<CommandItem value="arrow right">
|
||||||
|
<Squircle color="grey" class="w-4 h-4 mr-2" />
|
||||||
|
Arrow Right
|
||||||
|
</CommandItem>
|
||||||
|
</CommandGroup>
|
||||||
|
<CommandSeparator />
|
||||||
|
<CommandGroup heading="MIDI Control Changes">
|
||||||
|
<CommandItem value="cc0">
|
||||||
|
<KeyboardMusic color="grey" class="w-4 h-4 mr-2" />
|
||||||
|
Bank Select (CC0)
|
||||||
|
</CommandItem>
|
||||||
|
<CommandItem value="cc2">
|
||||||
|
<KeyboardMusic color="grey" class="w-4 h-4 mr-2" />
|
||||||
|
Modulation (CC1)
|
||||||
|
</CommandItem>
|
||||||
|
<CommandItem value="cc3">
|
||||||
|
<KeyboardMusic color="grey" class="w-4 h-4 mr-2" />
|
||||||
|
Foot Controller (CC4)
|
||||||
|
</CommandItem>
|
||||||
|
<CommandItem value="cc4">
|
||||||
|
<KeyboardMusic color="grey" class="w-4 h-4 mr-2" />
|
||||||
|
Portamento (CC5)
|
||||||
|
</CommandItem>
|
||||||
|
<CommandItem value="cc5">
|
||||||
|
<KeyboardMusic color="grey" class="w-4 h-4 mr-2" />
|
||||||
|
Volume (CC7)
|
||||||
|
</CommandItem>
|
||||||
|
</CommandGroup>
|
||||||
|
<CommandGroup heading="Macros">
|
||||||
|
<CommandItem value="Page Scroll">
|
||||||
|
<Squircle color="grey" class="w-4 h-4 mr-2" />
|
||||||
|
Page Scroller (M0)
|
||||||
|
</CommandItem>
|
||||||
|
</CommandGroup>
|
||||||
|
</CommandList>
|
||||||
|
<CommandSeparator />
|
||||||
|
|
||||||
|
</Command>
|
||||||
|
<Separator />
|
||||||
|
|
||||||
|
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
|
||||||
|
|
||||||
|
<div class="flex-none">
|
||||||
|
<GaugeCircle class="h-4 w-4" />
|
||||||
|
</div>
|
||||||
|
<div class="grow">
|
||||||
|
<h2 class="text-sm px-2 py-4">{{ $t('config_options.mapping_configuration.knob_mapping.title')
|
||||||
|
}}</h2>
|
||||||
|
</div>
|
||||||
|
<div class="flex-none">
|
||||||
|
<Toggle
|
||||||
|
class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline"
|
||||||
|
size="sm" :default-value="true" aria-label="EnablePrimary">
|
||||||
|
<Power class="w-4 h-4" />
|
||||||
|
</Toggle>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
|
||||||
|
<div class="flex flex-col p-8 pt-4">
|
||||||
|
<span class="text-sm text-muted-foreground font-mono">Feedback Strength</span>
|
||||||
|
<Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
|
||||||
|
<div class="flex flex-row px-1 py-1.5">
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
<div class="flex flex-col p-8 pt-4">
|
||||||
|
<span class="text-sm text-muted-foreground font-mono">Bounce Back Strength</span>
|
||||||
|
<Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
|
||||||
|
<div class="flex flex-row px-1 py-1.5">
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
<div class="flex flex-col p-8 pt-4">
|
||||||
|
<span class="text-sm text-muted-foreground font-mono">Output Ramp Dampening</span>
|
||||||
|
<Slider :default-value="[4]" :max="4" :step="1" class="pt-4" />
|
||||||
|
<div class="flex flex-row px-1 py-1.5">
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
|
||||||
|
|
||||||
|
<div class="flex-none">
|
||||||
|
<AudioLines class="h-4 w-4" />
|
||||||
|
</div>
|
||||||
|
<div class="grow"><h2 class="text-sm px-2 py-4"> Auditory Response</h2></div>
|
||||||
|
<div class="flex-none">
|
||||||
|
<Toggle
|
||||||
|
class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline"
|
||||||
|
size="sm" :default-value="true" aria-label="EnablePrimary">
|
||||||
|
<Power class="w-4 h-4" />
|
||||||
|
</Toggle>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
<div class="flex flex-col p-8 pt-4">
|
||||||
|
<span class="text-sm text-muted-foreground font-mono">Auditory Haptic Level</span>
|
||||||
|
<Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
|
||||||
|
<div class="flex flex-row px-1 py-1.5">
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
<div class="flex flex-col p-8 pt-4">
|
||||||
|
|
||||||
|
<span class="text-sm text-muted-foreground font-mono">Auditory Magnitude</span>
|
||||||
|
<Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
|
||||||
|
<div class="flex flex-row px-1 py-1.5">
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono text-left">Faint</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono indent-2">Soft</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono indent-7">Medium</div>
|
||||||
|
<div class="flex-1 text-xs text-muted-foreground font-mono text-right">Hard</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</ScrollArea>
|
||||||
|
<Separator />
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'MappingConfig',
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
input::-webkit-outer-spin-button,
|
||||||
|
input::-webkit-inner-spin-button {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Firefox */
|
||||||
|
input[type=number] {
|
||||||
|
-moz-appearance: textfield;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
41
src/Navbar.vue
Normal file
41
src/Navbar.vue
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
<template>
|
||||||
|
<div class="flex">
|
||||||
|
<Menubar class="w-full rounded-none bg-zinc-950">
|
||||||
|
<MenubarMenu>
|
||||||
|
<MenubarTrigger v-t="'navbar.device.title'" />
|
||||||
|
<MenubarContent>
|
||||||
|
<!-- TODO: Switch keyboard shortcut icons based on platform -->
|
||||||
|
<MenubarItem>
|
||||||
|
{{ $t('navbar.device.disconnect') }}
|
||||||
|
<MenubarShortcut>⌘D</MenubarShortcut>
|
||||||
|
</MenubarItem>
|
||||||
|
<MenubarItem>{{ $t('navbar.device.about') }}</MenubarItem>
|
||||||
|
<MenubarSeparator />
|
||||||
|
<MenubarItem>{{ $t('navbar.device.preferences') }}</MenubarItem>
|
||||||
|
<MenubarSeparator />
|
||||||
|
<MenubarItem>{{ $t('navbar.device.export') }}
|
||||||
|
<MenubarShortcut>⌘E</MenubarShortcut>
|
||||||
|
</MenubarItem>
|
||||||
|
<MenubarItem>{{ $t('navbar.device.import') }}
|
||||||
|
<MenubarShortcut>⌘I</MenubarShortcut>
|
||||||
|
</MenubarItem>
|
||||||
|
<MenubarSeparator />
|
||||||
|
<MenubarItem>{{ $t('navbar.device.quit') }}
|
||||||
|
<MenubarShortcut>⌘Q</MenubarShortcut>
|
||||||
|
</MenubarItem>
|
||||||
|
</MenubarContent>
|
||||||
|
</MenubarMenu>
|
||||||
|
</Menubar>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import {
|
||||||
|
Menubar,
|
||||||
|
MenubarMenu,
|
||||||
|
MenubarShortcut,
|
||||||
|
MenubarSeparator,
|
||||||
|
MenubarItem,
|
||||||
|
MenubarTrigger,
|
||||||
|
MenubarContent,
|
||||||
|
} from '@/components/ui/menubar/index.js'
|
||||||
|
</script>
|
||||||
156
src/ProgramConfig.vue
Normal file
156
src/ProgramConfig.vue
Normal file
@@ -0,0 +1,156 @@
|
|||||||
|
<template>
|
||||||
|
<TabsContent value="prog-config" class="mt-0">
|
||||||
|
<div class="w-96 bg-zinc-900 bg-opacity-40">
|
||||||
|
|
||||||
|
<div class="space-y-1 p-6">
|
||||||
|
<h1 class="leading-none text-lg">
|
||||||
|
{{ $t('config_options.program_settings.title') }}
|
||||||
|
</h1>
|
||||||
|
<p class="text-xs text-muted-foreground">
|
||||||
|
{{ $t('config_options.program_settings.subtitle') }}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Separator />
|
||||||
|
<ScrollArea class="h-[720px]">
|
||||||
|
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
|
||||||
|
|
||||||
|
<div class="flex-none">
|
||||||
|
<Cable class="h-4 w-4" />
|
||||||
|
</div>
|
||||||
|
<div class="flex-initial"><h2 class="text-sm px-2 py-4">
|
||||||
|
{{ $t('config_options.program_settings.connection_type.title') }}</h2></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
|
||||||
|
<Tabs default-value="fd">
|
||||||
|
<TabsList class="grid grid-cols-2 h-auto text-muted-foreground">
|
||||||
|
<TabsTrigger value="fd">
|
||||||
|
<div class="grid grid-flow-row auto-rows-max justify-items-center ">
|
||||||
|
<div class="w-24 size-w mb-2">
|
||||||
|
<img src="@/assets/gui-ico/ico-usb-logo.svg" alt="usb-logo">
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
class="text-xs leading-3 text-wrap">{{ $t('config_options.program_settings.connection_type.usb')
|
||||||
|
}}</span>
|
||||||
|
</div>
|
||||||
|
</TabsTrigger>
|
||||||
|
<TabsTrigger value="cd">
|
||||||
|
<div class="grid grid-flow-row auto-rows-max justify-items-center">
|
||||||
|
<div class="w-24 size-w mb-2">
|
||||||
|
<img src="@/assets/gui-ico/ico-midi-logo.svg" alt="midi-logo">
|
||||||
|
</div>
|
||||||
|
<span class="text-xs leading-3 text-wrap">
|
||||||
|
{{ $t('config_options.program_settings.connection_type.midi') }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
|
||||||
|
</Tabs>
|
||||||
|
|
||||||
|
|
||||||
|
<Separator />
|
||||||
|
|
||||||
|
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
|
||||||
|
|
||||||
|
<div class="flex-none">
|
||||||
|
<Type class="h-4 w-4" />
|
||||||
|
</div>
|
||||||
|
<div class="grow">
|
||||||
|
<h2 class="text-sm px-2 py-4">{{ $t('config_options.program_settings.profile_properties.title')
|
||||||
|
}}</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
|
||||||
|
<div class="flex flex-col p-8 py-4">
|
||||||
|
<span
|
||||||
|
class="text-sm text-muted-foreground font-mono pb-4">{{ $t('config_options.program_settings.profile_properties.program_name')
|
||||||
|
}}</span>
|
||||||
|
<Input
|
||||||
|
type="text" :placeholder="$t('config_options.program_settings.profile_properties.program_name')"
|
||||||
|
class="text-xl border-0 text-center border-b rounded-none focus-visible:ring-0 focus-visible:border-emerald-500 font-pixelsm uppercase"
|
||||||
|
default-value="Oscillator 1" maxlength="20" />
|
||||||
|
|
||||||
|
<Label for="text" class="text-muted-foreground text-right mt-1 text-xs">16/20</Label>
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
<div class="flex flex-col p-8 py-4">
|
||||||
|
<span
|
||||||
|
class="text-sm text-muted-foreground font-mono pb-4">{{ $t('config_options.program_settings.profile_properties.program_description')
|
||||||
|
}}</span>
|
||||||
|
<Textarea
|
||||||
|
class="text-lg px-3 bg-inherit text-center focus-visible:outline-none border-b focus-visible:border-emerald-500 resize-none font-pixelsm text-muted-foreground uppercase"
|
||||||
|
:placeholder="$t('config_options.program_settings.profile_properties.program_description')"
|
||||||
|
default-value="Adjust Korg Oscillator Waveform " rows="2"
|
||||||
|
maxlength="50" />
|
||||||
|
<Label for="textarea" class="text-muted-foreground text-right mt-1 text-xs">24/50</Label>
|
||||||
|
<div class="flex items-center space-x-4 space-y-1">
|
||||||
|
<Switch id="airplane-mode" default-checked="true" />
|
||||||
|
<Label
|
||||||
|
for="airplane-mode"
|
||||||
|
class="text-xs text-muted-foreground">{{
|
||||||
|
$t('config_options.program_settings.profile_properties.show_description')
|
||||||
|
}}</Label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
|
||||||
|
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
|
||||||
|
|
||||||
|
<div class="flex-none">
|
||||||
|
<Replace class="h-4 w-4" />
|
||||||
|
</div>
|
||||||
|
<div class="grow"><h2 class="text-sm px-2 py-4">
|
||||||
|
{{ $t('config_options.program_settings.internal_profile_toggle.title') }}</h2></div>
|
||||||
|
<div class="flex-none">
|
||||||
|
<Toggle
|
||||||
|
class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline"
|
||||||
|
size="sm" :default-value="true" aria-label="EnablePrimary">
|
||||||
|
<Power class="w-4 h-4" />
|
||||||
|
</Toggle>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<p class="flex flex-col p-8 py-4 text-muted-foreground text-xs">
|
||||||
|
{{ $t('config_options.program_settings.internal_profile_toggle.subtitle') }}
|
||||||
|
<Separator class="mt-4" />
|
||||||
|
<span class="space-y-4">{{ $t('config_options.program_settings.internal_profile_toggle.operation')
|
||||||
|
}}: <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.program_settings.internal_profile_toggle.warning') }}</span>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
|
||||||
|
</ScrollArea>
|
||||||
|
<Separator />
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'ProgramConfig',
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
input::-webkit-outer-spin-button,
|
||||||
|
input::-webkit-inner-spin-button {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Firefox */
|
||||||
|
input[type=number] {
|
||||||
|
-moz-appearance: textfield;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -15,6 +15,7 @@ const store = createStore({
|
|||||||
state() {
|
state() {
|
||||||
return {}
|
return {}
|
||||||
},
|
},
|
||||||
|
mutations: {},
|
||||||
})
|
})
|
||||||
|
|
||||||
// Create VueI18n instance with locales loaded from /lang directory
|
// Create VueI18n instance with locales loaded from /lang directory
|
||||||
|
|||||||
Reference in New Issue
Block a user