WordPress.org

Make WordPress Core

Ticket #27423: 27423.2.patch

File 27423.2.patch, 5.4 KB (added by stephdau, 6 years ago)

Patch refresh: 27423.path as of r28949

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

     
    17471747                template:  media.template('media-frame'),
    17481748                regions:   ['menu','title','content','toolbar','router'],
    17491749
     1750                events: {
     1751                        'click a.media-frame-menu-toggle': 'toggleMenu'
     1752                },
     1753
    17501754                /**
    17511755                 * @global wp.Uploader
    17521756                 */
     
    18401844                                controller: this
    18411845                        });
    18421846                },
     1847
     1848                toggleMenu: function( event ) {
     1849                        console.log( 'clicked' );
     1850                        event.preventDefault();
     1851                        this.$el.find( '.media-menu' ).toggleClass( 'visible' );
     1852
     1853                },
    18431854                /**
    18441855                 * @param {Object} toolbar
    18451856                 * @this wp.media.controller.Region
     
    44294440        });
    44304441
    44314442        /**
    4432          * wp.media.view.Menu
    4433          *
    4434          * @constructor
    4435          * @augments wp.media.view.PriorityList
    4436          * @augments wp.media.View
    4437          * @augments wp.Backbone.View
    4438          * @augments Backbone.View
    4439          */
     4443        * wp.media.view.Menu
     4444        *
     4445        * @constructor
     4446        * @augments wp.media.view.PriorityList
     4447        * @augments wp.media.View
     4448        * @augments wp.Backbone.View
     4449        * @augments Backbone.View
     4450        */
    44404451        media.view.Menu = media.view.PriorityList.extend({
    44414452                tagName:   'div',
    44424453                className: 'media-menu',
    44434454                property:  'state',
    44444455                ItemView:  media.view.MenuItem,
    44454456                region:    'menu',
     4457
     4458                initialize: function( options ) {
     4459                        media.view.PriorityList.prototype.initialize.apply( this, arguments );
     4460                        this.controller = options.controller;
     4461                        this.listenTo( this.controller, 'deactivate', function() {
     4462                                this.$el.removeClass( 'visible' );
     4463                        } );
     4464                },
     4465
    44464466                /**
    44474467                 * @param {Object} options
    44484468                 * @param {string} id
     
    46064626                tagName:   'li',
    46074627                className: 'attachment',
    46084628                template:  media.template('attachment'),
     4629                isTouch: false,
    46094630
    46104631                attributes: {
    46114632                        tabIndex: 0,
     
    46144635
    46154636                events: {
    46164637                        'click .js--select-attachment':   'toggleSelectionHandler',
     4638                        'touchend .attachment-preview':   'setTouch',
    46174639                        'change [data-setting]':          'updateSetting',
    46184640                        'change [data-setting] input':    'updateSetting',
    46194641                        'change [data-setting] select':   'updateSetting',
     
    47304752                                this.$bar.width( this.model.get('percent') + '%' );
    47314753                        }
    47324754                },
     4755
     4756                setTouch: function() {
     4757                        this.isTouch = true;
     4758                },
     4759
    47334760                /**
    47344761                 * @param {Object} event
    47354762                 */
     
    47524779                                method = 'toggle';
    47534780                        }
    47544781
     4782                        if ( this.isTouch ) {
     4783                                this.isTouch = false;
     4784                                method = 'add';
     4785                        }
     4786
    47554787                        this.toggleSelection({
    47564788                                method: method
    47574789                        });
     
    48004832                                selection[ this.selected() ? 'remove' : 'add' ]( model );
    48014833                                selection.single( model );
    48024834                                return;
     4835                        } else if ( 'add' === method ) {
     4836                                selection.add( model );
     4837                                selection.single( model );
     4838                                return;
     4839
    48034840                        }
    48044841
    48054842                        // Fixes bug that loses focus when selecting a featured image
  • src/wp-includes/media-template.php

     
    130130        </style>
    131131        <![endif]-->
    132132        <script type="text/html" id="tmpl-media-frame">
     133                <a class="media-frame-menu-toggle" href="#">Insert Media<!-- Change this dynamically. --><div class="dashicons dashicons-arrow-down"></div></a>
    133134                <div class="media-frame-menu"></div>
    134135                <div class="media-frame-title"></div>
    135136                <div class="media-frame-router"></div>
  • src/wp-includes/css/media-views.css

     
    529529        z-index: 150;
    530530}
    531531
     532.media-frame .media-frame-menu-toggle {
     533        position: absolute;
     534        top: 0;
     535        left: 0;
     536        z-index: 200;
     537        display: none;
     538        text-decoration: none;
     539        font-size: 16px;
     540        padding: 16px;
     541}
     542
     543.media-frame .media-frame-menu-toggle:hover {
     544        position: absolute;
     545}
     546
    532547.media-frame-title {
    533548        position: absolute;
    534549        top: 0;
     
    23152330        }
    23162331
    23172332        .media-frame-menu {
    2318                 width: auto;
    2319                 bottom: auto;
    2320                 right: 0;
    2321                 height: 60px;
     2333                top: 30px;
     2334                left: 0;
     2335                z-index: inherit;
    23222336        }
    23232337
     2338        .media-frame .media-frame-menu-toggle {
     2339                display: block;
     2340        }
     2341
    23242342        .media-menu {
    2325                 border-right: none;
     2343                z-index: inherit;
     2344                width: 200px;
    23262345                position: relative;
    2327                 border-bottom: 1px solid #dddddd;
    2328                 overflow: hidden;
    23292346                padding: 10px 0 10px 10px;
     2347                display: none;
     2348                border: 1px solid #ccc;
    23302349        }
    23312350
    2332         .media-menu a {
    2333                 float: left;
    2334                 width: 42%;
    2335                 white-space: nowrap;
    2336                 text-overflow: ellipsis;
    2337                 overflow: hidden;
     2351        .media-menu.visible {
     2352                z-index: 2000;
     2353                display: block;
     2354                position: fixed;
     2355                top: 0;
     2356                bottom: 0;
     2357                left: 0;
     2358                right: 0;
     2359                width: auto;
     2360                border: none;
     2361                padding: 10px 0;
    23382362        }
     2363       
     2364        .media-menu > a {
     2365                padding: 20px;
     2366                width: auto !important;
     2367                text-align: center;
     2368                font-size: 20px;
     2369        }
    23392370
    23402371        .media-frame-title {
    23412372                display: none;
     
    23472378                font-size: 14px;
    23482379        }
    23492380
     2381        .image-details .media-frame-menu-toggle {
     2382                display: none;
     2383        }
     2384
    23502385        .media-frame-toolbar {
    23512386                position: absolute;
    23522387                bottom: 0px;
     
    23822417                display: none;
    23832418        }
    23842419
    2385         .media-frame-title {
     2420        .image-details .media-frame-title {
    23862421                top: 72px;
    2387                 left: auto;
    2388                 height: auto;
    23892422        }
    23902423
    23912424        .media-frame-title h1 {
     
    23942427        }
    23952428
    23962429        .media-frame-router {
    2397                 top: 84px;
    23982430                left: 0;
    23992431        }
    24002432
    24012433        .media-frame-content {
    24022434                left: 0;
    2403                 top: 118px;
    24042435        }
    24052436
    24062437        .image-details .media-frame.hide-router .media-frame-content {