Improve icon colors, test colorhash feature flag (needs page refresh)
This commit is contained in:
parent
707111fdac
commit
f2f4c0531d
4 changed files with 112 additions and 5 deletions
3
.gitignore
vendored
3
.gitignore
vendored
|
@ -46,3 +46,6 @@ npm-debug.log
|
|||
|
||||
# FreeBSD package
|
||||
*.pkg
|
||||
|
||||
# Local temp
|
||||
_attic/
|
||||
|
|
79
lib/freedive_web/live/liliform_live.ex
Normal file
79
lib/freedive_web/live/liliform_live.ex
Normal file
|
@ -0,0 +1,79 @@
|
|||
defmodule FreediveWeb.LiliformLive do
|
||||
use FreediveWeb, :live_view
|
||||
|
||||
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>
|
||||
</.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
|
|
@ -3,6 +3,7 @@ defmodule Liliform.Colorhash do
|
|||
Given a string returns HSL color.
|
||||
"""
|
||||
alias Freedive.Features
|
||||
require Logger
|
||||
|
||||
@seed "zeni"
|
||||
@default_color {0, 0, 0}
|
||||
|
@ -20,6 +21,7 @@ defmodule Liliform.Colorhash do
|
|||
"""
|
||||
def hsl(input, raw: true) do
|
||||
if Features.enabled?(:colorhash) do
|
||||
Logger.debug("Colorhash enabled")
|
||||
input = String.downcase(input) <> @seed
|
||||
hash = :erlang.phash2(input, 2_147_483_647)
|
||||
|
||||
|
@ -29,6 +31,7 @@ defmodule Liliform.Colorhash do
|
|||
|
||||
{hue, saturation, lightness}
|
||||
else
|
||||
Logger.debug("Colorhash disabled")
|
||||
@default_color
|
||||
end
|
||||
end
|
||||
|
|
|
@ -17,6 +17,7 @@ defmodule Liliform.Icon do
|
|||
"""
|
||||
use Liliform.Component
|
||||
alias Liliform.Colorhash
|
||||
alias Freedive.Features
|
||||
|
||||
@doc """
|
||||
Renders an icon.
|
||||
|
@ -71,7 +72,7 @@ defmodule Liliform.Icon do
|
|||
~H"""
|
||||
<span class="icon-text">
|
||||
<span class={["icon", @class]} {@rest}>
|
||||
<.icon_svg for={@for} height={@size} width={@size} color={icon_color(assigns)} />
|
||||
<.icon_svg for={@for} height={@size} width={@size} {icon_color(assigns)} />
|
||||
</span>
|
||||
<%= if @inner_block != [] do %>
|
||||
<span>
|
||||
|
@ -92,11 +93,31 @@ defmodule Liliform.Icon do
|
|||
end
|
||||
|
||||
defp icon_color(assigns) do
|
||||
if Features.enabled?(:colorhash) do
|
||||
color =
|
||||
case assigns.color do
|
||||
nil -> ""
|
||||
"auto" -> Colorhash.hsl(assigns.for)
|
||||
color -> color
|
||||
end
|
||||
|
||||
case assigns.for do
|
||||
"alert" -> [class: "has-text-danger"]
|
||||
"info" -> [class: "has-text-info"]
|
||||
"success" -> [class: "has-text-success"]
|
||||
"warning" -> [class: "has-text-warning"]
|
||||
"error" -> [class: "has-text-danger"]
|
||||
"all" -> [color: "magenta"]
|
||||
"compute" -> [color: "blue"]
|
||||
"storage" -> [color: "green"]
|
||||
"network" -> [color: "orange"]
|
||||
"system" -> [color: "purple"]
|
||||
"account" -> [color: "darkblue"]
|
||||
_ -> [color: color]
|
||||
end
|
||||
else
|
||||
[class: "has-text-dark"]
|
||||
end
|
||||
end
|
||||
|
||||
defp icon_name(assigns) do
|
||||
|
@ -113,6 +134,7 @@ defmodule Liliform.Icon do
|
|||
"network" -> :earth
|
||||
"system" -> :bot
|
||||
"account" -> :user
|
||||
"all" -> :infinity
|
||||
lucide_name -> String.to_atom(lucide_name)
|
||||
end
|
||||
end
|
||||
|
|
Loading…
Reference in a new issue