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" => %{
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
<div class="mt-2 ml-2">Back</div>
</.link>
<.panel_block_div>
<div class="column is-narrow">
<.icon for={@selected_item.name} color="auto" aria-hidden="true" />
</div>
<div class="columns is-vcentered is-fullwidth">
<div class="column is-narrow">
<.title is-4>
<%= @selected_item.name %>
</.title>
<.panel_media>
<:icon>
<.icon_raw for={@selected_item.icon} color="auto" size="3rem" aria-hidden="true" />
<%!-- <Lucideicons.accessibility height="2rem" width="2rem" /> --%>
</:icon>
<.title is-4>
<%= @selected_item.name %>
</.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 class="column">
<.subtitle>
<%= @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>
</:actions>
</.panel_media>
"""
end

View file

@ -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

View file

@ -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"""
<figure class="media-left" {@rest}>
<figure class={["media-left", @class]} {@rest}>
<%= render_slot(@inner_block) %>
</figure>
"""
@ -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"""
<div class="media-content" {@rest}>
<div class={["media-content", @class]} {@rest}>
<%= render_slot(@inner_block) %>
</div>
"""
@ -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"""
<div class="media-right" {@rest}>
<div class={["media-right", @class]} {@rest}>
<%= render_slot(@inner_block) %>
</div>
"""

View file

@ -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"""
<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 """
Renders a panel-tabs.