implemented #19 system messages @lassesteffen

demo/src/messageHistory.js

@@ -13,10 +13,12 @@ export default [
   { type: 'text', author: `them`, data: { text: `Just talking? Well what's the show about?` } },
   { type: 'text', author: `me`, data: { text: `It's about nothing.` } },
   { type: 'text', author: `them`, data: { text: `No story?` } },
+  { type: 'system', data: { text: 'You have been transferred to another operator', meta: '04-07-2018 15:57' } },
   { type: 'file', author: `them`, data: { text: `No forget the story. `, file: { name: 'file.mp3', url: '#' } } },
   { type: 'file', author: `me`, data: { text: `What about this one instead?? `, file: { name: 'song.mp3', url: '#' }, meta: '✓✓ Read' } },
   { type: 'text', author: `them`, data: { text: `You've got to have a story. You've got to have a story. You've got to have a story. You've got to have a story. You've got to have a story. You've got to have a story. ` } },
   { type: 'emoji', author: `me`, data: { emoji: `😋` } },
   { type: 'text', author: `me`, data: { text: `Do you read me...`, meta: '✓✓ Read' } },
-  { type: 'text', author: `me`, data: { text: `...or not?`, meta: '✓ Delivered' } }
+  { type: 'text', author: `me`, data: { text: `...or not?`, meta: '✓ Delivered' } },
+  { type: 'system', data: { text: 'User changed security key', meta: '04-08-2018 15:57' } }
 ]

src/Message.vue

@@ -1,13 +1,18 @@
 <template>
   <div class="sc-message">
-    <div class="sc-message--content" :class="{sent: message.author === 'me', received: message.author !== 'me'}">
-      <div class="sc-message--avatar" :style="{
+    <div class="sc-message--content" :class="{
+        sent: message.author === 'me',
+        received: message.author === 'them',
+        system: message.type === 'system'
+      }">
+      <div v-if="message.type !== 'system'" class="sc-message--avatar" :style="{
         backgroundImage: `url(${chatImageUrl})`
       }"></div>
       <TextMessage v-if="message.type === 'text'" :data="message.data" :messageColors="determineMessageColors()" />
       <EmojiMessage v-else-if="message.type === 'emoji'" :data="message.data" />
       <FileMessage v-else-if="message.type === 'file'" :data="message.data" :messageColors="determineMessageColors()" />
       <TypingMessage v-else-if="message.type === 'typing'" :messageColors="determineMessageColors()" />
+      <SystemMessage v-else-if="message.type === 'system'" :data="message.data" :messageColors="determineMessageColors()" />
     </div>
   </div>
 </template>
@@ -17,6 +22,7 @@ import TextMessage from './TextMessage.vue'
 import FileMessage from './FileMessage.vue'
 import EmojiMessage from './EmojiMessage.vue'
 import TypingMessage from './TypingMessage.vue'
+import SystemMessage from './SystemMessage.vue'
 import chatIcon from './assets/chat-icon.svg'
 
 export default {
@@ -29,7 +35,8 @@ export default {
     TextMessage,
     FileMessage,
     EmojiMessage,
-    TypingMessage
+    TypingMessage,
+    SystemMessage
   },
   props: {
     message: {
@@ -81,6 +88,10 @@ export default {
   justify-content: flex-end;
 }
 
+.sc-message--content.system {
+  justify-content: center;
+}
+
 .sc-message--content.sent .sc-message--avatar {
   display: none;
 }

src/SystemMessage.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="sc-message--system" :style="messageColors">{{data.text}}<p v-if="data.meta" class='sc-message--meta' :style="{color: messageColors.color}">{{data.meta}}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    data: {
+      type: Object,
+      required: true
+    },
+    messageColors: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.sc-message--system {
+  padding: 8px 20px;
+  border-radius: 6px;
+  font-weight: 300;
+  font-size: 12px;
+  line-height: 1.2;
+  white-space: pre-wrap;
+  -webkit-font-smoothing: subpixel-antialiased;
+  font-style: italic;
+  opacity: .55;
+}
+
+.sc-message--meta {
+  font-size: xx-small;
+  margin-bottom: 0px;
+  margin-top: 5px;
+  opacity: .5;
+  text-align: center;
+}
+</style>