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

UPD: Proper focus handling on ProfileButtons

Browse Source 
Good god does it feel good to tab through them
This commit is contained in:
Robert Kossessa
2024-03-05 16:10:25 +01:00
parent 4d2fd7c6af
commit f718363a85
1 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/renderer/src/components/profile/ProfileButton.vue
View File

@@ -49,7 +49,7 @@
'bg-zinc-300 font-semibold text-black hover:bg-zinc-200': selected, 'bg-zinc-300 font-semibold text-black hover:bg-zinc-200': selected,
'text-muted-foreground hover:bg-zinc-900': !selected 'text-muted-foreground hover:bg-zinc-900': !selected
}" }"
class="h-12 flex-1 truncate rounded-lg pr-4 text-left text-sm transition-all" class="flex-1 truncate rounded-lg pr-4 text-left text-sm transition-all"
@click="!editing && $emit('select') && $refs.profileTitle.scramble()" @click="!editing && $emit('select') && $refs.profileTitle.scramble()"
> >
<span class="mx-2 w-4 cursor-grab" :class="{ 'ml-2': !draggable }"> <span class="mx-2 w-4 cursor-grab" :class="{ 'ml-2': !draggable }">
@@ -75,9 +75,9 @@
:class="{ :class="{
'bg-zinc-300 text-black hover:bg-zinc-200': selected, 'bg-zinc-300 text-black hover:bg-zinc-200': selected,
'text-zinc-100 hover:bg-zinc-900': !selected, 'text-zinc-100 hover:bg-zinc-900': !selected,
'group-hover:w-12': !editing 'group-focus-within:w-12 group-hover:w-12': !editing
}" }"
class="flex h-12 w-0 shrink-0 items-center justify-center rounded-lg transition-all" class="flex w-0 shrink-0 items-center justify-center rounded-lg transition-all"
@click="startEditing" @click="startEditing"
> >
<PenLine class="size-4" /> <PenLine class="size-4" />
@@ -86,10 +86,10 @@
:class="{ :class="{
'bg-zinc-300 text-black hover:bg-zinc-200': selected, 'bg-zinc-300 text-black hover:bg-zinc-200': selected,
'text-zinc-100 hover:bg-zinc-900': !selected, 'text-zinc-100 hover:bg-zinc-900': !selected,
'group-hover:w-12': !editing, 'group-focus-within:w-12 group-hover:w-12': !editing,
'rounded-l-lg': !nameEditable 'rounded-l-lg': !nameEditable
}" }"
class="flex h-12 w-0 shrink-0 items-center justify-center rounded-lg transition-all" class="flex w-0 shrink-0 items-center justify-center rounded-lg transition-all"
@click="$emit('duplicate')" @click="$emit('duplicate')"
> >
<Copy class="size-4" /> <Copy class="size-4" />
@@ -98,9 +98,9 @@
:class="{ :class="{
'bg-orange-700 text-black hover:bg-orange-600': selected, 'bg-orange-700 text-black hover:bg-orange-600': selected,
'bg-orange-900/50 text-zinc-100 hover:bg-orange-900': !selected, 'bg-orange-900/50 text-zinc-100 hover:bg-orange-900': !selected,
'group-hover:w-12': !editing 'group-focus-within:w-12 group-hover:w-12': !editing
}" }"
class="flex h-12 w-0 shrink-0 items-center justify-center rounded-lg transition-all" class="flex w-0 shrink-0 items-center justify-center rounded-lg transition-all"
@click="confirmDelete = true" @click="confirmDelete = true"
> >
<Trash2 class="size-4" /> <Trash2 class="size-4" />
@@ -111,9 +111,9 @@
:class="{ :class="{
'bg-orange-600 text-black hover:bg-orange-500': selected, 'bg-orange-600 text-black hover:bg-orange-500': selected,
'bg-orange-900/50 text-zinc-100 hover:bg-orange-900': !selected, 'bg-orange-900/50 text-zinc-100 hover:bg-orange-900': !selected,
'group-hover:w-12': !editing 'group-focus-within:w-12 group-hover:w-12': !editing
}" }"
class="flex h-12 w-0 shrink-0 items-center justify-center rounded-lg transition-all" class="flex w-0 shrink-0 items-center justify-center rounded-lg transition-all"
@click="$emit('delete', profile.id)" @click="$emit('delete', profile.id)"
> >
<Check class="size-4" /> <Check class="size-4" />
@@ -122,9 +122,9 @@
:class="{ :class="{
'bg-zinc-300 text-black hover:bg-zinc-200': selected, 'bg-zinc-300 text-black hover:bg-zinc-200': selected,
'text-zinc-100 hover:bg-zinc-900': !selected, 'text-zinc-100 hover:bg-zinc-900': !selected,
'group-hover:w-12': !editing 'group-focus-within:w-12 group-hover:w-12': !editing
}" }"
class="flex h-12 w-0 shrink-0 items-center justify-center rounded-lg transition-all" class="flex w-0 shrink-0 items-center justify-center rounded-lg transition-all"
@click="confirmDelete = false" @click="confirmDelete = false"
> >
<X class="size-4" /> <X class="size-4" />