Make WordPress Core

Opened 15 years ago

Closed 15 years ago

Last modified 15 years ago

#10680 closed task (blessed) (fixed)

QuickPress loading graphic cleanup

Reported by: janeforshort's profile 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 15 years ago.
A patch to the discribed bug
10680.diff (769 bytes) - added by bandonrandon 15 years ago.
fixed diff
10680.3-quickpress-spinner.diff (3.0 KB) - added by nacin 15 years ago.

Download all attachments as: .zip

Change History (14)

@bandonrandon
15 years ago

A patch to the discribed bug

#1 @bandonrandon
15 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 ";"

#2 @dd32
15 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 :))

@bandonrandon
15 years ago

fixed diff

#3 @bandonrandon
15 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.

#4 @nacin
15 years ago

  • Keywords has-patch added

#5 @nacin
15 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.

#6 @nacin
15 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).

#7 follow-up: @janeforshort
15 years ago

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

#8 in reply to: ↑ 7 @hakre
15 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.

#9 @nacin
15 years ago

@hakre:

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

#10 @nacin
15 years ago

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

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

#11 @nacin
15 years ago

[10390] - Modifications for RTL support.

Note: See TracTickets for help on using tickets.