From c601b790c78730252beecd760020da99a901a10f Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Fri, 16 Oct 2020 13:21:28 -0400
Subject: [PATCH] Add cancel button

---
 app/src/components/v-drawer/v-drawer.vue             | 12 +++++++++++-
 app/src/modules/activity/routes/item.vue             |  2 +-
 .../routes/data-model/field-detail/field-detail.vue  |  2 +-
 .../settings/routes/data-model/new-collection.vue    |  2 +-
 .../drawer-collection/drawer-collection.vue          |  2 +-
 .../private/components/drawer-item/drawer-item.vue   |  2 +-
 .../private/components/image-editor/image-editor.vue |  9 ++++++++-
 .../revisions-drawer-detail/revisions-drawer.vue     |  2 +-
 8 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/app/src/components/v-drawer/v-drawer.vue b/app/src/components/v-drawer/v-drawer.vue
index bc97b55495..2f8c787b15 100644
--- a/app/src/components/v-drawer/v-drawer.vue
+++ b/app/src/components/v-drawer/v-drawer.vue
@@ -1,10 +1,13 @@
 <template>
-	<v-dialog v-model="_active" @esc="$emit('esc')" :persistent="persistent" placement="right">
+	<v-dialog v-model="_active" @esc="$emit('cancel')" :persistent="persistent" placement="right">
 		<template #activator="{ on }">
 			<slot name="activator" v-bind="{ on }" />
 		</template>
 
 		<article class="v-drawer">
+			<v-button class="cancel" @click="$emit('cancel')" icon rounded secondary v-tooltip.bottom="$t('cancel')">
+				<v-icon name="close" />
+			</v-button>
 			<!-- <header class="header">
 				<v-icon class="menu-toggle" name="menu" @click="sidebarActive = !sidebarActive" />
 				<h2 class="title">{{ title }}</h2>
@@ -96,12 +99,19 @@ body {
 @import '@/styles/mixins/breakpoint';
 
 .v-drawer {
+	position: relative;
 	display: flex;
 	flex-direction: column;
 	max-width: var(--v-drawer-max-width);
 	height: 100%;
 	background-color: var(--background-page);
 
+	.cancel {
+		position: absolute;
+		top: 32px;
+		left: -76px;
+	}
+
 	.spacer {
 		flex-grow: 1;
 	}
diff --git a/app/src/modules/activity/routes/item.vue b/app/src/modules/activity/routes/item.vue
index b6dad9e2c3..68ac108d18 100644
--- a/app/src/modules/activity/routes/item.vue
+++ b/app/src/modules/activity/routes/item.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-drawer active title="Activity Item" @toggle="close" @esc="close">
+	<v-drawer active title="Activity Item" @toggle="close" @cancel="close">
 		<v-progress-circular indeterminate v-if="loading" />
 
 		<template v-else-if="error">
diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
index 45d72cd7f8..e4f85d2e4e 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
@@ -32,7 +32,7 @@
 		v-else
 		:active="true"
 		@toggle="cancelField"
-		@esc="cancelField"
+		@cancel="cancelField"
 		:title="
 			field === '+'
 				? $t('creating_new_field', { collection: collectionInfo.name })
diff --git a/app/src/modules/settings/routes/data-model/new-collection.vue b/app/src/modules/settings/routes/data-model/new-collection.vue
index c1fa276624..dc99bac6e5 100644
--- a/app/src/modules/settings/routes/data-model/new-collection.vue
+++ b/app/src/modules/settings/routes/data-model/new-collection.vue
@@ -4,7 +4,7 @@
 		:active="true"
 		class="new-collection"
 		persistent
-		@esc="$router.push('/settings/data-model')"
+		@cancel="$router.push('/settings/data-model')"
 	>
 		<v-dialog :active="saveError !== null" @toggle="saveError = null" @esc="saveError = null">
 			<v-card class="selectable">
diff --git a/app/src/views/private/components/drawer-collection/drawer-collection.vue b/app/src/views/private/components/drawer-collection/drawer-collection.vue
index cb02087526..aa6baa8fd9 100644
--- a/app/src/views/private/components/drawer-collection/drawer-collection.vue
+++ b/app/src/views/private/components/drawer-collection/drawer-collection.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-drawer v-model="_active" :title="$t('select_item')" no-padding @esc="cancel">
+	<v-drawer v-model="_active" :title="$t('select_item')" no-padding @cancel="cancel">
 		<component
 			:is="`layout-${localLayout}`"
 			:collection="collection"
diff --git a/app/src/views/private/components/drawer-item/drawer-item.vue b/app/src/views/private/components/drawer-item/drawer-item.vue
index 75c317e188..9404e1616f 100644
--- a/app/src/views/private/components/drawer-item/drawer-item.vue
+++ b/app/src/views/private/components/drawer-item/drawer-item.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-drawer v-model="_active" :title="title" persistent @esc="cancel">
+	<v-drawer v-model="_active" :title="title" persistent @cancel="cancel">
 		<template v-if="junctionField">
 			<v-form
 				:loading="loading"
diff --git a/app/src/views/private/components/image-editor/image-editor.vue b/app/src/views/private/components/image-editor/image-editor.vue
index 11534e9911..30995e0944 100644
--- a/app/src/views/private/components/image-editor/image-editor.vue
+++ b/app/src/views/private/components/image-editor/image-editor.vue
@@ -1,5 +1,12 @@
 <template>
-	<v-drawer v-model="_active" class="modal" :title="$t('editing_image')" persistent no-padding @esc="_active = false">
+	<v-drawer
+		v-model="_active"
+		class="modal"
+		:title="$t('editing_image')"
+		persistent
+		no-padding
+		@cancel="_active = false"
+	>
 		<template #activator="activatorBinding">
 			<slot name="activator" v-bind="activatorBinding" />
 		</template>
diff --git a/app/src/views/private/components/revisions-drawer-detail/revisions-drawer.vue b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer.vue
index e09785f8bc..dc20fb034f 100644
--- a/app/src/views/private/components/revisions-drawer-detail/revisions-drawer.vue
+++ b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<v-drawer v-model="_active" :title="$t('item_revision')" @esc="_active = false">
+		<v-drawer v-model="_active" :title="$t('item_revision')" @cancel="_active = false">
 			<template #subtitle>
 				<revisions-drawer-picker :revisions="revisions" :current.sync="_current" />
 			</template>