WordPress.org
Get WordPress

Make WordPress Core

Changeset 31996


Ignore:
Timestamp:
04/03/2015 04:51:18 AM (10 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.