Garmelon/showbits
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add spinner while printing image

Browse source
This commit is contained in:
Joscha 2025-03-27 00:04:41 +01:00
parent 79b880d7bf
commit a99fcd2152
1 changed files with 20 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

23
showbits-thermal-printer-ui/src/AppPhoto.vue
View file

@ -1,4 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { RiLoader4Fill } from "@remixicon/vue";
import { computed, onMounted, ref, useTemplateRef } from "vue"; import { computed, onMounted, ref, useTemplateRef } from "vue";
import CPhotoButtonFlip from "./components/CPhotoButtonFlip.vue"; import CPhotoButtonFlip from "./components/CPhotoButtonFlip.vue";
import CPhotoButtonGallery from "./components/CPhotoButtonGallery.vue"; import CPhotoButtonGallery from "./components/CPhotoButtonGallery.vue";
@ -113,7 +114,9 @@ onMounted(async () => {
@click="onFlip" @click="onFlip"
/> />
</div> </div>
<div class="cover" :class="{ hidden: !covered }"></div> <div class="cover" :class="{ hidden: !covered }">
<RiLoader4Fill size="48px" />
</div>
</template> </template>
<style> <style>
@ -150,11 +153,25 @@ video.mirrored {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: white; background-color: white;
transition: background-color 100ms linear; transition: opacity 100ms linear;
display: flex;
justify-content: center;
align-items: center;
} }
.cover.hidden { .cover.hidden {
background-color: transparent; opacity: 0;
pointer-events: none; pointer-events: none;
} }
.cover svg {
animation: spinner 2s linear infinite;
}
@keyframes spinner {
to {
transform: rotate(360deg);
}
}
</style> </style>