Changeset 29136

Timestamp:

07/13/2014 04:15:36 PM (11 years ago)

Author:

ocean90

Message:

Media Grid improvements:

• Remove fixed elements.
• Adjusts toolbar and search, fixes #28833.
• Add link to Add New button, fixes #28825.
• Add "Edit Metadata" tab to all items, "Edit Image" only for images
• Make strings translatable.
• First pass for help tab.

see #28850.

Location:

trunk/src

Files:

• wp-admin/js/media.js (modified) (1 diff)
• wp-admin/upload.php (modified) (2 diffs)
• wp-includes/css/media-views.css (modified) (3 diffs)
• wp-includes/js/media-grid.js (modified) (7 diffs)
• wp-includes/js/media-views.js (modified) (1 diff)
• wp-includes/media.php (modified) (1 diff)

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

@@ -76 +76 @@
         wp.media && wp.media({
             frame: 'manage',
-            container: $('#wpbody-content')
+            container: $('#wpbody-content > .wrap')
         }).open();
 

trunk/src/wp-admin/upload.php

@@ -25 +25 @@
     wp_enqueue_script( 'media-grid' );
     wp_enqueue_script( 'media' );
-    wp_localize_script( 'media-grid', 'mediaGridSettings', array( 'adminUrl' => parse_url( self_admin_url(), PHP_URL_PATH )  ) );
+    wp_localize_script( 'media-grid', '_wpMediaGridSettings', array(
+        'adminUrl' => parse_url( self_admin_url(), PHP_URL_PATH ),
+    ) );
 
     add_screen_option( 'misc_screen_options', array( 'option' => 'manageuploadgridcolumnshidden', 'id' => 'grid' ) );
@@ -33 +35 @@
     add_screen_option( 'mime', array( 'label' => __( 'Mime-type' ) ) );
 
+    get_current_screen()->add_help_tab( array(
+    'id'        => 'overview',
+    'title'     => __( 'Overview' ),
+    'content'   =>
+        '<p>' . __( 'All the files you&#8217;ve uploaded are listed in the Media Library, with the most recent uploads listed first. You can use the Screen Options tab to customize the display of this screen.' ) . '</p>'
+    ) );
+
+    get_current_screen()->set_help_sidebar(
+        '<p><strong>' . __( 'For more information:' ) . '</strong></p>' .
+        '<p>' . __( '<a href="http://codex.wordpress.org/Media_Library_Screen" target="_blank">Documentation on Media Library</a>' ) . '</p>' .
+        '<p>' . __( '<a href="https://wordpress.org/support/" target="_blank">Support Forums</a>' ) . '</p>'
+    );
+
+    $title = __('Media Library');
+    $parent_file = 'upload.php';
+
     require_once( ABSPATH . 'wp-admin/admin-header.php' );
+    ?>
+    <div class="wrap">
+        <h2>
+        <?php
+        echo esc_html( $title );
+        if ( current_user_can( 'upload_files' ) ) { ?>
+            <a href="media-new.php" class="add-new-h2"><?php echo esc_html_x( 'Add New', 'file' ); ?></a><?php
+        }
+        ?>
+        </h2>
+    </div>
+    <?php
     include( ABSPATH . 'wp-admin/admin-footer.php' );
     exit;

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

@@ -2573 +2573 @@
  * Media Grid
  */
-
-.media-grid-view h1 {
-    color: #222;
-    font-size: 23px;
-    font-weight: 400;
-    margin: 10px 0 0;
-    padding: 9px 15px 4px 22px;
-    line-height: 29px;
-}
-
-.media-grid-view .view-switch {
-    display: inline-block;
-    float: none;
-    margin-top: 13px;
-    vertical-align: middle;
-}
-
-/**
- * Position both the frame and the uploader window into the content
- * area of the screen.
- */
-.media-grid-view {
-    z-index: 1;
-    position: fixed;
-    bottom: 0;
-    left: 160px;
-    right: 0;
-    top: 32px;
-    -webkit-transition: 200ms ease-in-out;
-    transition: 200ms ease-in-out;
-}
-
-.media-grid-view-options {
-    top: 120px;
-}
-
-@media screen and (max-width: 900px) {
-    .auto-fold .media-grid-view {
-        left: 36px;
-    }
-}
-@media screen and (max-width: 782px) {
-    .media-grid-view {
-        top: 46px;
-    }
-    .auto-fold .media-grid-view {
-        left: 0px;
-        bottom: 0px;
-    }
+.media-grid-view,
+.media-grid-view .media-frame-content,
+.media-grid-view .attachments-browser .attachments,
+.media-grid-view .uploader-inline-content {
+    position: static;
 }
 
 /* Regions we don't use at all */
+.media-grid-view .media-frame-title,
 .media-grid-view .media-frame-toolbar,
 .media-grid-view .media-frame-menu {
     display: none;
+}
+
+.media-grid-view .media-frame-content {
+    background-color: transparent;
+    border: none;
+}
+
+.media-grid-view .uploader-inline {
+    position: relative;
+    top: auto;
+    right: auto;
+    left: auto;
+    bottom: auto;
+    padding-top: 0;
+    margin-top: 0;
 }
 
@@ -2645 +2617 @@
     display: inline-block;
     font-size: 13px;
+    margin: 20px 0;
     padding: 0 20px;
     position: relative;
     width: 100%;
+    height: auto;
+    border: none;
+}
+
+.media-grid-view 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-grid-view .view-switch {
+    display: inline-block;
+    float: none;
+    vertical-align: middle;
+    padding: 15px 0;
+    margin: 0 20px 0 0;
+}
+
+.media-grid-view select.attachment-filters {
+    margin: 0 10px 0 0;
+}
+
+.media-grid-view .spinner {
+    margin-top: 15px;
+}
+
+.media-grid-view .attachments-browser {
+    padding: 0;
+}
+
+.media-grid-view .attachments-browser .no-media {
+    color: #999;
+    font-size: 18px;
+    font-style: normal;
+    margin: 0;
+    padding: 100px 0 0;
+    text-align: center;
 }
 
