Fixes to Ajaxify Admin before 3.1

[jane]

This ticket will hold the individual adjustments needed for the ajaxified admin features before we release for 3.1

1. When using pagination located at the bottom of the table, should load new results and bump you to the top of the screen.

2. On comments, no need to sort alphabetically by comment.

3. On p=36220 comment screens, no need to sort by "in reply to" since they are all in reply to the same comment.

4. Save-state hashes for URLs.

4b. Don't bump bulk action and other triggers back to the front page.

5. Date columns should first sort by DESC, not ASC. Plugins will likely need a new way to request DESC over ASC for a specific column.

[nacin]

Adding a few more issues.

[jane]

Change default sort by chronology to be reversed by default (most recent first).

[westi]

Also #15500

[scribu]

3. On p=36220 comment screens, no need to sort by "in reply to" since they are all in reply to the same comment.

For clarity, the column is called "In response to" and I think it should simply not be shown at all.

[scribu]

It would be great if someone could take a look at ​http://core.trac.wordpress.org/ticket/14579#comment:158 as I don't have access to Internet Explorer.

[scribu]

(In [16588]) Make comment content column unsortable. See #15580

[scribu]

Date columns should first sort by DESC, not ASC.

Why?

[nacin]

Replying to scribu:

Date columns should first sort by DESC, not ASC.

Why?

Per Jane:

Change default sort by chronology to be reversed by default (most recent first).

This is the expected functionality. Oldest first is unintuitive.

[scribu]

Oldest first is unintuitive only if you're sorting by date, but there's only one date column.

When you're sorting by title, you don't expect to see the post with title Z first.

[scribu]

Ah, I now saw that it's only supposed to be applied for date columns. Sorry.

[scribu]

(In [16593]) Make date columns first sort in descending order. See #15580

[nacin]

Replying to scribu:

(In [16593]) Make date columns first sort in descending order. See #15580

Great work. :-)

[scribu]

(In [16594]) Update get_*_columns() method docs. See #15580

[scribu]

Removes 'In Reply To' column. Doesn't work for inline editing & replying

[scribu]

(In [16602]) Make bottom admin pagination scroll to the top after rows are updated. See #15580

[ryan]

What are the plans for hashes? Use one of the many jQuery plugins? Handroll?

[scribu]

For hashes, I began rolling out a custom solution because I didn't really find any jQuery plugins that would help. jquery.query.js seems to be the only thing needed.

​hashes.diff:

• changing the rows changes the hash.
• going to an url with a hash changes the rows. But, it doesn't change the ajaxified elements, like the page number etc.

[ryan]

Crazy notion: Support pushState()/popState() and forget hashes.

[scribu]

I thought the main reason for using hashes was to support bookmarking, not history.

[ryan]

Don't those update the URL in the location bar so that a proper link is shown?

[scribu]

That would be awesome. However, it's not supported in any current browser yet.

[ryan]

Yeah, popState support is pretty young.

[ryan]

Seems to work in Chrome and FF4 will support it. Very tempting to go modern, especially given what a hack hashes are. :-)

[scribu]

I'll play around with it in Chrome, then.

[scribu]

(In [16615]) Update URL when performing ajaxified action. See #15580

[scribu]

With pushState(), when the user presses the back button, only the URL is updated, so - just like with hashes, we would have to take care of updating the rows and the UI elements again.

So, I used replaceState() instead, which doesn't create a new history entry.

[scribu]

(In [16616]) Add missing quote char when creating overlay. See #14579. See #15580

[scribu]

(In [16617]) Get rid of in favor of . Fixes #15607. See #15580

[scribu]

Yeah, the commit message was supposed to read "Get rid of $mode in favor of $post_id".

$mode seems to be a relic (it could be either 'single' or 'detail'), possibly since to edit a single comment you used edit-comments.php too?

Anyway, I stopped using it in favor of just checking the $post_id.

[nacin]

The $mode global also applies to edit.php, how you have the excerpt view.

[scribu]

Sure, but I only stopped using it in the comments screen, because it had no effect there.

[scribu]

From ​http://core.trac.wordpress.org/ticket/14579#comment:164:

I've noticed that when you sort by title in a list of hierarchical posts you loose the hierarchy indicators (which is what I would expect) but there seems to be no way to go back to the hierarchical listing without refreshing the entire page. Not having some way to revert could be confusing for people and while a page refresh will fix, that being the only way feels like it was just missed in the design process.

I considered a page refresh a good-enough method. However, that won't work since r16615: the sorting order will remain unchanged.

So, the only way to go back to the hierarchical order now is by clicking on the admin menu link again.

Under this circumstance, I think a UI element for going back to the hierarchical order would be useful.

