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

UPD: Preview display fade

Browse Source
This commit is contained in:
Robert Kossessa
2024-02-12 16:32:22 +01:00
parent 41339a4100
commit 8aa0d6c496
1 changed files with 34 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -24,27 +24,30 @@
<div <div
class="rounded-full aspect-square absolute h-[30%] top-[30.5%] left-0 right-0 mx-auto flex flex-col justify-center items-center overflow-hidden" class="rounded-full aspect-square absolute h-[30%] top-[30.5%] left-0 right-0 mx-auto flex flex-col justify-center items-center overflow-hidden"
style="background: linear-gradient(45deg, black 30%, #252525 50%, #232323 60%, black)"> style="background: linear-gradient(45deg, black 30%, #252525 50%, #232323 60%, black)">
<div <TransitionGroup name="fade-display">
v-if="store.connected" <div
class="absolute flex flex-col items-center text-center pb-2 mix-blend-screen"> v-if="store.connected"
<img :src="LogoMidi" alt="midi-logo" class="opacity-50 h-4"> class="absolute flex flex-col items-center text-center pb-2 mix-blend-screen">
<h2 class="font-pixellg text-5xl">{{ parseInt(value) }}</h2> <img :src="LogoMidi" alt="midi-logo" class="opacity-50 h-4">
<div class="font-pixelsm text-md">HIGH PASS</div> <h2 class="font-pixellg text-5xl">{{ parseInt(value) }}</h2>
<DeviceBar v-model="barValue" :count="30" :width="120" /> <div class="font-pixelsm text-md">HIGH PASS</div>
<span class="w-36 font-pixelsm text-[7pt] text-muted-foreground uppercase"> <DeviceBar v-model="barValue" :count="30" :width="120" />
<span class="w-36 font-pixelsm text-[7pt] text-muted-foreground uppercase">
KORG MINILOGUE HIGH PASS FILTER 0-127 KORG MINILOGUE HIGH PASS FILTER 0-127
</span> </span>
</div> </div>
<div v-else class="flex flex-col items-center text-center mix-blend-screen"> <div v-else class="flex flex-col items-center text-center mix-blend-screen">
<ScrambleText <ScrambleText
:text="offlineText" :text="offlineText"
character-set="_()*=0011" character-set="_()*=0011"
scramble-on-mount scramble-on-mount
:fill-interval="50" :delay="1000"
:replace-interval="50" :fill-interval="50"
class="uppercase font-pixelsm text-[7pt] text-muted-foreground" :replace-interval="50"
@finish="nextOfflineText" /> class="uppercase font-pixelsm text-[7pt] text-muted-foreground"
</div> @finish="nextOfflineText" />
</div>
</TransitionGroup>
</div> </div>
<Transition name="fade-delayed"> <Transition name="fade-delayed">
<button <button
@@ -146,12 +149,23 @@ onMounted(() => {
transition-delay: 150ms; transition-delay: 150ms;
} }
.fade-display-enter-active,
.fade-display-leave-active {
transition: opacity 500ms ease;
}
.fade-display-enter-active {
transition-delay: 1000ms;
}
.fade-enter-from, .fade-enter-from,
.fade-leave-to, .fade-leave-to,
.fade-slow-enter-from, .fade-slow-enter-from,
.fade-slow-leave-to, .fade-slow-leave-to,
.fade-delayed-enter-from, .fade-delayed-enter-from,
.fade-delayed-leave-to { .fade-delayed-leave-to,
.fade-display-enter-from,
.fade-display-leave-to {
opacity: 0; opacity: 0;
} }
</style> </style>