restyle tags

This commit is contained in:
shibao 2022-01-28 21:05:54 -05:00
parent e2c8484742
commit e4522e4a89
5 changed files with 85 additions and 78 deletions

View File

@ -108,4 +108,18 @@ defmodule Cannery.Tags do
def change_tag(tag, attrs \\ %{}) do def change_tag(tag, attrs \\ %{}) do
Tag.changeset(tag, attrs) Tag.changeset(tag, attrs)
end end
@doc """
Get a random tag bg_color in `#ffffff` hex format
## Examples
iex> random_color()
"#cc0066"
"""
@spec random_bg_color() :: <<_::7>>
def random_bg_color do
["#cc0066", "#ff6699", "#6666ff", "#0066cc", "#00cc66", "#669900", "#ff9900", "#996633"]
|> Enum.random()
end
end end

View File

@ -38,7 +38,7 @@ defmodule CanneryWeb.TagLive.FormComponent do
def render(assigns) do def render(assigns) do
~H""" ~H"""
<div> <div>
<h2 class="title text-xl text-primary-500"> <h2 class="text-center title text-xl text-primary-500">
<%= @title %> <%= @title %>
</h2> </h2>
<.form <.form
@ -48,23 +48,23 @@ defmodule CanneryWeb.TagLive.FormComponent do
class="grid grid-cols-3 justify-center items-center space-y-4" class="grid grid-cols-3 justify-center items-center space-y-4"
phx-target={@myself} phx-target={@myself}
phx-change="validate" phx-change="validate"
phx-submit="save"> phx-submit="save"
>
<%= label f, :name, class: "title text-lg text-primary-500" %> <%= label(f, :name, class: "title text-lg text-primary-500") %>
<%= text_input f, :name, class: "input input-primary col-span-2" %> <%= text_input(f, :name, class: "input input-primary col-span-2") %>
<span class="col-span-3"> <span class="col-span-3">
<%= error_tag(f, :name) %> <%= error_tag(f, :name) %>
</span> </span>
<%= label(f, :bg_color, class: "title text-lg text-primary-500") %> <%= label(f, :bg_color, class: "title text-lg text-primary-500") %>
<span class="mx-auto col-span-2" phx-update="ignore"> <span class="mx-auto col-span-2" phx-update="ignore">
<%= color_input(f, :bg_color, value: random_color()) %> <%= color_input(f, :bg_color) %>
</span> </span>
<span class="col-span-3"> <span class="col-span-3">
<%= error_tag(f, :bg_color) %> <%= error_tag(f, :bg_color) %>
</span> </span>
<%= label(f, :text_color, class: "title text-lg text-primary-500") %> <%= label(f, :text_color, class: "title text-lg text-primary-500") %>
<span class="mx-auto col-span-2" phx-update="ignore"> <span class="mx-auto col-span-2" phx-update="ignore">
<%= color_input(f, :text_color, value: "#ffffff") %> <%= color_input(f, :text_color) %>
</span> </span>
<span class="col-span-3"> <span class="col-span-3">
<%= error_tag(f, :text_color) %> <%= error_tag(f, :text_color) %>
@ -102,13 +102,5 @@ defmodule CanneryWeb.TagLive.FormComponent do
{:error, %Ecto.Changeset{} = changeset} -> {:error, %Ecto.Changeset{} = changeset} ->
{:noreply, socket |> assign(changeset: changeset)} {:noreply, socket |> assign(changeset: changeset)}
end end
end-
@doc """
Returns a random tag color in `#ffffff` hex format
"""
@spec random_color() :: String.t()
def random_color do
["#cc0066", "#ff6699", "#6666ff", "#0066cc", "#00cc66", "#669900", "#ff9900", "#996633"]
|> Enum.random()
end end
end end

View File

@ -27,7 +27,7 @@ defmodule CanneryWeb.TagLive.Index do
defp apply_action(socket, :new, _params) do defp apply_action(socket, :new, _params) do
socket socket
|> assign(:page_title, "New Tag") |> assign(:page_title, "New Tag")
|> assign(:tag, %Tag{}) |> assign(:tag, %Tag{bg_color: Tags.random_bg_color(), text_color: "#ffffff"})
end end
defp apply_action(socket, :index, _params) do defp apply_action(socket, :index, _params) do

