Changeset 50027

Timestamp:

01/27/2021 10:57:43 AM (4 years ago)

Author:

SergeyBiryukov

Message:

Plugins: Rotate the Updates icon in the admin bar when performing inline updates on the Plugins screen.

This provides better indication within the viewport about ongoing processes on the page when updating several plugins at the same time, but without using the bulk updater.

Props ravipatel, audrasjb, johnjamesjacoby, paaljoachim, hellofromTonya, sabernhardt, mdwolinski, karmatosed, SergeyBiryukov.
Fixes #51476.

Location:

trunk/src

Files:

• js/_enqueues/wp/updates.js (modified) (6 diffs)
• wp-includes/css/admin-bar.css (modified) (1 diff)

trunk/src/js/_enqueues/wp/updates.js

@@ -444 +444 @@
      */
     wp.updates.updatePlugin = function( args ) {
-        var $updateRow, $card, $message, message;
+        var $updateRow, $card, $message, message,
+            $adminBarUpdates = $( '#wp-admin-bar-updates' );
 
         args = _.extend( {
@@ -472 +473 @@
         }
 
+        $adminBarUpdates.addClass( 'spin' );
+
         if ( $message.html() !== __( 'Updating...' ) ) {
             $message.data( 'originaltext', $message.html() );
@@ -500 +503 @@
      */
     wp.updates.updatePluginSuccess = function( response ) {
-        var $pluginRow, $updateMessage, newText;
+        var $pluginRow, $updateMessage, newText,
+            $adminBarUpdates = $( '#wp-admin-bar-updates' );
 
         if ( 'plugins' === pagenow || 'plugins-network' === pagenow ) {
@@ -521 +525 @@
                 .addClass( 'button-disabled updated-message' );
         }
+
+        $adminBarUpdates.removeClass( 'spin' );
 
         $updateMessage
@@ -554 +560 @@
      */
     wp.updates.updatePluginError = function( response ) {
-        var $card, $message, errorMessage;
+        var $card, $message, errorMessage,
+            $adminBarUpdates = $( '#wp-admin-bar-updates' );
 
         if ( ! wp.updates.isValidResponse( response, 'update' ) ) {
@@ -631 +638 @@
             } );
         }
+
+        $adminBarUpdates.removeClass( 'spin' );
 
         wp.a11y.speak( errorMessage, 'assertive' );

trunk/src/wp-includes/css/admin-bar.css

@@ -587 +587 @@
     content: "\f463";
     top: 2px;
+}
+
+#wpadminbar #wp-admin-bar-updates.spin .ab-icon:before {
+    display: inline-block;
+    animation: rotation 2s infinite linear;
 }