Index: src/wp-includes/css/media-views.css =================================================================== --- src/wp-includes/css/media-views.css (revision 29195) +++ src/wp-includes/css/media-views.css (working copy) @@ -529,6 +529,21 @@ 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,7 +698,7 @@ */ .attachments { margin: 0; - padding-right: 16px; + padding: 8px; -webkit-overflow-scrolling: touch; } @@ -705,6 +720,10 @@ } .attachment:focus { + outline: none; +} + +.attachment:focus .attachment-preview { -webkit-box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 2px #5b9dd9; @@ -711,10 +730,9 @@ 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,8 +743,6 @@ .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,7 +920,7 @@ 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,7 +1472,6 @@ .media-selection .attachments { display: inline-block; height: 48px; - margin-top: 5px; overflow: hidden; vertical-align: top; } @@ -2310,33 +2325,69 @@ @media only screen and (max-width: 640px), screen and (max-height: 400px) { /* Media tabs on the top */ - .media-frame-content .media-toolbar .instructions { + .media-frame-content .media-toolbar .instructions, + .media-frame-router { display: none; } .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; + font-size: 22px; + font-weight: 600; + color: #444; + transition: color .1s ease-in; + } + + .media-frame .media-frame-menu-toggle:after { + display: inline-block; + width: 20px; + height: 20px; + font: normal 20px/1 dashicons; + content: "\f140"; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + + .media-frame .media-frame-menu-toggle:hover, + .media-frame .media-frame-menu-toggle:focus { + color: #21759b; + } + .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 { display: none; } @@ -2347,13 +2398,16 @@ font-size: 14px; } + .image-details .media-frame-menu-toggle { + display: none; + } + .media-frame-toolbar { position: absolute; bottom: 0px; left: 0; right: 0; - background: #FFF; - border-top: 1px solid #DEDEDE; + background: #fff; } .media-toolbar { @@ -2364,12 +2418,13 @@ overflow: hidden; } - .attachments-browser .attachments { - top: 42px; + .media-frame .attachments-browser { + overflow: auto; } - .attachment-details h3 { - margin-top: 45px; + .attachments-browser .attachments { + top: 0; + right: 0; } /* Shorten right-side links so they don't overlap the close button */ @@ -2382,10 +2437,23 @@ display: none; } - .media-frame-title { + .attachment-details { + padding: 0 20px; + } + + .attachment-display-settings { + padding: 0 20px 20px 20px; + width: -webkit-calc(100% - 40px); + width: calc(100% - 40px); + } + + .attachment-info .thumbnail img { + max-width: 100%; /* Display the image bigger, since the screen's smaller. */ + max-height: 50%; + } + + .image-details .media-frame-title { top: 72px; - left: auto; - height: auto; } .media-frame-title h1 { @@ -2394,13 +2462,12 @@ } .media-frame-router { - top: 84px; left: 0; } .media-frame-content { left: 0; - top: 118px; + top: 48px; } .image-details .media-frame.hide-router .media-frame-content { @@ -2407,12 +2474,19 @@ top: 40px; } - .media-frame .attachments-browser { - padding-bottom: 300px; + .media-sidebar { + position: fixed; + top: 0; + right: -100%; + width: 100%; + padding: 0; + margin: 0 0 62px 0; + z-index: 201; + transition: .18s right ease-in-out; } - .media-sidebar { - border-bottom: 1px solid #dddddd; + .media-sidebar.active { + right: 0; } .media-modal { @@ -2419,7 +2493,8 @@ width: auto; } - .media-toolbar-primary, .media-toolbar-secondary { + .media-toolbar-primary, + .media-toolbar-secondary { height: auto; } @@ -2435,9 +2510,10 @@ margin: 0; } - .attachments-browser .attachments, .attachments-browser .uploader-inline { + .attachments-browser .attachments, + .attachments-browser .uploader-inline { position: relative; - margin-right: 180px; + margin-right: 0; } /* Full-bleed modal */ @@ -2565,10 +2641,100 @@ .media-frame .spinner { background-image: url(../images/spinner-2x.gif); - } + } } +.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; +} + +@media only screen and ( max-width: 400px ) { + .attachments-browser .attachment { + width: 50%; + } +} + +@media only screen and ( min-width: 400px ) { + .attachments-browser .attachment { + width: 33.3%; + } +} + +@media only screen and ( min-width: 520px ) { + .attachments-browser .attachment { + width: 25%; + } +} + +@media only screen and ( min-width: 640px ) { + .attachments-browser .attachment { + width: 33.3%; + } +} + +@media only screen and ( min-width: 960px ) { + .attachments-browser .attachment { + width: 25%; + } +} + +@media only screen and ( min-width: 1200px ) { + .attachments-browser .attachment { + width: 20%; + } +} + /** * Media Grid */ Index: src/wp-includes/js/media-views.js =================================================================== --- src/wp-includes/js/media-views.js (revision 29195) +++ src/wp-includes/js/media-views.js (working copy) @@ -1747,6 +1747,10 @@ template: media.template('media-frame'), regions: ['menu','title','content','toolbar','router'], + events: { + 'click a.media-frame-menu-toggle': 'toggleMenu' + }, + /** * @global wp.Uploader */ @@ -1840,6 +1844,13 @@ 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,14 +4440,14 @@ }); /** - * 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', @@ -4443,6 +4454,15 @@ 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,6 +4626,7 @@ tagName: 'li', className: 'attachment', template: media.template('attachment'), + isTouch: false, attributes: { tabIndex: 0, @@ -4614,6 +4635,7 @@ 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,6 +4752,11 @@ this.$bar.width( this.model.get('percent') + '%' ); } }, + + setTouch: function() { + this.isTouch = true; + }, + /** * @param {Object} event */ @@ -4752,6 +4779,11 @@ method = 'toggle'; } + if ( this.isTouch ) { + this.isTouch = false; + method = 'add'; + } + this.toggleSelection({ method: method }); @@ -4800,6 +4832,11 @@ 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,7 +5186,7 @@ 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,7 +5195,7 @@ // 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() { Index: src/wp-includes/media-template.php =================================================================== --- src/wp-includes/media-template.php (revision 29195) +++ src/wp-includes/media-template.php (working copy) @@ -130,6 +130,7 @@