Merge remote-tracking branch 'origin/develop' into websocket-fixes

* origin/develop: (119 commits)
  Apply 1 suggestion(s) to 1 file(s)
  Make it possible to localize user highlight options
  remove shoutbox test hacks
  fix shoutbox header, use custom scroll-to-bottom system, remove vue-chat-scroll, temporarily add chat test hack
  update changelog with 2.3.0
  change icons around
  Translated using Weblate (Japanese)
  Update timeline_quick_settings.js
  add screen_name_ui to tests
  separate screen_name and screen_name_ui with decoded punycode
  Update CHANGELOG.md
  add basic validation for statusless status notifications
  changelog mention
  fix chat unread badge
  update shelljs to get rid of warnings on build
  save a few characters
  focus input in emoji picker and react picker
  fix vue warnings
  add only to wording
  basic loggedin check for reply filtering
  ...

2 files changed, 63 insertions, 46 deletions

diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js
index 5e7b7580..ce82c90d 100644
--- a/src/components/react_button/react_button.js
+++ b/src/components/react_button/react_button.js
@@ -23,6 +23,12 @@ const ReactButton = {
         this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
       }
       close()
+    },
+    focusInput () {
+      this.$nextTick(() => {
+        const input = this.$el.querySelector('input')
+        if (input) input.focus()
+      })
     }
   },
   computed: {
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index ac940b98..4839024c 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -1,10 +1,12 @@
 <template>
   <Popover
     trigger="click"
+    class="ReactButton"
     placement="top"
     :offset="{ y: 5 }"
     :bound-to="{ x: 'container' }"
     remove-padding
+    @show="focusInput"
   >
     <div
       slot="content"
@@ -42,7 +44,7 @@
     </div>
     <span
       slot="trigger"
-      class="ReactButton"
+      class="popover-trigger"
       :title="$t('tool_tip.add_reaction')"
     >
       <FAIcon
@@ -58,62 +60,71 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.reaction-picker-filter {
-  padding: 0.5em;
-  display: flex;
-  input {
-    flex: 1;
+.ReactButton {
+  .reaction-picker-filter {
+    padding: 0.5em;
+    display: flex;
+
+    input {
+      flex: 1;
+    }
   }
-}
 
-.reaction-picker-divider {
-  height: 1px;
-  width: 100%;
-  margin: 0.5em;
-  background-color: var(--border, $fallback--border);
-}
+  .reaction-picker-divider {
+    height: 1px;
+    width: 100%;
+    margin: 0.5em;
+    background-color: var(--border, $fallback--border);
+  }
 
-.reaction-picker {
-  width: 10em;
-  height: 9em;
-  font-size: 1.5em;
-  overflow-y: scroll;
-  display: flex;
-  flex-wrap: wrap;
-  padding: 0.5em;
-  text-align: center;
-  align-content: flex-start;
-  user-select: none;
+  .reaction-picker {
+    width: 10em;
+    height: 9em;
+    font-size: 1.5em;
+    overflow-y: scroll;
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0.5em;
+    text-align: center;
+    align-content: flex-start;
+    user-select: none;
 
-  mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
-    linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
-    linear-gradient(to top, white, white);
-  transition: mask-size 150ms;
-  mask-size: 100% 20px, 100% 20px, auto;
-  // Autoprefixed seem to ignore this one, and also syntax is different
-  -webkit-mask-composite: xor;
-  mask-composite: exclude;
+    mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
+          linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
+          linear-gradient(to top, white, white);
+    transition: mask-size 150ms;
+    mask-size: 100% 20px, 100% 20px, auto;
 
-  .emoji-button {
-    cursor: pointer;
+    /* Autoprefixed seem to ignore this one, and also syntax is different */
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
 
-    flex-basis: 20%;
-    line-height: 1.5em;
-    align-content: center;
+    .emoji-button {
+      cursor: pointer;
 
-    &:hover {
-      transform: scale(1.25);
+      flex-basis: 20%;
+      line-height: 1.5em;
+      align-content: center;
+
+      &:hover {
+        transform: scale(1.25);
+      }
     }
   }
-}
 
-.ReactButton {
-  padding: 10px;
-  margin: -10px;
+  /* override of popover internal stuff */
+  .popover-trigger-button {
+    width: auto;
+  }
+
+  .popover-trigger {
+    padding: 10px;
+    margin: -10px;
 
-  &:hover .svg-inline--fa {
-    color: $fallback--text;
-    color: var(--text, $fallback--text);
+    &:hover .svg-inline--fa {
+      color: $fallback--text;
+      color: var(--text, $fallback--text);
+    }
   }
 }