WordPress.org

Make WordPress Core

Ticket #24804: 24804.plus-loading-indicator-fixes.diff

File 24804.plus-loading-indicator-fixes.diff, 6.2 KB (added by markjaquith, 5 years ago)
  • wp-admin/css/colors-classic.css

    table.diff .diff-addedline ins { 
    14851485        border: 1px solid #d1e5ee;
    14861486}
    14871487
     1488.revisions-controls {
     1489        background: #fff;
     1490        background: -moz-linear-gradient(bottom,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 30px, rgba(255,255,255,1) 100%);
     1491        background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,rgba(255,255,255,1)), color-stop(30px,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1)));
     1492        background: -webkit-linear-gradient(bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 30px,rgba(255,255,255,1) 100%);
     1493        background: -o-linear-gradient(bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 30px,rgba(255,255,255,1) 100%);
     1494        background: -ms-linear-gradient(bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 30px,rgba(255,255,255,1) 100%);
     1495        background: linear-gradient(to top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 30px,rgba(255,255,255,1) 100%);
     1496}
     1497
    14881498.revisions-tooltip,
    14891499.revisions-tooltip-arrow span {
    14901500        border-color: #d1e5ee;
  • wp-admin/css/colors-fresh.css

    table.diff .diff-addedline ins { 
    13791379        border: 1px solid #dfdfdf;
    13801380}
    13811381
     1382.revisions-controls {
     1383        background: #fff;
     1384        background: -moz-linear-gradient(bottom,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 30px, rgba(255,255,255,1) 100%);
     1385        background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,rgba(255,255,255,1)), color-stop(30px,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1)));
     1386        background: -webkit-linear-gradient(bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 30px,rgba(255,255,255,1) 100%);
     1387        background: -o-linear-gradient(bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 30px,rgba(255,255,255,1) 100%);
     1388        background: -ms-linear-gradient(bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 30px,rgba(255,255,255,1) 100%);
     1389        background: linear-gradient(to top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 30px,rgba(255,255,255,1) 100%);
     1390}
     1391
    13821392.revisions-tooltip,
    13831393.revisions-tooltip-arrow span {
    13841394        border-color: #d7d7d7;
  • wp-admin/css/wp-admin-rtl.css

    th.sorted a span { 
    976976        padding: 9px 0 0 9px;
    977977}
    978978
     979.revisions .loading-indicator {
     980        margin-right: -90px;
     981}
     982
     983body.folded .revisions .loading-indicator {
     984        margin-right: -32px;
     985}
     986
    979987.revisions-next {
    980988        float: left;
    981989}
  • wp-admin/css/wp-admin.css

    td.plugin-title p { 
    35113511/*------------------------------------------------------------------------------
    35123512  11.2 - Post Revisions
    35133513------------------------------------------------------------------------------*/
     3514.revisions {
     3515        position: relative;
     3516}
     3517
    35143518.revisions-control-frame,
    35153519.revisions-diff-frame {
    35163520        position: relative;
    td.plugin-title p { 
    35193523.revisions-controls {
    35203524        padding-top: 40px;
    35213525        height: 100px;
     3526        z-index: 1;
    35223527}
    35233528
    35243529.revisions-controls input[type="checkbox"] {
    td.plugin-title p { 
    35273532        vertical-align: text-bottom;
    35283533}
    35293534
     3535.revisions.pinned .revisions-controls {
     3536        position: fixed;
     3537        top: 0;
     3538        padding-bottom: 10px;
     3539}
     3540
    35303541.revisions-tickmarks {
    35313542        position: relative;
    35323543        margin: 0 auto;
    td.plugin-title p { 
    35713582}
    35723583
    35733584.revisions .loading-indicator {
    3574         position: absolute;
     3585        position: fixed;
    35753586        vertical-align: middle;
    35763587        opacity: 0;
    35773588        width: 100%;
    3578         top: 3em;
     3589        top: 50%;
     3590        margin-left: -90px;
    35793591        -webkit-transition: opacity 0.5s;
    35803592        -moz-transition:    opacity 0.5s;
    35813593        -ms-transition:     opacity 0.5s;
    td.plugin-title p { 
    35843596        filter: alpha(opacity=0); /* ie8 and earlier */
    35853597}
    35863598
     3599body.folded .revisions .loading-indicator {
     3600        margin-left: -32px;
     3601}
     3602
    35873603.revisions .loading-indicator span.spinner {
    35883604        display: block;
    35893605        margin: 0 auto;
    table.diff .diff-addedline ins { 
    37543770        transition:         left 15ms;
    37553771}
    37563772
     3773.revisions.pinned .revisions-tooltip {
     3774        display: none !important;
     3775}
     3776
    37573777.comparing-two-revisions .revisions-tooltip {
    37583778        bottom: 145px;
    37593779}
  • wp-admin/js/revisions.js

    window.wp = window.wp || {}; 
    531531                className: 'revisions-controls',
    532532
    533533                initialize: function() {
     534                        _.bindAll( this, 'setWidth' );
     535
    534536                        // Add the button view
    535537                        this.views.add( new revisions.view.Buttons({
    536538                                model: this.model
    window.wp = window.wp || {}; 
    573575                        this.views.add( new revisions.view.Meta({
    574576                                model: this.model
    575577                        }) );
     578                },
     579
     580                ready: function() {
     581                        this.top = this.$el.offset().top;
     582                        this.window = $(window);
     583                        this.window.on( 'scroll.wp.revisions', {controls: this}, function(e) {
     584                                var controls = e.data.controls;
     585                                var container = controls.$el.parent();
     586                                var scrolled = controls.window.scrollTop();
     587                                var frame = controls.views.parent;
     588
     589                                if ( scrolled >= controls.top ) {
     590                                        if ( ! frame.$el.hasClass('pinned') ) {
     591                                                controls.setWidth();
     592                                                container.css('height', container.height() + 'px' );
     593                                                controls.window.on('resize.wp.revisions.pinning click.wp.revisions.pinning', {controls: controls}, function(e) {
     594                                                        e.data.controls.setWidth();
     595                                                });
     596                                        }
     597                                        frame.$el.addClass('pinned');
     598                                } else if ( frame.$el.hasClass('pinned') ) {
     599                                        controls.window.off('.wp.revisions.pinning');
     600                                        controls.$el.css('width', 'auto');
     601                                        frame.$el.removeClass('pinned');
     602                                        container.css('height', 'auto');
     603                                        controls.top = controls.$el.offset().top;
     604                                } else {
     605                                        controls.top = controls.$el.offset().top;
     606                                }
     607                        });
     608                },
    576609
     610                setWidth: function() {
     611                        this.$el.css('width', this.$el.parent().width() + 'px');
    577612                }
    578613        });
    579614