feat: keyboard shortcuts to control screen settings #59 (#64)

ClaperCo · Oct 29, 2023 · 0747c63 · 0747c63
1 parent 231226a
commit 0747c63
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 7 deletions.
diff --git a/lib/claper_web/live/event_live/manage.html.heex b/lib/claper_web/live/event_live/manage.html.heex
@@ -773,39 +773,52 @@
               <ClaperWeb.Component.Input.check
                 key={:join_screen_visible}
                 checked={@state.join_screen_visible}
+                shortcut="Q"
               />
-              <span><%= gettext("Show instructions") %></span>
+              <span><%= gettext("Show instructions") %><code class="pl-1">(Q)</code></span>
             </div>
 
             <div class="flex space-x-2 items-center mt-3">
-              <ClaperWeb.Component.Input.check key={:chat_visible} checked={@state.chat_visible} />
-              <span><%= gettext("Show messages") %></span>
+              <ClaperWeb.Component.Input.check
+                key={:chat_visible}
+                checked={@state.chat_visible}
+                shortcut="W"
+              />
+              <span><%= gettext("Show messages") %><code class="pl-1">(W)</code></span>
             </div>
 
             <div class={"#{if !@current_poll, do: 'opacity-50'} flex space-x-2 items-center mt-3"}>
               <ClaperWeb.Component.Input.check
                 key={:poll_visible}
                 disabled={!@current_poll}
                 checked={@state.poll_visible}
+                shortcut="E"
               />
-              <span><%= gettext("Show poll results") %></span>
+              <span><%= gettext("Show poll results") %><code class="pl-1">(E)</code></span>
             </div>
           </div>
 
           <div>
             <span class="font-semibold text-lg"><%= gettext("Attendees settings") %></span>
 
             <div class="flex space-x-2 items-center mt-3">
-              <ClaperWeb.Component.Input.check key={:chat_enabled} checked={@state.chat_enabled} />
-              <span><%= gettext("Enable messages") %></span>
+              <ClaperWeb.Component.Input.check
+                key={:chat_enabled}
+                checked={@state.chat_enabled}
+                shortcut="A"
+              />
+              <span><%= gettext("Enable messages") %><code class="pl-1">(A)</code></span>
             </div>
 
             <div class="flex space-x-2 items-center mt-3">
               <ClaperWeb.Component.Input.check
                 key={:anonymous_chat_enabled}
                 checked={@state.anonymous_chat_enabled}
+                shortcut="S"
               />
-              <span><%= gettext("Enable anonymous messages") %></span>
+              <span>
+                <%= gettext("Enable anonymous messages") %><code class="pl-1">(S)</code>
+              </span>
             </div>
           </div>
         </div>

diff --git a/lib/claper_web/views/components/input_component.ex b/lib/claper_web/views/components/input_component.ex
@@ -70,6 +70,7 @@ defmodule ClaperWeb.Component.Input do
     assigns =
       assigns
       |> assign_new(:disabled, fn -> false end)
+      |> assign_new(:shortcut, fn -> nil end)
 
     ~H"""
     <!-- Enabled: "bg-indigo-600", Not Enabled: "bg-gray-200" -->
@@ -82,6 +83,8 @@ defmodule ClaperWeb.Component.Input do
       class={"#{if @checked, do: 'bg-primary-600', else: 'bg-gray-200'} relative inline-flex flex-shrink-0 h-8 w-14 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200"}
       role="switch"
       aria-checked="false"
+      phx-key={@shortcut}
+      phx-window-keydown={if @shortcut && not @disabled, do: checked(@checked, @key)}
     >
       <!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" -->
       <span class={"#{if @checked, do: 'translate-x-6', else: 'translate-x-0'} pointer-events-none relative inline-block h-7 w-7 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"}>