UPD: Redo main col layout
This commit is contained in:
Robert Kossessa
10
src/App.vue
10
src/App.vue
@@ -14,17 +14,17 @@ const currentConfigPage = ref('profile_settings')
|
||||
<template>
|
||||
<main class="select-none">
|
||||
<Navbar />
|
||||
<div class="flex flex-row">
|
||||
<ProfileManager class="border-solid border-0 border-r bg-zinc-900 bg-opacity-30"/>
|
||||
<div class="border-solid border-0 border-r" style="width: 25rem">
|
||||
<div class="grid grid-cols-11">
|
||||
<ProfileManager class="col-span-3 border-solid border-0 border-r bg-zinc-900 bg-opacity-30" />
|
||||
<div class="col-span-4 border-solid border-0 border-r">
|
||||
<DevicePreview />
|
||||
<ConfigSection :title="$t('config_options.title')" :foldable="false" :icon-component="Bolt">
|
||||
<ConfigSelect v-model="currentConfigPage" />
|
||||
</ConfigSection>
|
||||
</div>
|
||||
<ConfigPane
|
||||
:page="currentConfigPage"
|
||||
class="border-solid border-0 border-r bg-zinc-900 bg-opacity-30" />
|
||||
class="col-span-4 border-solid border-0 border-r bg-zinc-900 bg-opacity-30"
|
||||
:page="currentConfigPage" />
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
@@ -1,56 +1,48 @@
|
||||
<template>
|
||||
<TabsContent value="haptic-config" class="mt-0">
|
||||
<div class="w-96 bg-zinc-900 bg-opacity-40">
|
||||
<ScrollArea class="h-[720px]">
|
||||
<ConfigSection
|
||||
:title="$t('config_options.feedback_designer.feedback_type.title')"
|
||||
:icon-component="GaugeCircle">
|
||||
<div class="flex font-heading">
|
||||
<FeedbackTypeButton
|
||||
v-for="(option, key) in feedbackTypeOptions" :key="key" :title="$t(option.titleKey)"
|
||||
:icon="option.icon" :selected="feedbackType===key" @select="feedbackType=key" />
|
||||
</div>
|
||||
</ConfigSection>
|
||||
<ConfigSection
|
||||
:title="$t('config_options.feedback_designer.haptic_response.title')"
|
||||
:icon-component="AudioWaveform"
|
||||
:show-toggle="true">
|
||||
<SteppedSlider
|
||||
v-model="feedbackStrength"
|
||||
:label="$t('config_options.feedback_designer.haptic_response.feedback_strength')" />
|
||||
<Separator />
|
||||
<SteppedSlider
|
||||
v-model="bounceBackStrength"
|
||||
:label="$t('config_options.feedback_designer.haptic_response.bounce_back_strength')" />
|
||||
<Separator />
|
||||
<SteppedSlider
|
||||
v-model="outputRampDampening"
|
||||
:label="$t('config_options.feedback_designer.haptic_response.output_ramp_dampening')" />
|
||||
</ConfigSection>
|
||||
<ConfigSection
|
||||
:title="$t('config_options.feedback_designer.auditory_response.title')"
|
||||
:icon-component="AudioLines" :show-toggle="true">
|
||||
<SteppedSlider
|
||||
v-model="auditoryHapticLevel"
|
||||
:label="$t('config_options.feedback_designer.auditory_response.haptic_level')" />
|
||||
<Separator />
|
||||
<SteppedSlider
|
||||
v-model="auditoryMagnitude"
|
||||
:label="$t('config_options.feedback_designer.auditory_response.magnitude')"
|
||||
:max="3"
|
||||
:named-positions="[
|
||||
<ConfigSection
|
||||
:title="$t('config_options.feedback_designer.feedback_type.title')"
|
||||
:icon-component="GaugeCircle">
|
||||
<div class="flex font-heading">
|
||||
<FeedbackTypeButton
|
||||
v-for="(option, key) in feedbackTypeOptions" :key="key" :title="$t(option.titleKey)"
|
||||
:icon="option.icon" :selected="feedbackType===key" @select="feedbackType=key" />
|
||||
</div>
|
||||
</ConfigSection>
|
||||
<ConfigSection
|
||||
:title="$t('config_options.feedback_designer.haptic_response.title')"
|
||||
:icon-component="AudioWaveform"
|
||||
:show-toggle="true">
|
||||
<SteppedSlider
|
||||
v-model="feedbackStrength"
|
||||
:label="$t('config_options.feedback_designer.haptic_response.feedback_strength')" />
|
||||
<Separator />
|
||||
<SteppedSlider
|
||||
v-model="bounceBackStrength"
|
||||
:label="$t('config_options.feedback_designer.haptic_response.bounce_back_strength')" />
|
||||
<Separator />
|
||||
<SteppedSlider
|
||||
v-model="outputRampDampening"
|
||||
:label="$t('config_options.feedback_designer.haptic_response.output_ramp_dampening')" />
|
||||
</ConfigSection>
|
||||
<ConfigSection
|
||||
:title="$t('config_options.feedback_designer.auditory_response.title')"
|
||||
:icon-component="AudioLines" :show-toggle="true">
|
||||
<SteppedSlider
|
||||
v-model="auditoryHapticLevel"
|
||||
:label="$t('config_options.feedback_designer.auditory_response.haptic_level')" />
|
||||
<Separator />
|
||||
<SteppedSlider
|
||||
v-model="auditoryMagnitude"
|
||||
:label="$t('config_options.feedback_designer.auditory_response.magnitude')"
|
||||
:max="3"
|
||||
:named-positions="[
|
||||
{value:0, label: 'Faint'},
|
||||
{value:1, label: 'Soft'},
|
||||
{value:2, label: 'Normal'},
|
||||
{value:3, label: 'Loud'}]" />
|
||||
</ConfigSection>
|
||||
</ScrollArea>
|
||||
<Separator />
|
||||
</div>
|
||||
</TabsContent>
|
||||
</ConfigSection>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ScrollArea } from '@/components/ui/scroll-area/index.js'
|
||||
import { AudioLines, AudioWaveform, GaugeCircle } from 'lucide-vue-next'
|
||||
import ConfigSection from '@/components/config/ConfigSection.vue'
|
||||
import SteppedSlider from '@/components/config/SteppedSlider.vue'
|
||||
|
||||
@@ -1,24 +1,17 @@
|
||||
<template>
|
||||
<TabsContent value="led-config" class="mt-0">
|
||||
<div class="w-96 bg-zinc-900 bg-opacity-40">
|
||||
<ScrollArea class="h-[720px]">
|
||||
<ConfigSection
|
||||
:title="$t('config_options.light_designer.led_feedback')" :icon-component="Lightbulb"
|
||||
:show-toggle="true">
|
||||
<h2 class="p-6 inline-block">{{ $t('config_options.light_designer.led_mode') }}</h2> [TODO]
|
||||
<div class="px-6 py-2">
|
||||
<Slider v-model="brightnessSliderModel" max="100" class="h-10" />
|
||||
</div>
|
||||
</ConfigSection>
|
||||
<ConfigSection :title="$t('config_options.light_designer.led_colors')" :icon-component="Palette">
|
||||
<PaletteInput v-model="colors" />
|
||||
</ConfigSection>
|
||||
</ScrollArea>
|
||||
<ConfigSection
|
||||
:title="$t('config_options.light_designer.led_feedback')" :icon-component="Lightbulb"
|
||||
:show-toggle="true">
|
||||
<h2 class="p-6 inline-block">{{ $t('config_options.light_designer.led_mode') }}</h2> [TODO]
|
||||
<div class="px-6 py-2">
|
||||
<Slider v-model="brightnessSliderModel" max="100" class="h-10" />
|
||||
</div>
|
||||
</TabsContent>
|
||||
</ConfigSection>
|
||||
<ConfigSection :title="$t('config_options.light_designer.led_colors')" :icon-component="Palette">
|
||||
<PaletteInput v-model="colors" />
|
||||
</ConfigSection>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ScrollArea } from '@/components/ui/scroll-area/index.js'
|
||||
import { Lightbulb, Palette } from 'lucide-vue-next'
|
||||
import ConfigSection from '@/components/config/ConfigSection.vue'
|
||||
import PaletteInput from '@/components/config/PaletteInput.vue'
|
||||
|
||||
@@ -1,187 +1,175 @@
|
||||
<template>
|
||||
<TabsContent value="map-config" class="mt-0">
|
||||
<div class="w-96 bg-zinc-900 bg-opacity-40">
|
||||
<ScrollArea class="h-[720px]">
|
||||
<ConfigSection :title="$t('config_options.mapping_configuration.key_mapping.title')" :icon-component="Keyboard">
|
||||
<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">
|
||||
<ConfigSection :title="$t('config_options.mapping_configuration.key_mapping.title')" :icon-component="Keyboard">
|
||||
<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">
|
||||
</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">
|
||||
</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">
|
||||
</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 />
|
||||
</ConfigSection>
|
||||
|
||||
<ConfigSection
|
||||
:title="$t('config_options.mapping_configuration.knob_mapping.title')"
|
||||
:icon-component="GaugeCircle">
|
||||
<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>
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
</div>
|
||||
</ConfigSection>
|
||||
</ScrollArea>
|
||||
<Separator />
|
||||
</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 />
|
||||
</ConfigSection>
|
||||
|
||||
<ConfigSection
|
||||
:title="$t('config_options.mapping_configuration.knob_mapping.title')"
|
||||
:icon-component="GaugeCircle">
|
||||
<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>
|
||||
</TabsContent>
|
||||
<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>
|
||||
</ConfigSection>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ScrollArea } from '@/components/ui/scroll-area/index.js'
|
||||
import { Badge } from '@/components/ui/badge/index.js'
|
||||
import { Tabs } from '@/components/ui/tabs/index.js'
|
||||
import {
|
||||
|
||||
@@ -1,64 +1,62 @@
|
||||
<template>
|
||||
<div class="w-96">
|
||||
<ConfigSection :title="$t('config_options.profile_settings.profile_properties.title')" :icon-component="Type">
|
||||
<WIP />
|
||||
<div class="hidden">
|
||||
<div class="flex flex-col p-8 py-4">
|
||||
<ConfigSection :title="$t('config_options.profile_settings.profile_properties.title')" :icon-component="Type">
|
||||
<WIP />
|
||||
<div class="hidden">
|
||||
<div class="flex flex-col p-8 py-4">
|
||||
<span
|
||||
class="text-sm text-muted-foreground font-mono pb-4">{{ $t('config_options.profile_settings.profile_properties.profile_name')
|
||||
}}</span>
|
||||
<Input
|
||||
type="text" :placeholder="$t('config_options.profile_settings.profile_properties.profile_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" />
|
||||
<Input
|
||||
type="text" :placeholder="$t('config_options.profile_settings.profile_properties.profile_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">
|
||||
<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.profile_settings.profile_properties.profile_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.profile_settings.profile_properties.profile_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.profile_settings.profile_properties.show_description')
|
||||
}}</Label>
|
||||
</div>
|
||||
<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.profile_settings.profile_properties.profile_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.profile_settings.profile_properties.show_description')
|
||||
}}</Label>
|
||||
</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>
|
||||
</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')"
|
||||
:icon-component="Replace" :show-toggle="true">
|
||||
<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="py-4 space-y-4">{{ $t('config_options.profile_settings.internal_profile_toggle.operation')
|
||||
}}:<br>
|
||||
<ConfigSection
|
||||
:title="$t('config_options.profile_settings.internal_profile_toggle.title')"
|
||||
:icon-component="Replace" :show-toggle="true">
|
||||
<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="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 />
|
||||
<span class="pt-4">{{ $t('config_options.profile_settings.internal_profile_toggle.warning') }}</span>
|
||||
</p>
|
||||
</ConfigSection>
|
||||
</div>
|
||||
class="bg-zinc-500">Fn3</Badge> + <Badge>Rotation</Badge></span>
|
||||
<Separator />
|
||||
<span class="pt-4">{{ $t('config_options.profile_settings.internal_profile_toggle.warning') }}</span>
|
||||
</p>
|
||||
</ConfigSection>
|
||||
</template>
|
||||
<script setup>
|
||||
import { Label } from '@/components/ui/label/index.js'
|
||||
|
||||
@@ -1,57 +1,30 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<div class="px-4 py-5">
|
||||
<h1 class="text-lg">
|
||||
{{ $t('preview.title')}}
|
||||
</h1>
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
<div
|
||||
class="flex bg-cover w-72 h-72 mb-7"
|
||||
style="background-image: url(src/assets/gui-ico/xl-bg-ico.svg)">
|
||||
<div v-if="profiles" class="flex flex-col w-full justify-center p-10 rounded-full overflow-hidden">
|
||||
<div class="self-center w-8 mb-1 opacity-50">
|
||||
<img src="@/assets/gui-ico/ico-midi-logo.svg" alt="midi-logo">
|
||||
</div>
|
||||
<h2 v-for="feedbackConfig in profiles" :key="feedbackConfig" class="self-center font-pixellg text-5xl ">
|
||||
{{ feedbackConfig.pos }}</h2>
|
||||
|
||||
<div class="self-center font-pixelsm text-md pt-1 pb-2">{{ profiles.name }}</div>
|
||||
<DeviceBar class="self-center"/>
|
||||
<div id="scales" class="flex self-center text-xs py-0" />
|
||||
|
||||
<div
|
||||
v-for="profileConfig in profiles"
|
||||
:key="profileConfig"
|
||||
class="self-center text-center text-muted-foreground font-pixelsm text-xs pt-0.5 w-40">
|
||||
{{ profileConfig.profileDesc }}
|
||||
</div>
|
||||
<div class="px-4 py-5">
|
||||
<h1 class="text-lg">
|
||||
{{ $t('preview.title') }}
|
||||
</h1>
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
<div
|
||||
class="flex bg-cover m-6 w-full aspect-square"
|
||||
style="background-image: url(src/assets/gui-ico/xl-bg-ico.svg)">
|
||||
<div class="flex flex-col w-full justify-center p-10 rounded-full overflow-hidden">
|
||||
<div class="self-center w-8 mb-1 opacity-50">
|
||||
<img src="@/assets/gui-ico/ico-midi-logo.svg" alt="midi-logo">
|
||||
</div>
|
||||
<h2 class="self-center font-pixellg text-5xl ">1337</h2>
|
||||
<div class="self-center font-pixelsm text-md pt-1 pb-2">Profile name</div>
|
||||
<DeviceBar class="self-center" />
|
||||
<span
|
||||
class="self-center text-center w-48 font-pixelsm text-xs text-muted-foreground">
|
||||
Profile description will go here!
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
<script setup>
|
||||
import DeviceBar from '@/components/device/DeviceBar.vue'
|
||||
|
||||
export default {
|
||||
name: 'DevicePreview',
|
||||
components: { DeviceBar },
|
||||
data() {
|
||||
return {
|
||||
profiles: [],
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
try {
|
||||
const res = await axios.get('http://localhost:3001/profiles/5867')
|
||||
this.profiles = res.data
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user