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>
</MenubarContent>
</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>
</div>
</template>

2
src/components/ProfileManager.vue
View File

@@ -23,7 +23,7 @@
v-model="filter"
: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">
<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 />
</button>
</div>

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

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