From f69a12a912d425c9d2b4a456a0cbbb2378babd44 Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Wed, 11 Apr 2018 00:17:05 +0300
Subject: 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.vue | 49 ++++++++++++++++++++++++++------
 1 file changed, 40 insertions(+), 9 deletions(-)

(limited to 'src/components/chat_panel/chat_panel.vue')

diff --git a/src/components/chat_panel/chat_panel.vue b/src/components/chat_panel/chat_panel.vue
index 50bd0017..9339dfb6 100644
--- a/src/components/chat_panel/chat_panel.vue
+++ b/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;
-    width: 32px;
+    height: 24px;
+    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>
-- 
cgit v1.2.3-70-g09d2