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>
|
<template>
|
||||||
<main class="select-none">
|
<main class="select-none">
|
||||||
<Navbar />
|
<Navbar />
|
||||||
<div class="flex flex-row">
|
<div class="grid grid-cols-11">
|
||||||
<ProfileManager class="border-solid border-0 border-r bg-zinc-900 bg-opacity-30"/>
|
<ProfileManager class="col-span-3 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="col-span-4 border-solid border-0 border-r">
|
||||||
<DevicePreview />
|
<DevicePreview />
|
||||||
<ConfigSection :title="$t('config_options.title')" :foldable="false" :icon-component="Bolt">
|
<ConfigSection :title="$t('config_options.title')" :foldable="false" :icon-component="Bolt">
|
||||||
<ConfigSelect v-model="currentConfigPage" />
|
<ConfigSelect v-model="currentConfigPage" />
|
||||||
</ConfigSection>
|
</ConfigSection>
|
||||||
</div>
|
</div>
|
||||||
<ConfigPane
|
<ConfigPane
|
||||||
:page="currentConfigPage"
|
class="col-span-4 border-solid border-0 border-r bg-zinc-900 bg-opacity-30"
|
||||||
class="border-solid border-0 border-r bg-zinc-900 bg-opacity-30" />
|
:page="currentConfigPage" />
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
</template>
|
</template>
|
||||||
@@ -1,56 +1,48 @@
|
|||||||
<template>
|
<template>
|
||||||
<TabsContent value="haptic-config" class="mt-0">
|
<ConfigSection
|
||||||
<div class="w-96 bg-zinc-900 bg-opacity-40">
|
:title="$t('config_options.feedback_designer.feedback_type.title')"
|
||||||
<ScrollArea class="h-[720px]">
|
:icon-component="GaugeCircle">
|
||||||
<ConfigSection
|
<div class="flex font-heading">
|
||||||
:title="$t('config_options.feedback_designer.feedback_type.title')"
|
<FeedbackTypeButton
|
||||||
:icon-component="GaugeCircle">
|
v-for="(option, key) in feedbackTypeOptions" :key="key" :title="$t(option.titleKey)"
|
||||||
<div class="flex font-heading">
|
:icon="option.icon" :selected="feedbackType===key" @select="feedbackType=key" />
|
||||||
<FeedbackTypeButton
|
</div>
|
||||||
v-for="(option, key) in feedbackTypeOptions" :key="key" :title="$t(option.titleKey)"
|
</ConfigSection>
|
||||||
:icon="option.icon" :selected="feedbackType===key" @select="feedbackType=key" />
|
<ConfigSection
|
||||||
</div>
|
:title="$t('config_options.feedback_designer.haptic_response.title')"
|
||||||
</ConfigSection>
|
:icon-component="AudioWaveform"
|
||||||
<ConfigSection
|
:show-toggle="true">
|
||||||
:title="$t('config_options.feedback_designer.haptic_response.title')"
|
<SteppedSlider
|
||||||
:icon-component="AudioWaveform"
|
v-model="feedbackStrength"
|
||||||
:show-toggle="true">
|
:label="$t('config_options.feedback_designer.haptic_response.feedback_strength')" />
|
||||||
<SteppedSlider
|
<Separator />
|
||||||
v-model="feedbackStrength"
|
<SteppedSlider
|
||||||
:label="$t('config_options.feedback_designer.haptic_response.feedback_strength')" />
|
v-model="bounceBackStrength"
|
||||||
<Separator />
|
:label="$t('config_options.feedback_designer.haptic_response.bounce_back_strength')" />
|
||||||
<SteppedSlider
|
<Separator />
|
||||||
v-model="bounceBackStrength"
|
<SteppedSlider
|
||||||
:label="$t('config_options.feedback_designer.haptic_response.bounce_back_strength')" />
|
v-model="outputRampDampening"
|
||||||
<Separator />
|
:label="$t('config_options.feedback_designer.haptic_response.output_ramp_dampening')" />
|
||||||
<SteppedSlider
|
</ConfigSection>
|
||||||
v-model="outputRampDampening"
|
<ConfigSection
|
||||||
:label="$t('config_options.feedback_designer.haptic_response.output_ramp_dampening')" />
|
:title="$t('config_options.feedback_designer.auditory_response.title')"
|
||||||
</ConfigSection>
|
:icon-component="AudioLines" :show-toggle="true">
|
||||||
<ConfigSection
|
<SteppedSlider
|
||||||
:title="$t('config_options.feedback_designer.auditory_response.title')"
|
v-model="auditoryHapticLevel"
|
||||||
:icon-component="AudioLines" :show-toggle="true">
|
:label="$t('config_options.feedback_designer.auditory_response.haptic_level')" />
|
||||||
<SteppedSlider
|
<Separator />
|
||||||
v-model="auditoryHapticLevel"
|
<SteppedSlider
|
||||||
:label="$t('config_options.feedback_designer.auditory_response.haptic_level')" />
|
v-model="auditoryMagnitude"
|
||||||
<Separator />
|
:label="$t('config_options.feedback_designer.auditory_response.magnitude')"
|
||||||
<SteppedSlider
|
:max="3"
|
||||||
v-model="auditoryMagnitude"
|
:named-positions="[
|
||||||
:label="$t('config_options.feedback_designer.auditory_response.magnitude')"
|
|
||||||
:max="3"
|
|
||||||
:named-positions="[
|
|
||||||
{value:0, label: 'Faint'},
|
{value:0, label: 'Faint'},
|
||||||
{value:1, label: 'Soft'},
|
{value:1, label: 'Soft'},
|
||||||
{value:2, label: 'Normal'},
|
{value:2, label: 'Normal'},
|
||||||
{value:3, label: 'Loud'}]" />
|
{value:3, label: 'Loud'}]" />
|
||||||
</ConfigSection>
|
</ConfigSection>
|
||||||
</ScrollArea>
|
|
||||||
<Separator />
|
|
||||||
</div>
|
|
||||||
</TabsContent>
|
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ScrollArea } from '@/components/ui/scroll-area/index.js'
|
|
||||||
import { AudioLines, AudioWaveform, GaugeCircle } from 'lucide-vue-next'
|
import { AudioLines, AudioWaveform, GaugeCircle } from 'lucide-vue-next'
|
||||||
import ConfigSection from '@/components/config/ConfigSection.vue'
|
import ConfigSection from '@/components/config/ConfigSection.vue'
|
||||||
import SteppedSlider from '@/components/config/SteppedSlider.vue'
|
import SteppedSlider from '@/components/config/SteppedSlider.vue'
|
||||||
|
|||||||
@@ -1,24 +1,17 @@
|
|||||||
<template>
|
<template>
|
||||||
<TabsContent value="led-config" class="mt-0">
|
<ConfigSection
|
||||||
<div class="w-96 bg-zinc-900 bg-opacity-40">
|
:title="$t('config_options.light_designer.led_feedback')" :icon-component="Lightbulb"
|
||||||
<ScrollArea class="h-[720px]">
|
:show-toggle="true">
|
||||||
<ConfigSection
|
<h2 class="p-6 inline-block">{{ $t('config_options.light_designer.led_mode') }}</h2> [TODO]
|
||||||
:title="$t('config_options.light_designer.led_feedback')" :icon-component="Lightbulb"
|
<div class="px-6 py-2">
|
||||||
:show-toggle="true">
|
<Slider v-model="brightnessSliderModel" max="100" class="h-10" />
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
</TabsContent>
|
</ConfigSection>
|
||||||
|
<ConfigSection :title="$t('config_options.light_designer.led_colors')" :icon-component="Palette">
|
||||||
|
<PaletteInput v-model="colors" />
|
||||||
|
</ConfigSection>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ScrollArea } from '@/components/ui/scroll-area/index.js'
|
|
||||||
import { Lightbulb, Palette } from 'lucide-vue-next'
|
import { Lightbulb, Palette } from 'lucide-vue-next'
|
||||||
import ConfigSection from '@/components/config/ConfigSection.vue'
|
import ConfigSection from '@/components/config/ConfigSection.vue'
|
||||||
import PaletteInput from '@/components/config/PaletteInput.vue'
|
import PaletteInput from '@/components/config/PaletteInput.vue'
|
||||||
|
|||||||
@@ -1,187 +1,175 @@
|
|||||||
<template>
|
<template>
|
||||||
<TabsContent value="map-config" class="mt-0">
|
<ConfigSection :title="$t('config_options.mapping_configuration.key_mapping.title')" :icon-component="Keyboard">
|
||||||
<div class="w-96 bg-zinc-900 bg-opacity-40">
|
<Tabs default-value="fd">
|
||||||
<ScrollArea class="h-[720px]">
|
<TabsList class="grid grid-cols-4 h-auto text-muted-foreground">
|
||||||
<ConfigSection :title="$t('config_options.mapping_configuration.key_mapping.title')" :icon-component="Keyboard">
|
<TabsTrigger value="fd">
|
||||||
<Tabs default-value="fd">
|
<div class="grid grid-flow-row auto-rows-max justify-items-center ">
|
||||||
<TabsList class="grid grid-cols-4 h-auto text-muted-foreground">
|
<div class="size-16 mb-2">
|
||||||
<TabsTrigger value="fd">
|
<img src="../../../assets/gui-ico/ico-key-o.svg">
|
||||||
<div class="grid grid-flow-row auto-rows-max justify-items-center ">
|
</div>
|
||||||
<div class="size-16 mb-2">
|
<span class="text-xs leading-3 text-wrap">
|
||||||
<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') }}
|
{{ $t('config_options.mapping_configuration.key_mapping.switch.a') }}
|
||||||
<Badge class="bg-orange-400 mt-2">Shift</Badge>
|
<Badge class="bg-orange-400 mt-2">Shift</Badge>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
<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') }}
|
||||||
<Badge class="bg-zinc-400 mt-2">Fn1</Badge>
|
<Badge class="bg-zinc-400 mt-2">Fn1</Badge>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
<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') }}
|
||||||
<Badge class="bg-zinc-400 mt-2">Fn2</Badge>
|
<Badge class="bg-zinc-400 mt-2">Fn2</Badge>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
<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') }}
|
||||||
<Badge class="bg-zinc-400 mt-2">M0</Badge>
|
<Badge class="bg-zinc-400 mt-2">M0</Badge>
|
||||||
</span>
|
</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>
|
</div>
|
||||||
<Separator />
|
</TabsTrigger>
|
||||||
<div class="flex flex-col p-8 pt-4">
|
</TabsList>
|
||||||
<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>
|
</Tabs>
|
||||||
</ConfigSection>
|
<Separator />
|
||||||
</ScrollArea>
|
<Command>
|
||||||
<Separator />
|
|
||||||
|
|
||||||
|
<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>
|
</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>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ScrollArea } from '@/components/ui/scroll-area/index.js'
|
|
||||||
import { Badge } from '@/components/ui/badge/index.js'
|
import { Badge } from '@/components/ui/badge/index.js'
|
||||||
import { Tabs } from '@/components/ui/tabs/index.js'
|
import { Tabs } from '@/components/ui/tabs/index.js'
|
||||||
import {
|
import {
|
||||||
|
|||||||
@@ -1,64 +1,62 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="w-96">
|
<ConfigSection :title="$t('config_options.profile_settings.profile_properties.title')" :icon-component="Type">
|
||||||
<ConfigSection :title="$t('config_options.profile_settings.profile_properties.title')" :icon-component="Type">
|
<WIP />
|
||||||
<WIP />
|
<div class="hidden">
|
||||||
<div class="hidden">
|
<div class="flex flex-col p-8 py-4">
|
||||||
<div class="flex flex-col p-8 py-4">
|
|
||||||
<span
|
<span
|
||||||
class="text-sm text-muted-foreground font-mono pb-4">{{ $t('config_options.profile_settings.profile_properties.profile_name')
|
class="text-sm text-muted-foreground font-mono pb-4">{{ $t('config_options.profile_settings.profile_properties.profile_name')
|
||||||
}}</span>
|
}}</span>
|
||||||
<Input
|
<Input
|
||||||
type="text" :placeholder="$t('config_options.profile_settings.profile_properties.profile_name')"
|
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"
|
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" />
|
default-value="Oscillator 1" maxlength="20" />
|
||||||
|
|
||||||
<Label for="text" class="text-muted-foreground text-right mt-1 text-xs">16/20</Label>
|
<Label for="text" class="text-muted-foreground text-right mt-1 text-xs">16/20</Label>
|
||||||
</div>
|
</div>
|
||||||
<Separator />
|
<Separator />
|
||||||
<div class="flex flex-col p-8 py-4">
|
<div class="flex flex-col p-8 py-4">
|
||||||
<span
|
<span
|
||||||
class="text-sm text-muted-foreground font-mono pb-4">{{ $t('config_options.profile_settings.profile_properties.profile_description')
|
class="text-sm text-muted-foreground font-mono pb-4">{{ $t('config_options.profile_settings.profile_properties.profile_description')
|
||||||
}}</span>
|
}}</span>
|
||||||
<Textarea
|
<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"
|
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')"
|
:placeholder="$t('config_options.profile_settings.profile_properties.profile_description')"
|
||||||
default-value="Adjust Korg Oscillator Waveform " rows="2"
|
default-value="Adjust Korg Oscillator Waveform " rows="2"
|
||||||
maxlength="50" />
|
maxlength="50" />
|
||||||
<Label for="textarea" class="text-muted-foreground text-right mt-1 text-xs">24/50</Label>
|
<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">
|
<div class="flex items-center space-x-4 space-y-1">
|
||||||
<Switch id="airplane-mode" :default-checked="true" />
|
<Switch id="airplane-mode" :default-checked="true" />
|
||||||
<Label
|
<Label
|
||||||
for="airplane-mode"
|
for="airplane-mode"
|
||||||
class="text-xs text-muted-foreground">{{
|
class="text-xs text-muted-foreground">{{
|
||||||
$t('config_options.profile_settings.profile_properties.show_description')
|
$t('config_options.profile_settings.profile_properties.show_description')
|
||||||
}}</Label>
|
}}</Label>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</ConfigSection>
|
</div>
|
||||||
<ConfigSection :title="$t('config_options.profile_settings.connection_type.title')" :icon-component="Cable">
|
</ConfigSection>
|
||||||
<div class="flex font-heading">
|
<ConfigSection :title="$t('config_options.profile_settings.connection_type.title')" :icon-component="Cable">
|
||||||
<ConnectionTypeButton
|
<div class="flex font-heading">
|
||||||
v-for="(option, key) in connectionTypeOptions" :key="key" :title="$t(option.titleKey)"
|
<ConnectionTypeButton
|
||||||
:icon="option.icon" :selected="connectionType===key" @select="connectionType=key" />
|
v-for="(option, key) in connectionTypeOptions" :key="key" :title="$t(option.titleKey)"
|
||||||
</div>
|
:icon="option.icon" :selected="connectionType===key" @select="connectionType=key" />
|
||||||
</ConfigSection>
|
</div>
|
||||||
|
</ConfigSection>
|
||||||
|
|
||||||
<ConfigSection
|
<ConfigSection
|
||||||
:title="$t('config_options.profile_settings.internal_profile_toggle.title')"
|
:title="$t('config_options.profile_settings.internal_profile_toggle.title')"
|
||||||
:icon-component="Replace" :show-toggle="true">
|
:icon-component="Replace" :show-toggle="true">
|
||||||
<p class="flex flex-col p-8 py-4 text-muted-foreground text-xs">
|
<p class="flex flex-col p-8 py-4 text-muted-foreground text-xs">
|
||||||
{{ $t('config_options.profile_settings.internal_profile_toggle.subtitle') }}
|
{{ $t('config_options.profile_settings.internal_profile_toggle.subtitle') }}
|
||||||
<Separator class="mt-4" />
|
<Separator class="mt-4" />
|
||||||
<span class="py-4 space-y-4">{{ $t('config_options.profile_settings.internal_profile_toggle.operation')
|
<span class="py-4 space-y-4">{{ $t('config_options.profile_settings.internal_profile_toggle.operation')
|
||||||
}}:<br>
|
}}:<br>
|
||||||
<Badge class="bg-orange-500">SHIFT</Badge> + <Badge
|
<Badge class="bg-orange-500">SHIFT</Badge> + <Badge
|
||||||
class="bg-zinc-500">Fn3</Badge> + <Badge>Rotation</Badge></span>
|
class="bg-zinc-500">Fn3</Badge> + <Badge>Rotation</Badge></span>
|
||||||
<Separator />
|
<Separator />
|
||||||
<span class="pt-4">{{ $t('config_options.profile_settings.internal_profile_toggle.warning') }}</span>
|
<span class="pt-4">{{ $t('config_options.profile_settings.internal_profile_toggle.warning') }}</span>
|
||||||
</p>
|
</p>
|
||||||
</ConfigSection>
|
</ConfigSection>
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { Label } from '@/components/ui/label/index.js'
|
import { Label } from '@/components/ui/label/index.js'
|
||||||
|
|||||||
@@ -1,57 +1,30 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div>
|
<div class="px-4 py-5">
|
||||||
<div class="px-4 py-5">
|
<h1 class="text-lg">
|
||||||
<h1 class="text-lg">
|
{{ $t('preview.title') }}
|
||||||
{{ $t('preview.title')}}
|
</h1>
|
||||||
</h1>
|
</div>
|
||||||
</div>
|
<div class="flex justify-center">
|
||||||
<div class="flex justify-center">
|
<div
|
||||||
<div
|
class="flex bg-cover m-6 w-full aspect-square"
|
||||||
class="flex bg-cover w-72 h-72 mb-7"
|
style="background-image: url(src/assets/gui-ico/xl-bg-ico.svg)">
|
||||||
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 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">
|
||||||
<div class="self-center w-8 mb-1 opacity-50">
|
<img src="@/assets/gui-ico/ico-midi-logo.svg" alt="midi-logo">
|
||||||
<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>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script setup>
|
||||||
import axios from 'axios'
|
|
||||||
import DeviceBar from '@/components/device/DeviceBar.vue'
|
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>
|
</script>
|
||||||
Reference in New Issue
Block a user