From 0ccb165235d10e0ad2a7600be19096c7642a0dc3 Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Fri, 1 Nov 2024 10:55:05 +0000
Subject: [PATCH] Animate copy icon

---
 assets/tailwind.config.js                     | 19 ++++++++++++++++
 .../live/record_live/show.html.heex           | 10 ++++-----
 .../live/wishlist_live/show.html.heex         | 11 +++++-----
 priv/gettext/default.pot                      | 22 +++++++++----------
 4 files changed, 39 insertions(+), 23 deletions(-)

diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js
index cd7ec42c..eae31325 100644
--- a/assets/tailwind.config.js
+++ b/assets/tailwind.config.js
@@ -20,6 +20,25 @@ module.exports = {
       fontFamily: {
         sans: ['Inter', ...defaultTheme.fontFamily.sans],
       },
+      animation:{
+          'shake': 'shake 0.82s cubic-bezier(.36,.07,.19,.97) both',
+      },
+      keyframes: {
+          'shake' : {
+              '10%, 90%': {
+                  transform: 'translate3d(-1px, 0, 0)'
+              },
+              '20%, 80%' : {
+                  transform: 'translate3d(2px, 0, 0)'
+              },
+              '30%, 50%, 70%': {
+                  transform: 'translate3d(-4px, 0, 0)'
+              },
+              '40%, 60%': {
+                  transform: 'translate3d(4px, 0, 0)'
+              }
+          }
+      }
     },
   },
   plugins: [
diff --git a/lib/music_library_web/live/record_live/show.html.heex b/lib/music_library_web/live/record_live/show.html.heex
index 4d9aa3ad..d1b3171f 100644
--- a/lib/music_library_web/live/record_live/show.html.heex
+++ b/lib/music_library_web/live/record_live/show.html.heex
@@ -60,12 +60,10 @@
           <a href={musicbrainz_url(@record)}>
             <code id={"mb-#{@record.musicbrainz_id}"}><%= @record.musicbrainz_id %></code>
           </a>
-          <button
-            class="transition-colors"
-            phx-click={
-              JS.dispatch("music_library:clipcopy", to: "#mb-" <> @record.musicbrainz_id)
-            }
-          >
+          <button phx-click={
+            JS.dispatch("music_library:clipcopy", to: "#mb-" <> @record.musicbrainz_id)
+            |> JS.transition("animate-shake")
+          }>
             <span class="sr-only"><%= gettext("Copy MusicBrainz ID to clipboard") %></span>
             <.icon
               name="hero-clipboard-document"
diff --git a/lib/music_library_web/live/wishlist_live/show.html.heex b/lib/music_library_web/live/wishlist_live/show.html.heex
index 8263fea8..33e1096f 100644
--- a/lib/music_library_web/live/wishlist_live/show.html.heex
+++ b/lib/music_library_web/live/wishlist_live/show.html.heex
@@ -42,6 +42,7 @@
       ) %> · <%= Records.Record.type_long_label(@record.type) %>
     </p>
   </div>
+
   <div>
     <dl class="mt-4 divide-y divide-gray-100 dark:divide-slate-300/30">
       <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
@@ -60,12 +61,10 @@
           <a href={musicbrainz_url(@record)}>
             <code id={"mb-#{@record.musicbrainz_id}"}><%= @record.musicbrainz_id %></code>
           </a>
-          <button
-            class="transition-colors"
-            phx-click={
-              JS.dispatch("music_library:clipcopy", to: "#mb-" <> @record.musicbrainz_id)
-            }
-          >
+          <button phx-click={
+            JS.dispatch("music_library:clipcopy", to: "#mb-" <> @record.musicbrainz_id)
+            |> JS.transition("animate-shake")
+          }>
             <span class="sr-only"><%= gettext("Copy MusicBrainz ID to clipboard") %></span>
             <.icon
               name="hero-clipboard-document"
diff --git a/priv/gettext/default.pot b/priv/gettext/default.pot
index 24b4c517..14ea74ae 100644
--- a/priv/gettext/default.pot
+++ b/priv/gettext/default.pot
@@ -29,12 +29,12 @@ msgstr ""
 msgid "Attempting to reconnect"
 msgstr ""
 
-#: lib/music_library_web/live/record_live/show.html.heex:109
+#: lib/music_library_web/live/record_live/show.html.heex:107
 #, elixir-autogen, elixir-format
 msgid "Back to records"
 msgstr ""
 
-#: lib/music_library_web/live/wishlist_live/show.html.heex:101
+#: lib/music_library_web/live/wishlist_live/show.html.heex:100
 #, elixir-autogen, elixir-format
 msgid "Back to wishlist"
 msgstr ""
@@ -103,7 +103,7 @@ msgid "Formats"
 msgstr ""
 
 #: lib/music_library_web/live/record_live/show.html.heex:49
-#: lib/music_library_web/live/wishlist_live/show.html.heex:49
+#: lib/music_library_web/live/wishlist_live/show.html.heex:50
 #, elixir-autogen, elixir-format
 msgid "Genres"
 msgstr ""
@@ -125,8 +125,8 @@ msgstr ""
 msgid "Import from MusicBrainz"
 msgstr ""
 
-#: lib/music_library_web/live/record_live/show.html.heex:89
-#: lib/music_library_web/live/wishlist_live/show.html.heex:81
+#: lib/music_library_web/live/record_live/show.html.heex:87
+#: lib/music_library_web/live/wishlist_live/show.html.heex:80
 #, elixir-autogen, elixir-format
 msgid "Inserted at"
 msgstr ""
@@ -152,7 +152,7 @@ msgid "Logout"
 msgstr ""
 
 #: lib/music_library_web/live/record_live/show.html.heex:57
-#: lib/music_library_web/live/wishlist_live/show.html.heex:57
+#: lib/music_library_web/live/wishlist_live/show.html.heex:58
 #, elixir-autogen, elixir-format
 msgid "MusicBrainz ID"
 msgstr ""
@@ -201,7 +201,7 @@ msgstr ""
 msgid "Purchased at"
 msgstr ""
 
-#: lib/music_library_web/live/record_live/show.html.heex:81
+#: lib/music_library_web/live/record_live/show.html.heex:79
 #, elixir-autogen, elixir-format
 msgid "Purchased on"
 msgstr ""
@@ -307,8 +307,8 @@ msgstr ""
 msgid "Types"
 msgstr ""
 
-#: lib/music_library_web/live/record_live/show.html.heex:97
-#: lib/music_library_web/live/wishlist_live/show.html.heex:89
+#: lib/music_library_web/live/record_live/show.html.heex:95
+#: lib/music_library_web/live/wishlist_live/show.html.heex:88
 #, elixir-autogen, elixir-format
 msgid "Updated at"
 msgstr ""
@@ -346,8 +346,8 @@ msgstr ""
 msgid "close"
 msgstr ""
 
-#: lib/music_library_web/live/record_live/show.html.heex:69
-#: lib/music_library_web/live/wishlist_live/show.html.heex:69
+#: lib/music_library_web/live/record_live/show.html.heex:67
+#: lib/music_library_web/live/wishlist_live/show.html.heex:68
 #, elixir-autogen, elixir-format
 msgid "Copy MusicBrainz ID to clipboard"
 msgstr ""