Make WordPress Core

Opened 3 years ago

Closed 2 years ago

Last modified 2 years ago

#51476 closed enhancement (fixed)

When plugins are updating, the adminbar icon should also rotate

Reported by: johnjamesjacoby's profile johnjamesjacoby Owned by: sergeybiryukov's profile SergeyBiryukov
Milestone: 5.7 Priority: normal
Severity: normal Version: 4.6
Component: Plugins Keywords: has-screenshots has-patch
Focuses: javascript, css, rtl, administration Cc:

Description

When updating plugins on the Plugins screen using the new'ish fancy inline updating approach, an inline notice will appear with a rotating dashicon to signify that it is currently being updated.

I think it would be a nice bit of polish if the same dashicon in the adminbar also rotated at the same time, and stopped when all plugins are done updating.

Attachments (10)

jjj-sc-2020-10-07 at 16.02.22@2x.png (47.6 KB) - added by johnjamesjacoby 3 years ago.
51476.patch (1.7 KB) - added by ravipatel 3 years ago.
Updated a pathch with js & css code
51476-new.patch (1.5 KB) - added by ravipatel 3 years ago.
latest code
51476-update-plugin-icon.2.patch (3.0 KB) - added by ravipatel 3 years ago.
success & error based managed code.
51476-update-single-bulk.patch (3.2 KB) - added by ravipatel 3 years ago.
Added New code for a single & bulk action : Update
51476.2.diff (2.4 KB) - added by audrasjb 2 years ago.
Patch refreshed against trunk
91096065e0f47ebb2537dbd2f573144b.mp4 (1.3 MB) - added by audrasjb 2 years ago.
51476.2.diff on large screen
7d535f01ea51f5d4327513f776a0ed86.mp4 (1.4 MB) - added by audrasjb 2 years ago.
51476.2.diff on small screen
51476.3.diff (2.3 KB) - added by SergeyBiryukov 2 years ago.
adb060d686f5b6a9cb25fe1caacea8da.mp4 (2.1 MB) - added by audrasjb 2 years ago.
Testing 51476.3.diff

Change History (36)

#1 @johnbillion
3 years ago

  • Focuses css added

@ravipatel
3 years ago

Updated a pathch with js & css code

#2 @ravipatel
3 years ago

  • Keywords has-patch added
  • Version set to trunk

@ravipatel
3 years ago

latest code

This ticket was mentioned in Slack in #core by ravi. View the logs.


3 years ago

#4 @ravipatel
3 years ago

  • Focuses javascript rtl added

@ravipatel
3 years ago

success & error based managed code.

This ticket was mentioned in Slack in #core-css by ryelle. View the logs.


3 years ago

#6 @ryelle
3 years ago

  • Keywords needs-design-feedback added

This came up in the CSS bug scrub today, and we decided it could use a designer's input.

#7 @johnjamesjacoby
3 years ago

If it helps, I came to the conclusion that this would be useful when updating several plugins at the same time, but without using the bulk updater.

Once I've scrolled away from a plugin and clicked to update another, there is no indication within the viewport that plugins are successfully or failing to update, other than the number being decremented on success.

Seeing the icon spin in the adminbar seems like a logical way, to me, to communicate to users that something is still processing somewhere on the page.

@ravipatel
3 years ago

Added New code for a single & bulk action : Update

This ticket was mentioned in Slack in #design by paaljoachim. View the logs.


3 years ago

#9 @paaljoachim
3 years ago

We discussed the ticket during a design feedback session and liked the idea of having a rotating spinner in the top admin bar. There was some additional discussion. Here is a link: https://wordpress.slack.com/archives/C02S78ZAL/p1603902566204600

One question came up. How would this behave on mobile?

It would be great with some newer screenshots. Thanks.

Last edited 3 years ago by paaljoachim (previous) (diff)

#10 @paaljoachim
3 years ago

  • Focuses accessibility added

#11 @hellofromTonya
3 years ago

  • Version changed from trunk to 4.6

The "updating plugins on the Plugins screen using the new'ish fancy inline updating approach" was added before 5.6. In talking with others, Ajax updates were in 4.6. Changing the version to 4.6.

However, if this version is not correct, please advise or update.

#12 @SergeyBiryukov
3 years ago

  • Keywords needs-design-feedback removed
  • Milestone changed from Awaiting Review to 5.7
  • Owner set to SergeyBiryukov
  • Status changed from new to reviewing

Some design feedback was provided in comment:9, looks like this is good to go, assuming the patch works as expected.

This ticket was mentioned in Slack in #design by paaljoachim. View the logs.


3 years ago

@audrasjb
2 years ago

Patch refreshed against trunk

@audrasjb
2 years ago

51476.2.diff on large screen

@audrasjb
2 years ago

51476.2.diff on small screen

#15 @audrasjb
2 years ago

  • Keywords commit added

I tested the last proposed patch and it works like a charm (see video screenshots above).
Added 51476.2.diff to refresh the patch against trunk.
Looks good to go. Marking this for commit.

Last edited 2 years ago by audrasjb (previous) (diff)

#16 @paaljoachim
2 years ago

Nice job, @audrasjb !
Looks good!

#17 @sabernhardt
2 years ago

I generally dislike adding motion, but I think anyone who agrees with me could have the prefers-reduced-motion setting set to reduce. A similar consideration was made for the login shake on #49723.

(If making this change, it could be a separate commit on this ticket.)

#18 @johnjamesjacoby
2 years ago

@sabernhardt that is a good point, and I'm glad you mentioned it.

If the existing Plugin list-table-row spinners are already compatible with the reduced-motion setting, I think the right thing to do is to include support for it in this issue. If not, I think they all should be addressed together in a new ticket.

#19 @audrasjb
2 years ago

That's a really good point. By the way the issue also exists in the existing Plugin (and Themes, for multisites) Screen. Therefore, I created #52263.

I think this ticket can be committed as it is, and the issue addressed on the other one :)

thanks!

This ticket was mentioned in Slack in #accessibility by alexstine. View the logs.


2 years ago

#21 @alexstine
2 years ago

  • Focuses accessibility removed

#22 @SergeyBiryukov
2 years ago

Noticed a minor issue with 51476.2.diff: the placement of adding/removing the class is not really consistent.

In the three functions affected, there are these conditionals:

if ( 'plugins' === pagenow || 'plugins-network' === pagenow ) {
	...
} else if ( 'plugin-install' === pagenow || 'plugin-install-network' === pagenow ) {
	...
}

In the first function, adding the class happens outside of them, but in the other two the class is only removed in the first conditional, so when updating a plugin from the Add Plugins screen, the icon just keeps spinning forever.

51476.3.diff fixes that. I've also changed the .updating-message class to .spin, since there's no message on the admin bar icon. This is also somewhat consistent with the .spin class used in auto-update toggles.

#23 @audrasjb
2 years ago

  • Keywords commit removed

Erf, I completely missed those issues. Testing your patch right now.

@audrasjb
2 years ago

Testing 51476.3.diff

#24 @audrasjb
2 years ago

Patch works well on my side 😎

#25 @SergeyBiryukov
2 years ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

In 50027:

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.

#26 @SergeyBiryukov
2 years ago

In 50028:

Accessibility: Administration: Respect the prefers-reduced-motion media query for update icon spinner animations.

The update icon rotation should not occur when the user has opted to reduce motion, for example by selecting the "Reduce motion" option in macOS' preferences or unselecting "Show animations in Windows" in Windows' preferences.

Follow-up to [47813], [50027].

Props xkon, audrasjb, johnbillion.
Fixes #52263. See #51476.

Note: See TracTickets for help on using tickets.