WordPress.org

Make WordPress Core

Changeset 29625


Ignore:
Timestamp:
08/26/2014 03:57:20 PM (5 years ago)
Author:
helen
Message:

Media library: Unify headers between view modes.

Includes back compat for views_upload links. These look a little awkward, but do not appear to be commonly used. Also prevents the view mode links from being dropped on smaller screens so a user doesn't get "stuck" in the list view.

This is different from other list tables, but aligns well with other uploaded content management screens (themes, plugins).

props pento, helen.
fixes #28946.

Location:
trunk/src
Files:
7 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/list-tables.css

    r29603 r29625  
    596596}
    597597
     598.wp-filter .actions {
     599    display: inline-block;
     600    vertical-align: middle;
     601}
     602
    598603.tablenav .delete {
    599604    margin-right: 20px;
     
    618623}
    619624
    620 .view-switch {
     625tablenav .view-switch {
    621626    float: right;
    622627    margin: 5px 16px 0 8px;
     628}
     629
     630.wp-filter .view-switch {
     631    display: inline-block;
     632    vertical-align: middle;
     633    padding: 14px 0;
     634    margin: 0 20px 0 0;
    623635}
    624636
     
    680692.screen-per-page {
    681693    width: 4em;
     694}
     695
     696#posts-filter .wp-filter {
     697    margin-bottom: 0;
    682698}
    683699
     
    14381454    }
    14391455
    1440     .tablenav.top .actions, .view-switch {
     1456    .tablenav.top .actions,
     1457    .tablenav .view-switch {
    14411458        display: none;
    14421459    }
  • trunk/src/wp-admin/css/media.css

    r29623 r29625  
    514514}
    515515
    516 .media-frame.mode-grid .media-toolbar select {
    517     margin-top: 1px;
    518     font-size: inherit;
    519 }
    520 
    521 .media-frame.mode-grid .attachments-browser .bulk-select {
    522     display: inline-block;
    523     margin: 0 10px 0 0;
    524 }
    525 
    526516.media-frame.mode-grid .attachments,
    527517.media-frame.mode-select .attachments {
     
    531521.media-frame.mode-select .attachments-browser.fixed .attachments {
    532522    position: relative;
    533     top: 80px; /* prevent jumping up when the toolbar becomes fixed */
    534     padding-bottom: 80px; /* offset for above so the bottom doesn't get cut off */
     523    top: 94px; /* prevent jumping up when the toolbar becomes fixed */
     524    padding-bottom: 94px; /* offset for above so the bottom doesn't get cut off */
    535525}
    536526
     
    573563}
    574564
    575 /**
    576  * Copied styles from the Add theme toolbar.
    577  *
    578  * This should be OOCSS'd so both use a shared selector.
    579  */
    580 .media-frame.mode-grid .attachments-browser .media-toolbar {
    581     background: #fff;
    582     -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
    583     box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
    584     -webkit-box-sizing: border-box;
    585     -moz-box-sizing: border-box;
    586     box-sizing: border-box;
    587     color: #555;
     565.media-frame.mode-grid .media-toolbar {
     566    margin: 15px 0;
     567    height: auto;
     568}
     569
     570.media-frame.mode-grid .media-toolbar select {
     571    margin: 0 10px 0 0;
     572    font-size: 14px;
     573}
     574
     575.media-frame.mode-grid .media-toolbar-secondary > .media-button {
     576    margin-top: 10px;
     577    margin-bottom: 10px;
     578}
     579
     580.media-frame.mode-grid .attachments-browser .bulk-select {
    588581    display: inline-block;
    589     font-size: 13px;
    590     margin: 20px 0;
    591     padding: 0 20px;
    592     position: relative;
    593     width: 100%;
    594     height: auto;
    595     border: none;
     582    margin: 0 10px 0 0;
     583}
     584
     585.media-frame.mode-grid .search {
     586    margin-top: 0;
     587}
     588
     589.media-frame.mode-grid .spinner {
     590    margin-top: 15px;
     591}
     592
     593.attachments-browser .media-toolbar-secondary > .select-mode-toggle-button {
     594    margin-right: 10px;
    596595}
    597596
     
    602601    right: 20px;
    603602    margin-top: 0;
    604 }
    605 
    606 .media-frame.mode-grid input[type="search"] {
    607     margin: 1px;
    608     padding: 3px 5px;
    609     position: absolute;
    610     right: 10px;
    611     top: 9px;
    612     font-size: 16px;
    613     font-weight: 300;
    614     line-height: 1.5;
    615     width: 280px;
    616 }
    617 
    618 .media-frame.mode-grid .view-switch {
    619     display: inline-block;
    620     float: none;
    621     vertical-align: middle;
    622     padding: 15px 0;
    623     margin: 0 20px 0 0;
    624 }
    625 
    626 .media-frame.mode-grid select {
    627     margin: 0 10px 0 0;
    628 }
    629 
    630 .media-frame.mode-grid .spinner {
    631     margin-top: 15px;
    632 }
    633 
    634 .attachments-browser .media-toolbar-secondary > .select-mode-toggle-button {
    635     margin-right: 10px;
    636603}
    637604
     
    11601127
    11611128@media only screen and (max-width: 1120px) {
    1162     .media-frame.mode-grid .attachments-browser .media-toolbar-primary,
    11631129    .media-frame.mode-grid .attachments-browser .media-toolbar-secondary {
    11641130        float: none;
    1165     }
    1166 
    1167     .media-frame.mode-grid input[type="search"] {
    1168         margin: 20px 0;
    1169         position: static;
    1170         width: 100%;
    1171         max-width: 280px;
    11721131    }
    11731132}
  • trunk/src/wp-admin/includes/class-wp-media-list-table.php

    r29550 r29625  
    2121     */
    2222    public function __construct( $args = array() ) {
    23         $this->detached = isset( $_REQUEST['detached'] );
     23        $this->detached = ( isset( $_REQUEST['attachment-filter'] ) && 'detached' === $_REQUEST['attachment-filter'] );
    2424
    2525        parent::__construct( array(
     
    6161                $num_posts[$type] = ( isset( $num_posts[$type] ) ) ? $num_posts[$type] + $_num_posts[$real] : $_num_posts[$real];
    6262
    63         $class = ( empty($_GET['post_mime_type']) && !$this->detached && !isset($_GET['status']) ) ? ' class="current"' : '';
    64         $type_links['all'] = "<a href='upload.php'$class>" . sprintf( _nx( 'All <span class="count">(%s)</span>', 'All <span class="count">(%s)</span>', $_total_posts, 'uploaded files' ), number_format_i18n( $_total_posts ) ) . '</a>';
     63        $selected = empty( $_GET['attachment-filter'] ) ? ' selected="selected"' : '';
     64        $type_links['all'] = "<option value=''$selected>" . sprintf( _nx( 'All (%s)', 'All (%s)', $_total_posts, 'uploaded files' ), number_format_i18n( $_total_posts ) ) . '</option>';
    6565        foreach ( $post_mime_types as $mime_type => $label ) {
    6666            $class = '';
     
    6969                continue;
    7070
    71             if ( !empty($_GET['post_mime_type']) && wp_match_mime_types($mime_type, $_GET['post_mime_type']) )
    72                 $class = ' class="current"';
     71            $selected = '';
     72            if ( !empty( $_GET['attachment-filter'] ) && strpos( $_GET['attachment-filter'], 'post_mime_type:' ) === 0 && wp_match_mime_types( $mime_type, str_replace( 'post_mime_type:', '', $_GET['attachment-filter'] ) ) )
     73                $selected = ' selected="selected"';
    7374            if ( !empty( $num_posts[$mime_type] ) )
    74                 $type_links[$mime_type] = '<a href="upload.php?post_mime_type=' . urlencode( $mime_type ) . '"' . $class . '>' . sprintf( translate_nooped_plural( $label[2], $num_posts[$mime_type] ), number_format_i18n( $num_posts[$mime_type] )) . '</a>';
    75         }
    76         $type_links['detached'] = '<a href="upload.php?detached=1"' . ( $this->detached ? ' class="current"' : '' ) . '>' . sprintf( _nx( 'Unattached <span class="count">(%s)</span>', 'Unattached <span class="count">(%s)</span>', $total_orphans, 'detached files' ), number_format_i18n( $total_orphans ) ) . '</a>';
     75                $type_links[$mime_type] = '<option value="post_mime_type:' . urlencode( $mime_type ) . '"' . $selected . '>' . sprintf( translate_nooped_plural( $label[2], $num_posts[$mime_type] ), number_format_i18n( $num_posts[$mime_type] )) . '</option>';
     76        }
     77        $type_links['detached'] = '<option value="detached"' . ( $this->detached ? ' selected="selected"' : '' ) . '>' . sprintf( _nx( 'Unattached (%s)', 'Unattached (%s)', $total_orphans, 'detached files' ), number_format_i18n( $total_orphans ) ) . '</option>';
    7778
    7879        if ( !empty($_num_posts['trash']) )
    79             $type_links['trash'] = '<a href="upload.php?status=trash"' . ( (isset($_GET['status']) && $_GET['status'] == 'trash' ) ? ' class="current"' : '') . '>' . sprintf( _nx( 'Trash <span class="count">(%s)</span>', 'Trash <span class="count">(%s)</span>', $_num_posts['trash'], 'uploaded files' ), number_format_i18n( $_num_posts['trash'] ) ) . '</a>';
     80            $type_links['trash'] = '<option value="trash"' . ( (isset($_GET['attachment-filter']) && $_GET['attachment-filter'] == 'trash' ) ? ' selected="selected"' : '') . '>' . sprintf( _nx( 'Trash (%s)', 'Trash (%s)', $_num_posts['trash'], 'uploaded files' ), number_format_i18n( $_num_posts['trash'] ) ) . '</option>';
    8081
    8182        return $type_links;
     
    9293
    9394    protected function extra_tablenav( $which ) {
    94 ?>
    95         <div class="alignleft actions">
    96 <?php
    97         if ( 'top' == $which && !is_singular() && !$this->detached && !$this->is_trash ) {
     95        if ( 'bar' !== $which ) {
     96            return;
     97        }
     98?>
     99        <div class="actions">
     100<?php
     101        if ( ! is_singular() && ! $this->is_trash ) {
    98102            $this->months_dropdown( 'attachment' );
    99103
     
    132136
    133137        parent::pagination( $which );
    134 
    135         $this->view_switcher( $mode );
    136138    }
    137139
     
    166168        </div>
    167169<?php
     170    }
     171
     172    /**
     173     * Override parent views so we can use the filter bar display.
     174     */
     175    public function views() {
     176        global $mode;
     177
     178        $views = $this->get_views();
     179?>
     180<div class="wp-filter">
     181    <?php $this->view_switcher( $mode ); ?>
     182
     183    <select class="attachment-filters" name="attachment-filter">
     184        <?php
     185        if ( ! empty( $views ) ) {
     186            foreach ( $views as $class => $view ) {
     187                echo "\t$view\n";
     188            }
     189        }
     190        ?>
     191    </select>
     192
     193<?php
     194    $this->extra_tablenav( 'bar' );
     195
     196    /** This filter is documented in wp-admin/inclues/class-wp-list-table.php */
     197    $views = apply_filters( "views_{$this->screen->id}", '' );
     198
     199    // Back compat for pre-4.0 view links.
     200    if ( ! empty( $views ) ) {
     201        echo '<ul class="filter-links">';
     202        foreach ( $views as $class => $view ) {
     203            echo "<li class='$class'>$view</li>";
     204        }
     205        echo '</ul>';
     206    }
     207?>
     208
     209    <div class="search-form">
     210        <label for="media-search-input" class="screen-reader-text"><?php esc_html_e( 'Search Media' ); ?></label>
     211        <input type="search" placeholder="Search" id="media-search-input" class="search" name="s" value="<?php _admin_search_query(); ?>"></div>
     212    </div>
     213    <?php
    168214    }
    169215
  • trunk/src/wp-admin/includes/post.php

    r29206 r29625  
    10331033
    10341034    $q['post_status'] = isset( $q['status'] ) && 'trash' == $q['status'] ? 'trash' : $states;
     1035    $q['post_status'] = isset( $q['attachment-filter'] ) && 'trash' == $q['attachment-filter'] ? 'trash' : $states;
     1036
    10351037    $media_per_page = (int) get_user_option( 'upload_per_page' );
    10361038    if ( empty( $media_per_page ) || $media_per_page < 1 )
     
    10521054        unset($q['post_mime_type']);
    10531055
    1054     if ( isset($q['detached']) )
     1056    foreach( array_keys( $post_mime_types ) as $type ) {
     1057        if ( isset( $q['attachment-filter'] ) && "post_mime_type:$type" == $q['attachment-filter'] ) {
     1058            $q['post_mime_type'] = $type;
     1059            break;
     1060        }
     1061    }
     1062
     1063    if ( isset( $q['detached'] ) || ( isset( $q['attachment-filter'] ) && 'detached' == $q['attachment-filter'] ) ) {
    10551064        $q['post_parent'] = 0;
     1065    }
    10561066
    10571067    wp( $q );
  • trunk/src/wp-admin/upload.php

    r29550 r29625  
    266266<?php } ?>
    267267
     268<form id="posts-filter" action="" method="get">
     269
    268270<?php $wp_list_table->views(); ?>
    269 
    270 <form id="posts-filter" action="" method="get">
    271 
    272 <?php $wp_list_table->search_box( __( 'Search Media' ), 'media' ); ?>
    273271
    274272<?php $wp_list_table->display(); ?>
  • trunk/src/wp-includes/js/media-grid.js

    r29600 r29625  
    180180            $toolbar = $browser.find('.media-toolbar');
    181181
    182             if ( $browser.offset().top < this.$window.scrollTop() + this.$adminBar.height() ) {
     182            // Offset doesn't appear to take top margin into account, hence +16
     183            if ( ( $browser.offset().top + 16 ) < this.$window.scrollTop() + this.$adminBar.height() ) {
    183184                $browser.addClass( 'fixed' );
    184185                $toolbar.css('width', $browser.width() + 'px');
  • trunk/src/wp-includes/js/media-views.js

    r29623 r29625  
    39123912    media.view.Toolbar = media.View.extend({
    39133913        tagName:   'div',
    3914         className: 'media-toolbar',
     3914        className: 'media-toolbar wp-filter',
    39153915
    39163916        initialize: function() {
     
    39243924            this.primary   = new media.view.PriorityList();
    39253925            this.secondary = new media.view.PriorityList();
    3926             this.primary.$el.addClass('media-toolbar-primary');
     3926            this.primary.$el.addClass('media-toolbar-primary search-form');
    39273927            this.secondary.$el.addClass('media-toolbar-secondary');
    39283928
Note: See TracChangeset for help on using the changeset viewer.