forked from hiway/freedive
Add panel-media, improve service details view
This commit is contained in:
parent
276882ff63
commit
97a2464b14
4 changed files with 78 additions and 24 deletions
|
@ -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
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
"""
|
||||
|
|
|
@ -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.
|
||||
|
|
Loading…
Reference in a new issue