diff --git a/app/lib/prymn_web/components/button.ex b/app/lib/prymn_web/components/button.ex index 34ec4d8..6a2fd15 100644 --- a/app/lib/prymn_web/components/button.ex +++ b/app/lib/prymn_web/components/button.ex @@ -31,24 +31,30 @@ defmodule PrymnWeb.Button do def secondary(assigns), do: button(assign(assigns, :variant, "secondary")) - defp button_assigns(assigns) do - assign( - assigns, - :style, - [ - "inline-flex justify-center items-center rounded-2xl shadow transition-colors active:shadow-sm", - by_variant(assigns.variant), - by_size(assigns.size), - assigns[:class] - ] - ) - end + @doc """ + Render a tertiary variant button. - defp button(%{rest: %{href: _}} = assigns), do: link_button(assigns) - defp button(%{rest: %{navigate: _}} = assigns), do: link_button(assigns) - defp button(%{rest: %{patch: _}} = assigns), do: link_button(assigns) + ## Examples - defp button(assigns) do + <.tertiary>Click me + <.tertiary href="/a/path" size="sm">Link button + """ + def tertiary(assigns), do: button(assign(assigns, :variant, "tertiary")) + + @doc """ + Render a button. + """ + attr :variant, :string, default: "primary" + attr :size, :string, default: "md", values: ~w(sm md lg) + attr :class, :string, default: nil + attr :rest, :global, include: ~w(href navigate patch) + slot :inner_block, required: true + + def button(%{rest: %{href: _}} = assigns), do: link_button(assigns) + def button(%{rest: %{navigate: _}} = assigns), do: link_button(assigns) + def button(%{rest: %{patch: _}} = assigns), do: link_button(assigns) + + def button(assigns) do assigns = button_assigns(assigns) ~H""" @@ -58,6 +64,19 @@ defmodule PrymnWeb.Button do """ end + defp button_assigns(assigns) do + assign( + assigns, + :style, + [ + "inline-flex justify-center items-center rounded-2xl transition-colors", + by_variant(assigns.variant), + by_size(assigns.size), + assigns[:class] + ] + ) + end + defp link_button(assigns) do assigns = button_assigns(assigns) @@ -73,9 +92,14 @@ defmodule PrymnWeb.Button do defp by_size("lg"), do: "text-lg px-7 py-3" defp by_variant("primary"), - do: "font-medium bg-black text-white hover:bg-slate-800 active:text-white/80" + do: + "font-medium bg-black text-white shadow active:shadow-sm hover:bg-slate-800 active:text-white/80" defp by_variant("secondary"), do: - "font-medium bg-transparent border border-slate-800 text-slate-800 hover:bg-slate-800 hover:text-white active:text-white/80" + "font-medium bg-transparent border shadow active:shadow-sm border-slate-800 text-slate-800 hover:bg-slate-800 hover:text-white active:text-white/80" + + defp by_variant("tertiary"), + do: + "font-medium border-none text-black hover:bg-slate-50 focus:bg-slate-50 active:text-black/80" end diff --git a/app/lib/prymn_web/components/core_components.ex b/app/lib/prymn_web/components/core_components.ex index 8dde58c..6735c66 100644 --- a/app/lib/prymn_web/components/core_components.ex +++ b/app/lib/prymn_web/components/core_components.ex @@ -14,7 +14,7 @@ defmodule PrymnWeb.CoreComponents do Icons are provided by [heroicons](https://heroicons.com). See `icon/1` for usage. """ - use Phoenix.Component + use Phoenix.Component, global_prefixes: ~w(x-) alias Phoenix.LiveView.JS import PrymnWeb.Gettext @@ -594,10 +594,21 @@ defmodule PrymnWeb.CoreComponents do attr :title, :string, default: nil attr :position, :string, default: "left", values: ~w(left right) - slot :button + slot :button do + attr :title, :string + attr :variant, :string, values: ~w(primary secondary tertiary) + attr :size, :string, values: ~w(sm md lg) + end + slot :item def dropdown(assigns) do + assigns = + assign(assigns, :style, [ + (assigns.position == "left" && "left-0") || "right-0", + "absolute z-10 w-56 rounded-xl bg-white shadow-lg ring-1 ring-black ring-opacity-5" + ]) + ~H"""
- + <%= for button <- @button do %> + + <%= render_slot(@button) %> + <.icon class="ml-2 h-4 w-4" name="hero-chevron-down" /> + + <% end %>
""" diff --git a/app/lib/prymn_web/components/layouts/app.html.heex b/app/lib/prymn_web/components/layouts/app.html.heex index f63ac91..c56ed79 100644 --- a/app/lib/prymn_web/components/layouts/app.html.heex +++ b/app/lib/prymn_web/components/layouts/app.html.heex @@ -16,16 +16,12 @@

- <.dropdown> - <:button> + <.dropdown position="right"> + <:button variant="tertiary"> <.icon name="hero-user-solid" /> - <:item> - <.link href={~p"/users/settings"}>Settings - - <:item> - <.link method="DELETE" href={~p"/auth/log_out"}>Log out - + <:item href={~p"/users/settings"}>Settings + <:item method="DELETE" href={~p"/auth/log_out"}>Log out
diff --git a/app/lib/prymn_web/live/server_live/index.ex b/app/lib/prymn_web/live/server_live/index.ex index be9c520..b19ef77 100644 --- a/app/lib/prymn_web/live/server_live/index.ex +++ b/app/lib/prymn_web/live/server_live/index.ex @@ -26,6 +26,50 @@ defmodule PrymnWeb.ServerLive.Index do |> assign(:healths, healths)} end + @impl true + def render(assigns) do + ~H""" +
+ <.header> + Your servers + + <%= "#{Enum.count(@servers)} servers" %> + + <:actions> + Connect a Server + + +
+ <.link + :for={server <- @servers} + navigate={~p"/servers/#{server}"} + class="group block rounded-lg bg-gray-100 p-5 shadow-sm shadow-gray-300 hover:bg-black hover:text-white" + > +
+

<%= server.name %>

+ <.server_status status={server.status} health={@healths[server.public_ip]} /> +
+
+ IP: <%= server.public_ip || "N/A" %> + + <%= for {name, task} <- Enum.take(@healths[server.public_ip].tasks, 1) do %> +
In progress: <%= name %>
+
<%= task.progress %>
+ <% end %> + +
+ +
+ <.modal :if={@live_action == :new} id="server-modal" show on_cancel={JS.patch(~p"/servers")}> + <.live_component module={PrymnWeb.ServerLive.NewServer} id={:new} patch={~p"/servers"} /> + +
+ """ + end + @impl true def handle_params(_params, _url, socket) do socket = @@ -63,7 +107,7 @@ defmodule PrymnWeb.ServerLive.Index do {:registered, nil} -> ~H""" - <.spinner class="w-5" /> + <.spinner size="md" /> """ {:registered, %Agents.Health{status: :connected}} -> diff --git a/app/lib/prymn_web/live/server_live/index.html.heex b/app/lib/prymn_web/live/server_live/index.html.heex deleted file mode 100644 index 9ff329d..0000000 --- a/app/lib/prymn_web/live/server_live/index.html.heex +++ /dev/null @@ -1,40 +0,0 @@ -
- <.header> - Your servers - - <%= "#{Enum.count(@servers)} servers" %> - - <:actions> - Connect a Server - - - -
- <.link - :for={server <- @servers} - navigate={~p"/servers/#{server}"} - class="group block rounded-lg bg-gray-100 p-5 shadow-sm shadow-gray-300 hover:bg-black hover:text-white" - > -
-

<%= server.name %>

- <.server_status status={server.status} health={@healths[server.public_ip]} /> -
-
- IP: <%= server.public_ip || "N/A" %> - - <%= for {name, task} <- Enum.take(@healths[server.public_ip].tasks, 1) do %> -
In progress: <%= name %>
-
<%= task.progress %>
- <% end %> - -
- -
- - <.modal :if={@live_action == :new} id="server-modal" show on_cancel={JS.patch(~p"/servers")}> - <.live_component module={PrymnWeb.ServerLive.NewServer} id={:new} patch={~p"/servers"} /> - -
diff --git a/app/lib/prymn_web/live/server_live/show.ex b/app/lib/prymn_web/live/server_live/show.ex index d7d9ecc..42ae63d 100644 --- a/app/lib/prymn_web/live/server_live/show.ex +++ b/app/lib/prymn_web/live/server_live/show.ex @@ -15,51 +15,36 @@ defmodule PrymnWeb.ServerLive.Show do def render(assigns) do ~H"""
-
+
<.dropdown title="Select a different server"> - <:button>Server <%= @server.name %> - <:item :for={server <- Enum.filter(@servers, fn s -> s.id != @server.id end)}> - <.link - patch={~p"/servers/#{server}"} - class="block text-sm text-gray-700" - role="menuitem" - > - <%= server.name %> - + <:button variant="tertiary">Server <%= @server.name %> + <:item + :for={server <- Enum.filter(@servers, fn s -> s.id != @server.id end)} + patch={~p"/servers/#{server}"} + > + <%= server.name %> - + <.indicator message={@health.message} />
- New App <.dropdown> - <:button> - Quick actions - + <:button variant="tertiary" size="sm">Quick actions <:item> Test + New App
<%= @server.public_ip %>