DoorMapEditor layout improvements

This commit is contained in:
Jörn-Michael Miehe 2023-09-09 22:43:11 +00:00
parent 63f05c1fb9
commit f75f5689de
2 changed files with 35 additions and 37 deletions

View file

@ -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>

View file

@ -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>