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

ADD: Hover transitions

Browse Source
This commit is contained in:
Robert Kossessa
2024-02-04 01:28:22 +01:00
parent 0dda27b9bb
commit c47f55f51d
2 changed files with 13 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/config/SteppedSlider.vue
View File

@@ -7,7 +7,7 @@
<div class="flex justify-between py-2"> <div class="flex justify-between py-2">
<button <button
v-for="(position, index) in positions" :key="position" v-for="(position, index) in positions" :key="position"
class="min-w-0 text-nowrap" class="min-w-0 text-nowrap group"
:class="{ :class="{
'slider-start mr-4': index===0, 'slider-start mr-4': index===0,
'slider-center': index > 0 && index < positions.length-1, 'slider-center': index > 0 && index < positions.length-1,
@@ -15,14 +15,14 @@
@click="value = position.value"> @click="value = position.value">
<span <span
v-if="index===0" class="rounded-full w-2 h-1.5 inline-block mb-[1px] transition-colors" v-if="index===0" class="rounded-full w-2 h-1.5 inline-block mb-[1px] transition-colors"
:class="value===position.value ? 'bg-zinc-100' : 'bg-zinc-600'" /> :class="value===position.value ? 'bg-zinc-100' : 'bg-zinc-600 group-hover:bg-zinc-500'" />
<span <span
v-if="position.label" class="text-xs font-mono uppercase mx-1 transition-colors" v-if="position.label" class="text-xs font-mono uppercase mx-1 transition-colors"
:class="value===position.value ? 'text-zinc-100' : 'text-zinc-600'">{{ position.label }}</span> :class="value===position.value ? 'text-zinc-100' : 'text-zinc-600 group-hover:text-zinc-500'">{{ position.label }}</span>
<span <span
v-if="!position.label || index === positions.length-1" v-if="!position.label || index === positions.length-1"
class="rounded-full w-2 h-1.5 inline-block mb-[1px] transition-colors" class="rounded-full w-2 h-1.5 inline-block mb-[1px] transition-colors"
:class="value===position.value ? 'bg-zinc-100' : 'bg-zinc-600'" /> :class="value===position.value ? 'bg-zinc-100' : 'bg-zinc-600 group-hover:bg-zinc-500'" />
</button> </button>
</div> </div>
</div> </div>

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

@@ -10,7 +10,7 @@
<input <input
ref="profileNameInput" v-model="nameInput" ref="profileNameInput" v-model="nameInput"
onfocus="this.select()" :placeholder="$t('profiles.name_placeholder')" onfocus="this.select()" :placeholder="$t('profiles.name_placeholder')"
class="flex-1 pl-6 h-full bg-transparent focus-visible:ring-0 focus-visible:outline-none min-w-0" class="flex-1 pl-6 h-full bg-transparent focus-visible:ring-0 focus-visible:outline-none min-w-0 transition-colors"
:class="{'font-semibold bg-zinc-300 hover:bg-zinc-200 text-black' : selected, :class="{'font-semibold bg-zinc-300 hover:bg-zinc-200 text-black' : selected,
'hover:bg-zinc-900 bg-opacity-50 text-muted-foreground': !selected}" 'hover:bg-zinc-900 bg-opacity-50 text-muted-foreground': !selected}"
@blur="onNameInputBlur"> @blur="onNameInputBlur">
@@ -19,7 +19,7 @@
type="submit" type="submit"
:class="{'bg-zinc-200 hover:bg-zinc-100 text-black' : selected, :class="{'bg-zinc-200 hover:bg-zinc-100 text-black' : selected,
'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !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"> class="flex h-full aspect-square justify-center items-center flex-shrink-0 transition-colors ">
<Check class="h-4 w-4" /> <Check class="h-4 w-4" />
</button> </button>
</form> </form>
@@ -27,7 +27,7 @@
v-else v-else
:class="{'font-semibold bg-zinc-200 hover:bg-zinc-100 text-black' : selected, :class="{'font-semibold bg-zinc-200 hover:bg-zinc-100 text-black' : selected,
'hover:bg-zinc-900 bg-opacity-50 text-muted-foreground': !selected}" 'hover:bg-zinc-900 bg-opacity-50 text-muted-foreground': !selected}"
class="flex-1 h-12 text-left whitespace-nowrap overflow-hidden text-ellipsis pr-4" class="flex-1 h-12 text-left whitespace-nowrap overflow-hidden text-ellipsis pr-4 transition-colors"
@click="!editing && $emit('select') && $refs.profileTitle.scramble()"> @click="!editing && $emit('select') && $refs.profileTitle.scramble()">
<span class="ml-4 w-4 mr-2" :class="{'ml-4': !draggable}"> <span class="ml-4 w-4 mr-2" :class="{'ml-4': !draggable}">
<GripHorizontal <GripHorizontal
@@ -38,6 +38,7 @@
</span> </span>
<ScrambleText <ScrambleText
ref="profileTitle" ref="profileTitle"
class="transition-colors"
:class="{'text-black': selected, 'text-muted-foreground': !selected}" :class="{'text-black': selected, 'text-muted-foreground': !selected}"
:text="profile.name" /> :text="profile.name" />
<span <span
@@ -51,7 +52,7 @@
:class="{'bg-zinc-200 hover:bg-zinc-100 text-black' : selected, :class="{'bg-zinc-200 hover:bg-zinc-100 text-black' : selected,
'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !selected, 'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !selected,
'w-12' : hover && !editing}" 'w-12' : hover && !editing}"
class="flex w-0 h-12 justify-center items-center flex-shrink-0" class="flex w-0 h-12 justify-center items-center flex-shrink-0 transition-colors"
@click="startEditing"> @click="startEditing">
<PenLine class="h-4 w-4" /> <PenLine class="h-4 w-4" />
</button> </button>
@@ -59,7 +60,7 @@
:class="{'bg-zinc-200 hover:bg-zinc-100 text-black' : selected, :class="{'bg-zinc-200 hover:bg-zinc-100 text-black' : selected,
'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !selected, 'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !selected,
'w-12' : hover && !editing}" 'w-12' : hover && !editing}"
class="flex w-0 h-12 justify-center items-center flex-shrink-0" class="flex w-0 h-12 justify-center items-center flex-shrink-0 transition-colors"
@click="$emit('duplicate')"> @click="$emit('duplicate')">
<Copy class="h-4 w-4" /> <Copy class="h-4 w-4" />
</button> </button>
@@ -67,7 +68,7 @@
:class="{'bg-orange-600 hover:bg-orange-500 text-black' : selected, :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, 'hover:bg-opacity-100 bg-orange-900 text-zinc-100 bg-opacity-50': !selected,
'w-12' : hover && !editing}" 'w-12' : hover && !editing}"
class="flex w-0 h-12 justify-center items-center flex-shrink-0" class="flex w-0 h-12 justify-center items-center flex-shrink-0 transition-colors"
@click="confirmDelete=true"> @click="confirmDelete=true">
<Trash2 class="h-4 w-4" /> <Trash2 class="h-4 w-4" />
</button> </button>
@@ -77,7 +78,7 @@
:class="{'bg-orange-600 hover:bg-orange-500 text-black' : selected, :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, 'hover:bg-opacity-100 bg-orange-900 text-zinc-100 bg-opacity-50': !selected,
'w-12' : hover && !editing}" 'w-12' : hover && !editing}"
class="flex w-0 h-12 justify-center items-center flex-shrink-0" class="flex w-0 h-12 justify-center items-center flex-shrink-0 transition-colors"
@click="$emit('delete', profile.id)"> @click="$emit('delete', profile.id)">
<Check class="h-4 w-4" /> <Check class="h-4 w-4" />
</button> </button>
@@ -85,7 +86,7 @@
:class="{'bg-zinc-200 hover:bg-zinc-100 text-black' : selected, :class="{'bg-zinc-200 hover:bg-zinc-100 text-black' : selected,
'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !selected, 'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !selected,
'w-12' : hover && !editing}" 'w-12' : hover && !editing}"
class="flex w-0 h-12 justify-center items-center flex-shrink-0" class="flex w-0 h-12 justify-center items-center flex-shrink-0 transition-colors"
@click="confirmDelete=false"> @click="confirmDelete=false">
<X class="h-4 w-4" /> <X class="h-4 w-4" />
</button> </button>