webtutsplus · tailorsmit · Apr 19, 2021 · Apr 19, 2021
diff --git a/vue-social/package-lock.json b/vue-social/package-lock.json
diff --git a/vue-social/package.json b/vue-social/package.json
@@ -11,13 +11,16 @@
     "axios": "^0.21.1",
     "bootstrap": "^4.6.0",
     "bootstrap-vue": "^2.21.2",
+    "chokidar": "^3.5.1",
     "core-js": "^3.6.5",
     "firebase": "^8.3.0",
     "jquery": "^3.5.1",
     "vue": "^2.6.11",
     "vue-chat-scroll": "^1.4.0",
+    "vue-material": "^1.0.0-beta-15",
     "vue-router": "^3.2.0",
-    "vue-simple-alert": "^1.1.1"
+    "vue-simple-alert": "^1.1.1",
+    "watchpack": "^1.7.5"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

diff --git a/vue-social/public/index.html b/vue-social/public/index.html
@@ -6,6 +6,7 @@
       <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
       <link rel="icon" href="<%= BASE_URL %>favicon.ico">
       <title><%= htmlWebpackPlugin.options.title %></title>
+      <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Material+Icons">
   </head>
   <body>
     <noscript>

diff --git a/vue-social/src/components/wChat.vue b/vue-social/src/components/wChat.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="app">
+    <div class='app__body'>
+      <Sidebar/>
+      <ChatView />
+    </div>
+  </div>
+</template>
+
+<script>
+import Sidebar from "@/views/Sidebar";
+import ChatView from "@/views/ChatView";
+
+export default {
+name: "wChat",
+  components : {Sidebar,ChatView}
+}
+</script>
+
+<style scoped>
+.app {
+  display: grid;
+  place-items: center;
+  background-color: #dadbd3;
+  height: 100vh;
+}
+
+.app__body {
+  display: flex;
+  background-color: #ededed;
+  height: 90vh;
+  width: 90vw;
+  box-shadow: -1px 4px 20px -6px rgba(0,0,0,0.75);
+}
+
+
+</style>
diff --git a/vue-social/src/plugins/bootstrap-vue.js b/vue-social/src/plugins/bootstrap-vue.js
@@ -4,4 +4,10 @@ import BootstrapVue from 'bootstrap-vue'
 import 'bootstrap/dist/css/bootstrap.min.css'
 import 'bootstrap-vue/dist/bootstrap-vue.css'
 
+import VueMaterial from 'vue-material'
+import 'vue-material/dist/vue-material.min.css'
+import 'vue-material/dist/theme/default.css'
+
+Vue.use(VueMaterial)
+
 Vue.use(BootstrapVue)
diff --git a/vue-social/src/router/index.js b/vue-social/src/router/index.js
@@ -8,6 +8,7 @@ import Chat from '../components/Chat.vue'
 import Room from '../components/Room.vue'
 import AddRoom from '../components/AddRoom.vue'
 import ListFriends from "../views/ListFriends";
+import wChat from "@/components/wChat";
 
 Vue.use(VueRouter)
 
@@ -54,6 +55,10 @@ const routes = [
     path: '/friends',
     name: 'Friends',
     component: ListFriends
+  },{
+    path: '/wchat',
+    name: 'wchat',
+    component: wChat
   }
 ]
 

