New UI: Use the consistent buttons on the device show page (#1823)

nerves-hub · Jan 23, 2025 · f8c1099 · f8c1099
1 parent 53e6dc5
commit f8c1099
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 58 deletions.
diff --git a/lib/nerves_hub_web/components/core_components.ex b/lib/nerves_hub_web/components/core_components.ex
@@ -188,7 +188,7 @@ defmodule NervesHubWeb.CoreComponents do
       <.button phx-click="go" class="ml-2">Send!</.button>
   """
   attr(:style, :string, default: "secondary")
-  attr(:type, :string, default: nil)
+  attr(:type, :string, default: "button")
   attr(:class, :string, default: nil)
   attr(:rest, :global, include: ~w(disabled form name value href navigate download))
 

diff --git a/lib/nerves_hub_web/components/icons.ex b/lib/nerves_hub_web/components/icons.ex
@@ -82,4 +82,30 @@ defmodule NervesHubWeb.Components.Icons do
     </svg>
     """
   end
+
+  def icon(%{name: "connection"} = assigns) do
+    ~H"""
+    <svg class={["size-5", @class]} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M13.5714 11.4644C12.6574 10.5596 11.3947 9.99992 9.99996 9.99992C8.60523 9.99992 7.34254 10.5596 6.42853 11.4644M15.9523 9.10736C14.429 7.59933 12.3245 6.66659 9.99996 6.66659C7.67541 6.66659 5.57093 7.59933 4.04758 9.10736M18.3333 6.75034C16.2006 4.63909 13.2543 3.33325 9.99996 3.33325C6.74559 3.33325 3.79931 4.63909 1.66663 6.75034M11.6835 14.9999C11.6835 15.9204 10.9298 16.6666 9.99996 16.6666C9.07014 16.6666 8.31637 15.9204 8.31637 14.9999C8.31637 14.5397 8.50481 14.123 8.80948 13.8214C9.11415 13.5198 9.53505 13.3333 9.99996 13.3333C10.4649 13.3333 10.8858 13.5198 11.1904 13.8214C11.4951 14.123 11.6835 14.5397 11.6835 14.9999Z"
+        stroke-width="1.2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+    """
+  end
+
+  def icon(%{name: "identify"} = assigns) do
+    ~H"""
+    <svg class={["size-5", @class]} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M10.0001 10.0001V10.0009M10.0001 1.66675V5.00008M10.0001 15.0001V18.3334M18.3334 10.0001H15.0001M5.00008 10.0001H1.66675M16.6667 10.0001C16.6667 13.682 13.682 16.6667 10.0001 16.6667C6.31818 16.6667 3.33341 13.682 3.33341 10.0001C3.33341 6.31818 6.31818 3.33341 10.0001 3.33341C13.682 3.33341 16.6667 6.31818 16.6667 10.0001Z"
+        stroke-width="1.2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+    """
+  end
 end
diff --git a/lib/nerves_hub_web/live/devices/show-new.html.heex b/lib/nerves_hub_web/live/devices/show-new.html.heex
@@ -10,63 +10,17 @@
     <span class="text-zinc-50 font-semibold">{@device.identifier}</span>
   </div>
   <div class="flex items-center gap-2 ml-auto mr-6">
-    <button
-      class="box-content h-5 py-1.5 px-3 flex gap-2 justify-center items-center rounded border border-base-600 bg-zinc-800 text-sm font-medium text-zinc-300 disabled:text-zinc-500"
-      aria-label="Reboot device"
-      type="button"
-      phx-click="reboot"
-      data-confirm="Are you sure?"
-      disabled={disconnected?(@device_connection)}
-    >
-      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-        <path
-          d="M14.4097 4.99992C15.7938 6.22149 16.6667 8.00876 16.6667 9.99992C16.6667 13.6818 13.6819 16.6666 10 16.6666C6.31814 16.6666 3.33337 13.6818 3.33337 9.99992C3.33337 8.00876 4.2063 6.22149 5.59033 4.99992M10 9.99992V3.33325"
-          stroke="#A1A1AA"
-          stroke-width="1.2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-      </svg>
-      <span class="text-sm font-medium">Reboot</span>
-    </button>
-
-    <button
-      class="box-content h-5 py-1.5 px-3 flex gap-2 justify-center items-center rounded border border-base-600 bg-zinc-800 text-sm font-medium text-zinc-300 disabled:text-zinc-500"
-      aria-label="Reconnect device"
-      type="button"
-      phx-click="reconnect"
-      disabled={disconnected?(@device_connection)}
-    >
-      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-        <path
-          d="M13.5714 11.4644C12.6574 10.5596 11.3947 9.99992 9.99996 9.99992C8.60523 9.99992 7.34254 10.5596 6.42853 11.4644M15.9523 9.10736C14.429 7.59933 12.3245 6.66659 9.99996 6.66659C7.67541 6.66659 5.57093 7.59933 4.04758 9.10736M18.3333 6.75034C16.2006 4.63909 13.2543 3.33325 9.99996 3.33325C6.74559 3.33325 3.79931 4.63909 1.66663 6.75034M11.6835 14.9999C11.6835 15.9204 10.9298 16.6666 9.99996 16.6666C9.07014 16.6666 8.31637 15.9204 8.31637 14.9999C8.31637 14.5397 8.50481 14.123 8.80948 13.8214C9.11415 13.5198 9.53505 13.3333 9.99996 13.3333C10.4649 13.3333 10.8858 13.5198 11.1904 13.8214C11.4951 14.123 11.6835 14.5397 11.6835 14.9999Z"
-          stroke="#A1A1AA"
-          stroke-width="1.2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-      </svg>
-      <span class="text-sm font-medium">Reconnect</span>
-    </button>
-
-    <button
-      class="box-content h-5 py-1.5 px-3 flex gap-2 justify-center items-center rounded border border-base-600 bg-zinc-800 text-sm font-medium text-zinc-300 disabled:text-zinc-500"
-      aria-label="Identify device"
-      type="button"
-      phx-click="identify"
-      disabled={disconnected?(@device_connection)}
-    >
-      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path
-          d="M10.0001 10.0001V10.0009M10.0001 1.66675V5.00008M10.0001 15.0001V18.3334M18.3334 10.0001H15.0001M5.00008 10.0001H1.66675M16.6667 10.0001C16.6667 13.682 13.682 16.6667 10.0001 16.6667C6.31818 16.6667 3.33341 13.682 3.33341 10.0001C3.33341 6.31818 6.31818 3.33341 10.0001 3.33341C13.682 3.33341 16.6667 6.31818 16.6667 10.0001Z"
-          stroke="#A1A1AA"
-          stroke-width="1.2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-      </svg>
-      <span class="text-sm font-medium">Identify</span>
-    </button>
+    <.button aria-label="Reboot device" style="secondary" phx-click="reboot" data-confirm="Are you sure you want to reboot the device?" disabled={disconnected?(@device_connection)}>
+      <.icon name="power" />Reboot
+    </.button>
+
+    <.button aria-label="Reconnect device" style="secondary" phx-click="reconnect" disabled={disconnected?(@device_connection)}>
+      <.icon name="connection" />Reconnect
+    </.button>
+
+    <.button aria-label="Identify device" style="secondary" phx-click="identify" disabled={disconnected?(@device_connection)}>
+      <.icon name="identify" />Identify
+    </.button>
   </div>
   <div class="h-full border-l flex items-center justify-center border-base-700 bg-base-900">
     <a :if={Application.get_env(:nerves_hub, :new_ui)} href={"/ui/switch?return_to=#{@current_path}"} class="">