WordPress.org

Make WordPress Core

Ticket #27423: 27423-02.patch

File 27423-02.patch, 5.3 KB (added by gcorne, 6 years ago)
  • src/wp-includes/css/media-views.css

    diff --git src/wp-includes/css/media-views.css src/wp-includes/css/media-views.css
    index c768479..cfc977f 100644
     
    525525        z-index: 150;
    526526}
    527527
     528.media-frame .media-frame-menu-toggle {
     529        position: absolute;
     530        top: 0;
     531        left: 0;
     532        z-index: 200;
     533        display: none;
     534        text-transform: uppercase;
     535        text-decoration: none;
     536        background-color: #1E8CBE;
     537        color: white;
     538        font-size: 14px;
     539        padding: 4px;
     540}
     541
     542.media-frame .media-frame-menu-toggle:hover {
     543        position: absolute;
     544}
     545
    528546.media-frame-title {
    529547        position: absolute;
    530548        top: 0;
     
    21212139        }
    21222140
    21232141        .media-frame-menu {
    2124                 width: auto;
    2125                 bottom: auto;
    2126                 right: 0;
    2127                 height: 60px;
     2142                top: 30px;
     2143                left: 0;
     2144                z-index: inherit;
     2145        }
     2146
     2147        .media-frame .media-frame-menu-toggle {
     2148                display: block;
    21282149        }
    21292150
    21302151        .media-menu {
    2131                 border-right: none;
     2152                z-index: inherit;
     2153                width: 200px;
    21322154                position: relative;
    2133                 border-bottom: 1px solid #dddddd;
    2134                 overflow: hidden;
    21352155                padding: 10px 0 10px 10px;
     2156                display: none;
     2157                border: 1px solid #ccc;
    21362158        }
    21372159
    2138         .media-menu a {
    2139                 float: left;
    2140                 width: 42%;
    2141                 white-space: nowrap;
    2142                 text-overflow: ellipsis;
    2143                 overflow: hidden;
     2160        .media-menu.visible {
     2161                z-index: 2000;
     2162                display: block;
    21442163        }
    21452164
    21462165        .media-frame-title {
    2147                 display: none;
     2166                top: 32px;
     2167                left: 0;
     2168                height: auto;
     2169                width: auto;
     2170        }
     2171
     2172        .media-frame-title h1 {
     2173                text-align: center
    21482174        }
    21492175
    21502176        .image-details .media-frame-title {
     
    21532179                font-size: 14px;
    21542180        }
    21552181
     2182        .image-details .media-frame-menu-toggle {
     2183                display: none;
     2184        }
     2185
    21562186        .media-frame-toolbar {
    21572187                position: absolute;
    21582188                bottom: 0px;
     
    21882218                display: none;
    21892219        }
    21902220
    2191         .media-frame-title {
     2221        .image-details .media-frame-title {
    21922222                top: 72px;
    2193                 left: auto;
    2194                 height: auto;
    21952223        }
    21962224
    21972225        .media-frame-title h1 {
  • src/wp-includes/js/media-views.js

    diff --git src/wp-includes/js/media-views.js src/wp-includes/js/media-views.js
    index c1407d3..4c2ced7 100644
     
    17481748                template:  media.template('media-frame'),
    17491749                regions:   ['menu','title','content','toolbar','router'],
    17501750
     1751                events: {
     1752                        'click a.media-frame-menu-toggle': 'toggleMenu'
     1753                },
     1754
    17511755                /**
    17521756                 * @global wp.Uploader
    17531757                 */
     
    18331837                                controller: this
    18341838                        });
    18351839                },
     1840
     1841                toggleMenu: function( event ) {
     1842                        console.log( 'clicked' );
     1843                        event.preventDefault();
     1844                        this.$el.find( '.media-menu' ).toggleClass( 'visible' );
     1845
     1846                },
    18361847                /**
    18371848                 * @param {Object} toolbar
    18381849                 * @this wp.media.controller.Region
     
    44644475        });
    44654476
    44664477        /**
    4467          * wp.media.view.Menu
    4468          *
    4469          * @constructor
    4470          * @augments wp.media.view.PriorityList
    4471          * @augments wp.media.View
    4472          * @augments wp.Backbone.View
    4473          * @augments Backbone.View
    4474          */
     4478        * wp.media.view.Menu
     4479        *
     4480        * @constructor
     4481        * @augments wp.media.view.PriorityList
     4482        * @augments wp.media.View
     4483        * @augments wp.Backbone.View
     4484        * @augments Backbone.View
     4485        */
    44754486        media.view.Menu = media.view.PriorityList.extend({
    44764487                tagName:   'div',
    44774488                className: 'media-menu',
    44784489                property:  'state',
    44794490                ItemView:  media.view.MenuItem,
    44804491                region:    'menu',
     4492
     4493                initialize: function( options ) {
     4494                        media.view.PriorityList.prototype.initialize.apply( this, arguments );
     4495                        this.controller = options.controller;
     4496                        this.listenTo( this.controller, 'deactivate', function() {
     4497                                this.$el.removeClass( 'visible' );
     4498                        } );
     4499                },
     4500
    44814501                /**
    44824502                 * @param {Object} options
    44834503                 * @param {string} id
     
    46414661                tagName:   'li',
    46424662                className: 'attachment',
    46434663                template:  media.template('attachment'),
     4664                isTouch: false,
    46444665
    46454666                attributes: {
    46464667                        tabIndex: 0,
     
    46494670
    46504671                events: {
    46514672                        'click .attachment-preview':      'toggleSelectionHandler',
     4673                        'touchend .attachment-preview':   'setTouch',
    46524674                        'change [data-setting]':          'updateSetting',
    46534675                        'change [data-setting] input':    'updateSetting',
    46544676                        'change [data-setting] select':   'updateSetting',
     
    47634785                                this.$bar.width( this.model.get('percent') + '%' );
    47644786                        }
    47654787                },
     4788
     4789                setTouch: function() {
     4790                        this.isTouch = true;
     4791                },
     4792
    47664793                /**
    47674794                 * @param {Object} event
    47684795                 */
     
    47734800                        if ( 'keydown' === event.type && 13 !== event.keyCode && 32 !== event.keyCode ) {
    47744801                                return;
    47754802                        }
     4803
    47764804                        if ( event.shiftKey ) {
    47774805                                method = 'between';
    47784806                        } else if ( event.ctrlKey || event.metaKey ) {
    47794807                                method = 'toggle';
    47804808                        }
    47814809
     4810                        if ( this.isTouch ) {
     4811                                this.isTouch = false;
     4812                                method = 'add';
     4813                        }
     4814
    47824815                        this.toggleSelection({
    47834816                                method: method
    47844817                        });
     
    48274860                                selection[ this.selected() ? 'remove' : 'add' ]( model );
    48284861                                selection.single( model );
    48294862                                return;
     4863                        } else if ( 'add' === method ) {
     4864                                selection.add( model );
     4865                                selection.single( model );
     4866                                return;
     4867
    48304868                        }
    48314869
    48324870                        // Fixes bug that loses focus when selecting a featured image
  • src/wp-includes/media-template.php

    diff --git src/wp-includes/media-template.php src/wp-includes/media-template.php
    index 2c0ff80..1fe6c36 100644
    function wp_print_media_templates() { 
    130130        </style>
    131131        <![endif]-->
    132132        <script type="text/html" id="tmpl-media-frame">
     133                <a class="media-frame-menu-toggle" href="#"><?php _e( 'Menu' ); ?><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>