Changeset 27403

Timestamp:

03/05/2014 03:53:19 AM (11 years ago)

Author:

azaozz

Message:

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

Location:

trunk/src

Files:

• wp-admin/css/edit.css (modified) (1 diff)
• wp-admin/css/media.css (modified) (6 diffs)
• wp-admin/includes/ajax-actions.php (modified) (1 diff)
• wp-admin/js/media.js (modified) (6 diffs)
• wp-admin/upload.php (modified) (2 diffs)
• wp-includes/js/tinymce/skins/wordpress/images/playlist-audio.png (modified) (previous)
• wp-includes/js/tinymce/skins/wordpress/images/playlist-video.png (modified) (previous)
• wp-includes/script-loader.php (modified) (1 diff)

trunk/src/wp-admin/css/edit.css

@@ -629 +629 @@
     left: 0;
     right: 0;
+    -webkit-transform: translateY( -50% );
+    -ms-transform: translateY( -50% );
     transform: translateY( -50% );
     font-size: 40px;

trunk/src/wp-admin/css/media.css

@@ -236 +236 @@
     background-color: #fff;
     width: 600px;
-    max-width: 100%;
     overflow: hidden;
     margin-left: -300px;
     position: fixed;
     top: 30px;
+    bottom: 30px;
     left: 50%;
     z-index: 160000;
@@ -246 +246 @@
 
 .find-box-head {
-    cursor: move;
     background: #fcfcfc;
     border-bottom: 1px solid #dfdfdf;
-    height: 40px;
+    height: 56px;
     font-size: 22px;
     font-weight: 600;
-    line-height: 40px;
+    line-height: 56px;
     padding: 0 40px 0 16px;
-    overflow: hidden;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
 }
 
@@ -261 +263 @@
     padding: 16px;
     background-color: #fff;
-    max-height: 300px;
+    position: absolute;
+    top: 57px;
+    bottom: 57px;
     overflow-y: scroll;
+    width: 100%;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
 }
 
@@ -273 +281 @@
     left: 125px;
     position: absolute;
-    top: 9px;
+    top: 18px;
 }
 
@@ -287 +295 @@
 }
 
-.found-radio {
+.widefat .found-radio {
+    padding-right: 0;
     width: 16px;
 }
@@ -316 +325 @@
 
 .find-box-buttons {
-    padding: 6px 16px;
+    padding: 14px 16px;
     background: #fcfcfc;
     border-top: 1px solid #dfdfdf;
-}
-
-.find-box #resize-se {
     position: absolute;
-    right: 1px;
-    bottom: 1px;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+@media screen and ( max-width: 660px ) {
+
+    .find-box {
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        margin: 0;
+        width: 100%;
+    }
+
+    .find-box-inside {
+        bottom: 69px;
+    }
 }
 

trunk/src/wp-admin/includes/ajax-actions.php

@@ -1466 +1466 @@
     $html .= '</tbody></table>';
 
-    $x = new WP_Ajax_Response();
-    $x->add( array(
-        'data' => $html
-    ));
-    $x->send();
+    wp_send_json_success( $html );
 }
 

trunk/src/wp-admin/js/media.js

@@ -1 @@
-/* global ajaxurl, wpAjax */
+/* global ajaxurl, attachMediaBoxL10n */
 
 var findPosts;
-(function($){
+( function( $ ){
     findPosts = {
-        open : function(af_name, af_val) {
-            var st = document.documentElement.scrollTop || $(document).scrollTop(),
-                overlay = $( '.ui-find-overlay' );
+        open: function( af_name, af_val ) {
+            var overlay = $( '.ui-find-overlay' );
 
             if ( overlay.length === 0 ) {
@@ -16 +15 @@
 
             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({
-                'max-height': $( window ).height() - ( ( 30 + 40 + 1 + 16 ) * 2 ) + 'px'
-            });
+            $( '#find-posts' ).show();
 
-            $('#find-posts-input').focus().keyup(function(e){
-                if (e.which == 27) { findPosts.close(); } // close on Escape
+            $('#find-posts-input').focus().keyup( function( event ){
+                if ( event.which == 27 ) {
+                    findPosts.close();
+                } // close on Escape
             });
 
@@ -36 +32 @@
         },
 
-        close : function() {
+        close: function() {
             $('#find-posts-response').html('');
-            $('#find-posts').draggable('destroy').hide();
+            $('#find-posts').hide();
             $( '.ui-find-overlay' ).hide();
         },
 
-        overlay : function() {
+        overlay: function() {
             $( '.ui-find-overlay' ).on( 'click', function () {
                 findPosts.close();
@@ -48 +44 @@
         },
 
-        send : function() {
+        send: function() {
             var post = {
-                    ps: $('#find-posts-input').val(),
+                    ps: $( '#find-posts-input' ).val(),
                     action: 'find_posts',
                     _ajax_nonce: $('#_ajax_nonce').val()
@@ -58 +54 @@
             spinner.show();
 
-            $.ajax({
-                type : 'POST',
-                url : ajaxurl,
-                data : post,
-                success : function(x) { findPosts.show(x); spinner.hide(); },
-                error : function(r) { findPosts.error(r); spinner.hide(); }
+            $.ajax( ajaxurl, {
+                type: 'POST',
+                data: post,
+                dataType: 'json'
+            }).always( function() {
+                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() {
-        $('#find-posts-submit').click(function(e) {
-            if ( '' === $('#find-posts-response').html() )
-                e.preventDefault();
+    $( document ).ready( function() {
+        $( '#find-posts-submit' ).click( function( event ) {
+            if ( ! $( '#find-posts-response input[type="radio"]:checked' ).length )
+                event.preventDefault();
         });
         $( '#find-posts .find-box-search :input' ).keypress( function( event ) {
@@ -110 +82 @@
                 return false;
             }
-        } );
+        });
         $( '#find-posts-search' ).click( findPosts.send );
         $( '#find-posts-close' ).click( findPosts.close );
-        $('#doaction, #doaction2').click(function(e){
-            $('select[name^="action"]').each(function(){
-                if ( $(this).val() == 'attach' ) {
-                    e.preventDefault();
+        $( '#doaction, #doaction2' ).click( function( event ) {
+            $( 'select[name^="action"]' ).each( function() {
+                if ( $(this).val() === 'attach' ) {
+                    event.preventDefault();
                     findPosts.open();
                 }
             });
         });
-    });
-    $(window).resize(function() {
-        $('.find-box-inside').css({
-            'max-height': $( window ).height() - ( ( 30 + 40 + 1 + 16 ) * 2 ) + 'px'
+
+        // Enable whole row to be clicked
+        $( '.find-box-inside' ).on( 'click', 'tr', function() {
+            $( this ).find( '.found-radio input' ).prop( 'checked', true );
         });
     });
-})(jQuery);
+})( jQuery );

trunk/src/wp-admin/upload.php

@@ -142 +142 @@
 $parent_file = 'upload.php';
 
-wp_enqueue_script( 'wp-ajax-response' );
-wp_enqueue_script( 'jquery-ui-draggable' );
 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)' )) );
@@ -241 +237 @@
 <?php $wp_list_table->display(); ?>
 
+<div id="ajax-response"></div>
+<?php find_posts_div(); ?> 
 </form>
 </div>
 
-<div id="ajax-response"></div>
-
 <?php
 include( ABSPATH . 'wp-admin/admin-footer.php' );

trunk/src/wp-includes/script-loader.php

@@ -494 +494 @@
         $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 );