cloud/music_library
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Standardize all icon-based actions to buttons

Browse Source 
Use a combination of ghost and soft, with button groups where
appropriate. Also remove unnecessary negative margins, and pad around
for ease of use on mobile.
This commit is contained in:
Claudio Ortolina
2025-10-17 20:02:04 +01:00
parent 8d01980c87
commit f4727bdcbd
14 changed files with 279 additions and 255 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/components/add_record.ex
+1 -1
View File
@@ -95,7 +95,7 @@ defmodule MusicLibraryWeb.Components.AddRecord do
<span class="sr-only">{gettext("Choose which format to import")}</span>
<.icon
name="hero-plus"
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
class="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
aria-hidden="true"
data-slot="icon"
/>
lib/music_library_web/components/layouts/app.html.heex
+77 -68
View File
@@ -46,74 +46,83 @@
</.nav_link>
</div>
</div>
<div class="flex space-x-2 md:space-x-4 items-center">
<.universal_search_trigger />
<.dropdown placement="bottom-end">
<:toggle>
<span class="sr-only">{gettext("Actions")}</span>
<.icon
name="hero-ellipsis-vertical"
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
aria-hidden="true"
data-slot="icon"
/>
</:toggle>
<.dropdown_link href={~p"/scrobbled-tracks"}>
<.icon
name="hero-musical-note"
class="h-4 w-4 mr-2"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Scrobbled Tracks")}
</.dropdown_link>
<.dropdown_link href={~p"/scrobble-rules"}>
<.icon
name="hero-adjustments-horizontal"
class="h-4 w-4 mr-2"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Scrobble Rules")}
</.dropdown_link>
<.dropdown_link href={~p"/online-store-templates"}>
<.icon
name="hero-building-storefront"
class="h-4 w-4 mr-2"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Online Store Templates")}
</.dropdown_link>
<.dropdown_link href={~p"/backup"}>
<.icon
name="hero-archive-box-arrow-down"
class="h-4 w-4 mr-2"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Backup")}
</.dropdown_link>
<.dropdown_separator />
<.dropdown_link href={~p"/dev/dashboard"}>
<.icon name="hero-chart-bar" class="h-4 w-4 mr-2" aria-hidden="true" data-slot="icon" />
{gettext("Live Dashboard")}
</.dropdown_link>
<.dropdown_link href={~p"/dev/oban"}>
<.icon name="hero-cog" class="h-4 w-4 mr-2" aria-hidden="true" data-slot="icon" />
{gettext("Oban")}
</.dropdown_link>
<.dropdown_separator />
<.dropdown_link href={~p"/login"}>
<.icon
name="hero-arrow-left-start-on-rectangle"
class="h-4 w-4 mr-2"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Logout")}
</.dropdown_link>
</.dropdown>
<div class="flex items-center">
<.button_group>
<.universal_search_trigger />
<.dropdown placement="bottom-end">
<:toggle>
<.button variant="soft">
<span class="sr-only">{gettext("Actions")}</span>
<.icon
name="hero-ellipsis-vertical"
class="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
aria-hidden="true"
data-slot="icon"
/>
</.button>
</:toggle>
<.dropdown_link href={~p"/scrobbled-tracks"}>
<.icon
name="hero-musical-note"
class="h-4 w-4 mr-2"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Scrobbled Tracks")}
</.dropdown_link>
<.dropdown_link href={~p"/scrobble-rules"}>
<.icon
name="hero-adjustments-horizontal"
class="h-4 w-4 mr-2"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Scrobble Rules")}
</.dropdown_link>
<.dropdown_link href={~p"/online-store-templates"}>
<.icon
name="hero-building-storefront"
class="h-4 w-4 mr-2"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Online Store Templates")}
</.dropdown_link>
<.dropdown_link href={~p"/backup"}>
<.icon
name="hero-archive-box-arrow-down"
class="h-4 w-4 mr-2"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Backup")}
</.dropdown_link>
<.dropdown_separator />
<.dropdown_link href={~p"/dev/dashboard"}>
<.icon
name="hero-chart-bar"
class="h-4 w-4 mr-2"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Live Dashboard")}
</.dropdown_link>
<.dropdown_link href={~p"/dev/oban"}>
<.icon name="hero-cog" class="h-4 w-4 mr-2" aria-hidden="true" data-slot="icon" />
{gettext("Oban")}
</.dropdown_link>
<.dropdown_separator />
<.dropdown_link href={~p"/login"}>
<.icon
name="hero-arrow-left-start-on-rectangle"
class="h-4 w-4 mr-2"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Logout")}
</.dropdown_link>
</.dropdown>
</.button_group>
</div>
</div>
</div>
lib/music_library_web/components/record_components.ex
+18 -15
View File
@@ -102,7 +102,7 @@ defmodule MusicLibraryWeb.RecordComponents do
</span>
<.icon
name="hero-banknotes"
class="-mt-1 h-4 w-4"
class="h-4 w-4"
aria-hidden="true"
data-slot="icon"
/>
@@ -113,7 +113,7 @@ defmodule MusicLibraryWeb.RecordComponents do
<span class="sr-only">
{gettext("Wishlisted on")}
</span>
<.icon name="hero-star" class="-mt-1 h-4 w-4" aria-hidden="true" data-slot="icon" />
<.icon name="hero-star" class="h-4 w-4" aria-hidden="true" data-slot="icon" />
{Records.Record.format_as_date(record.inserted_at)}
</span>
</p>
@@ -128,31 +128,32 @@ defmodule MusicLibraryWeb.RecordComponents do
<span class="sr-only">
{gettext("Purchased on")}
</span>
<.icon name="hero-banknotes" class="-mt-1 h-4 w-4" aria-hidden="true" data-slot="icon" />
<.icon name="hero-banknotes" class="h-4 w-4" aria-hidden="true" data-slot="icon" />
{Records.Record.format_as_date(record.purchased_at)}
</p>
<p :if={!record.purchased_at} class="text-xs leading-6 text-zinc-900 dark:text-zinc-300">
<span class="sr-only">
{gettext("Wishlisted on")}
</span>
<.icon name="hero-star" class="-mt-1 h-4 w-4" aria-hidden="true" data-slot="icon" />
<.icon name="hero-star" class="h-4 w-4" aria-hidden="true" data-slot="icon" />
{Records.Record.format_as_date(record.inserted_at)}
</p>
</div>
<.dropdown id={"actions-#{record.id}"} placement="bottom-end">
<:toggle>
<div
<.button
variant="ghost"
phx-click={JS.toggle_class("pointer-events-none", to: "#records > li")}
phx-click-away={JS.remove_class("pointer-events-none", to: "#records > li")}
>
<span class="sr-only">{gettext("Actions")}</span>
<.icon
name="hero-ellipsis-vertical"
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
class="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
aria-hidden="true"
data-slot="icon"
/>
</div>
</.button>
</:toggle>
<.focus_wrap id={"actions-#{record.id}-focus-wrap"} class="pointer-events-auto">
<.dropdown_link id={"actions-#{record.id}-edit"} patch={@record_edit_path.(record)}>
@@ -246,15 +247,17 @@ defmodule MusicLibraryWeb.RecordComponents do
<p class="pointer-events-none mt-2 block truncate text-sm font-medium text-zinc-900 dark:text-zinc-300">
{record.title}
</p>
<.dropdown id={"actions-#{record.id}"} placement="bottom-end" class="mt-2">
<.dropdown id={"actions-#{record.id}"} placement="bottom-end">
<:toggle>
<span class="sr-only">{gettext("Actions")}</span>
<.icon
name="hero-ellipsis-vertical"
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
aria-hidden="true"
data-slot="icon"
/>
<.button variant="ghost" class="mt-2">
<span class="sr-only">{gettext("Actions")}</span>
<.icon
name="hero-ellipsis-vertical"
class="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
aria-hidden="true"
data-slot="icon"
/>
</.button>
</:toggle>
<.focus_wrap id={"actions-#{record.id}-focus-wrap"}>
<.dropdown_link id={"actions-#{record.id}-edit"} patch={@record_edit_path.(record)}>
lib/music_library_web/components/release.ex
+1 -1
View File
@@ -69,7 +69,7 @@ defmodule MusicLibraryWeb.Components.Release do
<div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
<.icon
name="hero-exclamation-triangle"
class="-mt-1 mr-1 h-5 w-5"
class="h-5 w-5"
aria-hidden="true"
data-slot="icon"
/>
lib/music_library_web/components/scrobble_components.ex
+1 -1
View File
@@ -13,7 +13,7 @@ defmodule MusicLibraryWeb.ScrobbleComponents do
phx-click={JS.push("refresh_lastfm_feed")}
>
<span class="sr-only">{gettext("Refresh LastFm Feed")}</span>
<.icon name="hero-arrow-path" class="-mt-1 h-5 w-5" aria-hidden="true" data-slot="icon" />
<.icon name="hero-arrow-path" class="h-5 w-5" aria-hidden="true" data-slot="icon" />
</button>
"""
end
lib/music_library_web/components/stats_components.ex
+1 -1
View File
@@ -186,7 +186,7 @@ defmodule MusicLibraryWeb.StatsComponents do
</span>
<.icon
name="hero-banknotes"
class="-mt-1 h-4 w-4"
class="h-4 w-4"
aria-hidden="true"
data-slot="icon"
/>