Update modal code

Author: DaneEveritt

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);
             }
         },
     });

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

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

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"

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

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"

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"

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;
   }