2 files changed, 81 insertions, 37 deletions
diff --git a/src/components/chat_panel/chat_panel.js b/src/components/chat_panel/chat_panel.js
index b146c5d9..d528d0a1 100644
--- a/src/components/chat_panel/chat_panel.js
+++ b/src/components/chat_panel/chat_panel.js
@@ -2,7 +2,8 @@ const chatPanel = {
   data () {
     return {
       currentMessage: '',
-      channel: null
+      channel: null,
+      collapsed: false
     }
   },
   computed: {
@@ -14,6 +15,9 @@ const chatPanel = {
     submit (message) {
       this.$store.state.chat.channel.push('new_msg', {text: message}, 10000)
       this.currentMessage = ''
+    },
+    togglePanel () {
+      this.collapsed = !this.collapsed
     }
   }
 }
diff --git a/src/components/chat_panel/chat_panel.vue b/src/components/chat_panel/chat_panel.vue
index ec379db5..30070d3e 100644
--- a/src/components/chat_panel/chat_panel.vue
+++ b/src/components/chat_panel/chat_panel.vue
@@ -1,26 +1,40 @@
 <template>
-  <div class="chat-panel">
-    <div class="panel panel-default base01-background">
-      <div class="panel-heading timeline-heading base02-background base04">
+  <div class="chat-panel" v-if="!this.collapsed">
+    <div class="panel panel-default">
+      <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" >
-        </form>
+        <textarea @keyup.enter="submit(currentMessage)" v-model="currentMessage" class="chat-input-textarea" rows="1"></textarea>
+      </div>
+    </div>
+  </div>
+  <div v-else class="chat-panel">
+    <div class="panel panel-default">
+      <div class="panel-heading stub timeline-heading chat-heading" @click.stop.prevent="togglePanel">
+        <div class="title">
+          <i class="icon-comment-empty"></i>
+          {{$t('chat.title')}}
+        </div>
       </div>
     </div>
   </div>
@@ -29,30 +43,56 @@
 <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;
-         }
-     }
- }
+@import '../../_variables.scss';
+
+.floating-chat {
+  position: fixed;
+  right: 0px;
+  bottom: 0px;
+  z-index: 1000;
+}
+
+.chat-heading {
+  cursor: pointer;
+  .icon-comment-empty {
+    color: $fallback--fg;
+    color: var(--fg, $fallback--fg);
+  }
+}
+
+.chat-window {
+  width: 345px;
+  max-height: 40vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.chat-name {
+}
+
+.chat-message {
+  display: flex;
+  padding: 0.2em 0.5em
+}
+
+.chat-avatar {
+  img {
+    height: 24px;
+    width: 24px;
+    border-radius: $fallback--avatarRadius;
+    border-radius: var(--avatarRadius, $fallback--avatarRadius);
+    margin-right: 0.5em;
+    margin-top: 0.25em;
+  }
+}
+
+.chat-input {
+  display: flex;
+  textarea {
+    flex: 1;
+    margin: 0.6em;
+    min-height: 3.5em;
+    resize: none;
+  }
+}
 </style>