Merge remote-tracking branch 'upstream/develop' into emoji-selector-update

* upstream/develop: (469 commits)
  Feature/add sticker picker
  guard more secure routes
  guard secure routes by redirecting to root
  closest can returns itself as well
  find inside status-content div only
  try to use the closest a tag as target
  Update es.json
  Also apply keyword filter to subjects
  Remove files I accidentally pushed in
  fix issues caused by merges in usersearch on @
  Add user search at
  fix eslint warnings
  remove vue-popperjs
  fix moderation menu partially hidden by usercard boundary
  migrate popper css
  rewrite ModerationTools using v-tooltip
  make popover position for status action dropdow relative to parent node
  rewrite ExtraButtons using v-tooltip
  install v-tooltip
  i18n/Update pedantic Japanese translation
  ...

1 files changed, 59 insertions, 0 deletions

diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
new file mode 100644
index 00000000..cdad1666
--- /dev/null
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -0,0 +1,59 @@
+<template>
+  <v-popover
+    v-if="enabled"
+    trigger="click"
+    placement="top"
+    class="extra-button-popover"
+    :offset="5"
+    :container="false"
+  >
+    <div slot="popover">
+      <div class="dropdown-menu">
+        <button
+          v-if="!status.pinned && canPin"
+          v-close-popover
+          class="dropdown-item dropdown-item-icon"
+          @click.prevent="pinStatus"
+        >
+          <i class="icon-pin" /><span>{{ $t("status.pin") }}</span>
+        </button>
+        <button
+          v-if="status.pinned && canPin"
+          v-close-popover
+          class="dropdown-item dropdown-item-icon"
+          @click.prevent="unpinStatus"
+        >
+          <i class="icon-pin" /><span>{{ $t("status.unpin") }}</span>
+        </button>
+        <button
+          v-if="canDelete"
+          v-close-popover
+          class="dropdown-item dropdown-item-icon"
+          @click.prevent="deleteStatus"
+        >
+          <i class="icon-cancel" /><span>{{ $t("status.delete") }}</span>
+        </button>
+      </div>
+    </div>
+    <div class="button-icon">
+      <i class="icon-ellipsis" />
+    </div>
+  </v-popover>
+</template>
+
+<script src="./extra_buttons.js" ></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+@import '../popper/popper.scss';
+
+.icon-ellipsis {
+  cursor: pointer;
+
+  &:hover,
+  .extra-button-popover.open & {
+    color: $fallback--text;
+    color: var(--text, $fallback--text);
+  }
+}
+</style>