Merge remote-tracking branch 'upstream/develop' into docs

* upstream/develop: (193 commits)
  fix user avatar fallback logic
  remove dead code
  make bio textarea resizable vertically only
  remove dead code
  remove dead code
  fix crazy watch logic in conversation
  show three dot button only if needed
  hide mute conversation button to guests
  update keyBy
  generate idObj at timeline level
  fix pin showing logic in conversation
  Show a message when JS is disabled
  Initialize chat only if user is logged in and it wasn't initialized before
  i18n/Update Japanese
  i18n/Update pedantic Japanese
  sync profile tab state with location query
  refactor TabSwitcher
  use better name of controlled prop
  fix potential bug to render active tab in controlled way
  remove unused param
  ...

2 files changed, 167 insertions, 89 deletions

diff --git a/src/components/moderation_tools/moderation_tools.js b/src/components/moderation_tools/moderation_tools.js
index 3eedeaa1..8aadc8c5 100644
--- a/src/components/moderation_tools/moderation_tools.js
+++ b/src/components/moderation_tools/moderation_tools.js
@@ -1,5 +1,4 @@
 import DialogModal from '../dialog_modal/dialog_modal.vue'
-import Popper from 'vue-popperjs/src/component/popper.js.vue'
 
 const FORCE_NSFW = 'mrf_tag:media-force-nsfw'
 const STRIP_MEDIA = 'mrf_tag:media-strip'
