vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-10-06 23:58:03 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Grid view for the media library, first pass. This is alpha; expect imperfection. We will be iterating further.

Browse Source 
props ericlewis, shaunandrews, wonderboymusic.
see #24716.


git-svn-id: https://develop.svn.wordpress.org/trunk@28682 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Helen Hou-Sandi
2014-06-05 22:00:24 +00:00
parent c7c1a4a88a
commit 3d9fc450b2
10 changed files with 422 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/wp-admin/css/list-tables.css
+12 -2
View File
@@ -634,7 +634,6 @@ classes exist in paginate_links() but not seen in list table output. */
.view-switch > a:before {
color: #bbb;
content: '\f163';
display: inline-block;
float: left;
font: normal 20px/1 'dashicons';
@@ -645,6 +644,10 @@ classes exist in paginate_links() but not seen in list table output. */
-moz-osx-font-smoothing: grayscale;
}
.view-switch > .view-list:before {
content: '\f163';
}
.view-switch a:hover:before {
color: #727272;
}
@@ -653,11 +656,18 @@ classes exist in paginate_links() but not seen in list table output. */
color: #0074a2;
}
.view-switch > a + a:before {
.view-switch > a + a {
margin-left: 5px;
}
.view-switch > .view-excerpt:before {
content: '\f164';
}
.view-switch > .view-grid:before {
content: '\f180';
}
.filter {
float: left;
margin: -5px 0 0 10px;
src/wp-admin/includes/class-wp-list-table.php
+11 -2
View File
@@ -493,8 +493,17 @@ class WP_List_Table {
<div class="view-switch">
<?php
foreach ( $modes as $mode => $title ) {
$class = ( $current_mode == $mode ) ? 'class="current"' : '';
echo "<a href='" . esc_url( add_query_arg( 'mode', $mode, $_SERVER['REQUEST_URI'] ) ) . "' $class><img id='view-switch-$mode' src='" . esc_url( includes_url( 'images/blank.gif' ) ) . "' width='20' height='20' title='$title' alt='$title' /></a>\n";
$classes = array( 'view-' . $mode );
if ( $current_mode == $mode )
$classes[] = 'current';
printf(
"<a href='%s' class='%s'><img id='view-switch-$mode' src='%s' width='20' height='20' title='%s' alt='%s' /></a>\n",
esc_url( add_query_arg( 'mode', $mode ) ),
implode( ' ', $classes ),
esc_url( includes_url( 'images/blank.gif' ) ),
$title,
$title
);
}
?>
</div>
src/wp-admin/includes/class-wp-media-list-table.php
+46 -1
View File
@@ -23,7 +23,7 @@ class WP_Media_List_Table extends WP_List_Table {
}
public function prepare_items() {
global $lost, $wp_query, $post_mime_types, $avail_post_mime_types;
global $lost, $wp_query, $post_mime_types, $avail_post_mime_types, $mode;
$q = $_REQUEST;
@@ -34,6 +34,8 @@ class WP_Media_List_Table extends WP_List_Table {
$this->is_trash = isset( $_REQUEST['status'] ) && 'trash' == $_REQUEST['status'];
$mode = empty( $_REQUEST['mode'] ) ? 'list' : $_REQUEST['mode'];
$this->set_pagination_args( array(
'total_items' => $wp_query->found_posts,
'total_pages' => $wp_query->max_num_pages,
@@ -125,6 +127,49 @@ class WP_Media_List_Table extends WP_List_Table {
_e( 'No media attachments found.' );
}
protected function pagination( $which ) {
global $mode;
parent::pagination( $which );
$this->view_switcher( $mode );
}
/**
* Display a view switcher
*
* @since 3.1.0
* @access protected
*/
protected function view_switcher( $current_mode ) {
$modes = array(
'list' => __( 'List View' ),
'grid' => __( 'Grid View' )
);
?>
<input type="hidden" name="mode" value="<?php echo esc_attr( $current_mode ); ?>" />
<div class="view-switch">
<?php
foreach ( $modes as $mode => $title ) {
$classes = array( 'view-' . $mode );
if ( $current_mode == $mode )
$classes[] = 'current';
printf(
"<a href='%s' class='%s'><img id='view-switch-$mode' src='%s' width='20' height='20' title='%s' alt='%s' /></a>\n",
esc_url( add_query_arg( 'mode', $mode ) ),
implode( ' ', $classes ),
esc_url( includes_url( 'images/blank.gif' ) ),
$title,
$title
);
}
?>
</div>
<?php
}
protected function get_columns() {
$posts_columns = array();
$posts_columns['cb'] = '<input type="checkbox" />';
src/wp-admin/js/media.js
+6
View File
@@ -72,6 +72,12 @@ var findPosts;
};
$( document ).ready( function() {
// Open up a manage media frame into the grid.
wp.media && wp.media({
frame: 'manage',
container: $('#wpbody-content')
}).open();
$( '#find-posts-submit' ).click( function( event ) {
if ( ! $( '#find-posts-response input[type="radio"]:checked' ).length )
event.preventDefault();
src/wp-admin/upload.php
+25 -1
View File
@@ -12,6 +12,30 @@ require_once( dirname( __FILE__ ) . '/admin.php' );
if ( !current_user_can('upload_files') )
wp_die( __( 'You do not have permission to upload files.' ) );
$mode = get_user_option( 'media_library_mode', get_current_user_id() ) ? get_user_option( 'media_library_mode', get_current_user_id() ) : 'grid';
$modes = array( 'grid', 'list' );
if ( isset( $_GET['mode'] ) && in_array( $_GET['mode'], $modes ) ) {
$mode = $_GET['mode'];
update_user_option( get_current_user_id(), 'media_library_mode', $mode );
}
if ( 'grid' === $mode ) {
wp_enqueue_media();
wp_enqueue_script( 'media' );
require_once( ABSPATH . 'wp-admin/admin-header.php' );
?><div class="view-switch media-grid-view-switch">
<a href="<?php echo esc_url( add_query_arg( 'mode', 'list', $_SERVER['REQUEST_URI'] ) ) ?>" class="view-list">
<img id="view-switch-list" src="<?php echo includes_url( 'images/blank.gif' ) ?>" width="20" height="20" title="List View" alt="List View"/>
</a>
<a href="<?php echo esc_url( add_query_arg( 'mode', 'grid', $_SERVER['REQUEST_URI'] ) ) ?>" class="view-grid current">
<img id="view-switch-excerpt" src="<?php echo includes_url( 'images/blank.gif' ) ?>" width="20" height="20" title="Grid View" alt="Grid View"/>
</a>
</div><?php
include( ABSPATH . 'wp-admin/admin-footer.php' );
exit;
}
$wp_list_table = _get_list_table('WP_Media_List_Table');
$pagenum = $wp_list_table->get_pagenum();
@@ -237,7 +261,7 @@ if ( !empty($message) ) { ?>
<?php $wp_list_table->display(); ?>
<div id="ajax-response"></div>
<?php find_posts_div(); ?>
<?php find_posts_div(); ?>
</form>
</div>