diff --git a/lib/freedive_web/live/service_live.ex b/lib/freedive_web/live/service_live.ex index 36d16c3..577fe16 100644 --- a/lib/freedive_web/live/service_live.ex +++ b/lib/freedive_web/live/service_live.ex @@ -18,7 +18,7 @@ defmodule FreediveWeb.ServiceLive do "sshd" => %{ name: "sshd", path: "/services/ssh", - icon: "blocks", + icon: "lock", description: "Secure Shell Daemon", enabled: true, running: true @@ -102,27 +102,28 @@ defmodule FreediveWeb.ServiceLive.Components do
Back
- <.panel_block_div> -
- <.icon for={@selected_item.name} color="auto" aria-hidden="true" /> -
-
-
- <.title is-4> - <%= @selected_item.name %> - + <.panel_media> + <:icon> + <.icon_raw for={@selected_item.icon} color="auto" size="3rem" aria-hidden="true" /> + <%!-- --%> + + + <.title is-4> + <%= @selected_item.name %> + + <.subtitle> + <%= @selected_item.description %> + + + <:actions> +
+
+ <.icon for="running" color="auto" aria-hidden="true" /> + <.icon for="enabled" color="auto" aria-hidden="true" /> +
-
- <.subtitle> - <%= @selected_item.description %> - -
-
- <.icon for="running" color="auto" aria-hidden="true" /> - <.icon for="enabled" color="auto" aria-hidden="true" /> -
-
- + + """ end diff --git a/lib/liliform/icon.ex b/lib/liliform/icon.ex index 72874a4..ca0fa3d 100644 --- a/lib/liliform/icon.ex +++ b/lib/liliform/icon.ex @@ -83,6 +83,24 @@ defmodule Liliform.Icon do """ end + @doc """ + Renders an icon without the icon-text wrapper. + """ + attr :for, :string, required: true, doc: "icon name" + attr :size, :string, default: nil, doc: "size of icon" + attr :color, :string, default: nil, doc: "color of icon" + attr :rest, :global + + def icon_raw(assigns) do + assigns = + assigns + |> set_bulma_classes() + + ~H""" + <.icon_svg for={@for} height={@size} width={@size} {icon_color(assigns)} {@rest} /> + """ + end + defp icon_svg(assigns) do base_assigns = assigns diff --git a/lib/liliform/media.ex b/lib/liliform/media.ex index 629fab9..119be2d 100644 --- a/lib/liliform/media.ex +++ b/lib/liliform/media.ex @@ -24,6 +24,7 @@ defmodule Liliform.Media do @doc """ Renders a media-left. """ + attr :class, :string, default: "", doc: "additional classes" attr :rest, :global slot :inner_block, required: true @@ -34,7 +35,7 @@ defmodule Liliform.Media do |> set_bulma_classes() ~H""" -
+
<%= render_slot(@inner_block) %>
""" @@ -43,6 +44,7 @@ defmodule Liliform.Media do @doc """ Renders a media-content. """ + attr :class, :string, default: "", doc: "additional classes" attr :rest, :global slot :inner_block, required: true @@ -53,7 +55,7 @@ defmodule Liliform.Media do |> set_bulma_classes() ~H""" -
+
<%= render_slot(@inner_block) %>
""" @@ -62,6 +64,7 @@ defmodule Liliform.Media do @doc """ Renders a media-right. """ + attr :class, :string, default: "", doc: "additional classes" attr :rest, :global slot :inner_block, required: true @@ -72,7 +75,7 @@ defmodule Liliform.Media do |> set_bulma_classes() ~H""" -
+
<%= render_slot(@inner_block) %>
""" diff --git a/lib/liliform/panel.ex b/lib/liliform/panel.ex index 7244c23..f17d99e 100644 --- a/lib/liliform/panel.ex +++ b/lib/liliform/panel.ex @@ -1,5 +1,6 @@ defmodule Liliform.Panel do use Liliform.Component + import Liliform.Media @doc """ Renders a panel. @@ -81,6 +82,37 @@ defmodule Liliform.Panel do """ end + @doc """ + Renders panel-media. + """ + attr :class, :string, default: "", doc: "additional classes" + attr :rest, :global + + slot :icon, required: true + slot :actions, required: true + slot :inner_block, required: true + + def panel_media(assigns) do + assigns = + assigns + |> set_bulma_classes() + + ~H""" +
+ <.media class="is-fullwidth"> + <.media_left> + <%= render_slot(@icon) %> + + <.media_content class="is-fullwidth"> + <%= render_slot(@inner_block) %> + + <.media_right> + <%= render_slot(@actions) %> + + +
+ """ + end @doc """ Renders a panel-tabs.