Private chat

kafkadev · Feb 6, 2019 · be9dc53 · be9dc53
1 parent 7f75956
commit be9dc53
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 7 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -6,7 +6,7 @@
 
 <style lang="scss">
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;

diff --git a/src/components/MessageArea.vue b/src/components/MessageArea.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="text-area">
     <div class="text-area__input">
-      <textarea name id cols="30" rows="10" v-model="message"></textarea>
+      <textarea name id cols="30" rows="10" v-model="message" v-on:keyup.enter="sendMessage()"></textarea>
     </div>
     <div>
       <md-button class="md-primary" v-on:click="sendMessage()">Send</md-button>
@@ -34,7 +34,8 @@ export default {
   width: 85%;
   margin: 0 auto;
   display: flex;
-  max-width: 85%;
+  //max-width: 85%;
+  max-width: 1300px;
   margin-top: 1rem;
 
   &__input {

diff --git a/src/components/UserList.vue b/src/components/UserList.vue
@@ -8,8 +8,9 @@
         <md-button
           class="md-icon-button md-list-action"
           v-if="$store.state.username !== user.username"
-          v-on:click="openChat(user.username)">
-        <md-icon class="md-primary">chat_bubble</md-icon>
+          v-on:click="openChat(user.username)"
+          :disabled="openPrivateChat === true">
+        <md-icon class="md-primary" >chat_bubble</md-icon>
         </md-button>
       </md-list-item>
     </div>
@@ -21,7 +22,9 @@
 export default {
   name: "UserList",
   props: {
-    users: Array
+    users: Array,
+    openPrivateChat: Boolean
+
   },
   created() {},
   methods: {

diff --git a/src/styles/app.scss b/src/styles/app.scss
@@ -4,6 +4,22 @@
     right: unset;
 }
 
+.md-dialog{
+    top: 81%;
+    right: -135px;
+    height: 350px;
+    left: unset;
+}
 .md-dialog-container{
     border: 1px solid gainsboro;
+}
+
+.md-button.md-theme-default[disabled] .md-icon-font {
+    color: rgba(0,0,0,0.38) !important;
+    color: var(--md-theme-default-icon-disabled-on-background, rgba(0,0,0,0.38)) !important;
+}
+
+body{
+    min-height: unset;
+    overflow: hidden;
 }
diff --git a/src/views/Chat.vue b/src/views/Chat.vue
@@ -16,7 +16,11 @@
       </md-app-toolbar>
 
       <md-app-drawer md-permanent="full">
-        <UserList v-bind:users="users" v-on:open-chat="openChat($event)"></UserList>
+        <UserList 
+            v-bind:users="users" 
+            v-bind:openPrivateChat="openPrivateChat"
+            v-on:open-chat="openChat($event)">
+        </UserList>
       </md-app-drawer>
 
       <md-app-content>
@@ -78,6 +82,7 @@ export default {
       if (this.$store.state.room !== val) {
         this.$socket.emit("leaveRoom", this.$store.state);
         this.$store.dispatch("changeRoom", val);
+        this.messages.length = 0;
         this.$socket.emit("joinRoom", this.$store.state);
       }
     },
@@ -108,6 +113,7 @@ export default {
     width: 85%;
     margin: 0 auto;
     height: 70vh;
+    max-width: 1300px;
   }
 
   .md-drawer {