diff --git a/src/wp-admin/css/list-tables.css b/src/wp-admin/css/list-tables.css index 08d6b19a5b..0d386f8883 100644 --- a/src/wp-admin/css/list-tables.css +++ b/src/wp-admin/css/list-tables.css @@ -595,6 +595,11 @@ th.asc:hover span.sorting-indicator { padding: 2px 8px 0 0; } +.wp-filter .actions { + display: inline-block; + vertical-align: middle; +} + .tablenav .delete { margin-right: 20px; } @@ -617,11 +622,18 @@ classes exist in paginate_links() but not seen in list table output. */ color: #2ea2cc; } -.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; +} + .view-switch a { text-decoration: none; } @@ -681,6 +693,10 @@ classes exist in paginate_links() but not seen in list table output. */ width: 4em; } +#posts-filter .wp-filter { + margin-bottom: 0; +} + #posts-filter fieldset { float: left; margin: 0 1.5ex 1em 0; @@ -1437,7 +1453,8 @@ div.action-links, display: block; } - .tablenav.top .actions, .view-switch { + .tablenav.top .actions, + .tablenav .view-switch { display: none; } diff --git a/src/wp-admin/css/media.css b/src/wp-admin/css/media.css index 16550b37e3..30f0bae5c6 100644 --- a/src/wp-admin/css/media.css +++ b/src/wp-admin/css/media.css @@ -513,16 +513,6 @@ border color while dragging a file over the uploader drop area */ border: 4px dashed #bbb; } -.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 { padding: 2px; @@ -530,8 +520,8 @@ border color while dragging a file over the uploader drop area */ .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 */ } .media-frame.mode-grid .attachment:focus, @@ -572,59 +562,28 @@ border color while dragging a file over the uploader drop area */ opacity: 1; } -/** - * 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; - display: inline-block; - font-size: 13px; - margin: 20px 0; - padding: 0 20px; - position: relative; - width: 100%; +.media-frame.mode-grid .media-toolbar { + margin: 15px 0; height: auto; - border: none; } -.media-frame.mode-select .attachments-browser.fixed .media-toolbar { - position: fixed; - top: 32px; - left: auto; - 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 { +.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; + margin: 0 10px 0 0; +} + +.media-frame.mode-grid .search { + margin-top: 0; } .media-frame.mode-grid .spinner { @@ -635,6 +594,14 @@ border color while dragging a file over the uploader drop area */ margin-right: 10px; } +.media-frame.mode-select .attachments-browser.fixed .media-toolbar { + position: fixed; + top: 32px; + left: auto; + right: 20px; + margin-top: 0; +} + .media-frame.mode-grid .attachments-browser { padding: 0; } @@ -1159,17 +1126,9 @@ audio, video { */ @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; - } } @media only screen and ( max-width: 782px ) { diff --git a/src/wp-admin/includes/class-wp-media-list-table.php b/src/wp-admin/includes/class-wp-media-list-table.php index eb1231498b..829c4f01fb 100644 --- a/src/wp-admin/includes/class-wp-media-list-table.php +++ b/src/wp-admin/includes/class-wp-media-list-table.php @@ -20,7 +20,7 @@ class WP_Media_List_Table extends WP_List_Table { * @param array $args An associative array of arguments. */ public function __construct( $args = array() ) { - $this->detached = isset( $_REQUEST['detached'] ); + $this->detached = ( isset( $_REQUEST['attachment-filter'] ) && 'detached' === $_REQUEST['attachment-filter'] ); parent::__construct( array( 'plural' => 'media', @@ -60,23 +60,24 @@ class WP_Media_List_Table extends WP_List_Table { foreach ( $reals as $real ) $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'] = "" . sprintf( _nx( 'All (%s)', 'All (%s)', $_total_posts, 'uploaded files' ), number_format_i18n( $_total_posts ) ) . ''; + $selected = empty( $_GET['attachment-filter'] ) ? ' selected="selected"' : ''; + $type_links['all'] = "'; foreach ( $post_mime_types as $mime_type => $label ) { $class = ''; if ( !wp_match_mime_types($mime_type, $avail_post_mime_types) ) 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] = '' . sprintf( translate_nooped_plural( $label[2], $num_posts[$mime_type] ), number_format_i18n( $num_posts[$mime_type] )) . ''; + $type_links[$mime_type] = ''; } - $type_links['detached'] = 'detached ? ' class="current"' : '' ) . '>' . sprintf( _nx( 'Unattached (%s)', 'Unattached (%s)', $total_orphans, 'detached files' ), number_format_i18n( $total_orphans ) ) . ''; + $type_links['detached'] = ''; if ( !empty($_num_posts['trash']) ) - $type_links['trash'] = '' . sprintf( _nx( 'Trash (%s)', 'Trash (%s)', $_num_posts['trash'], 'uploaded files' ), number_format_i18n( $_num_posts['trash'] ) ) . ''; + $type_links['trash'] = ''; return $type_links; } @@ -91,10 +92,13 @@ class WP_Media_List_Table extends WP_List_Table { } protected function extra_tablenav( $which ) { + if ( 'bar' !== $which ) { + return; + } ?> -
+
detached && !$this->is_trash ) { + if ( ! is_singular() && ! $this->is_trash ) { $this->months_dropdown( 'attachment' ); /** This action is documented in wp-admin/includes/class-wp-posts-list-table.php */ @@ -131,8 +135,6 @@ class WP_Media_List_Table extends WP_List_Table { global $mode; parent::pagination( $which ); - - $this->view_switcher( $mode ); } /** @@ -167,6 +169,50 @@ class WP_Media_List_Table extends WP_List_Table { get_views(); +?> +
+ view_switcher( $mode ); ?> + + + +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 '
    '; + foreach ( $views as $class => $view ) { + echo "
  • $view
    • "; + } + echo '
'; + } +?> + +
+ +
+
+ '; diff --git a/src/wp-admin/includes/post.php b/src/wp-admin/includes/post.php index 47fb5595a2..0a7e6dffb8 100644 --- a/src/wp-admin/includes/post.php +++ b/src/wp-admin/includes/post.php @@ -1032,6 +1032,8 @@ function wp_edit_attachments_query( $q = false ) { $states .= ',private'; $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 ) $media_per_page = 20; @@ -1051,8 +1053,16 @@ function wp_edit_attachments_query( $q = false ) { if ( isset($q['post_mime_type']) && !array_intersect( (array) $q['post_mime_type'], array_keys($post_mime_types) ) ) 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 ); diff --git a/src/wp-admin/upload.php b/src/wp-admin/upload.php index 18c3631491..d1cce37d68 100644 --- a/src/wp-admin/upload.php +++ b/src/wp-admin/upload.php @@ -265,11 +265,9 @@ if ( !empty($message) ) { ?>

-views(); ?> -
-search_box( __( 'Search Media' ), 'media' ); ?> +views(); ?> display(); ?> diff --git a/src/wp-includes/js/media-grid.js b/src/wp-includes/js/media-grid.js index ed14c73c81..043702c350 100644 --- a/src/wp-includes/js/media-grid.js +++ b/src/wp-includes/js/media-grid.js @@ -179,7 +179,8 @@ $browser = this.$('.attachments-browser'); $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'); } else { diff --git a/src/wp-includes/js/media-views.js b/src/wp-includes/js/media-views.js index e1257a3c01..291738c759 100644 --- a/src/wp-includes/js/media-views.js +++ b/src/wp-includes/js/media-views.js @@ -3911,7 +3911,7 @@ */ media.view.Toolbar = media.View.extend({ tagName: 'div', - className: 'media-toolbar', + className: 'media-toolbar wp-filter', initialize: function() { var state = this.controller.state(), @@ -3923,7 +3923,7 @@ // The toolbar is composed of two `PriorityList` views. 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'); this.views.set([ this.secondary, this.primary ]);