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

ADD: Profile count indicators

Browse Source
This commit is contained in:
Robert Kossessa
2024-01-24 15:43:29 +01:00
parent 3dd2a0da56
commit 0d1434646b
1 changed files with 8 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/ProfileManager.vue
View File

@@ -4,7 +4,8 @@
class="px-4 h-20 flex items-center"> class="px-4 h-20 flex items-center">
<div> <div>
<h1 class="text-lg"> <h1 class="text-lg">
{{ $t(`profiles.title`) }} {{ $t(`profiles.title`) }}<span class="text-sm text-zinc-600"> ({{ profiles.length }}/{{ maxProfiles
}})</span>
</h1> </h1>
<p class="text-xs text-muted-foreground"> <p class="text-xs text-muted-foreground">
{{ $t(`profiles.subtitle`) }} {{ $t(`profiles.subtitle`) }}
@@ -37,12 +38,12 @@
:open="collapse[profileTag]"> :open="collapse[profileTag]">
<CollapsibleTrigger <CollapsibleTrigger
v-model="collapse[profileTag]" v-model="collapse[profileTag]"
class="w-full py-2 text-left text-muted-foreground text-sm hover:bg-zinc-900"> class="w-full h-12 py-2 text-left text-muted-foreground text-sm hover:bg-zinc-900">
<ChevronRight class="chevrot h-4 w-4 mb-0.5 ml-4 inline-block transition-transform" /> <ChevronRight class="chevrot h-4 w-4 mb-0.5 ml-4 inline-block transition-transform" />
{{ profileTag }} <span class="text-xs text-zinc-600">(TAG)</span> {{ profileTag }}<span class="font-heading text-sm text-zinc-600"> ({{ tagProfiles.length }})</span>
</CollapsibleTrigger> </CollapsibleTrigger>
<CollapsibleContent> <CollapsibleContent>
<div v-for="profile in tagProfiles" :key="profile.id" class="h-10 flex profile-row"> <div v-for="profile in tagProfiles" :key="profile.id" class="h-12 flex profile-row">
<button class="flex-1 h-full text-left hover:bg-zinc-900"> <button class="flex-1 h-full text-left hover:bg-zinc-900">
<FileDigit class="h-4 w-4 mb-1 ml-10 mr-2 inline-block text-muted-foreground" /> <FileDigit class="h-4 w-4 mb-1 ml-10 mr-2 inline-block text-muted-foreground" />
<span>{{ profile.name }}</span> <span class="text-xs text-zinc-600">uID:{{ profile.id }}</span> <span>{{ profile.name }}</span> <span class="text-xs text-zinc-600">uID:{{ profile.id }}</span>
@@ -51,7 +52,6 @@
<Trash class="h-4 w-4 text-muted-foreground" /> <Trash class="h-4 w-4 text-muted-foreground" />
</button> </button>
</div> </div>
</CollapsibleContent> </CollapsibleContent>
</Collapsible> </Collapsible>
</div> </div>
@@ -71,6 +71,8 @@ import {
CollapsibleTrigger, CollapsibleTrigger,
} from '@/components/ui/collapsible' } from '@/components/ui/collapsible'
const maxProfiles = 32
const profiles = ref([]) const profiles = ref([])
const filter = ref('') const filter = ref('')
const collapse = ref({}) const collapse = ref({})
@@ -116,6 +118,7 @@ onMounted(() => {
[data-state=open] > .chevrot { [data-state=open] > .chevrot {
transform: rotate(90deg); transform: rotate(90deg);
} }
.profile-row:hover .delete-button { .profile-row:hover .delete-button {
display: flex; display: flex;
} }