View File

@ -0,0 +1,63 @@
<div class="flex flex-col space-y-8 justify-center items-center">
<h1 class="title text-2xl title-primary-500">
Listing Tags
</h1>
<p class="title text-md text-primary-500">
Tags can be added to your containers to help you organize
</p>
<%= if @tags |> Enum.empty?() do %>
<div class="flex flex-col space-y-4 justify-center items-center">
<h1 class="title text-xl text-primary-500">
No tags
</h1>
<%= live_patch("Create your first tag!",
to: Routes.tag_index_path(@socket, :new),
class: "btn btn-primary"
) %>
</div>
<% else %>
<%= live_patch("New Tag",
to: Routes.tag_index_path(@socket, :new),
class: "btn btn-primary"
) %>
<% end %>
<div class="flex flex-row flex-wrap">
<%= for tag <- @tags do %>
<div
id={"tag-#{tag.id}"}
class="mx-4 my-2 px-8 py-4 space-x-4 flex justify-center items-center
border border-gray-400 rounded-lg shadow-lg hover:shadow-md"
>
<h1
class="px-4 py-2 rounded-lg title text-xl"
style={"color: #{tag.text_color}; background-color: #{tag.bg_color}"}
>
<%= tag.name %>
</h1>
<%= live_patch to: Routes.tag_index_path(@socket, :edit, tag),
class: "text-primary-500 link" do %>
<i class="fa-fw fa-lg fas fa-edit">
</i>
<% end %>
<%= link to: "#",
class: "text-primary-500 link",
phx_click: "delete",
phx_value_id: tag.id,
data: [confirm: "Are you sure you want to delete #{tag.name}?"] do %>
<i class="fa-fw fa-lg fas fa-trash">
</i>
<% end %>
</div>
<% end %>
</div>
</div>
<%= if @live_action in [:new, :edit] do %>
<%= live_modal(CanneryWeb.TagLive.FormComponent,
id: @tag.id || :new,
title: @page_title,
action: @live_action,
tag: @tag,
return_to: Routes.tag_index_path(@socket, :index),
current_user: @current_user
) %>
<% end %>

View File

@ -1,62 +0,0 @@
<div class="flex flex-col space-y-8 justify-center items-center">
<h1 class="title text-2xl title-primary-500">
Listing Tags
</h1>
<p class="title text-md text-primary-500">
Tags can be added to your containers to help you organize
</p>
<%= if @tags |> Enum.empty?() do %>
<div class="flex flex-col space-y-4 justify-center items-center">
<h1 class="title text-xl text-primary-500">
No tags
</h1>
<%= live_patch to: Routes.tag_index_path(@socket, :new),
class: "btn btn-primary" do %>
Create your first tag!
<% end %>
</div>
<% else %>
<%= live_patch to: Routes.tag_index_path(@socket, :new),
class: "btn btn-primary" do %>
New Tag
<% end %>
<% end %>
<div class="flex flex-row flex-wrap space-x-4 space-y-4">
<%= for tag <- @tags do %>
<div id="tag-<%= tag.id %>"
class="px-8 py-4 flex flex-col justify-center items-center space-y-4
border border-gray-400 rounded-lg shadow-lg hover:shadow-md">
<h1 class="px-4 py-2 rounded-lg title text-xl"
style="color: <%= tag.text_color %>; background-color: <%= tag.bg_color %>">
<%= tag.name %>
</h1>
<div class="flex space-x-4 justify-center items-center">
<%= live_patch "Edit", to: Routes.tag_index_path(@socket, :edit, tag),
class: "text-primary-500 link" %>
<%= link "Delete", to: "#",
class: "text-primary-500 link",
phx_click: "delete",
phx_value_id: tag.id,
data: [confirm: "Are you sure you want to delete #{tag.name}?"] %>
</div>
</div>
<% end %>
</div>
</div>
<%= if @live_action in [:new, :edit] do %>
<%= live_modal CanneryWeb.TagLive.FormComponent,
id: @tag.id || :new,
title: @page_title,
action: @live_action,
tag: @tag,
return_to: Routes.tag_index_path(@socket, :index),
current_user: @current_user %>
<% end %>