From 07ec18fe11a347f8cbad6b3e667dfc9d9f09c867 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Fri, 18 Oct 2019 07:04:24 -0400
Subject: add reusable modal component

---
 src/components/modal/modal.vue | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 src/components/modal/modal.vue

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

diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
new file mode 100644
index 00000000..389a8881
--- /dev/null
+++ b/src/components/modal/modal.vue
@@ -0,0 +1,29 @@
+<template>
+  <div
+    v-body-scroll-lock="true"
+    @click.self="closeModal"
+    class="modal-view"
+  >
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    closeModal () {
+      this.$emit('close')
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+
+.modal-view {
+  body:not(.scroll-locked) & {
+    display: none;
+  }
+}
+
+</style>
-- 
cgit v1.2.3-70-g09d2


From 0df0876cf1a8f961c8df12a7f0d11d9a61e64963 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Fri, 18 Oct 2019 07:07:16 -0400
Subject: move modal css into the correct place

---
 src/App.scss                   | 16 ----------------
 src/components/modal/modal.vue | 14 ++++++++++++++
 2 files changed, 14 insertions(+), 16 deletions(-)

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

diff --git a/src/App.scss b/src/App.scss
index 2190f91a..2117a577 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -714,22 +714,6 @@ nav {
   }
 }
 
-.modal-view {
-  z-index: 1000;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  overflow: auto;
-  animation-duration: 0.2s;
-  background-color: rgba(0, 0, 0, 0.5);
-  animation-name: modal-background-fadein;
-}
-
 .button-icon {
   font-size: 1.2em;
 }
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index 389a8881..c0a7ab21 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -21,6 +21,20 @@ export default {
 <style lang="scss">
 
 .modal-view {
+  z-index: 1000;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: auto;
+  animation-duration: 0.2s;
+  background-color: rgba(0, 0, 0, 0.5);
+  animation-name: modal-background-fadein;
+
   body:not(.scroll-locked) & {
     display: none;
   }
-- 
cgit v1.2.3-70-g09d2


From 2231025c41bef3618bd651ff7c0cacd39923d5e1 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Fri, 18 Oct 2019 07:08:34 -0400
Subject: fix eslint warning

---
 src/components/modal/modal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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

diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index c0a7ab21..d47951c8 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -1,8 +1,8 @@
 <template>
   <div
     v-body-scroll-lock="true"
-    @click.self="closeModal"
     class="modal-view"
+    @click.self="closeModal"
   >
     <slot />
   </div>
-- 
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/modal/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/modal/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 215232cc3008b577bf82e9d1598e03cb7610b44d Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Fri, 18 Oct 2019 11:54:42 -0400
Subject: remove needless ref definition

---
 src/components/modal/modal.vue | 1 -
 1 file changed, 1 deletion(-)

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

diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index e5831c47..e0722d65 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -1,7 +1,6 @@
 <template>
   <portal to="modal">
     <div
-      ref="view"
       v-body-scroll-lock="isOpen"
       v-show="isOpen"
       :class="['modal-view', viewClass]"
-- 
cgit v1.2.3-70-g09d2


From a302ec1f087a1203772ee605a33b535dbf26fd06 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Fri, 18 Oct 2019 11:57:54 -0400
Subject: fix eslint warnings

---
 src/App.vue                    | 5 ++++-
 src/components/modal/modal.vue | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

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

diff --git a/src/App.vue b/src/App.vue
index 33077c9c..a53bcb97 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -120,7 +120,10 @@
     <MobilePostStatusButton />
     <UserReportingModal />
     <PostStatusModal />
-    <portal-target name="modal" multiple />
+    <portal-target
+      name="modal"
+      multiple
+    />
   </div>
 </template>
 
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index e0722d65..d4fe9f76 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -1,8 +1,8 @@
 <template>
   <portal to="modal">
     <div
-      v-body-scroll-lock="isOpen"
       v-show="isOpen"
+      v-body-scroll-lock="isOpen"
       :class="['modal-view', viewClass]"
       @click.self="closeModal"
     >
-- 
cgit v1.2.3-70-g09d2


From 95ad5ccaf1378bed6f5226c61610b00e789a696a Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Fri, 18 Oct 2019 12:22:12 -0400
Subject: revert changes to render modal into portal

---
 src/App.vue                    |  5 +----
 src/components/modal/modal.vue | 18 ++++++++----------
 2 files changed, 9 insertions(+), 14 deletions(-)

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

diff --git a/src/App.vue b/src/App.vue
index a53bcb97..dbe842ec 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -120,10 +120,7 @@
     <MobilePostStatusButton />
     <UserReportingModal />
     <PostStatusModal />
-    <portal-target
-      name="modal"
-      multiple
-    />
+    <portal-target name="modal" />
   </div>
 </template>
 
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index d4fe9f76..51f35262 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -1,14 +1,12 @@
 <template>
-  <portal to="modal">
-    <div
-      v-show="isOpen"
-      v-body-scroll-lock="isOpen"
-      :class="['modal-view', viewClass]"
-      @click.self="closeModal"
-    >
-      <slot />
-    </div>
-  </portal>
+  <div
+    v-show="isOpen"
+    v-body-scroll-lock="isOpen"
+    :class="['modal-view', viewClass]"
+    @click.self="closeModal"
+  >
+    <slot />
+  </div>
 </template>
 
 <script src="./modal.js"></script>
-- 
cgit v1.2.3-70-g09d2


From 5eeded567579ca4c65b97729aa8d83ad52351cbb Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Fri, 18 Oct 2019 12:24:03 -0400
Subject: fix message input not auto-focusing bug

---
 src/components/modal/modal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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

diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index 51f35262..74e81109 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -28,7 +28,7 @@
   animation-name: modal-background-fadein;
 
   body:not(.scroll-locked) & {
-    display: none;
+    opacity: 0;
   }
 }
 </style>
-- 
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/modal/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 2cadeeb724dfdaa47d933aa524a5c557cbabd3c1 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Mon, 21 Oct 2019 15:37:14 -0400
Subject: move modal animation keyframes definition

---
 src/App.scss                   | 9 ---------
 src/components/modal/modal.vue | 9 +++++++++
 2 files changed, 9 insertions(+), 9 deletions(-)

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

diff --git a/src/App.scss b/src/App.scss
index 2117a577..f20eb44c 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -705,15 +705,6 @@ nav {
   }
 }
 
