feat: close modals with esc key (#741)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: vikunja/frontend#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

@@ -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,

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"

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>

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"/>