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

ADD: Profile delete button

Browse Source
This commit is contained in:
Robert Kossessa
2024-01-24 15:29:52 +01:00
parent 02b6da1065
commit 3dd2a0da56
1 changed files with 15 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/ProfileManager.vue
View File

@@ -15,7 +15,7 @@
<div> <div>
<div class="flex w-full h-12 items-center"> <div class="flex w-full h-12 items-center">
<label for="filter" class="flex h-full items-center cursor-text"> <label for="filter" class="flex h-full items-center cursor-text">
<MagnifyingGlassIcon class="ml-4 mr-2 mb-0.5 h-4 w-4 shrink-0 opacity-50 float-left" /> <Search class="ml-4 mr-2 mb-0.5 h-4 w-4 shrink-0 opacity-50 float-left" />
</label> </label>
<input <input
id="filter" id="filter"
@@ -42,10 +42,16 @@
{{ profileTag }} <span class="text-xs text-zinc-600">(TAG)</span> {{ profileTag }} <span class="text-xs text-zinc-600">(TAG)</span>
</CollapsibleTrigger> </CollapsibleTrigger>
<CollapsibleContent> <CollapsibleContent>
<button v-for="profile in tagProfiles" :key="profile.id" class="w-full h-10 text-left hover:bg-zinc-900"> <div v-for="profile in tagProfiles" :key="profile.id" class="h-10 flex profile-row">
<FileDigit class="h-4 w-4 mb-1 ml-10 mr-2 inline-block text-muted-foreground" /> <button class="flex-1 h-full text-left hover:bg-zinc-900">
<span>{{ profile.name }}</span> <span class="text-xs text-zinc-600">uID:{{ profile.id }}</span> <FileDigit class="h-4 w-4 mb-1 ml-10 mr-2 inline-block text-muted-foreground" />
</button> <span>{{ profile.name }}</span> <span class="text-xs text-zinc-600">uID:{{ profile.id }}</span>
</button>
<button class="h-full hover:bg-zinc-900 aspect-square hidden justify-center items-center delete-button">
<Trash class="h-4 w-4 text-muted-foreground" />
</button>
</div>
</CollapsibleContent> </CollapsibleContent>
</Collapsible> </Collapsible>
</div> </div>
@@ -56,10 +62,9 @@
<script setup> <script setup>
import SchemaTest from '@/components/SchemaTest.vue' import SchemaTest from '@/components/SchemaTest.vue'
import { Separator } from '@/components/ui/separator/index.js' import { Separator } from '@/components/ui/separator/index.js'
import { FileDigit, ChevronRight } from 'lucide-vue-next' import { FileDigit, ChevronRight, Search, Trash } from 'lucide-vue-next'
import axios from 'axios' import axios from 'axios'
import { computed, onMounted, ref } from 'vue' import { computed, onMounted, ref } from 'vue'
import { MagnifyingGlassIcon } from '@radix-icons/vue'
import { import {
Collapsible, Collapsible,
CollapsibleContent, CollapsibleContent,
@@ -111,4 +116,7 @@ onMounted(() => {
[data-state=open] > .chevrot { [data-state=open] > .chevrot {
transform: rotate(90deg); transform: rotate(90deg);
} }
.profile-row:hover .delete-button {
display: flex;
}
</style> </style>