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

Fix message operations popup styling

Browse source 
Issue #65.
This commit is contained in:
N-Pex 2021-07-19 10:33:25 +02:00
parent 6d4a5b9833
commit 93ae0728d5
2 changed files with 38 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -525,9 +525,9 @@ $admin-fg: white;
position: absolute;
width: fit-content;
background-color: white;
height: 45px;
border-radius: 20px;
box-shadow: 4px 4px 8px #888888;
height: 44px;
border-radius: 22px;
box-shadow: 4px 4px 8px rgba(0,0,0,0.15);
// &.incoming {
// right: 30%;
// }
@ -544,7 +544,7 @@ $admin-fg: white;
height: 40px;
border-radius: 20px;
padding: 0px 20px;
box-shadow: 4px 4px 8px #888888;
box-shadow: 4px 4px 8px rgba(0,0,0,0.15);
}
.message-operations-picker {

54
src/components/Chat.vue
View file

@ -20,7 +20,7 @@
showContextMenu = false;
showContextMenuAnchor = null;
"
v-if="selectedEvent && showContextMenu"
v-if="showMessageOperations"
v-on:addreaction="addReaction"
v-on:addquickreaction="addQuickReaction"
v-on:addreply="addReply(selectedEvent)"
@ -609,6 +609,9 @@ export default {
/** An array of recent emojis. Used in the "message operations" popup. */
recentEmojis: [],
/** Calculated style for message operations. We position the "popup" at the selected message. */
opStyle: "",
};
},
@ -690,25 +693,8 @@ export default {
return "";
}
},
opStyle() {
// Calculate where to show the context menu.
//
const ref = this.selectedEvent && this.$refs[this.selectedEvent.getId()];
var top = 0;
var left = 0;
if (ref && ref[0]) {
if (this.showContextMenuAnchor) {
var rectAnchor = this.showContextMenuAnchor.getBoundingClientRect();
var rectChat =
this.$refs.messageOperationsStrut.getBoundingClientRect();
top = rectAnchor.top - rectChat.top;
left = rectAnchor.left - rectChat.left;
if (left + 250 > rectChat.right) {
left = rectChat.right - 250; // Pretty ugly, but we want to make sure it does not escape the screen, and we don't have the exakt width of it (yet)!
}
}
}
return "top:" + top + "px;left:" + left + "px";
showMessageOperations() {
return this.selectedEvent && this.showContextMenu;
},
avatarOpStyle() {
// Calculate where to show the context menu.
@ -783,6 +769,34 @@ export default {
}
},
},
showMessageOperations() {
if (this.showMessageOperations) {
this.$nextTick(() => {
// Calculate where to show the context menu.
//
const ref =
this.selectedEvent && this.$refs[this.selectedEvent.getId()];
var top = 0;
var left = 0;
if (ref && ref[0]) {
if (this.showContextMenuAnchor) {
var rectAnchor =
this.showContextMenuAnchor.getBoundingClientRect();
var rectChat =
this.$refs.messageOperationsStrut.getBoundingClientRect();
var rectOps =
this.$refs.messageOperations.$el.getBoundingClientRect();
top = rectAnchor.top - rectChat.top;
left = rectAnchor.left - rectChat.left;
if (left + rectOps.width >= rectChat.right) {
left = rectChat.right - rectOps.width - 10; // No overflow
}
}
}
this.opStyle = "top:" + top + "px;left:" + left + "px";
});
}
},
},
methods: {