75 lines
1.9 KiB
Vue
75 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
const emit = defineEmits(["addPlan", "addGodi", "addMini", "importZelebrationsplan", "save"])
|
|
const props = defineProps<{
|
|
save: boolean,
|
|
plan: boolean,
|
|
godi: boolean
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
|
|
<div class="action-bar" :class="{save: true}">
|
|
<div class="other-action">
|
|
<button class="add-plan" :class="{show: props.plan}" @click="$emit('addPlan')"> <i class="icon">add_box</i> Neuer Plan</button>
|
|
<button class="import-zelebrationsplan" :class="{show: props.godi}" @click="$emit('importZelebrationsplan')"> <i class="icon">upload</i> Zelebrationsplan importieren</button>
|
|
<button class="add-godi" :class="{show: props.godi}" @click="$emit('addGodi')"> <i class="icon">add</i> Gottesdienst</button>
|
|
<button class="add-mini" :class="{show: props.godi}" @click="$emit('addMini')"> <i class="icon">add</i> Ministrant</button>
|
|
</div>
|
|
<!-- <button class="save" :class="{show: props.save}" @click="$emit('save')"><i class="icon">save</i> Änderungen speichern </button>-->
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
<style scoped lang="less">
|
|
|
|
.action-bar {
|
|
width: calc(100% - 24px * 2);
|
|
display: flex;
|
|
padding: 6px 24px;
|
|
background: #fafafa;
|
|
justify-content: flex-end;
|
|
border-bottom: 1px solid #e0e0e0;
|
|
|
|
.other-action{
|
|
transition: 200ms translate;
|
|
translate: 220px;
|
|
transition-delay: 100ms;
|
|
display: flex;
|
|
gap: 6px;
|
|
flex-wrap: wrap;
|
|
button {
|
|
margin: 0;
|
|
}
|
|
};
|
|
|
|
&.save .other-action {
|
|
translate: 0;
|
|
transition-delay: 0ms;
|
|
}
|
|
}
|
|
|
|
button {
|
|
font-size: 13px;
|
|
padding: 4px 10px 4px 6px;
|
|
|
|
i {
|
|
font-size: 18px;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
&:not(.show){
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media print {
|
|
.action-bar{
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
|
|
</style>
|