From e4522e4a896b9f299d2ed92cbf3cb84bd73ce716 Mon Sep 17 00:00:00 2001 From: shibao Date: Fri, 28 Jan 2022 21:05:54 -0500 Subject: [PATCH] restyle tags --- lib/cannery/tags.ex | 14 +++++ .../live/tag_live/form_component.ex | 22 +++---- lib/cannery_web/live/tag_live/index.ex | 2 +- lib/cannery_web/live/tag_live/index.html.heex | 63 +++++++++++++++++++ lib/cannery_web/live/tag_live/index.html.leex | 62 ------------------ 5 files changed, 85 insertions(+), 78 deletions(-) create mode 100644 lib/cannery_web/live/tag_live/index.html.heex delete mode 100644 lib/cannery_web/live/tag_live/index.html.leex diff --git a/lib/cannery/tags.ex b/lib/cannery/tags.ex index c6987c5f..23dbee19 100644 --- a/lib/cannery/tags.ex +++ b/lib/cannery/tags.ex @@ -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 diff --git a/lib/cannery_web/live/tag_live/form_component.ex b/lib/cannery_web/live/tag_live/form_component.ex index b5128b1f..26d64163 100644 --- a/lib/cannery_web/live/tag_live/form_component.ex +++ b/lib/cannery_web/live/tag_live/form_component.ex @@ -38,7 +38,7 @@ defmodule CanneryWeb.TagLive.FormComponent do def render(assigns) do ~H"""
-

+

<%= @title %>

<.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") %> <%= error_tag(f, :name) %> <%= label(f, :bg_color, class: "title text-lg text-primary-500") %> - <%= color_input(f, :bg_color, value: random_color()) %> + <%= color_input(f, :bg_color) %> <%= error_tag(f, :bg_color) %> <%= label(f, :text_color, class: "title text-lg text-primary-500") %> - <%= color_input(f, :text_color, value: "#ffffff") %> + <%= color_input(f, :text_color) %> <%= 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 diff --git a/lib/cannery_web/live/tag_live/index.ex b/lib/cannery_web/live/tag_live/index.ex index 61afe1da..e5e5c050 100644 --- a/lib/cannery_web/live/tag_live/index.ex +++ b/lib/cannery_web/live/tag_live/index.ex @@ -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 diff --git a/lib/cannery_web/live/tag_live/index.html.heex b/lib/cannery_web/live/tag_live/index.html.heex new file mode 100644 index 00000000..37e411eb --- /dev/null +++ b/lib/cannery_web/live/tag_live/index.html.heex @@ -0,0 +1,63 @@ +
+

+ Listing Tags +

+

+ Tags can be added to your containers to help you organize +

+ <%= if @tags |> Enum.empty?() do %> +
+

+ No tags +

+ <%= live_patch("Create your first tag!", + to: Routes.tag_index_path(@socket, :new), + class: "btn btn-primary" + ) %> +
+ <% else %> + <%= live_patch("New Tag", + to: Routes.tag_index_path(@socket, :new), + class: "btn btn-primary" + ) %> + <% end %> +
+ <%= for tag <- @tags do %> +
+

+ <%= tag.name %> +

+ <%= live_patch to: Routes.tag_index_path(@socket, :edit, tag), + class: "text-primary-500 link" do %> + + + <% 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 %> + + + <% end %> +
+ <% end %> +
+
+<%= 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 %> diff --git a/lib/cannery_web/live/tag_live/index.html.leex b/lib/cannery_web/live/tag_live/index.html.leex deleted file mode 100644 index c0f3a8ea..00000000 --- a/lib/cannery_web/live/tag_live/index.html.leex +++ /dev/null @@ -1,62 +0,0 @@ -
-

- Listing Tags -

- -

- Tags can be added to your containers to help you organize -

- - <%= if @tags |> Enum.empty?() do %> -
-

- No tags -

- - <%= live_patch to: Routes.tag_index_path(@socket, :new), - class: "btn btn-primary" do %> - Create your first tag! - <% end %> -
- <% else %> - <%= live_patch to: Routes.tag_index_path(@socket, :new), - class: "btn btn-primary" do %> - New Tag - <% end %> - <% end %> - -
- <%= for tag <- @tags do %> -
- -

- <%= tag.name %> -

- -
- <%= 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}?"] %> -
-
- <% end %> -
-
- -<%= 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 %>