From 32db34523843eee46bf10057a0a081fb177f6448 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Fri, 10 May 2019 22:50:59 -0700
Subject: [PATCH] Update modal code

---
 .../assets/scripts/components/core/Modal.vue  | 28 +++++++++----------
 .../scripts/components/dashboard/Account.vue  |  2 +-
 .../filemanager/modals/CreateFolderModal.vue  |  2 +-
 .../filemanager/modals/DeleteFileModal.vue    |  2 +-
 .../filemanager/modals/MoveFileModal.vue      |  2 +-
 .../filemanager/modals/RenameModal.vue        |  2 +-
 .../components/server/subpages/Databases.vue  |  2 +-
 resources/assets/styles/components/modal.css  | 19 ++++++++++++-
 8 files changed, 38 insertions(+), 21 deletions(-)

diff --git a/resources/assets/scripts/components/core/Modal.vue b/resources/assets/scripts/components/core/Modal.vue
index f83ad756e..560516df7 100644
--- a/resources/assets/scripts/components/core/Modal.vue
+++ b/resources/assets/scripts/components/core/Modal.vue
@@ -1,13 +1,9 @@
 <template>
     <transition name="modal">
-        <div class="modal-mask" v-show="show" v-on:click="close">
-            <div class="modal-container" @click.stop>
-                <div v-on:click="close" v-if="dismissable && showCloseIcon">
-                    <Icon name="x"
-                          class="absolute pin-r pin-t m-2 text-neutral-500 cursor-pointer"
-                          aria-label="Close modal"
-                          role="button"
-                    />
+        <div class="modal-mask" v-show="isVisible" v-on:click="closeOnBackground && close()">
+            <div class="modal-container p-8" :class="{ 'full-screen': isFullScreen }" @click.stop>
+                <div class="modal-close-icon" v-on:click="close" v-if="dismissable && showCloseIcon">
+                    <Icon name="x" aria-label="Close modal" role="button"/>
                 </div>
                 <slot/>
             </div>
