Make WordPress Core


Ignore:
Timestamp:
07/01/2015 01:30:23 AM (9 years ago)
Author:
helen
Message:

List tables: A better responsive view.

Instead of truncating columns, the data that's already in the markup can now be toggled into view. Only seems appropriate to celebrate four years of contributing by finally doing the first thing I ever mocked up.

Known issues / concerns:

  • Custom list tables that don't define a primary column will show nothing at all. These are not extremely common, as WP_List_Table isn't really recommended for plugin consumption, but it happens. We need to come up with some kind of fallback.
  • Some visual elements, particularly whitespace, could use refining.
  • Needs a11y review.
  • Touch performance on iOS feels sluggish - is there anything we can do about that?
  • Would this be better accordion-style (only one expanded at a time)?
  • Is wp_strip_all_tags() good enough for column titles that have HTML in them? It's essentially a workaround for the fact that core's comments column does that for the icon, which maybe it shouldn't. Perhaps worth another ticket, as a markup change would be fairly independent.
  • Visual hierarchy is not great when expanded (also worthy of another ticket).
  • Quick edit now becomes noticeably more annoying to cancel out of, as you have to scroll all the way down and you lose your position from before it was opened. Again, worthy of another ticket.

props Michael Arestad, helen.
see #32395.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/includes/class-wp-list-table.php

    r32984 r33016  
    498498        $out .= '</div>';
    499499
     500        $out .= '<button type="button" class="toggle-row"><span class="screen-reader-text">' . __( 'Show more details' ) . '</span></button>';
     501
    500502        return $out;
    501503    }
     
    944946     */
    945947    public function print_column_headers( $with_id = true ) {
    946         list( $columns, $hidden, $sortable ) = $this->get_column_info();
     948        list( $columns, $hidden, $sortable, $primary ) = $this->get_column_info();
    947949
    948950        $current_url = set_url_scheme( 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'] );
     
    977979            elseif ( in_array( $column_key, array( 'posts', 'comments', 'links' ) ) )
    978980                $class[] = 'num';
     981
     982            if ( $column_key === $primary ) {
     983                $class[] = 'column-primary';
     984            }
    979985
    980986            if ( isset( $sortable[$column_key] ) ) {
     
    11641170            }
    11651171
    1166             $attributes = "class='$classes'";
     1172            // Comments column uses HTML in the display name with screen reader text.
     1173            // Instead of using esc_attr(), we strip tags to get closer to a user-friendly string.
     1174            $data = 'data-colname="' . wp_strip_all_tags( $column_display_name ) . '"';
     1175
     1176            $attributes = "class='$classes' $data";
    11671177
    11681178            if ( 'cb' == $column_name ) {
Note: See TracChangeset for help on using the changeset viewer.