diff --git a/assets/css/app.css b/assets/css/app.css index be0adb2..5bb4da1 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -83,6 +83,14 @@ -webkit-backdrop-filter: blur(18px) saturate(140%); } +#room-reaction-fab, +#room-reaction-fab button, +#room-reaction-fab img { + -webkit-touch-callout: none; + -webkit-user-select: none; + user-select: none; +} + #focus-slot:fullscreen { height: 100dvh; max-height: none; diff --git a/assets/js/app.js b/assets/js/app.js index ebda2c7..836512c 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -730,6 +730,7 @@ Hooks.RoomReactionFab = { if (!this.longPressed) this.send(this.reaction); }; this.onPointerCancel = () => window.clearTimeout(this.pressTimer); + this.onContextMenu = (event) => event.preventDefault(); this.onClick = (event) => { if (event.detail === 0) this.send(this.reaction); }; @@ -759,6 +760,7 @@ Hooks.RoomReactionFab = { this.trigger.addEventListener("pointerdown", this.onPointerDown); this.trigger.addEventListener("pointerup", this.onPointerUp); this.trigger.addEventListener("pointercancel", this.onPointerCancel); + this.trigger.addEventListener("contextmenu", this.onContextMenu); this.trigger.addEventListener("click", this.onClick); this.trigger.addEventListener("keydown", this.onKeyDown); this.picker.addEventListener("click", this.onPickerClick); @@ -769,6 +771,7 @@ Hooks.RoomReactionFab = { this.trigger.removeEventListener("pointerdown", this.onPointerDown); this.trigger.removeEventListener("pointerup", this.onPointerUp); this.trigger.removeEventListener("pointercancel", this.onPointerCancel); + this.trigger.removeEventListener("contextmenu", this.onContextMenu); this.trigger.removeEventListener("click", this.onClick); this.trigger.removeEventListener("keydown", this.onKeyDown); this.picker.removeEventListener("click", this.onPickerClick); diff --git a/lib/claper_web/live/event_live/show.html.heex b/lib/claper_web/live/event_live/show.html.heex index 780f57e..72a17cb 100644 --- a/lib/claper_web/live/event_live/show.html.heex +++ b/lib/claper_web/live/event_live/show.html.heex @@ -365,7 +365,7 @@ :if={@state.message_reaction_enabled} id="room-reaction-fab" phx-hook="RoomReactionFab" - class="absolute bottom-20 left-4 z-20 flex flex-col items-center gap-2" + class="absolute bottom-20 left-4 z-20 flex w-14 flex-col items-center gap-2" >