8
8
</div >
9
9
<div
10
10
class =" message-box"
11
- :class =" {
12
- 'offset-current': message.sender_id === 'me'
13
- }"
11
+ :class =" { 'offset-current': message.sender_id === 'me' }"
14
12
>
15
13
<div
16
14
class =" message-container"
101
99
<div
102
100
ref =" actionIcon"
103
101
class =" svg-button message-options"
104
- v-if =" messageActions.length && messageReply && !message.deleted "
102
+ v-if =" isMessageActions "
105
103
@click =" openOptions"
106
104
>
107
105
<svg-icon name =" dropdown" />
@@ -203,6 +201,11 @@ export default {
203
201
const { sender_id } = this .message .replyMessage
204
202
const replyUser = this .roomUsers .find (user => user ._id === sender_id)
205
203
return replyUser ? replyUser .username : ' '
204
+ },
205
+ isMessageActions () {
206
+ return (
207
+ this .messageActions .length && this .messageReply && ! this .message .deleted
208
+ )
206
209
}
207
210
},
208
211
@@ -223,7 +226,7 @@ export default {
223
226
},
224
227
onLeaveMessage () {
225
228
this .imageHover = false
226
- this .messageReply = false
229
+ if ( ! this . optionsOpened ) this .messageReply = false
227
230
this .hoverMessageId = null
228
231
},
229
232
openFile () {
@@ -233,9 +236,6 @@ export default {
233
236
this .closeOptions ()
234
237
this .$emit (' messageActionHandler' , { action, message: this .message })
235
238
},
236
- closeOptions () {
237
- this .optionsOpened = false
238
- },
239
239
checkImageFile () {
240
240
if (! this .message .file ) return
241
241
const imageTypes = [' png' , ' jpg' ]
@@ -267,6 +267,10 @@ export default {
267
267
if (optionsTopPosition) this .menuOptionsHeight = 28
268
268
else this .menuOptionsHeight = - menuOptionsHeight
269
269
}, 0 )
270
+ },
271
+ closeOptions () {
272
+ this .optionsOpened = false
273
+ if (this .hoverMessageId !== this .message ._id ) this .messageReply = false
270
274
}
271
275
}
272
276
}
@@ -472,9 +476,16 @@ export default {
472
476
}
473
477
474
478
.message-options {
479
+ background : rgba (0 , 0 , 0 , 0.25 );
480
+ border-radius : 50% ;
475
481
position : absolute ;
476
- top : 5px ;
477
- right : 10px ;
482
+ top : 7px ;
483
+ right : 14px ;
484
+
485
+ svg {
486
+ height : 20px ;
487
+ width : 20px ;
488
+ }
478
489
}
479
490
480
491
.menu-options {
0 commit comments