make styles and add some features

3 files changed, 66 insertions, 37 deletions

diff --git a/src/components/group/GroupMaker.vue b/src/components/group/GroupMaker.vue
index f3da293..06963e3 100644
--- a/src/components/group/GroupMaker.vue
+++ b/src/components/group/GroupMaker.vue
@@ -1,15 +1,17 @@
 <template>
-  <div class="group_maker">
-      Group maker
+  <div class="searcher">
+      <div class="text-2xl p-2"> Group maker </div>
       <form @submit="make_group">
           <input
               v-model="group_name"
               ref='input'
               type="text"
-              placeholder="Type group name..."
+              placeholder="Nazwa grupy..."
+              class="w-full bg-gray-800 mb-2 mt-10 p-2"
+              @keydown="hotkeys"
           />
 
-          <select multiple v-model="users_selection">
+          <select multiple class="w-full bg-gray-800 p-4 mb-10" v-model="users_selection">
 
             <option
               v-for="user in users"
@@ -19,6 +21,8 @@
             </option>
 
           </select>
+
+          <input type="submit" class="w-full p-2 bg-gray-800">
       </form>
   </div>
 </template>
@@ -69,6 +73,15 @@ export default {
         this.close()
 
       console.log(this.users)
+    },
+
+    hotkeys(e) {
+        switch(e.code) {
+            case 'Delete':
+                e.preventDefault()
+                this.$emit('close')
+                break
+        }
     }
   },
 
diff --git a/src/components/group/GroupSender.vue b/src/components/group/GroupSender.vue
index ba36949..a815561 100644
--- a/src/components/group/GroupSender.vue
+++ b/src/components/group/GroupSender.vue
@@ -1,12 +1,25 @@
 <template>
-  <div class="group_view">
-      <h1> {{group.name}} </h1>
-      <div class="messages">
+  <div
+      class="bg-gray-900 w-full m-2 mb-0 border-4"
+      :class="{
+        'border-red-900': isFocus,
+        'border-blue-900': !isFocus
+      }"
+  >
+
+      <h1 class="text-2xl p-2 bg-blue-900"> {{group.name}} </h1>
+      <div class="overflow-auto h-64 p-2" ref="messages">
         <Message v-for="message in messages" :key="message.id" :message="message" />
       </div>
 
       <form @submit="send_message">
-        <input v-model="message" type="text" ref="input" />
+          <input
+              v-model="message"
+              class="w-full bg-blue-900 p-2" placeholder="Napisz cos..." type="text" ref="input"
+              @focus="isFocus=true"
+              @blur="isFocus=false"
+              @keydown="hotkeys"
+          />
       </form>
   </div>
 </template>
@@ -20,6 +33,7 @@ export default {
     return {
       message: "",
       messages: [],
+      isFocus: false
     }
   },
 
@@ -45,13 +59,38 @@ export default {
 
       console.log(data)
 
-      if(status===200)
+      if(status===200){
         this.messages = data.messages
+        this.scroll_down()
+      }
     },
 
     push_message(message) {
-      if(message.receiver == this.group.id)
+      if(message.receiver == this.group.id){
         this.messages.push(message)
+        this.scroll_down()
+      }
+    },
+
+    scroll_down() {
+      this.$nextTick(function () {
+        const messages = this.$refs.messages
+        console.log(messages)
+        messages.scrollTop = messages.scrollHeight
+      })
+    },
+
+    hotkeys(e) {
+        switch(e.code) {
+            case 'Delete':
+                e.preventDefault()
+                this.$emit('close', this.group.id)
+                break
+            case 'Escape':
+                e.preventDefault()
+                this.$refs.input.blur()
+                break
+        }
     }
   },
 
@@ -72,14 +111,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.group_view {
-  width: 25%;
-}
-
-.messages {
-  overflow:auto;
-  height: 300px;
-}
-</style>
diff --git a/src/components/group/Message.vue b/src/components/group/Message.vue
index eedcc6e..556deb9 100644
--- a/src/components/group/Message.vue
+++ b/src/components/group/Message.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="message" :class="{mine: is_message_mine}">
-      <div class="sender">{{ get_message_user }}</div>
-      <div class="content">{{ get_message_content }}</div>
-      <div class="date">{{ get_message_date }}</div>
+  <div class="w-full text-left mt-2" :class="{'text-right': is_message_mine}">
+      <div class="">{{ get_message_user }}</div>
+      <div class="">{{ get_message_content }}</div>
+      <div class="">{{ get_message_date }}</div>
   </div>
 </template>
 
@@ -29,15 +29,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.message {
-  width: 100%;
-  margin-bottom: 10px;
-  color: white;
-}
-
-.mine {
-  color: red;
-}
-</style>