Merge branch 'feature/chat-styling-and-hiding' into 'develop'

Feature/chat styling and hiding

See merge request pleroma/pleroma-fe!224

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
     }
   }
 }

src/components/chat_panel/chat_panel.vue

@@ -1,26 +1,40 @@
 <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" >
-        </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 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>
@@ -30,6 +44,9 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
+.chat-heading {
+  cursor: pointer;
+}
 
 .chat-window {
   max-height: 200px;
@@ -37,28 +54,32 @@
   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;
   }
 }
 
 .chat-input {
   display: flex;
-  form {
-    flex: auto;
-    input {
-      margin: 0.5em;
-      width: fill-available;
-    }
+  textarea {
+    flex: 1;
+    margin: 0.6em;
+    min-height: 3.5em;
+    resize: none;
   }
 }
 </style>