Initial commit

frontend/src/components/AppFooter.vue

@@ -0,0 +1,110 @@
+<template>
+  <footer>
+    <div class="logo"><img src="/images/icons/logo_color.png"></div>
+    <div class="window-bar">
+      <button v-for="dialog in openDialogs" :key="dialog.dialog.name" class="dialog-button"
+        @click="toggleDialogMinimize(dialog.dialog.name)" :title="dialog.dialog.title">
+        <img v-if="dialog.dialog.icon" :src="'/images/icons/' + dialog.dialog.icon" />
+        <span class="button-text">{{ dialog.dialog.isTitleTranslated ? $t(dialog.dialog.title) : dialog.dialog.title
+          }}</span>
+      </button>
+    </div>
+    <div class="static-block">
+      <a href="#" @click.prevent="openImprintDialog">Impressum</a>
+      <a href="#" @click.prevent="openDataPrivacyDialog">Datenschutzerklärung</a>
+    </div>
+    <ImprintDialog ref="imprintDialog" name="imprintDialog" />
+    <DataPrivacyDialog ref="dataPrivacyDialog" name="dataPrivacyDialog" />
+  </footer>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import ImprintDialog from '../dialogues/standard/ImprintDialog.vue';
+import DataPrivacyDialog from '../dialogues/standard/DataPrivacyDialog.vue';
+
+export default {
+  name: 'AppFooter',
+  components: {
+    ImprintDialog,
+    DataPrivacyDialog,
+  },
+  computed: {
+    ...mapGetters('dialogs', ['openDialogs'])
+  },
+  methods: {
+    openImprintDialog() {
+      this.$refs.imprintDialog.open();
+    },
+    openDataPrivacyDialog() {
+      this.$refs.dataPrivacyDialog.open();
+    },
+    toggleDialogMinimize(dialogName) {
+      this.$store.dispatch('dialogs/toggleDialogMinimize', dialogName);
+    }
+  }
+};
+</script>
+
+<style scoped>
+footer {
+  display: flex;
+  background-color: #7BBE55;
+  height: 38px;
+  width: 100%;
+  color: #7E471B;
+}
+
+.logo,
+.window-bar,
+.static-block {
+  text-align: center;
+}
+
+.window-bar {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10px;
+  padding-left: 10px;
+}
+
+.dialog-button {
+  max-width: 12em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 5px 10px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  background: none;
+  height: 1.8em;
+  border: 1px solid #0a4337;
+  box-shadow: 1px 1px 2px #484949;
+}
+
+.dialog-button>img {
+  height: 16px;
+}
+
+.button-text {
+  margin-left: 5px;
+}
+
+.logo>img {
+  width: 36px;
+  height: 36px;
+}
+
+.static-block {
+  line-height: 38px;
+}
+
+.static-block>a {
+  padding-right: 1.5em;
+}
+</style>