From 2eec1880c63493d4f369dd2a5a1e6f96784a89e7 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Tyler.Akins1999@gmail.com>
Date: Sun, 13 Dec 2020 16:52:33 -0700
Subject: [PATCH] Add a closable property to the modal animation

---
 web/src/components/Modal.vue | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/web/src/components/Modal.vue b/web/src/components/Modal.vue
index fe453a2..17ad7c0 100644
--- a/web/src/components/Modal.vue
+++ b/web/src/components/Modal.vue
@@ -2,8 +2,9 @@
 	<transition name="fade" @after-enter="content = true">
 		<div
 			v-if="show"
-			class="modal-container clickable"
-			@click.self.stop="content = false"
+			class="modal-container"
+			:class="closable ? 'clickable' : ''"
+			@click.self.stop="handleBackgroundClick"
 		>
 			<transition name="burst" @after-leave="$emit('closed')">
 				<div v-if="content" class="modal unclickable">
@@ -22,10 +23,22 @@ export default {
 			required: true,
 			type: Boolean,
 		},
+		closable: {
+			required: false,
+			type: Boolean,
+			default: true,
+		}
 	},
 	data() {return {
 		content: false,
 	}},
+	methods: {
+		handleBackgroundClick() {
+			if (this.closable) {
+				this.content = false;
+			};
+		},
+	},
 }
 </script>