7df88e338a
Learn more about skidding here: https://popper.js.org/docs/v2/modifiers/offset/#skidding-1 This change has two goals: - Fixes an issue when the user had zoomed the viewport and the popper would position on the opposite side - Makes msg actions arguably more pleasant to the eye by preventing it to be right aligned with the message container
49 lines
1.2 KiB
JavaScript
49 lines
1.2 KiB
JavaScript
import Component from "@ember/component";
|
|
import { action } from "@ember/object";
|
|
import { createPopper } from "@popperjs/core";
|
|
import { schedule } from "@ember/runloop";
|
|
import { inject as service } from "@ember/service";
|
|
|
|
const MSG_ACTIONS_VERTICAL_PADDING = -10;
|
|
|
|
export default Component.extend({
|
|
tagName: "",
|
|
|
|
chatStateManager: service(),
|
|
|
|
messageActions: null,
|
|
|
|
didReceiveAttrs() {
|
|
this._super(...arguments);
|
|
|
|
this.popper?.destroy();
|
|
|
|
schedule("afterRender", () => {
|
|
this.popper = createPopper(
|
|
document.querySelector(
|
|
`.chat-message-container[data-id="${this.message.id}"]`
|
|
),
|
|
document.querySelector(
|
|
`.chat-message-actions-container[data-id="${this.message.id}"] .chat-message-actions`
|
|
),
|
|
{
|
|
placement: "top-end",
|
|
modifiers: [
|
|
{ name: "hide", enabled: true },
|
|
{ name: "eventListeners", options: { scroll: false } },
|
|
{
|
|
name: "offset",
|
|
options: { offset: [-2, MSG_ACTIONS_VERTICAL_PADDING] },
|
|
},
|
|
],
|
|
}
|
|
);
|
|
});
|
|
},
|
|
|
|
@action
|
|
handleSecondaryButtons(id) {
|
|
this.messageActions?.[id]?.();
|
|
},
|
|
});
|