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 # FreeBSD package
*.pkg *.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. Given a string returns HSL color.
""" """
alias Freedive.Features alias Freedive.Features
require Logger
@seed "zeni" @seed "zeni"
@default_color {0, 0, 0} @default_color {0, 0, 0}
@ -20,6 +21,7 @@ defmodule Liliform.Colorhash do
""" """
def hsl(input, raw: true) do def hsl(input, raw: true) do
if Features.enabled?(:colorhash) do if Features.enabled?(:colorhash) do
Logger.debug("Colorhash enabled")
input = String.downcase(input) <> @seed input = String.downcase(input) <> @seed
hash = :erlang.phash2(input, 2_147_483_647) hash = :erlang.phash2(input, 2_147_483_647)
@ -29,6 +31,7 @@ defmodule Liliform.Colorhash do
{hue, saturation, lightness} {hue, saturation, lightness}
else else
Logger.debug("Colorhash disabled")
@default_color @default_color
end end
end end

View file

@ -17,6 +17,7 @@ defmodule Liliform.Icon do
""" """
use Liliform.Component use Liliform.Component
alias Liliform.Colorhash alias Liliform.Colorhash
alias Freedive.Features
@doc """ @doc """
Renders an icon. Renders an icon.
@ -71,7 +72,7 @@ defmodule Liliform.Icon do
~H""" ~H"""
<span class="icon-text"> <span class="icon-text">
<span class={["icon", @class]} {@rest}> <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> </span>
<%= if @inner_block != [] do %> <%= if @inner_block != [] do %>
<span> <span>
@ -92,10 +93,30 @@ defmodule Liliform.Icon do
end end
defp icon_color(assigns) do defp icon_color(assigns) do
case assigns.color do if Features.enabled?(:colorhash) do
nil -> "" color =
"auto" -> Colorhash.hsl(assigns.for) case assigns.color do
color -> color 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
end end
@ -113,6 +134,7 @@ defmodule Liliform.Icon do
"network" -> :earth "network" -> :earth
"system" -> :bot "system" -> :bot
"account" -> :user "account" -> :user
"all" -> :infinity
lucide_name -> String.to_atom(lucide_name) lucide_name -> String.to_atom(lucide_name)
end end
end end