97
97
</span >
98
98
</div >
99
99
100
- <transition name =" slide-fade " >
100
+ <transition name =" slide-left " >
101
101
<div
102
102
class =" svg-button message-options"
103
103
v-if =" messageActions.length && messageReply && !message.deleted"
107
107
</div >
108
108
</transition >
109
109
110
- <transition name =" slide-fade" v-if =" messageActions.length" >
110
+ <transition
111
+ :name =" message.sender_id === 'me' ? 'slide-left' : 'slide-right'"
112
+ v-if =" messageActions.length"
113
+ >
111
114
<div
112
115
v-if =" optionsOpened"
113
116
v-click-outside =" closeOptions"
114
117
class =" menu-options"
118
+ :class =" { 'menu-left': message.sender_id !== 'me' }"
115
119
>
116
120
<div class =" menu-list" >
117
121
<div v-for =" action in messageActions" :key =" action.name" >
@@ -451,8 +455,8 @@ export default {
451
455
452
456
.menu-options {
453
457
position : absolute ;
454
- right : 10 px ;
455
- top : 20 px ;
458
+ right : 15 px ;
459
+ top : 28 px ;
456
460
z-index : 9999 ;
457
461
min-width : 150px ;
458
462
display : inline-block ;
@@ -466,6 +470,10 @@ export default {
466
470
0 8px 10px 1px rgba (0 , 0 , 0 , 0.14 ), 0 3px 14px 2px rgba (0 , 0 , 0 , 0.12 );
467
471
}
468
472
473
+ .menu-left {
474
+ right : -118px ;
475
+ }
476
+
469
477
.menu-list {
470
478
border-radius : 4px ;
471
479
display : block ;
@@ -533,15 +541,25 @@ export default {
533
541
margin : -3px 0 0 3px ;
534
542
}
535
543
536
- .slide-fade-enter-active {
544
+ .slide-left-enter-active ,
545
+ .slide-right-enter-active {
537
546
transition : all 0.3s ease ;
538
547
}
539
- .slide-fade-leave-active {
548
+
549
+ .slide-left-leave-active ,
550
+ .slide-right-leave-active {
540
551
transition : all 0.2s cubic-bezier (1 , 0.5 , 0.8 , 1 );
541
552
}
542
- .slide-fade-enter ,
543
- .slide-fade-leave-to {
553
+
554
+ .slide-left-enter ,
555
+ .slide-left-leave-to {
544
556
transform : translateX (10px );
545
557
opacity : 0 ;
546
558
}
559
+
560
+ .slide-right-enter ,
561
+ .slide-right-leave-to {
562
+ transform : translateX (-10px );
563
+ opacity : 0 ;
564
+ }
547
565
</style >
0 commit comments