From b0353dc3346019658a39d63d0782d488654b2b40 Mon Sep 17 00:00:00 2001
From: Joscha <joscha@plugh.de>
Date: Mon, 3 Mar 2025 14:05:15 +0100
Subject: [PATCH] Add back button for segments

---
 .../src/components/CSegment.vue               | 58 +++++++++++++++----
 1 file changed, 46 insertions(+), 12 deletions(-)

diff --git a/showbits-thermal-printer-ui/src/components/CSegment.vue b/showbits-thermal-printer-ui/src/components/CSegment.vue
index 92d910a..5509b49 100644
--- a/showbits-thermal-printer-ui/src/components/CSegment.vue
+++ b/showbits-thermal-printer-ui/src/components/CSegment.vue
@@ -6,21 +6,55 @@ const mode = ref<"text">();
 </script>
 
 <template>
-  <CSegmentText v-if="mode === 'text'" />
-  <section v-else class="choose">
-    <p>What do you want to print?</p>
-    <div class="list">
-      <button @click="mode = 'text'">Calendar</button>
-      <button @click="mode = 'text'">Cellular Automaton</button>
-      <button @click="mode = 'text'">Chat Message</button>
-      <button @click="mode = 'text'">Easter Egg</button>
-      <button @click="mode = 'text'">Text</button>
-      <button @click="mode = 'text'">Tic Tac Toe</button>
-    </div>
-  </section>
+  <div class="outer">
+    <button v-if="mode" class="close" @click="mode = undefined">X</button>
+    <CSegmentText v-if="mode === 'text'" />
+    <section v-else class="choose">
+      <p>What do you want to print?</p>
+      <div class="list">
+        <button @click="mode = 'text'">Calendar</button>
+        <button @click="mode = 'text'">Cellular Automaton</button>
+        <button @click="mode = 'text'">Chat Message</button>
+        <button @click="mode = 'text'">Easter Egg</button>
+        <button @click="mode = 'text'">Text</button>
+        <button @click="mode = 'text'">Tic Tac Toe</button>
+      </div>
+    </section>
+  </div>
 </template>
 
 <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 {
   margin-bottom: 1ch;
 }