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 ) {