From 776f0ef77491ac06de4a0035d2c4d387d9564948 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 17 Oct 2019 15:43:59 -0400
Subject: lock body scroll when post status modal is open

---
 src/components/post_status_modal/post_status_modal.vue | 5 +++++
 1 file changed, 5 insertions(+)

(limited to 'src/components/post_status_modal/post_status_modal.vue')

diff --git a/src/components/post_status_modal/post_status_modal.vue b/src/components/post_status_modal/post_status_modal.vue
index d3a82389..b5e75de7 100644
--- a/src/components/post_status_modal/post_status_modal.vue
+++ b/src/components/post_status_modal/post_status_modal.vue
@@ -2,6 +2,7 @@
   <div
     v-if="isLoggedIn && !resettingForm"
     v-show="modalActivated"
+    v-body-scroll-lock="modalActivated"
     class="post-form-modal-view modal-view"
     @click="closeModal"
   >
@@ -28,6 +29,10 @@
 
 .post-form-modal-view {
   align-items: flex-start;
+
+  body:not(.scroll-locked) & {
+    display: none;
+  }
 }
 
 .post-form-modal-panel {
-- 
cgit v1.2.3-70-g09d2


From 348d6664eb07d4854ad4266873ad423091658187 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Fri, 18 Oct 2019 07:05:01 -0400
Subject: refactor all kind of modals using the modal component

---
 src/components/media_modal/media_modal.js             |  4 +++-
 src/components/media_modal/media_modal.vue            | 13 ++++---------
 src/components/post_status_modal/post_status_modal.js |  4 +++-
 .../post_status_modal/post_status_modal.vue           | 18 +++++-------------
 .../user_reporting_modal/user_reporting_modal.js      |  5 ++++-
 .../user_reporting_modal/user_reporting_modal.vue     | 19 ++++---------------
 6 files changed, 23 insertions(+), 40 deletions(-)

(limited to 'src/components/post_status_modal/post_status_modal.vue')

diff --git a/src/components/media_modal/media_modal.js b/src/components/media_modal/media_modal.js
index 992d7129..4832abda 100644
--- a/src/components/media_modal/media_modal.js
+++ b/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 () {
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index 06ced5a1..69e75e2b 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -1,9 +1,8 @@
 <template>
-  <div
+  <Modal
     v-if="showing"
-    v-body-scroll-lock="showing"
-    class="modal-view media-modal-view"
-    @click.prevent="hide"
+    class="media-modal-view"
+    @close="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;
diff --git a/src/components/post_status_modal/post_status_modal.js b/src/components/post_status_modal/post_status_modal.js
index 38258296..b44354db 100644
--- a/src/components/post_status_modal/post_status_modal.js
+++ b/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 {
diff --git a/src/components/post_status_modal/post_status_modal.vue b/src/components/post_status_modal/post_status_modal.vue
index b5e75de7..06ef0a35 100644
--- a/src/components/post_status_modal/post_status_modal.vue
+++ b/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 modal-view"
-    @click="closeModal"
+    class="post-form-modal-view"
+    @close="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 {
diff --git a/src/components/user_reporting_modal/user_reporting_modal.js b/src/components/user_reporting_modal/user_reporting_modal.js
index 7c6ea409..3fb96384 100644
--- a/src/components/user_reporting_modal/user_reporting_modal.js
+++ b/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 () {
diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue
index ecbc1369..0dce4c55 100644
--- a/src/components/user_reporting_modal/user_reporting_modal.vue
+++ b/src/components/user_reporting_modal/user_reporting_modal.vue
@@ -1,14 +1,9 @@
 <template>
-  <div
+  <Modal
     v-if="isOpen"
-    v-body-scroll-lock="isOpen"
-    class="modal-view user-reporting-modal-view"
-    @click="closeModal"
+    @close="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;
-- 
cgit v1.2.3-70-g09d2


From 970907547627d600dd67167a22e3b437c5556ea8 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Fri, 18 Oct 2019 07:28:29 -0400
Subject: remove needless importing

---
 src/components/media_modal/media_modal.vue             | 3 ---
 src/components/modal/modal.vue                         | 2 --
 src/components/post_status_modal/post_status_modal.vue | 2 --
 3 files changed, 7 deletions(-)

(limited to 'src/components/post_status_modal/post_status_modal.vue')

diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index 69e75e2b..852bfe1f 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -38,8 +38,6 @@
 <script src="./media_modal.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
-
 .media-modal-view {
   z-index: 1001;
 
@@ -109,5 +107,4 @@
     }
   }
 }
-
 </style>
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index d47951c8..8edfbd45 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -19,7 +19,6 @@ export default {
 </script>
 
 <style lang="scss">
-
 .modal-view {
   z-index: 1000;
   position: fixed;
@@ -39,5 +38,4 @@ export default {
     display: none;
   }
 }
-
 </style>
diff --git a/src/components/post_status_modal/post_status_modal.vue b/src/components/post_status_modal/post_status_modal.vue
index 06ef0a35..d1caf38f 100644
--- a/src/components/post_status_modal/post_status_modal.vue
+++ b/src/components/post_status_modal/post_status_modal.vue
@@ -21,8 +21,6 @@
 <script src="./post_status_modal.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
-
 .post-form-modal-view {
   align-items: flex-start;
 }
-- 
cgit v1.2.3-70-g09d2


From a41ffea146bf1a392de255f04bf64599de165269 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Fri, 18 Oct 2019 11:53:38 -0400
Subject: render modals into the “modal” portal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                        |  2 +-
 src/components/media_modal/media_modal.vue         |  2 +-
 src/components/modal/modal.js                      | 20 ++++++++++++++++
 src/components/modal/modal.vue                     | 28 ++++++++++------------
 .../post_status_modal/post_status_modal.vue        |  4 ++--
 5 files changed, 36 insertions(+), 20 deletions(-)
 create mode 100644 src/components/modal/modal.js

(limited to 'src/components/post_status_modal/post_status_modal.vue')

diff --git a/src/App.vue b/src/App.vue
index dbe842ec..33077c9c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -120,7 +120,7 @@
     <MobilePostStatusButton />
     <UserReportingModal />
     <PostStatusModal />
-    <portal-target name="modal" />
+    <portal-target name="modal" multiple />
   </div>
 </template>
 
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index 852bfe1f..35f6f9e9 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -1,7 +1,7 @@
 <template>
   <Modal
     v-if="showing"
-    class="media-modal-view"
+    view-class="media-modal-view"
     @close="hide"
   >
     <img
diff --git a/src/components/modal/modal.js b/src/components/modal/modal.js
new file mode 100644
index 00000000..b9517445
--- /dev/null
+++ b/src/components/modal/modal.js
@@ -0,0 +1,20 @@
+import Vue from 'vue'
+
+const Modal = {
+  props: {
+    viewClass: {
+      type: String
+    },
+    isOpen: {
+      type: Boolean,
+      default: true
+    }
+  },
+  methods: {
+    closeModal () {
+      this.$emit('close')
+    }
+  }
+}
+
+export default Modal
\ No newline at end of file
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index 8edfbd45..e5831c47 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -1,22 +1,18 @@
 <template>
-  <div
-    v-body-scroll-lock="true"
-    class="modal-view"
-    @click.self="closeModal"
-  >
-    <slot />
-  </div>
+  <portal to="modal">
+    <div
+      ref="view"
+      v-body-scroll-lock="isOpen"
+      v-show="isOpen"
+      :class="['modal-view', viewClass]"
+      @click.self="closeModal"
+    >
+      <slot />
+    </div>
+  </portal>
 </template>
 
-<script>
-export default {
-  methods: {
-    closeModal () {
-      this.$emit('close')
-    }
-  }
-}
-</script>
+<script src="./modal.js"></script>
 
 <style lang="scss">
 .modal-view {
diff --git a/src/components/post_status_modal/post_status_modal.vue b/src/components/post_status_modal/post_status_modal.vue
index d1caf38f..2fbb7cc7 100644
--- a/src/components/post_status_modal/post_status_modal.vue
+++ b/src/components/post_status_modal/post_status_modal.vue
@@ -1,8 +1,8 @@
 <template>
   <Modal
     v-if="isLoggedIn && !resettingForm"
-    v-show="modalActivated"
-    class="post-form-modal-view"
+    :is-open="modalActivated"
+    view-class="post-form-modal-view"
     @close="closeModal"
   >
     <div class="post-form-modal-panel panel">
-- 
cgit v1.2.3-70-g09d2


From d69b8794b099b559ae813226eb81c206ed4f2f50 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Fri, 18 Oct 2019 12:13:11 -0400
Subject: use higher css specificity

---
 src/components/media_modal/media_modal.vue             | 2 +-
 src/components/post_status_modal/post_status_modal.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/components/post_status_modal/post_status_modal.vue')

diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index 35f6f9e9..e178fef1 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -38,7 +38,7 @@
 <script src="./media_modal.js"></script>
 
 <style lang="scss">
-.media-modal-view {
+.modal-view.media-modal-view {
   z-index: 1001;
 
   &:hover {
diff --git a/src/components/post_status_modal/post_status_modal.vue b/src/components/post_status_modal/post_status_modal.vue
index 2fbb7cc7..c930d632 100644
--- a/src/components/post_status_modal/post_status_modal.vue
+++ b/src/components/post_status_modal/post_status_modal.vue
@@ -21,7 +21,7 @@
 <script src="./post_status_modal.js"></script>
 
 <style lang="scss">
-.post-form-modal-view {
+.modal-view.post-form-modal-view {
   align-items: flex-start;
 }
 
-- 
cgit v1.2.3-70-g09d2


From c217483640c13f4948af54466dddb0ebc71f374e Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Mon, 21 Oct 2019 15:36:03 -0400
Subject: migrate viewClass prop to class attribute

---
 src/components/media_modal/media_modal.vue             | 2 +-
 src/components/modal/modal.js                          | 3 ---
 src/components/modal/modal.vue                         | 2 +-
 src/components/post_status_modal/post_status_modal.vue | 2 +-
 4 files changed, 3 insertions(+), 6 deletions(-)

(limited to 'src/components/post_status_modal/post_status_modal.vue')

diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index e178fef1..50f442e2 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -1,7 +1,7 @@
 <template>
   <Modal
     v-if="showing"
-    view-class="media-modal-view"
+    class="media-modal-view"
     @close="hide"
   >
     <img
diff --git a/src/components/modal/modal.js b/src/components/modal/modal.js
index 02d7017a..78537a1b 100644
--- a/src/components/modal/modal.js
+++ b/src/components/modal/modal.js
@@ -1,8 +1,5 @@
 const Modal = {
   props: {
-    viewClass: {
-      type: String
-    },
     isOpen: {
       type: Boolean,
       default: true
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index 74e81109..34a50159 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -2,7 +2,7 @@
   <div
     v-show="isOpen"
     v-body-scroll-lock="isOpen"
-    :class="['modal-view', viewClass]"
+    class="modal-view"
     @click.self="closeModal"
   >
     <slot />
diff --git a/src/components/post_status_modal/post_status_modal.vue b/src/components/post_status_modal/post_status_modal.vue
index c930d632..ef22b7ac 100644
--- a/src/components/post_status_modal/post_status_modal.vue
+++ b/src/components/post_status_modal/post_status_modal.vue
@@ -2,7 +2,7 @@
   <Modal
     v-if="isLoggedIn && !resettingForm"
     :is-open="modalActivated"
-    view-class="post-form-modal-view"
+    class="post-form-modal-view"
     @close="closeModal"
   >
     <div class="post-form-modal-panel panel">
-- 
cgit v1.2.3-70-g09d2


From 6084a5b6fe43bd14cf5d87a8f1623b338aad936e Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Mon, 21 Oct 2019 20:52:31 -0400
Subject: update event name

---
 src/components/media_modal/media_modal.vue                   | 2 +-
 src/components/modal/modal.js                                | 5 -----
 src/components/modal/modal.vue                               | 2 +-
 src/components/post_status_modal/post_status_modal.vue       | 2 +-
 src/components/user_reporting_modal/user_reporting_modal.vue | 2 +-
 5 files changed, 4 insertions(+), 9 deletions(-)

(limited to 'src/components/post_status_modal/post_status_modal.vue')

diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index 50f442e2..2597f4e3 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -2,7 +2,7 @@
   <Modal
     v-if="showing"
     class="media-modal-view"
-    @close="hide"
+    @backdropClicked="hide"
   >
     <img
       v-if="type === 'image'"
diff --git a/src/components/modal/modal.js b/src/components/modal/modal.js
index 78537a1b..8daa27a3 100644
--- a/src/components/modal/modal.js
+++ b/src/components/modal/modal.js
@@ -4,11 +4,6 @@ const Modal = {
       type: Boolean,
       default: true
     }
-  },
-  methods: {
-    closeModal () {
-      this.$emit('close')
-    }
   }
 }
 
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index 500b3d0a..2e26d89b 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -3,7 +3,7 @@
     v-show="isOpen"
     v-body-scroll-lock="isOpen"
     class="modal-view"
-    @click.self="closeModal"
+    @click.self="$emit('backdropClicked')"
   >
     <slot />
   </div>
diff --git a/src/components/post_status_modal/post_status_modal.vue b/src/components/post_status_modal/post_status_modal.vue
index ef22b7ac..dbcd321e 100644
--- a/src/components/post_status_modal/post_status_modal.vue
+++ b/src/components/post_status_modal/post_status_modal.vue
@@ -3,7 +3,7 @@
     v-if="isLoggedIn && !resettingForm"
     :is-open="modalActivated"
     class="post-form-modal-view"
-    @close="closeModal"
+    @backdropClicked="closeModal"
   >
     <div class="post-form-modal-panel panel">
       <div class="panel-heading">
diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue
index 0dce4c55..6ee53461 100644
--- a/src/components/user_reporting_modal/user_reporting_modal.vue
+++ b/src/components/user_reporting_modal/user_reporting_modal.vue
@@ -1,7 +1,7 @@
 <template>
   <Modal
     v-if="isOpen"
-    @close="closeModal"
+    @backdropClicked="closeModal"
   >
     <div class="user-reporting-panel panel">
       <div class="panel-heading">
-- 
cgit v1.2.3-70-g09d2