Ticket #27423: 27423-02.patch

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

@@ -525 +525 @@
         z-index: 150;
 }
 
+.media-frame .media-frame-menu-toggle {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 200;
+        display: none;
+        text-transform: uppercase;
+        text-decoration: none;
+        background-color: #1E8CBE;
+        color: white;
+        font-size: 14px;
+        padding: 4px;
+}
+
+.media-frame .media-frame-menu-toggle:hover {
+        position: absolute;
+}
+
 .media-frame-title {
         position: absolute;
         top: 0;
@@ -2121 +2139 @@
         }
 
         .media-frame-menu {
-                width: auto;
-                bottom: auto;
-                right: 0;
-                height: 60px;
+                top: 30px;
+                left: 0;
+                z-index: inherit;
+        }
+
+        .media-frame .media-frame-menu-toggle {
+                display: block;
         }
 
         .media-menu {
-                border-right: none;
+                z-index: inherit;
+                width: 200px;
                 position: relative;
-                border-bottom: 1px solid #dddddd;
-                overflow: hidden;
                 padding: 10px 0 10px 10px;
+                display: none;
+                border: 1px solid #ccc;
         }
 
-        .media-menu a {
-                float: left;
-                width: 42%;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-                overflow: hidden;
+        .media-menu.visible {
+                z-index: 2000;
+                display: block;
         }
 
         .media-frame-title {
-                display: none;
+                top: 32px;
+                left: 0;
+                height: auto;
+                width: auto;
+        }
+
+        .media-frame-title h1 {
+                text-align: center
         }
 
         .image-details .media-frame-title {
@@ -2153 +2179 @@
                 font-size: 14px;
         }
 
+        .image-details .media-frame-menu-toggle {
+                display: none;
+        }
+
         .media-frame-toolbar {
                 position: absolute;
                 bottom: 0px;
@@ -2188 +2218 @@
                 display: none;
         }
 
-        .media-frame-title {
+        .image-details .media-frame-title {
                 top: 72px;
-                left: auto;
-                height: auto;
         }
 
         .media-frame-title h1 {

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

@@ -1748 +1748 @@
                 template:  media.template('media-frame'),
                 regions:   ['menu','title','content','toolbar','router'],
 
+                events: {
+                        'click a.media-frame-menu-toggle': 'toggleMenu'
+                },
+
                 /**
                  * @global wp.Uploader
                  */
@@ -1833 +1837 @@
                                 controller: this
                         });
                 },
+
+                toggleMenu: function( event ) {
+                        console.log( 'clicked' );
+                        event.preventDefault();
+                        this.$el.find( '.media-menu' ).toggleClass( 'visible' );
+
+                },
                 /**
                  * @param {Object} toolbar
                  * @this wp.media.controller.Region
@@ -4464 +4475 @@
         });
 
         /**
-         * wp.media.view.Menu
-         *
-         * @constructor
-         * @augments wp.media.view.PriorityList
-         * @augments wp.media.View
-         * @augments wp.Backbone.View
-         * @augments Backbone.View
-         */
+        * wp.media.view.Menu
+        *
+        * @constructor
+        * @augments wp.media.view.PriorityList
+        * @augments wp.media.View
+        * @augments wp.Backbone.View
+        * @augments Backbone.View
+        */
         media.view.Menu = media.view.PriorityList.extend({
                 tagName:   'div',
                 className: 'media-menu',
                 property:  'state',
                 ItemView:  media.view.MenuItem,
                 region:    'menu',
+
+                initialize: function( options ) {
+                        media.view.PriorityList.prototype.initialize.apply( this, arguments );
+                        this.controller = options.controller;
+                        this.listenTo( this.controller, 'deactivate', function() {
+                                this.$el.removeClass( 'visible' );
+                        } );
+                },
+
                 /**
                  * @param {Object} options
                  * @param {string} id
@@ -4641 +4661 @@
                 tagName:   'li',
                 className: 'attachment',
                 template:  media.template('attachment'),
+                isTouch: false,
 
                 attributes: {
                         tabIndex: 0,
@@ -4649 +4670 @@
 
                 events: {
                         'click .attachment-preview':      'toggleSelectionHandler',
+                        'touchend .attachment-preview':   'setTouch',
                         'change [data-setting]':          'updateSetting',
                         'change [data-setting] input':    'updateSetting',
                         'change [data-setting] select':   'updateSetting',
@@ -4763 +4785 @@
                                 this.$bar.width( this.model.get('percent') + '%' );
                         }
                 },
+
+                setTouch: function() {
+                        this.isTouch = true;
+                },
+
                 /**
                  * @param {Object} event
                  */
@@ -4773 +4800 @@
                         if ( 'keydown' === event.type && 13 !== event.keyCode && 32 !== event.keyCode ) {
                                 return;
                         }
+
                         if ( event.shiftKey ) {
                                 method = 'between';
                         } else if ( event.ctrlKey || event.metaKey ) {
                                 method = 'toggle';
                         }
 
+                        if ( this.isTouch ) {
+                                this.isTouch = false;
+                                method = 'add';
+                        }
+
                         this.toggleSelection({
                                 method: method
                         });
@@ -4827 +4860 @@
                                 selection[ this.selected() ? 'remove' : 'add' ]( model );
                                 selection.single( model );
                                 return;
+                        } else if ( 'add' === method ) {
+                                selection.add( model );
+                                selection.single( model );
+                                return;
+
                         }
 
                         // Fixes bug that loses focus when selecting a featured image

src/wp-includes/media-template.php

@@ -130 +130 @@
         </style>
         <![endif]-->
         <script type="text/html" id="tmpl-media-frame">
+                <a class="media-frame-menu-toggle" href="#"><?php _e( 'Menu' ); ?><div class="dashicons dashicons-arrow-down"></div></a>
                 <div class="media-frame-menu"></div>
                 <div class="media-frame-title"></div>
                 <div class="media-frame-router"></div>