diff --git a/assets/ui-rework/app.css b/assets/ui-rework/app.css index e522d4602..129a4f93a 100644 --- a/assets/ui-rework/app.css +++ b/assets/ui-rework/app.css @@ -123,16 +123,6 @@ font-size: 12px; } - .action-button { - @apply border border-base-600 bg-base-800 text-base-300; - display: flex; - gap: 8px; - padding: 6px 12px; - justify-content: center; - align-items: center; - border-radius: 4px; - } - .pager-button { @apply rounded-sm px-[12px] py-[6px]; font-size: 14px; diff --git a/lib/nerves_hub_web.ex b/lib/nerves_hub_web.ex index 20e393e30..9153b12f7 100644 --- a/lib/nerves_hub_web.ex +++ b/lib/nerves_hub_web.ex @@ -85,6 +85,9 @@ defmodule NervesHubWeb do import NervesHubWeb.Helpers.Authorization + import NervesHubWeb.Components.Icons + import NervesHubWeb.CoreComponents, only: [button: 1, input: 1, core_label: 1, error: 1] + # Shortcut for generating JS commands alias Phoenix.LiveView.JS @@ -137,6 +140,9 @@ defmodule NervesHubWeb do import NervesHubWeb.Helpers.Authorization + import NervesHubWeb.Components.Icons + import NervesHubWeb.CoreComponents, only: [button: 1, input: 1, core_label: 1, error: 1] + def ok(socket), do: {:ok, socket} def noreply(socket), do: {:noreply, socket} diff --git a/lib/nerves_hub_web/components/core_components.ex b/lib/nerves_hub_web/components/core_components.ex index 3c0087127..f0b287838 100644 --- a/lib/nerves_hub_web/components/core_components.ex +++ b/lib/nerves_hub_web/components/core_components.ex @@ -187,12 +187,69 @@ defmodule NervesHubWeb.CoreComponents do <.button>Send! <.button phx-click="go" class="ml-2">Send! """ + attr(:style, :string, default: "secondary") attr(:type, :string, default: nil) attr(:class, :string, default: nil) - attr(:rest, :global, include: ~w(disabled form name value)) + attr(:rest, :global, include: ~w(disabled form name value href navigate download)) slot(:inner_block, required: true) + def button(%{type: "link", style: "secondary"} = assigns) do + ~H""" + <.link + class={[ + "phx-submit-loading:opacity-75 flex items-center justify-center px-3 py-1.5 gap-2 rounded", + "bg-zinc-800 hover:bg-zinc-700 active:bg-indigo-500 disabled:bg-zinc-800", + "border rounded border-zinc-600 active:border-indigo-500", + "stroke-zinc-400 active:stroke-zinc-100 disabled:stroke-zinc-600", + "text-sm font-medium text-zinc-300 hover:text-neutral-50 active:text-neutral-50 disabled:text-zinc-500", + @class + ]} + {@rest} + > + {render_slot(@inner_block)} + + """ + end + + def button(%{style: "primary"} = assigns) do + ~H""" + + """ + end + + def button(%{style: "secondary"} = assigns) do + ~H""" + + """ + end + def button(assigns) do ~H""" - + <.button style="secondary" type="submit"> + <.icon name="save" /> Save changes + diff --git a/lib/nerves_hub_web/components/device_page/details.ex b/lib/nerves_hub_web/components/device_page/details.ex index e255544b2..58ec41c50 100644 --- a/lib/nerves_hub_web/components/device_page/details.ex +++ b/lib/nerves_hub_web/components/device_page/details.ex @@ -294,7 +294,7 @@ defmodule NervesHubWeb.Components.DevicePage.Details do
- Note: Device will be removed from the deployment upon connection if the aarch and platform doesn't match. + Please note: The device will be removed from the deployment upon connection if the aarch and platform don't match.
@@ -308,13 +308,9 @@ defmodule NervesHubWeb.Components.DevicePage.Details do
- +
@@ -335,16 +331,15 @@ defmodule NervesHubWeb.Components.DevicePage.Details do An update is available in the assigned deployment.
- +
@@ -359,14 +354,10 @@ defmodule NervesHubWeb.Components.DevicePage.Details do
- +
@@ -434,9 +425,9 @@ defmodule NervesHubWeb.Components.DevicePage.Details do
- <.link navigate={~p"/org/#{@org.name}/#{@product.name}/scripts"} class="box-content h-5 py-1.5 px-3 rounded border border-base-600 bg-zinc-800 text-sm font-medium text-zinc-300"> - Add a support script - + <.button type="link" navigate={~p"/org/#{@org.name}/#{@product.name}/scripts/new"} aria-label="Add a support script"> + <.icon name="add" />Add a support script +
diff --git a/lib/nerves_hub_web/components/device_page/settings.ex b/lib/nerves_hub_web/components/device_page/settings.ex index 89dfad9cc..dd48dbf06 100644 --- a/lib/nerves_hub_web/components/device_page/settings.ex +++ b/lib/nerves_hub_web/components/device_page/settings.ex @@ -40,20 +40,9 @@ defmodule NervesHubWeb.Components.DevicePage.Settings do
General settings
-
- -
+ <.button style="secondary" type="submit"> + <.icon name="save" /> Save changes +
@@ -79,13 +68,13 @@ defmodule NervesHubWeb.Components.DevicePage.Settings do

--%> - + <.input field={@settings_form[:description]} label="Description" placeholder="eg. sensor hub at customer X" /> - + <.input field={@settings_form[:tags]} value={tags_to_string(@settings_form[:tags])} label="Tags" placeholder="eg. batch-123" />
- + <.input field={@settings_form[:first_connect_code]} label="First connect code" type="textarea" rows="10" />
Make sure this is valid Elixir and will not crash the device
diff --git a/lib/nerves_hub_web/components/icons.ex b/lib/nerves_hub_web/components/icons.ex new file mode 100644 index 000000000..9d015392f --- /dev/null +++ b/lib/nerves_hub_web/components/icons.ex @@ -0,0 +1,85 @@ +defmodule NervesHubWeb.Components.Icons do + use Phoenix.Component + + @doc """ + A little icon helper. + + ## Examples + + <.icon name="save" /> + <.icon name="trash" class="ml-1 w-3 h-3" /> + """ + attr(:name, :string, required: true) + attr(:class, :string, default: nil) + + def icon(%{name: "save"} = assigns) do + ~H""" + + + + """ + end + + def icon(%{name: "export"} = assigns) do + ~H""" + + + + """ + end + + def icon(%{name: "add"} = assigns) do + ~H""" + + + + """ + end + + def icon(%{name: "filter"} = assigns) do + ~H""" + + + + """ + end + + def icon(%{name: "power"} = assigns) do + ~H""" + + + + """ + end + + def icon(%{name: "download"} = assigns) do + ~H""" + + + + """ + end +end diff --git a/lib/nerves_hub_web/live/archive_templates/show_archive_template_new.html.heex b/lib/nerves_hub_web/live/archive_templates/show_archive_template_new.html.heex index 16578b3a3..26dfa5f7d 100644 --- a/lib/nerves_hub_web/live/archive_templates/show_archive_template_new.html.heex +++ b/lib/nerves_hub_web/live/archive_templates/show_archive_template_new.html.heex @@ -33,17 +33,9 @@
- <.link class="flex px-3 py-1.5 gap-2 rounded border border-base-600 bg-zinc-800" href={~p"/org/#{@org.name}/#{@product.name}/archives/#{@archive.uuid}/download"} download> - - - - Download - + <.button type="link" href={~p"/org/#{@org.name}/#{@product.name}/archives/#{@archive.uuid}/download"} download> + <.icon name="download" />Download +
<%= if Enum.empty?(@entries) do %> diff --git a/lib/nerves_hub_web/live/deployments/show-new.html.heex b/lib/nerves_hub_web/live/deployments/show-new.html.heex index 9156afb0c..b8f34cd2a 100644 --- a/lib/nerves_hub_web/live/deployments/show-new.html.heex +++ b/lib/nerves_hub_web/live/deployments/show-new.html.heex @@ -10,25 +10,15 @@ {@deployment.name}
- + <.icon name="power" />{(@deployment.is_active && "Pause") || "Resume"} +
@@ -45,8 +35,6 @@
<%= if Enum.empty?(@devices) && !@currently_filtering do %> @@ -288,7 +267,8 @@
- + <.input field={@form[:name]} label="Name" placeholder="eg. System Debugging" />
- + <.input field={@form[:text]} label="Script code" type="textarea" rows="10" />
Make sure this is valid Elixir and will not crash the device
- + <.button style="secondary" type="submit"> + <.icon name="save" /> Save changes +