WordPress.org

Make WordPress Core

Changeset 24174


Ignore:
Timestamp:
05/03/13 23:17:06 (12 months ago)
Author:
ocean90
Message:

Revisions UI: Just another update - Now with improved tick marks and tooltips.

props adamsilverstein. see #23935.

Location:
trunk/wp-admin
Files:
5 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-admin/css/colors-classic.css

    r24119 r24174  
    14831483} 
    14841484 
    1485 #diff-slider .ui-slider-tooltip { 
     1485#diff-slider .ui-slider-tooltip, 
     1486#diff-slider-ticks .ui-slider-tooltip { 
    14861487    border-color: #d1e5ee; 
    14871488    background-color: #fff; 
     
    15031504} 
    15041505 
     1506.revision-tick.scope-of-changes-none { 
     1507    background-color: #d1e5ee; 
     1508} 
     1509 
    15051510.revision-tick.scope-of-changes-vsmall { 
    1506     background-color: #d1e5ee; 
     1511    background-color: #b4d5e3; 
    15071512} 
    15081513 
    15091514.revision-tick.scope-of-changes-small { 
    1510     background-color: #b4d5e3; 
     1515    background-color: #98c5d9; 
    15111516} 
    15121517 
    15131518.revision-tick.scope-of-changes-med { 
    1514     background-color: #98c5d9; 
     1519    background-color: #7bb4ce; 
    15151520} 
    15161521 
    15171522.revision-tick.scope-of-changes-large { 
    1518     background-color: #7bb4ce; 
     1523    background-color: #5ea4c4; 
    15191524} 
    15201525 
    15211526.revision-tick.scope-of-changes-vlarge { 
    1522     background-color: #5ea4c4; 
     1527    background-color: #4493b7; 
    15231528} 
    15241529 
  • trunk/wp-admin/css/colors-fresh.css

    r24119 r24174  
    13771377} 
    13781378 
    1379 #diff-slider .ui-slider-tooltip { 
     1379#diff-slider .ui-slider-tooltip, 
     1380#diff-slider-ticks .ui-slider-tooltip { 
    13801381    border-color: #d7d7d7; 
    13811382    background-color: #fff; 
     
    14011402} 
    14021403 
     1404.revision-tick.scope-of-changes-none { 
     1405    background-color: #d7d7d7; 
     1406} 
     1407 
    14031408.revision-tick.scope-of-changes-vsmall { 
    1404     background-color: #d7d7d7; 
     1409    background-color: #c3c3c3; 
    14051410} 
    14061411 
    14071412.revision-tick.scope-of-changes-small { 
    1408     background-color: #c3c3c3; 
     1413    background-color: #b0b0b0; 
    14091414} 
    14101415 
    14111416.revision-tick.scope-of-changes-med { 
    1412     background-color: #b0b0b0; 
     1417    background-color: #9c9c9c; 
    14131418} 
    14141419 
    14151420.revision-tick.scope-of-changes-large { 
    1416     background-color: #9c9c9c; 
     1421    background-color: #898989; 
    14171422} 
    14181423 
    14191424.revision-tick.scope-of-changes-vlarge { 
    1420     background-color: #898989; 
     1425    background-color: #757575; 
    14211426} 
    14221427 
    14231428.diff-label { 
    14241429    color: #666; 
    1425 } 
    1426  
    1427 body .ui-tooltip { 
    1428     border-color: #d7d7d7; 
    1429     background-color: #fff; 
    14301430} 
    14311431 
  • trunk/wp-admin/css/wp-admin.css

    r24157 r24174  
    35863586#loading-status { 
    35873587    display: none; 
     3588    position: absolute; 
     3589    top: 8px; 
     3590    z-index: 1000; 
    35883591} 
    35893592 
     
    36203623} 
    36213624 
    3622 #diff-slider .ui-slider-tooltip { 
     3625#diff-slider .ui-slider-tooltip, 
     3626#diff-slider-ticks .ui-slider-tooltip { 
    36233627    display: none; 
    36243628    position: absolute; 
    3625     bottom: 20px; 
    3626     margin-left: -4em; 
     3629    bottom: 21px; 
     3630    margin-left: -74px; 
    36273631} 
    36283632 
     
    36393643.comparing-two-revisions #diff-title-to strong { 
    36403644    display: inline; 
    3641 } 
    3642  
    3643 .diff-slider-ticks-wrapper { 
    3644     margin: 0 auto; 
    3645     text-align: center; 
    3646 } 
    3647  
    3648 #diff-slider-ticks { 
    3649     position: absolute; 
    3650     z-index: 2; 
    3651     margin-top: 20px; 
    36523645} 
    36533646 
     
    37063699} 
    37073700 
     3701.diff-slider-ticks-wrapper { 
     3702    margin: 0 auto; 
     3703    text-align: left; 
     3704} 
     3705 
     3706#diff-slider-ticks { 
     3707    position: absolute; 
     3708    z-index: 2; 
     3709    margin-top: 20px; 
     3710} 
     3711 
    37083712.revision-tick { 
    37093713    width: 1px; 
    37103714    float: left; 
    3711     margin: 1px 15px 0 0; 
     3715    margin: 1px 0 0 0; 
    37123716    height: .8em; 
    37133717    padding: 0; 
    37143718    margin-left: 0px; 
     3719    cursor: pointer; 
     3720} 
     3721 
     3722#diff-slider-ticks .revision-tick:first-child { 
     3723    border-bottom-left-radius: 3px; 
     3724    border-top-left-radius: 3px; 
     3725} 
     3726 
     3727#diff-slider-ticks .revision-tick:last-child { 
     3728    border-bottom-right-radius: 3px; 
     3729    border-top-right-radius: 3px; 
     3730} 
     3731 
     3732.revision-tick.scope-of-changes-none { 
     3733    width: 1px; 
    37153734} 
    37163735 
    37173736.revision-tick.scope-of-changes-vsmall { 
    3718     width: 1px; 
     3737    width: 2px; 
    37193738} 
    37203739 
    37213740.revision-tick.scope-of-changes-small { 
    3722     width: 2px; 
    3723     margin-left: -1px; 
     3741    width: 3px; 
    37243742} 
    37253743 
    37263744.revision-tick.scope-of-changes-med { 
    3727     width: 3px; 
    3728     margin-left: -2px; 
     3745    width: 4px; 
    37293746} 
    37303747 
    37313748.revision-tick.scope-of-changes-large { 
    3732     width: 4px; 
    3733     margin-left: -3px; 
     3749    width: 5px; 
    37343750} 
    37353751 
    37363752.revision-tick.scope-of-changes-vlarge { 
    3737     margin-left: -3px; 
    3738     width: 4px; 
    3739     left: 1; 
     3753    width: 6px; 
    37403754} 
    37413755 
     
    37583772    float: left; 
    37593773    margin-right: 5px; 
     3774    margin-top: 5px; 
    37603775} 
    37613776 
     
    38533868    display: block; 
    38543869    border: 0; 
    3855  
    3856     background-color: #8cc1e9; 
    3857     background-image: -webkit-gradient(linear, left bottom, left top, from(#72a7cf), to(#8cc1e9)); 
    3858     background-image: -webkit-linear-gradient(bottom, #72a7cf, #8cc1e9); 
    3859     background-image:    -moz-linear-gradient(bottom, #72a7cf, #8cc1e9); 
    3860     background-image:      -o-linear-gradient(bottom, #72a7cf, #8cc1e9); 
    3861     background-image: linear-gradient(to top, #72a7cf, #8cc1e9); 
     3870    background-color: transparent; 
     3871    background-image: none; 
    38623872} 
    38633873 
  • trunk/wp-admin/js/revisions.js

    r24157 r24174  
    4141 
    4242        constructor: function() { 
     43            var self    = this; 
    4344            this.slider = new revisions.view.Slider(); 
     45 
    4446            if ( null === this.revisions ) { 
    4547                this.revisions = new Revisions(); // set up collection 
    4648                this.startRightModelLoading(); 
    4749 
    48                 var self = this; 
    4950                this.revisions.fetch({ // load revision data 
    5051                    success: function() { 
     
    5960            var self = this, 
    6061                revisionsToLoad = models.where( { completed: false } ), 
    61                 delay = 0; 
     62                delay = 0, 
     63                totalChanges; 
    6264 
    6365            // match slider to passed revision_id 
     
    8082                                    self.stopModelLoadingSpinner(); 
    8183 
    82                                 self.tickmarkView.render(); 
    83  
    84                                 var totalChanges = model.get( 'linesAdded' ) + model.get( 'linesDeleted' ), 
     84                                totalChanges = model.get( 'linesAdded' ) + model.get( 'linesDeleted' ), 
    8585                                    scopeOfChanges = 'vsmall'; 
    8686 
     
    102102                                    self.revisionView.render(); 
    103103                                } 
    104  
     104                                self.tickmarkView.render(); 
    105105                            } 
    106106                    } ); 
     
    192192                        'max': self.revisions.length 
    193193                    }); 
    194                     // ensure right handle not beyond length, in particular if viewing autosaves is switched from on to off 
    195                     // the number of models in the collection might get shorter, this ensures right handle is not beyond last model 
     194                    // ensure right handle not beyond length 
    196195                    if ( self.rightDiff > self.revisions.length ) 
    197196                        self.rightDiff = self.revisions.length; 
     
    275274            }); 
    276275            this.tickmarkView.render(); 
    277             this.tickmarkView.resetTicks(); 
    278276        } 
    279277    }); 
     
    402400            $( '#diff-slider' ).slider( 'option', options ); 
    403401 
    404             // reset all of the slider tooltips during a refresh, but not on prev/next button actions 
    405             if ( ! slide ) 
    406                 $( 'a.ui-slider-handle' ).html( '<span class="ui-slider-tooltip ui-widget-content ui-corner-all"></span>' ); 
    407  
    408402            // Triggers the slide event 
    409403            if ( slide ) 
     
    442436 
    443437        resetTicks: function() { 
    444             var sliderMax   = Diff.slider.option( 'max' ); 
    445             var sliderWidth = Diff.slider.width(); 
    446             var adjustMax   = Diff.singleRevision ? 0 : 1; 
    447             var tickWidth   = Math.floor( sliderWidth / ( sliderMax - adjustMax ) ); 
    448  
    449             // TODO: adjust right margins for wider ticks so they stay centered on handle stop point 
    450  
    451             // set minimum and maximum widths for tick marks 
    452             tickWidth = (tickWidth > 50 ) ? 50 : tickWidth; 
    453             tickWidth = (tickWidth < 10 ) ? 10 : tickWidth; 
    454  
    455             sliderWidth = tickWidth * (sliderMax - adjustMax ) + 1; 
    456  
     438            var sliderMax, sliderWidth, adjustMax, tickWidth, tickCount = 0, aTickWidth, tickMargin, self = this, firstTick, lastTick; 
     439            sliderMax   = Diff.slider.option( 'max' ); 
     440            sliderWidth = Diff.slider.width(); 
     441            adjustMax   = Diff.singleRevision ? 0 : 1; 
     442            tickWidth   = Math.floor( sliderWidth / ( sliderMax - adjustMax ) ); 
     443            tickWidth   = ( tickWidth > 50 ) ? 50 : tickWidth; // set minimum and maximum widths for tick marks 
     444            tickWidth   = ( tickWidth < 10 ) ? 10 : tickWidth; 
     445            sliderWidth = tickWidth * ( sliderMax - adjustMax ); //calculate the slider width 
     446            aTickWidth  = $( '.revision-tick' ).width(); 
     447 
     448            if ( tickWidth !== aTickWidth ) { // is the width already set correctly? 
     449                $( '.revision-tick' ).each( function() { 
     450                    tickMargin = Math.floor( ( tickWidth - $( this ).width() ) / 2 ) + 1; 
     451                    $( this ).css( 'border-left', tickMargin + 'px solid #f7f7f7'); // space the ticks out using margins 
     452                    $( this ).css( 'border-right', ( tickWidth - tickMargin - $( this ).width() ) + 'px solid #f7f7f7'); // space the ticks out using margins 
     453                }); 
     454                firstTick = $( '.revision-tick' ).first(); //cache selectors for optimization 
     455                lastTick = $( '.revision-tick' ).last(); 
     456 
     457                sliderWidth = sliderWidth + Math.ceil( ( tickWidth - ( lastTick.outerWidth() - lastTick.innerWidth() ) ) / 2 ); // room for the last tick 
     458                sliderWidth = sliderWidth + Math.ceil( ( tickWidth - ( firstTick.outerWidth() - firstTick.innerWidth() ) ) / 2 ); // room for the first tick 
     459                firstTick.css( 'border-left', 'none' ); // first tick gets no left border 
     460                lastTick.css( 'border-right', 'none' ); // last tick gets no right border 
     461            } 
     462 
     463            /** 
     464             * reset the slider width 
     465             */ 
    457466            Diff.slider.setWidth( sliderWidth ); 
    458467            $( '.diff-slider-ticks-wrapper' ).width( sliderWidth ); 
    459468            $( '#diff-slider-ticks' ).width( sliderWidth ); 
    460469 
    461             var aTickWidth = $( '.revision-tick' ).width(); 
    462  
    463             if ( tickWidth !== aTickWidth ) { // is the width already set correctly? 
    464                 $( '.revision-tick' ).each( function( ) { 
    465                     $(this).css( 'margin-right', tickWidth - 1 + 'px'); // space the ticks out using right margin 
    466                 }); 
    467  
    468                 $( '.revision-tick' ).last().css( 'margin-right', '0' ); // last tick gets no right margin 
    469             } 
    470  
    471         }, 
    472  
    473         // render the tickmark view 
     470            /** 
     471             * go through all ticks, add hover and click interactions 
     472             */ 
     473            $( '.revision-tick' ).each( function() { 
     474                Diff.slider.addTooltip ( $( this ), Diff.revisions.at( tickCount++ ).get( 'titleTooltip' ) ); 
     475                $( this ).hover( 
     476                    function() { 
     477                        $( this ).find( '.ui-slider-tooltip' ).show().append('<div class="arrow"></div>'); 
     478                    }, 
     479                    function() { 
     480                        $( this ).find( '.ui-slider-tooltip' ).hide().find( '.arrow' ).remove(); 
     481                    } 
     482                ); 
     483 
     484                /** 
     485                 * move the slider handle when the tick marks are clicked 
     486                 */ 
     487                $( this ).on( 'click', 
     488                    { tickCount: tickCount }, // //pass the tick through so we know where to move the handle 
     489                    function( event ) { 
     490                        if ( Diff.slider.singleRevision ) { //single handle mode 
     491                            Diff.rightDiff = event.data.tickCount; //reposition the right handle 
     492                            Diff.slider.refresh({ 
     493                                value: Diff.rightDiff - 1 
     494                            } ); 
     495                        } else { //compare two mode 
     496                            if ( event.data.tickCount < Diff.leftDiff || 
     497                                isRtl && event.data.tickCount > Diff.leftDiff ) { // click was on the 'left' side 
     498                                    Diff.leftDiff = event.data.tickCount; // set the left handle location 
     499                                    Diff.reloadRight(); //reload the right handle comparison models 
     500                            } else { //middle or 'right' clicks 
     501                                Diff.rightDiff = event.data.tickCount; // set the right handle location 
     502                                Diff.reloadLeft(); //reload left handle models 
     503                            } 
     504                            Diff.slider.refresh( { // set the slider handle positions 
     505                                values: [ Diff.leftDiff, Diff.rightDiff ] 
     506                            } ); 
     507                        } 
     508                        Diff.revisionView.render(); // render the main view 
     509                    } ); 
     510            } ); 
     511        }, 
     512 
     513        // render the tick mark view 
    474514        render: function() { 
    475             var self = this; 
     515            var self = this, addHtml; 
    476516 
    477517            if ( null !== self.model ) { 
    478                 var addHtml = ""; 
     518                addHtml = ""; 
    479519                _.each ( self.model.models, function( theModel ) { 
    480520                    addHtml = addHtml + self.template ( theModel.toJSON() ); 
     
    486526            return self; 
    487527        } 
    488     }); 
     528    } ); 
    489529 
    490530    /** 
     
    505545 
    506546        render: function() { 
     547            var modelcount; 
    507548            this.$el.html( this.template ); 
    508549 
    509             var modelcount = Diff.revisions.length; 
     550            modelcount = Diff.revisions.length; 
    510551 
    511552            Diff.slider.singleRevision = Diff.singleRevision; 
     
    581622        // render the revisions 
    582623        render: function() { 
    583             var addHtml = ''; 
    584             var thediff; 
     624            var addHtml = '', thediff; 
    585625 
    586626            // compare two revisions mode? 
     
    607647                $( '#diff-slider' ).hide(); // don't allow compare two if fewer than three revisions 
    608648                $( '.diff-slider-ticks-wrapper' ).hide(); 
    609             } 
    610  
    611             // add tooltips to the handles 
    612             if ( ! Diff.singleRevision ) { 
    613                 Diff.slider.addTooltip ( $( 'a.ui-slider-handle.left-handle' ), 
    614                     ( Diff.leftDiff < 0 ) ? '' : Diff.revisions.at( Diff.leftDiff - 1 ).get( 'titleTooltip' ) ); 
    615                 Diff.slider.addTooltip ( $( 'a.ui-slider-handle.right-handle' ), 
    616                     ( Diff.rightDiff > Diff.revisions.length ) ? '' : Diff.revisions.at( Diff.rightDiff - 1 ).get( 'titleTooltip' ) ); 
    617             } else { 
    618                 Diff.slider.addTooltip ( $( 'a.ui-slider-handle' ), 
    619                     ( Diff.rightDiff > Diff.revisions.length ) ? '' : Diff.revisions.at( Diff.rightDiff - 1 ).get( 'titleTooltip' ) ); 
    620649            } 
    621650 
  • trunk/wp-admin/revision.php

    r24173 r24174  
    119119 
    120120        <div id="loading-status" class="updated message"> 
    121             <p><span class="spinner" ></span> <?php _e( 'Calculating revision diffs' ); ?></p> 
     121            <p><span class="spinner" ></span></p> 
    122122        </div> 
    123123 
     
    174174 
    175175<script id="tmpl-revision-ticks" type="text/html"> 
    176     <div class="revision-tick completed-{{{ data.completed }}} scope-of-changes-{{{ data.scopeOfChanges }}}"></div> 
     176    <div class="revision-tick completed-{{{ data.completed }}} scope-of-changes-{{{ data.scopeOfChanges }}}"> 
     177        <span class="ui-slider-tooltip ui-widget-content ui-corner-all hidden"></span> 
     178    </div> 
    177179</script> 
    178180<?php 
Note: See TracChangeset for help on using the changeset viewer.