From f4e7b2a6ada10eab118b3833e6db09f30a02dbe3 Mon Sep 17 00:00:00 2001 From: Andrew Ozz Date: Fri, 8 Aug 2014 03:45:55 +0000 Subject: [PATCH] Media: improve the media modal at small screen sizes and make it usable on phones, first run. Part-props gcorne, see #27423. git-svn-id: https://develop.svn.wordpress.org/trunk@29446 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-includes/css/editor.css | 37 +-- src/wp-includes/css/media-views.css | 336 +++++++++++----------------- src/wp-includes/js/media-editor.js | 8 +- src/wp-includes/js/media-views.js | 97 ++++++-- 4 files changed, 232 insertions(+), 246 deletions(-) diff --git a/src/wp-includes/css/editor.css b/src/wp-includes/css/editor.css index 4f2661d0c8..72477cc7f0 100644 --- a/src/wp-includes/css/editor.css +++ b/src/wp-includes/css/editor.css @@ -176,12 +176,12 @@ div.mce-path { margin: 0; } -.mce-path, -.mce-path-item, -.mce-path .mce-divider { - font-size: 12px; - line-height: 18px; -} +.mce-path, +.mce-path-item, +.mce-path .mce-divider { + font-size: 12px; + line-height: 18px; +} .mce-toolbar .mce-btn, .qt-fullscreen { @@ -934,32 +934,41 @@ i.mce-i-hr:before { position: absolute; top: 0; right: 0; - margin-top: 5px; - margin-right: 5px; + margin: 5px 5px 0 0; } @media screen and ( max-width: 782px ) { .mce-toolbar .mce-btn button, .qt-fullscreen { - padding: 7px 8px; + padding: 6px 7px; + } + + #wp-fullscreen-buttons .mce-btn, + .mce-toolbar .mce-btn-group .mce-btn { + margin: 1px; } .qt-fullscreen { - width: 38px; + width: 36px; height: 34px; } + .mce-toolbar .mce-btn-group .mce-btn.mce-wp-fullscreen { + margin: 4px 4px 0 0; + } + .mce-toolbar .mce-colorbutton .mce-preview { - margin-left: -21px; + left: 8px; + bottom: 6px; } .mce-window .mce-btn { padding: 2px 0; } - div.mce-toolbar-grp, - .quicktags-toolbar { - padding-right: 46px; + .has-dfw div.mce-toolbar-grp .mce-toolbar.mce-first, + .has-dfw .quicktags-toolbar { + padding-right: 40px; } } diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css index 5a671e3688..09e7ecf2e8 100644 --- a/src/wp-includes/css/media-views.css +++ b/src/wp-includes/css/media-views.css @@ -16,7 +16,6 @@ .media-frame input, .media-frame textarea { padding: 6px 8px; - line-height: 16px; } .media-frame select, @@ -144,7 +143,7 @@ top: 0; right: 0; width: 50px; - height: 48px; + height: 50px; z-index: 1000; color: #777; -webkit-transition: color .1s ease-in-out, background .1s ease-in-out; @@ -631,6 +630,10 @@ box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 ); } +.media-frame-title .dashicons { + display: none; +} + .media-frame-title h1 { padding: 0 16px; font-size: 22px; @@ -694,7 +697,6 @@ .media-frame .search { margin-top: 11px; padding: 4px; - line-height: 18px; font-size: 13px; color: #464646; font-family: "Open Sans", sans-serif; @@ -730,7 +732,7 @@ -moz-user-select: none; -ms-user-select: none; user-select: none; - width: 20%; + width: 25%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; @@ -1790,11 +1792,16 @@ padding: 0; } +.image-details .embed-media-settings, +.image-details .embed-media-settings div { + box-sizing: border-box; +} + .image-details .column-settings { background: #f3f3f3; border-right: 1px solid #ddd; min-height: 100%; - width: 52%; + width: 55%; position: absolute; top: 0; left: 0; @@ -1807,9 +1814,9 @@ } .image-details .column-image { - width: 48%; + width: 45%; position: absolute; - left: 52%; + left: 55%; top: 0; } @@ -2125,10 +2132,10 @@ font-family: Arial, sans-serif; } -@media only screen and (max-width: 960px) { +@media only screen and (max-width: 940px) { .media-frame-content .media-toolbar-primary .search, .media-frame-content .media-toolbar-secondary .attachment-filters { - max-width: 120px; + max-width: 134px; } } @@ -2136,30 +2143,72 @@ * Responsive layout */ @media only screen and (max-width: 900px) { - .media-frame-menu { - width: 139px; - } - - .media-menu > a { - padding: 4px 5px; - } + /* Drop-down menu */ .media-frame-title, .media-frame-router, .media-frame-content, .media-frame-toolbar { - left: 140px; + left: 0; } + .media-frame-menu { + position: static; + width: 0; + } + + .media-menu { + display: none; + } + + .media-menu.visible { + z-index: 2000; + display: block; + position: fixed; + top: 30px; + left: 30px; + right: 30px; + bottom: 30px; + width: 250px; + max-width: 100%; + overflow: auto; + } + + .media-menu > a { + padding: 10px 20px; + font-size: 16px; + } + + .media-frame-title { + left: 0; + color: #21759b; + } + + .media-frame-title .dashicons { + display: inline-block; + line-height: 56px; + } + + .media-frame-title h1 { + line-height: 3; + font-size: 18px; + float: left; + cursor: pointer; + } + /* End drop-down menu */ + .media-sidebar { - width: 159px; - padding: 0 10px 24px; + width: 230px; } .attachments-browser .attachments, .attachments-browser .uploader-inline, .attachments-browser .media-toolbar { - right: 180px; + right: 262px; + } + + .media-sidebar .setting { + margin: 6px 0px; } .media-sidebar .setting input, @@ -2172,12 +2221,16 @@ .media-sidebar .setting span, .compat-item label span { text-align: inherit; - display: block; min-height: 16px; margin: 0; padding: 8px 2px 0; } + .media-sidebar .setting .value { + float: none; + width: auto; + } + .media-sidebar .setting input[type="text"], .media-sidebar .setting input[type="password"], .media-sidebar .setting input[type="email"], @@ -2189,6 +2242,7 @@ .media-sidebar .setting select { width: 98%; max-width: none; + height: auto; } .media-sidebar .setting select.columns { @@ -2201,6 +2255,15 @@ padding: 3px 6px; } + .image-details .column-image { + width: 30%; + left: 70%; + } + + .image-details .column-settings { + width: 70%; + } + .image-details .media-modal { left: 30px; right: 30px; @@ -2244,8 +2307,26 @@ margin: 12px 10px; } - .media-modal-close { - right: 10px; + .media-modal .attachments-browser .media-toolbar-primary, + .media-modal .attachments-browser .media-toolbar-secondary { + width: 50%; + } + + .media-modal .attachments-browser .media-toolbar .search { + max-width: 100%; + height: auto; + float: right; + } + + .media-modal .attachments-browser .media-toolbar .attachment-filters { + margin: 11px 0 0; + height: auto; + max-width: 65%; + max-width: calc(100% - 38px); + } + + .media-modal .attachments-browser .media-toolbar .spinner { + margin: 14px 8px 0; } /* Text inputs need to be 16px, or they force zooming on iOS */ @@ -2263,142 +2344,10 @@ /* 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 { - display: none; - } - - .media-frame-menu { - width: auto; - bottom: auto; - right: 0; - height: 60px; - } - - .media-menu { - border-right: none; - position: relative; - border-bottom: 1px solid #dddddd; - overflow: hidden; - padding: 10px 0 10px 10px; - } - - .media-menu a { - float: left; - width: 42%; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - - .media-frame-title { - display: none; - } - - .image-details .media-frame-title { - display: block; - top: 0; - font-size: 14px; - } - - .media-frame-toolbar { - position: absolute; - bottom: 0px; - left: 0; - right: 0; - background: #FFF; - border-top: 1px solid #DEDEDE; - } - - .media-toolbar { - position: relative; - } - - .media-frame { - overflow: hidden; - } - - .attachments-browser .attachments { - top: 42px; - } - - .attachment-details h3 { - margin-top: 45px; - } - - /* Shorten right-side links so they don't overlap the close button */ - .media-menu a:nth-child(2), - .media-menu a:last-child { - width: 40%; - } - - .media-menu .separator { - display: none; - } - - .media-frame-title { - top: 72px; - left: auto; - height: auto; - } - - .media-frame-title h1 { - line-height: 3; - font-size: 18px; - } - - .media-frame-router { - top: 84px; - left: 0; - } - - .media-frame-content { - left: 0; - top: 118px; - } - - .image-details .media-frame.hide-router .media-frame-content { - top: 40px; - } - - .media-frame .attachments-browser { - padding-bottom: 300px; - } - - .media-sidebar { - border-bottom: 1px solid #dddddd; - } - - .media-modal { - width: auto; - } - - .media-toolbar-primary, .media-toolbar-secondary { - height: auto; - } - - .uploader-inline-content { - top: auto; - } - - .uploader-inline-content .upload-ui { - margin: 1em 0; - } - - .uploader-inline-content .post-upload-ui { - margin-bottom: 1em; - } - - .attachments-browser .attachments, - .attachments-browser .uploader-inline { - position: relative; - margin-right: 180px; - } - /* Full-bleed modal */ .media-modal, - .image-details .media-modal { + .image-details .media-modal, + .media-menu.visible { position: fixed; top: 0; left: 0; @@ -2410,69 +2359,34 @@ position: fixed; } - .attachments-browser .attachment, - .attachments-browser .attachment-preview { - max-width: 100%; + .media-sidebar { + display: none; } - .attachments-browser .media-toolbar-primary input.search { - max-width: 150px; - } - - .uploader-inline-content { - position: relative; - } - - /* Image From Link */ - .embed-link-settings, - .embed-media-settings { - padding-bottom: 52px; - } - - .image-details .column-settings, - .image-details .column-image { - position: relative; - padding: 10px 0 20px 0; - left: 0; - width: 100%; - min-height: inherit; + .attachments-browser .attachments, + .attachments-browser .uploader-inline, + .attachments-browser .media-toolbar { + right: 0; } - /* Gallery */ - .media-frame.hide-router .media-frame-content { - top: 73px; - border-top: none; + + .image-details .media-frame-title { + display: block; + top: 0; + font-size: 14px; } - .collection-settings h3 { - margin-top: 45px; + /* Media tabs on the top */ + .media-frame-content .media-toolbar .instructions { + display: none; } - } /* Landscape specific header override */ @media screen and (max-height: 400px) { .media-menu { - padding: 0 0 0 10px; - } - - .media-menu a { - float: left; - width: 21%; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - padding: 10px inherit; - } - - .media-menu a:nth-child(2), - .media-menu a:last-child { - width: 21%; - } - - .media-modal-close { - top: 2px; + padding: 0; } .media-frame-router { @@ -2484,7 +2398,7 @@ } .attachments-browser .attachments { - top: 2px; + top: 40px; } /* Prevent unnecessary scrolling on title input */ @@ -2493,10 +2407,10 @@ } } -@media only screen and (max-width: 680px) { +@media only screen and (max-width: 480px) { .media-frame-content .media-toolbar .search, .media-frame-content .media-toolbar .attachment-filters { - max-width: 85px; + max-width: 90px; } } @@ -2884,7 +2798,7 @@ margin: 20px 0; position: static; width: 100%; - max-width: none !important; + max-width: 280px; } } diff --git a/src/wp-includes/js/media-editor.js b/src/wp-includes/js/media-editor.js index f0063aaf55..5a69612f2a 100644 --- a/src/wp-includes/js/media-editor.js +++ b/src/wp-includes/js/media-editor.js @@ -1048,16 +1048,20 @@ * @returns {wp.media.view.MediaFrame} */ open: function( id, options ) { - var workflow, focusTrap; + var workflow, focusTrap, scrollTop; if ( 'ontouchend' in document ) { // Close the onscreen keyboard if ( ! focusTrap ) { - focusTrap = $( '' ); + focusTrap = $( '' ); } + // Keep the scroll position + scrollTop = $( window ).scrollTop(); + $( document.body ).append( focusTrap ); focusTrap.focus().blur().remove(); + $( window ).scrollTop( scrollTop ); } options = options || {}; diff --git a/src/wp-includes/js/media-views.js b/src/wp-includes/js/media-views.js index a1045685e1..8395b23dc9 100644 --- a/src/wp-includes/js/media-views.js +++ b/src/wp-includes/js/media-views.js @@ -1,6 +1,8 @@ /* global _wpMediaViewsL10n, confirm, getUserSetting, setUserSetting */ -(function($, _){ - var media = wp.media, l10n; +( function( $, _ ) { + var l10n, + media = wp.media, + isTouchDevice = ( 'ontouchend' in document ); // Link any localized strings. l10n = media.view.l10n = typeof _wpMediaViewsL10n === 'undefined' ? {} : _wpMediaViewsL10n; @@ -1834,6 +1836,10 @@ template: media.template('media-frame'), regions: ['menu','title','content','toolbar','router'], + events: { + 'click div.media-frame-title h1': 'toggleMenu' + }, + /** * @global wp.Uploader */ @@ -1883,6 +1889,10 @@ this.on( 'title:create:default', this.createTitle, this ); this.title.mode('default'); + this.on( 'title:render', function( view ) { + view.$el.append( '' ); + }); + // Bind default menu. this.on( 'menu:create:default', this.createMenu, this ); }, @@ -1918,6 +1928,11 @@ controller: this }); }, + + toggleMenu: function() { + this.$el.find( '.media-menu' ).toggleClass( 'visible' ); + }, + /** * @param {Object} toolbar * @this wp.media.controller.Region @@ -2555,7 +2570,10 @@ }).render(); this.content.set( view ); - view.url.focus(); + + if ( ! isTouchDevice ) { + view.url.focus(); + } }, editSelectionContent: function() { @@ -4412,13 +4430,17 @@ // When selecting a tab along the left side, // focus should be transferred into the main panel - $('.media-frame-content input').first().focus(); + if ( ! isTouchDevice ) { + $('.media-frame-content input').first().focus(); + } }, click: function() { var state = this.options.state; + if ( state ) { this.controller.setState( state ); + this.views.parent.$el.removeClass( 'visible' ); // TODO: or hide on any click, see below } }, /** @@ -4452,6 +4474,17 @@ property: 'state', ItemView: media.view.MenuItem, region: 'menu', + + /* TODO: alternatively hide on any click anywhere + events: { + 'click': 'click' + }, + + click: function() { + this.$el.removeClass( 'visible' ); + }, + */ + /** * @param {Object} options * @param {string} id @@ -4615,6 +4648,7 @@ tagName: 'li', className: 'attachment', template: media.template('attachment'), + _isTouch: false, attributes: { tabIndex: 0, @@ -4623,6 +4657,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', @@ -4747,6 +4782,11 @@ this.$bar.width( this.model.get('percent') + '%' ); } }, + + setTouch: function() { + this._isTouch = true; + }, + /** * @param {Object} event */ @@ -4785,6 +4825,11 @@ method = 'toggle'; } + if ( this._isTouch ) { + this._isTouch = false; + method = 'add'; + } + this.toggleSelection({ method: method }); @@ -4878,7 +4923,9 @@ selection.single( model ); // When selecting attachments, focus should be transferred to the right details panel - $('.attachment-details input').first().focus(); + if ( ! isTouchDevice ) { + $('.attachment-details input').first().focus(); + } return; @@ -4888,11 +4935,15 @@ selection[ this.selected() ? 'remove' : 'add' ]( model ); selection.single( model ); - if ( this.selected() ) { + if ( ! isTouchDevice && this.selected() ) { // When selecting an attachment, focus should be transferred to the right details panel $('.attachment-details input').first().focus(); } + return; + } else if ( 'add' === method ) { + selection.add( model ); + selection.single( model ); return; } @@ -4948,7 +4999,9 @@ .find( '.check' ).attr( 'tabindex', '0' ); // When selecting an attachment, focus should be transferred to the right details panel - $('.attachment-details input').first().focus(); + if ( ! isTouchDevice ) { + $('.attachment-details input').first().focus(); + } }, /** * @param {Backbone.Model} model @@ -5215,12 +5268,12 @@ this.el.id = _.uniqueId('__attachments-view-'); _.defaults( this.options, { - refreshSensitivity: 200, + refreshSensitivity: isTouchDevice ? 300 : 200, refreshThreshold: 3, AttachmentView: media.view.Attachment, sortable: false, resize: true, - idealColumnWidth: 150 + idealColumnWidth: $( window ).width() < 640 ? 135 : 150 }); this._viewsByCid = {}; @@ -5253,7 +5306,8 @@ _.bindAll( this, 'setColumns' ); if ( this.options.resize ) { - $( window ).on( 'resize.attachments', this.setColumns ); + $( window ).on( 'resize.media-modal-columns', this.setColumns ); + this.controller.on( 'open', this.setColumns ); } // Call this.setColumns() after this view has been rendered in the DOM so @@ -5263,7 +5317,7 @@ dispose: function() { this.collection.props.off( null, null, this ); - $( window ).off( 'resize.attachments', this.setColumns ); + $( window ).off( 'resize.media-modal-columns' ); /** * call 'dispose' directly on the parent class @@ -5272,19 +5326,22 @@ }, setColumns: function() { - var prev = this.columns; + var prev = this.columns, + width = this.$el.width(); - this.columns = Math.round( this.$el.width() / this.options.idealColumnWidth ); + if ( width ) { + this.columns = Math.round( width / this.options.idealColumnWidth ) || 1; - if ( prev !== this.columns ) { - this.$el.attr( 'data-columns', this.columns ); + if ( ! prev || prev !== this.columns ) { + this.$el.attr( 'data-columns', this.columns ); + } } }, initSortable: function() { var collection = this.collection; - if ( ! this.options.sortable || ! $.fn.sortable ) { + if ( isTouchDevice || ! this.options.sortable || ! $.fn.sortable ) { return; } @@ -5347,7 +5404,7 @@ }, refreshSortable: function() { - if ( ! this.options.sortable || ! $.fn.sortable ) { + if ( isTouchDevice || ! this.options.sortable || ! $.fn.sortable ) { return; } @@ -6273,7 +6330,7 @@ $input.removeClass( 'hidden' ); // If the input is visible, focus and select its contents. - if ( $input.is(':visible') ) { + if ( ! isTouchDevice && $input.is(':visible') ) { $input.focus()[0].select(); } } @@ -6633,7 +6690,9 @@ }, ready: function() { - this.focus(); + if ( ! isTouchDevice ) { + this.focus(); + } }, url: function( event ) {