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

CHANGELOG.md

@@ -9,10 +9,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Fixed shoutbox not working in mobile layout
 - Fixed missing highlighted border in expanded conversations again
 - Fixed some UI jumpiness when opening images particularly in chat view
+- Fixed chat unread badge looking weird
 
 ### Changed
 - Display 'people voted' instead of 'votes' for multi-choice polls
 - Optimized chat to not get horrible performance after keeping the same chat open for a long time
+- When opening emoji picker or react picker, it automatically focuses the search field
 
 ### Added
 - Added reason field for registration when approval is required

package.json

@@ -103,7 +103,7 @@
     "selenium-server": "2.53.1",
     "semver": "^5.3.0",
     "serviceworker-webpack-plugin": "^1.0.0",
-    "shelljs": "^0.7.4",
+    "shelljs": "^0.8.4",
     "sinon": "^2.1.0",
     "sinon-chai": "^2.8.0",
     "stylelint": "^13.6.1",

src/components/chat/chat.scss

@@ -98,10 +98,10 @@
     .unread-message-count {
       font-size: 0.8em;
       left: 50%;
-      transform: translate(-50%, 0);
-      border-radius: 100%;
       margin-top: -1rem;
-      padding: 0;
+      padding: 0.1em;
+      border-radius: 50px;
+      position: absolute;
     }
 
     .chat-loading-error {

src/components/emoji_input/emoji_input.js

@@ -194,11 +194,18 @@ const EmojiInput = {
     }
   },
   methods: {
+    focusPickerInput () {
+      const pickerEl = this.$refs.picker.$el
+      if (!pickerEl) return
+      const pickerInput = pickerEl.querySelector('input')
+      if (pickerInput) pickerInput.focus()
+    },
     triggerShowPicker () {
       this.showPicker = true
       this.$refs.picker.startEmojiLoad()
       this.$nextTick(() => {
         this.scrollIntoView()
+        this.focusPickerInput()
       })
       // This temporarily disables "click outside" handler
       // since external trigger also means click originates
@@ -214,6 +221,7 @@ const EmojiInput = {
       if (this.showPicker) {
         this.scrollIntoView()
         this.$refs.picker.startEmojiLoad()
+        this.$nextTick(this.focusPickerInput)
       }
     },
     replace (replacement) {

src/components/popover/popover.js

@@ -121,9 +121,12 @@ const Popover = {
       }
     },
     showPopover () {
-      if (this.hidden) this.$emit('show')
+      const wasHidden = this.hidden
       this.hidden = false
-      this.$nextTick(this.updateStyles)
+      this.$nextTick(() => {
+        if (wasHidden) this.$emit('show')
+        this.updateStyles()
+      })
     },
     hidePopover () {
       if (!this.hidden) this.$emit('close')

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: {

src/components/react_button/react_button.vue

@@ -6,6 +6,7 @@
     :offset="{ y: 5 }"
     :bound-to="{ x: 'container' }"
     remove-padding
+    @show="focusInput"
   >
     <div
       slot="content"

yarn.lock

@@ -7842,9 +7842,10 @@ shebang-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
 
-shelljs@^0.7.4:
-  version "0.7.8"
-  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.7.8.tgz#decbcf874b0d1e5fb72e14b164a9683048e9acb3"
+shelljs@^0.8.4:
+  version "0.8.4"
+  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.8.4.tgz#de7684feeb767f8716b326078a8a00875890e3c2"
+  integrity sha512-7gk3UZ9kOfPLIAbslLzyWeGiEqx9e3rxwZM0KE6EL8GlGwjym9Mrlx5/p33bWTu9YG6vcS4MBxYZDHYr5lr8BQ==
   dependencies:
     glob "^7.0.0"
     interpret "^1.0.0"