From f445c74b98180cb7e435829ea0831fbd201ffa1b Mon Sep 17 00:00:00 2001 From: Alex Lion Date: Thu, 16 Jul 2026 22:20:04 +0200 Subject: [PATCH] Prevent reaction icon drag and right-click --- assets/css/app.css | 8 +++++ assets/js/app.js | 3 ++ lib/claper_web/live/event_live/show.html.heex | 35 +++++++++++++++---- test/claper_web/live/event_live/show_test.exs | 2 ++ 4 files changed, 41 insertions(+), 7 deletions(-) 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" >
- +
@@ -453,7 +474,7 @@ rows: 1, maxlength: 255, class: - "min-h-9 max-h-16 min-w-0 flex-1 resize-none border-0 bg-transparent px-2 py-2 text-sm leading-5 text-white outline-hidden placeholder:text-white/70 focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50", + "min-h-9 max-h-16 min-w-0 flex-1 resize-none border-0 bg-transparent px-2 py-2 text-base leading-5 text-white outline-hidden placeholder:text-white/70 focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50", placeholder: if(!@state.anonymous_chat_enabled && @nickname in [nil, ""], do: gettext("Set your nickname to participate"), diff --git a/test/claper_web/live/event_live/show_test.exs b/test/claper_web/live/event_live/show_test.exs index 8d989c5..4f17f0b 100644 --- a/test/claper_web/live/event_live/show_test.exs +++ b/test/claper_web/live/event_live/show_test.exs @@ -31,6 +31,8 @@ defmodule ClaperWeb.EventLive.ShowTest do assert "attendee-composer" in classes(document, "#post-form") assert Floki.find(document, "#room-topbar") != [] assert Floki.find(document, "#room-composer") != [] + assert Floki.attribute(document, "[data-reaction-icon]", "draggable") == ["false"] + assert "pointer-events-none" in classes(document, "[data-reaction-icon]") assert Floki.find(document, "#top-identity-button") == [] assert Floki.find(document, "#composer-identity-button") != []