WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 5 years ago

Last modified 5 years ago

#10680 closed task (blessed) (fixed)

QuickPress loading graphic cleanup

Reported by: janeforshort Owned by:
Milestone: 3.0 Priority: normal
Severity: normal Version: 2.8.4
Component: UI Keywords: has-patch quickpress spinner
Focuses: Cc:

Description

The loading graphic (the spinner that looks like an ourobouros) for the QuickPress module on the Dashboard overlaps the end of the QuickPress title in the title bar. This needs to be moved so it looks better.

Would be okay: Shift the spinner a little more to the right/give it some more padding so it doesn't overlap the text.

Would be much better: Move the spinner out of the title bar altogether, and have it appear to the left of the Publish and/or Save Draft buttons, depending on which was pressed. This would a) be more contextual, and b) give the user a visual representation of which button they clicked, to reassure them.

Attachments (3)

dashboard.dev.js.diff (1.6 KB) - added by bandonrandon 6 years ago.
A patch to the discribed bug
10680.diff (769 bytes) - added by bandonrandon 6 years ago.
fixed diff
10680.3-quickpress-spinner.diff (3.0 KB) - added by nacin 5 years ago.

Download all attachments as: .zip

Change History (14)

@bandonrandon6 years ago

A patch to the discribed bug

comment:1 @bandonrandon6 years ago

  • Cc bandonrandon added
  • Resolution set to fixed
  • Status changed from new to closed

Hello,
This is my first attempt at trying to fix a wordpress bug. So if I did this wrong let me know. I changed the file so that the spinner was moved over to the right of the "QuickPress" text. I did so by changing

t = $('#quick-press').submit( function() {
			$('#dashboard_quick_press h3').append( '<img src="images/wpspin_light.gif" style="margin: 6px 0 0 0; vertical-align: middle" />' );
			$('#quick-press .submit input[type="submit"], #quick-press .submit input[type="reset"]').attr('disabled','disabled');

to

t = $('#quick-press').submit( function() {
			$('#dashboard_quick_press h3').append( '<img src="images/wpspin_light.gif" style="margin: 0 0 0 6px; vertical-align: middle;" />' );
			$('#quick-press .submit input[type="submit"], #quick-press .submit input[type="reset"]').attr('disabled','disabled');

the two problems I believe that were causing this issue were the margin padding being on the right of the element not the left and the "vertical-align:middle" not having a closing ";"

comment:2 @dd326 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

We close bugs as fixed once the change is committed to WordPress SVN.

The format of the uploaded .diff file is also incorrect, You might find these resources handy:

(I realise you're new to WordPress development, Thus that is why i've given this reply, I welcome you to WordPress trac and hope you can suggest fixes for other tickets too :))

@bandonrandon6 years ago

fixed diff

comment:3 @bandonrandon6 years ago

Thanks dd32, I was able to find a tutorial on how to create a proper .diff file with Linux and have uploading a correct file as 10680.diff. Thank you all for your patients as I figure this out.

comment:4 @nacin5 years ago

  • Keywords has-patch added

comment:5 @nacin5 years ago

  • Keywords needs-patch added; has-patch removed
  • Milestone changed from 2.9 to 3.0

Punting.

The patch is okay except that it doesn't prevent the spinner from causing the meta box title to grow by a few pixels, which makes it jittery (particularly when the ajax response is received quickly), so no use applying it. Instead of coming up with a workaround, I suggest it gets moved next to the button that was pressed.

comment:6 @nacin5 years ago

  • Keywords has-patch added; needs-patch removed

Patch places the spinner next to the publish button. It will appear for either Save Draft or Publish.

Thought about two different spinners, but it would take some additional refactoring of markup to introduce a second spinner -- and the post add/edit screen only uses one next to the post button.

The buttons are far enough apart in both instances that I'm not sure visual assurance of which button was pressed is necessary. Would like to hear more from Jane if we should introduce a second spinner (in both places).

comment:7 follow-up: @janeforshort5 years ago

I'd say let's keep it consistent with the regular posting screen and just have one for now.

comment:8 in reply to: ↑ 7 @hakre5 years ago

Replying to nacin:

The patch is okay except that it doesn't prevent the spinner from causing the meta box title to grow by a few pixels, which makes it jittery (particularly when the ajax response is received quickly), so no use applying it. Instead of coming up with a workaround, I suggest it gets moved next to the button that was pressed.

Jittery confirmed for pre-patched and patched.

Replying to janeforshort:

I'd say let's keep it consistent with the regular posting screen and just have one for now.

On the regular posting screen the loading circle image is displayed on the left of the button that just has been pressed. That would solve the reported jittery problem as well and should meet the reporters much better critereons.

comment:9 @nacin5 years ago

@hakre:

Could you test patch 3? Mine should address those concerns.

comment:10 @nacin5 years ago

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

(In [13085]) Re-position the QuickPress ajax spinner. Fixes #10680

comment:11 @nacin5 years ago

[10390] - Modifications for RTL support.

Note: See TracTickets for help on using tickets.