UPD: X button for profile properties

This commit is contained in:
Robert Kossessa
2024-04-17 14:46:16 +02:00
parent fe79891b5e
commit c724481f4a

View File

@@ -13,7 +13,7 @@
" "
> >
<component <component
:is="appStore.showProfileConfig ? ArrowLeft : List" :is="appStore.showProfileConfig ? Settings : List"
class="mr-1 h-full w-5 shrink-0" class="mr-1 h-full w-5 shrink-0"
/> />
<ScrambleText <ScrambleText
@@ -31,22 +31,33 @@
:text="`(${deviceStore.profiles.length}/${maxProfiles})`" :text="`(${deviceStore.profiles.length}/${maxProfiles})`"
/> />
</button> </button>
<DropdownMenu> <div class="relative size-8">
<DropdownMenuTrigger> <Transition name="fade" class="absolute size-full">
<Transition name="fade"> <button
<button v-if="appStore.showProfileConfig"
v-if="!appStore.showProfileConfig" class="flex items-center justify-center text-muted-foreground hover:text-zinc-200"
class="flex aspect-square h-8 items-center justify-center rounded-lg border border-zinc-100 bg-zinc-300 text-black hover:bg-zinc-200" @click="appStore.setShowProfileConfig(false)"
> >
<Plus class="h-4" /> <X class="h-5" />
</button> </button>
</Transition> </Transition>
</DropdownMenuTrigger> <DropdownMenu>
<DropdownMenuContent> <DropdownMenuTrigger>
<DropdownMenuItem @click="deviceStore.createProfile"> Profile </DropdownMenuItem> <Transition name="fade">
<DropdownMenuItem> Category </DropdownMenuItem> <button
</DropdownMenuContent> v-if="!appStore.showProfileConfig"
</DropdownMenu> class="flex aspect-square h-8 items-center justify-center rounded-lg border border-zinc-100 bg-zinc-300 text-black hover:bg-zinc-200"
>
<Plus class="h-4" />
</button>
</Transition>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem @click="deviceStore.createProfile"> Profile </DropdownMenuItem>
<DropdownMenuItem> Category </DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</div> </div>
<Separator /> <Separator />
</div> </div>
@@ -103,7 +114,7 @@ import {
} from '@renderer/components/ui/dropdown-menu' } from '@renderer/components/ui/dropdown-menu'
import { Separator } from '@renderer/components/ui/separator' import { Separator } from '@renderer/components/ui/separator'
import { useDeviceStore } from '@renderer/deviceStore' import { useDeviceStore } from '@renderer/deviceStore'
import { ArrowLeft, List, Plus } from 'lucide-vue-next' import { Settings, List, Plus, X } from 'lucide-vue-next'
import { ref, watch } from 'vue' import { ref, watch } from 'vue'
import draggable from 'vuedraggable' import draggable from 'vuedraggable'