Make chat collapsable and expandable, make chat look a tiny bit nicer (still works like crap when it comes to scrolling)

src/components/chat_panel/chat_panel.js

@@ -2,7 +2,8 @@ const chatPanel = {
   data () {
     return {
       currentMessage: '',
-      channel: null
+      channel: null,
+      collapsed: false
     }
   },
   computed: {
@@ -12,8 +13,12 @@ const chatPanel = {
   },
   methods: {
     submit (message) {
+      console.log(this.currentMessage)
       this.$store.state.chat.channel.push('new_msg', {text: message}, 10000)
       this.currentMessage = ''
+    },
+    togglePanel () {
+      this.collapsed = !this.collapsed
     }
   }
 }

src/components/chat_panel/chat_panel.vue

@@ -1,35 +1,54 @@
 <template>
-  <div class="chat-panel">
+  <div class="chat-panel" v-if="this.collapsed">
     <div class="panel panel-default">
-      <div class="panel-heading timeline-heading">
+      <div class="panel-heading timeline-heading chat-heading" @click.stop.prevent="togglePanel">
         <div class="title">
           {{$t('chat.title')}}
+          <i class="icon-cancel" style="float: right;"></i>
         </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 class="chat-content">
+            <router-link class="chat-name" :to="{ name: 'user-profile', params: { id: message.author.id } }">
+              {{message.author.username}}
+            </router-link>
+            <br>
+            <span class="chat-text">
+              {{message.text}}
+            </span>
+          </div>
         </div>
       </div>
       <div class="chat-input">
         <form @submit.prevent="submit(currentMessage)">
-          <input v-model="currentMessage" type="text" >
+          <textarea @keyup.enter="submit(currentMessage)" v-model="currentMessage" class="chat-input-textarea" rows="1"></textarea>
         </form>
       </div>
     </div>
   </div>
+  <div v-else class="chat-panel">
+    <div class="panel panel-default">
+      <div class="panel-heading panel-footer timeline-heading chat-heading" @click.stop.prevent="togglePanel">
+        <div class="title">
+          {{$t('chat.title')}}
+          <i class="icon-plus-squared" style="float: right;"></i>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script src="./chat_panel.js"></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
+.chat-heading {
+  cursor: pointer;
+}
 
 .chat-window {
   max-height: 200px;
@@ -37,17 +56,22 @@
   overflow-x: hidden;
 }
 
+.chat-name {
+}
+
 .chat-message {
+  display: flex;
   padding: 0.2em 0.5em
 }
 
 .chat-avatar {
   img {
-    height: 32px;
+    height: 24px;
-    width: 32px;
+    width: 24px;
     border-radius: $fallback--avatarRadius;
     border-radius: var(--avatarRadius, $fallback--avatarRadius);
     margin-right: 0.5em;
+    margin-top: 0.25em;
   }
 }
 
@@ -55,10 +79,17 @@
   display: flex;
   form {
     flex: auto;
+    display: flex;
     input {
       margin: 0.5em;
       width: fill-available;
     }
+    textarea {
+      flex: 1;
+      margin: 0.6em;
+      min-height: 3.5em;
+      resize: none;
+    }
   }
 }
 </style>