@@ -29,8 +28,7 @@ const ModerationTools = {
     }
   },
   components: {
-    DialogModal,
-    Popper
+    DialogModal
   },
   computed: {
     tagsSet () {
@@ -41,9 +39,6 @@ const ModerationTools = {
     }
   },
   methods: {
-    toggleMenu () {
-      this.showDropDown = !this.showDropDown
-    },
     hasTag (tagName) {
       return this.tagsSet.has(tagName)
     },
@@ -52,12 +47,12 @@ const ModerationTools = {
       if (this.tagsSet.has(tag)) {
         store.state.api.backendInteractor.untagUser(this.user, tag).then(response => {
           if (!response.ok) { return }
-          store.commit('untagUser', {user: this.user, tag})
+          store.commit('untagUser', { user: this.user, tag })
         })
       } else {
         store.state.api.backendInteractor.tagUser(this.user, tag).then(response => {
           if (!response.ok) { return }
-          store.commit('tagUser', {user: this.user, tag})
+          store.commit('tagUser', { user: this.user, tag })
         })
       }
     },
@@ -66,12 +61,12 @@ const ModerationTools = {
       if (this.user.rights[right]) {
         store.state.api.backendInteractor.deleteRight(this.user, right).then(response => {
           if (!response.ok) { return }
-          store.commit('updateRight', {user: this.user, right: right, value: false})
+          store.commit('updateRight', { user: this.user, right: right, value: false })
         })
       } else {
         store.state.api.backendInteractor.addRight(this.user, right).then(response => {
           if (!response.ok) { return }
-          store.commit('updateRight', {user: this.user, right: right, value: true})
+          store.commit('updateRight', { user: this.user, right: right, value: true })
         })
       }
     },
@@ -80,7 +75,7 @@ const ModerationTools = {
       const status = !!this.user.deactivated
       store.state.api.backendInteractor.setActivationStatus(this.user, status).then(response => {
         if (!response.ok) { return }
-        store.commit('updateActivationStatus', {user: this.user, status: status})
+        store.commit('updateActivationStatus', { user: this.user, status: status })
       })
     },
     deleteUserDialog (show) {
@@ -89,7 +84,7 @@ const ModerationTools = {
     deleteUser () {
       const store = this.$store
       const user = this.user
-      const {id, name} = user
+      const { id, name } = user
       store.state.api.backendInteractor.deleteUser(user)
         .then(e => {
           this.$store.dispatch('markStatusesAsDeleted', status => user.id === status.user.id)
diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
index 6a5e8cc0..d97ca3aa 100644
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/src/components/moderation_tools/moderation_tools.vue
@@ -1,85 +1,161 @@
 <template>
-<div class='block' style='position: relative'>
-  <Popper
-    trigger="click"
-    @hide='showDropDown = false'
-    append-to-body
-    :options="{
-      placement: 'bottom-end',
-      modifiers: {
-        arrow: { enabled: true },
-        offset: { offset: '0, 5px' },
-      }
-    }">
-    <div class="popper-wrapper">
-      <div class="dropdown-menu">
-        <span v-if='user.is_local'>
-          <button class="dropdown-item" @click='toggleRight("admin")'>
-            {{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }}
+  <div>
+    <v-popover
+      trigger="click"
+      class="moderation-tools-popover"
+      :container="false"
+      placement="bottom-end"
+      :offset="5"
+      @show="showDropDown = true"
+      @hide="showDropDown = false"
+    >
+      <div slot="popover">
+        <div class="dropdown-menu">
+          <span v-if="user.is_local">
+            <button
+              class="dropdown-item"
+              @click="toggleRight(&quot;admin&quot;)"
+            >
+              {{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }}
+            </button>
+            <button
+              class="dropdown-item"
+              @click="toggleRight(&quot;moderator&quot;)"
+            >
+              {{ $t(!!user.rights.moderator ? 'user_card.admin_menu.revoke_moderator' : 'user_card.admin_menu.grant_moderator') }}
+            </button>
+            <div
+              role="separator"
+              class="dropdown-divider"
+            />
+          </span>
+          <button
+            class="dropdown-item"
+            @click="toggleActivationStatus()"
+          >
+            {{ $t(!!user.deactivated ? 'user_card.admin_menu.activate_account' : 'user_card.admin_menu.deactivate_account') }}
           </button>
-          <button class="dropdown-item" @click='toggleRight("moderator")'>
-            {{ $t(!!user.rights.moderator ? 'user_card.admin_menu.revoke_moderator' : 'user_card.admin_menu.grant_moderator') }}
+          <button
+            class="dropdown-item"
+            @click="deleteUserDialog(true)"
+          >
+            {{ $t('user_card.admin_menu.delete_account') }}
           </button>
-          <div role="separator" class="dropdown-divider"></div>
-        </span>
-        <button class="dropdown-item" @click='toggleActivationStatus()'>
-          {{ $t(!!user.deactivated ? 'user_card.admin_menu.activate_account' : 'user_card.admin_menu.deactivate_account') }}
-        </button>
-        <button class="dropdown-item" @click='deleteUserDialog(true)'>
-          {{ $t('user_card.admin_menu.delete_account') }}
-        </button>
-        <div role="separator" class="dropdown-divider" v-if='hasTagPolicy'></div>
-        <span v-if='hasTagPolicy'>
-          <button class="dropdown-item" @click='toggleTag(tags.FORCE_NSFW)'>
-            {{ $t('user_card.admin_menu.force_nsfw') }}
-            <span class="menu-checkbox" v-bind:class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_NSFW) }"></span>
-          </button>
-          <button class="dropdown-item" @click='toggleTag(tags.STRIP_MEDIA)'>
-            {{ $t('user_card.admin_menu.strip_media') }}
-            <span class="menu-checkbox" v-bind:class="{ 'menu-checkbox-checked': hasTag(tags.STRIP_MEDIA) }"></span>
-          </button>
-          <button class="dropdown-item" @click='toggleTag(tags.FORCE_UNLISTED)'>
-            {{ $t('user_card.admin_menu.force_unlisted') }}
-            <span class="menu-checkbox" v-bind:class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_UNLISTED) }"></span>
-          </button>
-          <button class="dropdown-item" @click='toggleTag(tags.SANDBOX)'>
-            {{ $t('user_card.admin_menu.sandbox') }}
-            <span class="menu-checkbox" v-bind:class="{ 'menu-checkbox-checked': hasTag(tags.SANDBOX) }"></span>
-          </button>
-          <button class="dropdown-item" v-if='user.is_local' @click='toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)'>
-            {{ $t('user_card.admin_menu.disable_remote_subscription') }}
-            <span class="menu-checkbox" v-bind:class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_REMOTE_SUBSCRIPTION) }"></span>
-          </button>
-          <button class="dropdown-item" v-if='user.is_local' @click='toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)'>
-            {{ $t('user_card.admin_menu.disable_any_subscription') }}
-            <span class="menu-checkbox" v-bind:class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_ANY_SUBSCRIPTION) }"></span>
-          </button>
-          <button class="dropdown-item" v-if='user.is_local' @click='toggleTag(tags.QUARANTINE)'>
-            {{ $t('user_card.admin_menu.quarantine') }}
-            <span class="menu-checkbox" v-bind:class="{ 'menu-checkbox-checked': hasTag(tags.QUARANTINE) }"></span>
-          </button>
-        </span>
+          <div
+            v-if="hasTagPolicy"
+            role="separator"
+            class="dropdown-divider"
+          />
+          <span v-if="hasTagPolicy">
+            <button
+              class="dropdown-item"
+              @click="toggleTag(tags.FORCE_NSFW)"
+            >
+              {{ $t('user_card.admin_menu.force_nsfw') }}
+              <span
+                class="menu-checkbox"
+                :class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_NSFW) }"
+              />
+            </button>
+            <button
+              class="dropdown-item"
+              @click="toggleTag(tags.STRIP_MEDIA)"
+            >
+              {{ $t('user_card.admin_menu.strip_media') }}
+              <span
+                class="menu-checkbox"
+                :class="{ 'menu-checkbox-checked': hasTag(tags.STRIP_MEDIA) }"
+              />
+            </button>
+            <button
+              class="dropdown-item"
+              @click="toggleTag(tags.FORCE_UNLISTED)"
+            >
+              {{ $t('user_card.admin_menu.force_unlisted') }}
+              <span
+                class="menu-checkbox"
+                :class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_UNLISTED) }"
+              />
+            </button>
+            <button
+              class="dropdown-item"
+              @click="toggleTag(tags.SANDBOX)"
+            >
+              {{ $t('user_card.admin_menu.sandbox') }}
+              <span
+                class="menu-checkbox"
+                :class="{ 'menu-checkbox-checked': hasTag(tags.SANDBOX) }"
+              />
+            </button>
+            <button
+              v-if="user.is_local"
+              class="dropdown-item"
+              @click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)"
+            >
+              {{ $t('user_card.admin_menu.disable_remote_subscription') }}
+              <span
+                class="menu-checkbox"
+                :class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_REMOTE_SUBSCRIPTION) }"
+              />
+            </button>
+            <button
+              v-if="user.is_local"
+              class="dropdown-item"
+              @click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)"
+            >
+              {{ $t('user_card.admin_menu.disable_any_subscription') }}
+              <span
+                class="menu-checkbox"
+                :class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_ANY_SUBSCRIPTION) }"
+              />
+            </button>
+            <button
+              v-if="user.is_local"
+              class="dropdown-item"
+              @click="toggleTag(tags.QUARANTINE)"
+            >
+              {{ $t('user_card.admin_menu.quarantine') }}
+              <span
+                class="menu-checkbox"
+                :class="{ 'menu-checkbox-checked': hasTag(tags.QUARANTINE) }"
+              />
+            </button>
+          </span>
+        </div>
       </div>
