diff options
author | jdlugosz963 <jdlugosz963@gmail.com> | 2021-12-17 00:22:38 +0100 |
---|---|---|
committer | jdlugosz963 <jdlugosz963@gmail.com> | 2021-12-17 00:22:38 +0100 |
commit | c6b4c6a90a3bb77add64994f51d3e2af790c8452 (patch) | |
tree | c4faaf7e4e48fa09b555c0f4ba50e204f73e8617 /src/components/group/GroupSender.vue | |
parent | cee635ff1db9ba7c9212547831287efe56c69a1f (diff) | |
download | lom_frontend-c6b4c6a90a3bb77add64994f51d3e2af790c8452.tar.gz lom_frontend-c6b4c6a90a3bb77add64994f51d3e2af790c8452.zip |
make styles and add some features
Diffstat (limited to 'src/components/group/GroupSender.vue')
-rw-r--r-- | src/components/group/GroupSender.vue | 62 |
1 files changed, 45 insertions, 17 deletions
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 @@ | |||
1 | <template> | 1 | <template> |
2 | <div class="group_view"> | 2 | <div |
3 | <h1> {{group.name}} </h1> | 3 | class="bg-gray-900 w-full m-2 mb-0 border-4" |
4 | <div class="messages"> | 4 | :class="{ |
5 | 'border-red-900': isFocus, | ||
6 | 'border-blue-900': !isFocus | ||
7 | }" | ||
8 | > | ||
9 | |||
10 | <h1 class="text-2xl p-2 bg-blue-900"> {{group.name}} </h1> | ||
11 | <div class="overflow-auto h-64 p-2" ref="messages"> | ||
5 | <Message v-for="message in messages" :key="message.id" :message="message" /> | 12 | <Message v-for="message in messages" :key="message.id" :message="message" /> |
6 | </div> | 13 | </div> |
7 | 14 | ||
8 | <form @submit="send_message"> | 15 | <form @submit="send_message"> |
9 | <input v-model="message" type="text" ref="input" /> | 16 | <input |
17 | v-model="message" | ||
18 | class="w-full bg-blue-900 p-2" placeholder="Napisz cos..." type="text" ref="input" | ||
19 | @focus="isFocus=true" | ||
20 | @blur="isFocus=false" | ||
21 | @keydown="hotkeys" | ||
22 | /> | ||
10 | </form> | 23 | </form> |
11 | </div> | 24 | </div> |
12 | </template> | 25 | </template> |
@@ -20,6 +33,7 @@ export default { | |||
20 | return { | 33 | return { |
21 | message: "", | 34 | message: "", |
22 | messages: [], | 35 | messages: [], |
36 | isFocus: false | ||
23 | } | 37 | } |
24 | }, | 38 | }, |
25 | 39 | ||
@@ -45,13 +59,38 @@ export default { | |||
45 | 59 | ||
46 | console.log(data) | 60 | console.log(data) |
47 | 61 | ||
48 | if(status===200) | 62 | if(status===200){ |
49 | this.messages = data.messages | 63 | this.messages = data.messages |
64 | this.scroll_down() | ||
65 | } | ||
50 | }, | 66 | }, |
51 | 67 | ||
52 | push_message(message) { | 68 | push_message(message) { |
53 | if(message.receiver == this.group.id) | 69 | if(message.receiver == this.group.id){ |
54 | this.messages.push(message) | 70 | this.messages.push(message) |
71 | this.scroll_down() | ||
72 | } | ||
73 | }, | ||
74 | |||
75 | scroll_down() { | ||
76 | this.$nextTick(function () { | ||
77 | const messages = this.$refs.messages | ||
78 | console.log(messages) | ||
79 | messages.scrollTop = messages.scrollHeight | ||
80 | }) | ||
81 | }, | ||
82 | |||
83 | hotkeys(e) { | ||
84 | switch(e.code) { | ||
85 | case 'Delete': | ||
86 | e.preventDefault() | ||
87 | this.$emit('close', this.group.id) | ||
88 | break | ||
89 | case 'Escape': | ||
90 | e.preventDefault() | ||
91 | this.$refs.input.blur() | ||
92 | break | ||
93 | } | ||
55 | } | 94 | } |
56 | }, | 95 | }, |
57 | 96 | ||
@@ -72,14 +111,3 @@ export default { | |||
72 | } | 111 | } |
73 | } | 112 | } |
74 | </script> | 113 | </script> |
75 | |||
76 | <style scoped> | ||
77 | .group_view { | ||
78 | width: 25%; | ||
79 | } | ||
80 | |||
81 | .messages { | ||
82 | overflow:auto; | ||
83 | height: 300px; | ||
84 | } | ||
85 | </style> | ||