Ticket #27423: 27423.5.patch

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

@@ -529 +529 @@
         z-index: 150;
 }
 
+.media-frame .media-frame-menu-toggle {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 200;
+        display: none;
+        text-decoration: none;
+        font-size: 16px;
+        padding: 16px;
+}
+
+.media-frame .media-frame-menu-toggle:hover {
+        position: absolute;
+}
+
 .media-frame-title {
         position: absolute;
         top: 0;
@@ -683 +698 @@
  */
 .attachments {
         margin: 0;
-        padding-right: 16px;
+        padding: 8px;
         -webkit-overflow-scrolling: touch;
 }
 
@@ -705 +720 @@
 }
 
 .attachment:focus {
+        outline: none;
+}
+
+.attachment:focus .attachment-preview {
         -webkit-box-shadow:
                 0 0 0 1px #5b9dd9,
                 0 0 2px 2px #5b9dd9;
         box-shadow:
                 0 0 0 1px #5b9dd9,
                 0 0 2px 2px #5b9dd9;
-        outline: none;
 }
 
-.selected.attachment {
+.selected.attachment .attachment-preview {
         -webkit-box-shadow:
                 0 0 0 1px #fff,
                 0 0 0 3px #ccc;
@@ -725 +743 @@
 
 .attachment-preview {
         position: relative;
-        width: 199px;
-        height: 199px;
         -webkit-box-shadow:
                 inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
                 inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
@@ -904 +920 @@
         display: block;
 }
 
-.attachment.details,
+.attachment.details .attachment-preview,
 .media-grid-view .selected.attachment {
         -webkit-box-shadow: 0 0 0 1px #fff,
                                 0 0 0 5px #1e8cbe;
@@ -1456 +1472 @@
 .media-selection .attachments {
         display: inline-block;
         height: 48px;
-        margin-top: 5px;
         overflow: hidden;
         vertical-align: top;
 }
@@ -2315 +2330 @@
         }
 
         .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;
+                position: fixed;
+                top: 0;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                width: auto;
+                border: none;
+                padding: 10px 0;
+        }
+        
+        .media-menu > a {
+                padding: 20px;
+                width: auto !important;
+                text-align: center;
+                font-size: 20px;
         }
 
         .media-frame-title {
@@ -2347 +2378 @@
                 font-size: 14px;
         }
 
+        .image-details .media-frame-menu-toggle {
+                display: none;
+        }
+
         .media-frame-toolbar {
                 position: absolute;
                 bottom: 0px;
@@ -2382 +2417 @@
                 display: none;
         }
 
-        .media-frame-title {
+        .image-details .media-frame-title {
                 top: 72px;
-                left: auto;
-                height: auto;
         }
 
         .media-frame-title h1 {
@@ -2394 +2427 @@
         }
 
         .media-frame-router {
-                top: 84px;
                 left: 0;
         }
 
         .media-frame-content {
                 left: 0;
-                top: 118px;
         }
 
         .image-details .media-frame.hide-router .media-frame-content {
@@ -2879 +2910 @@
         }
 }
 
+/**/
+
+.attachments-browser .attachment {
+        position: relative;
+        width: 20%;
+        margin: 0;
+}
+
+.attachments-browser .attachment:before {
+        content: '';
+        display: block;
+        padding-top: 100%;
+}
+
+.attachments-browser .attachment .attachment-preview {
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        bottom: 8px;
+        left: 8px;
+}
+
+.attachments-browser .portrait img {
+        max-width: 100%;
+}
+
+.attachments-browser .landscape img {
+        max-height: 100%;
+}
+
+/**/
+
+.media-selection .attachments {
+        padding: 5px;
+}
+
+.media-selection .attachment {
+        margin: 5px;
+        width: 40px;
+}
+
+.media-selection .attachment-preview,
+.media-selection .attachment-preview .thumbnail {
+        width: 40px;
+        height: 40px;
+}
+
+.media-selection .portrait .thumbnail img {
+        max-width: 40px;
+        height: auto;
+}
+
+.media-selection .landscape .thumbnail img {
+        width: auto;
+        max-height: 40px;
+}
+
+/* 2 per row for small screens. But we should hide the sidebar, so we can display more. I think 3/4 would be a good number. */
+@media only screen and ( max-width: 640px ) {
+        .attachments-browser .attachment {
+                width: 50%;
+        }
+}
+
+@media only screen and ( min-width: 640px ) and ( max-width: 960px ) {
+        .attachments-browser .attachment {
+                width: 33.3%%;
+        }
+}
+
+@media only screen and ( min-width: 960px ) and ( max-width: 1200px ) {
+        .attachments-browser .attachment {
+                width: 25%;
+        }
+}
+
+@media only screen and ( min-width: 1200px ) {
+        .attachments-browser .attachment {
+                width: 20%;
+        }
+}
+
+/* etc. etc. At a certain width we can stop, images will just get bigger... */

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

@@ -1747 +1747 @@
                 template:  media.template('media-frame'),
                 regions:   ['menu','title','content','toolbar','router'],
 
+                events: {
+                        'click a.media-frame-menu-toggle': 'toggleMenu'
+                },
+
                 /**
                  * @global wp.Uploader
                  */
@@ -1840 +1844 @@
                                 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
@@ -4429 +4440 @@
         });
 
         /**
-         * 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
@@ -4606 +4626 @@
                 tagName:   'li',
                 className: 'attachment',
                 template:  media.template('attachment'),
+                isTouch: false,
 
                 attributes: {
                         tabIndex: 0,
@@ -4614 +4635 @@
 
                 events: {
                         'click .js--select-attachment':   'toggleSelectionHandler',
+                        'touchend .attachment-preview':   'setTouch',
                         'change [data-setting]':          'updateSetting',
                         'change [data-setting] input':    'updateSetting',
                         'change [data-setting] select':   'updateSetting',
@@ -4730 +4752 @@
                                 this.$bar.width( this.model.get('percent') + '%' );
                         }
                 },
+
+                setTouch: function() {
+                        this.isTouch = true;
+                },
+
                 /**
                  * @param {Object} event
                  */
@@ -4752 +4779 @@
                                 method = 'toggle';
                         }
 
+                        if ( this.isTouch ) {
+                                this.isTouch = false;
+                                method = 'add';
+                        }
+
                         this.toggleSelection({
                                 method: method
                         });
@@ -4800 +4832 @@
                                 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
@@ -5149 +5186 @@
 
                         this.initSortable();
 
-                        _.bindAll( this, 'css' );
+                        /*_.bindAll( this, 'css' );
                         this.model.on( 'change:edge change:gutter', this.css, this );
                         this._resizeCss = _.debounce( _.bind( this.css, this ), this.refreshSensitivity );
                         if ( this.options.resize ) {
@@ -5158 +5195 @@
 
                         // Call this.css() after this view has been rendered in the DOM so
                         // attachments get proper width applied.
-                        _.defer( this.css, this );
+                        _.defer( this.css, this );*/
                 },
 
                 dispose: function() {

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="#">Insert Media<!-- Change this dynamically. --><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>