Apply liliform to home live
This commit is contained in:
parent
9a713bf18c
commit
da68c1b631
3 changed files with 97 additions and 89 deletions
|
|
@ -4,7 +4,7 @@
|
|||
<.navbar_brand class="ml-1">
|
||||
<.navbar_item>
|
||||
<.title is-4>
|
||||
<.link href={~p"/"} class="has-text-dark">
|
||||
<.link patch={~p"/"} class="has-text-dark">
|
||||
Freedive
|
||||
</.link>
|
||||
</.title>
|
||||
|
|
@ -103,7 +103,7 @@
|
|||
<.link href={~p"/packages"} class="navbar-item">
|
||||
Packages
|
||||
</.link> --%>
|
||||
<.link href={~p"/services"} class="navbar-item">
|
||||
<.link patch={~p"/services"} class="navbar-item">
|
||||
Services
|
||||
</.link>
|
||||
</.navbar_dropdown>
|
||||
|
|
@ -118,7 +118,7 @@
|
|||
|
||||
<.navbar_dropdown>
|
||||
<%= if @current_user do %>
|
||||
<.link href={~p"/users/settings"} class="navbar-item">
|
||||
<.link patch={~p"/users/settings"} class="navbar-item">
|
||||
Settings
|
||||
</.link>
|
||||
<.link href={~p"/users/log_out"} method="delete" class="navbar-item">
|
||||
|
|
|
|||
|
|
@ -1,98 +1,102 @@
|
|||
defmodule FreediveWeb.HomeLive do
|
||||
use FreediveWeb, :live_view
|
||||
use FreediveWeb.LiliformLive
|
||||
|
||||
def render(assigns) do
|
||||
~H"""
|
||||
<.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}
|
||||
/>
|
||||
<.icon for="search" size="1.5rem" aria-hidden="true" is-left />
|
||||
</.control>
|
||||
</.panel_block>
|
||||
|
||||
<.link patch={~p"/services"} class="panel-block pt-1">
|
||||
<span class="panel-icon">
|
||||
<.icon for="puzzle" color="auto" aria-hidden="true" />
|
||||
</span>
|
||||
<div class="mt-2 ml-2">Services</div>
|
||||
</.link>
|
||||
<.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>
|
||||
<.page name="Home" filters={@filters} details={@details}>
|
||||
<FreediveWeb.HomeLive.Components.items_block
|
||||
items={@items}
|
||||
selected_item={@selected_item}
|
||||
details={@details}
|
||||
/>
|
||||
</.page>
|
||||
"""
|
||||
end
|
||||
|
||||
def mount(_params, _session, socket) do
|
||||
socket = assign(socket, query: "all")
|
||||
{:ok, socket}
|
||||
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 handle_event("color", %{"enable" => "true"}, socket) do
|
||||
Freedive.Features.enable(:colorhash)
|
||||
{:noreply, assign(socket, query: "color")}
|
||||
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 handle_event("color", %{"enable" => "false"}, socket) do
|
||||
Freedive.Features.disable(:colorhash)
|
||||
{:noreply, assign(socket, query: "grayscale")}
|
||||
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}>
|
||||
<span class="panel-icon">
|
||||
<.icon for={item.icon} color="auto" aria-hidden="true" />
|
||||
</span>
|
||||
<div class="mt-2 ml-2"><%= item.name %></div>
|
||||
</.link>
|
||||
<% end %>
|
||||
"""
|
||||
end
|
||||
end
|
||||
|
|
|
|||
|
|
@ -48,7 +48,6 @@ 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
|
||||
|
|
@ -103,6 +102,11 @@ 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
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue