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

ADD: WIP Component

Browse Source
This commit is contained in:
Robert Kossessa
2024-01-29 14:03:49 +01:00
parent 34768bbc05
commit 88d06f595c
2 changed files with 47 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/WIP.vue Normal file
View File

@@ -0,0 +1,20 @@
<template>
<div class="bg-wip w-full text-center p-8 text-zinc-200">
<span class="bg-black font-heading p-1">WORK IN PROGRESS</span>
</div>
</template>
<style scoped>
.bg-wip {
--stripe-color-a: rgb(228 228 231);
--stripe-color-b: black;
--stripe-width: 1em;
background: repeating-linear-gradient(
45deg,
var(--stripe-color-a),
var(--stripe-color-a) var(--stripe-width),
var(--stripe-color-b) var(--stripe-width),
var(--stripe-color-b) calc(var(--stripe-width) * 2)
);
}
</style>

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

@@ -1,35 +1,38 @@
<template>
<div class="w-96">
<ConfigSection :title="$t('config_options.profile_settings.profile_properties.title')" :icon-component="Type">
<div class="flex flex-col p-8 py-4">
<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>
<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>
</div>
</ConfigSection>
@@ -51,7 +54,7 @@
}}:<br>
<Badge class="bg-orange-500">SHIFT</Badge> + <Badge
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>
</p>
</ConfigSection>
@@ -68,6 +71,7 @@ import UsbIcon from '@/assets/gui-ico/ico-usb-logo.svg'
import MidiIcon from '@/assets/gui-ico/ico-midi-logo.svg'
import ConnectionTypeButton from '@/components/config/ConnectionTypeButton.vue'
import { Badge } from '@/components/ui/badge'
import WIP from '@/components/WIP.vue'
const connectionType = ref('usb') // TODO: replace with actual value