From f75f5689de81df515b81fadda30465ff867d7969 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Sat, 9 Sep 2023 22:43:11 +0000
Subject: [PATCH] DoorMapEditor layout improvements

---
 ui/src/components/BulmaButton.vue   |  8 +++-
 ui/src/components/DoorMapEditor.vue | 64 +++++++++++++----------------
 2 files changed, 35 insertions(+), 37 deletions(-)

diff --git a/ui/src/components/BulmaButton.vue b/ui/src/components/BulmaButton.vue
index 40d75ac..3dccbcd 100644
--- a/ui/src/components/BulmaButton.vue
+++ b/ui/src/components/BulmaButton.vue
@@ -3,7 +3,7 @@
     <span v-if="icon !== undefined" class="icon">
       <font-awesome-icon :icon="icon" />
     </span>
-    <span><slot name="default" /></span>
+    <span v-if="text != ''">{{ text }}</span>
   </button>
 </template>
 
@@ -16,9 +16,15 @@ import { Options, Vue } from "vue-class-component";
       type: String,
       required: false,
     },
+    text: {
+      type: String,
+      required: false,
+      default: "",
+    },
   },
 })
 export default class extends Vue {
   public icon?: string;
+  public text?: string;
 }
 </script>
diff --git a/ui/src/components/DoorMapEditor.vue b/ui/src/components/DoorMapEditor.vue
index 8d70c16..dd21415 100644
--- a/ui/src/components/DoorMapEditor.vue
+++ b/ui/src/components/DoorMapEditor.vue
@@ -3,49 +3,20 @@
     <template v-slot:heading>Türchen bearbeiten</template>
 
     <template v-slot:default>
-      <div class="panel-tabs">
-        <BulmaBreadcrumbs :steps="steps" v-model="current_step" class="mb-0" />
-      </div>
-
-      <div class="panel-block is-flex is-justify-content-space-between">
+      <div class="panel-tabs is-justify-content-space-between">
         <BulmaButton
           :disabled="current_step === 0"
           class="is-success"
-          icon="fa-solid fa-backward"
           @click="current_step--"
-        >
-          Zurück
-        </BulmaButton>
+          icon="fa-solid fa-backward"
+        />
+        <BulmaBreadcrumbs :steps="steps" v-model="current_step" class="mb-0" />
         <BulmaButton
-          class="is-danger"
-          icon="fa-solid fa-trash"
-          @click="on_discard"
-        >
-          Löschen
-        </BulmaButton>
-        <BulmaButton
-          class="is-danger"
-          icon="fa-solid fa-cloud-arrow-down"
-          @click="on_download"
-        >
-          Laden
-        </BulmaButton>
-        <BulmaButton
-          v-if="current_step !== 2"
+          :disabled="current_step === 2"
           class="is-success"
-          icon="fa-solid fa-forward"
           @click="current_step++"
-        >
-          Weiter
-        </BulmaButton>
-        <BulmaButton
-          v-else
-          class="is-success"
-          icon="fa-solid fa-cloud-arrow-up"
-          @click="on_upload"
-        >
-          Speichern
-        </BulmaButton>
+          icon="fa-solid fa-forward"
+        />
       </div>
 
       <div class="panel-block">
@@ -53,6 +24,27 @@
         <DoorChooser v-if="current_step === 1" v-model:doors="doors" />
         <Calendar v-if="current_step === 2" :doors="doors" />
       </div>
+
+      <div class="panel-block is-flex is-justify-content-space-between">
+        <BulmaButton
+          class="is-danger"
+          @click="on_download"
+          icon="fa-solid fa-cloud-arrow-down"
+          text="Laden"
+        />
+        <BulmaButton
+          class="is-warning"
+          @click="on_discard"
+          icon="fa-solid fa-trash"
+          text="Löschen"
+        />
+        <BulmaButton
+          class="is-success"
+          @click="on_upload"
+          icon="fa-solid fa-cloud-arrow-up"
+          text="Speichern"
+        />
+      </div>
     </template>
   </BulmaDrawer>
 </template>