Improve icon colors, test colorhash feature flag (needs page refresh)

This commit is contained in:
Harshad Sharma 2024-05-16 00:23:00 +05:30
parent 707111fdac
commit f2f4c0531d
4 changed files with 112 additions and 5 deletions

3
.gitignore vendored
View file

@ -46,3 +46,6 @@ npm-debug.log
# FreeBSD package
*.pkg
# Local temp
_attic/

View 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

View file

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

View file

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