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

Improve cover upload widget

Browse Source 
Nicely formatted, integrated preview, proper drag and drop
This commit is contained in:
Claudio Ortolina
2025-03-04 10:25:02 +00:00
parent a79548ae15
commit 0405de9b70
2 changed files with 70 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/components/form_component.ex
+52 -14
View File
@@ -56,24 +56,62 @@ defmodule MusicLibraryWeb.FormComponent do
type="datetime-local"
label={gettext("Purchased at")}
/>
<div phx-drop-target={@uploads.cover_data.ref}>
<div class="col-span-full">
<.label for={@uploads.cover_data.ref}>
{gettext("Cover art")}
</.label>
<.error :for={{_index, msg} <- @uploads.cover_data.errors}>{msg}</.error>
<span
:if={@uploads.cover_data.entries == []}
class="text-xs sm:text-sm float-right text-zinc-700 dark:text-zinc-400"
<div
phx-drop-target={@uploads.cover_data.ref}
class={[
"mt-2 flex justify-center rounded-lg",
"border border-dashed border-zinc-300",
"px-6 py-10"
]}
>
{gettext("No cover selected")}
</span>
<%= for entry <- @uploads.cover_data.entries do %>
<span class="float-right text-zinc-700 dark:text-zinc-400">{entry.progress}%</span>
<% end %>
<.live_file_input
class="mt-2 block w-full rounded-lg text-zinc-900 dark:text-zinc-200 focus:ring-0 text-xs sm:text-sm sm:leading-6"
upload={@uploads.cover_data}
/>
<div class="text-center">
<svg
:if={@uploads.cover_data.entries == []}
class="mx-auto size-24 text-zinc-300"
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M1.5 6a2.25 2.25 0 0 1 2.25-2.25h16.5A2.25 2.25 0 0 1 22.5 6v12a2.25 2.25 0 0 1-2.25 2.25H3.75A2.25 2.25 0 0 1 1.5 18V6ZM3 16.06V18c0 .414.336.75.75.75h16.5A.75.75 0 0 0 21 18v-1.94l-2.69-2.689a1.5 1.5 0 0 0-2.12 0l-.88.879.97.97a.75.75 0 1 1-1.06 1.06l-5.16-5.159a1.5 1.5 0 0 0-2.12 0L3 16.061Zm10.125-7.81a1.125 1.125 0 1 1 2.25 0 1.125 1.125 0 0 1-2.25 0Z"
clip-rule="evenodd"
/>
</svg>
<.live_img_preview
:for={entry <- @uploads.cover_data.entries}
class="mx-auto size-24"
entry={entry}
/>
<div class="mt-4 text-sm/6 text-zinc-600 dark:text-zinc-400">
<%= for entry <- @uploads.cover_data.entries do %>
<span>{entry.progress}%</span>
<% end %>
</div>
<div class="mt-4 flex text-sm/6 text-zinc-600 dark:text-zinc-300">
<label
for={@uploads.cover_data.ref}
class={[
"relative cursor-pointer rounded-md font-semibold",
"focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-600 focus-within:ring-offset-2",
"hover:text-zinc-200"
]}
>
<span>{gettext("Upload a file")}</span>
<.live_file_input class="sr-only" upload={@uploads.cover_data} />
</label>
<p class="pl-1">{gettext("or drag and drop")}</p>
</div>
<p class="text-xs/5 text-zinc-600 dark:text-zinc-400">
{gettext("PNG, JPG, WEBP up to 8MB")}
</p>
</div>
</div>
</div>
<:actions>
<.button phx-disable-with={gettext("Saving...")}>{gettext("Save")}</.button>
priv/gettext/default.pot
+18 -8
View File
@@ -141,11 +141,6 @@ msgstr ""
msgid "Next"
msgstr ""
#: lib/music_library_web/components/form_component.ex:68
#, elixir-autogen, elixir-format
msgid "No cover selected"
msgstr ""
#: lib/music_library_web/components/import_component.ex:45
#, elixir-autogen, elixir-format
msgid "No results"
@@ -193,7 +188,7 @@ msgstr ""
msgid "Record imported successfully"
msgstr ""
#: lib/music_library_web/components/form_component.ex:128
#: lib/music_library_web/components/form_component.ex:166
#, elixir-autogen, elixir-format
msgid "Record updated successfully"
msgstr ""
@@ -203,12 +198,12 @@ msgstr ""
msgid "Release"
msgstr ""
#: lib/music_library_web/components/form_component.ex:79
#: lib/music_library_web/components/form_component.ex:117
#, elixir-autogen, elixir-format
msgid "Save"
msgstr ""
#: lib/music_library_web/components/form_component.ex:79
#: lib/music_library_web/components/form_component.ex:117
#, elixir-autogen, elixir-format
msgid "Saving..."
msgstr ""
@@ -680,3 +675,18 @@ msgstr ""
#, elixir-autogen, elixir-format
msgid "Similar artists"
msgstr ""
#: lib/music_library_web/components/form_component.ex:111
#, elixir-autogen, elixir-format
msgid "PNG, JPG, WEBP up to 8MB"
msgstr ""
#: lib/music_library_web/components/form_component.ex:105
#, elixir-autogen, elixir-format
msgid "Upload a file"
msgstr ""
#: lib/music_library_web/components/form_component.ex:108
#, elixir-autogen, elixir-format
msgid "or drag and drop"
msgstr ""