From c4497f645fbb3ade34f1af63a042640219095401 Mon Sep 17 00:00:00 2001
From: HJ <30-hj@users.noreply.git.pleroma.social>
Date: Tue, 15 Oct 2019 15:48:34 +0000
Subject: [PATCH 01/32] Update CHANGELOG.md

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ff4c2fd1b..d08da09e5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 ### Added
+- Ability to hide/show repeats from user
+- User profile button clutter organized into a menu 
 - Emoji picker
 - Started changelog anew
 ### Changed

From 37be781312c6e3139a7b158835a51b141fd94e70 Mon Sep 17 00:00:00 2001
From: Maxim Filippov <colixer@gmail.com>
Date: Wed, 16 Oct 2019 10:00:26 +0000
Subject: [PATCH 02/32] Require password reset

---
 src/boot/routes.js                               |  2 +-
 src/components/login_form/login_form.js          |  2 ++
 src/components/password_reset/password_reset.js  |  6 ++++++
 src/components/password_reset/password_reset.vue | 16 +++++++++++++++-
 src/i18n/en.json                                 |  4 +++-
 5 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/boot/routes.js b/src/boot/routes.js
index cd02711cc..5670236c7 100644
--- a/src/boot/routes.js
+++ b/src/boot/routes.js
@@ -47,7 +47,7 @@ export default (store) => {
     { name: 'dms', path: '/users/:username/dms', component: DMs, beforeEnter: validateAuthenticatedRoute },
     { name: 'settings', path: '/settings', component: Settings },
     { name: 'registration', path: '/registration', component: Registration },
-    { name: 'password-reset', path: '/password-reset', component: PasswordReset },
+    { name: 'password-reset', path: '/password-reset', component: PasswordReset, props: true },
     { name: 'registration-token', path: '/registration/:token', component: Registration },
     { name: 'friend-requests', path: '/friend-requests', component: FollowRequests, beforeEnter: validateAuthenticatedRoute },
     { name: 'user-settings', path: '/user-settings', component: UserSettings, beforeEnter: validateAuthenticatedRoute },
diff --git a/src/components/login_form/login_form.js b/src/components/login_form/login_form.js
index 10f52fe24..0b574a048 100644
--- a/src/components/login_form/login_form.js
+++ b/src/components/login_form/login_form.js
@@ -59,6 +59,8 @@ const LoginForm = {
           if (result.error) {
             if (result.error === 'mfa_required') {
               this.requireMFA({ app: app, settings: result })
+            } else if (result.identifier === 'password_reset_required') {
+              this.$router.push({ name: 'password-reset', params: { passwordResetRequested: true } })
             } else {
               this.error = result.error
               this.focusOnPasswordInput()
diff --git a/src/components/password_reset/password_reset.js b/src/components/password_reset/password_reset.js
index fa71e07a9..62e74e30f 100644
--- a/src/components/password_reset/password_reset.js
+++ b/src/components/password_reset/password_reset.js
@@ -25,6 +25,12 @@ const passwordReset = {
       this.$router.push({ name: 'root' })
     }
   },
+  props: {
+    passwordResetRequested: {
+      default: false,
+      type: Boolean
+    }
+  },
   methods: {
     dismissError () {
       this.error = null
diff --git a/src/components/password_reset/password_reset.vue b/src/components/password_reset/password_reset.vue
index 00474e95d..713c9dced 100644
--- a/src/components/password_reset/password_reset.vue
+++ b/src/components/password_reset/password_reset.vue
@@ -10,7 +10,10 @@
       >
         <div class="container">
           <div v-if="!mailerEnabled">
-            <p>
+            <p v-if="passwordResetRequested">
+              {{ $t('password_reset.password_reset_required_but_mailer_is_disabled') }}
+            </p>
+            <p v-else>
               {{ $t('password_reset.password_reset_disabled') }}
             </p>
           </div>
@@ -25,6 +28,12 @@
             </div>
           </div>
           <div v-else>
+            <p
+              v-if="passwordResetRequested"
+              class="password-reset-required error"
+            >
+              {{ $t('password_reset.password_reset_required') }}
+            </p>
             <p>
               {{ $t('password_reset.instruction') }}
             </p>
@@ -104,6 +113,11 @@
     margin: 0.3em 0.0em 1em;
   }
 
+  .password-reset-required {
+    background-color: var(--alertError, $fallback--alertError);
+    padding: 10px 0;
+  }
+
   .notice-dismissible {
     padding-right: 2rem;
   }
diff --git a/src/i18n/en.json b/src/i18n/en.json
index b58112e3a..d11b2d14e 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -632,6 +632,8 @@
     "return_home": "Return to the home page",
     "not_found": "We couldn't find that email or username.",
     "too_many_requests": "You have reached the limit of attempts, try again later.",
-    "password_reset_disabled": "Password reset is disabled. Please contact your instance administrator."
+    "password_reset_disabled": "Password reset is disabled. Please contact your instance administrator.",
+    "password_reset_required": "You must reset your password to log in.",
+    "password_reset_required_but_mailer_is_disabled": "You must reset your password, but password reset is disabled. Please contact your instance administrator."
   }
 }

From 60828f119c5b8f5de1ba6f6a9d774ef0e813405b Mon Sep 17 00:00:00 2001
From: Maksim Pechnikov <parallel588@gmail.com>
Date: Thu, 17 Oct 2019 16:19:52 +0300
Subject: [PATCH 03/32] updated FollowCard component

---
 src/components/follow_button/follow_button.js |  4 +--
 .../follow_button/follow_button.vue           |  2 +-
 src/components/follow_card/follow_card.js     | 21 +++--------
 src/components/follow_card/follow_card.vue    | 35 +++----------------
 4 files changed, 12 insertions(+), 50 deletions(-)

diff --git a/src/components/follow_button/follow_button.js b/src/components/follow_button/follow_button.js
index 4123c9fd2..12da26454 100644
--- a/src/components/follow_button/follow_button.js
+++ b/src/components/follow_button/follow_button.js
@@ -1,6 +1,6 @@
 import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
 export default {
-  props: ['user'],
+  props: ['user', 'labelFollowing', 'buttonClass'],
   data () {
     return {
       inProgress: false
@@ -23,7 +23,7 @@ export default {
       if (this.inProgress) {
         return this.$t('user_card.follow_progress')
       } else if (this.user.following) {
-        return this.$t('user_card.following')
+        return this.labelFollowing || this.$t('user_card.following')
       } else if (this.user.requested) {
         return this.$t('user_card.follow_sent')
       } else {
diff --git a/src/components/follow_button/follow_button.vue b/src/components/follow_button/follow_button.vue
index f0cbb94b5..66d899b93 100644
--- a/src/components/follow_button/follow_button.vue
+++ b/src/components/follow_button/follow_button.vue
@@ -1,7 +1,7 @@
 <template>
   <button
     class="btn btn-default follow-button"
-    :class="{ pressed: isPressed }"
+    :class="[buttonClass, { pressed: isPressed}]"
     :disabled="inProgress"
     :title="title"
     @click="onClick"
diff --git a/src/components/follow_card/follow_card.js b/src/components/follow_card/follow_card.js
index 118d0c7c7..2c3231a96 100644
--- a/src/components/follow_card/follow_card.js
+++ b/src/components/follow_card/follow_card.js
@@ -1,6 +1,6 @@
 import BasicUserCard from '../basic_user_card/basic_user_card.vue'
 import RemoteFollow from '../remote_follow/remote_follow.vue'
-import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
+import FollowButton from '../follow_button/follow_button.vue'
 
 const FollowCard = {
   props: [
@@ -8,13 +8,12 @@ const FollowCard = {
     'noFollowsYou'
   ],
   data () {
-    return {
-      inProgress: false
-    }
+    return { }
   },
   components: {
     BasicUserCard,
-    RemoteFollow
+    RemoteFollow,
+    FollowButton
   },
   computed: {
     isMe () {
@@ -25,18 +24,6 @@ const FollowCard = {
     }
   },
   methods: {
-    followUser () {
-      this.inProgress = true
-      requestFollow(this.user, this.$store).then(() => {
-        this.inProgress = false
-      })
-    },
-    unfollowUser () {
-      this.inProgress = true
-      requestUnfollow(this.user, this.$store).then(() => {
-        this.inProgress = false
-      })
-    }
   }
 }
 
diff --git a/src/components/follow_card/follow_card.vue b/src/components/follow_card/follow_card.vue
index a9d237bba..a43cac4e6 100644
--- a/src/components/follow_card/follow_card.vue
+++ b/src/components/follow_card/follow_card.vue
@@ -16,36 +16,11 @@
         </div>
       </template>
       <template v-else>
-        <button
-          v-if="!user.following"
-          class="btn btn-default follow-card-follow-button"
-          :disabled="inProgress"
-          :title="user.requested ? $t('user_card.follow_again') : ''"
-          @click="followUser"
-        >
-          <template v-if="inProgress">
-            {{ $t('user_card.follow_progress') }}
-          </template>
-          <template v-else-if="user.requested">
-            {{ $t('user_card.follow_sent') }}
-          </template>
-          <template v-else>
-            {{ $t('user_card.follow') }}
-          </template>
-        </button>
-        <button
-          v-else
-          class="btn btn-default follow-card-follow-button pressed"
-          :disabled="inProgress"
-          @click="unfollowUser"
-        >
-          <template v-if="inProgress">
-            {{ $t('user_card.follow_progress') }}
-          </template>
-          <template v-else>
-            {{ $t('user_card.follow_unfollow') }}
-          </template>
-        </button>
+        <FollowButton
+          :user="user"
+          button-class="follow-card-follow-button"
+          :label-following="$t('user_card.follow_unfollow')"
+        />
       </template>
     </div>
   </basic-user-card>

From 1287836eeea0fc10935476865dba850b8a91fb13 Mon Sep 17 00:00:00 2001
From: eal <eal@waifu.club>
Date: Thu, 17 Oct 2019 16:44:22 +0300
Subject: [PATCH 04/32] Fix reply arrow highlighting in some accessibility
 tools

The cursor style needs to be "pointer" even before hovering, since
keyboard-driven browsing never hovers over the elements.
---
 src/components/status/status.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 93f37a492..912f77d2a 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -840,6 +840,11 @@ $status-margin: 0.75em;
   &.button-icon-active {
     color: $fallback--cBlue;
     color: var(--cBlue, $fallback--cBlue);
+  }
+}
+
+.button-icon.icon-reply {
+  &:not(.button-icon-disabled) {
     cursor: pointer;
   }
 }

From b3f590ceb3e2710b278093a7246a3bf53c9aaafd Mon Sep 17 00:00:00 2001
From: Maksim Pechnikov <parallel588@gmail.com>
Date: Thu, 17 Oct 2019 20:24:54 +0300
Subject: [PATCH 05/32] clear code

---
 src/components/follow_button/follow_button.vue | 2 +-
 src/components/follow_card/follow_card.js      | 5 -----
 src/components/follow_card/follow_card.vue     | 2 +-
 3 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/components/follow_button/follow_button.vue b/src/components/follow_button/follow_button.vue
index 66d899b93..f0cbb94b5 100644
--- a/src/components/follow_button/follow_button.vue
+++ b/src/components/follow_button/follow_button.vue
@@ -1,7 +1,7 @@
 <template>
   <button
     class="btn btn-default follow-button"
-    :class="[buttonClass, { pressed: isPressed}]"
+    :class="{ pressed: isPressed }"
     :disabled="inProgress"
     :title="title"
     @click="onClick"
diff --git a/src/components/follow_card/follow_card.js b/src/components/follow_card/follow_card.js
index 2c3231a96..aefd609e0 100644
--- a/src/components/follow_card/follow_card.js
+++ b/src/components/follow_card/follow_card.js
@@ -7,9 +7,6 @@ const FollowCard = {
     'user',
     'noFollowsYou'
   ],
-  data () {
-    return { }
-  },
   components: {
     BasicUserCard,
     RemoteFollow,
@@ -22,8 +19,6 @@ const FollowCard = {
     loggedIn () {
       return this.$store.state.users.currentUser
     }
-  },
-  methods: {
   }
 }
 
diff --git a/src/components/follow_card/follow_card.vue b/src/components/follow_card/follow_card.vue
index a43cac4e6..81e6e6dc0 100644
--- a/src/components/follow_card/follow_card.vue
+++ b/src/components/follow_card/follow_card.vue
@@ -18,7 +18,7 @@
       <template v-else>
         <FollowButton
           :user="user"
-          button-class="follow-card-follow-button"
+          class="follow-card-follow-button"
           :label-following="$t('user_card.follow_unfollow')"
         />
       </template>

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: [PATCH 06/32] lock body scroll when post status modal is open

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

diff --git a/src/components/post_status_modal/post_status_modal.vue b/src/components/post_status_modal/post_status_modal.vue
index d3a823896..b5e75de7c 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 {

From 8db1fa506c95bf7bed1cf2fd186bb065797912cd Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 17 Oct 2019 16:00:19 -0400
Subject: [PATCH 07/32] lock body scroll when user reporting modal is open

---
 .../user_reporting_modal/user_reporting_modal.vue        | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue
index c79a3707e..ecbc1369f 100644
--- a/src/components/user_reporting_modal/user_reporting_modal.vue
+++ b/src/components/user_reporting_modal/user_reporting_modal.vue
@@ -1,7 +1,8 @@
 <template>
   <div
     v-if="isOpen"
-    class="modal-view"
+    v-body-scroll-lock="isOpen"
+    class="modal-view user-reporting-modal-view"
     @click="closeModal"
   >
     <div
@@ -77,6 +78,12 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
+.user-reporting-modal-view {
+  body:not(.scroll-locked) & {
+    display: none;
+  }
+}
+
 .user-reporting-panel {
   width: 90vw;
   max-width: 700px;

From 093d785fbf8c982421f0098ad4b48c9d96b85ee8 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 17 Oct 2019 16:03:41 -0400
Subject: [PATCH 08/32] handle multiple body scroll lockers

---
 src/directives/body_scroll_lock.js | 55 ++++++++++++++++++------------
 1 file changed, 33 insertions(+), 22 deletions(-)

diff --git a/src/directives/body_scroll_lock.js b/src/directives/body_scroll_lock.js
index 6ab20c3f1..a375e852c 100644
--- a/src/directives/body_scroll_lock.js
+++ b/src/directives/body_scroll_lock.js
@@ -2,42 +2,53 @@ import * as bodyScrollLock from 'body-scroll-lock'
 
 let previousNavPaddingRight
 let previousAppBgWrapperRight
+let lockerEls = []
 
 const disableBodyScroll = (el) => {
   const scrollBarGap = window.innerWidth - document.documentElement.clientWidth
   bodyScrollLock.disableBodyScroll(el, {
     reserveScrollBarGap: true
   })
+  if (!lockerEls.includes(el)) {
+    lockerEls.push(el)
+  }
   setTimeout(() => {
-    // If previousNavPaddingRight is already set, don't set it again.
-    if (previousNavPaddingRight === undefined) {
-      const navEl = document.getElementById('nav')
-      previousNavPaddingRight = window.getComputedStyle(navEl).getPropertyValue('padding-right')
-      navEl.style.paddingRight = previousNavPaddingRight ? `calc(${previousNavPaddingRight} + ${scrollBarGap}px)` : `${scrollBarGap}px`
+    if (lockerEls.length <= 1) {
+      // If previousNavPaddingRight is already set, don't set it again.
+      if (previousNavPaddingRight === undefined) {
+        const navEl = document.getElementById('nav')
+        previousNavPaddingRight = window.getComputedStyle(navEl).getPropertyValue('padding-right')
+        navEl.style.paddingRight = previousNavPaddingRight ? `calc(${previousNavPaddingRight} + ${scrollBarGap}px)` : `${scrollBarGap}px`
+      }
+      // If previousAppBgWrapeprRight is already set, don't set it again.
+      if (previousAppBgWrapperRight === undefined) {
+        const appBgWrapperEl = document.getElementById('app_bg_wrapper')
+        previousAppBgWrapperRight = window.getComputedStyle(appBgWrapperEl).getPropertyValue('right')
+        appBgWrapperEl.style.right = previousAppBgWrapperRight ? `calc(${previousAppBgWrapperRight} + ${scrollBarGap}px)` : `${scrollBarGap}px`
+      }
+      document.body.classList.add('scroll-locked')
     }
-    // If previousAppBgWrapeprRight is already set, don't set it again.
-    if (previousAppBgWrapperRight === undefined) {
-      const appBgWrapperEl = document.getElementById('app_bg_wrapper')
-      previousAppBgWrapperRight = window.getComputedStyle(appBgWrapperEl).getPropertyValue('right')
-      appBgWrapperEl.style.right = previousAppBgWrapperRight ? `calc(${previousAppBgWrapperRight} + ${scrollBarGap}px)` : `${scrollBarGap}px`
-    }
-    document.body.classList.add('scroll-locked')
   })
 }
 
 const enableBodyScroll = (el) => {
+  if (lockerEls.includes(el)) {
+    lockerEls = lockerEls.filter(e => e !== el)
+  }
   setTimeout(() => {
-    if (previousNavPaddingRight !== undefined) {
-      document.getElementById('nav').style.paddingRight = previousNavPaddingRight
-      // Restore previousNavPaddingRight to undefined so disableBodyScroll knows it can be set again.
-      previousNavPaddingRight = undefined
+    if (!lockerEls.length) {
+      if (previousNavPaddingRight !== undefined) {
+        document.getElementById('nav').style.paddingRight = previousNavPaddingRight
+        // Restore previousNavPaddingRight to undefined so disableBodyScroll knows it can be set again.
+        previousNavPaddingRight = undefined
+      }
+      if (previousAppBgWrapperRight !== undefined) {
+        document.getElementById('app_bg_wrapper').style.right = previousAppBgWrapperRight
+        // Restore previousAppBgWrapperRight to undefined so disableBodyScroll knows it can be set again.
+        previousAppBgWrapperRight = undefined
+      }
+      document.body.classList.remove('scroll-locked')
     }
-    if (previousAppBgWrapperRight !== undefined) {
-      document.getElementById('app_bg_wrapper').style.right = previousAppBgWrapperRight
-      // Restore previousAppBgWrapperRight to undefined so disableBodyScroll knows it can be set again.
-      previousAppBgWrapperRight = undefined
-    }
-    document.body.classList.remove('scroll-locked')
   })
   bodyScrollLock.enableBodyScroll(el)
 }

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: [PATCH 09/32] add reusable modal component

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

diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
new file mode 100644
index 000000000..389a8881c
--- /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>

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: [PATCH 10/32] 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 ++++---------
 .../post_status_modal/post_status_modal.js    |  4 +++-
 .../post_status_modal/post_status_modal.vue   | 18 +++++-------------
 .../user_reporting_modal.js                   |  5 ++++-
 .../user_reporting_modal.vue                  | 19 ++++---------------
 6 files changed, 23 insertions(+), 40 deletions(-)

diff --git a/src/components/media_modal/media_modal.js b/src/components/media_modal/media_modal.js
index 992d7129d..4832abda3 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 06ced5a1a..69e75e2b8 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 38258296e..b44354db1 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 b5e75de7c..06ef0a357 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 7c6ea4096..3fb963847 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 ecbc1369f..0dce4c55c 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;

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: [PATCH 11/32] move modal css into the correct place

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

diff --git a/src/App.scss b/src/App.scss
index 2190f91a3..2117a5772 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 389a8881c..c0a7ab216 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;
   }

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: [PATCH 12/32] fix eslint warning

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

diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index c0a7ab216..d47951c84 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>

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: [PATCH 13/32] 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(-)

diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index 69e75e2b8..852bfe1fe 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 d47951c84..8edfbd452 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 06ef0a357..d1caf38f7 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;
 }

From d502baaffc30d97a9c4f8f254bf1ff146844151b Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Fri, 18 Oct 2019 07:28:59 -0400
Subject: [PATCH 14/32] remove needless console.log

---
 src/components/user_reporting_modal/user_reporting_modal.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/user_reporting_modal/user_reporting_modal.js b/src/components/user_reporting_modal/user_reporting_modal.js
index 3fb963847..833fa98a2 100644
--- a/src/components/user_reporting_modal/user_reporting_modal.js
+++ b/src/components/user_reporting_modal/user_reporting_modal.js
@@ -53,7 +53,6 @@ const UserReportingModal = {
       this.error = false
     },
     closeModal () {
-      console.log('closeModal clicked')
       this.$store.dispatch('closeUserReportingModal')
     },
     reportUser () {

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: [PATCH 15/32] =?UTF-8?q?render=20modals=20into=20the=20=E2=80=9Cm?=
 =?UTF-8?q?odal=E2=80=9D=20portal?=
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

diff --git a/src/App.vue b/src/App.vue
index dbe842ec4..33077c9ca 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 852bfe1fe..35f6f9e9b 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 000000000..b95174456
--- /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 8edfbd452..e5831c470 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 d1caf38f7..2fbb7cc78 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">

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: [PATCH 16/32] remove needless ref definition

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

diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index e5831c470..e0722d65e 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]"

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: [PATCH 17/32] fix eslint warnings

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

diff --git a/src/App.vue b/src/App.vue
index 33077c9ca..a53bcb970 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 e0722d65e..d4fe9f76d 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"
     >

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: [PATCH 18/32] 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(-)

diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index 35f6f9e9b..e178fef12 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 2fbb7cc78..c930d632b 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;
 }
 

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: [PATCH 19/32] revert changes to render modal into portal

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

diff --git a/src/App.vue b/src/App.vue
index a53bcb970..dbe842ec4 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 d4fe9f76d..51f35262d 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>

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: [PATCH 20/32] fix message input not auto-focusing bug

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

diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index 51f35262d..74e81109a 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>

From b3699a7c7cbeba3b6b777e3c414b44c21464a863 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Fri, 18 Oct 2019 12:39:54 -0400
Subject: [PATCH 21/32] fix eslint errors

---
 src/components/modal/modal.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/modal/modal.js b/src/components/modal/modal.js
index b95174456..02d7017a3 100644
--- a/src/components/modal/modal.js
+++ b/src/components/modal/modal.js
@@ -1,5 +1,3 @@
-import Vue from 'vue'
-
 const Modal = {
   props: {
     viewClass: {
@@ -17,4 +15,4 @@ const Modal = {
   }
 }
 
-export default Modal
\ No newline at end of file
+export default Modal

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: [PATCH 22/32] 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(-)

diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index e178fef12..50f442e26 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 02d7017a3..78537a1b0 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 74e81109a..34a50159c 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 c930d632b..ef22b7ac1 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">

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: [PATCH 23/32] move modal animation keyframes definition

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

diff --git a/src/App.scss b/src/App.scss
index 2117a5772..f20eb44ce 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 34a50159c..500b3d0ae 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>

From c23a87d8ff7dfed662b5288d6fb77da1a7b3ebbc Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Mon, 21 Oct 2019 15:56:16 -0400
Subject: [PATCH 24/32] update condition

---
 src/directives/body_scroll_lock.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/directives/body_scroll_lock.js b/src/directives/body_scroll_lock.js
index a375e852c..d7f114b59 100644
--- a/src/directives/body_scroll_lock.js
+++ b/src/directives/body_scroll_lock.js
@@ -36,7 +36,7 @@ const enableBodyScroll = (el) => {
     lockerEls = lockerEls.filter(e => e !== el)
   }
   setTimeout(() => {
-    if (!lockerEls.length) {
+    if (lockerEls.length === 0) {
       if (previousNavPaddingRight !== undefined) {
         document.getElementById('nav').style.paddingRight = previousNavPaddingRight
         // Restore previousNavPaddingRight to undefined so disableBodyScroll knows it can be set again.

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: [PATCH 25/32] 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(-)

diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index 50f442e26..2597f4e30 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 78537a1b0..8daa27a3f 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 500b3d0ae..2e26d89b7 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 ef22b7ac1..dbcd321eb 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 0dce4c55c..6ee534619 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">

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: [PATCH 26/32] 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

diff --git a/src/components/modal/modal.js b/src/components/modal/modal.js
deleted file mode 100644
index 8daa27a3f..000000000
--- 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 2e26d89b7..cee24241b 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 {

From eb695fd61d97a8b4ce9de9c65b0133515d087a2c Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Mon, 21 Oct 2019 20:57:36 -0400
Subject: [PATCH 27/32] refactor using Set

---
 src/directives/body_scroll_lock.js | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/directives/body_scroll_lock.js b/src/directives/body_scroll_lock.js
index d7f114b59..13a6de1c7 100644
--- a/src/directives/body_scroll_lock.js
+++ b/src/directives/body_scroll_lock.js
@@ -2,18 +2,16 @@ import * as bodyScrollLock from 'body-scroll-lock'
 
 let previousNavPaddingRight
 let previousAppBgWrapperRight
-let lockerEls = []
+const lockerEls = new Set([])
 
 const disableBodyScroll = (el) => {
   const scrollBarGap = window.innerWidth - document.documentElement.clientWidth
   bodyScrollLock.disableBodyScroll(el, {
     reserveScrollBarGap: true
   })
-  if (!lockerEls.includes(el)) {
-    lockerEls.push(el)
-  }
+  lockerEls.add(el)
   setTimeout(() => {
-    if (lockerEls.length <= 1) {
+    if (lockerEls.size <= 1) {
       // If previousNavPaddingRight is already set, don't set it again.
       if (previousNavPaddingRight === undefined) {
         const navEl = document.getElementById('nav')
@@ -32,11 +30,9 @@ const disableBodyScroll = (el) => {
 }
 
 const enableBodyScroll = (el) => {
-  if (lockerEls.includes(el)) {
-    lockerEls = lockerEls.filter(e => e !== el)
-  }
+  lockerEls.delete(el)
   setTimeout(() => {
-    if (lockerEls.length === 0) {
+    if (lockerEls.size === 0) {
       if (previousNavPaddingRight !== undefined) {
         document.getElementById('nav').style.paddingRight = previousNavPaddingRight
         // Restore previousNavPaddingRight to undefined so disableBodyScroll knows it can be set again.

From 6c4d23714a42dd59843a8fb905150eed2d5db29d Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Fri, 18 Oct 2019 15:27:51 -0400
Subject: [PATCH 28/32] populate gallery row height without getting width

---
 src/components/gallery/gallery.js  | 24 ++----------------
 src/components/gallery/gallery.vue | 39 +++++++++++++++++++-----------
 2 files changed, 27 insertions(+), 36 deletions(-)

diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js
index 7f33a81b8..3610f53d8 100644
--- a/src/components/gallery/gallery.js
+++ b/src/components/gallery/gallery.js
@@ -2,22 +2,12 @@ import Attachment from '../attachment/attachment.vue'
 import { chunk, last, dropRight } from 'lodash'
 
 const Gallery = {
-  data: () => ({
-    width: 500
-  }),
   props: [
     'attachments',
     'nsfw',
     'setMedia'
   ],
   components: { Attachment },
-  mounted () {
-    this.resize()
-    window.addEventListener('resize', this.resize)
-  },
-  destroyed () {
-    window.removeEventListener('resize', this.resize)
-  },
   computed: {
     rows () {
       if (!this.attachments) {
@@ -33,22 +23,12 @@ const Gallery = {
       }
       return rows
     },
-    rowHeight () {
-      return itemsPerRow => ({ 'height': `${(this.width / (itemsPerRow + 0.6))}px` })
+    rowStyle () {
+      return itemsPerRow => ({ 'padding-bottom': `${(100 / (itemsPerRow + 0.6))}%` })
     },
     useContainFit () {
       return this.$store.state.config.useContainFit
     }
-  },
-  methods: {
-    resize () {
-      // Quick optimization to make resizing not always trigger state change,
-      // only update attachment size in 10px steps
-      const width = Math.floor(this.$el.getBoundingClientRect().width / 10) * 10
-      if (this.width !== width) {
-        this.width = width
-      }
-    }
   }
 }
 
diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue
index 6169d2942..3877987ac 100644
--- a/src/components/gallery/gallery.vue
+++ b/src/components/gallery/gallery.vue
@@ -7,17 +7,19 @@
       v-for="(row, index) in rows"
       :key="index"
       class="gallery-row"
-      :style="rowHeight(row.length)"
+      :style="rowStyle(row.length)"
       :class="{ 'contain-fit': useContainFit, 'cover-fit': !useContainFit }"
     >
-      <attachment
-        v-for="attachment in row"
-        :key="attachment.id"
-        :set-media="setMedia"
-        :nsfw="nsfw"
-        :attachment="attachment"
-        :allow-play="false"
-      />
+      <div class="gallery-row-inner">
+        <attachment
+          v-for="attachment in row"
+          :key="attachment.id"
+          :set-media="setMedia"
+          :nsfw="nsfw"
+          :attachment="attachment"
+          :allow-play="false"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -28,15 +30,24 @@
 @import '../../_variables.scss';
 
 .gallery-row {
-  height: 200px;
+  position: relative;
+  height: 0;
   width: 100%;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-content: stretch;
   flex-grow: 1;
   margin-top: 0.5em;
 
+  .gallery-row-inner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-content: stretch;
+  }
+
   // FIXME: specificity problem with this and .attachments.attachment
   // we shouldn't have the need for .image here
   .attachment.image {

From 0396c6f29d29f3c9d743e00955a25e2d844b02da Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Fri, 18 Oct 2019 16:04:17 -0400
Subject: [PATCH 29/32] keep image natural ratio in gallery row

---
 src/components/attachment/attachment.js   |  8 +++++++-
 src/components/attachment/attachment.vue  |  1 +
 src/components/gallery/gallery.js         | 24 ++++++++++++++++++++---
 src/components/gallery/gallery.vue        |  2 ++
 src/components/still-image/still-image.js |  4 +++-
 5 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index e93921fe1..0880bd7fc 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -10,7 +10,8 @@ const Attachment = {
     'statusId',
     'size',
     'allowPlay',
-    'setMedia'
+    'setMedia',
+    'naturalSizeLoad'
   ],
   data () {
     return {
@@ -88,6 +89,11 @@ const Attachment = {
       } else {
         this.showHidden = !this.showHidden
       }
+    },
+    onImageLoad (image) {
+      const width = image.naturalWidth
+      const height = image.naturalHeight
+      this.naturalSizeLoad && this.naturalSizeLoad({ width, height })
     }
   }
 }
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index af16e302d..0748b2f04 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -58,6 +58,7 @@
         :referrerpolicy="referrerpolicy"
         :mimetype="attachment.mimetype"
         :src="attachment.large_thumb_url || attachment.url"
+        :image-load-handler="onImageLoad"
       />
     </a>
 
diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js
index 3610f53d8..e8cbb5264 100644
--- a/src/components/gallery/gallery.js
+++ b/src/components/gallery/gallery.js
@@ -7,6 +7,11 @@ const Gallery = {
     'nsfw',
     'setMedia'
   ],
+  data () {
+    return {
+      sizes: {}
+    }
+  },
   components: { Attachment },
   computed: {
     rows () {
@@ -23,12 +28,25 @@ const Gallery = {
       }
       return rows
     },
-    rowStyle () {
-      return itemsPerRow => ({ 'padding-bottom': `${(100 / (itemsPerRow + 0.6))}%` })
-    },
     useContainFit () {
       return this.$store.state.config.useContainFit
     }
+  },
+  methods: {
+    onNaturalSizeLoad (id, size) {
+      this.$set(this.sizes, id, size)
+    },
+    rowStyle (itemsPerRow) {
+      return { 'padding-bottom': `${(100 / (itemsPerRow + 0.6))}%` }
+    },
+    itemStyle (id) {
+      const size = this.sizes[id]
+      if (size) {
+        return { flex: size.width / size.height }
+      } else {
+        return {}
+      }
+    }
   }
 }
 
diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue
index 3877987ac..803ec471d 100644
--- a/src/components/gallery/gallery.vue
+++ b/src/components/gallery/gallery.vue
@@ -18,6 +18,8 @@
           :nsfw="nsfw"
           :attachment="attachment"
           :allow-play="false"
+          :natural-size-load="onNaturalSizeLoad.bind(null, attachment.id)"
+          :style="itemStyle(attachment.id)"
         />
       </div>
     </div>
diff --git a/src/components/still-image/still-image.js b/src/components/still-image/still-image.js
index 02e98f194..9c2d446b9 100644
--- a/src/components/still-image/still-image.js
+++ b/src/components/still-image/still-image.js
@@ -3,7 +3,8 @@ const StillImage = {
     'src',
     'referrerpolicy',
     'mimetype',
-    'imageLoadError'
+    'imageLoadError',
+    'imageLoadHandler'
   ],
   data () {
     return {
@@ -17,6 +18,7 @@ const StillImage = {
   },
   methods: {
     onLoad () {
+      this.imageLoadHandler && this.imageLoadHandler(this.$refs.src)
       const canvas = this.$refs.canvas
       if (!canvas) return
       const width = this.$refs.src.naturalWidth

From ad0452220619960f4f19c4557691d2f8f3438df9 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Mon, 21 Oct 2019 15:13:11 -0400
Subject: [PATCH 30/32] update flex-grow calculation logic

---
 src/components/gallery/gallery.js  | 14 +++++++-------
 src/components/gallery/gallery.vue |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js
index e8cbb5264..4037da985 100644
--- a/src/components/gallery/gallery.js
+++ b/src/components/gallery/gallery.js
@@ -1,5 +1,5 @@
 import Attachment from '../attachment/attachment.vue'
-import { chunk, last, dropRight } from 'lodash'
+import { chunk, last, dropRight, sumBy } from 'lodash'
 
 const Gallery = {
   props: [
@@ -39,13 +39,13 @@ const Gallery = {
     rowStyle (itemsPerRow) {
       return { 'padding-bottom': `${(100 / (itemsPerRow + 0.6))}%` }
     },
-    itemStyle (id) {
+    itemStyle (id, row) {
+      const total = sumBy(row, item => this.getAspectRatio(item.id))
+      return { flexGrow: this.getAspectRatio(id) / total }
+    },
+    getAspectRatio (id) {
       const size = this.sizes[id]
-      if (size) {
-        return { flex: size.width / size.height }
-      } else {
-        return {}
-      }
+      return size ? size.width / size.height : 1
     }
   }
 }
diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue
index 803ec471d..7abc2161a 100644
--- a/src/components/gallery/gallery.vue
+++ b/src/components/gallery/gallery.vue
@@ -19,7 +19,7 @@
           :attachment="attachment"
           :allow-play="false"
           :natural-size-load="onNaturalSizeLoad.bind(null, attachment.id)"
-          :style="itemStyle(attachment.id)"
+          :style="itemStyle(attachment.id, row)"
         />
       </div>
     </div>

From b9c281c55374bc440d0efbf33d1dd74d8ea6dfd0 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Tue, 22 Oct 2019 07:10:52 -0400
Subject: [PATCH 31/32] set flex amount correctly

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

diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js
index 4037da985..9281d41bd 100644
--- a/src/components/gallery/gallery.js
+++ b/src/components/gallery/gallery.js
@@ -41,7 +41,7 @@ const Gallery = {
     },
     itemStyle (id, row) {
       const total = sumBy(row, item => this.getAspectRatio(item.id))
-      return { flexGrow: this.getAspectRatio(id) / total }
+      return { flex: this.getAspectRatio(id) / total }
     },
     getAspectRatio (id) {
       const size = this.sizes[id]

From d76b83efc801cfc4bfd7cb0afa7d7289a16ec667 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Tue, 22 Oct 2019 14:47:21 -0400
Subject: [PATCH 32/32] set flex-shrink and flex-basis explicitly

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

diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js
index 9281d41bd..bd0de608c 100644
--- a/src/components/gallery/gallery.js
+++ b/src/components/gallery/gallery.js
@@ -41,7 +41,7 @@ const Gallery = {
     },
     itemStyle (id, row) {
       const total = sumBy(row, item => this.getAspectRatio(item.id))
-      return { flex: this.getAspectRatio(id) / total }
+      return { flex: `${this.getAspectRatio(id) / total} 1 0%` }
     },
     getAspectRatio (id) {
       const size = this.sizes[id]