Index: src/wp-includes/css/media-views.css =================================================================== --- src/wp-includes/css/media-views.css (revision 29213) +++ src/wp-includes/css/media-views.css (working copy) @@ -89,6 +89,10 @@ display: none; } +body.modal-open { + overflow: hidden; +} + /* Enable draggable on IE10 touch events until it's rolled into jQuery UI core */ .ui-sortable, .ui-draggable { @@ -145,7 +149,7 @@ right: 10px; width: 30px; height: 30px; - z-index: 1000; + z-index: 200; } .media-modal-close span.media-modal-icon { @@ -535,7 +539,7 @@ left: 200px; right: 0; height: 56px; - z-index: 200; + z-index: 199; } .media-frame-router { @@ -683,7 +687,7 @@ */ .attachments { margin: 0; - padding-right: 16px; + padding: 8px; -webkit-overflow-scrolling: touch; } @@ -705,16 +709,19 @@ } .attachment:focus { + outline: none; +} + +.attachment:focus .thumbnail { -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 .thumbnail { -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 3px #ccc; @@ -723,10 +730,8 @@ 0 0 0 3px #ccc; } -.attachment-preview { +.thumbnail { 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 ); @@ -740,7 +745,6 @@ .attachment .icon { margin: 0 auto; overflow: hidden; - padding-top: 20%; } .attachment .thumbnail { @@ -762,17 +766,6 @@ max-height: 98%; } -.media-frame-content .attachment-preview.type-audio .icon, -.media-frame-content .attachment-preview.type-video .icon { - z-index: 2; - background: #f1f1f1; - position: relative; - padding: 0; - top: 15%; - left: auto; - right: auto; -} - .attachment-preview.type-audio .filename, .attachment-preview.type-video .filename { z-index: 3; @@ -835,11 +828,6 @@ padding: 5px 10px; } -.attachment-preview .thumbnail { - width: 199px; - height: 199px; -} - .attachment .thumbnail img { position: absolute; } @@ -881,8 +869,8 @@ width: 24px; position: absolute; z-index: 10; - top: -6px; - right: -6px; + top: 0; + right: 0; outline: none; background: #eee; -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.4 ); @@ -904,8 +892,8 @@ display: block; } -.attachment.details, -.media-grid-view .selected.attachment { +.attachment.details .thumbnail, +.media-grid-view .selected .thumbnail { -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 5px #1e8cbe; box-shadow: 0 0 0 1px #fff, @@ -1464,7 +1452,6 @@ .media-selection .attachments { display: inline-block; height: 48px; - margin-top: 5px; overflow: hidden; vertical-align: top; } @@ -1473,6 +1460,10 @@ width: 50%; } +.wp-core-ui .show-image-details { + display: none; +} + .attachment.selection.selected { -webkit-box-shadow: none; box-shadow: none; @@ -1533,34 +1524,35 @@ margin-top: 14px; } -/** - * Attachment Details - */ -.attachment-details { - position: relative; - overflow: auto; -} - -.attachment-details .settings-save-status { +.media-sidebar .settings-save-status { + background: #f5f5f5; float: right; text-transform: none; z-index: 10; } -.attachment-details .settings-save-status .spinner { +.media-sidebar .settings-save-status .spinner { margin: 0 5px 0; } -.attachment-details .settings-save-status .saved { +.media-sidebar .settings-save-status .saved { float: right; display: none; } -.attachment-details.save-waiting .settings-save-status .spinner, -.attachment-details.save-complete .settings-save-status .saved { +.media-sidebar .save-waiting .settings-save-status .spinner, +.media-sidebar .save-complete .settings-save-status .saved { display: block; } +/** + * Attachment Details + */ +.attachment-details { + position: relative; + overflow: auto; +} + .attachment-info { overflow: hidden; min-height: 60px; @@ -1652,13 +1644,13 @@ display: block; } -.media-modal .delete-attachment, -.media-modal .trash-attachment { +.attachment-info .delete-attachment, +.attachment-info .trash-attachment { color: #bc0b0b; } -.media-modal .delete-attachment:hover, -.media-modal .trash-attachment:hover { +.attachment-info .delete-attachment:hover, +.attachment-info .trash-attachment:hover { color: red; } @@ -2249,10 +2241,6 @@ padding: 3px 6px; } - .media-frame-content .attachment .icon { - top: 40%; - } - .image-details .media-modal { left: 30px; right: 30px; @@ -2284,10 +2272,7 @@ min-width: 120px; } - .media-selection:after { - background: none; - } - + .media-selection:after, .media-selection .attachments { display: none; } @@ -2313,39 +2298,81 @@ } } +.switch-to-uploader, +.wp-core-ui .back-to-library { + display: none; +} + /* Responsive on portrait and landscape */ @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, + .media-selection .selection-info { display: none; } + .wp-core-ui .show-image-details { + display: inline-block; + margin-top: 14px; + } + .media-frame-menu { - width: auto; - bottom: auto; - right: 0; - height: 60px; + top: 30px; + left: 0; + z-index: inherit; } .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; + overflow: auto; + } + + .media-menu > a { + padding: 20px; + width: auto !important; + text-align: center; + font-size: 20px; } .media-frame-title { - display: none; + left: 0; + } + + .media-frame-title h1 { + display: inline-block; + cursor: pointer; + } + + .media-frame-title h1:after { + display: inline-block; + width: 54px; + height: 54px; + font: normal 20px/54px dashicons; + content: '\f140'; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + vertical-align: bottom; + z-index: 100; } .image-details .media-frame-title { @@ -2359,24 +2386,23 @@ bottom: 0px; left: 0; right: 0; - background: #FFF; - border-top: 1px solid #DEDEDE; + background: #fff; } .media-toolbar { position: relative; } + .media-toolbar .spinner { + margin-right: 6px; + } + .media-frame { overflow: hidden; } .attachments-browser .attachments { - top: 42px; - } - - .attachment-details h3 { - margin-top: 45px; + right: 0; } /* Shorten right-side links so they don't overlap the close button */ @@ -2389,10 +2415,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 { @@ -2400,36 +2439,56 @@ font-size: 18px; } - .media-frame-router { - top: 84px; - left: 0; - } - .media-frame-content { left: 0; - top: 118px; + top: 54px; } .image-details .media-frame.hide-router .media-frame-content { 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; } - .media-sidebar { - border-bottom: 1px solid #dddddd; + .media-sidebar.active { + right: 0; } .media-modal { width: auto; } - .media-toolbar-primary, .media-toolbar-secondary { + .media-toolbar-primary, + .media-toolbar-secondary { height: auto; } + .attachments-browser .media-toolbar-primary, + .attachments-browser .media-toolbar-secondary { + width: 50%; + } + + .media-frame .media-frame-content .media-toolbar .search, + .media-frame .media-frame-content .media-toolbar .attachment-filters { + max-width: 200px; + width: -webkit-calc(100% - 16px); + width: calc(100% - 16px); + margin: 11px 0 0 0; + height: 28px; + } + + .media-frame .media-frame-content .media-toolbar .search { + float: right; + } + .uploader-inline h3 { margin: 0 0 .8em 0; } @@ -2442,11 +2501,6 @@ margin: 0; } - .attachments-browser .attachments, .attachments-browser .uploader-inline { - position: relative; - margin-right: 180px; - } - /* Full-bleed modal */ .media-modal, .image-details .media-modal { @@ -2466,10 +2520,6 @@ max-width: 100%; } - .attachments-browser .media-toolbar-primary input.search { - max-width: 150px; - } - .uploader-inline-content { position: relative; } @@ -2505,28 +2555,78 @@ margin-top: 45px; } -} + /* Edit-selection mode */ + .close.media-modal-icon { + display: block; + height: 100%; + width: 100%; + margin: 0; + padding: 0; + position: absolute; + top: 0; + right: 0; + border: none; + -webkit-box-shadow: none; + box-shadow: none; + background: transparent; + } -/* Landscape specific header override */ -@media screen and (max-height: 400px) { - .media-menu { - padding: 0 0 0 10px; + .close.media-modal-icon:before { + font: normal 60px/1 dashicons; + content: "\f335"; + position: absolute; + top: 50%; + left: 50%; + margin: -30px; + color: #000; + text-shadow: 0px 0px 5px #fff; } - .media-menu a { - float: left; - width: 21%; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - padding: 10px inherit; + .close.media-modal-icon:hover:before { + color: #1e8cbe; + text-shadow: 0px 0px 5px #000; } - .media-menu a:nth-child(2), - .media-menu a:last-child { - width: 21%; + .switch-to-uploader { + display: list-item; + float: none; + top: 0; + } + + .switch-to-uploader .thumbnail { + border: 5px dashed #ddd; + -webkit-box-shadow: none; + box-shadow: none; + background: none; } + .switch-to-uploader .thumbnail:after { + -webkit-box-shadow: none; + box-shadow: none; + } + + .switch-to-uploader .thumbnail:before { + display: block; + height: 40px; + color: #ccc; + font: normal 40px/1 dashicons; + content: '\f132'; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + position: absolute; + padding-top: 50%; + top: -20px; + right: 0; + left: 0; + } + + .wp-core-ui .back-to-library { + display: inline-block; + } +} + +/* Landscape specific header override */ +@media screen and (max-height: 400px) { .media-modal-close { top: 2px; } @@ -2536,11 +2636,7 @@ } .media-frame-content { - top: 78px; - } - - .attachments-browser .attachments { - top: 2px; + top: 54px; } /* Prevent unnecessary scrolling on title input */ @@ -2572,9 +2668,103 @@ .media-frame .spinner { background-image: url(../images/spinner-2x.gif); - } + } +} + +.attachments-browser .attachment { + position: relative; + width: 33.3%; + margin: 0; +} + +.attachments-browser .attachment .attachment-preview { + position: relative; +} + +.attachments-browser .attachment .attachment-preview:before { + content: ''; + display: block; + padding-top: 100%; +} + +.attachments-browser .attachment .attachment-preview .thumbnail { + 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: 520px ) { + .attachments-browser .attachment:first-of-type { + margin-left: 33.3%; + } +} + +@media only screen and ( min-width: 520px ) and ( max-width: 640px ) { + .attachments-browser .attachment { + width: 25%; + } + + .attachments-browser .attachment:first-of-type { + margin-left: 25%; + } +} + +.media-grid-view .attachments-browser .attachment:first-of-type { + margin-left: 0; +} + +@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 @@ -2587,6 +2777,7 @@ } /* Regions we don't use at all */ +.media-grid-view .switch-to-uploader, .media-grid-view .media-frame-title, .media-grid-view .media-frame-toolbar, .media-grid-view .media-frame-menu { Index: src/wp-includes/js/media-views.js =================================================================== --- src/wp-includes/js/media-views.js (revision 29213) +++ 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 h1': 'toggleMenu' + }, + /** * @global wp.Uploader */ @@ -1840,6 +1844,12 @@ controller: this }); }, + + toggleMenu: function( event ) { + event.preventDefault(); + this.$el.find( '.media-menu' ).toggleClass( 'visible' ); + + }, /** * @param {Object} toolbar * @this wp.media.controller.Region @@ -3221,6 +3231,8 @@ }; } + $( 'body' ).addClass( 'modal-open' ); + $el.show().focus(); return this.propagate('open'); }, @@ -3236,6 +3248,8 @@ return this; } + $( 'body' ).removeClass( 'modal-open' ); + // Hide modal and remove restricted media modal tab focus once it's closed this.$el.hide().undelegate( 'keydown' ); @@ -3655,7 +3669,8 @@ template: media.template('uploader-inline'), events: { - 'click .close': 'hide' + 'click .close': 'hide', + 'click .back-to-library': 'back' }, initialize: function() { @@ -3758,8 +3773,11 @@ }, hide: function() { this.$el.addClass( 'hidden' ); + }, + back: function( event ) { + event.preventDefault(); + this.controller.content.mode( 'browse' ); } - }); /** @@ -4408,6 +4426,7 @@ click: function() { var state = this.options.state; + if ( state ) { this.controller.setState( state ); } @@ -4443,6 +4462,19 @@ property: 'state', ItemView: media.view.MenuItem, region: 'menu', + + events: { + 'click': '_hide' + }, + + 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 @@ -4524,6 +4556,10 @@ } view.$el.removeClass('hidden'); + }, + + _hide: function() { + this.$el.removeClass( 'visible' ); } }); @@ -4606,6 +4642,7 @@ tagName: 'li', className: 'attachment', template: media.template('attachment'), + isTouch: false, attributes: { tabIndex: 0, @@ -4614,6 +4651,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 +4768,11 @@ this.$bar.width( this.model.get('percent') + '%' ); } }, + + setTouch: function() { + this.isTouch = true; + }, + /** * @param {Object} event */ @@ -4752,6 +4795,11 @@ method = 'toggle'; } + if ( this.isTouch ) { + this.isTouch = false; + method = 'add'; + } + this.toggleSelection({ method: method }); @@ -4800,6 +4848,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 @@ -5110,10 +5163,9 @@ tabIndex: -1 }, - cssTemplate: media.template('attachments-css'), - events: { - 'scroll': 'scroll' + 'scroll': 'scroll', + 'click .switch-to-uploader': 'upload' }, initialize: function() { @@ -5123,8 +5175,7 @@ refreshSensitivity: 200, refreshThreshold: 3, AttachmentView: media.view.Attachment, - sortable: false, - resize: true + sortable: false }); this._viewsByCid = {}; @@ -5150,59 +5201,17 @@ this.scroll = _.chain( this.scroll ).bind( this ).throttle( this.options.refreshSensitivity ).value(); this.initSortable(); - - _.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 ) { - $(window).on( 'resize.attachments', this._resizeCss ); - } - - // Call this.css() after this view has been rendered in the DOM so - // attachments get proper width applied. - _.defer( this.css, this ); }, dispose: function() { this.collection.props.off( null, null, this ); - $(window).off( 'resize.attachments', this._resizeCss ); + /** * call 'dispose' directly on the parent class */ media.View.prototype.dispose.apply( this, arguments ); }, - css: function() { - var $css = $( '#' + this.el.id + '-css' ); - - if ( $css.length ) { - $css.remove(); - } - - media.view.Attachments.$head().append( this.cssTemplate({ - id: this.el.id, - edge: this.edge(), - gutter: this.model.get('gutter') - }) ); - }, - /** - * @returns {Number} - */ - edge: function() { - var edge = this.model.get('edge'), - gutter, width, columns; - - if ( ! this.$el.is(':visible') ) { - return edge; - } - - gutter = this.model.get('gutter') * 2; - width = this.$el.width() - gutter; - columns = Math.ceil( width / ( edge + gutter ) ); - edge = Math.floor( ( width - ( columns * gutter ) ) / columns ); - return edge; - }, - initSortable: function() { var collection = this.collection; @@ -5313,6 +5322,10 @@ // Trigger the scroll event to check if we're within the // threshold to query for additional attachments. this.scroll(); + + if ( ! this.$( '.switch-to-uploader' ).length ) { + this.$el.append( '' ); + } }, scroll: function() { @@ -5336,14 +5349,12 @@ toolbar.get('spinner').hide(); }); } + }, + + upload: function( event ) { + event.preventDefault(); + this.controller.content.mode( 'upload' ); } - }, { - $head: (function() { - var $head; - return function() { - return $head = $head || $('head'); - }; - }()) }); /** @@ -5775,8 +5786,6 @@ this.attachmentsNoResults.$el.html( l10n.noMedia ); this.views.add( this.attachmentsNoResults ); - - }, createSidebar: function() { @@ -5853,7 +5862,8 @@ events: { 'click .edit-selection': 'edit', - 'click .clear-selection': 'clear' + 'click .clear-selection': 'clear', + 'click .show-image-details': 'show' }, initialize: function() { @@ -5917,6 +5927,11 @@ new media.view.FocusManager({ el: this.el }).focus(); + }, + + show: function( event ) { + event.preventDefault(); + this.$el.parents( '.media-frame' ).find( '.media-sidebar' ).add( $( event.target ) ).toggleClass( 'active' ); } }); Index: src/wp-includes/media-template.php =================================================================== --- src/wp-includes/media-template.php (revision 29213) +++ src/wp-includes/media-template.php (working copy) @@ -219,6 +219,7 @@ /** This action is documented in wp-admin/includes/media.php */ do_action( 'post-upload-ui' ); ?> + @@ -398,24 +399,26 @@ - -