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

ADD: Important scramble

Browse Source
This commit is contained in:
Robert Kossessa
2024-02-07 03:21:45 +01:00
parent 3a98bdf39f
commit 07fbc8f6bc
1 changed files with 24 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,14 +5,16 @@
:style="{backgroundImage: `linear-gradient(to bottom, black, rgba(0,0,0,0.2) 12%, rgba(0,0,0,0.3) 95%, black), url(${RenderNano})`}"> :style="{backgroundImage: `linear-gradient(to bottom, black, rgba(0,0,0,0.2) 12%, rgba(0,0,0,0.3) 95%, black), url(${RenderNano})`}">
<Transition name="fade"> <Transition name="fade">
<div v-if="store.connected" class="px-10 h-12 flex justify-between items-center"> <div v-if="store.connected" class="px-10 h-12 flex justify-between items-center">
<h2>Nano_D++</h2> <h2>
<ScrambleText :delay="100" scramble-on-mount :fill-interval="50" :replace-interval="50" text="Nano_D++" />
</h2>
<div class="font-mono text-sm"> <div class="font-mono text-sm">
<span class="text-muted-foreground">Firmware: </span> <span class="text-muted-foreground">Firmware: </span>
<ScrambleText text="v1.3.2a" /> <ScrambleText :delay="100" scramble-on-mount :fill-interval="50" :replace-interval="50" text="v1.3.2a" />
</div> </div>
</div> </div>
</Transition> </Transition>
<Transition name="fade"> <Transition name="fade-delayed">
<DeviceLEDRing <DeviceLEDRing
v-if="store.connected" :value="barValue" v-if="store.connected" :value="barValue"
class="absolute h-[66%] top-[12.5%] left-0 right-0 mx-auto" /> class="absolute h-[66%] top-[12.5%] left-0 right-0 mx-auto" />
@@ -43,13 +45,15 @@
@finish="nextOfflineText" /> @finish="nextOfflineText" />
</div> </div>
</div> </div>
<Transition name="fade-delayed">
<button <button
v-if="store.connected" v-if="store.connected"
class="rounded-full outline-2 absolute h-[41.5%] top-[24.5%] aspect-square left-0 right-0 mx-auto transition-all" 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': store.selectedFeature==='knob', :class="{'outline outline-white': store.selectedFeature==='knob',
'hover:outline outline-zinc-400': store.selectedFeature!=='knob'}" 'hover:outline outline-zinc-400': store.selectedFeature!=='knob'}"
@click="store.selectConfigFeature('knob')" /> @click="store.selectConfigFeature('knob')" />
<Transition name="fade-slow"> </Transition>
<Transition name="fade-delayed">
<DeviceKeys <DeviceKeys
v-if="store.connected" v-if="store.connected"
class="absolute w-[72.7%] top-[77.2%] gap-[2.8%] left-0 right-0 mx-auto" class="absolute w-[72.7%] top-[77.2%] gap-[2.8%] left-0 right-0 mx-auto"
@@ -123,14 +127,23 @@ onMounted(() => {
} }
.fade-slow-enter-active, .fade-slow-enter-active,
.fade-slow-leave-active { .fade-slow-leave-active,
.fade-delayed-enter-active,
.fade-delayed-leave-active {
transition: opacity 1000ms ease; transition: opacity 1000ms ease;
} }
.fade-delayed-enter-active,
.fade-slow-enter-active {
transition-delay: 150ms;
}
.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-leave-to {
opacity: 0; opacity: 0;
} }
</style> </style>