Skip to content

Commit e18d0e7

Browse files
committed
(UI) fix message menu side position
1 parent d9f4ce2 commit e18d0e7

File tree

1 file changed

+26
-8
lines changed

1 file changed

+26
-8
lines changed

src/ChatWindow/ChatMessage.vue

Lines changed: 26 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@
9797
</span>
9898
</div>
9999

100-
<transition name="slide-fade">
100+
<transition name="slide-left">
101101
<div
102102
class="svg-button message-options"
103103
v-if="messageActions.length && messageReply && !message.deleted"
@@ -107,11 +107,15 @@
107107
</div>
108108
</transition>
109109

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+
>
111114
<div
112115
v-if="optionsOpened"
113116
v-click-outside="closeOptions"
114117
class="menu-options"
118+
:class="{ 'menu-left': message.sender_id !== 'me' }"
115119
>
116120
<div class="menu-list">
117121
<div v-for="action in messageActions" :key="action.name">
@@ -451,8 +455,8 @@ export default {
451455
452456
.menu-options {
453457
position: absolute;
454-
right: 10px;
455-
top: 20px;
458+
right: 15px;
459+
top: 28px;
456460
z-index: 9999;
457461
min-width: 150px;
458462
display: inline-block;
@@ -466,6 +470,10 @@ export default {
466470
0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
467471
}
468472
473+
.menu-left {
474+
right: -118px;
475+
}
476+
469477
.menu-list {
470478
border-radius: 4px;
471479
display: block;
@@ -533,15 +541,25 @@ export default {
533541
margin: -3px 0 0 3px;
534542
}
535543
536-
.slide-fade-enter-active {
544+
.slide-left-enter-active,
545+
.slide-right-enter-active {
537546
transition: all 0.3s ease;
538547
}
539-
.slide-fade-leave-active {
548+
549+
.slide-left-leave-active,
550+
.slide-right-leave-active {
540551
transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
541552
}
542-
.slide-fade-enter,
543-
.slide-fade-leave-to {
553+
554+
.slide-left-enter,
555+
.slide-left-leave-to {
544556
transform: translateX(10px);
545557
opacity: 0;
546558
}
559+
560+
.slide-right-enter,
561+
.slide-right-leave-to {
562+
transform: translateX(-10px);
563+
opacity: 0;
564+
}
547565
</style>

0 commit comments

Comments
 (0)