@@ -2850 +2866 @@
 }
 
-.media-grid-view.hide-router .media-frame-title {
-    -webkit-box-shadow: none;
-    box-shadow: none;
-}
-
-.media-grid-view .media-frame-content {
-    background-color: transparent;
-    bottom: 40px;
-}
-@media screen and (max-width: 782px) {
-    .media-grid-view .media-frame-content {
-        border-bottom: none;
-        bottom: 0;
-    }
-}
-
-@media only screen and (max-width: 640px), screen and (max-height: 400px) {
-    .media-grid-view .media-frame-title {
-        display: block;
-        width: auto;
-        bottom: auto;
-        right: 0;
-        top: 0;
-        height: 60px;
-    }
-}
+@media only screen and (max-width: 1120px) {
+    .media-grid-view .media-toolbar-primary,
+    .media-grid-view .media-toolbar-secondary {
+        float: none;
+    }
+
+    .media-grid-view input[type="search"] {
+        margin: 20px 0;
+        position: static;
+        width: 100%;
+        max-width: none !important;
+    }
+}
+

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

@@ -1 @@
-/* global _wpMediaViewsL10n, MediaElementPlayer, mediaGridSettings*/
+/* global _wpMediaViewsL10n, MediaElementPlayer, _wpMediaGridSettings */
 (function($, _, Backbone, wp) {
     var media = wp.media, l10n;
@@ -92 +92 @@
             var self = this;
             _.defaults( this.options, {
-                title:     l10n.mediaLibraryTitle,
+                title:     '',
                 modal:     false,
                 selection: [],
@@ -170 +170 @@
             if ( window.history && window.history.pushState ) {
                 Backbone.history.start({
-                    root: mediaGridSettings.adminUrl,
+                    root: _wpMediaGridSettings.adminUrl,
                     pushState: true
                 });
@@ -210 +210 @@
             });
 
-            libraryState._renderTitle = function( view ) {
-                var text = this.get('title') || '';
-                view.$el.addClass( 'wrap' );
-                text += '<a class="add-new-h2">Add New</a>';
-                view.$el.html( text );
-            };
             // Add the default states.
             this.states.add([
@@ -230 +224 @@
         },
 
-        addNewClickHandler: function() {
+        addNewClickHandler: function( event ) {
+            event.preventDefault();
             this.trigger( 'toggle:upload:attachment' );
         },
@@ -447 +442 @@
             this.on( 'close', this.detach );
 
-            // Only need a tab to Edit Image for images.
-            if ( 'undefined' !== typeof this.model && this.model.get( 'type' ) === 'image' ) {
+
                 this.on( 'router:create', this.createRouter, this );
                 this.on( 'router:render', this.browseRouter, this );
-            }
 
             this.options.hasPrevious = this.hasPrevious();
@@ -560 +553 @@
             view.set({
                 'edit-metadata': {
-                    text:     'Edit Metadata',
+                    text:     l10n.editMetadata,
                     priority: 20
-                },
+                }
+            });
+
+            // Only need a tab to Edit Image for images.
+            if ( 'undefined' !== typeof this.model && this.model.get( 'type' ) === 'image' ) {
+                view.set({
                 'edit-image': {
-                    text:     'Edit Image',
+                        text:     l10n.editImage,
                     priority: 40
                 }
             });
+            }
         },
 

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

@@ -5773 +5773 @@
 
             this.attachmentsNoResults = new media.View({
-                controller: this.controller
+                controller: this.controller,
+                tagName: 'p'
             });
 
             this.attachmentsNoResults.$el.addClass( 'hidden no-media' );
-            this.attachmentsNoResults.$el.html( 'No media found.' );
+            this.attachmentsNoResults.$el.html( l10n.noMedia );
 
             this.views.add( this.attachmentsNoResults );

trunk/src/wp-includes/media.php

@@ -2971 +2971 @@
         'addToVideoPlaylist'       => __( 'Add to video playlist' ),
         'addToVideoPlaylistTitle'  => __( 'Add to Video Playlist' ),
+
+        // Media Library
+        'editMetadata' => __( 'Edit Metadata' ),
+        'noMedia'      => __( 'No media found. Try a different search.' ),
     );