Index: src/wp-includes/css/media-views.css =================================================================== --- src/wp-includes/css/media-views.css (revision 29204) +++ src/wp-includes/css/media-views.css (working copy) @@ -89,6 +89,10 @@ display: none; } +body.in-modal { + overflow: hidden; +} + /* Enable draggable on IE10 touch events until it's rolled into jQuery UI core */ .ui-sortable, .ui-draggable { @@ -529,6 +533,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 +702,7 @@ */ .attachments { margin: 0; - padding-right: 16px; + padding: 8px; -webkit-overflow-scrolling: touch; } @@ -705,6 +724,10 @@ } .attachment:focus { + outline: none; +} + +.attachment:focus .attachment-preview { -webkit-box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 2px #5b9dd9; @@ -711,10 +734,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 +747,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 +924,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 +1476,6 @@ .media-selection .attachments { display: inline-block; height: 48px; - margin-top: 5px; overflow: hidden; vertical-align: top; } @@ -1525,34 +1544,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; @@ -1644,13 +1664,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; } @@ -2309,33 +2329,70 @@ @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; + padding: 12px 16px; + 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: #2ea2cc; + } + .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; } @@ -2346,13 +2403,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 { @@ -2359,16 +2419,21 @@ position: relative; } + .media-toolbar .spinner { + margin-right: 6px; + } + .media-frame { 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 */ @@ -2381,10 +2446,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 { @@ -2393,13 +2471,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 { @@ -2406,12 +2483,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 { @@ -2418,10 +2502,25 @@ 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% - 32px); + width: calc(100% - 32px); + margin: 11px 0 0 0; + height: 28px; + } + .uploader-inline h3 { margin: 0 0 .8em 0; } @@ -2434,9 +2533,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 */ @@ -2458,10 +2558,6 @@ max-width: 100%; } - .attachments-browser .media-toolbar-primary input.search { - max-width: 150px; - } - .uploader-inline-content { position: relative; } @@ -2497,6 +2593,37 @@ 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; + } + + .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; + } + + .close.media-modal-icon:hover:before { + color: #1e8cbe; + text-shadow: 0px 0px 5px #000; + } } /* Landscape specific header override */ @@ -2564,10 +2691,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 */ @@ -2669,59 +2886,19 @@ * * This should be OOCSS'd so both use a shared selector. */ -.edit-attachment-frame .edit-media-header { - overflow: hidden; -} - -.upload-php .media-modal-close .media-modal-icon:before { - content: '\f335'; - font-size: 30px; -} - -.upload-php .media-modal-close:hover .media-modal-icon:before, -.upload-php .media-modal-close:focus .media-modal-icon:before { - color: #fff; -} - -.upload-php .media-modal-close .media-modal-icon { - margin-top: 13px; - width: 30px; - height: 30px; -} - -.upload-php .media-modal-close, .edit-attachment-frame .edit-media-header .left, .edit-attachment-frame .edit-media-header .right { cursor: pointer; color: #777; background-color: transparent; - height: 56px; - width: 56px; - padding: 0; - position: absolute; + height: 48px; + width: 54px; + float: left; text-align: center; border: 0; - border-left: 1px solid #ddd; + border-right: 1px solid #ddd; } -.upload-php .media-modal-close { - top: 0; - right: 0; -} - -.edit-attachment-frame .edit-media-header .left { - right: 112px; -} - -.edit-attachment-frame .edit-media-header .right { - right: 56px; -} - -.edit-attachment-frame .media-frame-title { - left: 0; - right: 170px; /* leave space for prev/next/close */ -} - .edit-attachment-frame .edit-media-header .right:before, .edit-attachment-frame .edit-media-header .left:before { font: normal 20px/50px 'dashicons' !important; @@ -2750,10 +2927,10 @@ cursor: inherit; } -.upload-php .media-modal-close:hover, +.edit-attachment-frame .edit-media-header .close:hover, .edit-attachment-frame .edit-media-header .right:hover, .edit-attachment-frame .edit-media-header .left:hover, -.upload-php .media-modal-close:focus, +.edit-attachment-frame .edit-media-header .close:focus, .edit-attachment-frame .edit-media-header .right:focus, .edit-attachment-frame .edit-media-header .left:focus { background: #0074a2; @@ -2768,7 +2945,6 @@ .edit-attachment-frame .media-frame-content { border-bottom: none; bottom: 0; - top: 56px; } /* Hiding this for the moment instead of removing it from the template. */ @@ -2783,34 +2959,44 @@ bottom: 0; right: 0; left: 0; - -webkit-box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1); - box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1); } -.edit-attachment-frame .attachment-media-view { - float: left; - width: 65%; - height: 100%; + +.edit-attachment-frame .attachment-info { + border-bottom: 0; + border-right: 1px solid #ddd; + bottom: 0; + position: absolute; + top: 0; + left: 0; + right: 50%; + margin-bottom: 0; + padding: 2% 4% 0; + height: 98%; /* 100% - padding percentage above */ } -.edit-attachment-frame .attachment-media-view .thumbnail { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - padding: 16px; - height: 100%; +.edit-attachment-frame .attachment-info .thumbnail { + float: none; + max-width: none; + max-height: 70%; + margin-right: 0; } -.edit-attachment-frame .attachment-media-view img { - display: block; - margin-bottom: 16px; +.edit-attachment-frame .attachment-info .thumbnail-image img { + margin: 0; +} + +.edit-attachment-frame .attachment-info .thumbnail-image:after { + -webkit-box-shadow: none; + box-shadow: none; +} + +.edit-attachment-frame .attachment-info .thumbnail img { max-width: 100%; - max-height: -webkit-calc( 100% - 42px ); - max-height: calc( 100% - 42px ); /* leave space for actions underneath */ + max-height: 100%; } -.edit-attachment-frame .delete-attachment { - float: right; - margin-top: 7px; +.edit-attachment-frame .attachment-info .details { + float: none; } .edit-attachment-frame .wp-media-wrapper { @@ -2817,32 +3003,16 @@ margin-bottom: 12px; } -.edit-attachment-frame .attachment-info { - overflow: auto; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - margin-bottom: 0; - padding: 12px 16px 0; - width: 35%; - height: 100%; - -webkit-box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1); - box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1); - border-bottom: 0; - border-left: 1px solid #ddd; - background: #f3f3f3; +.edit-attachment-frame .attachment-fields { + bottom: 0; + padding: 2% 4%; + position: absolute; + top: 0; + left: 50%; + right: 0; } -.edit-attachment-frame .attachment-info .details, -.edit-attachment-frame .attachment-info .settings { - overflow: hidden; - float: none; - margin-bottom: 15px; - padding-bottom: 15px; - border-bottom: 1px solid #ddd; -} - -.edit-attachment-frame .attachment-info .setting { +.edit-attachment-frame .attachment-fields .setting { display: block; float: left; width: 100%; @@ -2849,15 +3019,15 @@ margin: 1px 0; } -.edit-attachment-frame .attachment-info .setting label { +.edit-attachment-frame .attachment-fields .setting label { display: block; } -.edit-attachment-frame .attachment-info .setting .link-to-custom { +.edit-attachment-frame .attachment-fields .setting .link-to-custom { margin: 3px 0; } -.edit-attachment-frame .attachment-info .setting .name { +.edit-attachment-frame .attachment-fields .setting .name { min-width: 30%; margin-right: 4%; font-size: 12px; @@ -2864,12 +3034,12 @@ text-align: right; } -.edit-attachment-frame .attachment-info .setting select { +.edit-attachment-frame .attachment-fields .setting select { max-width: 65%; } -.edit-attachment-frame .attachment-info .setting input[type="checkbox"], -.edit-attachment-frame .attachment-info .field input[type="checkbox"] { +.edit-attachment-frame .attachment-fields .setting input[type="checkbox"], +.edit-attachment-frame .attachment-fields .field input[type="checkbox"] { width: 16px; float: none; margin: 8px 3px 0; @@ -2876,7 +3046,7 @@ padding: 0; } -.edit-attachment-frame .attachment-info .setting span { +.edit-attachment-frame .attachment-fields .setting span { float: left; min-height: 22px; padding-top: 8px; @@ -2885,14 +3055,14 @@ color: #666; } -.edit-attachment-frame .attachment-info .setting input[type="text"], -.edit-attachment-frame .attachment-info .setting input[type="password"], -.edit-attachment-frame .attachment-info .setting input[type="number"], -.edit-attachment-frame .attachment-info .setting input[type="search"], -.edit-attachment-frame .attachment-info .setting input[type="email"], -.edit-attachment-frame .attachment-info .setting input[type="url"], -.edit-attachment-frame .attachment-info .setting textarea, -.edit-attachment-frame .attachment-info .setting .value { +.edit-attachment-frame .attachment-fields .setting input[type="text"], +.edit-attachment-frame .attachment-fields .setting input[type="password"], +.edit-attachment-frame .attachment-fields .setting input[type="number"], +.edit-attachment-frame .attachment-fields .setting input[type="search"], +.edit-attachment-frame .attachment-fields .setting input[type="email"], +.edit-attachment-frame .attachment-fields .setting input[type="url"], +.edit-attachment-frame .attachment-fields .setting textarea, +.edit-attachment-frame .attachment-fields .setting .value { margin: 1px; width: 65%; float: right; @@ -2902,12 +3072,12 @@ box-sizing: border-box; } -.edit-attachment-frame .attachment-info .setting textarea { +.edit-attachment-frame .attachment-fields .setting textarea { height: 62px; resize: vertical; } -.edit-attachment-frame .attachment-info select { +.edit-attachment-frame .attachment-fields select { margin-top: 3px; } Index: src/wp-includes/js/media-views.js =================================================================== --- src/wp-includes/js/media-views.js (revision 29204) +++ 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 @@ -3221,6 +3232,7 @@ }; } + $( 'body' ).addClass( 'in-modal' ); $el.show().focus(); return this.propagate('open'); }, @@ -3236,6 +3248,8 @@ return this; } + $( 'body' ).removeClass( 'in-modal' ); + // Hide modal and remove restricted media modal tab focus once it's closed this.$el.hide().undelegate( 'keydown' ); @@ -4429,14 +4443,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 +4457,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 +4629,7 @@ tagName: 'li', className: 'attachment', template: media.template('attachment'), + isTouch: false, attributes: { tabIndex: 0, @@ -4614,6 +4638,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 +4755,11 @@ this.$bar.width( this.model.get('percent') + '%' ); } }, + + setTouch: function() { + this.isTouch = true; + }, + /** * @param {Object} event */ @@ -4752,6 +4782,11 @@ method = 'toggle'; } + if ( this.isTouch ) { + this.isTouch = false; + method = 'add'; + } + this.toggleSelection({ method: method }); @@ -4800,6 +4835,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 +5189,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 +5198,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 29204) +++ src/wp-includes/media-template.php (working copy) @@ -130,6 +130,7 @@