butter/keanu-weblite
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Fix cropped context menus

Browse source 
Also, change color of message three dot menu.
This commit is contained in:
N-Pex 2023-10-25 15:08:23 +02:00
parent 14f54c8d35
commit 94f571b700
2 changed files with 16 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/assets/css/chat.scss
View file

@ -350,9 +350,9 @@ body {
display: inline-block; display: inline-block;
vertical-align: top !important; vertical-align: top !important;
.v-icon { .v-icon {
color: #eeeeee; color: #595959;
&:hover { &:hover {
color: #888888; color: #000000;
} }
} }
} }
@ -754,6 +754,7 @@ body {
height: 34px; height: 34px;
border-radius: 22px; border-radius: 22px;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.15); box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.15);
white-space: nowrap;
} }
.avatar-operations { .avatar-operations {

17
src/components/Chat.vue
View file

@ -70,15 +70,22 @@
touchStart(e, event); touchStart(e, event);
} }
" v-on:touchend="touchEnd" v-on:touchcancel="touchCancel" v-on:touchmove="touchMove"> " v-on:touchend="touchEnd" v-on:touchcancel="touchCancel" v-on:touchmove="touchMove">
<!-- Note: For threaded media messages, IF there is only one item we show that media item as a single component.
We might therefore get calls to v-on:context-menu that has the event set to that single media item, not the top level thread event
that is really displayed in the flow. Therefore, we rewrite these events with "{event: event, anchor: $event.anchor}",
see below. Otherwise things like context menus won't work as designed.
-->
<component :is="componentForEvent(event)" :room="room" :originalEvent="event" :nextEvent="filteredEvents[index + 1]" <component :is="componentForEvent(event)" :room="room" :originalEvent="event" :nextEvent="filteredEvents[index + 1]"
:timelineSet="timelineSet" v-on:send-quick-reaction.stop="sendQuickReaction" :timelineSet="timelineSet" v-on:send-quick-reaction.stop="sendQuickReaction"
:componentFn="componentForEvent" :componentFn="componentForEvent"
v-on:context-menu="showContextMenuForEvent($event)" v-on:own-avatar-clicked="viewProfile" v-on:context-menu="showContextMenuForEvent({event: event, anchor: $event.anchor})"
v-on:other-avatar-clicked="showAvatarMenuForEvent($event)" v-on:download="download(event)" v-on:own-avatar-clicked="viewProfile"
v-on:other-avatar-clicked="showAvatarMenuForEvent({event: event, anchor: $event.anchor})"
v-on:download="download(event)"
v-on:poll-closed="pollWasClosed(event)" v-on:poll-closed="pollWasClosed(event)"
v-on:more=" v-on:more="
isEmojiQuickReaction = true isEmojiQuickReaction = true
showMoreMessageOperations($event) showMoreMessageOperations({event: event, anchor: $event.anchor})
" "
/> />
<!-- <div v-if="debugging" style="user-select:text">EventID: {{ event.getId() }}</div> --> <!-- <div v-if="debugging" style="user-select:text">EventID: {{ event.getId() }}</div> -->
@ -862,8 +869,10 @@ export default {
var rectOps = this.$refs.messageOperations.$el.getBoundingClientRect(); var rectOps = this.$refs.messageOperations.$el.getBoundingClientRect();
top = rectAnchor.top - rectChat.top - 50; top = rectAnchor.top - rectChat.top - 50;
left = rectAnchor.left - rectChat.left - 75; left = rectAnchor.left - rectChat.left - 75;
if (left + rectOps.width >= rectChat.right) { if (left + rectOps.width + 10 >= rectChat.right) {
left = rectChat.right - rectOps.width - 10; // No overflow left = rectChat.right - rectOps.width - 10; // No overflow
} else if (left < 0) {
left = 0;
} }
} }
} }