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

ADD: Config section toggle

Browse Source
This commit is contained in:
Robert Kossessa
2024-01-25 01:48:19 +01:00
parent 7769280e9b
commit 4503f6a76d
3 changed files with 59 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/config/ConfigSection.vue
View File

@@ -1,10 +1,21 @@
<template> <template>
<Collapsible v-model:open="collapse" :default-open="true"> <Collapsible v-model:open="collapse" :default-open="true">
<CollapsibleTrigger class="w-full bg-zinc-900 flex items-center px-4"> <div class="w-full bg-zinc-900 flex">
<component :is="iconComponent" class="h-4 w-4" /> <div
<h2 class="text-sm px-2 py-4">{{ title }}</h2> class="flex-1 flex items-center px-4"
<ChevronLeft class="chevrot h-4 w-4 mb-0.5 transition-transform ml-auto text-muted-foreground" /> :class="{'cursor-pointer hover:bg-zinc-800': showToggle}"
</CollapsibleTrigger> @click="toggle = !toggle">
<component :is="iconComponent" class="h-4 w-4" />
<h2 class="text-sm px-2 py-4">{{ title }}</h2>
<Switch
v-if="showToggle" :checked="toggle"
class="ml-auto" @click.stop="toggle=!toggle" />
</div>
<CollapsibleTrigger class="flex items-center justify-center h-12 aspect-square hover:bg-zinc-800">
<ChevronLeft class="chevrot h-4 w-4 mt-0.5 transition-transform text-muted-foreground" />
</CollapsibleTrigger>
</div>
<CollapsibleContent> <CollapsibleContent>
<slot /> <slot />
</CollapsibleContent> </CollapsibleContent>
@@ -14,9 +25,15 @@
import { ChevronLeft } from 'lucide-vue-next' import { ChevronLeft } from 'lucide-vue-next'
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible/index.js' import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible/index.js'
import { ref } from 'vue' import { ref } from 'vue'
import { Switch } from '@/components/ui/switch/index.js'
const collapse = ref(true) const collapse = ref(true)
const toggle = defineModel({
type: Boolean,
default: true,
})
defineProps({ defineProps({
title: { title: {
type: String, type: String,
@@ -26,6 +43,10 @@ defineProps({
type: [String, Object], type: [String, Object],
default: 'div', default: 'div',
}, },
showToggle: {
type: Boolean,
default: false,
},
}) })
</script> </script>

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

@@ -2,7 +2,7 @@
<TabsContent value="prog-config" class="mt-0"> <TabsContent value="prog-config" class="mt-0">
<div class="w-96 bg-zinc-900 bg-opacity-40"> <div class="w-96 bg-zinc-900 bg-opacity-40">
<ScrollArea class="h-[720px]"> <ScrollArea class="h-[720px]">
<ConfigSection :title="$t('config_options.profile_settings.title')" :icon-component="Cable"> <ConfigSection :title="$t('config_options.profile_settings.connection_type.title')" :icon-component="Cable">
<Tabs default-value="fd"> <Tabs default-value="fd">
<TabsList class="grid grid-cols-2 h-auto text-muted-foreground"> <TabsList class="grid grid-cols-2 h-auto text-muted-foreground">
<TabsTrigger value="fd"> <TabsTrigger value="fd">
@@ -41,55 +41,41 @@
<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>
</ConfigSection> <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> </ConfigSection>
<Separator />
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900"> <ConfigSection
:title="$t('config_options.profile_settings.internal_profile_toggle.title')"
<div class="flex-none"> :icon-component="Replace" :show-toggle="true">
<Replace class="h-4 w-4" /> <p class="flex flex-col p-8 py-4 text-muted-foreground text-xs">
</div> {{ $t('config_options.profile_settings.internal_profile_toggle.subtitle') }}
<div class="grow"><h2 class="text-sm px-2 py-4"> <Separator class="mt-4" />
{{ $t('config_options.profile_settings.internal_profile_toggle.title') }}</h2></div> <span class="space-y-4">{{ $t('config_options.profile_settings.internal_profile_toggle.operation')
<div class="flex-none"> }}: <Badge class="bg-orange-500">SHIFT</Badge> + <Badge
<Toggle class="bg-zinc-500">Fn3</Badge> + <Badge>Rotation</Badge></span>
class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline" <Separator class="my-4" />
size="sm" :default-value="true" aria-label="EnablePrimary"> <span>{{ $t('config_options.profile_settings.internal_profile_toggle.warning') }}</span>
<Power class="w-4 h-4" /> </p>
</Toggle> </ConfigSection>
</div>
</div>
<p class="flex flex-col p-8 py-4 text-muted-foreground text-xs">
{{ $t('config_options.profile_settings.internal_profile_toggle.subtitle') }}
<Separator class="mt-4" />
<span class="space-y-4">{{ $t('config_options.profile_settings.internal_profile_toggle.operation')
}}: <Badge class="bg-orange-500">SHIFT</Badge> + <Badge
class="bg-zinc-500">Fn3</Badge> + <Badge>Rotation</Badge></span>
<Separator class="my-4" />
<span>{{ $t('config_options.profile_settings.internal_profile_toggle.warning') }}</span>
</p>
</ScrollArea> </ScrollArea>
@@ -106,6 +92,7 @@ import { Label } from '@/components/ui/label/index.js'
import { Switch } from '@/components/ui/switch/index.js' import { Switch } from '@/components/ui/switch/index.js'
import { Replace, Type, Cable, Power } from 'lucide-vue-next' import { Replace, Type, Cable, Power } from 'lucide-vue-next'
import ConfigSection from '@/components/config/ConfigSection.vue' import ConfigSection from '@/components/config/ConfigSection.vue'
import { Separator } from '@/components/ui/separator/index.js'
</script> </script>
<style scoped> <style scoped>
input::-webkit-outer-spin-button, input::-webkit-outer-spin-button,

2
src/lang/en.json
View File

@@ -61,7 +61,7 @@
"internal_profile_toggle": { "internal_profile_toggle": {
"operation": "Operation", "operation": "Operation",
"subtitle": "Hardcoded macro that allows you to quickly toggle between stored profiles , comes handy if you want to operate device in Standalone mode.", "subtitle": "Hardcoded macro that allows you to quickly toggle between stored profiles , comes handy if you want to operate device in Standalone mode.",
"title": "Internal Profile Toggle", "title": "Internal Profile",
"warning": "Warning: Overrides software defined macro if combination is the same" "warning": "Warning: Overrides software defined macro if combination is the same"
}, },
"profile_properties": { "profile_properties": {