From 92289e545a62bd28ea336c5d712a05445e0e20ab Mon Sep 17 00:00:00 2001
From: Roger Braun <roger@rogerbraun.net>
Date: Fri, 26 Jan 2018 15:11:34 +0100
Subject: Move chat to sidebar.

---
 src/App.js                               |  7 ++--
 src/App.vue                              |  1 +
 src/components/chat/chat.js              | 21 ------------
 src/components/chat/chat.vue             | 59 --------------------------------
 src/components/chat_panel/chat_panel.js  | 21 ++++++++++++
 src/components/chat_panel/chat_panel.vue | 58 +++++++++++++++++++++++++++++++
 src/components/nav_panel/nav_panel.vue   |  5 ---
 src/main.js                              |  7 ++--
 8 files changed, 89 insertions(+), 90 deletions(-)
 delete mode 100644 src/components/chat/chat.js
 delete mode 100644 src/components/chat/chat.vue
 create mode 100644 src/components/chat_panel/chat_panel.js
 create mode 100644 src/components/chat_panel/chat_panel.vue

(limited to 'src')

diff --git a/src/App.js b/src/App.js
index 1da3ff7c..0636c47d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,6 +2,7 @@ import UserPanel from './components/user_panel/user_panel.vue'
 import NavPanel from './components/nav_panel/nav_panel.vue'
 import Notifications from './components/notifications/notifications.vue'
 import UserFinder from './components/user_finder/user_finder.vue'