-@keyframes modal-background-fadein {
-  from {
-    background-color: rgba(0, 0, 0, 0);
-  }
-  to {
-    background-color: rgba(0, 0, 0, 0.5);
-  }
-}
-
 .button-icon {
   font-size: 1.2em;
 }
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index 34a50159..500b3d0a 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -31,4 +31,13 @@
     opacity: 0;
   }
 }
+
+@keyframes modal-background-fadein {
+  from {
+    background-color: rgba(0, 0, 0, 0);
+  }
+  to {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+}
 </style>
-- 
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/modal/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


From d3a6c030f8a156cbb5a6b758c7a06c64fefe3d80 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Mon, 21 Oct 2019 20:53:34 -0400
Subject: clean up

---
 src/components/modal/modal.js  | 10 ----------
 src/components/modal/modal.vue | 11 ++++++++++-
 2 files changed, 10 insertions(+), 11 deletions(-)
 delete mode 100644 src/components/modal/modal.js

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

diff --git a/src/components/modal/modal.js b/src/components/modal/modal.js
deleted file mode 100644
index 8daa27a3..00000000
--- a/src/components/modal/modal.js
+++ /dev/null
@@ -1,10 +0,0 @@
-const Modal = {
-  props: {
-    isOpen: {
-      type: Boolean,
-      default: true
-    }
-  }
-}
-
-export default Modal
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index 2e26d89b..cee24241 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -9,7 +9,16 @@
   </div>
 </template>
 
-<script src="./modal.js"></script>
+<script>
+export default {
+  props: {
+    isOpen: {
+      type: Boolean,
+      default: true
+    }
+  }
+}
+</script>
 
 <style lang="scss">
 .modal-view {
-- 
cgit v1.2.3-70-g09d2