Administration: Thickbox: Fix conflicts with the Plugin details and native Thickbox modals.
The Plugin details modal custom implementation in the Plugins page conflicts with other Thickbox instances added by plugins. Thickbox shows its age and has been modified over time to suit core needs. However, WordPress should do its best to not create conflicts with the native Thickbox styles and functionalities. Plugin authors should be able to use `add_thickbox()` in any admin page as documented, without having to worry about potential errors. - fixes a JavaScript error when closing a native Thickbox modal in the Plugins page - avoids to override the native Thickbox modal styles - uses a CSS class to target the Plugin details modal and remove a pile of overqualified CSS selectors Fixes #41417. Built from https://develop.svn.wordpress.org/trunk@41356 git-svn-id: http://core.svn.wordpress.org/trunk@41189 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrea Fercia
parent
3d6c0dc45a
commit
a4ae97437b
|
|
@ -2864,33 +2864,12 @@ div.action-links {
|
|||
}
|
||||
}
|
||||
|
||||
/* Thickbox for Plugin Install screen */
|
||||
body.about-php #TB_window,
|
||||
body.plugin-install-php #TB_window,
|
||||
body.import-php #TB_window,
|
||||
body.plugins-php #TB_window,
|
||||
body.update-core-php #TB_window,
|
||||
body.index-php #TB_window {
|
||||
/* Thickbox for the Plugin details modal. */
|
||||
#TB_window.plugin-details-modal {
|
||||
background: #fcfcfc;
|
||||
}
|
||||
|
||||
/* IE 8 needs a change in the pseudo element content */
|
||||
.ie8 body.about-php #TB_window:before,
|
||||
.ie8 body.plugin-install-php #TB_window:before,
|
||||
.ie8 body.import-php #TB_window:before,
|
||||
.ie8 body.plugins-php #TB_window:before,
|
||||
.ie8 body.update-core-php #TB_window:before,
|
||||
.ie8 body.index-php #TB_window:before {
|
||||
content: " ";
|
||||
background: none;
|
||||
}
|
||||
|
||||
body.about-php #TB_window.thickbox-loading:before,
|
||||
body.plugin-install-php #TB_window.thickbox-loading:before,
|
||||
body.import-php #TB_window.thickbox-loading:before,
|
||||
body.plugins-php #TB_window.thickbox-loading:before,
|
||||
body.update-core-php #TB_window.thickbox-loading:before,
|
||||
body.index-php #TB_window.thickbox-loading:before {
|
||||
#TB_window.plugin-details-modal.thickbox-loading:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 20px;
|
||||
|
|
@ -2910,80 +2889,38 @@ body.index-php #TB_window.thickbox-loading:before {
|
|||
(-webkit-min-device-pixel-ratio: 1.25),
|
||||
(min-resolution: 120dpi) {
|
||||
|
||||
body.about-php #TB_window.thickbox-loading:before,
|
||||
body.plugin-install-php #TB_window.thickbox-loading:before,
|
||||
body.import-php #TB_window.thickbox-loading:before,
|
||||
body.plugins-php #TB_window.thickbox-loading:before,
|
||||
body.update-core-php #TB_window.thickbox-loading:before,
|
||||
body.index-php #TB_window.thickbox-loading:before {
|
||||
#TB_window.plugin-details-modal.thickbox-loading:before {
|
||||
background-image: url(../images/spinner-2x.gif);
|
||||
}
|
||||
}
|
||||
|
||||
body.about-php #TB_title,
|
||||
body.plugin-install-php #TB_title,
|
||||
body.import-php #TB_title,
|
||||
body.plugins-php #TB_title,
|
||||
body.update-core-php #TB_title,
|
||||
body.index-php #TB_title {
|
||||
.plugin-details-modal #TB_title {
|
||||
float: right;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
body.about-php #TB_ajaxWindowTitle,
|
||||
body.plugin-install-php #TB_ajaxWindowTitle,
|
||||
body.import-php #TB_ajaxWindowTitle,
|
||||
body.plugins-php #TB_ajaxWindowTitle,
|
||||
body.update-core-php #TB_ajaxWindowTitle,
|
||||
body.index-php #TB_ajaxWindowTitle {
|
||||
.plugin-details-modal #TB_ajaxWindowTitle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* only on these screens */
|
||||
.about-php #TB_closeWindowButton,
|
||||
.plugin-install-php #TB_closeWindowButton,
|
||||
.import-php #TB_closeWindowButton,
|
||||
.plugins-php #TB_closeWindowButton,
|
||||
.update-core-php #TB_closeWindowButton,
|
||||
.index-php #TB_closeWindowButton {
|
||||
.plugin-details-modal #TB_closeWindowButton {
|
||||
right: auto;
|
||||
left: -30px;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
|
||||
body.about-php #TB_closeWindowButton:hover,
|
||||
body.about-php #TB_closeWindowButton:focus,
|
||||
body.plugin-install-php #TB_closeWindowButton:hover,
|
||||
body.plugin-install-php #TB_closeWindowButton:focus,
|
||||
body.import-php #TB_closeWindowButton:hover,
|
||||
body.import-php #TB_closeWindowButton:focus,
|
||||
body.plugins-php #TB_closeWindowButton:hover,
|
||||
body.plugins-php #TB_closeWindowButton:focus,
|
||||
body.update-core-php #TB_closeWindowButton:hover,
|
||||
body.update-core-php #TB_closeWindowButton:focus,
|
||||
body.index-php #TB_closeWindowButton:hover,
|
||||
body.index-php #TB_closeWindowButton:focus {
|
||||
.plugin-details-modal #TB_closeWindowButton:hover,
|
||||
.plugin-details-modal #TB_closeWindowButton:focus {
|
||||
color: #00a0d2;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
body.about-php .tb-close-icon,
|
||||
body.plugin-install-php .tb-close-icon,
|
||||
body.import-php .tb-close-icon,
|
||||
body.plugins-php .tb-close-icon,
|
||||
body.update-core-php .tb-close-icon,
|
||||
body.index-php .tb-close-icon {
|
||||
.plugin-details-modal .tb-close-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.about-php #TB_closeWindowButton:after,
|
||||
body.plugin-install-php #TB_closeWindowButton:after,
|
||||
body.import-php #TB_closeWindowButton:after,
|
||||
body.plugins-php #TB_closeWindowButton:after,
|
||||
body.update-core-php #TB_closeWindowButton:after,
|
||||
body.index-php #TB_closeWindowButton:after {
|
||||
.plugin-details-modal #TB_closeWindowButton:after {
|
||||
content: "\f335";
|
||||
font: normal 32px/29px 'dashicons';
|
||||
speak: none;
|
||||
|
|
@ -2993,12 +2930,7 @@ body.index-php #TB_closeWindowButton:after {
|
|||
|
||||
/* move plugin install close icon to top on narrow screens */
|
||||
@media screen and ( max-width: 830px ) {
|
||||
body.about-php #TB_closeWindowButton,
|
||||
body.plugin-install-php #TB_closeWindowButton,
|
||||
body.import-php #TB_closeWindowButton,
|
||||
body.plugins-php #TB_closeWindowButton,
|
||||
body.update-core-php #TB_closeWindowButton,
|
||||
body.index-php #TB_closeWindowButton {
|
||||
.plugin-details-modal #TB_closeWindowButton {
|
||||
left: 0;
|
||||
top: -30px;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -2864,33 +2864,12 @@ div.action-links {
|
|||
}
|
||||
}
|
||||
|
||||
/* Thickbox for Plugin Install screen */
|
||||
body.about-php #TB_window,
|
||||
body.plugin-install-php #TB_window,
|
||||
body.import-php #TB_window,
|
||||
body.plugins-php #TB_window,
|
||||
body.update-core-php #TB_window,
|
||||
body.index-php #TB_window {
|
||||
/* Thickbox for the Plugin details modal. */
|
||||
#TB_window.plugin-details-modal {
|
||||
background: #fcfcfc;
|
||||
}
|
||||
|
||||
/* IE 8 needs a change in the pseudo element content */
|
||||
.ie8 body.about-php #TB_window:before,
|
||||
.ie8 body.plugin-install-php #TB_window:before,
|
||||
.ie8 body.import-php #TB_window:before,
|
||||
.ie8 body.plugins-php #TB_window:before,
|
||||
.ie8 body.update-core-php #TB_window:before,
|
||||
.ie8 body.index-php #TB_window:before {
|
||||
content: " ";
|
||||
background: none;
|
||||
}
|
||||
|
||||
body.about-php #TB_window.thickbox-loading:before,
|
||||
body.plugin-install-php #TB_window.thickbox-loading:before,
|
||||
body.import-php #TB_window.thickbox-loading:before,
|
||||
body.plugins-php #TB_window.thickbox-loading:before,
|
||||
body.update-core-php #TB_window.thickbox-loading:before,
|
||||
body.index-php #TB_window.thickbox-loading:before {
|
||||
#TB_window.plugin-details-modal.thickbox-loading:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 20px;
|
||||
|
|
@ -2910,80 +2889,38 @@ body.index-php #TB_window.thickbox-loading:before {
|
|||
(-webkit-min-device-pixel-ratio: 1.25),
|
||||
(min-resolution: 120dpi) {
|
||||
|
||||
body.about-php #TB_window.thickbox-loading:before,
|
||||
body.plugin-install-php #TB_window.thickbox-loading:before,
|
||||
body.import-php #TB_window.thickbox-loading:before,
|
||||
body.plugins-php #TB_window.thickbox-loading:before,
|
||||
body.update-core-php #TB_window.thickbox-loading:before,
|
||||
body.index-php #TB_window.thickbox-loading:before {
|
||||
#TB_window.plugin-details-modal.thickbox-loading:before {
|
||||
background-image: url(../images/spinner-2x.gif);
|
||||
}
|
||||
}
|
||||
|
||||
body.about-php #TB_title,
|
||||
body.plugin-install-php #TB_title,
|
||||
body.import-php #TB_title,
|
||||
body.plugins-php #TB_title,
|
||||
body.update-core-php #TB_title,
|
||||
body.index-php #TB_title {
|
||||
.plugin-details-modal #TB_title {
|
||||
float: left;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
body.about-php #TB_ajaxWindowTitle,
|
||||
body.plugin-install-php #TB_ajaxWindowTitle,
|
||||
body.import-php #TB_ajaxWindowTitle,
|
||||
body.plugins-php #TB_ajaxWindowTitle,
|
||||
body.update-core-php #TB_ajaxWindowTitle,
|
||||
body.index-php #TB_ajaxWindowTitle {
|
||||
.plugin-details-modal #TB_ajaxWindowTitle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* only on these screens */
|
||||
.about-php #TB_closeWindowButton,
|
||||
.plugin-install-php #TB_closeWindowButton,
|
||||
.import-php #TB_closeWindowButton,
|
||||
.plugins-php #TB_closeWindowButton,
|
||||
.update-core-php #TB_closeWindowButton,
|
||||
.index-php #TB_closeWindowButton {
|
||||
.plugin-details-modal #TB_closeWindowButton {
|
||||
left: auto;
|
||||
right: -30px;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
|
||||
body.about-php #TB_closeWindowButton:hover,
|
||||
body.about-php #TB_closeWindowButton:focus,
|
||||
body.plugin-install-php #TB_closeWindowButton:hover,
|
||||
body.plugin-install-php #TB_closeWindowButton:focus,
|
||||
body.import-php #TB_closeWindowButton:hover,
|
||||
body.import-php #TB_closeWindowButton:focus,
|
||||
body.plugins-php #TB_closeWindowButton:hover,
|
||||
body.plugins-php #TB_closeWindowButton:focus,
|
||||
body.update-core-php #TB_closeWindowButton:hover,
|
||||
body.update-core-php #TB_closeWindowButton:focus,
|
||||
body.index-php #TB_closeWindowButton:hover,
|
||||
body.index-php #TB_closeWindowButton:focus {
|
||||
.plugin-details-modal #TB_closeWindowButton:hover,
|
||||
.plugin-details-modal #TB_closeWindowButton:focus {
|
||||
color: #00a0d2;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
body.about-php .tb-close-icon,
|
||||
body.plugin-install-php .tb-close-icon,
|
||||
body.import-php .tb-close-icon,
|
||||
body.plugins-php .tb-close-icon,
|
||||
body.update-core-php .tb-close-icon,
|
||||
body.index-php .tb-close-icon {
|
||||
.plugin-details-modal .tb-close-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.about-php #TB_closeWindowButton:after,
|
||||
body.plugin-install-php #TB_closeWindowButton:after,
|
||||
body.import-php #TB_closeWindowButton:after,
|
||||
body.plugins-php #TB_closeWindowButton:after,
|
||||
body.update-core-php #TB_closeWindowButton:after,
|
||||
body.index-php #TB_closeWindowButton:after {
|
||||
.plugin-details-modal #TB_closeWindowButton:after {
|
||||
content: "\f335";
|
||||
font: normal 32px/29px 'dashicons';
|
||||
speak: none;
|
||||
|
|
@ -2993,12 +2930,7 @@ body.index-php #TB_closeWindowButton:after {
|
|||
|
||||
/* move plugin install close icon to top on narrow screens */
|
||||
@media screen and ( max-width: 830px ) {
|
||||
body.about-php #TB_closeWindowButton,
|
||||
body.plugin-install-php #TB_closeWindowButton,
|
||||
body.import-php #TB_closeWindowButton,
|
||||
body.plugins-php #TB_closeWindowButton,
|
||||
body.update-core-php #TB_closeWindowButton,
|
||||
body.index-php #TB_closeWindowButton {
|
||||
.plugin-details-modal #TB_closeWindowButton {
|
||||
right: 0;
|
||||
top: -30px;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -7,11 +7,11 @@ var tb_position;
|
|||
jQuery( document ).ready( function( $ ) {
|
||||
|
||||
var tbWindow,
|
||||
$focusedBefore,
|
||||
$iframeBody,
|
||||
$tabbables,
|
||||
$firstTabbable,
|
||||
$lastTabbable,
|
||||
$focusedBefore = $(),
|
||||
$uploadViewToggle = $( '.upload-view-toggle' ),
|
||||
$wrap = $ ( '.wrap' ),
|
||||
$body = $( document.body );
|
||||
|
|
@ -58,6 +58,16 @@ jQuery( document ).ready( function( $ ) {
|
|||
*/
|
||||
$body
|
||||
.on( 'thickbox:iframe:loaded', tbWindow, function() {
|
||||
/*
|
||||
* Return if it's not the modal with the plugin details iframe. Other
|
||||
* thickbox instances might want to load an iframe with content from
|
||||
* an external domain. Avoid to access the iframe contents when we're
|
||||
* not sure the iframe loads from the same domain.
|
||||
*/
|
||||
if ( ! tbWindow.hasClass( 'plugin-details-modal' ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
iframeLoaded();
|
||||
})
|
||||
.on( 'thickbox:removed', function() {
|
||||
|
|
@ -149,11 +159,13 @@ jQuery( document ).ready( function( $ ) {
|
|||
|
||||
tb_click.call(this);
|
||||
|
||||
// Set ARIA role and ARIA label.
|
||||
tbWindow.attr({
|
||||
'role': 'dialog',
|
||||
'aria-label': plugininstallL10n.plugin_modal_label
|
||||
});
|
||||
// Set ARIA role, ARIA label, and add a CSS class.
|
||||
tbWindow
|
||||
.attr({
|
||||
'role': 'dialog',
|
||||
'aria-label': plugininstallL10n.plugin_modal_label
|
||||
})
|
||||
.addClass( 'plugin-details-modal' );
|
||||
|
||||
// Set title attribute on the iframe.
|
||||
tbWindow.find( '#TB_iframeContent' ).attr( 'title', title );
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
var tb_position;jQuery(document).ready(function(a){function b(){var b=e.find("#TB_iframeContent");g=b.contents().find("body"),c(),i.focus(),a("#plugin-information-tabs a",g).on("click",function(){c()}),g.on("keydown",function(a){27===a.which&&tb_remove()})}function c(){var b;h=a(":tabbable",g),i=e.find("#TB_closeWindowButton"),j=h.last(),b=i.add(j),b.off("keydown.wp-plugin-details"),b.on("keydown.wp-plugin-details",function(a){d(a)})}function d(a){9===a.which&&(j[0]!==a.target||a.shiftKey?i[0]===a.target&&a.shiftKey&&(a.preventDefault(),j.focus()):(a.preventDefault(),i.focus()))}var e,f,g,h,i,j,k=a(".upload-view-toggle"),l=a(".wrap"),m=a(document.body);tb_position=function(){var b=a(window).width(),c=a(window).height()-(792<b?60:20),d=792<b?772:b-20;return e=a("#TB_window"),e.length&&(e.width(d).height(c),a("#TB_iframeContent").width(d).height(c),e.css({"margin-left":"-"+parseInt(d/2,10)+"px"}),"undefined"!=typeof document.body.style.maxWidth&&e.css({top:"30px","margin-top":"0"})),a("a.thickbox").each(function(){var b=a(this).attr("href");b&&(b=b.replace(/&width=[0-9]+/g,""),b=b.replace(/&height=[0-9]+/g,""),a(this).attr("href",b+"&width="+d+"&height="+c))})},a(window).resize(function(){tb_position()}),m.on("thickbox:iframe:loaded",e,function(){b()}).on("thickbox:removed",function(){f.focus()}),a(".thickbox.open-plugin-details-modal").on("click",function(b){var c=a(this).data("title")?plugininstallL10n.plugin_information+" "+a(this).data("title"):plugininstallL10n.plugin_modal_label;b.preventDefault(),b.stopPropagation(),f=a(this),tb_click.call(this),e.attr({role:"dialog","aria-label":plugininstallL10n.plugin_modal_label}),e.find("#TB_iframeContent").attr("title",c)}),a("#plugin-information-tabs a").click(function(b){var c=a(this).attr("name");b.preventDefault(),a("#plugin-information-tabs a.current").removeClass("current"),a(this).addClass("current"),"description"!==c&&a(window).width()<772?a("#plugin-information-content").find(".fyi").hide():a("#plugin-information-content").find(".fyi").show(),a("#section-holder div.section").hide(),a("#section-"+c).show()}),l.hasClass("plugin-install-tab-upload")||k.attr({role:"button","aria-expanded":"false"}).on("click",function(a){a.preventDefault(),m.toggleClass("show-upload-view"),k.attr("aria-expanded",m.hasClass("show-upload-view"))})});
|
||||
var tb_position;jQuery(document).ready(function(a){function b(){var b=e.find("#TB_iframeContent");f=b.contents().find("body"),c(),h.focus(),a("#plugin-information-tabs a",f).on("click",function(){c()}),f.on("keydown",function(a){27===a.which&&tb_remove()})}function c(){var b;g=a(":tabbable",f),h=e.find("#TB_closeWindowButton"),i=g.last(),b=h.add(i),b.off("keydown.wp-plugin-details"),b.on("keydown.wp-plugin-details",function(a){d(a)})}function d(a){9===a.which&&(i[0]!==a.target||a.shiftKey?h[0]===a.target&&a.shiftKey&&(a.preventDefault(),i.focus()):(a.preventDefault(),h.focus()))}var e,f,g,h,i,j=a(),k=a(".upload-view-toggle"),l=a(".wrap"),m=a(document.body);tb_position=function(){var b=a(window).width(),c=a(window).height()-(792<b?60:20),d=792<b?772:b-20;return e=a("#TB_window"),e.length&&(e.width(d).height(c),a("#TB_iframeContent").width(d).height(c),e.css({"margin-left":"-"+parseInt(d/2,10)+"px"}),"undefined"!=typeof document.body.style.maxWidth&&e.css({top:"30px","margin-top":"0"})),a("a.thickbox").each(function(){var b=a(this).attr("href");b&&(b=b.replace(/&width=[0-9]+/g,""),b=b.replace(/&height=[0-9]+/g,""),a(this).attr("href",b+"&width="+d+"&height="+c))})},a(window).resize(function(){tb_position()}),m.on("thickbox:iframe:loaded",e,function(){e.hasClass("plugin-details-modal")&&b()}).on("thickbox:removed",function(){j.focus()}),a(".thickbox.open-plugin-details-modal").on("click",function(b){var c=a(this).data("title")?plugininstallL10n.plugin_information+" "+a(this).data("title"):plugininstallL10n.plugin_modal_label;b.preventDefault(),b.stopPropagation(),j=a(this),tb_click.call(this),e.attr({role:"dialog","aria-label":plugininstallL10n.plugin_modal_label}).addClass("plugin-details-modal"),e.find("#TB_iframeContent").attr("title",c)}),a("#plugin-information-tabs a").click(function(b){var c=a(this).attr("name");b.preventDefault(),a("#plugin-information-tabs a.current").removeClass("current"),a(this).addClass("current"),"description"!==c&&a(window).width()<772?a("#plugin-information-content").find(".fyi").hide():a("#plugin-information-content").find(".fyi").show(),a("#section-holder div.section").hide(),a("#section-"+c).show()}),l.hasClass("plugin-install-tab-upload")||k.attr({role:"button","aria-expanded":"false"}).on("click",function(a){a.preventDefault(),m.toggleClass("show-upload-view"),k.attr("aria-expanded",m.hasClass("show-upload-view"))})});
|
||||
|
|
@ -94,7 +94,7 @@
|
|||
#TB_load {
|
||||
position: fixed;
|
||||
display: none;
|
||||
z-index: 103;
|
||||
z-index: 100050;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
background-color: #E8E8E8;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
*
|
||||
* @global string $wp_version
|
||||
*/
|
||||
$wp_version = '4.9-alpha-41355';
|
||||
$wp_version = '4.9-alpha-41356';
|
||||
|
||||
/**
|
||||
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
||||
|
|
|
|||
Loading…
Reference in New Issue