From b6deb22cc857f3df0f6e33d949195028b4ad65b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Sun, 30 Oct 2022 02:35:39 +0000
Subject: [PATCH] ImageModal

---
 ui/package.json                  |  4 ++--
 ui/src/App.vue                   |  8 +++++++-
 ui/src/components/ImageModal.vue | 35 ++++++++++++++++++++++++++++++++
 3 files changed, 44 insertions(+), 3 deletions(-)
 create mode 100644 ui/src/components/ImageModal.vue

diff --git a/ui/package.json b/ui/package.json
index 953d4d2..57e408e 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -8,7 +8,6 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "bulma": "^0.9.4",
     "core-js": "^3.8.3",
     "vue": "^3.2.13",
     "vue-class-component": "^8.0.0-0"
@@ -21,8 +20,9 @@
     "@vue/cli-plugin-typescript": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
     "@vue/eslint-config-typescript": "^9.1.0",
+    "bulma": "^0.9.4",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
     "typescript": "~4.5.5"
   }
-}
+}
\ No newline at end of file
diff --git a/ui/src/App.vue b/ui/src/App.vue
index 4966b6f..85242be 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -6,21 +6,27 @@
 
       <CalendarDoor v-for="(_, index) in 24" :key="index" :day="index" />
     </div>
+
+    <ImageModal />
   </div>
 </template>
 
 <script lang="ts">
 import { Options, Vue } from "vue-class-component";
 import CalendarDoor from "./components/CalendarDoor.vue";
+import ImageModal from "./components/ImageModal.vue";
 
 @Options({
   components: {
     CalendarDoor,
+    ImageModal,
   },
 })
 export default class App extends Vue {}
 </script>
 
 <style>
-/* @import "@/bulma/"; */
+body {
+  min-height: 100vh;
+}
 </style>
diff --git a/ui/src/components/ImageModal.vue b/ui/src/components/ImageModal.vue
new file mode 100644
index 0000000..8b262f5
--- /dev/null
+++ b/ui/src/components/ImageModal.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="modal is-active" v-if="visible" @click="hide">
+    <div class="modal-background" />
+
+    <div class="modal-content">
+      <!-- <p class="image is-4by3"> -->
+      <img src="https://bulma.io/images/placeholders/1280x960.png" alt="" />
+      <!-- </p> -->
+    </div>
+  </div>
+
+  <button class="button" @click="show">modal</button>
+</template>
+
+<script lang="ts">
+import { Vue } from "vue-class-component";
+
+export default class ImageModal extends Vue {
+  visible = false;
+
+  public created(): void {
+    window.addEventListener("keydown", (e) => {
+      if (e.key == "Escape") this.hide();
+    });
+  }
+
+  private show(): void {
+    this.visible = true;
+  }
+
+  private hide(): void {
+    this.visible = false;
+  }
+}
+</script>