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

UPD: Styling

Browse Source
This commit is contained in:
Robert Kossessa
2024-01-25 02:55:51 +01:00
parent 7d81a5316c
commit 54b1c499a1
3 changed files with 68 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/Navbar.vue
View File

@@ -40,6 +40,9 @@
</MenubarItem> </MenubarItem>
</MenubarContent> </MenubarContent>
</MenubarMenu> </MenubarMenu>
<span class="pl-14 inline-block">STATUS: <b class="font-heading text-lg">CONNECTED</b></span>
<span class="text-muted-foreground px-5 inline-block">///</span>
<p>SYNCING...</p>
</Menubar> </Menubar>
</div> </div>
</template> </template>

2
src/components/ProfileManager.vue
View File

@@ -23,7 +23,7 @@
v-model="filter" v-model="filter"
:placeholder="$t('profiles.filter_placeholder')" :placeholder="$t('profiles.filter_placeholder')"
class="grow h-full bg-transparent text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50"> class="grow h-full bg-transparent text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50">
<button class="h-full flex justify-center items-center aspect-square border-solid border-0 border-l hover:bg-zinc-900"> <button class="h-full flex text-zinc-200 bg-zinc-900 justify-center items-center aspect-square border-solid border-0 border-l hover:bg-zinc-800">
<Plus /> <Plus />
</button> </button>
</div> </div>

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

@@ -1,98 +1,82 @@
<template> <template>
<TabsContent value="prog-config" class="mt-0"> <div class="w-96">
<div class="w-96 bg-zinc-900 bg-opacity-40"> <ConfigSection :title="$t('config_options.profile_settings.connection_type.title')" :icon-component="Cable">
<ScrollArea class="h-[720px]"> <div class="w-full flex text-muted-foreground">
<ConfigSection :title="$t('config_options.profile_settings.connection_type.title')" :icon-component="Cable"> <button
<Tabs default-value="fd"> class="hover:bg-zinc-900 grow flex flex-col justify-center items-center py-4">
<TabsList class="grid grid-cols-2 h-auto text-muted-foreground"> <img class="w-24 size-w mb-2" src="@/assets/gui-ico/ico-usb-logo.svg" alt="usb-logo">
<TabsTrigger value="fd"> <span
<div class="grid grid-flow-row auto-rows-max justify-items-center "> class="text-xs leading-3 text-wrap">{{ $t('config_options.profile_settings.connection_type.usb')
<div class="w-24 size-w mb-2"> }}</span>
<img src="../../../assets/gui-ico/ico-usb-logo.svg" alt="usb-logo"> </button>
</div> <button
<span class="hover:bg-zinc-900 grow flex flex-col justify-center items-center py-4">
class="text-xs leading-3 text-wrap">{{ $t('config_options.profile_settings.connection_type.usb') <img class="w-24 size-w mb-2" src="@/assets/gui-ico/ico-midi-logo.svg" alt="midi-logo">
}}</span> <span
</div> class="text-xs leading-3 text-wrap">{{ $t('config_options.profile_settings.connection_type.midi')
</TabsTrigger> }}</span>
<TabsTrigger value="cd"> </button>
<div class="grid grid-flow-row auto-rows-max justify-items-center"> </div>
<div class="w-24 size-w mb-2"> </ConfigSection>
<img src="../../../assets/gui-ico/ico-midi-logo.svg" alt="midi-logo"> <ConfigSection :title="$t('config_options.profile_settings.profile_properties.title')" :icon-component="Type">
</div> <div class="flex flex-col p-8 py-4">
<span class="text-xs leading-3 text-wrap">
{{ $t('config_options.profile_settings.connection_type.midi') }}
</span>
</div>
</TabsTrigger>
</TabsList>
</Tabs>
</ConfigSection>
<ConfigSection :title="$t('config_options.profile_settings.profile_properties.title')" :icon-component="Type">
<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>
</ConfigSection> </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="space-y-4">{{ $t('config_options.profile_settings.internal_profile_toggle.operation') <span class="space-y-4">{{ $t('config_options.profile_settings.internal_profile_toggle.operation')
}}: <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 class="my-4" /> <Separator class="my-4" />
<span>{{ $t('config_options.profile_settings.internal_profile_toggle.warning') }}</span> <span>{{ $t('config_options.profile_settings.internal_profile_toggle.warning') }}</span>
</p> </p>
</ConfigSection> </ConfigSection>
</div>
</ScrollArea>
<Separator />
</div>
</TabsContent>
</template> </template>
<script setup> <script setup>
import { ScrollArea } from '@/components/ui/scroll-area/index.js'
import { Tabs } from '@/components/ui/tabs/index.js'
import { Label } from '@/components/ui/label/index.js' 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 } 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' import { Separator } from '@/components/ui/separator/index.js'
import { ref } from 'vue'
const connectionType = ref('usb')
</script> </script>
<style scoped> <style scoped>
input::-webkit-outer-spin-button, input::-webkit-outer-spin-button,