Animate copy icon

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: [

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
+          <button phx-click={
-            class="transition-colors"
+            JS.dispatch("music_library:clipcopy", to: "#mb-" <> @record.musicbrainz_id)
-            phx-click={
+            |> JS.transition("animate-shake")
-              JS.dispatch("music_library:clipcopy", to: "#mb-" <> @record.musicbrainz_id)
+          }>
-            }
-          >
             <span class="sr-only"><%= gettext("Copy MusicBrainz ID to clipboard") %></span>
             <.icon
               name="hero-clipboard-document"

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
+          <button phx-click={
-            class="transition-colors"
+            JS.dispatch("music_library:clipcopy", to: "#mb-" <> @record.musicbrainz_id)
-            phx-click={
+            |> JS.transition("animate-shake")
-              JS.dispatch("music_library:clipcopy", to: "#mb-" <> @record.musicbrainz_id)
+          }>
-            }
-          >
             <span class="sr-only"><%= gettext("Copy MusicBrainz ID to clipboard") %></span>
             <.icon
               name="hero-clipboard-document"

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/record_live/show.html.heex:87
-#: lib/music_library_web/live/wishlist_live/show.html.heex:81
+#: 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/record_live/show.html.heex:95
-#: lib/music_library_web/live/wishlist_live/show.html.heex:89
+#: 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/record_live/show.html.heex:67
-#: lib/music_library_web/live/wishlist_live/show.html.heex:69
+#: lib/music_library_web/live/wishlist_live/show.html.heex:68
 #, elixir-autogen, elixir-format
 msgid "Copy MusicBrainz ID to clipboard"
 msgstr ""