Compare commits
No commits in common. "da68c1b63110198955cca3dac5a34ec6a4e5b3b5" and "276882ff6349cdf1ddf429c1c6977c4d71f9e8a7" have entirely different histories.
da68c1b631
...
276882ff63
8 changed files with 131 additions and 207 deletions
|
|
@ -4,9 +4,7 @@
|
|||
<.navbar_brand class="ml-1">
|
||||
<.navbar_item>
|
||||
<.title is-4>
|
||||
<.link patch={~p"/"} class="has-text-dark">
|
||||
Freedive
|
||||
</.link>
|
||||
</.title>
|
||||
</.navbar_item>
|
||||
|
||||
|
|
@ -14,7 +12,7 @@
|
|||
</.navbar_brand>
|
||||
|
||||
<.navbar_menu id="navbar_top" class="mr-1">
|
||||
<%!-- <%= if @current_user do %>
|
||||
<%= if @current_user do %>
|
||||
<.navbar_start>
|
||||
<.navbar_item has-dropdown is-hoverable>
|
||||
<.navbar_link>
|
||||
|
|
@ -80,7 +78,7 @@
|
|||
</.navbar_dropdown>
|
||||
</.navbar_item>
|
||||
</.navbar_start>
|
||||
<% end %> --%>
|
||||
<% end %>
|
||||
|
||||
<.navbar_end>
|
||||
<%= if @current_user do %>
|
||||
|
|
@ -96,14 +94,14 @@
|
|||
</.navbar_link>
|
||||
|
||||
<.navbar_dropdown>
|
||||
<%!-- <.link href={~p"/updates"} class="navbar-item">
|
||||
<.link href={~p"/updates"} class="navbar-item">
|
||||
Software updates
|
||||
</.link>
|
||||
<.navbar_divider />
|
||||
<.link href={~p"/packages"} class="navbar-item">
|
||||
Packages
|
||||
</.link> --%>
|
||||
<.link patch={~p"/services"} class="navbar-item">
|
||||
</.link>
|
||||
<.link href={~p"/services"} class="navbar-item">
|
||||
Services
|
||||
</.link>
|
||||
</.navbar_dropdown>
|
||||
|
|
@ -118,7 +116,7 @@
|
|||
|
||||
<.navbar_dropdown>
|
||||
<%= if @current_user do %>
|
||||
<.link patch={~p"/users/settings"} class="navbar-item">
|
||||
<.link href={~p"/users/settings"} class="navbar-item">
|
||||
Settings
|
||||
</.link>
|
||||
<.link href={~p"/users/log_out"} method="delete" class="navbar-item">
|
||||
|
|
|
|||
|
|
@ -1,102 +1,98 @@
|
|||
defmodule FreediveWeb.HomeLive do
|
||||
use FreediveWeb.LiliformLive
|
||||
use FreediveWeb, :live_view
|
||||
|
||||
def render(assigns) do
|
||||
~H"""
|
||||
<.page name="Home" filters={@filters} details={@details}>
|
||||
<FreediveWeb.HomeLive.Components.items_block
|
||||
items={@items}
|
||||
selected_item={@selected_item}
|
||||
details={@details}
|
||||
<.block class="px-2 py-4">
|
||||
<.panel is-info>
|
||||
<.panel_heading>
|
||||
Home
|
||||
</.panel_heading>
|
||||
|
||||
<.panel_tabs is-hidden-mobile>
|
||||
<a class="is-active">All</a>
|
||||
<a>Compute</a>
|
||||
<a>Storage</a>
|
||||
<a>Network</a>
|
||||
<a>System</a>
|
||||
</.panel_tabs>
|
||||
|
||||
<.panel_tabs is-hidden-tablet>
|
||||
<a title="All" is-active>
|
||||
<.icon for="all" color="auto" />
|
||||
</a>
|
||||
<a title="Compute">
|
||||
<.icon for="compute" color="auto" />
|
||||
</a>
|
||||
<a title="Storage">
|
||||
<.icon for="storage" color="auto" />
|
||||
</a>
|
||||
<a title="Network">
|
||||
<.icon for="network" color="auto" />
|
||||
</a>
|
||||
<a title="System">
|
||||
<.icon for="system" color="auto" />
|
||||
</a>
|
||||
</.panel_tabs>
|
||||
|
||||
<.panel_block>
|
||||
<.control has-icons-left>
|
||||
<input
|
||||
class="input is-info"
|
||||
type="text"
|
||||
placeholder="Search"
|
||||
name="search"
|
||||
value={@query}
|
||||
/>
|
||||
</.page>
|
||||
"""
|
||||
end
|
||||
<.icon for="search" size="1.5rem" aria-hidden="true" is-left />
|
||||
</.control>
|
||||
</.panel_block>
|
||||
|
||||
def items() do
|
||||
%{
|
||||
"services" => %{
|
||||
name: "Services",
|
||||
path: "/services",
|
||||
icon: "blocks",
|
||||
description: "Manage system services",
|
||||
system: true,
|
||||
account: false,
|
||||
compute: false,
|
||||
storage: false,
|
||||
network: false
|
||||
},
|
||||
"accounts" => %{
|
||||
name: "Account settings",
|
||||
path: "/users/settings",
|
||||
icon: "user-cog",
|
||||
description: "Manage user accounts",
|
||||
system: false,
|
||||
account: true,
|
||||
compute: false,
|
||||
storage: false,
|
||||
network: false
|
||||
}
|
||||
}
|
||||
end
|
||||
|
||||
def filters() do
|
||||
[
|
||||
%{
|
||||
title: "System",
|
||||
key: :system,
|
||||
icon: "system",
|
||||
active: true
|
||||
},
|
||||
%{
|
||||
title: "Account",
|
||||
key: :account,
|
||||
icon: "account",
|
||||
active: false
|
||||
}
|
||||
# %{
|
||||
# title: "Compute",
|
||||
# key: :compute,
|
||||
# icon: "compute",
|
||||
# active: false
|
||||
# },
|
||||
# %{
|
||||
# title: "Storage",
|
||||
# key: :storage,
|
||||
# icon: "storage",
|
||||
# active: false
|
||||
# },
|
||||
# %{
|
||||
# title: "Network",
|
||||
# key: :network,
|
||||
# icon: "network",
|
||||
# active: false
|
||||
# }
|
||||
]
|
||||
end
|
||||
|
||||
def search(items, query) do
|
||||
Enum.filter(items, fn {_, item} ->
|
||||
String.contains?(String.downcase(item.name), String.downcase(query))
|
||||
end)
|
||||
|> Enum.into(%{}, fn {name, item} -> {name, item} end)
|
||||
end
|
||||
end
|
||||
|
||||
defmodule FreediveWeb.HomeLive.Components do
|
||||
use Liliform.Component
|
||||
import Liliform.Icon
|
||||
|
||||
def items_block(assigns) do
|
||||
~H"""
|
||||
<%= for {_name, item} <- @items do %>
|
||||
<.link class="panel-block pt-1" patch={item.path}>
|
||||
<.link patch={~p"/services"} class="panel-block pt-1">
|
||||
<span class="panel-icon">
|
||||
<.icon for={item.icon} color="auto" aria-hidden="true" />
|
||||
<.icon for="puzzle" color="auto" aria-hidden="true" />
|
||||
</span>
|
||||
<div class="mt-2 ml-2"><%= item.name %></div>
|
||||
<div class="mt-2 ml-2">Services</div>
|
||||
</.link>
|
||||
<% end %>
|
||||
<.link patch={~p"/packages"} class="panel-block pt-1">
|
||||
<span class="panel-icon">
|
||||
<.icon for="package" color="auto" aria-hidden="true" />
|
||||
</span>
|
||||
<span class="mt-2 ml-2">Packages</span>
|
||||
</.link>
|
||||
<.link patch={~p"/updates"} class="panel-block pt-1">
|
||||
<span class="panel-icon">
|
||||
<.icon for="hard-drive-download" color="auto" aria-hidden="true" />
|
||||
</span>
|
||||
<span class="mt-2 ml-2">Software updates</span>
|
||||
</.link>
|
||||
</.panel>
|
||||
</.block>
|
||||
<.section>
|
||||
<.box>
|
||||
<.button phx-click="color" phx-value-enable="true">
|
||||
Color
|
||||
</.button>
|
||||
<.button phx-click="color" phx-value-enable="false">
|
||||
Grayscale
|
||||
</.button>
|
||||
</.box>
|
||||
</.section>
|
||||
"""
|
||||
end
|
||||
|
||||
def mount(_params, _session, socket) do
|
||||
socket = assign(socket, query: "all")
|
||||
{:ok, socket}
|
||||
end
|
||||
|
||||
def handle_event("color", %{"enable" => "true"}, socket) do
|
||||
Freedive.Features.enable(:colorhash)
|
||||
{:noreply, assign(socket, query: "color")}
|
||||
end
|
||||
|
||||
def handle_event("color", %{"enable" => "false"}, socket) do
|
||||
Freedive.Features.disable(:colorhash)
|
||||
{:noreply, assign(socket, query: "grayscale")}
|
||||
end
|
||||
end
|
||||
|
|
|
|||
|
|
@ -48,6 +48,7 @@ defmodule FreediveWeb.LiliformLive do
|
|||
socket =
|
||||
case Kernel.length(Map.keys(searched_items)) == 1 do
|
||||
true ->
|
||||
IO.inspect(Map.keys(searched_items) |> List.first())
|
||||
assign(socket, %{
|
||||
selected_item: Map.get(searched_items, Map.keys(searched_items) |> List.first()),
|
||||
details: true
|
||||
|
|
@ -102,11 +103,6 @@ defmodule FreediveWeb.LiliformLive do
|
|||
|
||||
{:noreply, socket}
|
||||
end
|
||||
|
||||
def(handle_params(params, _url, socket)) do
|
||||
socket = assign(socket, :query, Map.get(params, "search", ""))
|
||||
{:noreply, socket}
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ defmodule FreediveWeb.ServiceLive do
|
|||
"sshd" => %{
|
||||
name: "sshd",
|
||||
path: "/services/ssh",
|
||||
icon: "lock",
|
||||
icon: "blocks",
|
||||
description: "Secure Shell Daemon",
|
||||
enabled: true,
|
||||
running: true
|
||||
|
|
@ -102,28 +102,27 @@ defmodule FreediveWeb.ServiceLive.Components do
|
|||
<div class="mt-2 ml-2">Back</div>
|
||||
</.link>
|
||||
|
||||
<.panel_media>
|
||||
<:icon>
|
||||
<.icon_raw for={@selected_item.icon} color="auto" size="3rem" aria-hidden="true" />
|
||||
<%!-- <Lucideicons.accessibility height="2rem" width="2rem" /> --%>
|
||||
</:icon>
|
||||
|
||||
<.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>
|
||||
</div>
|
||||
<div class="column">
|
||||
<.subtitle>
|
||||
<%= @selected_item.description %>
|
||||
</.subtitle>
|
||||
|
||||
<:actions>
|
||||
<div class="columns">
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
<.icon for="running" color="auto" aria-hidden="true" />
|
||||
<.icon for="enabled" color="auto" aria-hidden="true" />
|
||||
</div>
|
||||
</div>
|
||||
</:actions>
|
||||
</.panel_media>
|
||||
</.panel_block_div>
|
||||
"""
|
||||
end
|
||||
|
||||
|
|
|
|||
|
|
@ -83,24 +83,6 @@ 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
|
||||
|
|
@ -119,7 +101,6 @@ defmodule Liliform.Icon do
|
|||
color -> color
|
||||
end
|
||||
|
||||
auto_color =
|
||||
case assigns.for do
|
||||
"alert" -> [class: "has-text-danger"]
|
||||
"info" -> [class: "has-text-info"]
|
||||
|
|
@ -134,17 +115,6 @@ defmodule Liliform.Icon do
|
|||
"account" -> [color: "darkblue"]
|
||||
_ -> [color: color]
|
||||
end
|
||||
|
||||
case color do
|
||||
"auto" ->
|
||||
auto_color
|
||||
|
||||
"" ->
|
||||
[]
|
||||
|
||||
_ ->
|
||||
[color: color]
|
||||
end
|
||||
else
|
||||
[class: "has-text-dark"]
|
||||
end
|
||||
|
|
|
|||
|
|
@ -24,7 +24,6 @@ defmodule Liliform.Media do
|
|||
@doc """
|
||||
Renders a media-left.
|
||||
"""
|
||||
attr :class, :string, default: "", doc: "additional classes"
|
||||
attr :rest, :global
|
||||
|
||||
slot :inner_block, required: true
|
||||
|
|
@ -35,7 +34,7 @@ defmodule Liliform.Media do
|
|||
|> set_bulma_classes()
|
||||
|
||||
~H"""
|
||||
<figure class={["media-left", @class]} {@rest}>
|
||||
<figure class="media-left" {@rest}>
|
||||
<%= render_slot(@inner_block) %>
|
||||
</figure>
|
||||
"""
|
||||
|
|
@ -44,7 +43,6 @@ defmodule Liliform.Media do
|
|||
@doc """
|
||||
Renders a media-content.
|
||||
"""
|
||||
attr :class, :string, default: "", doc: "additional classes"
|
||||
attr :rest, :global
|
||||
|
||||
slot :inner_block, required: true
|
||||
|
|
@ -55,7 +53,7 @@ defmodule Liliform.Media do
|
|||
|> set_bulma_classes()
|
||||
|
||||
~H"""
|
||||
<div class={["media-content", @class]} {@rest}>
|
||||
<div class="media-content" {@rest}>
|
||||
<%= render_slot(@inner_block) %>
|
||||
</div>
|
||||
"""
|
||||
|
|
@ -64,7 +62,6 @@ defmodule Liliform.Media do
|
|||
@doc """
|
||||
Renders a media-right.
|
||||
"""
|
||||
attr :class, :string, default: "", doc: "additional classes"
|
||||
attr :rest, :global
|
||||
|
||||
slot :inner_block, required: true
|
||||
|
|
@ -75,7 +72,7 @@ defmodule Liliform.Media do
|
|||
|> set_bulma_classes()
|
||||
|
||||
~H"""
|
||||
<div class={["media-right", @class]} {@rest}>
|
||||
<div class="media-right" {@rest}>
|
||||
<%= render_slot(@inner_block) %>
|
||||
</div>
|
||||
"""
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ defmodule Liliform.Page do
|
|||
phx-click="filter"
|
||||
phx-value-key={filter.key}
|
||||
>
|
||||
<.icon for={filter.icon} color={if filter.active, do: "gray", else: "auto"} />
|
||||
<.icon for={filter.icon} color="auto" />
|
||||
</a>
|
||||
<% end %>
|
||||
</.panel_tabs>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
defmodule Liliform.Panel do
|
||||
use Liliform.Component
|
||||
import Liliform.Media
|
||||
|
||||
@doc """
|
||||
Renders a panel.
|
||||
|
|
@ -82,37 +81,6 @@ 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