From d7ccc9282ce46207903434b9a0afe4e363a30cdf Mon Sep 17 00:00:00 2001 From: Chris McCord Date: Thu, 4 Nov 2021 21:20:31 -0400 Subject: [PATCH] Add hero icons with icon component --- lib/live_beats_web/live/live_helpers.ex | 20 ++++++++++--- lib/live_beats_web/live/song_live/index.ex | 4 +-- lib/live_beats_web/live/song_live/song_row.ex | 8 ++---- .../song_live/upload_form_component.html.heex | 4 +-- .../templates/layout/root.html.heex | 28 +++---------------- mix.exs | 1 + mix.lock | 1 + 7 files changed, 26 insertions(+), 40 deletions(-) diff --git a/lib/live_beats_web/live/live_helpers.ex b/lib/live_beats_web/live/live_helpers.ex index 48566db..ce43499 100644 --- a/lib/live_beats_web/live/live_helpers.ex +++ b/lib/live_beats_web/live/live_helpers.ex @@ -4,6 +4,21 @@ defmodule LiveBeatsWeb.LiveHelpers do alias Phoenix.LiveView.JS + def icon(assigns) do + assigns = + assigns + |> assign_new(:outlined, fn -> false end) + |> assign_new(:class, fn -> "w-4 h-4" end) + + ~H""" + <%= if @outlined do %> + <%= apply(Heroicons.Outline, @name, [assigns_to_attributes(assigns, [:outlined, :name])]) %> + <% else %> + <%= apply(Heroicons.Solid, @name, [assigns_to_attributes(assigns, [:outlined, :name])]) %> + <% end %> + """ + end + def link(%{redirect_to: to} = assigns) do opts = assigns |> assigns_to_attributes() |> Keyword.put(:to, to) assigns = assign(assigns, :opts, opts) @@ -148,9 +163,7 @@ defmodule LiveBeatsWeb.LiveHelpers do
- - - + <.icon name={:information_circle} outlined class="h-6 w-6 text-purple-600"/>

@@ -340,7 +353,6 @@ defmodule LiveBeatsWeb.LiveHelpers do """ end - @doc """ Calls a wired up event listener to call a function with arguments. diff --git a/lib/live_beats_web/live/song_live/index.ex b/lib/live_beats_web/live/song_live/index.ex index 454d36b..a1b1752 100644 --- a/lib/live_beats_web/live/song_live/index.ex +++ b/lib/live_beats_web/live/song_live/index.ex @@ -36,9 +36,7 @@ defmodule LiveBeatsWeb.SongLive.Index do <:col let={%{song: song}} label="Duration"><%= MP3Stat.to_mmss(song.duration) %> <:col let={%{song: song}} label=""> <.link phx-click={show_modal("delete-modal-#{song.id}")} class="inline-flex items-center px-3 py-2 text-sm leading-4 font-medium"> - - - + <.icon name={:trash} class="-ml-0.5 mr-2 h-4 w-4"/> Delete diff --git a/lib/live_beats_web/live/song_live/song_row.ex b/lib/live_beats_web/live/song_live/song_row.ex index 70a429d..222385c 100644 --- a/lib/live_beats_web/live/song_live/song_row.ex +++ b/lib/live_beats_web/live/song_live/song_row.ex @@ -14,15 +14,11 @@ defmodule LiveBeatsWeb.SongLive.SongRow do <%= if @active do %> - - - + <.icon name={:volume_up} class="h-5 w-5 -mt-1 -ml-1"/> <% else %> - - - + <.icon name={:play} class="h-5 w-5 text-gray-400"/> <% end %> <% end %> diff --git a/lib/live_beats_web/live/song_live/upload_form_component.html.heex b/lib/live_beats_web/live/song_live/upload_form_component.html.heex index 7f68963..d97516b 100644 --- a/lib/live_beats_web/live/song_live/upload_form_component.html.heex +++ b/lib/live_beats_web/live/song_live/upload_form_component.html.heex @@ -23,9 +23,7 @@
- + <.icon name={:x_circle} class="h-5 w-5 text-red-400"/>

