WordPress.org
Get WordPress

Make WordPress Core

Changeset 31996


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