[nacin]

A page refresh will also no longer clear search results: #15355.

[mikeschinkel]

Replying to scribu:

Under this circumstance, I think a UI element for going back to the hierarchical order would be useful.

+1

[scribu]

Aftermath: #15609

[nacin]

Strongly considering the need for an AJAX spinner. (See #15482.) Otherwise it seems like you get no real feedback on pagination, sorting, or searching.

[scribu]

Really have no idea on what to do about 4b.

[batmoo]

If I enter non-digits (e.g. 'abc') into the page number input and search, it returns an NaN. We can either have the parseInt call (in the keypress function for .current-page) fallback to 1

var page = parseInt( $el.val() ) || 1;
change_page( page, $el );

or alert the user and ask them to enter a valid number.

Similarly, if a user enters a page number higher than the total pages or below 1, we should either handle it gracefully (entering 11 with 9 total pages sends you to page 9; entering -1 sends you to page 1) or alert them.

[scribu]

(In [16644]) Validate pagination input. Props batmoo. See #15580

[lloydbudd]

4b. Don't bump bulk action and other triggers back to the front page.

ENV: wp trunk r16653 ( 3.1-beta1-16642 )

I take it this describes the scenario where the search term is cleared after a bulk action.

[JustinSainton]

Doesn't appear to work on custom post type pages when custom columns are added.
​http://scribu.net/wordpress/custom-sortable-columns.html shows custom columns working on regular post types, and it appears to work fine for non-custom columns on custom post types...just not custom columns on custom types.

[JustinSainton]

I'm a tool.

manage_edit-$ptype_sortable_columns

[batmoo]

Clean up loading overlay

[batmoo]

Replying to nacin:

Strongly considering the need for an AJAX spinner. (See #15482.) Otherwise it seems like you get no real feedback on pagination, sorting, or searching.

Patch (15580_loading_overlay.diff) cleans up the loading overlay. I've added a large version of the loading spinner since the small ones included with WP would be easily missed. Works nicely in IE6 too :)

[scribu]

Is there a specific reason for using .append() instead of .html() ?

[scribu]

Also, please upload the spinner graphic separately (it's not contained in the patch).

[batmoo]

use .html() instead of .append()

[batmoo]

Large loady spinner

[batmoo]

Replying to scribu:

Is there a specific reason for using .append() instead of .html() ?

Ah, yeah, probably better to use .html(). Not sure why I went with .append()

Replying to scribu:

Also, please upload the spinner graphic separately (it's not contained in the patch).

Uploaded.

[scribu]

problems with large spinner

[scribu]

A couple of problems with the large spinner:

• the overlay is about 10px higher than the rows
• the spinner isn't centered vertically, which looks weird when there's only a single row.

Both problems can be observed in ​Screenshot.png (made using Firefox 3.6)

[batmoo]

Fixes sizing issues, alignment, and scrolling

[batmoo]

Replying to scribu:

• the overlay is about 10px higher than the rows
• the spinner isn't centered vertically, which looks weird when there's only a single row.

Overlay size should be fixed in new patch. I've moved the spinner very close to the top so it should look and work well on both single and multiple rows. I've also moved the scrollTo right before the overlay is displayed; this is so that you see the loading feedback any time you trigger an action (particularly way down at the bottom of the page, such as the bottom pagination).

[scribu]

(In [16719]) Use large spinner instead of 'Loading...' text. Props batmoo. See #15580

[scribu]

I have to admin I'm not crazy about the grayish background of the overlay, but it does provide better contrast against the comments list for example, which is all white.

[westi]

Replying to scribu:

(In [16719]) Use large spinner instead of 'Loading...' text. Props batmoo. See #15580

Changes like this especially post beta 1 should wait for UI feedback from Jane before commit.

Reverting for now while we discuss this

[westi]

(In [16722]) Revert [16719] until it has has UI review. See #15580

[westi]

I'm not going to bother rebumping the script vers after this as it hasn't made it into a nightly build

[JohnONolan]

Screenshots are always great if possible

[scribu]

Posts screen with spinner

[scribu]

Comments screen with spinner

[scribu]

Sure:

​screenshot-1.png

​screenshot-2.png

[garyc40]

"4b. Don't bump bulk action and other triggers back to the front page."

see #15416 for patch

[JohnONolan]

What is the orientation of the spinner based on? As in - is there any particular reason for it to be right at the top in the middle? I'm guessing you're thinking about small screen sizes?

[scribu]

The top-middle is most likely to be seen.

Didn't think about the case where the user is at the footer of the table.

[JohnONolan]

Would it make more sense to put a standard spinner beside both of the "filter" buttons whenever they're clicked? A bit like the save-draft button when writing a new post.

[batmoo]

Replying to scribu:

Didn't think about the case where the user is at the footer of the table.

The patch jumps the user to the top of the page any time the table content is changed.

Replying to JohnONolan:

Would it make more sense to put a standard spinner beside both of the "filter" buttons whenever they're clicked? A bit like the save-draft button when writing a new post.

That's what I was originally thinking with #15482, but if we go that route, we'll end up with spinners everywhere. We'd need separate ones for pagination, filter, sorting, and so on. Or, we go with a single one in a prominent location.

[JohnONolan]

I'm not sure that jumping to the top of the page is great UX for an AJAX filter...?

Spinners beside actions is expected functionality at the moment, I'm pretty sure that's how almost everything works. This would be a move away from that and establishing a new type of feedback to an interaction. That's not to say it isn't a good idea - it just needs to be considered carefully in terms of both approach and implications.

Keyword: needs-jane

[batmoo]

Replying to JohnONolan:

I'm not sure that jumping to the top of the page is great UX for an AJAX filter...?

It makes sense when the user is at the bottom of the page and takes action. The reason my patch always jumps the user up is to make the loading indicator visible, otherwise it can feel like nothing happened.

Currently, only the bottom pagination jumps you up, and that probably make sense. Though, Bulk Edit should jump you up too.

Replying to JohnONolan:

Spinners beside actions is expected functionality at the moment, I'm pretty sure that's how almost everything works. This would be a move away from that and establishing a new type of feedback to an interaction. That's not to say it isn't a good idea - it just needs to be considered carefully in terms of both approach and implications.

Agreed, consistency is awesome. And I like the WordPress standard spinner :)

[scribu]

UI changes to be made, per IRC chat today:

• drop the overlay
• paging: small spinner next to the pagination
• search: small spinner next to search
• sorting: sorting arrow transforms into spinner

(at least that's what I understood)

[nacin]

I understood just two spinners, next to each pagination row, to be triggered on all actions. (There might be more room for them to appear to the left of the search box, even.)

Spinners everywhere is perhaps a long-term goal, but that's more cumbersome to do and implement for 3.1 I think.

[scribu]

Replace 'Loading...' and overlay with small spinner to the left of the search box

[scribu]

spinner-search.diff​ adds a small spinner next to the search box. The pagination row is too crowded.

See spinner-search.png​

[scribu]

add bottom spinner

[scribu]

add spinners to plugin install list table

[scribu]

add spinners to themes, theme-install and plugin-install

[scribu]

I think spinner-search.4.diff​ covers all the screens.

[ryan]

Looks good.

[ryan]

(In [17090]) List table spinner. Props scribu. see #15580

[scribu]

CSS tweaks

[scribu]

padding.15580.diff​:

• makes 100% of the <th> clickable
• vertically aligns the sorting indicator on the comments column with the rest
• removes useless padding in the sorting indicator images

[scribu]

for padding.15580.diff

[scribu]

for padding.15580.diff

[nacin]

Can we make the sorting arrows a sprite?

[JohnONolan]

If you do make a sprite pls upload a copy of the PSD (or other graphics file) to the ticket so that we can archive it for future use

[scribu]

I will make a sprite.

I think a PSD would be a major overkill in this case.

Previous versions of files are automatically kept in the SVN revisions.

[nacin]

We're working on an SVN repo for artwork. That will include originals for every core file.

Original files need to be uploaded from now on. Otherwise there won't be a commit. We're done with rebuilding images from scratch every time we need to modify them.

[scribu]

Ok, cool. Well, the original images are already uploaded: sort_asc.gif​ and sort_desc.gif​

[dd32]

the original files which the arrows come from would be appreciated as well, ie. modifying gif's is impossible, better to give a high-res psd or equiv. which modifications can be based off for future changes (ie. colour changes in those gifs would be impossible, but re-building from a decent res psd would be easy)

[scribu]

The arrows were hand-drawn pixel by pixel, so I don't have any larger-res files.

I hope it is clear by now that my Photoshop skills are... limited. :)

[scribu]

Use sprite

[scribu]

padding.15580.2.diff​ uses a sprite: sort.gif​ (source: sort.psd​)

[ryan]

(In [17110]) Put sort arrows in sprite. Make 100% of th clickable. Align sort indicators. Remove unneeded padding. Props scribu. fixes #15580

[hakre]

Related: #16022

[nacin]

(In [17195]) div.alignleft.actions needs to wrap the 'Empty Trash' button too, otherwise they're not aligned. see #15580.

[hakre]

Related: #16162; #16163; #16166

[hakre]

Related: #16185