From c8a305f93067a26fd19684965347ee785f7448e2 Mon Sep 17 00:00:00 2001
From: kolaente <konrad@kola-entertainments.de>
Date: Wed, 12 Sep 2018 08:22:17 +0200
Subject: [PATCH] Added modal component

---
 src/components/modal/Modal.vue | 92 ++++++++++++++++++++++++++++++++++
 src/main.js                    |  4 ++
 2 files changed, 96 insertions(+)
 create mode 100644 src/components/modal/Modal.vue

diff --git a/src/components/modal/Modal.vue b/src/components/modal/Modal.vue
new file mode 100644
index 00000000..6ba6b5ba
--- /dev/null
+++ b/src/components/modal/Modal.vue
@@ -0,0 +1,92 @@
+<template>
+	<transition name="modal">
+		<div class="modal-mask">
+			<div class="modal-container">
+				<div class="modal-content">
+					<div class="header">
+						<slot name="header"></slot>
+					</div>
+					<div class="content">
+						<slot name="text"></slot>
+					</div>
+					<div class="actions">
+						<button class="button is-danger is-inverted" @click="$emit('close')">Cancel</button>
+						<button class="button is-success is-inverted" @click="$emit('submit')">Do it!</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	</transition>
+</template>
+
+<script>
+    export default {
+        name: 'modal',
+        props: {
+            header: ''
+        },
+        mounted: function () {
+            document.addEventListener('keydown', (e) => {
+                // Close the model when escape is pressed
+                if (e.keyCode === 27) {
+                    this.$emit('close')
+                }
+            })
+        }
+    }
+</script>
+
+<style lang="scss">
+	.modal-mask {
+		position: fixed;
+		z-index: 9998;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-color: rgba(0, 0, 0, .8);
+		transition: opacity .15s ease;
+		color: #fff;
+
+		.modal-container {
+			transition: all .15s ease;
+			position: relative;
+			width: 100%;
+			height: 100%;
+
+			.modal-content {
+				text-align: center;
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+				text-align: center;
+
+				.header {
+					font-size: 2rem;
+					font-weight: 700;
+				}
+
+				.button {
+					margin: 0 0.5rem;
+				}
+			}
+		}
+	}
+
+	/* Transitions */
+
+	.modal-enter {
+		opacity: 0;
+	}
+
+	.modal-leave-active {
+		opacity: 0;
+	}
+
+	.modal-enter .modal-container,
+	.modal-leave-active .modal-container {
+		-webkit-transform: scale(0.9);
+		transform: scale(0.9);
+	}
+</style>
diff --git a/src/main.js b/src/main.js
index 49edc740..53610663 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,6 +3,10 @@ import App from './App.vue'
 import router from './router'
 import auth from './auth'
 
+// Register the modal
+import Modal from './components/modal/Modal'
+Vue.component('modal', Modal)
+
 import './vikunja.scss'
 
 Vue.config.productionTip = false