diff --git a/vue-social/src/views/ChatView.vue b/vue-social/src/views/ChatView.vue
@@ -0,0 +1,156 @@
+<template>
+  <div class="chat">
+    <div class="chat__header">
+      <md-avatar class="md-large">
+        <img src="https://avatars.githubusercontent.com/u/32813584?s=60&v=4" />
+      </md-avatar>
+      <div class="chat__headerInfo">
+        <h3> Room Name</h3>
+        <p> Last seen at ...</p>
+      </div>
+
+      <div class="chat__headerRight">
+        <md-button class="md-icon-button">
+          <md-icon >search</md-icon>
+        </md-button>
+        <md-button class="md-icon-button">
+          <md-icon>attach_file</md-icon>
+        </md-button>
+        <md-button class="md-icon-button">
+          <md-icon>more_vert</md-icon>
+        </md-button>
+      </div>
+    </div>
+    <div class="chat__body">
+      <p :class='`chat__message ${true && "chat__reciever"}`'>
+
+      <span class="chat__name">
+                        someOne</span>
+      hey guys
+      <span class="chat__timestamp">
+                        13:15
+                    </span>
+      </p>
+      <p class="chat__message">
+        hey guys
+      </p>
+    </div>
+    <div class="chat__footer">
+      <md-icon>insert_emoticon</md-icon>
+      <form>
+        <input type="text"/>
+        <button type="submit" onClick={sendMessage()}>send a message</button>
+      </form>
+      <md-icon>mic</md-icon>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+name: "Chat",
+  methods : {
+    sendMessage(e){
+      e.preventDefault();
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chat {
+  flex: 0.70;
+  display: flex;
+  flex-direction: column;
+}
+
+.chat__header {
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid lightgray;
+}
+
+.chat__headerInfo {
+  flex: 1;
+  padding-left: 20px;
+
+}
+
+.chat__headerInfo > h3 {
+  margin-bottom: 3px;
+  font-weight: 500;
+}
+
+.chat__headerInfo > p {
+  color: gray;
+}
+
+.chat__headerRight {
+  display: flex;
+  justify-content: space-between;
+  min-width: 100px;
+}
+
+.chat__body {
+  flex: 1;
+  background: repeat center;
+  padding: 30px;
+  overflow-y: auto;
+}
+
+.chat__message {
+  position: relative;
+  font-size: 16px;
+  padding: 10px;
+  background-color: green;
+  border-radius: 10px;
+  width: fit-content ;
+  margin-bottom: 30px;
+}
+
+.chat__name {
+  position: absolute;
+  top: -15px;
+  font-weight: 800;
+  font-size: xx-small;
+}
+
+.chat__timestamp {
+  margin-left: 10px;
+  font-size: xx-small;
+}
+
+.chat__reciever {
+  margin-left: auto;
+  background-color: yellow;
+}
+
+.chat__footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 62px;
+  border-top: 1px solid lightgray;
+}
+
+.chat__footer > form {
+  flex: 1;
+  display: flex;
+}
+
+.chat__footer > form > input {
+  flex: 1;
+  border-radius: 30px;
+  padding: 10px;
+  border: none ;
+}
+.chat__footer > form > button {
+  display: none;
+}
+.chat__footer > md-icon {
+  padding: 10px;
+  color: gray;
+}
+
+</style>
diff --git a/vue-social/src/views/Sidebar.vue b/vue-social/src/views/Sidebar.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class='sidebar'>
+    <div class='sidebar__header'>
+      <md-avatar/>
+      <div class='sidebar__headerRight'>
+        <md-button class="md-icon-button">
+          <md-icon>donut_large</md-icon>
+        </md-button>
+        <md-button class="md-icon-button">
+          <md-icon>chat</md-icon>
+        </md-button>
+        <md-button class="md-icon-button">
+          <md-icon>more_vert</md-icon>
+        </md-button>
+      </div>
+    </div>
+    <div class='sidebar__search'>
+      <div class='sidebar__searchContainer'>
+        <md-icon>search</md-icon>
+        <input placeholder="start new chat"/>
+      </div>
+    </div>
+    <div class='sidebar__chat'>
+      <SidebarChat addNewChat="allow"/>
+      <SidebarChat />
+      <SidebarChat />
+      <SidebarChat />
+      <SidebarChat />
+    </div>
+  </div>
+</template>
+
+<script>
+import SidebarChat from "@/views/SidebarChat";
+
+export default {
+name: "Sidebar",
+  components : {SidebarChat}
+}
+</script>
+
+<style scoped>
+.sidebar{
+  display: flex;
+  flex-direction: column;
+  flex: 0.30;
+}
+
+.sidebar__header {
+  display: flex;
+  justify-content: space-between;
+  padding: 20px;
+  border-right: 1px solid lightgrey;
+}
+
+.sidebar__headerRight{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-width:  10vw;
+}
+
+.sidebar__headerRight > i {
+  margin-right: 2vw;
+  font-size: 24px !important;
+}
+
+.sidebar__search {
+  display: flex;
+  align-items: center;
+  background-color: #f6f6f6;
+  height: 30px;
+  padding: 10px;
+}
+
+.sidebar__searchContainer {
+  display: flex;
+  align-items: center;
+  background-color: white;
+  width: 100%;
+  height: 35px;
+  border-radius: 20px;
+}
+
+.sidebar__searchContainer > input {
+  border: none;
+  margin-left: 10px;
+}
+
+.sidebar__searchContainer > .md-icon{
+
+  margin: unset;
+  color: gray;
+}
+
+.sidebar__chat {
+  flex: 1;
+  background-color: white;
+  overflow-y: hidden;
+}
+
+.sidebar__chat:hover {
+  overflow-y: auto;
+}
+</style>