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

UPD: Button consistency

Browse Source
This commit is contained in:
Robert Kossessa
2024-02-05 13:09:31 +01:00
parent 7d5c10de1c
commit 180372bf0d
5 changed files with 24 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/profile/ProfileButton.vue
View File

@@ -1,6 +1,7 @@
<template>
<div
class="h-12 flex overflow-hidden rounded-lg m-2"
:class="{'border border-zinc-100 bg-zinc-300': selected}"
@mouseenter="hover=true" @mouseleave="hover=false">
<form
v-if="nameEditable && editing"
@@ -10,7 +11,7 @@
<input
ref="profileNameInput" v-model="nameInput"
onfocus="this.select()" :placeholder="$t('profiles.name_placeholder')"
class="flex-1 pl-6 h-full text-sm bg-transparent focus-visible:ring-0 focus-visible:outline-none min-w-0 transition-colors"
class="flex-1 pl-6 h-full rounded-r-lg text-sm bg-transparent focus-visible:ring-0 focus-visible:outline-none min-w-0 transition-all"
:class="{'font-semibold bg-zinc-300 hover:bg-zinc-200 text-black' : selected,
'hover:bg-zinc-900 bg-opacity-50 text-muted-foreground': !selected}"
@blur="onNameInputBlur">
@@ -19,7 +20,7 @@
type="submit"
:class="{'bg-zinc-300 hover:bg-zinc-200 text-black' : selected,
'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !selected}"
class="flex h-full aspect-square justify-center items-center flex-shrink-0 transition-colors ">
class="flex h-full rounded-l-lg aspect-square justify-center items-center flex-shrink-0 transition-all">
<Check class="h-4 w-4" />
</button>
</form>
@@ -27,7 +28,7 @@
v-else
:class="{'font-semibold bg-zinc-300 hover:bg-zinc-200 text-black' : selected,
'hover:bg-zinc-900 bg-opacity-50 text-muted-foreground': !selected}"
class="flex-1 h-12 text-left text-sm whitespace-nowrap overflow-hidden text-ellipsis pr-4 transition-colors"
class="flex-1 h-12 rounded-r-lg text-left text-sm whitespace-nowrap overflow-hidden text-ellipsis pr-4 transition-all"
@click="!editing && $emit('select') && $refs.profileTitle.scramble()">
<span class="ml-4 w-4 mr-2" :class="{'ml-4': !draggable}">
<GripHorizontal
@@ -52,15 +53,16 @@
:class="{'bg-zinc-300 hover:bg-zinc-200 text-black' : selected,
'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !selected,
'w-12' : hover && !editing}"
class="flex w-0 h-12 justify-center items-center flex-shrink-0 transition-colors"
class="flex w-0 h-12 rounded-l-lg justify-center items-center flex-shrink-0 transition-all"
@click="startEditing">
<PenLine class="h-4 w-4" />
</button>
<button
:class="{'bg-zinc-300 hover:bg-zinc-200 text-black' : selected,
'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !selected,
'w-12' : hover && !editing}"
class="flex w-0 h-12 justify-center items-center flex-shrink-0 transition-colors"
'w-12' : hover && !editing,
'rounded-l-lg': !nameEditable}"
class="flex w-0 h-12 justify-center items-center flex-shrink-0 transition-all"
@click="$emit('duplicate')">
<Copy class="h-4 w-4" />
</button>
@@ -68,7 +70,7 @@
:class="{'bg-orange-600 hover:bg-orange-500 text-black' : selected,
'hover:bg-opacity-100 bg-orange-900 text-zinc-100 bg-opacity-50': !selected,
'w-12' : hover && !editing}"
class="flex w-0 h-12 justify-center items-center flex-shrink-0 transition-colors"
class="flex w-0 h-12 justify-center items-center flex-shrink-0 transition-all"
@click="confirmDelete=true">
<Trash2 class="h-4 w-4" />
</button>
@@ -78,7 +80,7 @@
:class="{'bg-orange-600 hover:bg-orange-500 text-black' : selected,
'hover:bg-opacity-100 bg-orange-900 text-zinc-100 bg-opacity-50': !selected,
'w-12' : hover && !editing}"
class="flex w-0 h-12 justify-center items-center flex-shrink-0 transition-colors"
class="flex w-0 h-12 justify-center items-center flex-shrink-0 transition-all"
@click="$emit('delete', profile.id)">
<Check class="h-4 w-4" />
</button>
@@ -86,7 +88,7 @@
:class="{'bg-zinc-300 hover:bg-zinc-200 text-black' : selected,
'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !selected,
'w-12' : hover && !editing}"
class="flex w-0 h-12 justify-center items-center flex-shrink-0 transition-colors"
class="flex w-0 h-12 justify-center items-center flex-shrink-0 transition-all"
@click="confirmDelete=false">
<X class="h-4 w-4" />
</button>