UPD: Layout changes (profiles)
This commit is contained in:
Robert Kossessa
@@ -3,11 +3,20 @@
|
||||
<div>
|
||||
<div
|
||||
class="w-full h-12 px-4 flex items-center justify-between flex-nowrap text-nowrap bg-zinc-900">
|
||||
<h2 class="mr-2">
|
||||
{{ $t(`profiles.title`) }}<span class="text-sm text-zinc-600"> ({{ store.profiles.length }}/{{ maxProfiles
|
||||
}})</span>
|
||||
</h2>
|
||||
<button class="flex items-center" @click="showProfileList=true">
|
||||
<ArrowLeft v-if="!showProfileList" class="w-5 h-full mr-1" />
|
||||
<h2 class="mr-2">
|
||||
<ScrambleText :text="showProfileList ? $t('profiles.title') : store.selectedProfile.name" />
|
||||
<ScrambleText
|
||||
v-if="showProfileList" class="text-sm text-zinc-600"
|
||||
scramble-on-mount
|
||||
fill-interval="20"
|
||||
delay="500"
|
||||
:text="`(${store.profiles.length}/${ maxProfiles})`" />
|
||||
</h2>
|
||||
</button>
|
||||
<button
|
||||
v-if="showProfileList"
|
||||
class="bg-zinc-200 text-black hover:bg-zinc-100 rounded-full aspect-square h-7 flex justify-center items-center"
|
||||
@click="store.addProfile">
|
||||
<Plus class="h-4" />
|
||||
@@ -15,64 +24,70 @@
|
||||
</div>
|
||||
<Separator />
|
||||
</div>
|
||||
<div v-if="showFilter">
|
||||
<div class="flex w-full h-12 items-center">
|
||||
<label for="filter" class="flex h-full items-center cursor-text">
|
||||
<Search class="ml-4 mr-2 mb-0.5 h-4 w-4 shrink-0 opacity-50 float-left" />
|
||||
</label>
|
||||
<input
|
||||
id="filter"
|
||||
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">
|
||||
<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>
|
||||
<template v-if="showProfileList">
|
||||
<div v-if="showFilter">
|
||||
<div class="flex w-full h-12 items-center">
|
||||
<label for="filter" class="flex h-full items-center cursor-text">
|
||||
<Search class="ml-4 mr-2 mb-0.5 h-4 w-4 shrink-0 opacity-50 float-left" />
|
||||
</label>
|
||||
<input
|
||||
id="filter"
|
||||
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">
|
||||
<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>
|
||||
<Separator />
|
||||
</div>
|
||||
<Separator />
|
||||
</div>
|
||||
<div class="grow overflow-y-auto">
|
||||
<div v-if="filteredProfiles.length === 0">
|
||||
<div class="flex flex-col items-center justify-center h-32">
|
||||
<ScrambleText
|
||||
scramble-on-mount :fill-interval="5" class="text-sm text-muted-foreground"
|
||||
:text="$t('profiles.not_found')" />
|
||||
<div class="grow overflow-y-auto">
|
||||
<div v-if="filteredProfiles.length === 0">
|
||||
<div class="flex flex-col items-center justify-center h-32">
|
||||
<ScrambleText
|
||||
scramble-on-mount :fill-interval="5" class="text-sm text-muted-foreground"
|
||||
:text="$t('profiles.not_found')" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<Collapsible
|
||||
v-for="[profileTag, tagProfiles] in filteredProfilesByTag" :key="profileTag"
|
||||
v-model:open="collapse[profileTag]"
|
||||
:default-open="true">
|
||||
<CollapsibleTrigger
|
||||
class="w-full h-12 py-2 text-left text-muted-foreground text-sm bg-zinc-900 border-0 border-b">
|
||||
<ChevronRight class="chevrot h-4 w-4 mb-0.5 ml-4 inline-block transition-transform" />
|
||||
{{ profileTag }}<span class="font-heading text-sm text-zinc-600"> ({{ tagProfiles.length }})</span>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<ProfileButton
|
||||
v-for="(profile, index) in tagProfiles" :key="profile.id" v-model="tagProfiles[index]"
|
||||
class="border-0 border-b"
|
||||
:selected="store.selectedProfile.id === profile.id"
|
||||
@select="store.selectProfile(profile.id); showProfileList=false"
|
||||
@duplicate="store.duplicateProfile(profile.id)"
|
||||
@delete="store.deleteProfile(profile.id)" />
|
||||
<Separator />
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<Collapsible
|
||||
v-for="[profileTag, tagProfiles] in filteredProfilesByTag" :key="profileTag"
|
||||
v-model:open="collapse[profileTag]"
|
||||
:default-open="true">
|
||||
<CollapsibleTrigger
|
||||
class="w-full h-12 py-2 text-left text-muted-foreground text-sm bg-zinc-900 border-0 border-b">
|
||||
<ChevronRight class="chevrot h-4 w-4 mb-0.5 ml-4 inline-block transition-transform" />
|
||||
{{ profileTag }}<span class="font-heading text-sm text-zinc-600"> ({{ tagProfiles.length }})</span>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<ProfileButton
|
||||
v-for="(profile, index) in tagProfiles" :key="profile.id" v-model="tagProfiles[index]"
|
||||
class="border-0 border-b"
|
||||
:selected="store.selectedProfile.id === profile.id"
|
||||
@select="store.selectProfile(profile.id)"
|
||||
@duplicate="store.duplicateProfile(profile.id)"
|
||||
@delete="store.deleteProfile(profile.id)" />
|
||||
<Separator />
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="grow overflow-y-auto">
|
||||
<ProfileConfig />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
import { ChevronRight, Plus, Search } from 'lucide-vue-next'
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { ChevronRight, Plus, Search, ArrowLeft } from 'lucide-vue-next'
|
||||
import { computed, ref } from 'vue'
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
|
||||
import ScrambleText from '@/components/effects/ScrambleText.vue'
|
||||
import { useStore } from '@/store.js'
|
||||
import ProfileButton from '@/components/profile/ProfileButton.vue'
|
||||
import ProfileConfig from '@/components/config/pages/ProfileConfig.vue'
|
||||
|
||||
defineProps({
|
||||
showFilter: {
|
||||
@@ -87,6 +102,8 @@ const store = useStore()
|
||||
const filter = ref('')
|
||||
const collapse = ref({})
|
||||
|
||||
const showProfileList = ref(true)
|
||||
|
||||
const filteredProfiles = computed(() => {
|
||||
if (!filter.value) {
|
||||
return store.profiles
|
||||
|
||||
Reference in New Issue
Block a user