Skip to content

Commit 069f43a

Browse files
committed
(UI) fix message action hover behaviour
1 parent 79bf2e6 commit 069f43a

File tree

2 files changed

+22
-11
lines changed

2 files changed

+22
-11
lines changed

src/ChatWindow/ChatMessage.vue

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,7 @@
88
</div>
99
<div
1010
class="message-box"
11-
:class="{
12-
'offset-current': message.sender_id === 'me'
13-
}"
11+
:class="{ 'offset-current': message.sender_id === 'me' }"
1412
>
1513
<div
1614
class="message-container"
@@ -101,7 +99,7 @@
10199
<div
102100
ref="actionIcon"
103101
class="svg-button message-options"
104-
v-if="messageActions.length && messageReply && !message.deleted"
102+
v-if="isMessageActions"
105103
@click="openOptions"
106104
>
107105
<svg-icon name="dropdown" />
@@ -203,6 +201,11 @@ export default {
203201
const { sender_id } = this.message.replyMessage
204202
const replyUser = this.roomUsers.find(user => user._id === sender_id)
205203
return replyUser ? replyUser.username : ''
204+
},
205+
isMessageActions() {
206+
return (
207+
this.messageActions.length && this.messageReply && !this.message.deleted
208+
)
206209
}
207210
},
208211
@@ -223,7 +226,7 @@ export default {
223226
},
224227
onLeaveMessage() {
225228
this.imageHover = false
226-
this.messageReply = false
229+
if (!this.optionsOpened) this.messageReply = false
227230
this.hoverMessageId = null
228231
},
229232
openFile() {
@@ -233,9 +236,6 @@ export default {
233236
this.closeOptions()
234237
this.$emit('messageActionHandler', { action, message: this.message })
235238
},
236-
closeOptions() {
237-
this.optionsOpened = false
238-
},
239239
checkImageFile() {
240240
if (!this.message.file) return
241241
const imageTypes = ['png', 'jpg']
@@ -267,6 +267,10 @@ export default {
267267
if (optionsTopPosition) this.menuOptionsHeight = 28
268268
else this.menuOptionsHeight = -menuOptionsHeight
269269
}, 0)
270+
},
271+
closeOptions() {
272+
this.optionsOpened = false
273+
if (this.hoverMessageId !== this.message._id) this.messageReply = false
270274
}
271275
}
272276
}
@@ -472,9 +476,16 @@ export default {
472476
}
473477
474478
.message-options {
479+
background: rgba(0, 0, 0, 0.25);
480+
border-radius: 50%;
475481
position: absolute;
476-
top: 5px;
477-
right: 10px;
482+
top: 7px;
483+
right: 14px;
484+
485+
svg {
486+
height: 20px;
487+
width: 20px;
488+
}
478489
}
479490
480491
.menu-options {

src/themes/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export const defaultThemeColors = {
4343
pencil: '#9e9e9e',
4444
checkmark: '#0696c7',
4545
eye: '#fff',
46-
dropdown: '#9e9e9e'
46+
dropdown: '#fff'
4747
}
4848
},
4949
dark: {

0 commit comments

Comments
 (0)