Add panel-media, improve service details view

This commit is contained in:
Harshad Sharma 2024-05-16 16:14:28 +05:30
parent 276882ff63
commit 97a2464b14
4 changed files with 78 additions and 24 deletions

View file

@ -18,7 +18,7 @@ defmodule FreediveWeb.ServiceLive do
"sshd" => %{ "sshd" => %{
name: "sshd", name: "sshd",
path: "/services/ssh", path: "/services/ssh",
icon: "blocks", icon: "lock",
description: "Secure Shell Daemon", description: "Secure Shell Daemon",
enabled: true, enabled: true,
running: true running: true
@ -102,27 +102,28 @@ defmodule FreediveWeb.ServiceLive.Components do
<div class="mt-2 ml-2">Back</div> <div class="mt-2 ml-2">Back</div>
</.link> </.link>
<.panel_block_div> <.panel_media>
<div class="column is-narrow"> <:icon>
<.icon for={@selected_item.name} color="auto" aria-hidden="true" /> <.icon_raw for={@selected_item.icon} color="auto" size="3rem" aria-hidden="true" />
</div> <%!-- <Lucideicons.accessibility height="2rem" width="2rem" /> --%>
<div class="columns is-vcentered is-fullwidth"> </:icon>
<div class="column is-narrow">
<.title is-4> <.title is-4>
<%= @selected_item.name %> <%= @selected_item.name %>
</.title> </.title>
<.subtitle>
<%= @selected_item.description %>
</.subtitle>
<:actions>
<div class="columns">
<div class="column is-narrow">
<.icon for="running" color="auto" aria-hidden="true" />
<.icon for="enabled" color="auto" aria-hidden="true" />
</div>
</div> </div>
<div class="column"> </:actions>
<.subtitle> </.panel_media>
<%= @selected_item.description %>
</.subtitle>
</div>
<div class="column is-narrow">
<.icon for="running" color="auto" aria-hidden="true" />
<.icon for="enabled" color="auto" aria-hidden="true" />
</div>
</div>
</.panel_block_div>
""" """
end end

View file

@ -83,6 +83,24 @@ defmodule Liliform.Icon do
""" """
end 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 defp icon_svg(assigns) do
base_assigns = base_assigns =
assigns assigns

View file

@ -24,6 +24,7 @@ defmodule Liliform.Media do
@doc """ @doc """
Renders a media-left. Renders a media-left.
""" """
attr :class, :string, default: "", doc: "additional classes"
attr :rest, :global attr :rest, :global
slot :inner_block, required: true slot :inner_block, required: true
@ -34,7 +35,7 @@ defmodule Liliform.Media do
|> set_bulma_classes() |> set_bulma_classes()
~H""" ~H"""
<figure class="media-left" {@rest}> <figure class={["media-left", @class]} {@rest}>
<%= render_slot(@inner_block) %> <%= render_slot(@inner_block) %>
</figure> </figure>
""" """
@ -43,6 +44,7 @@ defmodule Liliform.Media do
@doc """ @doc """
Renders a media-content. Renders a media-content.
""" """
attr :class, :string, default: "", doc: "additional classes"
attr :rest, :global attr :rest, :global
slot :inner_block, required: true slot :inner_block, required: true
@ -53,7 +55,7 @@ defmodule Liliform.Media do
|> set_bulma_classes() |> set_bulma_classes()
~H""" ~H"""
<div class="media-content" {@rest}> <div class={["media-content", @class]} {@rest}>
<%= render_slot(@inner_block) %> <%= render_slot(@inner_block) %>
</div> </div>
""" """
@ -62,6 +64,7 @@ defmodule Liliform.Media do
@doc """ @doc """
Renders a media-right. Renders a media-right.
""" """
attr :class, :string, default: "", doc: "additional classes"
attr :rest, :global attr :rest, :global
slot :inner_block, required: true slot :inner_block, required: true
@ -72,7 +75,7 @@ defmodule Liliform.Media do
|> set_bulma_classes() |> set_bulma_classes()
~H""" ~H"""
<div class="media-right" {@rest}> <div class={["media-right", @class]} {@rest}>
<%= render_slot(@inner_block) %> <%= render_slot(@inner_block) %>
</div> </div>
""" """

View file

@ -1,5 +1,6 @@
defmodule Liliform.Panel do defmodule Liliform.Panel do
use Liliform.Component use Liliform.Component
import Liliform.Media
@doc """ @doc """
Renders a panel. Renders a panel.
@ -81,6 +82,37 @@ defmodule Liliform.Panel do
""" """
end 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"""
<div class={["panel-block", @class]} {@rest}>
<.media class="is-fullwidth">
<.media_left>
<%= render_slot(@icon) %>
</.media_left>
<.media_content class="is-fullwidth">
<%= render_slot(@inner_block) %>
</.media_content>
<.media_right>
<%= render_slot(@actions) %>
</.media_right>
</.media>
</div>
"""
end
@doc """ @doc """
Renders a panel-tabs. Renders a panel-tabs.