From 8721fb57fc3ee169ba401ce498280b8d7257297d Mon Sep 17 00:00:00 2001
From: Maksim Pechnikov <parallel588@gmail.com>
Date: Sat, 21 Sep 2019 16:24:47 +0300
Subject: added support hide\show reblogs from a specific user

---
 src/components/user_card/user_card.js                 | 15 +++++++++++++--
 src/components/user_card/user_card.vue                | 16 ++++++++++++++++
 src/i18n/en.json                                      |  2 ++
 src/modules/users.js                                  | 19 +++++++++++++++++++
 src/services/api/api.service.js                       |  5 ++++-
 .../backend_interactor_service.js                     |  4 ++--
 .../entity_normalizer/entity_normalizer.service.js    |  1 +
 src/services/follow_manipulate/follow_manipulate.js   |  2 +-
 8 files changed, 58 insertions(+), 6 deletions(-)

(limited to 'src')

diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index e3bd7697..03f15d8e 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -7,7 +7,9 @@ import { requestFollow, requestUnfollow } from '../../services/follow_manipulate
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
 export default {
-  props: [ 'user', 'switcher', 'selected', 'hideBio', 'rounded', 'bordered', 'allowZoomingAvatar' ],
+  props: [
+    'user', 'switcher', 'selected', 'hideBio', 'rounded', 'bordered', 'allowZoomingAvatar'
+  ],
   data () {
     return {
       followRequestInProgress: false,
@@ -108,6 +110,12 @@ export default {
     ProgressButton
   },
   methods: {
+    showReblogs () {
+      this.$store.dispatch('showReblogs', this.user.id)
+    },
+    hideReblogs () {
+      this.$store.dispatch('hideReblogs', this.user.id)
+    },
     followUser () {
       const store = this.$store
       this.followRequestInProgress = true
@@ -156,7 +164,10 @@ export default {
       }
     },
     userProfileLink (user) {
-      return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
+      return generateProfileLink(
+        user.id, user.screen_name,
+        this.$store.state.instance.restrictedNicknames
+      )
     },
     reportUser () {
       this.$store.dispatch('openUserReportingModal', this.user.id)
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 0b83cf16..029406e7 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -186,6 +186,22 @@
             >
               <i class="icon-bell-ringing-o" />
             </ProgressButton>
+            <button
+              v-if="user.showing_reblogs"
+              class="btn btn-default"
+              :title="$t('user_card.hide_boosts', {user: user.screen_name})"
+              @click="hideReblogs"
+            >
+              <i class="icon-eye" />
+            </button>
+            <button
+              v-if="!user.showing_reblogs"
+              class="btn btn-default pressed"
+              :title="$t('user_card.show_boosts', {user: user.screen_name})"
+              @click="showReblogs"
+            >
+              <i class="icon-eye-off" />
+            </button>
           </div>
 
           <div>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index ddde471a..c20f880a 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -543,6 +543,8 @@
     "unmute": "Unmute",
     "unmute_progress": "Unmuting...",
     "mute_progress": "Muting...",
+    "hide_boosts": "Hide boosts from {user}",
+    "show_boosts": "Show boosts from {user}",
     "admin_menu": {
       "moderation": "Moderation",
       "grant_admin": "Grant Admin",
diff --git a/src/modules/users.js b/src/modules/users.js
index 4d02f8d7..6d259dc2 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -60,6 +60,18 @@ const unmuteUser = (store, id) => {
     .then((relationship) => store.commit('updateUserRelationship', [relationship]))
 }
 
+const hideReblogs = (store, userId) => {
+  return store.rootState.api.backendInteractor.followUser({ id: userId, reblogs: false })
+    .then((relationship) => {
+      store.commit('updateUserRelationship', [relationship])
+    })
+}
+
+const showReblogs = (store, userId) => {
+  return store.rootState.api.backendInteractor.followUser({ id: userId, reblogs: true })
+    .then((relationship) => store.commit('updateUserRelationship', [relationship]))
+}
+
 export const mutations = {
   setMuted (state, { user: { id }, muted }) {
     const user = state.usersObject[id]
@@ -135,6 +147,7 @@ export const mutations = {
         user.muted = relationship.muting
         user.statusnet_blocking = relationship.blocking
         user.subscribed = relationship.subscribing
+        user.showing_reblogs = relationship.showing_reblogs
       }
     })
   },
@@ -272,6 +285,12 @@ const users = {
     unmuteUser (store, id) {
       return unmuteUser(store, id)
     },
+    hideReblogs (store, id) {
+      return hideReblogs(store, id)
+    },
+    showReblogs (store, id) {
+      return showReblogs(store, id)
+    },
     muteUsers (store, ids = []) {
       return Promise.all(ids.map(id => muteUser(store, id)))
     },
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 887d7d7a..80e94a50 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -219,9 +219,12 @@ const authHeaders = (accessToken) => {
   }
 }
 
-const followUser = ({ id, credentials }) => {
+const followUser = ({ id, reblogs, credentials }) => {
   let url = MASTODON_FOLLOW_URL(id)
+  const form = new FormData()
+  if (reblogs !== undefined) { form.append('reblogs', reblogs) }
   return fetch(url, {
+    body: form,
     headers: authHeaders(credentials),
     method: 'POST'
   }).then((data) => data.json())
diff --git a/src/services/backend_interactor_service/backend_interactor_service.js b/src/services/backend_interactor_service/backend_interactor_service.js
index 3c44a10c..cbf48ee4 100644
--- a/src/services/backend_interactor_service/backend_interactor_service.js
+++ b/src/services/backend_interactor_service/backend_interactor_service.js
@@ -31,8 +31,8 @@ const backendInteractorService = credentials => {
     return apiService.fetchUserRelationship({ id, credentials })
   }
 
-  const followUser = (id) => {
-    return apiService.followUser({ credentials, id })
+  const followUser = ({ id, reblogs }) => {
+    return apiService.followUser({ credentials, id, reblogs })
   }
 
   const unfollowUser = (id) => {
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index 7438cd90..906838fd 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -69,6 +69,7 @@ export const parseUser = (data) => {
         output.following = relationship.following
         output.statusnet_blocking = relationship.blocking
         output.muted = relationship.muting
+        output.showing_reblogs = relationship.showing_reblogs
         output.subscribed = relationship.subscribing
       }
 
diff --git a/src/services/follow_manipulate/follow_manipulate.js b/src/services/follow_manipulate/follow_manipulate.js
index d82ce593..598cb5f7 100644
--- a/src/services/follow_manipulate/follow_manipulate.js
+++ b/src/services/follow_manipulate/follow_manipulate.js
@@ -14,7 +14,7 @@ const fetchUser = (attempt, user, store) => new Promise((resolve, reject) => {
 })
 
 export const requestFollow = (user, store) => new Promise((resolve, reject) => {
-  store.state.api.backendInteractor.followUser(user.id)
+  store.state.api.backendInteractor.followUser({ id: user.id })
     .then((updated) => {
       store.commit('updateUserRelationship', [updated])
 
-- 
cgit v1.2.3-70-g09d2


From f0b9f5d29ca7bbac21cabad3d5f14328dfbf56dd Mon Sep 17 00:00:00 2001
From: Maksim Pechnikov <parallel588@gmail.com>
Date: Sun, 22 Sep 2019 14:39:28 +0300
Subject: use `repeats` intead `boosts`

---
 src/components/user_card/user_card.js  | 4 ++--
 src/components/user_card/user_card.vue | 8 ++++----
 src/i18n/en.json                       | 4 ++--
 3 files changed, 8 insertions(+), 8 deletions(-)

(limited to 'src')

diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index 03f15d8e..8b8ae132 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -110,10 +110,10 @@ export default {
     ProgressButton
   },
   methods: {
-    showReblogs () {
+    showRepeats () {
       this.$store.dispatch('showReblogs', this.user.id)
     },
-    hideReblogs () {
+    hideRepeats () {
       this.$store.dispatch('hideReblogs', this.user.id)
     },
     followUser () {
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 029406e7..acef1d72 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -189,16 +189,16 @@
             <button
               v-if="user.showing_reblogs"
               class="btn btn-default"
-              :title="$t('user_card.hide_boosts', {user: user.screen_name})"
-              @click="hideReblogs"
+              :title="$t('user_card.hide_repeats')"
+              @click="hideRepeats"
             >
               <i class="icon-eye" />
             </button>
             <button
               v-if="!user.showing_reblogs"
               class="btn btn-default pressed"
-              :title="$t('user_card.show_boosts', {user: user.screen_name})"
-              @click="showReblogs"
+              :title="$t('user_card.show_repeats')"
+              @click="showRepeats"
             >
               <i class="icon-eye-off" />
             </button>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index c20f880a..426a2f6a 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -543,8 +543,8 @@
     "unmute": "Unmute",
     "unmute_progress": "Unmuting...",
     "mute_progress": "Muting...",
-    "hide_boosts": "Hide boosts from {user}",
-    "show_boosts": "Show boosts from {user}",
+    "hide_repeats": "Hide repeats",
+    "show_repeats": "Show repeats",
     "admin_menu": {
       "moderation": "Moderation",
       "grant_admin": "Grant Admin",
-- 
cgit v1.2.3-70-g09d2


From 50d9ed00078e400ccd0ddc2ca38044c1fe70c1db Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Sat, 28 Sep 2019 16:35:39 -0400
Subject: reset post status form only when reply user is changed

---
 .../post_status_modal/post_status_modal.js         | 25 ++++++++++++++++++----
 .../post_status_modal/post_status_modal.vue        |  3 ++-
 2 files changed, 23 insertions(+), 5 deletions(-)

(limited to 'src')

diff --git a/src/components/post_status_modal/post_status_modal.js b/src/components/post_status_modal/post_status_modal.js
index 1033ba11..38258296 100644
--- a/src/components/post_status_modal/post_status_modal.js
+++ b/src/components/post_status_modal/post_status_modal.js
@@ -1,24 +1,41 @@
 import PostStatusForm from '../post_status_form/post_status_form.vue'
+import get from 'lodash/get'
 
 const PostStatusModal = {
   components: {
     PostStatusForm
   },
+  data () {
+    return {
+      resettingForm: false
+    }
+  },
   computed: {
     isLoggedIn () {
       return !!this.$store.state.users.currentUser
     },
-    isOpen () {
-      return this.isLoggedIn && this.$store.state.postStatus.modalActivated
+    modalActivated () {
+      return this.$store.state.postStatus.modalActivated
+    },
+    isFormVisible () {
+      return this.isLoggedIn && !this.resettingForm && this.modalActivated
     },
     params () {
       return this.$store.state.postStatus.params || {}
     }
   },
   watch: {
-    isOpen (val) {
+    params (newVal, oldVal) {
+      if (get(newVal, 'repliedUser.id') !== get(oldVal, 'repliedUser.id')) {
+        this.resettingForm = true
+        this.$nextTick(() => {
+          this.resettingForm = false
+        })
+      }
+    },
+    isFormVisible (val) {
       if (val) {
-        this.$nextTick(() => this.$el.querySelector('textarea').focus())
+        this.$nextTick(() => this.$el && this.$el.querySelector('textarea').focus())
       }
     }
   },
diff --git a/src/components/post_status_modal/post_status_modal.vue b/src/components/post_status_modal/post_status_modal.vue
index 3f8eec69..d3a82389 100644
--- a/src/components/post_status_modal/post_status_modal.vue
+++ b/src/components/post_status_modal/post_status_modal.vue
@@ -1,6 +1,7 @@
 <template>
   <div
-    v-if="isOpen"
+    v-if="isLoggedIn && !resettingForm"
+    v-show="modalActivated"
     class="post-form-modal-view modal-view"
     @click="closeModal"
   >
-- 
cgit v1.2.3-70-g09d2


From 087a5b612d274fe7ee2ca42f59876539800fece2 Mon Sep 17 00:00:00 2001
From: Hakaba Hitoyo <hakabahitoyo@yahoo.co.jp>
Date: Mon, 30 Sep 2019 05:07:57 +0000
Subject: i18n/Update Japanese Messages

---
 src/i18n/ja.json | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/i18n/ja.json b/src/i18n/ja.json
index f0ec88eb..592a7257 100644
--- a/src/i18n/ja.json
+++ b/src/i18n/ja.json
@@ -106,6 +106,15 @@
     "expired": "いれふだは {0} まえに、おわりました",
     "not_enough_options": "ユニークなオプションが、たりません"
   },
+  "emoji": {
+    "stickers": "ステッカー",
+    "emoji": "えもじ",
+    "keep_open": "ピッカーをあけたままにする",
+    "search_emoji": "えもじをさがす",
+    "add_emoji": "えもじをうちこむ",
+    "custom": "カスタムえもじ",
+    "unicode": "ユニコードえもじ"
+  },
   "stickers": {
     "add_sticker": "ステッカーをふやす"
   },
@@ -224,10 +233,11 @@
     "default_vis": "デフォルトのこうかいはんい",
     "delete_account": "アカウントをけす",
     "delete_account_description": "あなたのアカウントとメッセージが、きえます。",
-    "delete_account_error": "アカウントをけすことが、できなかったかもしれません。インスタンスのかんりしゃに、れんらくしてください。",
+    "delete_account_error": "アカウントをけすことが、できなかったかもしれません。インスタンスのアドミニストレーターに、おといあわせください。",
     "delete_account_instructions": "ほんとうにアカウントをけしてもいいなら、パスワードをかいてください。",
     "discoverable": "けんさくなどのサービスで、このアカウントをみつけてもよい",
     "avatar_size_instruction": "アバターのおおきさは、150×150ピクセルか、それよりもおおきくするといいです。",
+    "pad_emoji": "えもじをピッカーでえらんだとき、えもじのまわりにスペースをいれる",
     "export_theme": "セーブ",
     "filtering": "フィルタリング",
     "filtering_explanation": "これらのことばをふくむすべてのものがミュートされます。1ぎょうに1つのことばをかいてください。",
@@ -280,6 +290,8 @@
     "no_mutes": "ミュートしていません",
     "hide_follows_description": "フォローしているひとをみせない",
     "hide_followers_description": "フォロワーをみせない",
+    "hide_follows_count_description": "フォローしているひとのかずをみせない",
+    "hide_followers_count_description": "フォロワーのかずをみせない",
     "show_admin_badge": "アドミンのしるしをみせる",
     "show_moderator_badge": "モデレーターのしるしをみせる",
     "nsfw_clickthrough": "NSFWなファイルをかくす",
@@ -532,6 +544,7 @@
     "follows_you": "フォローされました！",
     "its_you": "これはあなたです！",
     "media": "メディア",
+    "mention": "メンション",
     "mute": "ミュート",
     "muted": "ミュートしています！",
     "per_day": "/日",
@@ -611,5 +624,16 @@
     "person_talking": "{count} にんが、はなしています",
     "people_talking": "{count} にんが、はなしています",
     "no_results": "みつかりませんでした"
+  },
+  "password_reset": {
+    "forgot_password": "パスワードを、わすれましたか？",
+    "password_reset": "パスワードリセット",
+    "instruction": "あなたのメールアドレスかユーザーめいをいれてください。パスワードをリセットするためのリンクをおくります。",
+    "placeholder": "あなたのメールアドレスかユーザーめい",
+    "check_email": "パスワードをリセットするためのリンクがかかれたメールが、とどいているかどうか、みてください。",
+    "return_home": "ホームページにもどる",
+    "not_found": "そのメールアドレスまたはユーザーめいを、みつけることができませんでした。",
+    "too_many_requests": "パスワードリセットを、ためすことが、おおすぎます。しばらくしてから、ためしてください。",
+    "password_reset_disabled": "このインスタンスでは、パスワードリセットは、できません。インスタンスのアドミニストレーターに、おといあわせください。"
   }
 }
-- 
cgit v1.2.3-70-g09d2


From 194979783e1162d9c893f833dea8abd3bc143c0b Mon Sep 17 00:00:00 2001
From: Hakaba Hitoyo <hakabahitoyo@yahoo.co.jp>
Date: Mon, 30 Sep 2019 05:09:05 +0000
Subject: i18n/Update Pedantic Japanese Messages

---
 src/i18n/ja_pedantic.json | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

(limited to 'src')

diff --git a/src/i18n/ja_pedantic.json b/src/i18n/ja_pedantic.json
index c25f6f1d..2ca7dca8 100644
--- a/src/i18n/ja_pedantic.json
+++ b/src/i18n/ja_pedantic.json
@@ -106,6 +106,15 @@
     "expired": "投票は {0} 前に終了しました",
     "not_enough_options": "相異なる選択肢が不足しています"
   },
+  "emoji": {
+    "stickers": "ステッカー",
+    "emoji": "絵文字",
+    "keep_open": "ピッカーを開いたままにする",
+    "search_emoji": "絵文字を検索",
+    "add_emoji": "絵文字を挿入",
+    "custom": "カスタム絵文字",
+    "unicode": "Unicode絵文字"
+  },
   "stickers": {
     "add_sticker": "ステッカーを追加"
   },
@@ -228,6 +237,7 @@
     "delete_account_instructions": "本当にアカウントを消してもいいなら、パスワードを入力してください。",
     "discoverable": "検索などのサービスでこのアカウントを見つけることを許可する",
     "avatar_size_instruction": "アバターの大きさは、150×150ピクセルか、それよりも大きくするといいです。",
+    "pad_emoji": "ピッカーから絵文字を挿入するとき、絵文字の両側にスペースを入れる",
     "export_theme": "保存",
     "filtering": "フィルタリング",
     "filtering_explanation": "これらの言葉を含むすべてのものがミュートされます。1行に1つの言葉を書いてください。",
@@ -280,6 +290,8 @@
     "no_mutes": "ミュートはありません",
     "hide_follows_description": "フォローしている人を見せない",
     "hide_followers_description": "フォロワーを見せない",
+    "hide_follows_count_description": "フォローしている人の数を見せない",
+    "hide_followers_count_description": "フォロワーの数を見せない",
     "show_admin_badge": "管理者のバッジを見せる",
     "show_moderator_badge": "モデレーターのバッジを見せる",
     "nsfw_clickthrough": "NSFWなファイルを隠す",
@@ -532,6 +544,7 @@
     "follows_you": "フォローされました！",
     "its_you": "これはあなたです！",
     "media": "メディア",
+    "mention": "メンション",
     "mute": "ミュート",
     "muted": "ミュートしています！",
     "per_day": "/日",
@@ -611,5 +624,16 @@
     "person_talking": "{count} 人が話しています",
     "people_talking": "{count} 人が話しています",
     "no_results": "見つかりませんでした"
+  },
+  "password_reset": {
+    "forgot_password": "パスワードを忘れましたか？",
+    "password_reset": "パスワードリセット",
+    "instruction": "メールアドレスまたはユーザー名を入力してください。パスワードをリセットするためのリンクを送信します。",
+    "placeholder": "メールアドレスまたはユーザー名",
+    "check_email": "パスワードをリセットするためのリンクが記載されたメールが届いているか確認してください。",
+    "return_home": "ホームページに戻る",
+    "not_found": "メールアドレスまたはユーザー名が見つかりませんでした。",
+    "too_many_requests": "試行回数の制限に達しました。しばらく時間を置いてから再試行してください。",
+    "password_reset_disabled": "このインスタンスではパスワードリセットは無効になっています。インスタンスの管理者に連絡してください。"
   }
 }
-- 
cgit v1.2.3-70-g09d2


From 188b6f56ed2f983d8f0fba4dc8f7327ebbee321d Mon Sep 17 00:00:00 2001
From: Maksim Pechnikov <parallel588@gmail.com>
Date: Mon, 30 Sep 2019 20:34:51 +0300
Subject: added acccount_actions component

---
 src/components/account_actions/account_actions.js  |  59 +++++++++
 src/components/account_actions/account_actions.vue | 133 ++++++++++++++++++++
 src/components/follow_button/follow_button.js      |  58 +++++++++
 src/components/follow_button/follow_button.vue     |  13 ++
 src/components/user_card/user_card.js              |  48 +-------
 src/components/user_card/user_card.vue             | 135 +--------------------
 6 files changed, 268 insertions(+), 178 deletions(-)
 create mode 100644 src/components/account_actions/account_actions.js
 create mode 100644 src/components/account_actions/account_actions.vue
 create mode 100644 src/components/follow_button/follow_button.js
 create mode 100644 src/components/follow_button/follow_button.vue

(limited to 'src')

diff --git a/src/components/account_actions/account_actions.js b/src/components/account_actions/account_actions.js
new file mode 100644
index 00000000..1092a96a
--- /dev/null
+++ b/src/components/account_actions/account_actions.js
@@ -0,0 +1,59 @@
+import FollowButton from '../follow_button/follow_button.vue'
+import ProgressButton from '../progress_button/progress_button.vue'
+
+const AccountActions = {
+  props: [
+    'user'
+  ],
+  data () {
+    return {
+      showDropDown: false
+    }
+  },
+  components: {
+    FollowButton,
+    ProgressButton
+  },
+  computed: {
+    tagsSet () {
+      return new Set(this.user.tags)
+    },
+    hasTagPolicy () {
+      return this.$store.state.instance.tagPolicyAvailable
+    }
+  },
+  methods: {
+    subscribeUser () {
+      return this.$store.dispatch('subscribeUser', this.user.id)
+    },
+    unsubscribeUser () {
+      return this.$store.dispatch('unsubscribeUser', this.user.id)
+    },
+    showRepeats () {
+      this.$store.dispatch('showReblogs', this.user.id)
+    },
+    hideRepeats () {
+      this.$store.dispatch('hideReblogs', this.user.id)
+    },
+    muteUser () {
+      this.$store.dispatch('muteUser', this.user.id)
+    },
+    unmuteUser () {
+      this.$store.dispatch('unmuteUser', this.user.id)
+    },
+    blockUser () {
+      this.$store.dispatch('blockUser', this.user.id)
+    },
+    unblockUser () {
+      this.$store.dispatch('unblockUser', this.user.id)
+    },
+    reportUser () {
+      this.$store.dispatch('openUserReportingModal', this.user.id)
+    },
+    mentionUser () {
+      this.$store.dispatch('openPostStatusModal', { replyTo: true, repliedUser: this.user })
+    }
+  }
+}
+
+export default AccountActions
diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
new file mode 100644
index 00000000..ce508b0a
--- /dev/null
+++ b/src/components/account_actions/account_actions.vue
@@ -0,0 +1,133 @@
+<template>
+  <div class="account-actions">
+    <FollowButton :user="user" />
+    <v-popover
+      trigger="click"
+      class="account-tools-popover"
+      :container="false"
+      placement="bottom-end"
+      :offset="5"
+      @show="showDropDown = true"
+      @hide="showDropDown = false"
+    >
+      <div slot="popover">
+        <div class="dropdown-menu">
+          <button
+            class="btn btn-default btn-block dropdown-item"
+            @click="mentionUser"
+          >
+            {{ $t('user_card.mention') }}
+          </button>
+          <template v-if="user.following">
+            <div
+              role="separator"
+              class="dropdown-divider"
+            />
+            <ProgressButton
+              v-if="!user.subscribed"
+              class="btn btn-default dropdown-item"
+              :click="subscribeUser"
+              :title="$t('user_card.subscribe')"
+            >
+              {{ $t('user_card.subscribe') }}
+            </ProgressButton>
+            <ProgressButton
+              v-else
+              class="btn btn-default pressed dropdown-item"
+              :click="unsubscribeUser"
+              :title="$t('user_card.unsubscribe')"
+            >
+              {{ $t('user_card.unsubscribe') }}
+            </ProgressButton>
+
+            <button
+              v-if="user.showing_reblogs"
+              class="btn btn-default dropdown-item"
+              @click="hideRepeats"
+            >
+              {{ $t('user_card.hide_repeats') }}
+            </button>
+            <button
+              v-if="!user.showing_reblogs"
+              class="btn btn-default pressed dropdown-item"
+              @click="showRepeats"
+            >
+              {{ $t('user_card.show_repeats') }}
+            </button>
+          </template>
+          <div
+            role="separator"
+            class="dropdown-divider"
+          />
+          <button
+            v-if="user.muted"
+            class="btn btn-default btn-block pressed dropdown-item"
+            @click="unmuteUser"
+          >
+            {{ $t('user_card.muted') }}
+          </button>
+          <button
+            v-else
+            class="btn btn-default btn-block dropdown-item"
+            @click="muteUser"
+          >
+            {{ $t('user_card.mute') }}
+          </button>
+          <button
+            v-if="user.statusnet_blocking"
+            class="btn btn-default btn-block pressed dropdown-item"
+            @click="unblockUser"
+          >
+            {{ $t('user_card.blocked') }}
+          </button>
+          <button
+            v-else
+            class="btn btn-default btn-block dropdown-item"
+            @click="blockUser"
+          >
+            {{ $t('user_card.block') }}
+          </button>
+          <button
+            class="btn btn-default btn-block dropdown-item"
+            @click="reportUser"
+          >
+            {{ $t('user_card.report') }}
+          </button>
+        </div>
+      </div>
+      <button class="btn btn-default ellipsis-button">
+        <i class="icon-ellipsis" />
+      </button>
+    </v-popover>
+  </div>
+</template>
+
+<script src="./account_actions.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+@import '../popper/popper.scss';
+
+.account-tools-popover {
+  height: 100%;
+  .trigger {
+    display: flex !important;
+    height: 100%;
+  }
+}
+.account-actions {
+  display: flex;
+  flex: 0 0 0 !important;
+  margin: 0 3em 0 0 !important;
+}
+.account-actions .follow-button {
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+.account-actions .ellipsis-button {
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+.account-actions .button-icon {
+}
+</style>
diff --git a/src/components/follow_button/follow_button.js b/src/components/follow_button/follow_button.js
new file mode 100644
index 00000000..9d2834ab
--- /dev/null
+++ b/src/components/follow_button/follow_button.js
@@ -0,0 +1,58 @@
+import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
+export default {
+  props: ['user'],
+  data () {
+    return {
+      inProgress: false
+    }
+  },
+  computed: {
+    isPressed () {
+      return this.inProgress || this.user.following
+    },
+    title () {
+      if (this.inProgress || this.user.following) {
+        return 'user_card.follow_unfollow'
+      } else if (this.user.requested) {
+        return 'user_card.follow_again'
+      } else {
+        return ''
+      }
+    },
+    label () {
+      if (this.inProgress) {
+        return 'user_card.follow_progress'
+      } else if (this.user.following) {
+        return 'user_card.following'
+      } else if (this.user.requested) {
+        return 'user_card.follow_sent'
+      } else {
+        return 'user_card.follow'
+      }
+    }
+  },
+  methods: {
+    doClick () {
+      if (this.user.following) {
+        this.unfollowUser()
+      } else {
+        this.followUser()
+      }
+    },
+    followUser () {
+      const store = this.$store
+      this.inProgress = true
+      requestFollow(this.user, store).then(() => {
+        this.inProgress = false
+      })
+    },
+    unfollowUser () {
+      const store = this.$store
+      this.inProgress = true
+      requestUnfollow(this.user, store).then(() => {
+        this.inProgress = false
+        store.commit('removeStatus', { timeline: 'friends', userId: this.user.id })
+      })
+    }
+  }
+}
diff --git a/src/components/follow_button/follow_button.vue b/src/components/follow_button/follow_button.vue
new file mode 100644
index 00000000..61aa75a0
--- /dev/null
+++ b/src/components/follow_button/follow_button.vue
@@ -0,0 +1,13 @@
+<template>
+  <button
+    class="btn btn-default btn-block follow-button"
+    :class="{ pressed: isPressed }"
+    :disabled="inProgress"
+    :title="$t(title)"
+    @click="doClick"
+  >
+    {{ $t(label) }}
+  </button>
+</template>
+
+<script src="./follow_button.js"></script>
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index 015a5762..c09e5654 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -2,8 +2,8 @@ import UserAvatar from '../user_avatar/user_avatar.vue'
 import RemoteFollow from '../remote_follow/remote_follow.vue'
 import ProgressButton from '../progress_button/progress_button.vue'
 import ModerationTools from '../moderation_tools/moderation_tools.vue'
+import AccountActions from '../account_actions/account_actions.vue'
 import { hex2rgb } from '../../services/color_convert/color_convert.js'
-import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
 export default {
@@ -98,48 +98,10 @@ export default {
     UserAvatar,
     RemoteFollow,
     ModerationTools,
+    AccountActions,
     ProgressButton
   },
   methods: {
-    showRepeats () {
-      this.$store.dispatch('showReblogs', this.user.id)
-    },
-    hideRepeats () {
-      this.$store.dispatch('hideReblogs', this.user.id)
-    },
-    followUser () {
-      const store = this.$store
-      this.followRequestInProgress = true
-      requestFollow(this.user, store).then(() => {
-        this.followRequestInProgress = false
-      })
-    },
-    unfollowUser () {
-      const store = this.$store
-      this.followRequestInProgress = true
-      requestUnfollow(this.user, store).then(() => {
-        this.followRequestInProgress = false
-        store.commit('removeStatus', { timeline: 'friends', userId: this.user.id })
-      })
-    },
-    blockUser () {
-      this.$store.dispatch('blockUser', this.user.id)
-    },
-    unblockUser () {
-      this.$store.dispatch('unblockUser', this.user.id)
-    },
-    muteUser () {
-      this.$store.dispatch('muteUser', this.user.id)
-    },
-    unmuteUser () {
-      this.$store.dispatch('unmuteUser', this.user.id)
-    },
-    subscribeUser () {
-      return this.$store.dispatch('subscribeUser', this.user.id)
-    },
-    unsubscribeUser () {
-      return this.$store.dispatch('unsubscribeUser', this.user.id)
-    },
     setProfileView (v) {
       if (this.switcher) {
         const store = this.$store
@@ -160,9 +122,6 @@ export default {
         this.$store.state.instance.restrictedNicknames
       )
     },
-    reportUser () {
-      this.$store.dispatch('openUserReportingModal', this.user.id)
-    },
     zoomAvatar () {
       const attachment = {
         url: this.user.profile_image_url_original,
@@ -170,9 +129,6 @@ export default {
       }
       this.$store.dispatch('setMedia', [attachment])
       this.$store.dispatch('setCurrent', attachment)
-    },
-    mentionUser () {
-      this.$store.dispatch('openPostStatusModal', { replyTo: true, repliedUser: this.user })
     }
   }
 }
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index f465467c..abaef85f 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -131,135 +131,12 @@
             </label>
           </div>
         </div>
+
         <div
           v-if="loggedIn && isOtherUser"
           class="user-interactions"
         >
-          <div v-if="!user.following">
-            <button
-              class="btn btn-default btn-block"
-              :disabled="followRequestInProgress"
-              :title="user.requested ? $t('user_card.follow_again') : ''"
-              @click="followUser"
-            >
-              <template v-if="followRequestInProgress">
-                {{ $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>
-          </div>
-          <div v-else-if="followRequestInProgress">
-            <button
-              class="btn btn-default btn-block pressed"
-              disabled
-              :title="$t('user_card.follow_unfollow')"
-              @click="unfollowUser"
-            >
-              {{ $t('user_card.follow_progress') }}
-            </button>
-          </div>
-          <div
-            v-else
-            class="btn-group"
-          >
-            <button
-              class="btn btn-default pressed"
-              :title="$t('user_card.follow_unfollow')"
-              @click="unfollowUser"
-            >
-              {{ $t('user_card.following') }}
-            </button>
-            <ProgressButton
-              v-if="!user.subscribed"
-              class="btn btn-default"
-              :click="subscribeUser"
-              :title="$t('user_card.subscribe')"
-            >
-              <i class="icon-bell-alt" />
-            </ProgressButton>
-            <ProgressButton
-              v-else
-              class="btn btn-default pressed"
-              :click="unsubscribeUser"
-              :title="$t('user_card.unsubscribe')"
-            >
-              <i class="icon-bell-ringing-o" />
-            </ProgressButton>
-            <button
-              v-if="user.showing_reblogs"
-              class="btn btn-default"
-              :title="$t('user_card.hide_repeats')"
-              @click="hideRepeats"
-            >
-              <i class="icon-eye" />
-            </button>
-            <button
-              v-if="!user.showing_reblogs"
-              class="btn btn-default pressed"
-              :title="$t('user_card.show_repeats')"
-              @click="showRepeats"
-            >
-              <i class="icon-eye-off" />
-            </button>
-          </div>
-
-          <div>
-            <button
-              class="btn btn-default btn-block"
-              @click="mentionUser"
-            >
-              {{ $t('user_card.mention') }}
-            </button>
-          </div>
-
-          <div>
-            <button
-              v-if="user.muted"
-              class="btn btn-default btn-block pressed"
-              @click="unmuteUser"
-            >
-              {{ $t('user_card.muted') }}
-            </button>
-            <button
-              v-else
-              class="btn btn-default btn-block"
-              @click="muteUser"
-            >
-              {{ $t('user_card.mute') }}
-            </button>
-          </div>
-
-          <div>
-            <button
-              v-if="user.statusnet_blocking"
-              class="btn btn-default btn-block pressed"
-              @click="unblockUser"
-            >
-              {{ $t('user_card.blocked') }}
-            </button>
-            <button
-              v-else
-              class="btn btn-default btn-block"
-              @click="blockUser"
-            >
-              {{ $t('user_card.block') }}
-            </button>
-          </div>
-
-          <div>
-            <button
-              class="btn btn-default btn-block"
-              @click="reportUser"
-            >
-              {{ $t('user_card.report') }}
-            </button>
-          </div>
-
+          <AccountActions :user="user" />
           <ModerationTools
             v-if="loggedIn.role === &quot;admin&quot;"
             :user="user"
@@ -603,15 +480,9 @@
     position: relative;
     display: flex;
     flex-flow: row wrap;
-    justify-content: space-between;
+    justify-content: flex-end;
     margin-right: -.75em;
 
-    > * {
-      flex: 1 0 0;
-      margin: 0 .75em .6em 0;
-      white-space: nowrap;
-    }
-
     button {
       margin: 0;
 
-- 
cgit v1.2.3-70-g09d2


From a2923570c369e537ef1757865f708f73f20f3a16 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 30 Sep 2019 23:45:03 +0300
Subject: fix regex shortcode problem

---
 src/services/entity_normalizer/entity_normalizer.service.js   |  4 +++-
 .../services/entity_normalizer/entity_normalizer.spec.js      | 11 +++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index fc326ad1..67664af8 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -196,9 +196,11 @@ export const parseAttachment = (data) => {
   return output
 }
 export const addEmojis = (string, emojis) => {
+  const matchOperatorsRegex = /[|\\{}()[\]^$+*?.-]/g
   return emojis.reduce((acc, emoji) => {
+    const regexSafeShortCode = emoji.shortcode.replace(matchOperatorsRegex, '\\$&')
     return acc.replace(
-      new RegExp(`:${emoji.shortcode}:`, 'g'),
+      new RegExp(`:${regexSafeShortCode}:`, 'g'),
       `<img src='${emoji.url}' alt='${emoji.shortcode}' title='${emoji.shortcode}' class='emoji' />`
     )
   }, string)
diff --git a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
index 736b842c..49f378e2 100644
--- a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
+++ b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
@@ -345,5 +345,16 @@ describe('API Entities normalizer', () => {
       const result = addEmojis('Admin add the :tenshi: emoji', emojis)
       expect(result).to.equal('Admin add the :tenshi: emoji')
     })
+
+    it('Doesn\'t blow up on regex special characters', () => {
+      const emojis = makeMockEmojiMasto([{
+        shortcode: 'c++'
+      }, {
+        shortcode: '[a-z] {|}*'
+      }])
+      const result = addEmojis('This post has :c++: emoji and :[a-z] {|}*: emoji', emojis)
+      expect(result).to.include('title=\'c++\'')
+      expect(result).to.include('title=\'[a-z] {|}*\'')
+    })
   })
 })
-- 
cgit v1.2.3-70-g09d2


From 4f75ad9905005beba07744f33273c2e745e78d2e Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Sat, 14 Sep 2019 13:50:03 -0400
Subject: add admin link to nav

---
 src/App.vue      | 8 ++++++++
 src/i18n/en.json | 1 +
 2 files changed, 9 insertions(+)

(limited to 'src')

diff --git a/src/App.vue b/src/App.vue
index 8d7f6c79..5d502f26 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -53,6 +53,14 @@
               :title="$t('nav.preferences')"
             />
           </router-link>
+          <a
+            v-if="currentUser && currentUser.role === 'admin'"
+            href="/pleroma/admin"
+            class="mobile-hidden"
+          ><i
+            class="button-icon icon-gauge nav-icon"
+            :title="$t('nav.admin_panel')"
+          /></a>
           <a
             v-if="currentUser"
             href="#"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 52cf0f36..389e84c8 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -68,6 +68,7 @@
   },
   "nav": {
     "about": "About",
+    "admin_panel": "Admin Panel",
     "back": "Back",
     "chat": "Local Chat",
     "friend_requests": "Follow Requests",
-- 
cgit v1.2.3-70-g09d2


From 093fcee902e664617a833cc21a80eb7e22cc441f Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Sat, 14 Sep 2019 13:53:03 -0400
Subject: add admin link to the side drawer

---
 src/components/side_drawer/side_drawer.vue | 8 ++++++++
 1 file changed, 8 insertions(+)

(limited to 'src')

diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 5b2d4473..25f9c0c8 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -122,6 +122,14 @@
             {{ $t("nav.about") }}
           </router-link>
         </li>
+        <li
+          v-if="currentUser && currentUser.role === 'admin'"
+          @click="toggleDrawer"
+        >
+          <a href="/pleroma/admin">
+            {{ $t("nav.admin_panel") }}
+          </a>
+        </li>
         <li
           v-if="currentUser"
           @click="toggleDrawer"
-- 
cgit v1.2.3-70-g09d2


From d9b01643e235cad56e83c1ac7180cd2f25ba7170 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Mon, 16 Sep 2019 08:03:10 -0400
Subject: open in a new tab

---
 src/App.vue                                | 1 +
 src/components/side_drawer/side_drawer.vue | 5 ++++-
 2 files changed, 5 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/App.vue b/src/App.vue
index 5d502f26..a7a2b340 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -57,6 +57,7 @@
             v-if="currentUser && currentUser.role === 'admin'"
             href="/pleroma/admin"
             class="mobile-hidden"
+            target="_blank"
           ><i
             class="button-icon icon-gauge nav-icon"
             :title="$t('nav.admin_panel')"
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 25f9c0c8..78f269d4 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -126,7 +126,10 @@
           v-if="currentUser && currentUser.role === 'admin'"
           @click="toggleDrawer"
         >
-          <a href="/pleroma/admin">
+          <a
+            href="/pleroma/admin"
+            target="_blank"
+          >
             {{ $t("nav.admin_panel") }}
           </a>
         </li>
-- 
cgit v1.2.3-70-g09d2


From 503f086487e05d94058531269a9be64bf0deeb2a Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 26 Sep 2019 21:24:40 -0400
Subject: add trailing slash to admin url

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

(limited to 'src')

diff --git a/src/App.vue b/src/App.vue
index a7a2b340..855d7d8c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -55,7 +55,7 @@
           </router-link>
           <a
             v-if="currentUser && currentUser.role === 'admin'"
-            href="/pleroma/admin"
+            href="/pleroma/admin/"
             class="mobile-hidden"
             target="_blank"
           ><i
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 78f269d4..0e6ea2cb 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -127,7 +127,7 @@
           @click="toggleDrawer"
         >
           <a
-            href="/pleroma/admin"
+            href="/pleroma/admin/"
             target="_blank"
           >
             {{ $t("nav.admin_panel") }}
-- 
cgit v1.2.3-70-g09d2


From 7e5a3fa09f14b9580c79917e2832ac2229efefd9 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 26 Sep 2019 21:29:51 -0400
Subject: update copy

---
 src/App.vue                                | 2 +-
 src/components/side_drawer/side_drawer.vue | 2 +-
 src/i18n/en.json                           | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/App.vue b/src/App.vue
index 855d7d8c..47da6064 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -60,7 +60,7 @@
             target="_blank"
           ><i
             class="button-icon icon-gauge nav-icon"
-            :title="$t('nav.admin_panel')"
+            :title="$t('nav.administration')"
           /></a>
           <a
             v-if="currentUser"
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 0e6ea2cb..ba0b6fea 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -130,7 +130,7 @@
             href="/pleroma/admin/"
             target="_blank"
           >
-            {{ $t("nav.admin_panel") }}
+            {{ $t("nav.administration") }}
           </a>
         </li>
         <li
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 389e84c8..32c25e3e 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -68,7 +68,7 @@
   },
   "nav": {
     "about": "About",
-    "admin_panel": "Admin Panel",
+    "administration": "Administration",
     "back": "Back",
     "chat": "Local Chat",
     "friend_requests": "Follow Requests",
-- 
cgit v1.2.3-70-g09d2


From 33759e41537f92c560df3d08f66207cd8ab2219b Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 2 Oct 2019 13:28:16 -0400
Subject: update admin url

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

(limited to 'src')

diff --git a/src/App.vue b/src/App.vue
index 47da6064..dbe842ec 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -55,7 +55,7 @@
           </router-link>
           <a
             v-if="currentUser && currentUser.role === 'admin'"
-            href="/pleroma/admin/"
+            href="/pleroma/admin/#/login-pleroma"
             class="mobile-hidden"
             target="_blank"
           ><i
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index ba0b6fea..214b8e0c 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -127,7 +127,7 @@
           @click="toggleDrawer"
         >
           <a
-            href="/pleroma/admin/"
+            href="/pleroma/admin/#/login-pleroma"
             target="_blank"
           >
             {{ $t("nav.administration") }}
-- 
cgit v1.2.3-70-g09d2


From 67436ed1445f89630f29fc2e7c1bd5ae36aaa7e5 Mon Sep 17 00:00:00 2001
From: tarteka <info@tarteka.net>
Date: Mon, 7 Oct 2019 10:22:17 +0200
Subject: update and fix

---
 src/i18n/eu.json | 31 +++++++++++++++++++++++--------
 1 file changed, 23 insertions(+), 8 deletions(-)

(limited to 'src')

diff --git a/src/i18n/eu.json b/src/i18n/eu.json
index ad8f4c05..90bc13a4 100644
--- a/src/i18n/eu.json
+++ b/src/i18n/eu.json
@@ -68,6 +68,7 @@
   },
   "nav": {
     "about": "Honi buruz",
+    "administration": "Administrazioa",
     "back": "Atzera",
     "chat": "Txat lokala",
     "friend_requests": "Jarraitzeko eskaerak",
@@ -106,6 +107,15 @@
     "expired": "Inkesta {0} bukatu zen",
     "not_enough_options": "Aukera gutxiegi inkestan"
   },
+  "emoji": {
+    "stickers": "Pegatinak",
+    "emoji": "Emoji",
+    "keep_open": "Mantendu hautatzailea zabalik",
+    "search_emoji": "Bilatu emoji bat",
+    "add_emoji": "Emoji bat gehitu",
+    "custom": "Ohiko emojiak",
+    "unicode": "Unicode emojiak"
+  },
   "stickers": {
     "add_sticker": "Pegatina gehitu"
   },
@@ -199,12 +209,12 @@
     "avatarRadius": "Avatarrak",
     "background": "Atzeko planoa",
     "bio": "Biografia",
-    "block_export": "Bloke esportatzea",
-    "block_export_button": "Esportatu zure blokeak csv fitxategi batera",
-    "block_import": "Bloke inportazioa",
-    "block_import_error": "Errorea blokeak inportatzen",
-    "blocks_imported": "Blokeak inportaturik! Hauek prozesatzeak denbora hartuko du.",
-    "blocks_tab": "Blokeak",
+    "block_export": "Blokeatu dituzunak esportatu",
+    "block_export_button": "Esportatu blokeatutakoak csv fitxategi batera",
+    "block_import": "Blokeatu dituzunak inportatu",
+    "block_import_error": "Errorea blokeatutakoak inportatzen",
+    "blocks_imported": "Blokeatutakoak inportaturik! Hauek prozesatzeak denbora hartuko du.",
+    "blocks_tab": "Blokeatutakoak",
     "btnRadius": "Botoiak",
     "cBlue": "Urdina (erantzun, jarraitu)",
     "cGreen": "Berdea (Bertxiotu)",
@@ -222,7 +232,9 @@
     "data_import_export_tab": "Datuak Inportatu / Esportatu",
     "default_vis": "Lehenetsitako ikusgaitasunak",
     "delete_account": "Ezabatu kontua",
+    "discoverable": "Baimendu zure kontua kanpo bilaketa-emaitzetan eta bestelako zerbitzuetan agertzea",
     "delete_account_description": "Betirako ezabatu zure kontua eta zure mezu guztiak",
+    "pad_emoji": "Zuriuneak gehitu emoji bat aukeratzen denean",
     "delete_account_error": "Arazo bat gertatu da zure kontua ezabatzerakoan. Arazoa jarraitu eskero, administratzailearekin harremanetan jarri.",
     "delete_account_instructions": "Idatzi zure pasahitza kontua ezabatzeko.",
     "avatar_size_instruction": "Avatar irudien gomendatutako gutxieneko tamaina 150x150 pixel dira.",
@@ -254,7 +266,7 @@
     "instance_default": "(lehenetsia: {value})",
     "instance_default_simple": "(lehenetsia)",
     "interface": "Interfazea",
-    "interfaceLanguage": "Interfaze hizkuntza",
+    "interfaceLanguage": "Interfazearen hizkuntza",
     "invalid_theme_imported": "Hautatutako fitxategia ez da onartutako Pleroma gaia. Ez da zure gaian aldaketarik burutu.",
     "limited_availability": "Ez dago erabilgarri zure nabigatzailean",
     "links": "Estekak",
@@ -277,6 +289,8 @@
     "no_mutes": "Ez daude erabiltzaile mututuak",
     "hide_follows_description": "Ez erakutsi nor jarraitzen ari naizen",
     "hide_followers_description": "Ez erakutsi nor ari den ni jarraitzen",
+    "hide_follows_count_description": "Ez erakutsi jarraitzen ari naizen kontuen kopurua",
+    "hide_followers_count_description": "Ez erakutsi nire jarraitzaileen kontuen kopurua",
     "show_admin_badge": "Erakutsi Administratzaile etiketa nire profilan",
     "show_moderator_badge": "Erakutsi Moderatzaile etiketa nire profilan",
     "nsfw_clickthrough": "Gaitu klika hunkigarri eranskinak ezkutatzeko",
@@ -449,7 +463,7 @@
     },
     "version": {
       "title": "Bertsioa",
-      "backend_version": "Backend Bertsio",
+      "backend_version": "Backend Bertsioa",
       "frontend_version": "Frontend Bertsioa"
     }
   },
@@ -529,6 +543,7 @@
     "follows_you": "Jarraitzen dizu!",
     "its_you": "Zu zara!",
     "media": "Multimedia",
+    "mention": "Aipatu",
     "mute": "Isilarazi",
     "muted": "Isilduta",
     "per_day": "eguneko",
-- 
cgit v1.2.3-70-g09d2


From 97f9628beaa5edce4081613a2696bc7f89619697 Mon Sep 17 00:00:00 2001
From: Echedey López Romero <elr@disroot.org>
Date: Mon, 7 Oct 2019 12:34:38 +0000
Subject: Little fix to "login"/"description" and "register" strings to es.json
 referenced as verbs.

---
 src/i18n/es.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/i18n/es.json b/src/i18n/es.json
index 91c7f383..92a93cdd 100644
--- a/src/i18n/es.json
+++ b/src/i18n/es.json
@@ -45,8 +45,8 @@
     "error": "Se ha producido un error al importar el archivo."
   },
   "login": {
-    "login": "Identificación",
-    "description": "Identificación con OAuth",
+    "login": "Identificarse",
+    "description": "Identificarse con OAuth",
     "logout": "Cerrar sesión",
     "password": "Contraseña",
     "placeholder": "p.ej. lain",
-- 
cgit v1.2.3-70-g09d2


From 16c03995cb28141d3db5d4f1e5079343e50d88f3 Mon Sep 17 00:00:00 2001
From: tarteka <info@tarteka.net>
Date: Mon, 7 Oct 2019 21:21:16 +0200
Subject: [i18n] spanish new strings translations

update to translate the latest text strings
---
 src/i18n/es.json | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

(limited to 'src')

diff --git a/src/i18n/es.json b/src/i18n/es.json
index 91c7f383..53a3b9dd 100644
--- a/src/i18n/es.json
+++ b/src/i18n/es.json
@@ -68,6 +68,7 @@
   },
   "nav": {
     "about": "Acerca de",
+    "administration": "Administración",
     "back": "Volver",
     "chat": "Chat Local",
     "friend_requests": "Solicitudes de seguimiento",
@@ -106,6 +107,15 @@
     "expired": "La encuesta terminó hace {0}",
     "not_enough_options": "Muy pocas opciones únicas en la encuesta"
   },
+  "emoji": {
+    "stickers": "Pegatinas",
+    "emoji": "Emoji",
+    "keep_open": "Mantener el selector abierto",
+    "search_emoji": "Buscar un emoji",
+    "add_emoji": "Insertar un emoji",
+    "custom": "Emojis personalizados",
+    "unicode": "Emojis unicode"
+  },
   "stickers": {
     "add_sticker": "Añadir Pegatina"
   },
@@ -222,7 +232,9 @@
     "data_import_export_tab": "Importar / Exportar Datos",
     "default_vis": "Alcance de visibilidad por defecto",
     "delete_account": "Eliminar la cuenta",
+    "discoverable": "Permitir la aparición de esta cuenta en los resultados de búsqueda y otros servicios",
     "delete_account_description": "Eliminar para siempre la cuenta y todos los mensajes.",
+    "pad_emoji": "Rellenar con espacios al agregar emojis desde el selector",
     "delete_account_error": "Hubo un error al eliminar tu cuenta. Si el fallo persiste, ponte en contacto con el administrador de tu instancia.",
     "delete_account_instructions": "Escribe tu contraseña para confirmar la eliminación de tu cuenta.",
     "avatar_size_instruction": "El tamaño mínimo recomendado para el avatar es de 150X150 píxeles.",
@@ -277,6 +289,8 @@
     "no_mutes": "No hay usuarios sinlenciados",
     "hide_follows_description": "No mostrar a quién sigo",
     "hide_followers_description": "No mostrar quién me sigue",
+    "hide_follows_count_description": "No mostrar el número de cuentas que sigo",
+    "hide_followers_count_description": "No mostrar el número de cuentas que me siguen",
     "show_admin_badge": "Mostrar la insignia de Administrador en mi perfil",
     "show_moderator_badge": "Mostrar la insignia de Moderador en mi perfil",
     "nsfw_clickthrough": "Activar el clic para ocultar los adjuntos NSFW",
@@ -529,6 +543,7 @@
     "follows_you": "¡Te sigue!",
     "its_you": "¡Eres tú!",
     "media": "Media",
+    "mention": "Mencionar",
     "mute": "Silenciar",
     "muted": "Silenciado",
     "per_day": "por día",
-- 
cgit v1.2.3-70-g09d2


From 9c305c5f93b2ffee0a98ff8cc6770df052d4b71e Mon Sep 17 00:00:00 2001
From: Maksim Pechnikov <parallel588@gmail.com>
Date: Tue, 8 Oct 2019 10:21:40 +0300
Subject: Revert "added acccount_actions component"

This reverts commit 188b6f56ed2f983d8f0fba4dc8f7327ebbee321d.
---
 src/components/account_actions/account_actions.js  |  59 ---------
 src/components/account_actions/account_actions.vue | 133 --------------------
 src/components/follow_button/follow_button.js      |  58 ---------
 src/components/follow_button/follow_button.vue     |  13 --
 src/components/user_card/user_card.js              |  48 +++++++-
 src/components/user_card/user_card.vue             | 135 ++++++++++++++++++++-
 6 files changed, 178 insertions(+), 268 deletions(-)
 delete mode 100644 src/components/account_actions/account_actions.js
 delete mode 100644 src/components/account_actions/account_actions.vue
 delete mode 100644 src/components/follow_button/follow_button.js
 delete mode 100644 src/components/follow_button/follow_button.vue

(limited to 'src')

diff --git a/src/components/account_actions/account_actions.js b/src/components/account_actions/account_actions.js
deleted file mode 100644
index 1092a96a..00000000
--- a/src/components/account_actions/account_actions.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import FollowButton from '../follow_button/follow_button.vue'
-import ProgressButton from '../progress_button/progress_button.vue'
-
-const AccountActions = {
-  props: [
-    'user'
-  ],
-  data () {
-    return {
-      showDropDown: false
-    }
-  },
-  components: {
-    FollowButton,
-    ProgressButton
-  },
-  computed: {
-    tagsSet () {
-      return new Set(this.user.tags)
-    },
-    hasTagPolicy () {
-      return this.$store.state.instance.tagPolicyAvailable
-    }
-  },
-  methods: {
-    subscribeUser () {
-      return this.$store.dispatch('subscribeUser', this.user.id)
-    },
-    unsubscribeUser () {
-      return this.$store.dispatch('unsubscribeUser', this.user.id)
-    },
-    showRepeats () {
-      this.$store.dispatch('showReblogs', this.user.id)
-    },
-    hideRepeats () {
-      this.$store.dispatch('hideReblogs', this.user.id)
-    },
-    muteUser () {
-      this.$store.dispatch('muteUser', this.user.id)
-    },
-    unmuteUser () {
-      this.$store.dispatch('unmuteUser', this.user.id)
-    },
-    blockUser () {
-      this.$store.dispatch('blockUser', this.user.id)
-    },
-    unblockUser () {
-      this.$store.dispatch('unblockUser', this.user.id)
-    },
-    reportUser () {
-      this.$store.dispatch('openUserReportingModal', this.user.id)
-    },
-    mentionUser () {
-      this.$store.dispatch('openPostStatusModal', { replyTo: true, repliedUser: this.user })
-    }
-  }
-}
-
-export default AccountActions
diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
deleted file mode 100644
index ce508b0a..00000000
--- a/src/components/account_actions/account_actions.vue
+++ /dev/null
@@ -1,133 +0,0 @@
-<template>
-  <div class="account-actions">
-    <FollowButton :user="user" />
-    <v-popover
-      trigger="click"
-      class="account-tools-popover"
-      :container="false"
-      placement="bottom-end"
-      :offset="5"
-      @show="showDropDown = true"
-      @hide="showDropDown = false"
-    >
-      <div slot="popover">
-        <div class="dropdown-menu">
-          <button
-            class="btn btn-default btn-block dropdown-item"
-            @click="mentionUser"
-          >
-            {{ $t('user_card.mention') }}
-          </button>
-          <template v-if="user.following">
-            <div
-              role="separator"
-              class="dropdown-divider"
-            />
-            <ProgressButton
-              v-if="!user.subscribed"
-              class="btn btn-default dropdown-item"
-              :click="subscribeUser"
-              :title="$t('user_card.subscribe')"
-            >
-              {{ $t('user_card.subscribe') }}
-            </ProgressButton>
-            <ProgressButton
-              v-else
-              class="btn btn-default pressed dropdown-item"
-              :click="unsubscribeUser"
-              :title="$t('user_card.unsubscribe')"
-            >
-              {{ $t('user_card.unsubscribe') }}
-            </ProgressButton>
-
-            <button
-              v-if="user.showing_reblogs"
-              class="btn btn-default dropdown-item"
-              @click="hideRepeats"
-            >
-              {{ $t('user_card.hide_repeats') }}
-            </button>
-            <button
-              v-if="!user.showing_reblogs"
-              class="btn btn-default pressed dropdown-item"
-              @click="showRepeats"
-            >
-              {{ $t('user_card.show_repeats') }}
-            </button>
-          </template>
-          <div
-            role="separator"
-            class="dropdown-divider"
-          />
-          <button
-            v-if="user.muted"
-            class="btn btn-default btn-block pressed dropdown-item"
-            @click="unmuteUser"
-          >
-            {{ $t('user_card.muted') }}
-          </button>
-          <button
-            v-else
-            class="btn btn-default btn-block dropdown-item"
-            @click="muteUser"
-          >
-            {{ $t('user_card.mute') }}
-          </button>
-          <button
-            v-if="user.statusnet_blocking"
-            class="btn btn-default btn-block pressed dropdown-item"
-            @click="unblockUser"
-          >
-            {{ $t('user_card.blocked') }}
-          </button>
-          <button
-            v-else
-            class="btn btn-default btn-block dropdown-item"
-            @click="blockUser"
-          >
-            {{ $t('user_card.block') }}
-          </button>
-          <button
-            class="btn btn-default btn-block dropdown-item"
-            @click="reportUser"
-          >
-            {{ $t('user_card.report') }}
-          </button>
-        </div>
-      </div>
-      <button class="btn btn-default ellipsis-button">
-        <i class="icon-ellipsis" />
-      </button>
-    </v-popover>
-  </div>
-</template>
-
-<script src="./account_actions.js"></script>
-
-<style lang="scss">
-@import '../../_variables.scss';
-@import '../popper/popper.scss';
-
-.account-tools-popover {
-  height: 100%;
-  .trigger {
-    display: flex !important;
-    height: 100%;
-  }
-}
-.account-actions {
-  display: flex;
-  flex: 0 0 0 !important;
-  margin: 0 3em 0 0 !important;
-}
-.account-actions .follow-button {
-  border-top-right-radius: 0px;
-  border-bottom-right-radius: 0px;
-}
-.account-actions .ellipsis-button {
-  border-top-left-radius: 0px;
-  border-bottom-left-radius: 0px;
-}
-.account-actions .button-icon {
-}
-</style>
diff --git a/src/components/follow_button/follow_button.js b/src/components/follow_button/follow_button.js
deleted file mode 100644
index 9d2834ab..00000000
--- a/src/components/follow_button/follow_button.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
-export default {
-  props: ['user'],
-  data () {
-    return {
-      inProgress: false
-    }
-  },
-  computed: {
-    isPressed () {
-      return this.inProgress || this.user.following
-    },
-    title () {
-      if (this.inProgress || this.user.following) {
-        return 'user_card.follow_unfollow'
-      } else if (this.user.requested) {
-        return 'user_card.follow_again'
-      } else {
-        return ''
-      }
-    },
-    label () {
-      if (this.inProgress) {
-        return 'user_card.follow_progress'
-      } else if (this.user.following) {
-        return 'user_card.following'
-      } else if (this.user.requested) {
-        return 'user_card.follow_sent'
-      } else {
-        return 'user_card.follow'
-      }
-    }
-  },
-  methods: {
-    doClick () {
-      if (this.user.following) {
-        this.unfollowUser()
-      } else {
-        this.followUser()
-      }
-    },
-    followUser () {
-      const store = this.$store
-      this.inProgress = true
-      requestFollow(this.user, store).then(() => {
-        this.inProgress = false
-      })
-    },
-    unfollowUser () {
-      const store = this.$store
-      this.inProgress = true
-      requestUnfollow(this.user, store).then(() => {
-        this.inProgress = false
-        store.commit('removeStatus', { timeline: 'friends', userId: this.user.id })
-      })
-    }
-  }
-}
diff --git a/src/components/follow_button/follow_button.vue b/src/components/follow_button/follow_button.vue
deleted file mode 100644
index 61aa75a0..00000000
--- a/src/components/follow_button/follow_button.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <button
-    class="btn btn-default btn-block follow-button"
-    :class="{ pressed: isPressed }"
-    :disabled="inProgress"
-    :title="$t(title)"
-    @click="doClick"
-  >
-    {{ $t(label) }}
-  </button>
-</template>
-
-<script src="./follow_button.js"></script>
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index c09e5654..015a5762 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -2,8 +2,8 @@ import UserAvatar from '../user_avatar/user_avatar.vue'
 import RemoteFollow from '../remote_follow/remote_follow.vue'
 import ProgressButton from '../progress_button/progress_button.vue'
 import ModerationTools from '../moderation_tools/moderation_tools.vue'
-import AccountActions from '../account_actions/account_actions.vue'
 import { hex2rgb } from '../../services/color_convert/color_convert.js'
+import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
 export default {
@@ -98,10 +98,48 @@ export default {
     UserAvatar,
     RemoteFollow,
     ModerationTools,
-    AccountActions,
     ProgressButton
   },
   methods: {
+    showRepeats () {
+      this.$store.dispatch('showReblogs', this.user.id)
+    },
+    hideRepeats () {
+      this.$store.dispatch('hideReblogs', this.user.id)
+    },
+    followUser () {
+      const store = this.$store
+      this.followRequestInProgress = true
+      requestFollow(this.user, store).then(() => {
+        this.followRequestInProgress = false
+      })
+    },
+    unfollowUser () {
+      const store = this.$store
+      this.followRequestInProgress = true
+      requestUnfollow(this.user, store).then(() => {
+        this.followRequestInProgress = false
+        store.commit('removeStatus', { timeline: 'friends', userId: this.user.id })
+      })
+    },
+    blockUser () {
+      this.$store.dispatch('blockUser', this.user.id)
+    },
+    unblockUser () {
+      this.$store.dispatch('unblockUser', this.user.id)
+    },
+    muteUser () {
+      this.$store.dispatch('muteUser', this.user.id)
+    },
+    unmuteUser () {
+      this.$store.dispatch('unmuteUser', this.user.id)
+    },
+    subscribeUser () {
+      return this.$store.dispatch('subscribeUser', this.user.id)
+    },
+    unsubscribeUser () {
+      return this.$store.dispatch('unsubscribeUser', this.user.id)
+    },
     setProfileView (v) {
       if (this.switcher) {
         const store = this.$store
@@ -122,6 +160,9 @@ export default {
         this.$store.state.instance.restrictedNicknames
       )
     },
+    reportUser () {
+      this.$store.dispatch('openUserReportingModal', this.user.id)
+    },
     zoomAvatar () {
       const attachment = {
         url: this.user.profile_image_url_original,
@@ -129,6 +170,9 @@ export default {
       }
       this.$store.dispatch('setMedia', [attachment])
       this.$store.dispatch('setCurrent', attachment)
+    },
+    mentionUser () {
+      this.$store.dispatch('openPostStatusModal', { replyTo: true, repliedUser: this.user })
     }
   }
 }
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index abaef85f..f465467c 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -131,12 +131,135 @@
             </label>
           </div>
         </div>
-
         <div
           v-if="loggedIn && isOtherUser"
           class="user-interactions"
         >
-          <AccountActions :user="user" />
+          <div v-if="!user.following">
+            <button
+              class="btn btn-default btn-block"
+              :disabled="followRequestInProgress"
+              :title="user.requested ? $t('user_card.follow_again') : ''"
+              @click="followUser"
+            >
+              <template v-if="followRequestInProgress">
+                {{ $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>
+          </div>
+          <div v-else-if="followRequestInProgress">
+            <button
+              class="btn btn-default btn-block pressed"
+              disabled
+              :title="$t('user_card.follow_unfollow')"
+              @click="unfollowUser"
+            >
+              {{ $t('user_card.follow_progress') }}
+            </button>
+          </div>
+          <div
+            v-else
+            class="btn-group"
+          >
+            <button
+              class="btn btn-default pressed"
+              :title="$t('user_card.follow_unfollow')"
+              @click="unfollowUser"
+            >
+              {{ $t('user_card.following') }}
+            </button>
+            <ProgressButton
+              v-if="!user.subscribed"
+              class="btn btn-default"
+              :click="subscribeUser"
+              :title="$t('user_card.subscribe')"
+            >
+              <i class="icon-bell-alt" />
+            </ProgressButton>
+            <ProgressButton
+              v-else
+              class="btn btn-default pressed"
+              :click="unsubscribeUser"
+              :title="$t('user_card.unsubscribe')"
+            >
+              <i class="icon-bell-ringing-o" />
+            </ProgressButton>
+            <button
+              v-if="user.showing_reblogs"
+              class="btn btn-default"
+              :title="$t('user_card.hide_repeats')"
+              @click="hideRepeats"
+            >
+              <i class="icon-eye" />
+            </button>
+            <button
+              v-if="!user.showing_reblogs"
+              class="btn btn-default pressed"
+              :title="$t('user_card.show_repeats')"
+              @click="showRepeats"
+            >
+              <i class="icon-eye-off" />
+            </button>
+          </div>
+
+          <div>
+            <button
+              class="btn btn-default btn-block"
+              @click="mentionUser"
+            >
+              {{ $t('user_card.mention') }}
+            </button>
+          </div>
+
+          <div>
+            <button
+              v-if="user.muted"
+              class="btn btn-default btn-block pressed"
+              @click="unmuteUser"
+            >
+              {{ $t('user_card.muted') }}
+            </button>
+            <button
+              v-else
+              class="btn btn-default btn-block"
+              @click="muteUser"
+            >
+              {{ $t('user_card.mute') }}
+            </button>
+          </div>
+
+          <div>
+            <button
+              v-if="user.statusnet_blocking"
+              class="btn btn-default btn-block pressed"
+              @click="unblockUser"
+            >
+              {{ $t('user_card.blocked') }}
+            </button>
+            <button
+              v-else
+              class="btn btn-default btn-block"
+              @click="blockUser"
+            >
+              {{ $t('user_card.block') }}
+            </button>
+          </div>
+
+          <div>
+            <button
+              class="btn btn-default btn-block"
+              @click="reportUser"
+            >
+              {{ $t('user_card.report') }}
+            </button>
+          </div>
+
           <ModerationTools
             v-if="loggedIn.role === &quot;admin&quot;"
             :user="user"
@@ -480,9 +603,15 @@
     position: relative;
     display: flex;
     flex-flow: row wrap;
-    justify-content: flex-end;
+    justify-content: space-between;
     margin-right: -.75em;
 
+    > * {
+      flex: 1 0 0;
+      margin: 0 .75em .6em 0;
+      white-space: nowrap;
+    }
+
     button {
       margin: 0;
 
-- 
cgit v1.2.3-70-g09d2


From a26d55013779d7b41e4a4aa0dc2477a6926116ae Mon Sep 17 00:00:00 2001
From: Maksim Pechnikov <parallel588@gmail.com>
Date: Tue, 8 Oct 2019 10:21:48 +0300
Subject: updated user_card

---
 src/components/account_actions/account_actions.js  |  45 +++++++
 src/components/account_actions/account_actions.vue |  88 ++++++++++++++
 src/components/follow_button/follow_button.js      |  57 +++++++++
 src/components/follow_button/follow_button.vue     |  13 ++
 src/components/user_card/user_card.js              |  40 +-----
 src/components/user_card/user_card.vue             | 134 ++++-----------------
 src/services/api/api.service.js                    |  13 +-
 7 files changed, 240 insertions(+), 150 deletions(-)
 create mode 100644 src/components/account_actions/account_actions.js
 create mode 100644 src/components/account_actions/account_actions.vue
 create mode 100644 src/components/follow_button/follow_button.js
 create mode 100644 src/components/follow_button/follow_button.vue

(limited to 'src')

diff --git a/src/components/account_actions/account_actions.js b/src/components/account_actions/account_actions.js
new file mode 100644
index 00000000..453e1f46
--- /dev/null
+++ b/src/components/account_actions/account_actions.js
@@ -0,0 +1,45 @@
+import ProgressButton from '../progress_button/progress_button.vue'
+
+const AccountActions = {
+  props: [
+    'user'
+  ],
+  data () {
+    return {
+      showDropDown: false
+    }
+  },
+  components: {
+    ProgressButton
+  },
+  computed: {
+    tagsSet () {
+      return new Set(this.user.tags)
+    },
+    hasTagPolicy () {
+      return this.$store.state.instance.tagPolicyAvailable
+    }
+  },
+  methods: {
+    showRepeats () {
+      this.$store.dispatch('showReblogs', this.user.id)
+    },
+    hideRepeats () {
+      this.$store.dispatch('hideReblogs', this.user.id)
+    },
+    blockUser () {
+      this.$store.dispatch('blockUser', this.user.id)
+    },
+    unblockUser () {
+      this.$store.dispatch('unblockUser', this.user.id)
+    },
+    reportUser () {
+      this.$store.dispatch('openUserReportingModal', this.user.id)
+    },
+    mentionUser () {
+      this.$store.dispatch('openPostStatusModal', { replyTo: true, repliedUser: this.user })
+    }
+  }
+}
+
+export default AccountActions
diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
new file mode 100644
index 00000000..5786a502
--- /dev/null
+++ b/src/components/account_actions/account_actions.vue
@@ -0,0 +1,88 @@
+<template>
+  <div class="account-actions">
+    <v-popover
+      trigger="click"
+      class="account-tools-popover"
+      :container="false"
+      placement="bottom-end"
+      :offset="5"
+      @show="showDropDown = true"
+      @hide="showDropDown = false"
+    >
+      <div slot="popover">
+        <div class="dropdown-menu">
+          <button
+            class="btn btn-default btn-block dropdown-item"
+            @click="mentionUser"
+          >
+            {{ $t('user_card.mention') }}
+          </button>
+          <template v-if="user.following">
+            <div
+              role="separator"
+              class="dropdown-divider"
+            />
+            <button
+              v-if="user.showing_reblogs"
+              class="btn btn-default dropdown-item"
+              @click="hideRepeats"
+            >
+              {{ $t('user_card.hide_repeats') }}
+            </button>
+            <button
+              v-if="!user.showing_reblogs"
+              class="btn btn-default dropdown-item"
+              @click="showRepeats"
+            >
+              {{ $t('user_card.show_repeats') }}
+            </button>
+          </template>
+          <div
+            role="separator"
+            class="dropdown-divider"
+          />
+          <button
+            v-if="user.statusnet_blocking"
+            class="btn btn-default btn-block dropdown-item"
+            @click="unblockUser"
+          >
+            {{ $t('user_card.blocked') }}
+          </button>
+          <button
+            v-else
+            class="btn btn-default btn-block dropdown-item"
+            @click="blockUser"
+          >
+            {{ $t('user_card.block') }}
+          </button>
+          <button
+            class="btn btn-default btn-block dropdown-item"
+            @click="reportUser"
+          >
+            {{ $t('user_card.report') }}
+          </button>
+        </div>
+      </div>
+      <div class="btn btn-default ellipsis-button">
+        <i class="icon-link-ext trigger-button" />
+      </div>
+    </v-popover>
+  </div>
+</template>
+
+<script src="./account_actions.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+@import '../popper/popper.scss';
+
+.account-actions button.dropdown-item {
+  margin-left: 0;
+}
+.account-actions .trigger-button {
+  color: $fallback--lightText;
+  color: var(--lightText, $fallback--lightText);
+  opacity: .8;
+}
+
+</style>
diff --git a/src/components/follow_button/follow_button.js b/src/components/follow_button/follow_button.js
new file mode 100644
index 00000000..708d15a2
--- /dev/null
+++ b/src/components/follow_button/follow_button.js
@@ -0,0 +1,57 @@
+import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
+export default {
+  props: ['user'],
+  data () {
+    return {
+      inProgress: false
+    }
+  },
+  computed: {
+    isPressed () {
+      return this.inProgress || this.user.following
+    },
+    title () {
+      if (this.inProgress || this.user.following) {
+        return this.$t('user_card.follow_unfollow')
+      } else if (this.user.requested) {
+        return this.$t('user_card.follow_again')
+      } else {
+        return this.$t('user_card.follow')
+      }
+    },
+    label () {
+      if (this.inProgress) {
+        return this.$t('user_card.follow_progress')
+      } else if (this.user.following) {
+        return this.$t('user_card.following')
+      } else if (this.user.requested) {
+        return this.$t('user_card.follow_sent')
+      } else {
+        return this.$t('user_card.follow')
+      }
+    }
+  },
+  methods: {
+    onClick () {
+      if (this.user.following) {
+        this.unfollow()
+      } else {
+        this.follow()
+      }
+    },
+    follow () {
+      this.inProgress = true
+      requestFollow(this.user, this.$store).then(() => {
+        this.inProgress = false
+      })
+    },
+    unfollow () {
+      const store = this.$store
+      this.inProgress = true
+      requestUnfollow(this.user, store).then(() => {
+        this.inProgress = false
+        store.commit('removeStatus', { timeline: 'friends', userId: this.user.id })
+      })
+    }
+  }
+}
diff --git a/src/components/follow_button/follow_button.vue b/src/components/follow_button/follow_button.vue
new file mode 100644
index 00000000..f0cbb94b
--- /dev/null
+++ b/src/components/follow_button/follow_button.vue
@@ -0,0 +1,13 @@
+<template>
+  <button
+    class="btn btn-default follow-button"
+    :class="{ pressed: isPressed }"
+    :disabled="inProgress"
+    :title="title"
+    @click="onClick"
+  >
+    {{ label }}
+  </button>
+</template>
+
+<script src="./follow_button.js"></script>
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index 015a5762..0107cfa6 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -1,9 +1,10 @@
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import RemoteFollow from '../remote_follow/remote_follow.vue'
 import ProgressButton from '../progress_button/progress_button.vue'
+import FollowButton from '../follow_button/follow_button.vue'
 import ModerationTools from '../moderation_tools/moderation_tools.vue'
+import AccountActions from '../account_actions/account_actions.vue'
 import { hex2rgb } from '../../services/color_convert/color_convert.js'
-import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
 export default {
@@ -98,36 +99,11 @@ export default {
     UserAvatar,
     RemoteFollow,
     ModerationTools,
-    ProgressButton
+    AccountActions,
+    ProgressButton,
+    FollowButton
   },
   methods: {
-    showRepeats () {
-      this.$store.dispatch('showReblogs', this.user.id)
-    },
-    hideRepeats () {
-      this.$store.dispatch('hideReblogs', this.user.id)
-    },
-    followUser () {
-      const store = this.$store
-      this.followRequestInProgress = true
-      requestFollow(this.user, store).then(() => {
-        this.followRequestInProgress = false
-      })
-    },
-    unfollowUser () {
-      const store = this.$store
-      this.followRequestInProgress = true
-      requestUnfollow(this.user, store).then(() => {
-        this.followRequestInProgress = false
-        store.commit('removeStatus', { timeline: 'friends', userId: this.user.id })
-      })
-    },
-    blockUser () {
-      this.$store.dispatch('blockUser', this.user.id)
-    },
-    unblockUser () {
-      this.$store.dispatch('unblockUser', this.user.id)
-    },
     muteUser () {
       this.$store.dispatch('muteUser', this.user.id)
     },
@@ -160,9 +136,6 @@ export default {
         this.$store.state.instance.restrictedNicknames
       )
     },
-    reportUser () {
-      this.$store.dispatch('openUserReportingModal', this.user.id)
-    },
     zoomAvatar () {
       const attachment = {
         url: this.user.profile_image_url_original,
@@ -170,9 +143,6 @@ export default {
       }
       this.$store.dispatch('setMedia', [attachment])
       this.$store.dispatch('setCurrent', attachment)
-    },
-    mentionUser () {
-      this.$store.dispatch('openPostStatusModal', { replyTo: true, repliedUser: this.user })
     }
   }
 }
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index f465467c..119079b2 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -59,6 +59,10 @@
                   :title="$t('tool_tip.user_settings')"
                 />
               </router-link>
+              <AccountActions
+                v-if="loggedIn && isOtherUser"
+                :user="user"
+              />
               <a
                 v-if="isOtherUser && !user.is_local"
                 :href="user.statusnet_profile_url"
@@ -135,88 +139,27 @@
           v-if="loggedIn && isOtherUser"
           class="user-interactions"
         >
-          <div v-if="!user.following">
-            <button
-              class="btn btn-default btn-block"
-              :disabled="followRequestInProgress"
-              :title="user.requested ? $t('user_card.follow_again') : ''"
-              @click="followUser"
-            >
-              <template v-if="followRequestInProgress">
-                {{ $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>
-          </div>
-          <div v-else-if="followRequestInProgress">
-            <button
-              class="btn btn-default btn-block pressed"
-              disabled
-              :title="$t('user_card.follow_unfollow')"
-              @click="unfollowUser"
-            >
-              {{ $t('user_card.follow_progress') }}
-            </button>
-          </div>
-          <div
-            v-else
-            class="btn-group"
-          >
-            <button
-              class="btn btn-default pressed"
-              :title="$t('user_card.follow_unfollow')"
-              @click="unfollowUser"
-            >
-              {{ $t('user_card.following') }}
-            </button>
-            <ProgressButton
-              v-if="!user.subscribed"
-              class="btn btn-default"
-              :click="subscribeUser"
-              :title="$t('user_card.subscribe')"
-            >
-              <i class="icon-bell-alt" />
-            </ProgressButton>
-            <ProgressButton
-              v-else
-              class="btn btn-default pressed"
-              :click="unsubscribeUser"
-              :title="$t('user_card.unsubscribe')"
-            >
-              <i class="icon-bell-ringing-o" />
-            </ProgressButton>
-            <button
-              v-if="user.showing_reblogs"
-              class="btn btn-default"
-              :title="$t('user_card.hide_repeats')"
-              @click="hideRepeats"
-            >
-              <i class="icon-eye" />
-            </button>
-            <button
-              v-if="!user.showing_reblogs"
-              class="btn btn-default pressed"
-              :title="$t('user_card.show_repeats')"
-              @click="showRepeats"
-            >
-              <i class="icon-eye-off" />
-            </button>
-          </div>
-
-          <div>
-            <button
-              class="btn btn-default btn-block"
-              @click="mentionUser"
-            >
-              {{ $t('user_card.mention') }}
-            </button>
+          <div class="btn-group">
+            <FollowButton :user="user" />
+            <template v-if="user.following">
+              <ProgressButton
+                v-if="!user.subscribed"
+                class="btn btn-default"
+                :click="subscribeUser"
+                :title="$t('user_card.subscribe')"
+              >
+                <i class="icon-bell-alt" />
+              </ProgressButton>
+              <ProgressButton
+                v-else
+                class="btn btn-default pressed"
+                :click="unsubscribeUser"
+                :title="$t('user_card.unsubscribe')"
+              >
+                <i class="icon-bell-ringing-o" />
+              </ProgressButton>
+            </template>
           </div>
-
           <div>
             <button
               v-if="user.muted"
@@ -233,33 +176,6 @@
               {{ $t('user_card.mute') }}
             </button>
           </div>
-
-          <div>
-            <button
-              v-if="user.statusnet_blocking"
-              class="btn btn-default btn-block pressed"
-              @click="unblockUser"
-            >
-              {{ $t('user_card.blocked') }}
-            </button>
-            <button
-              v-else
-              class="btn btn-default btn-block"
-              @click="blockUser"
-            >
-              {{ $t('user_card.block') }}
-            </button>
-          </div>
-
-          <div>
-            <button
-              class="btn btn-default btn-block"
-              @click="reportUser"
-            >
-              {{ $t('user_card.report') }}
-            </button>
-          </div>
-
           <ModerationTools
             v-if="loggedIn.role === &quot;admin&quot;"
             :user="user"
@@ -603,11 +519,9 @@
     position: relative;
     display: flex;
     flex-flow: row wrap;
-    justify-content: space-between;
     margin-right: -.75em;
 
     > * {
-      flex: 1 0 0;
       margin: 0 .75em .6em 0;
       white-space: nowrap;
     }
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 80e94a50..61cd4f16 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -219,13 +219,16 @@ const authHeaders = (accessToken) => {
   }
 }
 
-const followUser = ({ id, reblogs, credentials }) => {
+const followUser = ({ id, credentials, ...options }) => {
   let url = MASTODON_FOLLOW_URL(id)
-  const form = new FormData()
-  if (reblogs !== undefined) { form.append('reblogs', reblogs) }
+  const form = {}
+  if (options.reblogs !== undefined) { form['reblogs'] = options.reblogs }
   return fetch(url, {
-    body: form,
-    headers: authHeaders(credentials),
+    body: JSON.stringify(form),
+    headers: {
+      ...authHeaders(credentials),
+      'Content-Type': 'application/json'
+    },
     method: 'POST'
   }).then((data) => data.json())
 }
-- 
cgit v1.2.3-70-g09d2


From 78e8a49f40f71d557d4b7c7bf31cb74fb7a3b6d8 Mon Sep 17 00:00:00 2001
From: Maksim Pechnikov <parallel588@gmail.com>
Date: Tue, 8 Oct 2019 17:07:01 +0300
Subject: fix follow request on search page

---
 src/components/follow_card/follow_card.js  | 6 ++----
 src/components/follow_card/follow_card.vue | 4 ++--
 2 files changed, 4 insertions(+), 6 deletions(-)

(limited to 'src')

diff --git a/src/components/follow_card/follow_card.js b/src/components/follow_card/follow_card.js
index dc4a0d41..118d0c7c 100644
--- a/src/components/follow_card/follow_card.js
+++ b/src/components/follow_card/follow_card.js
@@ -9,8 +9,7 @@ const FollowCard = {
   ],
   data () {
     return {
-      inProgress: false,
-      requestSent: false
+      inProgress: false
     }
   },
   components: {
@@ -28,9 +27,8 @@ const FollowCard = {
   methods: {
     followUser () {
       this.inProgress = true
-      requestFollow(this.user, this.$store).then(({ sent }) => {
+      requestFollow(this.user, this.$store).then(() => {
         this.inProgress = false
-        this.requestSent = sent
       })
     },
     unfollowUser () {
diff --git a/src/components/follow_card/follow_card.vue b/src/components/follow_card/follow_card.vue
index 310fe843..a9d237bb 100644
--- a/src/components/follow_card/follow_card.vue
+++ b/src/components/follow_card/follow_card.vue
@@ -20,13 +20,13 @@
           v-if="!user.following"
           class="btn btn-default follow-card-follow-button"
           :disabled="inProgress"
-          :title="requestSent ? $t('user_card.follow_again') : ''"
+          :title="user.requested ? $t('user_card.follow_again') : ''"
           @click="followUser"
         >
           <template v-if="inProgress">
             {{ $t('user_card.follow_progress') }}
           </template>
-          <template v-else-if="requestSent">
+          <template v-else-if="user.requested">
             {{ $t('user_card.follow_sent') }}
           </template>
           <template v-else>
-- 
cgit v1.2.3-70-g09d2


From 7fede8572d9b67060ed5b12b5f6df257233da8bd Mon Sep 17 00:00:00 2001
From: Maksim Pechnikov <parallel588@gmail.com>
Date: Tue, 8 Oct 2019 16:55:36 +0300
Subject: change icon

---
 src/components/account_actions/account_actions.vue | 2 +-
 src/components/follow_button/follow_button.js      | 6 +-----
 2 files changed, 2 insertions(+), 6 deletions(-)

(limited to 'src')

diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index 5786a502..e62ec359 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -64,7 +64,7 @@
         </div>
       </div>
       <div class="btn btn-default ellipsis-button">
-        <i class="icon-link-ext trigger-button" />
+        <i class="icon-menu trigger-button" />
       </div>
     </v-popover>
   </div>
diff --git a/src/components/follow_button/follow_button.js b/src/components/follow_button/follow_button.js
index 708d15a2..4123c9fd 100644
--- a/src/components/follow_button/follow_button.js
+++ b/src/components/follow_button/follow_button.js
@@ -33,11 +33,7 @@ export default {
   },
   methods: {
     onClick () {
-      if (this.user.following) {
-        this.unfollow()
-      } else {
-        this.follow()
-      }
+      this.user.following ? this.unfollow() : this.follow()
     },
     follow () {
       this.inProgress = true
-- 
cgit v1.2.3-70-g09d2


From a65b32823923e43b6900357e3f0804d7c3e89b85 Mon Sep 17 00:00:00 2001
From: Maksim Pechnikov <parallel588@gmail.com>
Date: Wed, 9 Oct 2019 08:30:48 +0300
Subject: remove unused code

---
 src/components/account_actions/account_actions.js  | 8 --------
 src/components/account_actions/account_actions.vue | 2 +-
 2 files changed, 1 insertion(+), 9 deletions(-)

(limited to 'src')

diff --git a/src/components/account_actions/account_actions.js b/src/components/account_actions/account_actions.js
index 453e1f46..a3ecd025 100644
--- a/src/components/account_actions/account_actions.js
+++ b/src/components/account_actions/account_actions.js
@@ -12,14 +12,6 @@ const AccountActions = {
   components: {
     ProgressButton
   },
-  computed: {
-    tagsSet () {
-      return new Set(this.user.tags)
-    },
-    hasTagPolicy () {
-      return this.$store.state.instance.tagPolicyAvailable
-    }
-  },
   methods: {
     showRepeats () {
       this.$store.dispatch('showReblogs', this.user.id)
diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index e62ec359..c7641b8a 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -64,7 +64,7 @@
         </div>
       </div>
       <div class="btn btn-default ellipsis-button">
-        <i class="icon-menu trigger-button" />
+        <i class="icon-ellipsis trigger-button" />
       </div>
     </v-popover>
   </div>
-- 
cgit v1.2.3-70-g09d2


From e3f6001b3ee197caa4723e0b877b73eddf823bda Mon Sep 17 00:00:00 2001
From: Maksim Pechnikov <parallel588@gmail.com>
Date: Wed, 9 Oct 2019 09:04:18 +0300
Subject: update css

---
 src/components/account_actions/account_actions.vue | 10 +++++++++-
 src/components/user_card/user_card.vue             |  1 +
 2 files changed, 10 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index c7641b8a..f99707cc 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -46,7 +46,7 @@
             class="btn btn-default btn-block dropdown-item"
             @click="unblockUser"
           >
-            {{ $t('user_card.blocked') }}
+            {{ $t('user_card.unblock') }}
           </button>
           <button
             v-else
@@ -75,6 +75,9 @@
 <style lang="scss">
 @import '../../_variables.scss';
 @import '../popper/popper.scss';
+.account-actions {
+  margin: 0 .8em;
+}
 
 .account-actions button.dropdown-item {
   margin-left: 0;
@@ -83,6 +86,11 @@
   color: $fallback--lightText;
   color: var(--lightText, $fallback--lightText);
   opacity: .8;
+  cursor: pointer;
+  &:hover {
+    color: $fallback--text;
+    color: var(--text, $fallback--text);
+  }
 }
 
 </style>
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 119079b2..aa071a73 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -524,6 +524,7 @@
     > * {
       margin: 0 .75em .6em 0;
       white-space: nowrap;
+      min-width: 95px;
     }
 
     button {
-- 
cgit v1.2.3-70-g09d2


From 69fb015e9fdbc850f842d4aa5f3ace5df8f83303 Mon Sep 17 00:00:00 2001
From: Maksim Pechnikov <parallel588@gmail.com>
Date: Wed, 9 Oct 2019 16:20:51 +0300
Subject: removed unused code

---
 src/components/account_actions/account_actions.js  | 4 +---
 src/components/account_actions/account_actions.vue | 2 --
 2 files changed, 1 insertion(+), 5 deletions(-)

(limited to 'src')

diff --git a/src/components/account_actions/account_actions.js b/src/components/account_actions/account_actions.js
index a3ecd025..204d506a 100644
--- a/src/components/account_actions/account_actions.js
+++ b/src/components/account_actions/account_actions.js
@@ -5,9 +5,7 @@ const AccountActions = {
     'user'
   ],
   data () {
-    return {
-      showDropDown: false
-    }
+    return { }
   },
   components: {
     ProgressButton
diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index f99707cc..5633d01e 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -6,8 +6,6 @@
       :container="false"
       placement="bottom-end"
       :offset="5"
-      @show="showDropDown = true"
-      @hide="showDropDown = false"
     >
       <div slot="popover">
         <div class="dropdown-menu">
-- 
cgit v1.2.3-70-g09d2


From b497882e0e15a0118a6e12ffaa84330942ee28f2 Mon Sep 17 00:00:00 2001
From: Maksim Pechnikov <parallel588@gmail.com>
Date: Fri, 11 Oct 2019 14:07:34 +0300
Subject: fix position account actions

---
 src/components/account_actions/account_actions.vue |  3 ++
 src/components/user_card/user_card.vue             | 40 ++++++++++++++++------
 2 files changed, 32 insertions(+), 11 deletions(-)

(limited to 'src')

diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index 5633d01e..818e75bc 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -91,4 +91,7 @@
   }
 }
 
+.account-actions .open {
+  min-width: 130px;
+}
 </style>
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index aa071a73..199404fd 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -59,17 +59,22 @@
                   :title="$t('tool_tip.user_settings')"
                 />
               </router-link>
-              <AccountActions
-                v-if="loggedIn && isOtherUser"
-                :user="user"
-              />
-              <a
-                v-if="isOtherUser && !user.is_local"
-                :href="user.statusnet_profile_url"
-                target="_blank"
+              <div
+                v-if="isOtherUser"
+                class="card-actions"
               >
-                <i class="icon-link-ext usersettings" />
-              </a>
+                <AccountActions
+                  v-if="loggedIn"
+                  :user="user"
+                />
+                <a
+                  v-if="!user.is_local"
+                  :href="user.statusnet_profile_url"
+                  target="_blank"
+                >
+                  <i class="icon-link-ext usersettings" />
+                </a>
+              </div>
             </div>
 
             <div class="bottom-line">
@@ -273,7 +278,7 @@
     mask: linear-gradient(to top, white, transparent) bottom no-repeat,
           linear-gradient(to top, white, white);
     // Autoprefixed seem to ignore this one, and also syntax is different
-    -webkit-mask-composite: xor;
+                                                 -webkit-mask-composite: xor;
     mask-composite: exclude;
     background-size: cover;
     mask-size: 100% 60%;
@@ -410,6 +415,19 @@
 
     .top-line {
       display: flex;
+      .card-actions {
+        position: relative;
+        display: flex;
+        width: 60px;
+        .account-actions {
+          position: absolute;
+          left: 0;
+        }
+        a {
+          position: absolute;
+          right: 0;
+        }
+      }
     }
   }
 
-- 
cgit v1.2.3-70-g09d2


From b8d8d02384e03ce8d5d38220527f798a9c0f3b30 Mon Sep 17 00:00:00 2001
From: Maksim Pechnikov <parallel588@gmail.com>
Date: Fri, 11 Oct 2019 16:41:59 +0300
Subject: revert lint autofix

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

(limited to 'src')

diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 199404fd..743fd667 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -278,7 +278,7 @@
     mask: linear-gradient(to top, white, transparent) bottom no-repeat,
           linear-gradient(to top, white, white);
     // Autoprefixed seem to ignore this one, and also syntax is different
-                                                 -webkit-mask-composite: xor;
+    -webkit-mask-composite: xor;
     mask-composite: exclude;
     background-size: cover;
     mask-size: 100% 60%;
-- 
cgit v1.2.3-70-g09d2


From d53e7e3125572075fc3f512fa0343a6ed98e5c12 Mon Sep 17 00:00:00 2001
From: Maksim Pechnikov <parallel588@gmail.com>
Date: Fri, 11 Oct 2019 16:52:26 +0300
Subject: fix orders of a buttons

---
 src/components/account_actions/account_actions.vue |  4 ---
 src/components/user_card/user_card.vue             | 39 ++++++----------------
 2 files changed, 10 insertions(+), 33 deletions(-)

(limited to 'src')

diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index 818e75bc..046cba93 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -90,8 +90,4 @@
     color: var(--text, $fallback--text);
   }
 }
-
-.account-actions .open {
-  min-width: 130px;
-}
 </style>
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 743fd667..f5cba09a 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -59,24 +59,18 @@
                   :title="$t('tool_tip.user_settings')"
                 />
               </router-link>
-              <div
-                v-if="isOtherUser"
-                class="card-actions"
+              <a
+                v-if="isOtherUser && !user.is_local"
+                :href="user.statusnet_profile_url"
+                target="_blank"
               >
-                <AccountActions
-                  v-if="loggedIn"
-                  :user="user"
-                />
-                <a
-                  v-if="!user.is_local"
-                  :href="user.statusnet_profile_url"
-                  target="_blank"
-                >
-                  <i class="icon-link-ext usersettings" />
-                </a>
-              </div>
+                <i class="icon-link-ext usersettings" />
+              </a>
+              <AccountActions
+                v-if="isOtherUser && loggedIn"
+                :user="user"
+              />
             </div>
-
             <div class="bottom-line">
               <router-link
                 class="user-screen-name"
@@ -415,19 +409,6 @@
 
     .top-line {
       display: flex;
-      .card-actions {
-        position: relative;
-        display: flex;
-        width: 60px;
-        .account-actions {
-          position: absolute;
-          left: 0;
-        }
-        a {
-          position: absolute;
-          right: 0;
-        }
-      }
     }
   }
 
-- 
cgit v1.2.3-70-g09d2


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: 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(-)

(limited to 'src')

diff --git a/src/boot/routes.js b/src/boot/routes.js
index cd02711c..5670236c 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 10f52fe2..0b574a04 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 fa71e07a..62e74e30 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 00474e95..713c9dce 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 b58112e3..d11b2d14 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."
   }
 }
-- 
cgit v1.2.3-70-g09d2


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: updated FollowCard component

---
 src/components/follow_button/follow_button.js  |  4 +--
 src/components/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(-)

(limited to 'src')

diff --git a/src/components/follow_button/follow_button.js b/src/components/follow_button/follow_button.js
index 4123c9fd..12da2645 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 f0cbb94b..66d899b9 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 118d0c7c..2c3231a9 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 a9d237bb..a43cac4e 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>
-- 
cgit v1.2.3-70-g09d2


From 1287836eeea0fc10935476865dba850b8a91fb13 Mon Sep 17 00:00:00 2001
From: eal <eal@waifu.club>
Date: Thu, 17 Oct 2019 16:44:22 +0300
Subject: 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(+)

(limited to 'src')

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 93f37a49..912f77d2 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;
   }
 }
-- 
cgit v1.2.3-70-g09d2


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: 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(-)

(limited to 'src')

diff --git a/src/components/follow_button/follow_button.vue b/src/components/follow_button/follow_button.vue
index 66d899b9..f0cbb94b 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 2c3231a9..aefd609e 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 a43cac4e..81e6e6dc 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>
-- 
cgit v1.2.3-70-g09d2


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')

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 8db1fa506c95bf7bed1cf2fd186bb065797912cd Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 17 Oct 2019 16:00:19 -0400
Subject: lock body scroll when user reporting modal is open

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

(limited to 'src')

diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue
index c79a3707..ecbc1369 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;
-- 
cgit v1.2.3-70-g09d2


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: handle multiple body scroll lockers

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

(limited to 'src')

diff --git a/src/directives/body_scroll_lock.js b/src/directives/body_scroll_lock.js
index 6ab20c3f..a375e852 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 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`
+    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')
     }
-    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 (previousAppBgWrapperRight !== undefined) {
-      document.getElementById('app_bg_wrapper').style.right = previousAppBgWrapperRight
-      // Restore previousAppBgWrapperRight to undefined so disableBodyScroll knows it can be set again.
-      previousAppBgWrapperRight = 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')
     }
-    document.body.classList.remove('scroll-locked')
   })
   bodyScrollLock.enableBodyScroll(el)
 }
-- 
cgit v1.2.3-70-g09d2


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')

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 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')

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 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')

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')

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')

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 d502baaffc30d97a9c4f8f254bf1ff146844151b Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Fri, 18 Oct 2019 07:28:59 -0400
Subject: remove needless console.log

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

(limited to 'src')

diff --git a/src/components/user_reporting_modal/user_reporting_modal.js b/src/components/user_reporting_modal/user_reporting_modal.js
index 3fb96384..833fa98a 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 () {
-- 
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')

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')

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')

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 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')

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 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')

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')

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 b3699a7c7cbeba3b6b777e3c414b44c21464a863 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Fri, 18 Oct 2019 12:39:54 -0400
Subject: fix eslint errors

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

(limited to 'src')

diff --git a/src/components/modal/modal.js b/src/components/modal/modal.js
index b9517445..02d7017a 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
-- 
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')

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')

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 c23a87d8ff7dfed662b5288d6fb77da1a7b3ebbc Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Mon, 21 Oct 2019 15:56:16 -0400
Subject: update condition

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

(limited to 'src')

diff --git a/src/directives/body_scroll_lock.js b/src/directives/body_scroll_lock.js
index a375e852..d7f114b5 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.
-- 
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')

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')

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


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: refactor using Set

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

(limited to 'src')

diff --git a/src/directives/body_scroll_lock.js b/src/directives/body_scroll_lock.js
index d7f114b5..13a6de1c 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.
-- 
cgit v1.2.3-70-g09d2


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: 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(-)

(limited to 'src')

diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js
index 7f33a81b..3610f53d 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 6169d294..3877987a 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 {
-- 
cgit v1.2.3-70-g09d2


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: 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(-)

(limited to 'src')

diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index e93921fe..0880bd7f 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 af16e302..0748b2f0 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 3610f53d..e8cbb526 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 3877987a..803ec471 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 02e98f19..9c2d446b 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
-- 
cgit v1.2.3-70-g09d2


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: update flex-grow calculation logic

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

(limited to 'src')

diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js
index e8cbb526..4037da98 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 803ec471..7abc2161 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>
-- 
cgit v1.2.3-70-g09d2


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: set flex amount correctly

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

(limited to 'src')

diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js
index 4037da98..9281d41b 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]
-- 
cgit v1.2.3-70-g09d2


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: set flex-shrink and flex-basis explicitly

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

(limited to 'src')

diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js
index 9281d41b..bd0de608 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]
-- 
cgit v1.2.3-70-g09d2


From 5faafdb428410800b7db9127adf7342894851407 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Mon, 1 Jul 2019 13:46:09 -0400
Subject: use popper for status preview

---
 src/components/status/status.js  |   7 +-
 src/components/status/status.vue | 169 +++++++++++++++++++--------------------
 2 files changed, 85 insertions(+), 91 deletions(-)

(limited to 'src')

diff --git a/src/components/status/status.js b/src/components/status/status.js
index d17ba318..ae3aacbd 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -1,3 +1,4 @@
+import Popper from 'vue-popperjs/src/component/popper.js.vue'
 import Attachment from '../attachment/attachment.vue'
 import FavoriteButton from '../favorite_button/favorite_button.vue'
 import RetweetButton from '../retweet_button/retweet_button.vue'
@@ -38,7 +39,6 @@ const Status = {
       unmuted: false,
       userExpanded: false,
       preview: null,
-      showPreview: false,
       showingTall: this.inConversation && this.focused,
       showingLongSubject: false,
       error: null,
@@ -290,6 +290,7 @@ const Status = {
     }
   },
   components: {
+    Popper,
     Attachment,
     FavoriteButton,
     RetweetButton,
@@ -377,7 +378,6 @@ const Status = {
       }
     },
     replyEnter (id, event) {
-      this.showPreview = true
       const targetId = id
       const statuses = this.$store.state.statuses.allStatuses
 
@@ -394,9 +394,6 @@ const Status = {
         this.preview = find(statuses, { 'id': targetId })
       }
     },
-    replyLeave () {
-      this.showPreview = false
-    },
     generateUserProfileLink (id, name) {
       return generateProfileLink(id, name, this.$store.state.instance.restrictedNicknames)
     },
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 912f77d2..d03fe143 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -170,24 +170,30 @@
             </div>
 
             <div class="heading-reply-row">
-              <div
-                v-if="isReply"
-                class="reply-to-and-accountname"
-              >
-                <a
-                  class="reply-to"
-                  href="#"
-                  :aria-label="$t('tool_tip.reply')"
-                  @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
-                  @mouseenter.prevent.stop="replyEnter(status.in_reply_to_status_id, $event)"
-                  @mouseleave.prevent.stop="replyLeave()"
-                >
-                  <i
-                    v-if="!isPreview"
-                    class="button-icon icon-reply"
-                  />
-                  <span class="faint-link reply-to-text">{{ $t('status.reply_to') }}</span>
-                </a>
+              <div v-if="isReply" class="reply-to-and-accountname">
+                <Popper ref="foo" :options="{ placement: 'bottom-start' }" @show="replyEnter(status.in_reply_to_status_id)">
+                  <div class="popper-wrapper status-preview">
+                    <status
+                      v-if="preview"
+                      :isPreview="true"
+                      :statusoid="preview"
+                      :compact="true"
+                    />
+                    <div v-else class="status-preview-loading">
+                      <i class="icon-spin4 animate-spin"></i>
+                    </div>
+                  </div>
+
+                  <a
+                    slot="reference"
+                    class="reply-to"
+                    href="#" @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
+                    :aria-label="$t('tool_tip.reply')"
+                  >
+                    <i class="button-icon icon-reply" v-if="!isPreview"></i>
+                    <span class="faint-link reply-to-text">{{$t('status.reply_to')}}</span>
+                  </a>
+                </Popper>
                 <router-link :to="replyProfileLink">
                   {{ replyToName }}
                 </router-link>
@@ -224,25 +230,6 @@
             </div>
           </div>
 
-          <div
-            v-if="showPreview"
-            class="status-preview-container"
-          >
-            <status
-              v-if="preview"
-              class="status-preview"
-              :is-preview="true"
-              :statusoid="preview"
-              :compact="true"
-            />
-            <div
-              v-else
-              class="status-preview status-preview-loading"
-            >
-              <i class="icon-spin4 animate-spin" />
-            </div>
-          </div>
-
           <div
             v-if="longSubject"
             class="status-content-wrapper"
@@ -439,18 +426,6 @@ $status-margin: 0.75em;
   min-width: 0;
 }
 
-.status-preview.status-el {
-  border-style: solid;
-  border-width: 1px;
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
-}
-
-.status-preview-container {
-  position: relative;
-  max-width: 100%;
-}
-
 .status-pin {
   padding: $status-margin $status-margin 0;
   display: flex;
@@ -458,43 +433,6 @@ $status-margin: 0.75em;
   justify-content: flex-end;
 }
 
-.status-preview {
-  position: absolute;
-  max-width: 95%;
-  display: flex;
-  background-color: $fallback--bg;
-  background-color: var(--bg, $fallback--bg);
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
-  border-style: solid;
-  border-width: 1px;
-  border-radius: $fallback--tooltipRadius;
-  border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
-  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
-  box-shadow: var(--popupShadow);
-  margin-top: 0.25em;
-  margin-left: 0.5em;
-  z-index: 50;
-
-  .status {
-    flex: 1;
-    border: 0;
-    min-width: 15em;
-  }
-}
-
-.status-preview-loading {
-  display: block;
-  min-width: 15em;
-  padding: 1em;
-  text-align: center;
-  border-width: 1px;
-  border-style: solid;
-
-  i {
-    font-size: 2em;
-  }
-}
 
 .media-left {
   margin-right: $status-margin;
@@ -600,6 +538,7 @@ $status-margin: 0.75em;
     }
 
     .heading-reply-row {
+      position: relative;
       align-content: baseline;
       font-size: 12px;
       line-height: 18px;
@@ -898,6 +837,64 @@ a.unmute {
   }
 }
 
+.popper-wrapper.status-preview {
+  font-size: 14px;
+  background-color: $fallback--bg;
+  background-color: var(--bg, $fallback--bg);
+  border-color: $fallback--border;
+  border-color: var(--border, $fallback--border);
+  border-style: solid;
+  border-width: 1px;
+  border-radius: $fallback--tooltipRadius;
+  border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
+  box-shadow: var(--popupShadow);
+  min-width: 15em;
+  max-width: 95%;
+  margin-left: 0.5em;
+
+  > .status-el.status-el {
+    border: none;
+  }
+
+  > .status-preview-loading {
+    padding: 1em;
+    text-align: center;
+
+    i {
+      font-size: 2em;
+    }
+  }
+
+  &[x-placement^="bottom"] .popper__arrow {
+    &:before {
+      position: absolute;
+      content: '';
+      top: -2px;
+      left: -7px;
+      border-width: 0 7px 7px 7px;
+      border-color: transparent transparent $fallback--border transparent;
+      border-color: transparent transparent var(--border, $fallback--border) transparent;
+      border-style: solid;
+      z-index: -1;
+    }
+  }
+
+  &[x-placement^="top"] .popper__arrow {
+    &:before {
+      position: absolute;
+      content: '';
+      bottom: -2px;
+      left: -7px;
+      border-width: 7px 7px 0 7px;
+      border-color: $fallback--border transparent transparent transparent;
+      border-color: var(--border, $fallback--border)  transparent transparent transparent;
+      border-style: solid;
+      z-index: -1;
+    }
+  }
+}
+
 .favs-repeated-users {
   margin-top: $status-margin;
 
-- 
cgit v1.2.3-70-g09d2


From 565d53812b394ed829bcd2e70e48efcc612e5d59 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Mon, 1 Jul 2019 13:47:55 -0400
Subject: reposition popper after fetching status

---
 src/components/status/status.js | 1 +
 1 file changed, 1 insertion(+)

(limited to 'src')

diff --git a/src/components/status/status.js b/src/components/status/status.js
index ae3aacbd..641702be 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -388,6 +388,7 @@ const Status = {
         if (!this.preview) {
           this.$store.state.api.backendInteractor.fetchStatus({ id }).then((status) => {
             this.preview = status
+            this.$nextTick(this.$refs.foo.updatePopper)
           })
         }
       } else if (this.preview.id !== targetId) {
-- 
cgit v1.2.3-70-g09d2


From a26ec64b3bcc4e4a50dd984b39ab1d8ddde05b30 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Mon, 1 Jul 2019 14:00:02 -0400
Subject: fix minor css issues in status preview

---
 src/components/status/status.vue | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

(limited to 'src')

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index d03fe143..cb4abb9a 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -491,11 +491,6 @@ $status-margin: 0.75em;
     flex-basis: 100%;
     margin-bottom: 0.5em;
 
-    a {
-      display: inline-block;
-      word-break: break-all;
-    }
-
     small {
       font-weight: lighter;
     }
@@ -506,6 +501,11 @@ $status-margin: 0.75em;
       justify-content: space-between;
       line-height: 18px;
 
+      a {
+        display: inline-block;
+        word-break: break-all;
+      }
+
       .name-and-account-name {
         display: flex;
         min-width: 0;
@@ -547,11 +547,13 @@ $status-margin: 0.75em;
       flex-wrap: wrap;
       align-items: stretch;
 
-      a {
+      > .reply-to-and-accountname > a {
         max-width: 100%;
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;
+        display: inline-block;
+        word-break: break-all;
       }
     }
 
-- 
cgit v1.2.3-70-g09d2


From 5d6fcb3bb3b901f678c26732037c142bf0145c51 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Mon, 1 Jul 2019 14:00:19 -0400
Subject: css cleanup

---
 src/components/status/status.vue | 42 +++++++++++++++++-----------------------
 1 file changed, 18 insertions(+), 24 deletions(-)

(limited to 'src')

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index cb4abb9a..e0515b33 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -868,32 +868,26 @@ a.unmute {
     }
   }
 
-  &[x-placement^="bottom"] .popper__arrow {
-    &:before {
-      position: absolute;
-      content: '';
-      top: -2px;
-      left: -7px;
-      border-width: 0 7px 7px 7px;
-      border-color: transparent transparent $fallback--border transparent;
-      border-color: transparent transparent var(--border, $fallback--border) transparent;
-      border-style: solid;
-      z-index: -1;
-    }
+  .popper__arrow::before {
+    position: absolute;
+    content: '';
+    left: -7px;
+    border: solid 7px transparent;
+    z-index: -1;
   }
 
-  &[x-placement^="top"] .popper__arrow {
-    &:before {
-      position: absolute;
-      content: '';
-      bottom: -2px;
-      left: -7px;
-      border-width: 7px 7px 0 7px;
-      border-color: $fallback--border transparent transparent transparent;
-      border-color: var(--border, $fallback--border)  transparent transparent transparent;
-      border-style: solid;
-      z-index: -1;
-    }
+  &[x-placement^="bottom"] .popper__arrow::before {
+    top: -2px;
+    border-top-width: 0;
+    border-bottom-color: $fallback--border;
+    border-bottom-color: var(--border, $fallback--border);
+  }
+
+  &[x-placement^="top"] .popper__arrow::before {
+    bottom: -2px;
+    border-bottom-width: 0;
+    border-top-color: $fallback--border;
+    border-top-color: var(--border, $fallback--border);
   }
 }
 
-- 
cgit v1.2.3-70-g09d2


From 498d7bcb5e029650c964ea241ffa3dc44ff6a79e Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Mon, 1 Jul 2019 14:03:07 -0400
Subject: use better name

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

(limited to 'src')

diff --git a/src/components/status/status.js b/src/components/status/status.js
index 641702be..d24feccf 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -388,7 +388,7 @@ const Status = {
         if (!this.preview) {
           this.$store.state.api.backendInteractor.fetchStatus({ id }).then((status) => {
             this.preview = status
-            this.$nextTick(this.$refs.foo.updatePopper)
+            this.$nextTick(this.$refs.statusPreviewPopper.updatePopper)
           })
         }
       } else if (this.preview.id !== targetId) {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index e0515b33..d59e661c 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -171,7 +171,7 @@
 
             <div class="heading-reply-row">
               <div v-if="isReply" class="reply-to-and-accountname">
-                <Popper ref="foo" :options="{ placement: 'bottom-start' }" @show="replyEnter(status.in_reply_to_status_id)">
+                <Popper ref="statusPreviewPopper" :options="{ placement: 'bottom-start' }" @show="replyEnter(status.in_reply_to_status_id)">
                   <div class="popper-wrapper status-preview">
                     <status
                       v-if="preview"
-- 
cgit v1.2.3-70-g09d2


From 72fe385ec4c6893c279a00ee1911f03d20e4c1f8 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Mon, 1 Jul 2019 14:38:43 -0400
Subject: hide status preview popper when hover popper content

---
 src/components/status/status.vue | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

(limited to 'src')

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index d59e661c..66082aa4 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -173,14 +173,16 @@
               <div v-if="isReply" class="reply-to-and-accountname">
                 <Popper ref="statusPreviewPopper" :options="{ placement: 'bottom-start' }" @show="replyEnter(status.in_reply_to_status_id)">
                   <div class="popper-wrapper status-preview">
-                    <status
-                      v-if="preview"
-                      :isPreview="true"
-                      :statusoid="preview"
-                      :compact="true"
-                    />
-                    <div v-else class="status-preview-loading">
-                      <i class="icon-spin4 animate-spin"></i>
+                    <div class="popper-wrapper-inner" @mouseover.prevent.stop @focus.prevent.stop>
+                      <status
+                        v-if="preview"
+                        :isPreview="true"
+                        :statusoid="preview"
+                        :compact="true"
+                      />
+                      <div v-else class="status-preview-loading">
+                        <i class="icon-spin4 animate-spin"></i>
+                      </div>
                     </div>
                   </div>
 
@@ -855,11 +857,11 @@ a.unmute {
   max-width: 95%;
   margin-left: 0.5em;
 
-  > .status-el.status-el {
+  .status-el.status-el {
     border: none;
   }
 
-  > .status-preview-loading {
+  .status-preview-loading {
     padding: 1em;
     text-align: center;
 
-- 
cgit v1.2.3-70-g09d2


From 0f65280e203a5f41dba650760e0294e7215fc500 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Fri, 5 Jul 2019 11:38:48 -0400
Subject: use top placement by default

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

(limited to 'src')

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 66082aa4..79b359b7 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -171,7 +171,7 @@
 
             <div class="heading-reply-row">
               <div v-if="isReply" class="reply-to-and-accountname">
-                <Popper ref="statusPreviewPopper" :options="{ placement: 'bottom-start' }" @show="replyEnter(status.in_reply_to_status_id)">
+                <Popper ref="statusPreviewPopper" :options="{ placement: 'top-start' }" @show="replyEnter(status.in_reply_to_status_id)">
                   <div class="popper-wrapper status-preview">
                     <div class="popper-wrapper-inner" @mouseover.prevent.stop @focus.prevent.stop>
                       <status
-- 
cgit v1.2.3-70-g09d2


From 1504b272d2d4065c7ba9e940c09bdc853e728bc4 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Fri, 5 Jul 2019 12:08:16 -0400
Subject: reset font-size to normal text size using rem

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

(limited to 'src')

diff --git a/src/App.scss b/src/App.scss
index f20eb44c..2d10f1e7 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -39,10 +39,13 @@ h4 {
   text-align: center;
 }
 
+html {
+  font-size: 14px;
+}
+
 body {
   font-family: sans-serif;
   font-family: var(--interfaceFont, sans-serif);
-  font-size: 14px;
   margin: 0;
   color: $fallback--text;
   color: var(--text, $fallback--text);
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 79b359b7..cdafcfda 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -842,7 +842,7 @@ a.unmute {
 }
 
 .popper-wrapper.status-preview {
-  font-size: 14px;
+  font-size: 1rem;
   background-color: $fallback--bg;
   background-color: var(--bg, $fallback--bg);
   border-color: $fallback--border;
-- 
cgit v1.2.3-70-g09d2


From e834b9d88b8373d6647b6f9bab61a52885f9eb7a Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Sun, 7 Jul 2019 22:42:08 -0400
Subject: fix eslint warnings

---
 src/components/status/status.vue | 37 +++++++++++++++++++++++++++----------
 1 file changed, 27 insertions(+), 10 deletions(-)

(limited to 'src')

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index cdafcfda..daba7efc 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -170,18 +170,32 @@
             </div>
 
             <div class="heading-reply-row">
-              <div v-if="isReply" class="reply-to-and-accountname">
-                <Popper ref="statusPreviewPopper" :options="{ placement: 'top-start' }" @show="replyEnter(status.in_reply_to_status_id)">
+              <div
+                v-if="isReply"
+                class="reply-to-and-accountname"
+              >
+                <Popper
+                  ref="statusPreviewPopper"
+                  :options="{ placement: 'top-start' }"
+                  @show="replyEnter(status.in_reply_to_status_id)"
+                >
                   <div class="popper-wrapper status-preview">
-                    <div class="popper-wrapper-inner" @mouseover.prevent.stop @focus.prevent.stop>
+                    <div
+                      class="popper-wrapper-inner"
+                      @mouseover.prevent.stop
+                      @focus.prevent.stop
+                    >
                       <status
                         v-if="preview"
-                        :isPreview="true"
+                        :is-preview="true"
                         :statusoid="preview"
                         :compact="true"
                       />
-                      <div v-else class="status-preview-loading">
-                        <i class="icon-spin4 animate-spin"></i>
+                      <div
+                        v-else
+                        class="status-preview-loading"
+                      >
+                        <i class="icon-spin4 animate-spin" />
                       </div>
                     </div>
                   </div>
@@ -189,11 +203,15 @@
                   <a
                     slot="reference"
                     class="reply-to"
-                    href="#" @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
+                    href="#"
                     :aria-label="$t('tool_tip.reply')"
+                    @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
                   >
-                    <i class="button-icon icon-reply" v-if="!isPreview"></i>
-                    <span class="faint-link reply-to-text">{{$t('status.reply_to')}}</span>
+                    <i
+                      v-if="!isPreview"
+                      class="button-icon icon-reply"
+                    />
+                    <span class="faint-link reply-to-text">{{ $t('status.reply_to') }}</span>
                   </a>
                 </Popper>
                 <router-link :to="replyProfileLink">
@@ -435,7 +453,6 @@ $status-margin: 0.75em;
   justify-content: flex-end;
 }
 
-
 .media-left {
   margin-right: $status-margin;
 }
-- 
cgit v1.2.3-70-g09d2


From 2f7f6967fdb5e11cd866cb0d15a0d50bf4e00ed7 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Sun, 7 Jul 2019 22:47:32 -0400
Subject: fix popper go behind the top bar

---
 src/components/status/status.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index daba7efc..79fbe47d 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -176,7 +176,12 @@
               >
                 <Popper
                   ref="statusPreviewPopper"
-                  :options="{ placement: 'top-start' }"
+                  :options="{
+                    placement: 'top-start',
+                    modifiers: {
+                      preventOverflow: { padding: 50, boundariesElement: 'viewport' },
+                    }
+                  }"
                   @show="replyEnter(status.in_reply_to_status_id)"
                 >
                   <div class="popper-wrapper status-preview">
-- 
cgit v1.2.3-70-g09d2


From 85c897403a0460c4932c70f783c1725d32cff6ac Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 17 Jul 2019 12:50:49 -0400
Subject: migrate Popper to v-popover

---
 src/components/popper/popper.scss |   9 ++-
 src/components/status/status.js   |   2 -
 src/components/status/status.vue  | 116 +++++++++++++++++++-------------------
 3 files changed, 61 insertions(+), 66 deletions(-)

(limited to 'src')

diff --git a/src/components/popper/popper.scss b/src/components/popper/popper.scss
index 279b01be..06daa871 100644
--- a/src/components/popper/popper.scss
+++ b/src/components/popper/popper.scss
@@ -20,7 +20,6 @@
     margin: 5px;
     border-color: $fallback--bg;
     border-color: var(--bg, $fallback--bg);
-    z-index: 1;
   }
 
   &[x-placement^="top"] {
@@ -31,7 +30,7 @@
       border-left-color: transparent !important;
       border-right-color: transparent !important;
       border-bottom-color: transparent !important;
-      bottom: -5px;
+      bottom: -4px;
       left: calc(50% - 5px);
       margin-top: 0;
       margin-bottom: 0;
@@ -46,7 +45,7 @@
       border-left-color: transparent !important;
       border-right-color: transparent !important;
       border-top-color: transparent !important;
-      top: -5px;
+      top: -4px;
       left: calc(50% - 5px);
       margin-top: 0;
       margin-bottom: 0;
@@ -61,7 +60,7 @@
       border-left-color: transparent !important;
       border-top-color: transparent !important;
       border-bottom-color: transparent !important;
-      left: -5px;
+      left: -4px;
       top: calc(50% - 5px);
       margin-left: 0;
       margin-right: 0;
@@ -76,7 +75,7 @@
       border-top-color: transparent !important;
       border-right-color: transparent !important;
       border-bottom-color: transparent !important;
-      right: -5px;
+      right: -4px;
       top: calc(50% - 5px);
       margin-left: 0;
       margin-right: 0;
diff --git a/src/components/status/status.js b/src/components/status/status.js
index d24feccf..36455f2a 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -1,4 +1,3 @@
-import Popper from 'vue-popperjs/src/component/popper.js.vue'
 import Attachment from '../attachment/attachment.vue'
 import FavoriteButton from '../favorite_button/favorite_button.vue'
 import RetweetButton from '../retweet_button/retweet_button.vue'
@@ -290,7 +289,6 @@ const Status = {
     }
   },
   components: {
-    Popper,
     Attachment,
     FavoriteButton,
     RetweetButton,
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 79fbe47d..fd1705a0 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -174,51 +174,47 @@
                 v-if="isReply"
                 class="reply-to-and-accountname"
               >
-                <Popper
+                <v-popover
+                  v-if="!isPreview"
                   ref="statusPreviewPopper"
-                  :options="{
-                    placement: 'top-start',
-                    modifiers: {
-                      preventOverflow: { padding: 50, boundariesElement: 'viewport' },
-                    }
-                  }"
+                  popoverClass="status-popover"
+                  placement="top-start"
+                  trigger="hover"
+                  :offset="5"
+                  :container="false"
                   @show="replyEnter(status.in_reply_to_status_id)"
                 >
-                  <div class="popper-wrapper status-preview">
+                  <div slot="popover">
+                    <status
+                      v-if="preview"
+                      :is-preview="true"
+                      :statusoid="preview"
+                      :compact="true"
+                    />
                     <div
-                      class="popper-wrapper-inner"
-                      @mouseover.prevent.stop
-                      @focus.prevent.stop
+                      v-else
+                      class="status-preview-loading"
                     >
-                      <status
-                        v-if="preview"
-                        :is-preview="true"
-                        :statusoid="preview"
-                        :compact="true"
-                      />
-                      <div
-                        v-else
-                        class="status-preview-loading"
-                      >
-                        <i class="icon-spin4 animate-spin" />
-                      </div>
+                      <i class="icon-spin4 animate-spin" />
                     </div>
                   </div>
 
                   <a
-                    slot="reference"
                     class="reply-to"
                     href="#"
                     :aria-label="$t('tool_tip.reply')"
                     @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
                   >
-                    <i
-                      v-if="!isPreview"
-                      class="button-icon icon-reply"
-                    />
+                    <i class="button-icon icon-reply" />
                     <span class="faint-link reply-to-text">{{ $t('status.reply_to') }}</span>
                   </a>
-                </Popper>
+                </v-popover>
+                <span
+                  v-else
+                  class="reply-to"
+                >
+                  <span class="reply-to-text">{{ $t('status.reply_to') }}</span>
+                </span>
                 <router-link :to="replyProfileLink">
                   {{ replyToName }}
                 </router-link>
@@ -604,6 +600,8 @@ $status-margin: 0.75em;
       overflow: hidden;
       text-overflow: ellipsis;
       margin: 0 0.4em 0 0.2em;
+      color: $fallback--faint;
+      color: var(--faint, $fallback--faint);
     }
 
     .replies-separator {
@@ -863,36 +861,23 @@ a.unmute {
   }
 }
 
-.popper-wrapper.status-preview {
-  font-size: 1rem;
-  background-color: $fallback--bg;
-  background-color: var(--bg, $fallback--bg);
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
-  border-style: solid;
-  border-width: 1px;
-  border-radius: $fallback--tooltipRadius;
-  border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
-  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
-  box-shadow: var(--popupShadow);
-  min-width: 15em;
-  max-width: 95%;
-  margin-left: 0.5em;
-
-  .status-el.status-el {
-    border: none;
+.tooltip.popover.status-popover {
+  .popover-inner {
+    font-size: 1rem;
+    border-color: $fallback--border;
+    border-color: var(--border, $fallback--border);
+    border-style: solid;
+    border-width: 1px;
+    border-radius: $fallback--tooltipRadius;
+    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
+    box-shadow: var(--popupShadow);
+    min-width: 15em;
+    max-width: 95%;
+    margin-left: 0.5em;
   }
 
-  .status-preview-loading {
-    padding: 1em;
-    text-align: center;
-
-    i {
-      font-size: 2em;
-    }
-  }
-
-  .popper__arrow::before {
+  .popover-arrow::before {
     position: absolute;
     content: '';
     left: -7px;
@@ -900,19 +885,32 @@ a.unmute {
     z-index: -1;
   }
 
-  &[x-placement^="bottom"] .popper__arrow::before {
+  &[x-placement^="bottom-start"] .popover-arrow::before {
     top: -2px;
     border-top-width: 0;
     border-bottom-color: $fallback--border;
     border-bottom-color: var(--border, $fallback--border);
   }
 
-  &[x-placement^="top"] .popper__arrow::before {
+  &[x-placement^="top-start"] .popover-arrow::before {
     bottom: -2px;
     border-bottom-width: 0;
     border-top-color: $fallback--border;
     border-top-color: var(--border, $fallback--border);
   }
+
+  .status-el.status-el {
+    border: none;
+  }
+
+  .status-preview-loading {
+    padding: 1em;
+    text-align: center;
+
+    i {
+      font-size: 2em;
+    }
+  }
 }
 
 .favs-repeated-users {
-- 
cgit v1.2.3-70-g09d2


From 39e92e76b9f1c4d7de844a23f88e21b502e30f6b Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 17 Jul 2019 13:00:44 -0400
Subject: fix popper go behind the top bar

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

(limited to 'src')

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index fd1705a0..1187c182 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -182,6 +182,11 @@
                   trigger="hover"
                   :offset="5"
                   :container="false"
+                  :popperOptions="{
+                    modifiers: {
+                      preventOverflow: { padding: 50, boundariesElement: 'viewport' },
+                    }
+                  }"
                   @show="replyEnter(status.in_reply_to_status_id)"
                 >
                   <div slot="popover">
-- 
cgit v1.2.3-70-g09d2


From c9ba37ba2cb5871fbf31881842308f503b9852bb Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 17 Jul 2019 13:01:42 -0400
Subject: fix eslint warnings

---
 src/components/status/status.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 1187c182..7053e2cb 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -177,12 +177,12 @@
                 <v-popover
                   v-if="!isPreview"
                   ref="statusPreviewPopper"
-                  popoverClass="status-popover"
+                  popover-class="status-popover"
                   placement="top-start"
                   trigger="hover"
                   :offset="5"
                   :container="false"
-                  :popperOptions="{
+                  :popper-options="{
                     modifiers: {
                       preventOverflow: { padding: 50, boundariesElement: 'viewport' },
                     }
-- 
cgit v1.2.3-70-g09d2


From c009f17651e153835babd04b1cda1cb4a24ca0a2 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 17 Jul 2019 13:56:27 -0400
Subject: set different trigger event in desktop and mobile by default

---
 package.json                                         | 1 +
 src/components/extra_buttons/extra_buttons.vue       | 2 --
 src/components/moderation_tools/moderation_tools.vue | 2 --
 src/components/status/status.vue                     | 3 ---
 src/main.js                                          | 9 ++++++++-
 yarn.lock                                            | 5 +++++
 6 files changed, 14 insertions(+), 8 deletions(-)

(limited to 'src')

diff --git a/package.json b/package.json
index f039d412..dabc4d11 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "diff": "^3.0.1",
     "karma-mocha-reporter": "^2.2.1",
     "localforage": "^1.5.0",
+    "mobile-detect": "^1.4.3",
     "object-path": "^0.11.3",
     "phoenix": "^1.3.0",
     "portal-vue": "^2.1.4",
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index 6781a4f8..746f1c91 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -4,8 +4,6 @@
     trigger="click"
     placement="top"
     class="extra-button-popover"
-    :offset="5"
-    :container="false"
   >
     <div slot="popover">
       <div class="dropdown-menu">
diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
index d97ca3aa..006d6373 100644
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/src/components/moderation_tools/moderation_tools.vue
@@ -3,9 +3,7 @@
     <v-popover
       trigger="click"
       class="moderation-tools-popover"
-      :container="false"
       placement="bottom-end"
-      :offset="5"
       @show="showDropDown = true"
       @hide="showDropDown = false"
     >
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 7053e2cb..1b383558 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -179,9 +179,6 @@
                   ref="statusPreviewPopper"
                   popover-class="status-popover"
                   placement="top-start"
-                  trigger="hover"
-                  :offset="5"
-                  :container="false"
                   :popper-options="{
                     modifiers: {
                       preventOverflow: { padding: 50, boundariesElement: 'viewport' },
diff --git a/src/main.js b/src/main.js
index 7923ffe8..cfa683e5 100644
--- a/src/main.js
+++ b/src/main.js
@@ -29,6 +29,7 @@ import VueClickOutside from 'v-click-outside'
 import PortalVue from 'portal-vue'
 import VBodyScrollLock from './directives/body_scroll_lock'
 import VTooltip from 'v-tooltip'
+import MobileDetect from 'mobile-detect'
 
 import afterStoreSetup from './boot/after_store.js'
 
@@ -41,7 +42,13 @@ Vue.use(VueChatScroll)
 Vue.use(VueClickOutside)
 Vue.use(PortalVue)
 Vue.use(VBodyScrollLock)
-Vue.use(VTooltip)
+Vue.use(VTooltip, {
+  popover: {
+    defaultTrigger: (new MobileDetect(window.navigator.userAgent)).mobile() ? 'click' : 'hover',
+    defaultContainer: false,
+    defaultOffset: 5
+  }
+})
 
 const i18n = new VueI18n({
   // By default, use the browser locale, we will update it if neccessary
diff --git a/yarn.lock b/yarn.lock
index 4e0d9a22..a9714854 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4836,6 +4836,11 @@ mkpath@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/mkpath/-/mkpath-1.0.0.tgz#ebb3a977e7af1c683ae6fda12b545a6ba6c5853d"
 
+mobile-detect@^1.4.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/mobile-detect/-/mobile-detect-1.4.3.tgz#e436a3839f5807dd4d3cd4e081f7d3a51ffda2dd"
+  integrity sha512-UaahPNLllQsstHOEHAmVnTHCMQrAS9eL5Qgdi50QrYz6UgGk+Xziz2udz2GN6NYcyODcPLnasC7a7s6R2DjiaQ==
+
 mocha-nightwatch@3.2.2:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/mocha-nightwatch/-/mocha-nightwatch-3.2.2.tgz#91bcb9b3bde057dd7677c78125e491e58d66647c"
-- 
cgit v1.2.3-70-g09d2


From 17295429e55fac15e69cc0baccf826751f54acb7 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 17 Jul 2019 14:37:20 -0400
Subject: restrict distance at top side only

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

(limited to 'src')

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 1b383558..f9cd4d98 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -181,7 +181,7 @@
                   placement="top-start"
                   :popper-options="{
                     modifiers: {
-                      preventOverflow: { padding: 50, boundariesElement: 'viewport' },
+                      preventOverflow: { padding: { top: 50 }, boundariesElement: 'viewport' },
                     }
                   }"
                   @show="replyEnter(status.in_reply_to_status_id)"
-- 
cgit v1.2.3-70-g09d2


From 052a00dadb88ee8257c01bbb4d1a7f436b37cf03 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 17 Jul 2019 14:37:43 -0400
Subject: minor css fix

---
 src/components/status/status.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

(limited to 'src')

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index f9cd4d98..3edee25a 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -864,8 +864,12 @@ a.unmute {
 }
 
 .tooltip.popover.status-popover {
+  font-size: 1rem;
+  min-width: 15em;
+  max-width: 95%;
+  margin-left: 0.5em;
+
   .popover-inner {
-    font-size: 1rem;
     border-color: $fallback--border;
     border-color: var(--border, $fallback--border);
     border-style: solid;
@@ -874,9 +878,6 @@ a.unmute {
     border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
     box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
     box-shadow: var(--popupShadow);
-    min-width: 15em;
-    max-width: 95%;
-    margin-left: 0.5em;
   }
 
   .popover-arrow::before {
-- 
cgit v1.2.3-70-g09d2


From 95e211ccb7bbfbf8373bdcacfdc8d42e729623e7 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 24 Oct 2019 16:11:28 -0400
Subject: listen both events

---
 src/main.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/main.js b/src/main.js
index cfa683e5..a9db1cff 100644
--- a/src/main.js
+++ b/src/main.js
@@ -29,7 +29,6 @@ import VueClickOutside from 'v-click-outside'
 import PortalVue from 'portal-vue'
 import VBodyScrollLock from './directives/body_scroll_lock'
 import VTooltip from 'v-tooltip'
-import MobileDetect from 'mobile-detect'
 
 import afterStoreSetup from './boot/after_store.js'
 
@@ -44,7 +43,7 @@ Vue.use(PortalVue)
 Vue.use(VBodyScrollLock)
 Vue.use(VTooltip, {
   popover: {
-    defaultTrigger: (new MobileDetect(window.navigator.userAgent)).mobile() ? 'click' : 'hover',
+    defaultTrigger: 'hover click',
     defaultContainer: false,
     defaultOffset: 5
   }
-- 
cgit v1.2.3-70-g09d2


From 62b2648a3e124ac34d960219b925a6c3569e2229 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 24 Oct 2019 16:53:36 -0400
Subject: split status preview popover into a separate component

---
 src/components/status/status.js                  | 25 ++-----
 src/components/status/status.vue                 | 82 +---------------------
 src/components/status_popover/status_popover.js  | 43 ++++++++++++
 src/components/status_popover/status_popover.vue | 86 ++++++++++++++++++++++++
 4 files changed, 136 insertions(+), 100 deletions(-)
 create mode 100644 src/components/status_popover/status_popover.js
 create mode 100644 src/components/status_popover/status_popover.vue

(limited to 'src')

diff --git a/src/components/status/status.js b/src/components/status/status.js
index 36455f2a..d3b39175 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -10,11 +10,12 @@ import Gallery from '../gallery/gallery.vue'
 import LinkPreview from '../link-preview/link-preview.vue'
 import AvatarList from '../avatar_list/avatar_list.vue'
 import Timeago from '../timeago/timeago.vue'
+import StatusPopover from '../status_popover/status_popover.vue'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import fileType from 'src/services/file_type/file_type.service'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
 import { mentionMatchesUrl, extractTagFromUrl } from 'src/services/matcher/matcher.service.js'
-import { filter, find, unescape, uniqBy } from 'lodash'
+import { filter, unescape, uniqBy } from 'lodash'
 
 const Status = {
   name: 'Status',
@@ -37,7 +38,6 @@ const Status = {
       replying: false,
       unmuted: false,
       userExpanded: false,
-      preview: null,
       showingTall: this.inConversation && this.focused,
       showingLongSubject: false,
       error: null,
@@ -300,7 +300,8 @@ const Status = {
     Gallery,
     LinkPreview,
     AvatarList,
-    Timeago
+    Timeago,
+    StatusPopover
   },
   methods: {
     visibilityIcon (visibility) {
@@ -375,24 +376,6 @@ const Status = {
         this.expandingSubject = true
       }
     },
-    replyEnter (id, event) {
-      const targetId = id
-      const statuses = this.$store.state.statuses.allStatuses
-
-      if (!this.preview) {
-        // if we have the status somewhere already
-        this.preview = find(statuses, { 'id': targetId })
-        // or if we have to fetch it
-        if (!this.preview) {
-          this.$store.state.api.backendInteractor.fetchStatus({ id }).then((status) => {
-            this.preview = status
-            this.$nextTick(this.$refs.statusPreviewPopper.updatePopper)
-          })
-        }
-      } else if (this.preview.id !== targetId) {
-        this.preview = find(statuses, { 'id': targetId })
-      }
-    },
     generateUserProfileLink (id, name) {
       return generateProfileLink(id, name, this.$store.state.instance.restrictedNicknames)
     },
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 3edee25a..e91dfd28 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -174,33 +174,10 @@
                 v-if="isReply"
                 class="reply-to-and-accountname"
               >
-                <v-popover
+                <StatusPopover
                   v-if="!isPreview"
-                  ref="statusPreviewPopper"
-                  popover-class="status-popover"
-                  placement="top-start"
-                  :popper-options="{
-                    modifiers: {
-                      preventOverflow: { padding: { top: 50 }, boundariesElement: 'viewport' },
-                    }
-                  }"
-                  @show="replyEnter(status.in_reply_to_status_id)"
+                  :status-id="status.in_reply_to_status_id"
                 >
-                  <div slot="popover">
-                    <status
-                      v-if="preview"
-                      :is-preview="true"
-                      :statusoid="preview"
-                      :compact="true"
-                    />
-                    <div
-                      v-else
-                      class="status-preview-loading"
-                    >
-                      <i class="icon-spin4 animate-spin" />
-                    </div>
-                  </div>
-
                   <a
                     class="reply-to"
                     href="#"
@@ -210,7 +187,7 @@
                     <i class="button-icon icon-reply" />
                     <span class="faint-link reply-to-text">{{ $t('status.reply_to') }}</span>
                   </a>
-                </v-popover>
+                </StatusPopover>
                 <span
                   v-else
                   class="reply-to"
@@ -863,59 +840,6 @@ a.unmute {
   }
 }
 
-.tooltip.popover.status-popover {
-  font-size: 1rem;
-  min-width: 15em;
-  max-width: 95%;
-  margin-left: 0.5em;
-
-  .popover-inner {
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
-    border-style: solid;
-    border-width: 1px;
-    border-radius: $fallback--tooltipRadius;
-    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
-    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
-    box-shadow: var(--popupShadow);
-  }
-
-  .popover-arrow::before {
-    position: absolute;
-    content: '';
-    left: -7px;
-    border: solid 7px transparent;
-    z-index: -1;
-  }
-
-  &[x-placement^="bottom-start"] .popover-arrow::before {
-    top: -2px;
-    border-top-width: 0;
-    border-bottom-color: $fallback--border;
-    border-bottom-color: var(--border, $fallback--border);
-  }
-
-  &[x-placement^="top-start"] .popover-arrow::before {
-    bottom: -2px;
-    border-bottom-width: 0;
-    border-top-color: $fallback--border;
-    border-top-color: var(--border, $fallback--border);
-  }
-
-  .status-el.status-el {
-    border: none;
-  }
-
-  .status-preview-loading {
-    padding: 1em;
-    text-align: center;
-
-    i {
-      font-size: 2em;
-    }
-  }
-}
-
 .favs-repeated-users {
   margin-top: $status-margin;
 
diff --git a/src/components/status_popover/status_popover.js b/src/components/status_popover/status_popover.js
new file mode 100644
index 00000000..91b64f72
--- /dev/null
+++ b/src/components/status_popover/status_popover.js
@@ -0,0 +1,43 @@
+import { find } from 'lodash'
+
+const StatusPopover = {
+  name: 'StatusPopover',
+  props: [
+    'statusId'
+  ],
+  data () {
+    return {
+      preview: null,
+      popperOptions: {
+        modifiers: {
+          preventOverflow: { padding: { top: 50 }, boundariesElement: 'viewport' }
+        }
+      }
+    }
+  },
+  components: {
+    Status: () => import('../status/status.vue')
+  },
+  methods: {
+    enter () {
+      const id = this.statusId
+      const statuses = this.$store.state.statuses.allStatuses
+
+      if (!this.preview) {
+        // if we have the status somewhere already
+        this.preview = find(statuses, { id })
+        // or if we have to fetch it
+        if (!this.preview) {
+          this.$store.state.api.backendInteractor.fetchStatus({ id }).then((status) => {
+            this.preview = status
+            this.$nextTick(this.$refs.popper.updatePopper)
+          })
+        }
+      } else if (this.preview.id !== id) {
+        this.preview = find(statuses, 'id')
+      }
+    }
+  }
+}
+
+export default StatusPopover
diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
new file mode 100644
index 00000000..b0975afb
--- /dev/null
+++ b/src/components/status_popover/status_popover.vue
@@ -0,0 +1,86 @@
+<template>
+  <v-popover
+    ref="popper"
+    popover-class="status-popover"
+    placement="top-start"
+    :popper-options="popperOptions"
+    @show="enter()"
+  >
+    <div slot="popover">
+      <Status
+        v-if="preview"
+        :is-preview="true"
+        :statusoid="preview"
+        :compact="true"
+      />
+      <div
+        v-else
+        class="status-preview-loading"
+      >
+        <i class="icon-spin4 animate-spin" />
+      </div>
+    </div>
+
+    <slot />
+  </v-popover>
+</template>
+
+<script src="./status_popover.js" ></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.tooltip.popover.status-popover {
+  font-size: 1rem;
+  min-width: 15em;
+  max-width: 95%;
+  margin-left: 0.5em;
+
+  .popover-inner {
+    border-color: $fallback--border;
+    border-color: var(--border, $fallback--border);
+    border-style: solid;
+    border-width: 1px;
+    border-radius: $fallback--tooltipRadius;
+    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
+    box-shadow: var(--popupShadow);
+  }
+
+  .popover-arrow::before {
+    position: absolute;
+    content: '';
+    left: -7px;
+    border: solid 7px transparent;
+    z-index: -1;
+  }
+
+  &[x-placement^="bottom-start"] .popover-arrow::before {
+    top: -2px;
+    border-top-width: 0;
+    border-bottom-color: $fallback--border;
+    border-bottom-color: var(--border, $fallback--border);
+  }
+
+  &[x-placement^="top-start"] .popover-arrow::before {
+    bottom: -2px;
+    border-bottom-width: 0;
+    border-top-color: $fallback--border;
+    border-top-color: var(--border, $fallback--border);
+  }
+
+  .status-el.status-el {
+    border: none;
+  }
+
+  .status-preview-loading {
+    padding: 1em;
+    text-align: center;
+
+    i {
+      font-size: 2em;
+    }
+  }
+}
+
+</style>
-- 
cgit v1.2.3-70-g09d2


From e00cf288f54936fc563d2baebf2a694cc3619f61 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 24 Oct 2019 22:14:53 -0400
Subject: refactor status loading logic

---
 src/components/status_popover/status_popover.js  | 24 +++++++++---------------
 src/components/status_popover/status_popover.vue |  4 ++--
 2 files changed, 11 insertions(+), 17 deletions(-)

(limited to 'src')

diff --git a/src/components/status_popover/status_popover.js b/src/components/status_popover/status_popover.js
index 91b64f72..b96ae642 100644
--- a/src/components/status_popover/status_popover.js
+++ b/src/components/status_popover/status_popover.js
@@ -7,7 +7,6 @@ const StatusPopover = {
   ],
   data () {
     return {
-      preview: null,
       popperOptions: {
         modifiers: {
           preventOverflow: { padding: { top: 50 }, boundariesElement: 'viewport' }
@@ -15,26 +14,21 @@ const StatusPopover = {
       }
     }
   },
+  computed: {
+    status () {
+      return find(this.$store.state.statuses.allStatuses, { id: this.statusId })
+    }
+  },
   components: {
     Status: () => import('../status/status.vue')
   },
   methods: {
     enter () {
-      const id = this.statusId
-      const statuses = this.$store.state.statuses.allStatuses
-
-      if (!this.preview) {
-        // if we have the status somewhere already
-        this.preview = find(statuses, { id })
-        // or if we have to fetch it
-        if (!this.preview) {
-          this.$store.state.api.backendInteractor.fetchStatus({ id }).then((status) => {
-            this.preview = status
-            this.$nextTick(this.$refs.popper.updatePopper)
+      if (!this.status) {
+        this.$store.state.api.backendInteractor.fetchStatus({ id: this.statusId })
+          .then((status) => {
+            this.$store.dispatch('addNewStatuses', { statuses: [status] })
           })
-        }
-      } else if (this.preview.id !== id) {
-        this.preview = find(statuses, 'id')
       }
     }
   }
diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
index b0975afb..62afadca 100644
--- a/src/components/status_popover/status_popover.vue
+++ b/src/components/status_popover/status_popover.vue
@@ -8,9 +8,9 @@
   >
     <div slot="popover">
       <Status
-        v-if="preview"
+        v-if="status"
         :is-preview="true"
-        :statusoid="preview"
+        :statusoid="status"
         :compact="true"
       />
       <div
-- 
cgit v1.2.3-70-g09d2


From f969e9ab3d08f0b8cf6b5201094243feff6fc3d0 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 24 Oct 2019 22:21:33 -0400
Subject: add fetchStatus action

---
 src/components/status_popover/status_popover.js | 5 +----
 src/modules/statuses.js                         | 4 ++++
 2 files changed, 5 insertions(+), 4 deletions(-)

(limited to 'src')

diff --git a/src/components/status_popover/status_popover.js b/src/components/status_popover/status_popover.js
index b96ae642..19f16bd9 100644
--- a/src/components/status_popover/status_popover.js
+++ b/src/components/status_popover/status_popover.js
@@ -25,10 +25,7 @@ const StatusPopover = {
   methods: {
     enter () {
       if (!this.status) {
-        this.$store.state.api.backendInteractor.fetchStatus({ id: this.statusId })
-          .then((status) => {
-            this.$store.dispatch('addNewStatuses', { statuses: [status] })
-          })
+        this.$store.dispatch('fetchStatus', this.statusId)
       }
     }
   }
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index 918065d2..f11ffdcd 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -537,6 +537,10 @@ const statuses = {
     setNotificationsSilence ({ rootState, commit }, { value }) {
       commit('setNotificationsSilence', { value })
     },
+    fetchStatus ({ rootState, dispatch }, id) {
+      rootState.api.backendInteractor.fetchStatus({ id })
+        .then((status) => dispatch('addNewStatuses', { statuses: [status] }))
+    },
     deleteStatus ({ rootState, commit }, status) {
       commit('setDeleted', { status })
       apiService.deleteStatus({ id: status.id, credentials: rootState.users.currentUser.credentials })
-- 
cgit v1.2.3-70-g09d2


From 644343ccdad905cff4a632f7154457ab7a158cb8 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 24 Oct 2019 22:27:23 -0400
Subject: do not make too many nested div

---
 src/components/status_popover/status_popover.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
index 62afadca..f570ea7a 100644
--- a/src/components/status_popover/status_popover.vue
+++ b/src/components/status_popover/status_popover.vue
@@ -6,7 +6,7 @@
     :popper-options="popperOptions"
     @show="enter()"
   >
-    <div slot="popover">
+    <template slot="popover">
       <Status
         v-if="status"
         :is-preview="true"
@@ -19,7 +19,7 @@
       >
         <i class="icon-spin4 animate-spin" />
       </div>
-    </div>
+    </template>
 
     <slot />
   </v-popover>
-- 
cgit v1.2.3-70-g09d2


From c5e391b6064ec52fe4731d9a10a8999652453c8b Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 24 Oct 2019 22:41:15 -0400
Subject: refactor conditions

---
 src/components/status/status.vue | 31 +++++++++++++------------------
 1 file changed, 13 insertions(+), 18 deletions(-)

(limited to 'src')

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index e91dfd28..77886912 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -205,27 +205,22 @@
                 </span>
               </div>
               <div
-                v-if="inConversation && !isPreview"
+                v-if="inConversation && !isPreview && replies && replies.length"
                 class="replies"
               >
+                <span class="faint">{{ $t('status.replies_list') }}</span>
                 <span
-                  v-if="replies && replies.length"
-                  class="faint"
-                >{{ $t('status.replies_list') }}</span>
-                <template v-if="replies">
-                  <span
-                    v-for="reply in replies"
-                    :key="reply.id"
-                    class="reply-link faint"
-                  >
-                    <a
-                      href="#"
-                      @click.prevent="gotoOriginal(reply.id)"
-                      @mouseenter="replyEnter(reply.id, $event)"
-                      @mouseout="replyLeave()"
-                    >{{ reply.name }}</a>
-                  </span>
-                </template>
+                  v-for="reply in replies"
+                  :key="reply.id"
+                  class="reply-link faint"
+                >
+                  <a
+                    href="#"
+                    @click.prevent="gotoOriginal(reply.id)"
+                    @mouseenter="replyEnter(reply.id, $event)"
+                    @mouseout="replyLeave()"
+                  >{{ reply.name }}</a>
+                </span>
               </div>
             </div>
           </div>
-- 
cgit v1.2.3-70-g09d2


From fbd1922567a873efb097109bbd5e54736eed8a4d Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 24 Oct 2019 22:55:02 -0400
Subject: show preview popover when hover numbered replies

---
 src/components/status/status.vue | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

(limited to 'src')

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 77886912..65778b2e 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -209,18 +209,17 @@
                 class="replies"
               >
                 <span class="faint">{{ $t('status.replies_list') }}</span>
-                <span
+                <StatusPopover
                   v-for="reply in replies"
                   :key="reply.id"
-                  class="reply-link faint"
+                  :status-id="reply.id"
                 >
                   <a
                     href="#"
+                    class="reply-link"
                     @click.prevent="gotoOriginal(reply.id)"
-                    @mouseenter="replyEnter(reply.id, $event)"
-                    @mouseout="replyLeave()"
                   >{{ reply.name }}</a>
-                </span>
+                </StatusPopover>
               </div>
             </div>
           </div>
-- 
cgit v1.2.3-70-g09d2


From 237d95b0f73d9d20df0b8c4668110ce09a5527de Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 24 Oct 2019 23:50:50 -0400
Subject: remove needless ref

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

(limited to 'src')

diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
index f570ea7a..eacf4c06 100644
--- a/src/components/status_popover/status_popover.vue
+++ b/src/components/status_popover/status_popover.vue
@@ -1,6 +1,5 @@
 <template>
   <v-popover
-    ref="popper"
     popover-class="status-popover"
     placement="top-start"
     :popper-options="popperOptions"
-- 
cgit v1.2.3-70-g09d2