UPD: Externalize strings

This commit is contained in:
Robert Kossessa
2024-01-22 22:06:24 +01:00
parent 819482f3bf
commit d6815d56f0
2 changed files with 59 additions and 40 deletions

View File

@@ -72,7 +72,7 @@ const state = reactive({ count: 12 })
<main> <main>
<div class="w-screen select-none "> <div class="select-none ">
<div class="flex"> <div class="flex">
<Menubar class="w-full rounded-none bg-zinc-950"> <Menubar class="w-full rounded-none bg-zinc-950">
<MenubarMenu> <MenubarMenu>
@@ -520,7 +520,8 @@ const state = reactive({ count: 12 })
<CommandEmpty>{{ $t('config_options.mapping_configuration.key_mapping.not_found') }} <CommandEmpty>{{ $t('config_options.mapping_configuration.key_mapping.not_found') }}
</CommandEmpty> </CommandEmpty>
<CommandInput :placeholder="$t('config_options.mapping_configuration.key_mapping.search_placeholder')" /> <CommandInput
:placeholder="$t('config_options.mapping_configuration.key_mapping.search_placeholder')" />
<CommandGroup heading="Common"> <CommandGroup heading="Common">
<CommandItem value="backspace"> <CommandItem value="backspace">
<Squircle color="grey" class="w-4 h-4 mr-2" /> <Squircle color="grey" class="w-4 h-4 mr-2" />
@@ -596,7 +597,8 @@ const state = reactive({ count: 12 })
<GaugeCircle class="h-4 w-4" /> <GaugeCircle class="h-4 w-4" />
</div> </div>
<div class="grow"> <div class="grow">
<h2 class="text-sm px-2 py-4">{{ $t('config_options.mapping_configuration.knob_mapping.title') }}</h2> <h2 class="text-sm px-2 py-4">{{ $t('config_options.mapping_configuration.knob_mapping.title')
}}</h2>
</div> </div>
<div class="flex-none"> <div class="flex-none">
<Toggle <Toggle
@@ -699,10 +701,10 @@ const state = reactive({ count: 12 })
<div class="space-y-1 p-6"> <div class="space-y-1 p-6">
<h1 class="leading-none text-lg"> <h1 class="leading-none text-lg">
Program Settings {{ $t('config_options.program_settings.title') }}
</h1> </h1>
<p class="text-xs text-muted-foreground"> <p class="text-xs text-muted-foreground">
Create or tune device haptic response {{ $t('config_options.program_settings.subtitle') }}
</p> </p>
</div> </div>
@@ -714,7 +716,8 @@ const state = reactive({ count: 12 })
<div class="flex-none"> <div class="flex-none">
<Cable class="h-4 w-4" /> <Cable class="h-4 w-4" />
</div> </div>
<div clas="flex-initial"><h2 class="text-sm px-2 py-4">Connection Type</h2></div> <div class="flex-initial"><h2 class="text-sm px-2 py-4">
{{ $t('config_options.program_settings.connection_type.title') }}</h2></div>
</div> </div>
<Separator /> <Separator />
@@ -724,21 +727,21 @@ const state = reactive({ count: 12 })
<TabsTrigger value="fd"> <TabsTrigger value="fd">
<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="w-24 size-w mb-2"> <div class="w-24 size-w mb-2">
<img src="@/assets/gui-ico/ico-usb-logo.svg" /> <img src="@/assets/gui-ico/ico-usb-logo.svg" alt="usb-logo" />
</div> </div>
<span class="text-xs leading-3 text-wrap"> <span
USB (Virtual HID) class="text-xs leading-3 text-wrap">{{ $t('config_options.program_settings.connection_type.usb')
</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="w-24 size-w mb-2"> <div class="w-24 size-w mb-2">
<img src="@/assets/gui-ico/ico-midi-logo.svg" /> <img src="@/assets/gui-ico/ico-midi-logo.svg" alt="midi-logo" />
</div> </div>
<span class="text-xs leading-3 text-wrap"> <span class="text-xs leading-3 text-wrap">
Standalone MIDI I/O {{ $t('config_options.program_settings.connection_type.midi') }}
</span> </span>
</div> </div>
</TabsTrigger> </TabsTrigger>
</TabsList> </TabsList>
@@ -754,7 +757,7 @@ const state = reactive({ count: 12 })
<Type class="h-4 w-4" /> <Type class="h-4 w-4" />
</div> </div>
<div class="grow"> <div class="grow">
<h2 class="text-sm px-2 py-4">Profile Properties</h2> <h2 class="text-sm px-2 py-4">{{ $t('config_options.program_settings.profile_properties.title') }}</h2>
</div> </div>
@@ -762,9 +765,9 @@ const state = reactive({ count: 12 })
<Separator /> <Separator />
<div class="flex flex-col p-8 py-4"> <div class="flex flex-col p-8 py-4">
<span class="text-sm text-muted-foreground font-mono pb-4">Program Name</span> <span class="text-sm text-muted-foreground font-mono pb-4">{{ $t('config_options.program_settings.profile_properties.program_name') }}</span>
<Input <Input
type="text" placeholder="Program Name" 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" 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" />
@@ -772,15 +775,15 @@ const state = reactive({ count: 12 })
</div> </div>
<Separator /> <Separator />
<div class="flex flex-col p-8 py-4"> <div class="flex flex-col p-8 py-4">
<span class="text-sm text-muted-foreground font-mono pb-4">Program Description</span> <span class="text-sm text-muted-foreground font-mono pb-4">{{ $t('config_options.program_settings.profile_properties.program_description') }}</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="Program Description" default-value="Adjust Korg Oscillator Waveform " rows="2" :placeholder="$t('config_options.program_settings.profile_properties.program_description')" 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 for="airplane-mode" class="text-xs text-muted-foreground">Show Description in GUI</Label> <Label for="airplane-mode" class="text-xs text-muted-foreground">{{ $t('config_options.program_settings.profile_properties.show_description') }}</Label>
</div> </div>
</div> </div>
<Separator /> <Separator />
@@ -790,7 +793,7 @@ const state = reactive({ count: 12 })
<div class="flex-none"> <div class="flex-none">
<Replace class="h-4 w-4" /> <Replace class="h-4 w-4" />
</div> </div>
<div class="grow"><h2 class="text-sm px-2 py-4">Internal Profile Toggle</h2></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"> <div class="flex-none">
<Toggle <Toggle
class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline" class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline"
@@ -802,13 +805,12 @@ const state = reactive({ count: 12 })
</div> </div>
<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">
Hardcoded macro that allows you to quickly toggle between stored profiles , comes handy if you {{ $t('config_options.program_settings.internal_profile_toggle.subtitle') }}
want to operate device in Standalone mode.
<Separator class="mt-4" /> <Separator class="mt-4" />
<span class="space-y-4">Operation: <Badge class="bg-orange-500">SHIFT</Badge> + <Badge <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> class="bg-zinc-500">Fn3</Badge> + <Badge>Rotation</Badge></span>
<Separator class="my-4" /> <Separator class="my-4" />
<span>Warning: Overrides software defined macro if combination is the same</span> <span>{{ $t('config_options.program_settings.internal_profile_toggle.warning') }}</span>
</p> </p>

View File

@@ -4,6 +4,11 @@
}, },
"config_options": { "config_options": {
"feedback_designer": { "feedback_designer": {
"auditory_response": {
"haptic_level": "Auditory Haptic Level",
"magnitude": "Auditory Magnitude",
"title": "Auditory Response"
},
"feedback_type": { "feedback_type": {
"coarse_detents": "Coarse Detents", "coarse_detents": "Coarse Detents",
"fine_detents": "Fine Detents", "fine_detents": "Fine Detents",
@@ -12,19 +17,14 @@
"viscous_rotation": "Viscous Rotation" "viscous_rotation": "Viscous Rotation"
}, },
"haptic_response": { "haptic_response": {
"title": "Haptic Response",
"feedback_strength": "Feedback Strength",
"bounce_back_strength": "Bounce Back Strength", "bounce_back_strength": "Bounce Back Strength",
"output_ramp_dampening": "Output Ramp Dampening" "feedback_strength": "Feedback Strength",
"output_ramp_dampening": "Output Ramp Dampening",
"title": "Haptic Response"
}, },
"subtitle": "Feedback mode selector and parameter adjustment", "subtitle": "Feedback mode selector and parameter adjustment",
"title": "Feedback Designer", "title": "Feedback Designer",
"total_positions": "Total Positions", "total_positions": "Total Positions"
"auditory_response": {
"title": "Auditory Response",
"haptic_level": "Auditory Haptic Level",
"magnitude": "Auditory Magnitude"
}
}, },
"gui_designer": { "gui_designer": {
"subtitle": "Adjust graphic interface parameters", "subtitle": "Adjust graphic interface parameters",
@@ -35,26 +35,43 @@
"title": "Light Designer" "title": "Light Designer"
}, },
"mapping_configuration": { "mapping_configuration": {
"subtitle": "Assign function to Knob and Keys",
"title": "Mapping Configuration",
"key_mapping": { "key_mapping": {
"title": "Key Mapping", "not_found": "Key or function not found :(",
"search_placeholder": "Find Key, Function or Macro...",
"switch": { "switch": {
"a": "Switch A", "a": "Switch A",
"b": "Switch B", "b": "Switch B",
"c": "Switch C", "c": "Switch C",
"d": "Switch D" "d": "Switch D"
}, },
"not_found": "Key or function not found :(", "title": "Key Mapping"
"search_placeholder": "Find Key, Function or Macro..."
}, },
"knob_mapping": { "knob_mapping": {
"title": "Knob Mapping" "title": "Knob Mapping"
} },
"subtitle": "Assign function to Knob and Keys",
"title": "Mapping Configuration"
}, },
"program_settings": { "program_settings": {
"connection_type": {
"title": "Connection Type",
"usb": "USB (Virtual HID)",
"midi": "Standalone MIDI I/O"
},
"subtitle": "Operation mode and Profile Naming", "subtitle": "Operation mode and Profile Naming",
"title": "Program Settings" "title": "Program Settings",
"profile_properties": {
"title": "Profile Properties",
"program_name": "Program Name",
"program_description": "Program Description",
"show_description": "Show Description in GUI"
},
"internal_profile_toggle": {
"title": "Internal Profile Toggle",
"subtitle": "Hardcoded macro that allows you to quickly toggle between stored profiles , comes handy if you want to operate device in Standalone mode.",
"warning": "Warning: Overrides software defined macro if combination is the same",
"operation": "Operation"
}
}, },
"title": "Configuration Options" "title": "Configuration Options"
}, },