Initial commit

2023-09-16 22:11:34 +02:00
parent 2d458f08f3
commit 7972ad66a8
8 changed files with 710 additions and 26 deletions
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+const props = defineProps<{
+    save: boolean,
+    plan: boolean,
+    godi: boolean
+}>()
+</script>
+
+<template>
+
+    <div class="action-bar" :class="{save: props.save}">
+        <div class="other-action">
+            <button class="add-plan" :class="{show: props.plan}" @click="$emit('save')"> <i class="icon">add_box</i> Neuer Plan</button>
+            <button class="add-godi" :class="{show: props.godi}" @click="$emit('save')"> <i class="icon">add</i> Neuer Gottesdienst</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% - 32px * 2);
+    border-top: 1px solid #d7d5d5;
+    display: flex;
+    padding: 10px 32px;
+    background: #ffffff;
+    justify-content: flex-end;
+
+    .other-action{
+        transition: 200ms translate;
+        translate: 220px;
+        transition-delay: 100ms;
+    };
+
+    &.save .other-action {
+        translate: 0;
+        transition-delay: 0ms;
+    }
+}
+
+button {
+    &:not(.show){
+        display: none;
+    }
+    &.save{
+        &:not(.show){
+            display: flex;
+        }
+        width: 220px;
+        translate: 0 calc(100% + 20px);
+        transition: 200ms translate;
+        &.show {
+            translate: 0;
+            transition-delay: 100ms;
+        }
+    }
+}
+
+button{
+}
+
+</style>