refactor all kind of modals using the modal component

src/components/media_modal/media_modal.js

@@ -1,11 +1,13 @@
 import StillImage from '../still-image/still-image.vue'
 import VideoAttachment from '../video_attachment/video_attachment.vue'
+import Modal from '../modal/modal.vue'
 import fileTypeService from '../../services/file_type/file_type.service.js'
 
 const MediaModal = {
   components: {
     StillImage,
-    VideoAttachment
+    VideoAttachment,
+    Modal
   },
   computed: {
     showing () {

src/components/media_modal/media_modal.vue

@@ -1,9 +1,8 @@
 <template>
-  <div
+  <Modal
     v-if="showing"
-    v-body-scroll-lock="showing"
+    class="media-modal-view"
-    class="modal-view media-modal-view"
+    @close="hide"
-    @click.prevent="hide"
   >
     <img
       v-if="type === 'image'"
@@ -33,7 +32,7 @@
     >
       <i class="icon-right-open arrow-icon" />
     </button>
-  </div>
+  </Modal>
 </template>
 
 <script src="./media_modal.js"></script>
@@ -44,10 +43,6 @@
 .media-modal-view {
   z-index: 1001;
 
-  body:not(.scroll-locked) & {
-    display: none;
-  }
-
   &:hover {
     .modal-view-button-arrow {
       opacity: 0.75;

src/components/post_status_modal/post_status_modal.js

@@ -1,9 +1,11 @@
 import PostStatusForm from '../post_status_form/post_status_form.vue'
+import Modal from '../modal/modal.vue'
 import get from 'lodash/get'
 
 const PostStatusModal = {
   components: {
-    PostStatusForm
+    PostStatusForm,
+    Modal
   },
   data () {
     return {

src/components/post_status_modal/post_status_modal.vue

@@ -1,15 +1,11 @@
 <template>
-  <div
+  <Modal
     v-if="isLoggedIn && !resettingForm"
     v-show="modalActivated"
-    v-body-scroll-lock="modalActivated"
+    class="post-form-modal-view"
-    class="post-form-modal-view modal-view"
+    @close="closeModal"
-    @click="closeModal"
-  >
-    <div
-      class="post-form-modal-panel panel"
-      @click.stop=""
   >
+    <div class="post-form-modal-panel panel">
       <div class="panel-heading">
         {{ $t('post_status.new_status') }}
       </div>
@@ -19,7 +15,7 @@
         @posted="closeModal"
       />
     </div>
-  </div>
+  </Modal>
 </template>
 
 <script src="./post_status_modal.js"></script>
@@ -29,10 +25,6 @@
 
 .post-form-modal-view {
   align-items: flex-start;
-
-  body:not(.scroll-locked) & {
-    display: none;
-  }
 }
 
 .post-form-modal-panel {

src/components/user_reporting_modal/user_reporting_modal.js

@@ -2,12 +2,14 @@
 import Status from '../status/status.vue'
 import List from '../list/list.vue'
 import Checkbox from '../checkbox/checkbox.vue'
+import Modal from '../modal/modal.vue'
 
 const UserReportingModal = {
   components: {
     Status,
     List,
-    Checkbox
+    Checkbox,
+    Modal
   },
   data () {
     return {
@@ -51,6 +53,7 @@ const UserReportingModal = {
       this.error = false
     },
     closeModal () {
+      console.log('closeModal clicked')
       this.$store.dispatch('closeUserReportingModal')
     },
     reportUser () {

src/components/user_reporting_modal/user_reporting_modal.vue

@@ -1,14 +1,9 @@
 <template>
-  <div
+  <Modal
     v-if="isOpen"
-    v-body-scroll-lock="isOpen"
+    @close="closeModal"
-    class="modal-view user-reporting-modal-view"
-    @click="closeModal"
-  >
-    <div
-      class="user-reporting-panel panel"
-      @click.stop=""
   >
+    <div class="user-reporting-panel panel">
       <div class="panel-heading">
         <div class="title">
           {{ $t('user_reporting.title', [user.screen_name]) }}
@@ -70,7 +65,7 @@
         </div>
       </div>
     </div>
-  </div>
+  </Modal>
 </template>
 
 <script src="./user_reporting_modal.js"></script>
@@ -78,12 +73,6 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.user-reporting-modal-view {
-  body:not(.scroll-locked) & {
-    display: none;
-  }
-}
-
 .user-reporting-panel {
   width: 90vw;
   max-width: 700px;