Merge branch 'topBanner' into master

public/sym/arrow_back-24px.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path fill="#fff" d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>

public/sym/menu-24px.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path fill="#fff" d="M4 18h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0-5h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zM3 7c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1z"/></svg>

public/sym/supervisor_account-24px.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path fill="#fff" d="M16.5 12c1.38 0 2.49-1.12 2.49-2.5S17.88 7 16.5 7C15.12 7 14 8.12 14 9.5s1.12 2.5 2.5 2.5zM9 11c1.66 0 2.99-1.34 2.99-3S10.66 5 9 5C7.34 5 6 6.34 6 8s1.34 3 3 3zm7.5 3c-1.83 0-5.5.92-5.5 2.75V19h11v-2.25c0-1.83-3.67-2.75-5.5-2.75zM9 13c-2.33 0-7 1.17-7 3.5V19h7v-2.25c0-.85.33-2.34 2.37-3.47C10.5 13.1 9.66 13 9 13z"/></svg>

src/components/icon.vue

@@ -28,7 +28,8 @@ name: "icon",
     position: absolute;
     height: 1.5rem;
     width: auto;
-    top: 0.75rem;
-    left: 0.75rem;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
   }
 </style>

src/components/newMessage.vue

@@ -1,8 +1,10 @@
 <template>
   <div class="newMessageBanner">
     <label for="newMessageInput"></label>
-    <textarea @input="resizeMessageBanner()" ref="newMessageInput" id="newMessageInput" class="newMessageInput" autocomplete="off" placeholder="type a message ..." v-model="msg.content.text" />
-    <icon @click.native="sendMessage()" id="sendMessageBtn" style="position: absolute; right: 1rem; bottom: 0.5rem;" ic="./sym/ic_send_white_24px.svg" />
+    <textarea @input="resizeMessageBanner()" ref="newMessageInput" id="newMessageInput" class="newMessageInput"
+              autocomplete="off" placeholder="type a message ..." v-model="msg.content.text" />
+    <icon @click.native="sendMessage()" id="sendMessageBtn" style="position: absolute; right: 1rem; bottom: 0.5rem;"
+          ic="./sym/ic_send_white_24px.svg" />
   </div>
 </template>
 
@@ -30,7 +32,7 @@ export default {
       id.style.height = `${id.scrollHeight}px`
       let msgContainer = document.getElementById("messagesContainer")
       msgContainer.style.height
-          = `calc(100% - ${id.parentElement.clientHeight}px)`
+          = `calc(100% - ${id.parentElement.clientHeight}px - 3rem)`
       //msgContainer.scrollTo(0, msgContainer.scrollHeight)
     }
   },
@@ -76,4 +78,5 @@ export default {
     vertical-align: middle;
     font-family: Avenir, Helvetica, Arial, sans-serif;
   }
+
 </style>

src/components/topBanner.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="topBanner">
+    <div>
+      <icon class="smallIcon" id="icon-arrow" ic="./sym/arrow_back-24px.svg" />
+      <icon class="smallIcon" id="picTop" ic="./sym/supervisor_account-24px.svg" />
+      <div id="container">
+        <div id="chatName">{{roomInfo.name}}</div>
+        <div id="users">{{roomInfo.user.length}} members</div>
+      </div>
+      <icon class="smallIcon" id="icon-menu" ic="./sym/menu-24px.svg" />
+    </div>
+  </div>
+</template>
+<script>
+import icon from '@/components/icon.vue';
+
+export default {
+  name: "topBanner",
+  components:{
+    icon
+  },
+  data(){
+    return {
+      roomInfo: {
+        name: "open chat",
+        user: []
+      }
+    }
+  }
+}
+</script>
+<style scoped>
+.topBanner{
+  position: absolute;
+  width: 100%;
+  height: 3rem;
+  background-color: #1d1d1d;
+  box-shadow: 0 3px 10px #111;
+}
+.smallIcon{
+  top: 0.25rem;
+  background-color: #2d2d2d;
+  height: 2.5rem;
+  width: 2.5rem;
+}
+#icon-arrow{
+  position: absolute;
+  left: 1rem;
+}
+#picTop{
+  position: absolute;
+  left: 4rem;
+  background-color: #42a7b9;
+}
+#icon-menu{
+  position: absolute;
+  right: 1rem;
+  background-color: #2d2d2d;
+}
+#container{
+  position: absolute;
+  top: 0.55rem;
+  left: 7.5rem;
+}
+#chatName{
+  font-size: 1rem;
+  color: #ededed;
+}
+#users{
+  font-size: 0.75rem;
+  color: #9c9c9c;
+}
+</style>

src/views/chat.vue

@@ -26,6 +26,7 @@
       </div>
     </div>
     <newMessage />
+    <topBanner />
   </div>
 </template>
 
@@ -33,13 +34,15 @@
 import message from '@/components/message.vue';
 import messageReceive from '@/components/messageReceive.vue';
 import newMessage from '@/components/newMessage.vue';
+import topBanner from "@/components/topBanner";
 
 export default {
   name: 'chat',
   components: {
     message,
     messageReceive,
-    newMessage
+    newMessage,
+    topBanner
   }
 }
 </script>
@@ -49,8 +52,8 @@ export default {
   position: absolute;
   margin: 0;
   left: 0;
-  top: 0;
-  height: calc(100% - 4rem);
+  top: 3rem;
+  height: calc(100% - 7rem);
   width: 100%;
   overflow-y: auto;
 }