Merge branch 'develop' into 'feat/notification-quick-filters'

# Conflicts:
#   CHANGELOG.md

6 files changed, 33 insertions, 11 deletions

diff --git a/src/components/chat_panel/chat_panel.js b/src/components/chat_panel/chat_panel.js
index c3887098..556694ae 100644
--- a/src/components/chat_panel/chat_panel.js
+++ b/src/components/chat_panel/chat_panel.js
@@ -35,6 +35,18 @@ const chatPanel = {
     userProfileLink (user) {
       return generateProfileLink(user.id, user.username, this.$store.state.instance.restrictedNicknames)
     }
+  },
+  watch: {
+    messages (newVal) {
+      const scrollEl = this.$el.querySelector('.chat-window')
+      if (!scrollEl) return
+      if (scrollEl.scrollTop + scrollEl.offsetHeight + 20 > scrollEl.scrollHeight) {
+        this.$nextTick(() => {
+          if (!scrollEl) return
+          scrollEl.scrollTop = scrollEl.scrollHeight - scrollEl.offsetHeight
+        })
+      }
+    }
   }
 }
 
diff --git a/src/components/chat_panel/chat_panel.vue b/src/components/chat_panel/chat_panel.vue
index 7993c94d..8a829115 100644
--- a/src/components/chat_panel/chat_panel.vue
+++ b/src/components/chat_panel/chat_panel.vue
@@ -10,17 +10,15 @@
         @click.stop.prevent="togglePanel"
       >
         <div class="title">
-          <span>{{ $t('shoutbox.title') }}</span>
+          {{ $t('shoutbox.title') }}
           <FAIcon
             v-if="floating"
             icon="times"
+            class="close-icon"
           />
         </div>
       </div>
-      <div
-        v-chat-scroll
-        class="chat-window"
-      >
+      <div class="chat-window">
         <div
           v-for="message in messages"
           :key="message.id"
@@ -94,6 +92,13 @@
     .icon {
       color: $fallback--text;
       color: var(--text, $fallback--text);
+      margin-right: 0.5em;
+    }
+
+    .title {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
     }
   }
 
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 60776ebb..4b7ee7d5 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -141,10 +141,10 @@
                 v-model="userHighlightType"
                 class="userHighlightSel"
               >
-                <option value="disabled">No highlight</option>
-                <option value="solid">Solid bg</option>
-                <option value="striped">Striped bg</option>
-                <option value="side">Side stripe</option>
+                <option value="disabled">{{ $t('user_card.highlight.disabled') }}</option>
+                <option value="solid">{{ $t('user_card.highlight.solid') }}</option>
+                <option value="striped">{{ $t('user_card.highlight.striped') }}</option>
+                <option value="side">{{ $t('user_card.highlight.side') }}</option>
               </select>
               <FAIcon
                 class="select-down-icon"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index a6e892d6..1b2d4d4c 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -746,6 +746,12 @@
       "quarantine": "Disallow user posts from federating",
       "delete_user": "Delete user",
       "delete_user_confirmation": "Are you absolutely sure? This action cannot be undone."
+    },
+    "highlight": {
+      "disabled": "No highlight",
+      "solid": "Solid bg",
+      "striped": "Striped bg",
+      "side": "Side stripe"
     }
   },
   "user_profile": {
diff --git a/src/main.js b/src/main.js
index 90ee2887..e1cac748 100644
--- a/src/main.js
+++ b/src/main.js
@@ -28,7 +28,6 @@ import pushNotifications from './lib/push_notifications_plugin.js'
 
 import messages from './i18n/messages.js'
 
-import VueChatScroll from 'vue-chat-scroll'
 import VueClickOutside from 'v-click-outside'
 import PortalVue from 'portal-vue'
 import VBodyScrollLock from './directives/body_scroll_lock'
@@ -42,7 +41,6 @@ const currentLocale = (window.navigator.language || 'en').split('-')[0]
 Vue.use(Vuex)
 Vue.use(VueRouter)
 Vue.use(VueI18n)
-Vue.use(VueChatScroll)
 Vue.use(VueClickOutside)
 Vue.use(PortalVue)
 Vue.use(VBodyScrollLock)
diff --git a/src/modules/chat.js b/src/modules/chat.js
index c798549d..ffeb272b 100644
--- a/src/modules/chat.js
+++ b/src/modules/chat.js
@@ -18,6 +18,7 @@ const chat = {
   actions: {
     initializeChat (store, socket) {
       const channel = socket.channel('chat:public')
+
       channel.on('new_msg', (msg) => {
         store.commit('addMessage', msg)
       })