Skip to content

Commit d9f5f93

Browse files
committed
(UI) close menu and reaction when scrolling
1 parent fb882ad commit d9f5f93

File tree

2 files changed

+19
-2
lines changed

2 files changed

+19
-2
lines changed

src/ChatWindow/ChatMessage.vue

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,7 @@
132132
:roomFooterRef="roomFooterRef"
133133
:positionRight="message.sender_id === currentUserId"
134134
@addEmoji="sendMessageReaction"
135-
@openEmoji="emojiOpened = $event"
135+
@openEmoji="openEmoji"
136136
></emoji-picker>
137137

138138
<transition
@@ -211,7 +211,8 @@ export default {
211211
roomFooterRef: { type: HTMLDivElement },
212212
newMessages: { type: Array },
213213
showReactionEmojis: { type: Boolean, required: true },
214-
emojisList: { type: Object, required: true }
214+
emojisList: { type: Object, required: true },
215+
hideOptions: { type: Boolean, required: true }
215216
},
216217
217218
data() {
@@ -243,6 +244,12 @@ export default {
243244
},
244245
emojiOpened(val) {
245246
if (val) this.optionsOpened = false
247+
},
248+
hideOptions(val) {
249+
if (val) {
250+
this.closeEmoji()
251+
this.closeOptions()
252+
}
246253
}
247254
},
248255
@@ -362,6 +369,8 @@ export default {
362369
363370
if (!this.optionsOpened) return
364371
372+
this.$emit('hideOptions', false)
373+
365374
setTimeout(() => {
366375
if (!this.roomFooterRef || !this.$refs.menuOptions || !this.actionIcon)
367376
return
@@ -383,6 +392,10 @@ export default {
383392
this.optionsOpened = false
384393
if (this.hoverMessageId !== this.message._id) this.messageHover = false
385394
},
395+
openEmoji(ev) {
396+
this.emojiOpened = ev
397+
this.$emit('hideOptions', false)
398+
},
386399
closeEmoji() {
387400
this.emojiOpened = false
388401
if (this.hoverMessageId !== this.message._id) this.messageHover = false

src/ChatWindow/MessagesList.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,10 +63,12 @@
6363
:newMessages="newMessages"
6464
:showReactionEmojis="showReactionEmojis"
6565
:emojisList="emojisList"
66+
:hideOptions="hideOptions"
6667
@messageActionHandler="messageActionHandler"
6768
@openFile="openFile"
6869
@addNewMessage="addNewMessage"
6970
@sendMessageReaction="sendMessageReaction"
71+
@hideOptions="hideOptions = $event"
7072
></chat-message>
7173
</div>
7274
</transition-group>
@@ -230,6 +232,7 @@ export default {
230232
menuOpened: false,
231233
emojiOpened: false,
232234
emojisList: {},
235+
hideOptions: true,
233236
scrollIcon: false,
234237
newMessages: []
235238
}
@@ -245,6 +248,7 @@ export default {
245248
document
246249
.getElementsByClassName('container-scroll')[0]
247250
.addEventListener('scroll', e => {
251+
this.hideOptions = true
248252
this.scrollIcon =
249253
e.target.scrollHeight > 500 &&
250254
e.target.scrollHeight - e.target.scrollTop > 1000

0 commit comments

Comments
 (0)