WordPress.org

Make WordPress Core

Changeset 31996


Ignore:
Timestamp:
04/03/15 04:51:18 (3 years ago)
Author:
helen
Message:

Spinners: Toggle a class instead of show/hide.

Toggling spinners also now uses visibility instead of display, so that the space is always reserved and nothing moves around unexpectedly.

props cdog, MikeHansenMe, valendesigns.
fixes #22839. see #31875, #30725.

Location:
trunk/src
Files:
20 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/common.css

    r31973 r31996  
    19611961    -webkit-background-size: 20px 20px; 
    19621962    background-size: 20px 20px; 
    1963     display: none; 
     1963    display: inline-block; 
     1964    visibility: hidden; 
    19641965    float: right; 
     1966    vertical-align: middle; 
    19651967    opacity: 0.7; 
    19661968    filter: alpha(opacity=70); 
    19671969    width: 20px; 
    19681970    height: 20px; 
    1969     margin: 2px 5px 0; 
     1971    margin: 4px 10px 0; 
     1972} 
     1973 
     1974.spinner.is-active { 
     1975    visibility: visible; 
    19701976} 
    19711977 
  • trunk/src/wp-admin/css/forms.css

    r31993 r31996  
    819819    float: none; 
    820820    margin: 0 3px; 
    821     vertical-align: text-bottom; 
    822821} 
    823822 
  • trunk/src/wp-admin/css/list-tables.css

    r31890 r31996  
    107107    padding: 0 5px 3px; 
    108108    text-align: center; 
    109 } 
    110  
    111 #replysubmit .spinner { 
    112     padding: 2px 0 0; 
    113     vertical-align: top; 
    114     float: right; 
    115109} 
    116110 
     
    362356#commentsdiv .comments-box tr:last-child td { 
    363357    border-bottom: 0 none; 
    364 } 
    365  
    366 #commentsdiv .spinner { 
    367     padding-left: 5px; 
    368358} 
    369359 
     
    913903} 
    914904 
    915 .inline-edit-save .spinner { 
    916     padding: 4px 10px 0; 
    917     vertical-align: top; 
    918     float: right; 
    919 } 
    920  
    921905/*  Styling */ 
    922906.inline-edit-row h4 { 
  • trunk/src/wp-admin/css/media.css

    r31505 r31996  
    275275.find-box-search .spinner { 
    276276    float: none; 
    277     left: 110px; 
     277    left: 105px; 
    278278    position: absolute; 
    279     top: 2px; 
    280279} 
    281280 
     
    912911.A1B1 .spinner { 
    913912    float: left; 
    914     padding: 0 0 4px 0; 
    915     vertical-align: bottom; 
    916913} 
    917914 
  • trunk/src/wp-admin/css/nav-menus.css

    r31524 r31996  
    350350} 
    351351 
    352 .postbox .spinner { 
    353     display: none; 
    354     vertical-align: middle; 
    355 } 
    356  
    357352.button-controls { 
    358353    clear:both; 
     
    407402.quick-search { 
    408403    width: 190px; 
     404} 
     405 
     406.quick-search-wrap .spinner { 
     407    float: none; 
     408    margin: 0 5px; 
    409409} 
    410410 
  • trunk/src/wp-admin/css/press-this.css

    r31992 r31996  
    13871387} 
    13881388 
    1389 .spinner.is-visible { 
     1389.spinner.is-active { 
    13901390    visibility: visible; 
    13911391} 
  • trunk/src/wp-admin/css/widgets.css

    r31422 r31996  
    272272 
    273273.sidebar-name .spinner { 
     274    float: none; 
     275    position: relative; 
     276    top: -2px; 
    274277    margin: -5px 5px; 
    275     float: none; 
    276278} 
    277279 
  • trunk/src/wp-admin/js/edit-comments.js

    r31929 r31996  
    353353        $('#edithead input').val(''); 
    354354        $('.error', replyrow).empty().hide(); 
    355         $('.spinner', replyrow).hide(); 
     355        $( '.spinner', replyrow ).removeClass( 'is-active' ); 
    356356 
    357357        this.cid = ''; 
     
    443443 
    444444        $('#replysubmit .error').hide(); 
    445         $('#replysubmit .spinner').show(); 
     445        $( '#replysubmit .spinner' ).addClass( 'is-active' ); 
    446446 
    447447        $('#replyrow input').not(':button').each(function() { 
     
    526526        var er = r.statusText; 
    527527 
    528         $('#replysubmit .spinner').hide(); 
     528        $( '#replysubmit .spinner' ).removeClass( 'is-active' ); 
    529529 
    530530        if ( r.responseText ) 
  • trunk/src/wp-admin/js/image-edit.js

    r29560 r31996  
    307307 
    308308        btn.prop('disabled', true); 
    309         spin.show(); 
     309        spin.addClass( 'is-active' ); 
    310310 
    311311        data = { 
     
    325325                elem.fadeIn('fast'); 
    326326                btn.removeAttr('disabled'); 
    327                 spin.hide(); 
     327                spin.removeClass( 'is-active' ); 
    328328            }); 
    329329        }); 
  • trunk/src/wp-admin/js/inline-edit-post.js

    r31820 r31996  
    251251        } 
    252252 
    253         $('table.widefat .spinner').show(); 
     253        $( 'table.widefat .spinner' ).addClass( 'is-active' ); 
    254254 
    255255        params = { 
     
    267267        $.post( ajaxurl, params, 
    268268            function(r) { 
    269                 $('table.widefat .spinner').hide(); 
     269                $( 'table.widefat .spinner' ).removeClass( 'is-active' ); 
    270270 
    271271                if (r) { 
     
    290290 
    291291        if ( id ) { 
    292             $('table.widefat .spinner').hide(); 
     292            $( 'table.widefat .spinner' ).removeClass( 'is-active' ); 
    293293 
    294294            if ( 'bulk-edit' === id ) { 
  • trunk/src/wp-admin/js/inline-edit-tax.js

    r31820 r31996  
    8282        } 
    8383 
    84         $('table.widefat .spinner').show(); 
     84        $( 'table.widefat .spinner' ).addClass( 'is-active' ); 
    8585 
    8686        params = { 
     
    9898            function(r) { 
    9999                var row, new_id, option_value; 
    100                 $('table.widefat .spinner').hide(); 
     100                $( 'table.widefat .spinner' ).removeClass( 'is-active' ); 
    101101 
    102102                if (r) { 
     
    134134 
    135135        if ( id ) { 
    136             $('table.widefat .spinner').hide(); 
     136            $( 'table.widefat .spinner' ).removeClass( 'is-active' ); 
    137137            $('#'+id).siblings('tr.hidden').addBack().remove(); 
    138138            id = id.substr( id.lastIndexOf('-') + 1 ); 
  • trunk/src/wp-admin/js/media.js

    r31692 r31996  
    5252                spinner = $( '.find-box-search .spinner' ); 
    5353 
    54             spinner.show(); 
     54            spinner.addClass( 'is-active' ); 
    5555 
    5656            $.ajax( ajaxurl, { 
     
    5959                dataType: 'json' 
    6060            }).always( function() { 
    61                 spinner.hide(); 
     61                spinner.removeClass( 'is-active' ); 
    6262            }).done( function( x ) { 
    6363                if ( ! x.success ) { 
  • trunk/src/wp-admin/js/nav-menu.js

    r31605 r31996  
    178178 
    179179                        // Show the ajax spinner 
    180                         t.find('.spinner').show(); 
     180                        t.find( '.spinner' ).addClass( 'is-active' ); 
    181181 
    182182                        // Retrieve menu item data 
     
    195195                            // Deselect the items and hide the ajax spinner 
    196196                            checkboxes.removeAttr('checked'); 
    197                             t.find('.spinner').hide(); 
     197                            t.find( '.spinner' ).removeClass( 'is-active' ); 
    198198                        }); 
    199199                    }); 
     
    863863                    params[this.name] = $(this).val(); 
    864864                }); 
    865                 loc.find('.spinner').show(); 
     865                loc.find( '.spinner' ).addClass( 'is-active' ); 
    866866                $.post( ajaxurl, params, function() { 
    867                     loc.find('.spinner').hide(); 
     867                    loc.find( '.spinner' ).removeClass( 'is-active' ); 
    868868                }); 
    869869                return false; 
     
    907907            }; 
    908908 
    909             $('.spinner', panel).show(); 
     909            $( '.spinner', panel ).addClass( 'is-active' ); 
    910910 
    911911            $.post( ajaxurl, params, function(menuMarkup) { 
     
    924924 
    925925            // Show the ajax spinner 
    926             $('.customlinkdiv .spinner').show(); 
     926            $( '.customlinkdiv .spinner' ).addClass( 'is-active' ); 
    927927            this.addLinkToMenu( url, label, processMethod, function() { 
    928928                // Remove the ajax spinner 
    929                 $('.customlinkdiv .spinner').hide(); 
     929                $( '.customlinkdiv .spinner' ).removeClass( 'is-active' ); 
    930930                // Set custom link form back to defaults 
    931931                $('#custom-menu-item-name').val('').blur(); 
     
    11751175            if( ! $items.length ) { 
    11761176                $('.categorychecklist', panel).html( '<li><p>' + navMenuL10n.noResultsFound + '</p></li>' ); 
    1177                 $('.spinner', panel).hide(); 
     1177                $( '.spinner', panel ).removeClass( 'is-active' ); 
    11781178                return; 
    11791179            } 
     
    12021202 
    12031203            $('.categorychecklist', panel).html( $items ); 
    1204             $('.spinner', panel).hide(); 
     1204            $( '.spinner', panel ).removeClass( 'is-active' ); 
    12051205        }, 
    12061206 
  • trunk/src/wp-admin/js/post.js

    r31750 r31996  
    2121        this.st += num; 
    2222        this.total = total; 
    23         $('#commentsdiv .spinner').show(); 
     23        $( '#commentsdiv .spinner' ).addClass( 'is-active' ); 
    2424 
    2525        data = { 
     
    3636                r = wpAjax.parseAjaxResponse(r); 
    3737                $('#commentsdiv .widefat').show(); 
    38                 $('#commentsdiv .spinner').hide(); 
     38                $( '#commentsdiv .spinner' ).removeClass( 'is-active' ); 
    3939 
    4040                if ( 'object' == typeof r && r.responses[0] ) { 
     
    273273 
    274274            if ( $button.attr('id') === 'publish' ) { 
    275                 $submitpost.find('#major-publishing-actions .spinner').show(); 
    276             } else { 
    277                 $submitpost.find('#minor-publishing .spinner').show(); 
     275                $submitpost.find( '#major-publishing-actions .spinner' ).addClass( 'is-active' ); 
     276            } else { 
     277                $submitpost.find( '#minor-publishing .spinner' ).addClass( 'is-active' ); 
    278278            } 
    279279        }); 
     
    677677                } 
    678678 
    679                 $('#publishing-action .spinner').hide(); 
     679                $( '#publishing-action .spinner' ).removeClass( 'is-active' ); 
    680680            } 
    681681        }); 
  • trunk/src/wp-admin/js/press-this.js

    r31992 r31996  
    102102         */ 
    103103        function showSpinner() { 
    104             $( '.spinner' ).addClass( 'is-visible' ); 
     104            $( '.spinner' ).addClass( 'is-active' ); 
    105105            $( '.post-actions button' ).each( function() { 
    106106                $( this ).attr( 'disabled', 'disabled' ); 
     
    112112         */ 
    113113        function hideSpinner() { 
    114             $( '.spinner' ).removeClass( 'is-visible' ); 
     114            $( '.spinner' ).removeClass( 'is-active' ); 
    115115            $( '.post-actions button' ).each( function() { 
    116116                $( this ).removeAttr( 'disabled' ); 
  • trunk/src/wp-admin/js/widgets.js

    r31690 r31996  
    322322 
    323323        if ( sidebarId ) { 
    324             $( '#' + sidebarId ).find('.spinner:first').css('display', 'inline-block'); 
     324            $( '#' + sidebarId ).find( '.spinner:first' ).addClass( 'is-active' ); 
    325325        } 
    326326 
     
    332332 
    333333        $.post( ajaxurl, data, function() { 
    334             $('.spinner').hide(); 
     334            $( '.spinner' ).removeClass( 'is-active' ); 
    335335        }); 
    336336    }, 
     
    341341 
    342342        widget = $(widget); 
    343         $('.spinner', widget).show(); 
     343        $( '.spinner', widget ).addClass( 'is-active' ); 
    344344 
    345345        a = { 
     
    378378                } 
    379379            } else { 
    380                 $('.spinner').hide(); 
     380                $( '.spinner' ).removeClass( 'is-active' ); 
    381381                if ( r && r.length > 2 ) { 
    382382                    $( 'div.widget-content', widget ).html( r ); 
  • trunk/src/wp-admin/js/wp-fullscreen.js

    r30890 r31996  
    268268            $errorMessage = $('#wp-fullscreen-save .wp-fullscreen-error-message'); 
    269269 
    270         $spinner.show(); 
     270        $spinner.addClass( 'is-active' ); 
    271271        $errorMessage.hide(); 
    272272        $saveMessage.hide(); 
     
    283283            dataType: 'json' 
    284284        }).done( function( response ) { 
    285             $spinner.hide(); 
     285            $spinner.removeClass( 'is-active' ); 
    286286 
    287287            if ( response && response.success ) { 
     
    299299            } 
    300300        }).fail( function() { 
    301             $spinner.hide(); 
     301            $spinner.removeClass( 'is-active' ); 
    302302            $errorMessage.show(); 
    303303        }); 
  • trunk/src/wp-admin/options-general.php

    r31993 r31996  
    6161        $("input[name='date_format_custom'], input[name='time_format_custom']").change( function() { 
    6262            var format = $(this); 
    63             format.siblings('.spinner').css('display', 'inline-block'); // show(); can't be used here 
     63            format.siblings( '.spinner' ).addClass( 'is-active' ); 
    6464            $.post(ajaxurl, { 
    6565                    action: 'date_format_custom' == format.attr('name') ? 'date_format' : 'time_format', 
    6666                    date : format.val() 
    67                 }, function(d) { format.siblings('.spinner').hide(); format.siblings('.example').text(d); } ); 
     67                }, function(d) { format.siblings( '.spinner' ).removeClass( 'is-active' ); format.siblings('.example').text(d); } ); 
    6868        }); 
    6969 
  • trunk/src/wp-includes/css/editor.css

    r31957 r31996  
    13761376 
    13771377#wp-link .link-search-wrapper .spinner { 
    1378     display: none; 
    1379     vertical-align: text-bottom; 
     1378    margin-top: 5px; 
    13801379} 
    13811380 
     
    15041503    display: none; 
    15051504    padding: 10px 0; 
    1506 } 
    1507  
    1508 #wp-link .river-waiting .spinner { 
    1509     margin: 0 auto; 
    1510     display: block; 
    1511     float: none; 
    15121505} 
    15131506 
  • trunk/src/wp-includes/js/wplink.js

    r31724 r31996  
    406406 
    407407                wpLink.lastSearch = search; 
    408                 waiting = t.parent().find('.spinner').show(); 
     408                waiting = t.parent().find( '.spinner' ).addClass( 'is-active' ); 
    409409 
    410410                rivers.search.change( search ); 
    411411                rivers.search.ajax( function() { 
    412                     waiting.hide(); 
     412                    waiting.removeClass( 'is-active' ); 
    413413                }); 
    414414            } else { 
     
    646646                    return; 
    647647 
    648                 self.waiting.show(); 
     648                self.waiting.addClass( 'is-active' ); 
    649649                el.scrollTop( newTop + self.waiting.outerHeight() ); 
    650650 
    651651                self.ajax( function() { 
    652                     self.waiting.hide(); 
     652                    self.waiting.removeClass( 'is-active' ); 
    653653                }); 
    654654            }, wpLink.timeToTriggerRiver ); 
Note: See TracChangeset for help on using the changeset viewer.