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

Add back button for segments

Browse source
This commit is contained in:
Joscha 2025-03-03 14:05:15 +01:00
parent dc64aa0bc8
commit b0353dc334
1 changed files with 46 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

34
showbits-thermal-printer-ui/src/components/CSegment.vue
View file

@ -6,6 +6,8 @@ const mode = ref<"text">();
</script> </script>
<template> <template>
<div class="outer">
<button v-if="mode" class="close" @click="mode = undefined">X</button>
<CSegmentText v-if="mode === 'text'" /> <CSegmentText v-if="mode === 'text'" />
<section v-else class="choose"> <section v-else class="choose">
<p>What do you want to print?</p> <p>What do you want to print?</p>
@ -18,9 +20,41 @@ const mode = ref<"text">();
<button @click="mode = 'text'">Tic Tac Toe</button> <button @click="mode = 'text'">Tic Tac Toe</button>
</div> </div>
</section> </section>
</div>
</template> </template>
<style scoped> <style scoped>
.outer {
position: relative;
}
.close {
position: absolute;
top: 0;
right: 0;
width: 24px;
height: 24px;
color: white;
background-color: black;
border: 2px solid black;
border-radius: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.close:hover {
background-color: #444;
}
.close:active {
background-color: #666;
}
p { p {
margin-bottom: 1ch; margin-bottom: 1ch;
} }