+import ChatPanel from './components/chat_panel/chat_panel.vue'
 
 export default {
   name: 'app',
@@ -9,7 +10,8 @@ export default {
     UserPanel,
     NavPanel,
     Notifications,
-    UserFinder
+    UserFinder,
+    ChatPanel
   },
   data: () => ({
     mobileActivePanel: 'timeline'
@@ -21,7 +23,8 @@ export default {
     },
     logoStyle () { return { 'background-image': `url(${this.$store.state.config.logo})` } },
     style () { return { 'background-image': `url(${this.background})` } },
-    sitename () { return this.$store.state.config.name }
+    sitename () { return this.$store.state.config.name },
+    chat () { return this.$store.state.chat.channel }
   },
   methods: {
     activatePanel (panelName) {
diff --git a/src/App.vue b/src/App.vue
index 74a18dc7..ec403519 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -23,6 +23,7 @@
             <div class="sidebar">
               <user-panel></user-panel>
               <nav-panel></nav-panel>
+              <chat-panel v-if="currentUser && chat"></chat-panel>
               <notifications v-if="currentUser"></notifications>
             </div>
           </div>
diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js
deleted file mode 100644
index ef326d4a..00000000
--- a/src/components/chat/chat.js
+++ /dev/null
@@ -1,21 +0,0 @@
-const chat = {
-  data () {
-    return {
-      currentMessage: '',
-      channel: null
-    }
-  },
-  computed: {
-    messages () {
-      return this.$store.state.chat.messages
-    }
-  },
-  methods: {
-    submit (message) {
-      this.$store.state.chat.channel.push('new_msg', {text: message}, 10000)
-      this.currentMessage = ''
-    }
-  }
-}
-
-export default chat
diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
deleted file mode 100644
index 6c1e2c38..00000000
--- a/src/components/chat/chat.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-  <div class="chat-panel panel panel-default">
-    <div class="panel-heading timeline-heading base02-background base04">
-      <div class="title">
-        {{$t('chat.title')}}
-      </div>
-    </div>
-    <div class="panel-body base01-background">
-      <div class="chat-window">
-        <div class="chat-message" v-for="message in messages" :key="message.id">
-          <span class="chat-avatar">
-            <img :src="message.author.avatar" />
-            {{message.author.username}}:
-          </span>
-          <span class="chat-text">
-            {{message.text}}
-          </span>
-        </div>
-      </div>
-      <div class="chat-input">
-        <form @submit.prevent="submit(currentMessage)">
-          <input v-model="currentMessage" type="text" >
-        </form>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script src="./chat.js"></script>
-
-
-<style lang="scss">
- .chat-window {
-   max-height: 80vh;
-   overflow-y: auto;
-   overflow-x: hidden;
- }
- .chat-message {
-   padding: 0.2em 0.5em
- }
- .chat-avatar {
-     img {
-         height: 32px;
-         width: 32px;
-         border-radius: 5px;
-         margin-right: 0.5em;
-     }
- }
- .chat-input {
-     display: flex;
-     form {
-         flex: auto;
-         input {
-             margin: 0.5em;
-             width: fill-available;
-         }
-     }
- }
-</style>
diff --git a/src/components/chat_panel/chat_panel.js b/src/components/chat_panel/chat_panel.js
new file mode 100644
index 00000000..b146c5d9
--- /dev/null
+++ b/src/components/chat_panel/chat_panel.js
@@ -0,0 +1,21 @@
+const chatPanel = {
+  data () {
+    return {
+      currentMessage: '',
+      channel: null
+    }
+  },
+  computed: {
+    messages () {
+      return this.$store.state.chat.messages
+    }
+  },
+  methods: {
+    submit (message) {
+      this.$store.state.chat.channel.push('new_msg', {text: message}, 10000)
+      this.currentMessage = ''
+    }
+  }
+}
+
+export default chatPanel
diff --git a/src/components/chat_panel/chat_panel.vue b/src/components/chat_panel/chat_panel.vue
new file mode 100644
index 00000000..ec379db5
--- /dev/null
+++ b/src/components/chat_panel/chat_panel.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="chat-panel">
+    <div class="panel panel-default base01-background">
+      <div class="panel-heading timeline-heading base02-background base04">
+        <div class="title">
+          {{$t('chat.title')}}
+        </div>
+      </div>
+      <div class="chat-window" v-chat-scroll>
+        <div class="chat-message" v-for="message in messages" :key="message.id">
+          <span class="chat-avatar">
+            <img :src="message.author.avatar" />
+            {{message.author.username}}:
+          </span>
+          <span class="chat-text">
+            {{message.text}}
+          </span>
+        </div>
+      </div>
+      <div class="chat-input">
+        <form @submit.prevent="submit(currentMessage)">
+          <input v-model="currentMessage" type="text" >
+        </form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script src="./chat_panel.js"></script>
+
+<style lang="scss">
+ .chat-window {
+   max-height: 200px;
+   overflow-y: auto;
+   overflow-x: hidden;
+ }
+ .chat-message {
+   padding: 0.2em 0.5em
+ }
+ .chat-avatar {
+     img {
+         height: 32px;
+         width: 32px;
+         border-radius: 5px;
+         margin-right: 0.5em;
+     }
+ }
+ .chat-input {
+     display: flex;
+     form {
+         flex: auto;
+         input {
+             margin: 0.5em;
+             width: fill-available;
+         }
+     }
+ }
+</style>
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index ccc772a8..aea841e9 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -7,11 +7,6 @@
             {{ $t("nav.timeline") }}
           </router-link>
         </li>
-        <li v-if='chat && currentUser'>
-          <router-link class="base00-background" to='/chat'>
-            {{ $t("nav.chat") }}
-          </router-link>
-        </li>
         <li v-if='currentUser'>
           <router-link class="base00-background" :to="{ name: 'mentions', params: { username: currentUser.screen_name } }">
             {{ $t("nav.mentions") }}
diff --git a/src/main.js b/src/main.js
index 2dd6aed1..de74511b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -12,7 +12,6 @@ import UserProfile from './components/user_profile/user_profile.vue'
 import Settings from './components/settings/settings.vue'
 import Registration from './components/registration/registration.vue'
 import UserSettings from './components/user_settings/user_settings.vue'
-import Chat from './components/chat/chat.vue'
 
 import statusesModule from './modules/statuses.js'
 import usersModule from './modules/users.js'
@@ -27,6 +26,8 @@ import createPersistedState from './lib/persisted_state.js'
 
 import messages from './i18n/messages.js'
 
+import VueChatScroll from 'vue-chat-scroll'
+
 const currentLocale = (window.navigator.language || 'en').split('-')[0]
 
 Vue.use(Vuex)
@@ -39,6 +40,7 @@ Vue.use(VueTimeago, {
   }
 })
 Vue.use(VueI18n)
+Vue.use(VueChatScroll)
 
 const persistedStateOptions = {
   paths: [
@@ -97,8 +99,7 @@ window.fetch('/static/config.json')
       { name: 'mentions', path: '/:username/mentions', component: Mentions },
       { name: 'settings', path: '/settings', component: Settings },
       { name: 'registration', path: '/registration', component: Registration },
-      { name: 'user-settings', path: '/user-settings', component: UserSettings },
-      { name: 'chat', path: '/chat', component: Chat }
+      { name: 'user-settings', path: '/user-settings', component: UserSettings }
     ]
 
     const router = new VueRouter({
-- 
cgit v1.2.3-70-g09d2