WordPress.org

Make WordPress Core

Opened 11 months ago

Closed 8 months ago

Last modified 8 months ago

#51476 closed enhancement (fixed)

When plugins are updating, the adminbar icon should also rotate

Reported by: johnjamesjacoby Owned by: 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 11 months ago.
51476.patch (1.7 KB) - added by ravipatel 11 months ago.
Updated a pathch with js & css code
51476-new.patch (1.5 KB) - added by ravipatel 11 months ago.
latest code
51476-update-plugin-icon.2.patch (3.0 KB) - added by ravipatel 11 months ago.
success & error based managed code.
51476-update-single-bulk.patch (3.2 KB) - added by ravipatel 11 months ago.
Added New code for a single & bulk action : Update
51476.2.diff (2.4 KB) - added by audrasjb 8 months ago.
Patch refreshed against trunk
91096065e0f47ebb2537dbd2f573144b.mp4 (1.3 MB) - added by audrasjb 8 months ago.
51476.2.diff on large screen
7d535f01ea51f5d4327513f776a0ed86.mp4 (1.4 MB) - added by audrasjb 8 months ago.
51476.2.diff on small screen
51476.3.diff (2.3 KB) - added by SergeyBiryukov 8 months ago.
adb060d686f5b6a9cb25fe1caacea8da.mp4 (2.1 MB) - added by audrasjb 8 months ago.
Testing 51476.3.diff

Change History (36)

#1 @johnbillion
11 months ago

  • Focuses css added

@ravipatel
11 months ago

Updated a pathch with js & css code

#2 @ravipatel
11 months ago

  • Keywords has-patch added
  • Version set to trunk

@ravipatel
11 months ago

latest code

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


11 months ago

#4 @ravipatel
11 months ago

  • Focuses javascript rtl added

@ravipatel
11 months ago

success & error based managed code.

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


11 months ago

#6 @ryelle
11 months 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
11 months 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
11 months ago

Added New code for a single & bulk action : Update

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


11 months ago

#9 @paaljoachim
11 months 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 10 months ago by paaljoachim (previous) (diff)

#10 @paaljoachim
11 months ago

  • Focuses accessibility added

#11 @hellofromTonya
10 months 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
10 months 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.


10 months ago

@audrasjb
8 months ago

Patch refreshed against trunk

@audrasjb
8 months ago

51476.2.diff on large screen

@audrasjb
8 months ago

51476.2.diff on small screen

#15 @audrasjb
8 months 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 8 months ago by audrasjb (previous) (diff)

#16 @paaljoachim
8 months ago

Nice job, @audrasjb !
Looks good!

#17 @sabernhardt
8 months 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
8 months 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
8 months 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.


8 months ago

#21 @alexstine
8 months ago

  • Focuses accessibility removed

#22 @SergeyBiryukov
8 months 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
8 months ago

  • Keywords commit removed

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

@audrasjb
8 months ago

Testing 51476.3.diff

#24 @audrasjb
8 months ago

Patch works well on my side 😎

#25 @SergeyBiryukov
8 months 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
8 months 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.