WordPress.org
Get WordPress

Make WordPress Core

Ticket #47610: 47610.2.diff

File 47610.2.diff, 7.1 KB (added by afercia, 6 years ago)

  • src/js/media/views/attachments/browser.js

     
    154154                }) );
    155155
    156156                if ( -1 !== $.inArray( this.options.filters, [ 'uploaded', 'all' ] ) ) {
     157                        // Create a h2 heading before the select elements to filter attachments.
     158                        this.toolbar.set( 'filters-heading', new wp.media.view.Heading( {
     159                                priority:   -100,
     160                                text:       l10n.filterAttachments,
     161                                level:      'h2',
     162                                className:  'media-frame-filter-attachments-heading'
     163                        }).render() );
     164
    157165                        // "Filters" will return a <select>, need to render
    158166                        // screen reader text before
    159167                        this.toolbar.set( 'filtersLabel', new wp.media.view.Label({

  • src/js/media/views/selection.js

     
    1 var l10n = wp.media.view.l10n,
     1var _n = wp.i18n._n,
     2        sprintf = wp.i18n.sprintf,
    23        Selection;
    34
    45/**
    … …  
    6061                this.$el.toggleClass( 'one', 1 === collection.length );
    6162                this.$el.toggleClass( 'editing', editing );
    6263
    63                 this.$('.count').text( l10n.selected.replace('%d', collection.length) );
     64                this.$( '.count' ).text(
     65                        /* translators: %s: Number of selected media attachments. */
     66                        sprintf( _n( '%s item selected', '%s items selected', collection.length ), collection.length )
     67                );
    6468        },
    6569
    6670        edit: function( event ) {

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

     
    268268}
    269269
    270270.media-modal-content .media-frame select.attachment-filters {
    271         margin-top: 11px;
     271        margin-top: 32px;
    272272        margin-right: 2%;
    273273        width: 42%;
    274274        width: calc(48% - 12px);
    … …  
    307307        border-top: 1px solid #ddd;
    308308}
    309309
    310 @media screen and (max-width: 782px) {
    311         .media-frame-toolbar .media-toolbar {
    312                 bottom: -48px;
    313         }
    314 }
    315 
    316310.media-toolbar-primary {
    317311        float: right;
    318312        height: 100%;
    … …  
    768762}
    769763
    770764.media-frame.hide-menu .media-frame-menu,
     765.media-frame.hide-menu .media-frame-menu-heading,
    771766.media-frame.hide-router .media-frame-router,
    772767.media-frame.hide-toolbar .media-frame-toolbar {
    773768        display: none;
    … …  
    780775        margin: 0;
    781776}
    782777
     778.media-frame-menu-heading,
     779.media-frame-filter-attachments-heading {
     780        position: absolute;
     781        left: 20px;
     782        top: 22px;
     783        margin: 0;
     784        font-size: 13px;
     785        line-height: 1;
     786        /* Above the media-frame-menu. */
     787        z-index: 151;
     788}
     789
     790.media-frame-filter-attachments-heading {
     791        top: 10px;
     792        left: 16px;
     793}
     794
    783795.wp-core-ui .button.media-frame-menu-toggle {
    784796        display: none;
    785797}
    … …  
    849861 * Search
    850862 */
    851863.media-frame .search {
    852         margin-top: 10px;
     864        margin-top: 32px;
    853865        padding: 4px;
    854866        font-size: 13px;
    855867        color: #444;
    … …  
    11061118
    11071119.attachments-browser .media-toolbar {
    11081120        right: 300px;
    1109         height: 50px;
     1121        height: 72px;
     1122        background: #fff;
    11101123}
    11111124
    11121125.attachments-browser.hide-sidebar .media-toolbar {
    … …  
    11271140.attachments-browser .attachments,
    11281141.attachments-browser .uploader-inline {
    11291142        position: absolute;
    1130         top: 50px;
     1143        top: 72px;
    11311144        left: 0;
    11321145        right: 300px;
    11331146        bottom: 0;
    … …  
    23402353                margin: 5px 10px;
    23412354        }
    23422355
     2356        /* Visually hide the mehu heading keeping it available to assistive technologies. */
     2357        .media-frame-menu-heading {
     2358                clip: rect(1px, 1px, 1px, 1px);
     2359                -webkit-clip-path: inset(50%);
     2360                clip-path: inset(50%);
     2361                height: 1px;
     2362                overflow: hidden;
     2363                padding: 0;
     2364                width: 1px;
     2365                word-wrap: normal !important;
     2366        }
     2367
     2368        /* Reveal the menu toggle button. */
    23432369        .wp-core-ui .media-frame:not(.hide-menu) .button.media-frame-menu-toggle {
    23442370                display: inline-flex;
    23452371                align-items: center;
    … …  
    25542580        .media-frame select {
    25552581                font-size: 16px;
    25562582        }
     2583
     2584        .media-frame .media-toolbar input[type="search"] {
     2585                line-height: 1.625; /* 26px */
     2586        }
    25572587}
    25582588
     2589@media screen and (max-width: 782px) {
     2590        .attachments-browser .media-toolbar {
     2591                height: 82px;
     2592        }
     2593
     2594        .attachments-browser .attachments,
     2595        .attachments-browser .uploader-inline {
     2596                top: 82px;
     2597        }
     2598
     2599        .media-frame .media-toolbar input[type="search"] {
     2600                line-height: 2.25; /* 36px */
     2601        }
     2602
     2603        .media-frame-toolbar .media-toolbar {
     2604                bottom: -48px;
     2605        }
     2606}
     2607
    25592608/* Responsive on portrait and landscape */
    25602609@media only screen and (max-width: 640px), screen and (max-height: 400px) {
    25612610        /* Full-bleed modal */

  • src/wp-includes/media-template.php

     
    178178        <?php // Template for the media frame: used both in the media grid and in the media modal. ?>
    179179        <script type="text/html" id="tmpl-media-frame">
    180180                <div class="media-frame-title" id="media-frame-title"></div>
     181                <h2 class="media-frame-menu-heading"><?php _e( 'Media Types' ); ?></h2>
    181182                <button type="button" class="button button-link media-frame-menu-toggle" aria-expanded="false">
    182183                        <?php _e( 'Media Types' ); ?>
    183184                        <span class="dashicons dashicons-arrow-down" aria-hidden="true"></span>
    … …  
    187188                        <div class="media-frame-router"></div>
    188189                        <div class="media-frame-content"></div>
    189190                </div>
     191                <h2 class="screen-reader-text"><?php _e( 'Available actions' ); ?></h2>
    190192                <div class="media-frame-toolbar"></div>
    191193                <div class="media-frame-uploader"></div>
    192194        </script>

  • src/wp-includes/media.php

     
    39313931                'addToVideoPlaylistTitle'     => __( 'Add to Video Playlist' ),
    39323932
    39333933                // Headings
    3934                 'attachmentsList'             => __( 'Attachments list' ),
     3934                'filterAttachments'           => __( 'Filter Media' ),
     3935                'attachmentsList'             => __( 'Media list' ),
    39353936        );
    39363937
    39373938        /**

  • src/wp-includes/script-loader.php

     
    16171617
    16181618        // To enqueue media-views or media-editor, call wp_enqueue_media().
    16191619        // Both rely on numerous settings, styles, and templates to operate correctly.
    1620         $scripts->add( 'media-views', "/wp-includes/js/media-views$suffix.js", array( 'utils', 'media-models', 'wp-plupload', 'jquery-ui-sortable', 'wp-mediaelement', 'wp-api-request', 'wp-a11y' ), false, 1 );
     1620        $scripts->add( 'media-views', "/wp-includes/js/media-views$suffix.js", array( 'utils', 'media-models', 'wp-plupload', 'jquery-ui-sortable', 'wp-mediaelement', 'wp-api-request', 'wp-a11y', 'wp-i18n' ), false, 1 );
    16211621        $scripts->add( 'media-editor', "/wp-includes/js/media-editor$suffix.js", array( 'shortcode', 'media-views' ), false, 1 );
    16221622        $scripts->add( 'media-audiovideo', "/wp-includes/js/media-audiovideo$suffix.js", array( 'media-editor' ), false, 1 );
    16231623        $scripts->add( 'mce-view', "/wp-includes/js/mce-view$suffix.js", array( 'shortcode', 'jquery', 'media-views', 'media-audiovideo' ), false, 1 );