Restyles the modal for attaching media to posts, take II (also some autoprefixer and imagemin). Props avryl, see #26952.

Built from https://develop.svn.wordpress.org/trunk@27403


git-svn-id: http://core.svn.wordpress.org/trunk@27250 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrew Ozz 2014-03-05 03:54:15 +00:00
parent affd41046b
commit 7121bb490d
13 changed files with 129 additions and 112 deletions

View File

@ -628,6 +628,8 @@ span.wp-media-buttons-icon:before {
top: 50%; top: 50%;
right: 0; right: 0;
left: 0; left: 0;
-webkit-transform: translateY( -50% );
-ms-transform: translateY( -50% );
transform: translateY( -50% ); transform: translateY( -50% );
font-size: 40px; font-size: 40px;
color: #fff; color: #fff;

View File

@ -628,6 +628,8 @@ span.wp-media-buttons-icon:before {
top: 50%; top: 50%;
left: 0; left: 0;
right: 0; right: 0;
-webkit-transform: translateY( -50% );
-ms-transform: translateY( -50% );
transform: translateY( -50% ); transform: translateY( -50% );
font-size: 40px; font-size: 40px;
color: #fff; color: #fff;

View File

@ -235,33 +235,41 @@
.find-box { .find-box {
background-color: #fff; background-color: #fff;
width: 600px; width: 600px;
max-width: 100%;
overflow: hidden; overflow: hidden;
margin-right: -300px; margin-right: -300px;
position: fixed; position: fixed;
top: 30px; top: 30px;
bottom: 30px;
right: 50%; right: 50%;
z-index: 160000; z-index: 160000;
} }
.find-box-head { .find-box-head {
cursor: move;
background: #fcfcfc; background: #fcfcfc;
border-bottom: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf;
height: 40px; height: 56px;
font-size: 22px; font-size: 22px;
font-weight: 600; font-weight: 600;
line-height: 40px; line-height: 56px;
padding: 0 16px 0 40px; padding: 0 16px 0 40px;
overflow: hidden; position: absolute;
top: 0;
right: 0;
left: 0;
} }
.find-box-inside { .find-box-inside {
overflow: auto; overflow: auto;
padding: 16px; padding: 16px;
background-color: #fff; background-color: #fff;
max-height: 300px; position: absolute;
top: 57px;
bottom: 57px;
overflow-y: scroll; overflow-y: scroll;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
} }
.find-box-search { .find-box-search {
@ -272,7 +280,7 @@
float: none; float: none;
right: 125px; right: 125px;
position: absolute; position: absolute;
top: 9px; top: 18px;
} }
#find-posts-input, #find-posts-input,
@ -286,7 +294,8 @@
margin: 0 0 0 4px; margin: 0 0 0 4px;
} }
.found-radio { .widefat .found-radio {
padding-left: 0;
width: 16px; width: 16px;
} }
@ -315,15 +324,29 @@
} }
.find-box-buttons { .find-box-buttons {
padding: 6px 16px; padding: 14px 16px;
background: #fcfcfc; background: #fcfcfc;
border-top: 1px solid #dfdfdf; border-top: 1px solid #dfdfdf;
position: absolute;
bottom: 0;
right: 0;
left: 0;
} }
.find-box #resize-se { @media screen and ( max-width: 660px ) {
position: absolute;
left: 1px; .find-box {
bottom: 1px; top: 0;
bottom: 0;
right: 0;
left: 0;
margin: 0;
width: 100%;
}
.find-box-inside {
bottom: 69px;
}
} }
.ui-find-overlay { .ui-find-overlay {

View File

@ -235,33 +235,41 @@
.find-box { .find-box {
background-color: #fff; background-color: #fff;
width: 600px; width: 600px;
max-width: 100%;
overflow: hidden; overflow: hidden;
margin-left: -300px; margin-left: -300px;
position: fixed; position: fixed;
top: 30px; top: 30px;
bottom: 30px;
left: 50%; left: 50%;
z-index: 160000; z-index: 160000;
} }
.find-box-head { .find-box-head {
cursor: move;
background: #fcfcfc; background: #fcfcfc;
border-bottom: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf;
height: 40px; height: 56px;
font-size: 22px; font-size: 22px;
font-weight: 600; font-weight: 600;
line-height: 40px; line-height: 56px;
padding: 0 40px 0 16px; padding: 0 40px 0 16px;
overflow: hidden; position: absolute;
top: 0;
left: 0;
right: 0;
} }
.find-box-inside { .find-box-inside {
overflow: auto; overflow: auto;
padding: 16px; padding: 16px;
background-color: #fff; background-color: #fff;
max-height: 300px; position: absolute;
top: 57px;
bottom: 57px;
overflow-y: scroll; overflow-y: scroll;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
} }
.find-box-search { .find-box-search {
@ -272,7 +280,7 @@
float: none; float: none;
left: 125px; left: 125px;
position: absolute; position: absolute;
top: 9px; top: 18px;
} }
#find-posts-input, #find-posts-input,
@ -286,7 +294,8 @@
margin: 0 4px 0 0; margin: 0 4px 0 0;
} }
.found-radio { .widefat .found-radio {
padding-right: 0;
width: 16px; width: 16px;
} }
@ -315,15 +324,29 @@
} }
.find-box-buttons { .find-box-buttons {
padding: 6px 16px; padding: 14px 16px;
background: #fcfcfc; background: #fcfcfc;
border-top: 1px solid #dfdfdf; border-top: 1px solid #dfdfdf;
position: absolute;
bottom: 0;
left: 0;
right: 0;
} }
.find-box #resize-se { @media screen and ( max-width: 660px ) {
position: absolute;
right: 1px; .find-box {
bottom: 1px; top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0;
width: 100%;
}
.find-box-inside {
bottom: 69px;
}
} }
.ui-find-overlay { .ui-find-overlay {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1465,11 +1465,7 @@ function wp_ajax_find_posts() {
$html .= '</tbody></table>'; $html .= '</tbody></table>';
$x = new WP_Ajax_Response(); wp_send_json_success( $html );
$x->add( array(
'data' => $html
));
$x->send();
} }
function wp_ajax_widgets_order() { function wp_ajax_widgets_order() {

View File

@ -1,11 +1,10 @@
/* global ajaxurl, wpAjax */ /* global ajaxurl, attachMediaBoxL10n */
var findPosts; var findPosts;
(function($){ ( function( $ ){
findPosts = { findPosts = {
open : function(af_name, af_val) { open: function( af_name, af_val ) {
var st = document.documentElement.scrollTop || $(document).scrollTop(), var overlay = $( '.ui-find-overlay' );
overlay = $( '.ui-find-overlay' );
if ( overlay.length === 0 ) { if ( overlay.length === 0 ) {
$( 'body' ).append( '<div class="ui-find-overlay"></div>' ); $( 'body' ).append( '<div class="ui-find-overlay"></div>' );
@ -15,18 +14,15 @@ var findPosts;
overlay.show(); overlay.show();
if ( af_name && af_val ) { if ( af_name && af_val ) {
$('#affected').attr('name', af_name).val(af_val); $( '#affected' ).attr( 'name', af_name ).val( af_val );
} }
$('#find-posts').show().draggable({
handle: '#find-posts-head'
});
$('.find-box-inside').css({ $( '#find-posts' ).show();
'max-height': $( window ).height() - ( ( 30 + 40 + 1 + 16 ) * 2 ) + 'px'
});
$('#find-posts-input').focus().keyup(function(e){ $('#find-posts-input').focus().keyup( function( event ){
if (e.which == 27) { findPosts.close(); } // close on Escape if ( event.which == 27 ) {
findPosts.close();
} // close on Escape
}); });
// Pull some results up by default // Pull some results up by default
@ -35,21 +31,21 @@ var findPosts;
return false; return false;
}, },
close : function() { close: function() {
$('#find-posts-response').html(''); $('#find-posts-response').html('');
$('#find-posts').draggable('destroy').hide(); $('#find-posts').hide();
$( '.ui-find-overlay' ).hide(); $( '.ui-find-overlay' ).hide();
}, },
overlay : function() { overlay: function() {
$( '.ui-find-overlay' ).on( 'click', function () { $( '.ui-find-overlay' ).on( 'click', function () {
findPosts.close(); findPosts.close();
}); });
}, },
send : function() { send: function() {
var post = { var post = {
ps: $('#find-posts-input').val(), ps: $( '#find-posts-input' ).val(),
action: 'find_posts', action: 'find_posts',
_ajax_nonce: $('#_ajax_nonce').val() _ajax_nonce: $('#_ajax_nonce').val()
}, },
@ -57,73 +53,49 @@ var findPosts;
spinner.show(); spinner.show();
$.ajax({ $.ajax( ajaxurl, {
type : 'POST', type: 'POST',
url : ajaxurl, data: post,
data : post, dataType: 'json'
success : function(x) { findPosts.show(x); spinner.hide(); }, }).always( function() {
error : function(r) { findPosts.error(r); spinner.hide(); } spinner.hide();
}).done( function( x ) {
if ( ! x.success ) {
$( '#find-posts-response' ).text( attachMediaBoxL10n.error );
}
$( '#find-posts-response' ).html( x.data );
}).fail( function() {
$( '#find-posts-response' ).text( attachMediaBoxL10n.error );
}); });
},
show : function(x) {
if ( typeof(x) == 'string' ) {
this.error({'responseText': x});
return;
}
var r = wpAjax.parseAjaxResponse(x);
if ( r.errors ) {
this.error({'responseText': wpAjax.broken});
}
r = r.responses[0];
$('#find-posts-response').html(r.data);
// Enable whole row to be clicked
$( '.found-posts td' ).on( 'click', function () {
$( this ).parent().find( '.found-radio input' ).prop( 'checked', true );
});
},
error : function(r) {
var er = r.statusText;
if ( r.responseText ) {
er = r.responseText.replace( /<.[^<>]*?>/g, '' );
}
if ( er ) {
$('#find-posts-response').html(er);
}
} }
}; };
$(document).ready(function() { $( document ).ready( function() {
$('#find-posts-submit').click(function(e) { $( '#find-posts-submit' ).click( function( event ) {
if ( '' === $('#find-posts-response').html() ) if ( ! $( '#find-posts-response input[type="radio"]:checked' ).length )
e.preventDefault(); event.preventDefault();
}); });
$( '#find-posts .find-box-search :input' ).keypress( function( event ) { $( '#find-posts .find-box-search :input' ).keypress( function( event ) {
if ( 13 == event.which ) { if ( 13 == event.which ) {
findPosts.send(); findPosts.send();
return false; return false;
} }
} ); });
$( '#find-posts-search' ).click( findPosts.send ); $( '#find-posts-search' ).click( findPosts.send );
$( '#find-posts-close' ).click( findPosts.close ); $( '#find-posts-close' ).click( findPosts.close );
$('#doaction, #doaction2').click(function(e){ $( '#doaction, #doaction2' ).click( function( event ) {
$('select[name^="action"]').each(function(){ $( 'select[name^="action"]' ).each( function() {
if ( $(this).val() == 'attach' ) { if ( $(this).val() === 'attach' ) {
e.preventDefault(); event.preventDefault();
findPosts.open(); findPosts.open();
} }
}); });
}); });
});
$(window).resize(function() { // Enable whole row to be clicked
$('.find-box-inside').css({ $( '.find-box-inside' ).on( 'click', 'tr', function() {
'max-height': $( window ).height() - ( ( 30 + 40 + 1 + 16 ) * 2 ) + 'px' $( this ).find( '.found-radio input' ).prop( 'checked', true );
}); });
}); });
})(jQuery); })( jQuery );

View File

@ -1 +1 @@
var findPosts;!function(a){findPosts={open:function(b,c){var d=(document.documentElement.scrollTop||a(document).scrollTop(),a(".ui-find-overlay"));return 0===d.length&&(a("body").append('<div class="ui-find-overlay"></div>'),findPosts.overlay()),d.show(),b&&c&&a("#affected").attr("name",b).val(c),a("#find-posts").show().draggable({handle:"#find-posts-head"}),a(".find-box-inside").css({"max-height":a(window).height()-174+"px"}),a("#find-posts-input").focus().keyup(function(a){27==a.which&&findPosts.close()}),findPosts.send(),!1},close:function(){a("#find-posts-response").html(""),a("#find-posts").draggable("destroy").hide(),a(".ui-find-overlay").hide()},overlay:function(){a(".ui-find-overlay").on("click",function(){findPosts.close()})},send:function(){var b={ps:a("#find-posts-input").val(),action:"find_posts",_ajax_nonce:a("#_ajax_nonce").val()},c=a(".find-box-search .spinner");c.show(),a.ajax({type:"POST",url:ajaxurl,data:b,success:function(a){findPosts.show(a),c.hide()},error:function(a){findPosts.error(a),c.hide()}})},show:function(b){if("string"==typeof b)return void this.error({responseText:b});var c=wpAjax.parseAjaxResponse(b);c.errors&&this.error({responseText:wpAjax.broken}),c=c.responses[0],a("#find-posts-response").html(c.data),a(".found-posts td").on("click",function(){a(this).parent().find(".found-radio input").prop("checked",!0)})},error:function(b){var c=b.statusText;b.responseText&&(c=b.responseText.replace(/<.[^<>]*?>/g,"")),c&&a("#find-posts-response").html(c)}},a(document).ready(function(){a("#find-posts-submit").click(function(b){""===a("#find-posts-response").html()&&b.preventDefault()}),a("#find-posts .find-box-search :input").keypress(function(a){return 13==a.which?(findPosts.send(),!1):void 0}),a("#find-posts-search").click(findPosts.send),a("#find-posts-close").click(findPosts.close),a("#doaction, #doaction2").click(function(b){a('select[name^="action"]').each(function(){"attach"==a(this).val()&&(b.preventDefault(),findPosts.open())})})}),a(window).resize(function(){a(".find-box-inside").css({"max-height":a(window).height()-174+"px"})})}(jQuery); var findPosts;!function(a){findPosts={open:function(b,c){var d=a(".ui-find-overlay");return 0===d.length&&(a("body").append('<div class="ui-find-overlay"></div>'),findPosts.overlay()),d.show(),b&&c&&a("#affected").attr("name",b).val(c),a("#find-posts").show(),a("#find-posts-input").focus().keyup(function(a){27==a.which&&findPosts.close()}),findPosts.send(),!1},close:function(){a("#find-posts-response").html(""),a("#find-posts").hide(),a(".ui-find-overlay").hide()},overlay:function(){a(".ui-find-overlay").on("click",function(){findPosts.close()})},send:function(){var b={ps:a("#find-posts-input").val(),action:"find_posts",_ajax_nonce:a("#_ajax_nonce").val()},c=a(".find-box-search .spinner");c.show(),a.ajax(ajaxurl,{type:"POST",data:b,dataType:"json"}).always(function(){c.hide()}).done(function(b){b.success||a("#find-posts-response").text(attachMediaBoxL10n.error),a("#find-posts-response").html(b.data)}).fail(function(){a("#find-posts-response").text(attachMediaBoxL10n.error)})}},a(document).ready(function(){a("#find-posts-submit").click(function(b){a('#find-posts-response input[type="radio"]:checked').length||b.preventDefault()}),a("#find-posts .find-box-search :input").keypress(function(a){return 13==a.which?(findPosts.send(),!1):void 0}),a("#find-posts-search").click(findPosts.send),a("#find-posts-close").click(findPosts.close),a("#doaction, #doaction2").click(function(b){a('select[name^="action"]').each(function(){"attach"===a(this).val()&&(b.preventDefault(),findPosts.open())})}),a(".find-box-inside").on("click","tr",function(){a(this).find(".found-radio input").prop("checked",!0)})})}(jQuery);

View File

@ -141,12 +141,8 @@ $wp_list_table->prepare_items();
$title = __('Media Library'); $title = __('Media Library');
$parent_file = 'upload.php'; $parent_file = 'upload.php';
wp_enqueue_script( 'wp-ajax-response' );
wp_enqueue_script( 'jquery-ui-draggable' );
wp_enqueue_script( 'media' ); wp_enqueue_script( 'media' );
add_action( 'admin_print_footer_scripts', 'find_posts_div' );
add_screen_option( 'per_page', array('label' => _x( 'Media items', 'items per page (screen options)' )) ); add_screen_option( 'per_page', array('label' => _x( 'Media items', 'items per page (screen options)' )) );
get_current_screen()->add_help_tab( array( get_current_screen()->add_help_tab( array(
@ -240,10 +236,10 @@ if ( !empty($message) ) { ?>
<?php $wp_list_table->display(); ?> <?php $wp_list_table->display(); ?>
<div id="ajax-response"></div>
<?php find_posts_div(); ?>
</form> </form>
</div> </div>
<div id="ajax-response"></div>
<?php <?php
include( ABSPATH . 'wp-admin/admin-footer.php' ); include( ABSPATH . 'wp-admin/admin-footer.php' );

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 440 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 290 B

View File

@ -493,7 +493,10 @@ function wp_default_scripts( &$scripts ) {
$scripts->add( 'list-revisions', "/wp-includes/js/wp-list-revisions$suffix.js" ); $scripts->add( 'list-revisions', "/wp-includes/js/wp-list-revisions$suffix.js" );
$scripts->add( 'media', "/wp-admin/js/media$suffix.js", array( 'jquery-ui-draggable' ), false, 1 ); $scripts->add( 'media', "/wp-admin/js/media$suffix.js", array( 'jquery' ), false, 1 );
did_action( 'init' ) && $scripts->localize( 'media', 'attachMediaBoxL10n', array(
'error' => __( 'An error has occured. Please reload the page and try again.' )
));
$scripts->add( 'image-edit', "/wp-admin/js/image-edit$suffix.js", array('jquery', 'json2', 'imgareaselect'), false, 1 ); $scripts->add( 'image-edit', "/wp-admin/js/image-edit$suffix.js", array('jquery', 'json2', 'imgareaselect'), false, 1 );
did_action( 'init' ) && $scripts->localize( 'image-edit', 'imageEditL10n', array( did_action( 'init' ) && $scripts->localize( 'image-edit', 'imageEditL10n', array(