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

UPD: DevicePreview transitions

Browse Source
This commit is contained in:
Robert Kossessa
2024-02-04 00:30:13 +01:00
parent abfab1589e
commit 5f3c31a315
4 changed files with 7 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -14,14 +14,14 @@
'slider-end ml-4': index === positions.length-1}"
@click="value = position.value">
<span
v-if="index===0" class="rounded-full w-2 h-1.5 inline-block mb-[1px]"
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'" />
<span
v-if="position.label" class="text-xs font-mono uppercase mx-1"
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>
<span
v-if="!position.label || index === positions.length-1"
class="rounded-full w-2 h-1.5 inline-block mb-[1px]"
class="rounded-full w-2 h-1.5 inline-block mb-[1px] transition-colors"
:class="value===position.value ? 'bg-zinc-100' : 'bg-zinc-600'" />
</button>
</div>

1
src/components/config/TabSelect.vue
View File

@@ -1,5 +1,6 @@
<template>
<div class="flex font-heading px-4 py-2 gap-2">
<div class="absolute"/>
<TabSelectButton
v-for="(option, key) in options" :key="key"
:title="$t(option.titleKey)"

4
src/components/device/DeviceKeys.vue
View File

@@ -4,11 +4,11 @@
v-for="(color, key) in keys"
:key="key" :class="{'outline outline-white ' : key === selected,
'hover:outline outline-zinc-400' : key !== selected}"
class="aspect-square flex-1 rounded-[2px] flex items-center justify-center"
class="aspect-square flex-1 rounded-[2px] flex items-center justify-center transition-all"
:style="`box-shadow: 0 0 20px 0 ${color.hex()}`"
@click="$emit('select', key)">
<span
class="font-heading text-2xl"
class="font-heading text-2xl transition-colors"
:class="{'opacity-30 text-black': key!==selected}">{{ key }}
</span>
</button>

2
src/components/device/DevicePreview.vue
View File

@@ -25,7 +25,7 @@
</div>
</div>
<button
class="rounded-full outline-2 absolute h-[41.5%] top-[24.5%] aspect-square left-0 right-0 mx-auto"
class="rounded-full outline-2 absolute h-[41.5%] top-[24.5%] aspect-square left-0 right-0 mx-auto transition-all"
:class="{'outline outline-white': selected==='ring',
'hover:outline outline-zinc-400': selected!=='ring'}"
@click="selected='ring'" />