Changeset 29625

Timestamp:

08/26/2014 03:57:20 PM (11 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:

• wp-admin/css/list-tables.css (modified) (4 diffs)
• wp-admin/css/media.css (modified) (5 diffs)
• wp-admin/includes/class-wp-media-list-table.php (modified) (6 diffs)
• wp-admin/includes/post.php (modified) (2 diffs)
• wp-admin/upload.php (modified) (1 diff)
• wp-includes/js/media-grid.js (modified) (1 diff)
• wp-includes/js/media-views.js (modified) (2 diffs)

trunk/src/wp-admin/css/list-tables.css

@@ -596 +596 @@
 }
 
+.wp-filter .actions {
+    display: inline-block;
+    vertical-align: middle;
+}
+
 .tablenav .delete {
     margin-right: 20px;
@@ -618 +623 @@
 }
 
-.view-switch {
+tablenav .view-switch {
     float: right;
     margin: 5px 16px 0 8px;
+}
+
+.wp-filter .view-switch {
+    display: inline-block;
+    vertical-align: middle;
+    padding: 14px 0;
+    margin: 0 20px 0 0;
 }
 
@@ -680 +692 @@
 .screen-per-page {
     width: 4em;
+}
+
+#posts-filter .wp-filter {
+    margin-bottom: 0;
 }
 
@@ -1438 +1454 @@
     }
 
-    .tablenav.top .actions, .view-switch {
+    .tablenav.top .actions,
+    .tablenav .view-switch {
         display: none;
     }

trunk/src/wp-admin/css/media.css

@@ -514 +514 @@
 }
 
-.media-frame.mode-grid .media-toolbar select {
-    margin-top: 1px;
-    font-size: inherit;
-}
-
-.media-frame.mode-grid .attachments-browser .bulk-select {
-    display: inline-block;
-    margin: 0 10px 0 0;
-}
-
 .media-frame.mode-grid .attachments,
 .media-frame.mode-select .attachments {
@@ -531 +521 @@
 .media-frame.mode-select .attachments-browser.fixed .attachments {
     position: relative;
-    top: 80px; /* prevent jumping up when the toolbar becomes fixed */
-    padding-bottom: 80px; /* offset for above so the bottom doesn't get cut off */
+    top: 94px; /* prevent jumping up when the toolbar becomes fixed */
+    padding-bottom: 94px; /* offset for above so the bottom doesn't get cut off */
 }
 
@@ -573 +563 @@
 }
 
