WordPress.org

Make WordPress Core

Changeset 29136


Ignore:
Timestamp:
07/13/2014 04:15:36 PM (6 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:
6 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/js/media.js

    r28682 r29136  
    7676        wp.media && wp.media({
    7777            frame: 'manage',
    78             container: $('#wpbody-content')
     78            container: $('#wpbody-content > .wrap')
    7979        }).open();
    8080
  • trunk/src/wp-admin/upload.php

    r29079 r29136  
    2525    wp_enqueue_script( 'media-grid' );
    2626    wp_enqueue_script( 'media' );
    27     wp_localize_script( 'media-grid', 'mediaGridSettings', array( 'adminUrl' => parse_url( self_admin_url(), PHP_URL_PATH )  ) );
     27    wp_localize_script( 'media-grid', '_wpMediaGridSettings', array(
     28        'adminUrl' => parse_url( self_admin_url(), PHP_URL_PATH ),
     29    ) );
    2830
    2931    add_screen_option( 'misc_screen_options', array( 'option' => 'manageuploadgridcolumnshidden', 'id' => 'grid' ) );
     
    3335    add_screen_option( 'mime', array( 'label' => __( 'Mime-type' ) ) );
    3436
     37    get_current_screen()->add_help_tab( array(
     38    'id'        => 'overview',
     39    'title'     => __( 'Overview' ),
     40    'content'   =>
     41        '<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>'
     42    ) );
     43
     44    get_current_screen()->set_help_sidebar(
     45        '<p><strong>' . __( 'For more information:' ) . '</strong></p>' .
     46        '<p>' . __( '<a href="http://codex.wordpress.org/Media_Library_Screen" target="_blank">Documentation on Media Library</a>' ) . '</p>' .
     47        '<p>' . __( '<a href="https://wordpress.org/support/" target="_blank">Support Forums</a>' ) . '</p>'
     48    );
     49
     50    $title = __('Media Library');
     51    $parent_file = 'upload.php';
     52
    3553    require_once( ABSPATH . 'wp-admin/admin-header.php' );
     54    ?>
     55    <div class="wrap">
     56        <h2>
     57        <?php
     58        echo esc_html( $title );
     59        if ( current_user_can( 'upload_files' ) ) { ?>
     60            <a href="media-new.php" class="add-new-h2"><?php echo esc_html_x( 'Add New', 'file' ); ?></a><?php
     61        }
     62        ?>
     63        </h2>
     64    </div>
     65    <?php
    3666    include( ABSPATH . 'wp-admin/admin-footer.php' );
    3767    exit;
  • trunk/src/wp-includes/css/media-views.css

    r29131 r29136  
    25732573 * Media Grid
    25742574 */
    2575 
    2576 .media-grid-view h1 {
    2577     color: #222;
    2578     font-size: 23px;
    2579     font-weight: 400;
    2580     margin: 10px 0 0;
    2581     padding: 9px 15px 4px 22px;
    2582     line-height: 29px;
    2583 }
    2584 
    2585 .media-grid-view .view-switch {
    2586     display: inline-block;
    2587     float: none;
    2588     margin-top: 13px;
    2589     vertical-align: middle;
    2590 }
    2591 
    2592 /**
    2593  * Position both the frame and the uploader window into the content
    2594  * area of the screen.
    2595  */
    2596 .media-grid-view {
    2597     z-index: 1;
    2598     position: fixed;
    2599     bottom: 0;
    2600     left: 160px;
    2601     right: 0;
    2602     top: 32px;
    2603     -webkit-transition: 200ms ease-in-out;
    2604     transition: 200ms ease-in-out;
    2605 }
    2606 
    2607 .media-grid-view-options {
    2608     top: 120px;
    2609 }
    2610 
    2611 @media screen and (max-width: 900px) {
    2612     .auto-fold .media-grid-view {
    2613         left: 36px;
    2614     }
    2615 }
    2616 @media screen and (max-width: 782px) {
    2617     .media-grid-view {
    2618         top: 46px;
    2619     }
    2620     .auto-fold .media-grid-view {
    2621         left: 0px;
    2622         bottom: 0px;
    2623     }
     2575.media-grid-view,
     2576.media-grid-view .media-frame-content,
     2577.media-grid-view .attachments-browser .attachments,
     2578.media-grid-view .uploader-inline-content {
     2579    position: static;
    26242580}
    26252581
    26262582/* Regions we don't use at all */
     2583.media-grid-view .media-frame-title,
    26272584.media-grid-view .media-frame-toolbar,
    26282585.media-grid-view .media-frame-menu {
    26292586    display: none;
     2587}
     2588
     2589.media-grid-view .media-frame-content {
     2590    background-color: transparent;
     2591    border: none;
     2592}
     2593
     2594.media-grid-view .uploader-inline {
     2595    position: relative;
     2596    top: auto;
     2597    right: auto;
     2598    left: auto;
     2599    bottom: auto;
     2600    padding-top: 0;
     2601    margin-top: 0;
    26302602}
    26312603
     
    26452617    display: inline-block;
    26462618    font-size: 13px;
     2619    margin: 20px 0;
    26472620    padding: 0 20px;
    26482621    position: relative;
    26492622    width: 100%;
     2623    height: auto;
     2624    border: none;
     2625}
     2626
     2627.media-grid-view input[type="search"] {
     2628    margin: 1px;
     2629    padding: 3px 5px;
     2630    position: absolute;
     2631    right: 10px;
     2632    top: 9px;
     2633    font-size: 16px;
     2634    font-weight: 300;
     2635    line-height: 1.5;
     2636    width: 280px;
     2637}
     2638
     2639.media-grid-view .view-switch {
     2640    display: inline-block;
     2641    float: none;
     2642    vertical-align: middle;
     2643    padding: 15px 0;
     2644    margin: 0 20px 0 0;
     2645}
     2646
     2647.media-grid-view select.attachment-filters {
     2648    margin: 0 10px 0 0;
     2649}
     2650
     2651.media-grid-view .spinner {
     2652    margin-top: 15px;
     2653}
     2654
     2655.media-grid-view .attachments-browser {
     2656    padding: 0;
     2657}
     2658
     2659.media-grid-view .attachments-browser .no-media {
     2660    color: #999;
     2661    font-size: 18px;
     2662    font-style: normal;
     2663    margin: 0;
     2664    padding: 100px 0 0;
     2665    text-align: center;
    26502666}
    26512667
     
    28502866}
    28512867
    2852 .media-grid-view.hide-router .media-frame-title {
    2853     -webkit-box-shadow: none;
    2854     box-shadow: none;
    2855 }
    2856 
    2857 .media-grid-view .media-frame-content {
    2858     background-color: transparent;
    2859     bottom: 40px;
    2860 }
    2861 @media screen and (max-width: 782px) {
    2862     .media-grid-view .media-frame-content {
    2863         border-bottom: none;
    2864         bottom: 0;
    2865     }
    2866 }
    2867 
    2868 @media only screen and (max-width: 640px), screen and (max-height: 400px) {
    2869     .media-grid-view .media-frame-title {
    2870         display: block;
    2871         width: auto;
    2872         bottom: auto;
    2873         right: 0;
    2874         top: 0;
    2875         height: 60px;
    2876     }
    2877 }
     2868@media only screen and (max-width: 1120px) {
     2869    .media-grid-view .media-toolbar-primary,
     2870    .media-grid-view .media-toolbar-secondary {
     2871        float: none;
     2872    }
     2873
     2874    .media-grid-view input[type="search"] {
     2875        margin: 20px 0;
     2876        position: static;
     2877        width: 100%;
     2878        max-width: none !important;
     2879    }
     2880}
     2881
  • trunk/src/wp-includes/js/media-grid.js

    r29104 r29136  
    1 /* global _wpMediaViewsL10n, MediaElementPlayer, mediaGridSettings*/
     1/* global _wpMediaViewsL10n, MediaElementPlayer, _wpMediaGridSettings */
    22(function($, _, Backbone, wp) {
    33    var media = wp.media, l10n;
     
    9292            var self = this;
    9393            _.defaults( this.options, {
    94                 title:     l10n.mediaLibraryTitle,
     94                title:     '',
    9595                modal:     false,
    9696                selection: [],
     
    170170            if ( window.history && window.history.pushState ) {
    171171                Backbone.history.start({
    172                     root: mediaGridSettings.adminUrl,
     172                    root: _wpMediaGridSettings.adminUrl,
    173173                    pushState: true
    174174                });
     
    210210            });
    211211
    212             libraryState._renderTitle = function( view ) {
    213                 var text = this.get('title') || '';
    214                 view.$el.addClass( 'wrap' );
    215                 text += '<a class="add-new-h2">Add New</a>';
    216                 view.$el.html( text );
    217             };
    218212            // Add the default states.
    219213            this.states.add([
     
    230224        },
    231225
    232         addNewClickHandler: function() {
     226        addNewClickHandler: function( event ) {
     227            event.preventDefault();
    233228            this.trigger( 'toggle:upload:attachment' );
    234229        },
     
    447442            this.on( 'close', this.detach );
    448443
    449             // Only need a tab to Edit Image for images.
    450             if ( 'undefined' !== typeof this.model && this.model.get( 'type' ) === 'image' ) {
     444
    451445                this.on( 'router:create', this.createRouter, this );
    452446                this.on( 'router:render', this.browseRouter, this );
    453             }
    454447
    455448            this.options.hasPrevious = this.hasPrevious();
     
    560553            view.set({
    561554                'edit-metadata': {
    562                     text:     'Edit Metadata',
     555                    text:     l10n.editMetadata,
    563556                    priority: 20
    564                 },
     557                }
     558            });
     559
     560            // Only need a tab to Edit Image for images.
     561            if ( 'undefined' !== typeof this.model && this.model.get( 'type' ) === 'image' ) {
     562                view.set({
    565563                'edit-image': {
    566                     text:     'Edit Image',
     564                        text:     l10n.editImage,
    567565                    priority: 40
    568566                }
    569567            });
     568            }
    570569        },
    571570
  • trunk/src/wp-includes/js/media-views.js

    r29105 r29136  
    57735773
    57745774            this.attachmentsNoResults = new media.View({
    5775                 controller: this.controller
     5775                controller: this.controller,
     5776                tagName: 'p'
    57765777            });
    57775778
    57785779            this.attachmentsNoResults.$el.addClass( 'hidden no-media' );
    5779             this.attachmentsNoResults.$el.html( 'No media found.' );
     5780            this.attachmentsNoResults.$el.html( l10n.noMedia );
    57805781
    57815782            this.views.add( this.attachmentsNoResults );
  • trunk/src/wp-includes/media.php

    r29106 r29136  
    29712971        'addToVideoPlaylist'       => __( 'Add to video playlist' ),
    29722972        'addToVideoPlaylistTitle'  => __( 'Add to Video Playlist' ),
     2973
     2974        // Media Library
     2975        'editMetadata' => __( 'Edit Metadata' ),
     2976        'noMedia'      => __( 'No media found. Try a different search.' ),
    29732977    );
    29742978
Note: See TracChangeset for help on using the changeset viewer.