-    </div>
-    <button slot="reference" v-bind:class="{ pressed: showDropDown }" @click='toggleMenu'>
-      {{ $t('user_card.admin_menu.moderation') }}
-    </button>
-  </Popper>
-  <portal to="modal">
-    <DialogModal v-if="showDeleteUserDialog" :onCancel='deleteUserDialog.bind(this, false)'>
-      <template slot="header">{{ $t('user_card.admin_menu.delete_user') }}</template>
-      <p>{{ $t('user_card.admin_menu.delete_user_confirmation') }}</p>
-      <template slot="footer">
-        <button class="btn btn-default" @click='deleteUserDialog(false)'>
-          {{ $t('general.cancel') }}
-        </button>
-        <button class="btn btn-default danger" @click='deleteUser()'>
+      <button
+        class="btn btn-default btn-block"
+        :class="{ pressed: showDropDown }"
+      >
+        {{ $t('user_card.admin_menu.moderation') }}
+      </button>
+    </v-popover>
+    <portal to="modal">
+      <DialogModal
+        v-if="showDeleteUserDialog"
+        :on-cancel="deleteUserDialog.bind(this, false)"
+      >
+        <template slot="header">
           {{ $t('user_card.admin_menu.delete_user') }}
-        </button>
-      </template>
-    </DialogModal>
-  </portal>
-</div>
+        </template>
+        <p>{{ $t('user_card.admin_menu.delete_user_confirmation') }}</p>
+        <template slot="footer">
+          <button
+            class="btn btn-default"
+            @click="deleteUserDialog(false)"
+          >
+            {{ $t('general.cancel') }}
+          </button>
+          <button
+            class="btn btn-default danger"
+            @click="deleteUser()"
+          >
+            {{ $t('user_card.admin_menu.delete_user') }}
+          </button>
+        </template>
+      </DialogModal>
+    </portal>
+  </div>
 </template>
 
 <script src="./moderation_tools.js"></script>
@@ -107,4 +183,11 @@
   }
 }
 
+.moderation-tools-popover {
+  height: 100%;
+  .trigger {
+    display: flex !important;
+    height: 100%;
+  }
+}
 </style>