diff --git a/lib/live_beats_web/templates/layout/root.html.heex b/lib/live_beats_web/templates/layout/root.html.heex index a5ab878..62d2d21 100644 --- a/lib/live_beats_web/templates/layout/root.html.heex +++ b/lib/live_beats_web/templates/layout/root.html.heex @@ -40,22 +40,13 @@ <%= live_redirect to: Routes.home_path(@conn, :index), class: "bg-gray-100 text-gray-900 group flex items-center px-2 py-2 text-base leading-5 font-medium rounded-md" do %> - + <.icon name={:home} outlined class="text-gray-500 mr-3 flex-shrink-0 h-6 w-6"/> Home <% end %> - + <.icon name={:music_note} outlined class="text-gray-400 group-hover:text-gray-500 mr-3 flex-shrink-0 h-6 w-6"/> My tasks @@ -218,24 +209,13 @@ <%= live_redirect to: Routes.home_path(@conn, :index), class: "bg-gray-200 text-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md" do %> - + <.icon name={:home} outlined class="text-gray-500 mr-3 flex-shrink-0 h-6 w-6"/> Home <% end %> <%= live_redirect to: Routes.song_index_path(@conn, :index), class: "text-gray-700 hover:text-gray-900 hover:bg-gray-50 group flex items-center px-2 py-2 text-sm font-medium rounded-md" do %> - + <.icon name={:music_note} outlined class="text-gray-400 group-hover:text-gray-500 mr-3 flex-shrink-0 h-6 w-6"/> My Songs <% end %> diff --git a/mix.exs b/mix.exs index 6ecc712..1e70f92 100644 --- a/mix.exs +++ b/mix.exs @@ -50,6 +50,7 @@ defmodule LiveBeats.MixProject do {:jason, "~> 1.2"}, {:plug_cowboy, "~> 2.5"}, {:mint, "~> 1.0"}, + {:heroicons, "~> 0.2.2"}, ] end diff --git a/mix.lock b/mix.lock index 82d3019..184590f 100644 --- a/mix.lock +++ b/mix.lock @@ -14,6 +14,7 @@ "file_system": {:hex, :file_system, "0.2.10", "fb082005a9cd1711c05b5248710f8826b02d7d1784e7c3451f9c1231d4fc162d", [:mix], [], "hexpm", "41195edbfb562a593726eda3b3e8b103a309b733ad25f3d642ba49696bf715dc"}, "floki": {:hex, :floki, "0.31.0", "f05ee8a8e6a3ced4e62beeb2c79a63bc8e12ab98fbaaf6e6a3d9b76b1278e23f", [:mix], [{:html_entities, "~> 0.5.0", [hex: :html_entities, repo: "hexpm", optional: false]}], "hexpm", "b05afa372f5c345a5bf240ac25ea1f0f3d5fcfd7490ac0beeb4a203f9444891e"}, "gettext": {:hex, :gettext, "0.18.2", "7df3ea191bb56c0309c00a783334b288d08a879f53a7014341284635850a6e55", [:mix], [], "hexpm", "f9f537b13d4fdd30f3039d33cb80144c3aa1f8d9698e47d7bcbcc8df93b1f5c5"}, + "heroicons": {:hex, :heroicons, "0.2.4", "12824795f25340415bffa9a501b96c89dc856ed732e82acccdab635fee92411b", [:mix], [{:phoenix_html, "~> 2.14 or ~> 3.0", [hex: :phoenix_html, repo: "hexpm", optional: false]}], "hexpm", "7d6c51dc8ecaadb37943247da83ec2fbf3f6b479a23f4cf0195bd61ec2268128"}, "html_entities": {:hex, :html_entities, "0.5.2", "9e47e70598da7de2a9ff6af8758399251db6dbb7eebe2b013f2bbd2515895c3c", [:mix], [], "hexpm", "c53ba390403485615623b9531e97696f076ed415e8d8058b1dbaa28181f4fdcc"}, "id3": {:hex, :id3, "1.0.1", "344840dee445c19be4b6dca9c70f0a7cd5dd03cb4260bae8ad9a21457ef12813", [:mix], [{:rustler, "~> 0.21.0", [hex: :rustler, repo: "hexpm", optional: false]}], "hexpm", "07ee2a284414065920751a528f237e77dc2aeed222a75302f909f3c07fd867e1"}, "jason": {:hex, :jason, "1.2.2", "ba43e3f2709fd1aa1dce90aaabfd039d000469c05c56f0b8e31978e03fa39052", [:mix], [{:decimal, "~> 1.0 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: true]}], "hexpm", "18a228f5f0058ee183f29f9eae0805c6e59d61c3b006760668d8d18ff0d12179"},