From 728dfc52e5fc9b34a3529f06a46d45ea6580cd75 Mon Sep 17 00:00:00 2001
From: dpschen <dpschen@noreply.kolaente.de>
Date: Tue, 21 Sep 2021 16:37:56 +0000
Subject: [PATCH] feat: close modals with esc key (#741)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/741
Reviewed-by: konrad <k@knt.li>
Co-authored-by: dpschen <dpschen@noreply.kolaente.de>
Co-committed-by: dpschen <dpschen@noreply.kolaente.de>
---
 src/components/modal/modal.vue          | 15 ++++++---------
 src/views/About.vue                     |  7 ++++++-
 src/views/filters/CreateSavedFilter.vue |  7 ++++++-
 src/views/tasks/TaskDetailViewModal.vue |  7 ++++++-
 4 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index 0ce9880dc..d544183de 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -1,7 +1,12 @@
 <template>
 	<transition name="modal">
 		<div class="modal-mask has-overflow" :class="{'has-overflow': overflow}">
-			<div class="modal-container" @mousedown.self.prevent.stop="$emit('close')" :class="{'has-overflow': overflow}">
+			<div class="modal-container"
+				@mousedown.self.prevent.stop="$emit('close')"
+				:class="{'has-overflow': overflow}"
+				@shortkey="$emit('close')"
+				v-shortkey="['esc']"
+			>
 				<div class="modal-content" :class="{'has-overflow': overflow, 'is-wide': wide}">
 					<slot>
 						<div class="header">
@@ -36,14 +41,6 @@
 <script>
 export default {
 	name: 'modal',
-	mounted: function () {
-		document.addEventListener('keydown', (e) => {
-			// Close the model when escape is pressed
-			if (e.keyCode === 27) {
-				this.$emit('close')
-			}
-		})
-	},
 	props: {
 		overflow: {
 			type: Boolean,
diff --git a/src/views/About.vue b/src/views/About.vue
index 47b811fd9..331b9e21e 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -1,7 +1,12 @@
 <template>
 	<transition name="fade">
 		<div class="modal-mask hint-modal">
-			<div @click.self="$router.back()" class="modal-container">
+			<div
+				class="modal-container"
+				@click.self="$router.back()"
+				@shortkey="$router.back()"
+				v-shortkey="['esc']"
+			>
 				<div class="modal-content">
 					<card
 						class="has-background-white has-no-shadow"
diff --git a/src/views/filters/CreateSavedFilter.vue b/src/views/filters/CreateSavedFilter.vue
index a46a8693b..ffb9765a1 100644
--- a/src/views/filters/CreateSavedFilter.vue
+++ b/src/views/filters/CreateSavedFilter.vue
@@ -1,6 +1,11 @@
 <template>
 	<div class="modal-mask hint-modal">
-		<div @click.self="$router.back()" class="modal-container">
+		<div
+			class="modal-container"
+			@click.self="$router.back()"
+			@shortkey="$router.back()"
+			v-shortkey="['esc']"
+		>
 			<div class="modal-content">
 				<card class="has-background-white has-no-shadow" :title="$t('filters.create.title')">
 					<p>
diff --git a/src/views/tasks/TaskDetailViewModal.vue b/src/views/tasks/TaskDetailViewModal.vue
index 4ca274aee..cce4927f1 100644
--- a/src/views/tasks/TaskDetailViewModal.vue
+++ b/src/views/tasks/TaskDetailViewModal.vue
@@ -1,6 +1,11 @@
 <template>
 	<div class="modal-mask">
-		<div @mousedown.self="close()" class="modal-container">
+		<div
+			class="modal-container"
+			@mousedown.self="close()"
+			v-shortkey="['esc']"
+			@shortkey="close()"
+		>
 			<div class="scrolling-content">
 				<a @click="close()" class="close">
 					<icon icon="times"/>