-/**
- * Copied styles from the Add theme toolbar.
- *
- * This should be OOCSS'd so both use a shared selector.
- */
-.media-frame.mode-grid .attachments-browser .media-toolbar {
-    background: #fff;
-    -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
-    box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-    color: #555;
+.media-frame.mode-grid .media-toolbar {
+    margin: 15px 0;
+    height: auto;
+}
+
+.media-frame.mode-grid .media-toolbar select {
+    margin: 0 10px 0 0;
+    font-size: 14px;
+}
+
+.media-frame.mode-grid .media-toolbar-secondary > .media-button {
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+.media-frame.mode-grid .attachments-browser .bulk-select {
     display: inline-block;
-    font-size: 13px;
-    margin: 20px 0;
-    padding: 0 20px;
-    position: relative;
-    width: 100%;
-    height: auto;
-    border: none;
+    margin: 0 10px 0 0;
+}
+
+.media-frame.mode-grid .search {
+    margin-top: 0;
+}
+
+.media-frame.mode-grid .spinner {
+    margin-top: 15px;
+}
+
+.attachments-browser .media-toolbar-secondary > .select-mode-toggle-button {
+    margin-right: 10px;
 }
 
@@ -602 +601 @@
     right: 20px;
     margin-top: 0;
-}
-
-.media-frame.mode-grid input[type="search"] {
-    margin: 1px;
-    padding: 3px 5px;
-    position: absolute;
-    right: 10px;
-    top: 9px;
-    font-size: 16px;
-    font-weight: 300;
-    line-height: 1.5;
-    width: 280px;
-}
-
-.media-frame.mode-grid .view-switch {
-    display: inline-block;
-    float: none;
-    vertical-align: middle;
-    padding: 15px 0;
-    margin: 0 20px 0 0;
-}
-
-.media-frame.mode-grid select {
-    margin: 0 10px 0 0;
-}
-
-.media-frame.mode-grid .spinner {
-    margin-top: 15px;
-}
-
-.attachments-browser .media-toolbar-secondary > .select-mode-toggle-button {
-    margin-right: 10px;
 }
 
@@ -1160 +1127 @@
 
 @media only screen and (max-width: 1120px) {
-    .media-frame.mode-grid .attachments-browser .media-toolbar-primary,
     .media-frame.mode-grid .attachments-browser .media-toolbar-secondary {
         float: none;
-    }
-
-    .media-frame.mode-grid input[type="search"] {
-        margin: 20px 0;
-        position: static;
-        width: 100%;
-        max-width: 280px;
     }
 }

trunk/src/wp-admin/includes/class-wp-media-list-table.php

@@ -21 +21 @@
      */
     public function __construct( $args = array() ) {
-        $this->detached = isset( $_REQUEST['detached'] );
+        $this->detached = ( isset( $_REQUEST['attachment-filter'] ) && 'detached' === $_REQUEST['attachment-filter'] );
 
         parent::__construct( array(
@@ -61 +61 @@
                 $num_posts[$type] = ( isset( $num_posts[$type] ) ) ? $num_posts[$type] + $_num_posts[$real] : $_num_posts[$real];
 
-        $class = ( empty($_GET['post_mime_type']) && !$this->detached && !isset($_GET['status']) ) ? ' class="current"' : '';
-        $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>';
+        $selected = empty( $_GET['attachment-filter'] ) ? ' selected="selected"' : '';
+        $type_links['all'] = "<option value=''$selected>" . sprintf( _nx( 'All (%s)', 'All (%s)', $_total_posts, 'uploaded files' ), number_format_i18n( $_total_posts ) ) . '</option>';
         foreach ( $post_mime_types as $mime_type => $label ) {
             $class = '';
@@ -69 +69 @@
                 continue;
 
-            if ( !empty($_GET['post_mime_type']) && wp_match_mime_types($mime_type, $_GET['post_mime_type']) )
-                $class = ' class="current"';
+            $selected = '';
+            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'] ) ) )
+                $selected = ' selected="selected"';
             if ( !empty( $num_posts[$mime_type] ) )
-                $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>';
-        }
-        $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>';
+                $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>';
+        }
+        $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>';
 
         if ( !empty($_num_posts['trash']) )
-            $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>';
+            $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>';
 
         return $type_links;
@@ -92 +93 @@
 
     protected function extra_tablenav( $which ) {
-?>
-        <div class="alignleft actions">
-<?php
-        if ( 'top' == $which && !is_singular() && !$this->detached && !$this->is_trash ) {
+        if ( 'bar' !== $which ) {
+            return;
+        }
+?>
+        <div class="actions">
+<?php
+        if ( ! is_singular() && ! $this->is_trash ) {
             $this->months_dropdown( 'attachment' );
 
@@ -132 +136 @@
 
         parent::pagination( $which );
-
-        $this->view_switcher( $mode );
     }
 
@@ -166 +168 @@
         </div>
 <?php
+    }
+
+    /**
+     * Override parent views so we can use the filter bar display.
+     */
+    public function views() {
+        global $mode;
+
+        $views = $this->get_views();
+?>
+<div class="wp-filter">
+    <?php $this->view_switcher( $mode ); ?>
+
+    <select class="attachment-filters" name="attachment-filter">
+        <?php
+        if ( ! empty( $views ) ) {
+            foreach ( $views as $class => $view ) {
+                echo "\t$view\n";
+            }
+        }
+        ?>
+    </select>
+
+<?php
+    $this->extra_tablenav( 'bar' );
+
+    /** This filter is documented in wp-admin/inclues/class-wp-list-table.php */
+    $views = apply_filters( "views_{$this->screen->id}", '' );
+
+    // Back compat for pre-4.0 view links.
+    if ( ! empty( $views ) ) {
+        echo '<ul class="filter-links">';
+        foreach ( $views as $class => $view ) {
+            echo "<li class='$class'>$view</li>";
+        }
+        echo '</ul>';
+    }
+?>
+
+    <div class="search-form">
+        <label for="media-search-input" class="screen-reader-text"><?php esc_html_e( 'Search Media' ); ?></label>
+        <input type="search" placeholder="Search" id="media-search-input" class="search" name="s" value="<?php _admin_search_query(); ?>"></div>
+    </div>
+    <?php
     }
 

trunk/src/wp-admin/includes/post.php

@@ -1033 +1033 @@
 
     $q['post_status'] = isset( $q['status'] ) && 'trash' == $q['status'] ? 'trash' : $states;
+    $q['post_status'] = isset( $q['attachment-filter'] ) && 'trash' == $q['attachment-filter'] ? 'trash' : $states;
+
     $media_per_page = (int) get_user_option( 'upload_per_page' );
     if ( empty( $media_per_page ) || $media_per_page < 1 )
@@ -1052 +1054 @@
         unset($q['post_mime_type']);
 
-    if ( isset($q['detached']) )
+    foreach( array_keys( $post_mime_types ) as $type ) {
+        if ( isset( $q['attachment-filter'] ) && "post_mime_type:$type" == $q['attachment-filter'] ) {
+            $q['post_mime_type'] = $type;
+            break;
+        }
+    }
+
+    if ( isset( $q['detached'] ) || ( isset( $q['attachment-filter'] ) && 'detached' == $q['attachment-filter'] ) ) {
         $q['post_parent'] = 0;
+    }
 
     wp( $q );

trunk/src/wp-admin/upload.php

@@ -266 +266 @@
 <?php } ?>
 
+<form id="posts-filter" action="" method="get">
+
 <?php $wp_list_table->views(); ?>
-
-<form id="posts-filter" action="" method="get">
-
-<?php $wp_list_table->search_box( __( 'Search Media' ), 'media' ); ?>
 
 <?php $wp_list_table->display(); ?>

trunk/src/wp-includes/js/media-grid.js

@@ -180 +180 @@
             $toolbar = $browser.find('.media-toolbar');
 
-            if ( $browser.offset().top < this.$window.scrollTop() + this.$adminBar.height() ) {
+            // Offset doesn't appear to take top margin into account, hence +16
+            if ( ( $browser.offset().top + 16 ) < this.$window.scrollTop() + this.$adminBar.height() ) {
                 $browser.addClass( 'fixed' );
                 $toolbar.css('width', $browser.width() + 'px');

trunk/src/wp-includes/js/media-views.js

@@ -3912 +3912 @@
     media.view.Toolbar = media.View.extend({
         tagName:   'div',
-        className: 'media-toolbar',
+        className: 'media-toolbar wp-filter',
 
         initialize: function() {
@@ -3924 +3924 @@
             this.primary   = new media.view.PriorityList();
             this.secondary = new media.view.PriorityList();
-            this.primary.$el.addClass('media-toolbar-primary');
+            this.primary.$el.addClass('media-toolbar-primary search-form');
             this.secondary.$el.addClass('media-toolbar-secondary');