@@ -24,17 +20,19 @@
         components: {Icon},
 
         props: {
-            showCloseIcon: {type: Boolean, default: true},
             modalName: {type: String, default: 'modal'},
-            show: {type: Boolean, default: false},
+            isVisible: {type: Boolean, default: false},
             closeOnEsc: {type: Boolean, default: true},
             dismissable: {type: Boolean, default: true},
+            showCloseIcon: {type: Boolean, default: true},
+            isFullScreen: {type: Boolean, default: false},
+            closeOnBackground: {type: Boolean, default: true},
         },
 
         mounted: function () {
-            if (this.$props.dismissable && this.$props.closeOnEsc) {
+            if (this.$props.closeOnEsc) {
                 document.addEventListener('keydown', e => {
-                    if (this.show && e.key === 'Escape') {
+                    if (this.isVisible && e.key === 'Escape') {
                         this.close();
                     }
                 })
@@ -43,9 +41,11 @@
 
         methods: {
             close: function () {
-                if (this.$props.dismissable) {
-                    this.$emit('close', this.$props.modalName);
+                if (!this.$props.dismissable) {
+                    return;
                 }
+
+                this.$emit('close', this.$props.modalName);
             }
         },
     });
diff --git a/resources/assets/scripts/components/dashboard/Account.vue b/resources/assets/scripts/components/dashboard/Account.vue
index 3fd420f08..ed7486540 100644
--- a/resources/assets/scripts/components/dashboard/Account.vue
+++ b/resources/assets/scripts/components/dashboard/Account.vue
@@ -2,7 +2,7 @@
     <div>
         <Navigation/>
         <div class="container animate fadein mt-2 sm:mt-6">
-            <Modal :show="modalVisible" v-on:close="modalVisible = false">
+            <Modal :isVisible="modalVisible" v-on:close="modalVisible = false">
                 <TwoFactorAuthentication v-on:close="modalVisible = false"/>
             </Modal>
             <Flash container="mt-2 sm:mt-6 mb-2"/>
diff --git a/resources/assets/scripts/components/server/components/filemanager/modals/CreateFolderModal.vue b/resources/assets/scripts/components/server/components/filemanager/modals/CreateFolderModal.vue
index eea278b45..4dd1018aa 100644
--- a/resources/assets/scripts/components/server/components/filemanager/modals/CreateFolderModal.vue
+++ b/resources/assets/scripts/components/server/components/filemanager/modals/CreateFolderModal.vue
@@ -1,5 +1,5 @@
 <template>
-    <Modal :show="visible" v-on:close="onModalClose" :showCloseIcon="false" :dismissable="!isLoading">
+    <Modal :isVisible="visible" v-on:close="onModalClose" :showCloseIcon="false" :dismissable="!isLoading">
         <div>
             <label class="input-label">
                 Directory Name
diff --git a/resources/assets/scripts/components/server/components/filemanager/modals/DeleteFileModal.vue b/resources/assets/scripts/components/server/components/filemanager/modals/DeleteFileModal.vue
index 6824c4677..bfe08f4b7 100644
--- a/resources/assets/scripts/components/server/components/filemanager/modals/DeleteFileModal.vue
+++ b/resources/assets/scripts/components/server/components/filemanager/modals/DeleteFileModal.vue
@@ -1,5 +1,5 @@
 <template>
-    <Modal :show="isVisible" v-on:close="isVisible = false" :dismissable="!isLoading">
+    <Modal :isVisible="isVisible" v-on:close="isVisible = false" :dismissable="!isLoading">
         <MessageBox
             class="alert error mb-8"
             title="Error"
diff --git a/resources/assets/scripts/components/server/components/filemanager/modals/MoveFileModal.vue b/resources/assets/scripts/components/server/components/filemanager/modals/MoveFileModal.vue
index eb0c7c63b..7166046ce 100644
--- a/resources/assets/scripts/components/server/components/filemanager/modals/MoveFileModal.vue
+++ b/resources/assets/scripts/components/server/components/filemanager/modals/MoveFileModal.vue
@@ -1,5 +1,5 @@
 <template>
-    <Modal :show="visible" v-on:close="isVisible = false" :dismissable="!isLoading">
+    <Modal :isVisible="visible" v-on:close="isVisible = false" :dismissable="!isLoading">
         <MessageBox class="alert error mb-8" title="Error" :message="error" v-if="error"/>
         <div class="flex items-end">
             <div class="flex-1">
diff --git a/resources/assets/scripts/components/server/components/filemanager/modals/RenameModal.vue b/resources/assets/scripts/components/server/components/filemanager/modals/RenameModal.vue
index fa760b4c4..83d0bce2a 100644
--- a/resources/assets/scripts/components/server/components/filemanager/modals/RenameModal.vue
+++ b/resources/assets/scripts/components/server/components/filemanager/modals/RenameModal.vue
@@ -1,5 +1,5 @@
 <template>
-    <Modal :show="isVisible" v-on:close="closeModal" :showCloseIcon="false" :dismissable="!isLoading">
+    <Modal :isVisible="isVisible" v-on:close="closeModal" :showCloseIcon="false" :dismissable="!isLoading">
         <MessageBox
                 class="alert error mb-8"
                 title="Error"
diff --git a/resources/assets/scripts/components/server/subpages/Databases.vue b/resources/assets/scripts/components/server/subpages/Databases.vue
index 8feb1a643..198c774a4 100644
--- a/resources/assets/scripts/components/server/subpages/Databases.vue
+++ b/resources/assets/scripts/components/server/subpages/Databases.vue
@@ -18,7 +18,7 @@
             <div>
                 <button class="btn btn-primary btn-lg" v-on:click="showCreateModal = true">Create new database</button>
             </div>
-            <Modal :show="showCreateModal" v-on:close="showCreateModal = false">
+            <Modal :isVisible="showCreateModal" v-on:close="showCreateModal = false">
                 <CreateDatabaseModal
                         v-on:close="showCreateModal = false"
                         v-on:database="handleModalCallback"
diff --git a/resources/assets/styles/components/modal.css b/resources/assets/styles/components/modal.css
index 0a2fe6e3c..ad87f5e45 100644
--- a/resources/assets/styles/components/modal.css
+++ b/resources/assets/styles/components/modal.css
@@ -4,10 +4,21 @@
   transition: opacity 250ms ease;
 
   & > .modal-container {
-    @apply .relative .p-8 .bg-white .w-full .max-w-md .m-auto .flex-col .flex .rounded;
+    @apply .relative .bg-white .w-full .max-w-md .m-auto .flex-col .flex .rounded .shadow-md;
     transition: all 250ms ease;
     margin-top: 15%;
 
+    & > .modal-close-icon {
+      @apply .absolute .pin-r .p-2 .text-white .cursor-pointer .opacity-50;
+      transition: opacity 150ms linear, transform 150ms ease-in;
+      top: -2.5rem;
+
+      &:hover {
+        @apply .opacity-100;
+        transform: rotate(90deg);
+      }
+    }
+
     /**
      * On tiny phone screens make sure there is a margin on the sides and also
      * center the modal rather than putting it towards the top of the screen.
@@ -18,6 +29,12 @@
     }
   }
 
+  & > .modal-container.full-screen {
+    @apply .w-3/4 .mt-32;
+    height: calc(100vh - 16rem);
+    max-width: none;
+  }
+
   & > .modal-container.w-auto {
     @apply .w-auto;
   }