forked from shibao/cannery
restyle tags
This commit is contained in:
parent
e2c8484742
commit
e4522e4a89
@ -108,4 +108,18 @@ defmodule Cannery.Tags do
|
||||
def change_tag(tag, attrs \\ %{}) do
|
||||
Tag.changeset(tag, attrs)
|
||||
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
|
||||
|
@ -38,7 +38,7 @@ defmodule CanneryWeb.TagLive.FormComponent do
|
||||
def render(assigns) do
|
||||
~H"""
|
||||
<div>
|
||||
<h2 class="title text-xl text-primary-500">
|
||||
<h2 class="text-center title text-xl text-primary-500">
|
||||
<%= @title %>
|
||||
</h2>
|
||||
<.form
|
||||
@ -48,23 +48,23 @@ defmodule CanneryWeb.TagLive.FormComponent do
|
||||
class="grid grid-cols-3 justify-center items-center space-y-4"
|
||||
phx-target={@myself}
|
||||
phx-change="validate"
|
||||
phx-submit="save">
|
||||
|
||||
<%= label f, :name, class: "title text-lg text-primary-500" %>
|
||||
<%= text_input f, :name, class: "input input-primary col-span-2" %>
|
||||
phx-submit="save"
|
||||
>
|
||||
<%= label(f, :name, class: "title text-lg text-primary-500") %>
|
||||
<%= text_input(f, :name, class: "input input-primary col-span-2") %>
|
||||
<span class="col-span-3">
|
||||
<%= error_tag(f, :name) %>
|
||||
</span>
|
||||
<%= label(f, :bg_color, class: "title text-lg text-primary-500") %>
|
||||
<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 class="col-span-3">
|
||||
<%= error_tag(f, :bg_color) %>
|
||||
</span>
|
||||
<%= label(f, :text_color, class: "title text-lg text-primary-500") %>
|
||||
<span class="mx-auto col-span-2" phx-update="ignore">
|
||||
<%= color_input(f, :text_color, value: "#ffffff") %>
|
||||
<%= color_input(f, :text_color) %>
|
||||
</span>
|
||||
<span class="col-span-3">
|
||||
<%= error_tag(f, :text_color) %>
|
||||
@ -102,13 +102,5 @@ defmodule CanneryWeb.TagLive.FormComponent do
|
||||
{:error, %Ecto.Changeset{} = changeset} ->
|
||||
{:noreply, socket |> assign(changeset: changeset)}
|
||||
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
|
||||
|
@ -27,7 +27,7 @@ defmodule CanneryWeb.TagLive.Index do
|
||||
defp apply_action(socket, :new, _params) do
|
||||
socket
|
||||
|> assign(:page_title, "New Tag")
|
||||
|> assign(:tag, %Tag{})
|
||||
|> assign(:tag, %Tag{bg_color: Tags.random_bg_color(), text_color: "#ffffff"})
|
||||
end
|
||||
|
||||
defp apply_action(socket, :index, _params) do
|
||||
|
63
lib/cannery_web/live/tag_live/index.html.heex
Normal file
63
lib/cannery_web/live/tag_live/index.html.heex
Normal 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 %>
|
@ -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 %>
|
Loading…
Reference in New Issue
Block a user