gyptazy/freedive
1
0
Fork 0
forked from hiway/freedive
Code Pull requests Activity

Apply liliform to home live

Browse source
This commit is contained in:
Harshad Sharma 2024-05-16 19:29:56 +05:30
parent 9a713bf18c
commit da68c1b631
3 changed files with 97 additions and 89 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
lib/freedive_web/components/layouts/app.html.heex
View file

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

172
lib/freedive_web/live/home_live.ex
View file

@ -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}
<.page name="Home" filters={@filters} details={@details}>
<FreediveWeb.HomeLive.Components.items_block
items={@items}
selected_item={@selected_item}
details={@details}
/>
<.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>
"""
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

6
lib/freedive_web/live/liliform_live.ex
View file

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