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" => %{
|
"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
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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>
|
||||||
"""
|
"""
|
||||||
|
|
|
@ -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.
|
||||||
|
|
Loading…
Reference in a new issue