Make WordPress Core

Ticket #24425: 24425.draft.41.diff

File 24425.draft.41.diff, 3.9 KB (added by adamsilverstein, 9 years ago)

adds simple tickmarks

  • wp-admin/js/revisions.js

     
    280280                },
    281281
    282282                updateCompareTwoMode: function() {
    283                         this.$el.toggleClass( 'comparing-two-revisions' );
     283                        if ( this.model.get( 'compareTwoMode' ) )
     284                                this.$el.addClass( 'comparing-two-revisions' );
     285                        else
     286                                this.$el.removeClass( 'comparing-two-revisions' );
    284287                }
    285288        });
    286289
     
    307310                        });
    308311                        this.views.add( tooltip );
    309312
     313                        // Add the Tickmarks view
     314                        this.views.add( new revisions.view.Tickmarks({
     315                                model: this.model
     316                        }));
     317
    310318                        // Add the Slider view with a reference to the tooltip view
    311319                        this.views.add( new revisions.view.Slider({
    312320                                model: this.model,
     
    320328                }
    321329        });
    322330
     331        // The tickmarks view
     332        // This contains the slider tickmarks.
     333        revisions.view.Tickmarks = wp.Backbone.View.extend({
     334                tagName: 'div',
     335                className: 'revisions-tickmarks',
     336                template: wp.template('revisions-tickmarks'),
     337
     338                numberOfTickmarksSet: function() {
     339                        var tickCount = this.model.revisions.length - 1, // One tickmark per model
     340                                sliderWidth = $( '.wp-slider' ).parent().width() * 0.7, // Width of slider is 70% of container (reset on resize)
     341                                tickWidth = Math.floor( sliderWidth / tickCount ), // Divide width by # of tickmarks, round down
     342                                newSiderWidth = ( ( tickWidth + 1 ) * tickCount ) + 1, // Calculate the actual width
     343                                tickNumber;
     344
     345                        $( '.wp-slider' ).css( 'width', newSiderWidth ); // Reset the slider width to match the calculated tick size
     346                        this.$el.css( 'width', newSiderWidth ); // Match the tickmark div width
     347
     348                        for ( tickNumber = 0; tickNumber <= tickCount; tickNumber++ ){
     349                                this.$el.append( '<div class="atickmark" style="left:' + ( tickWidth * tickNumber ) + 'px;"></div>' );
     350                        }
     351                },
     352
     353                ready: function() {
     354                        var self = this;
     355                        self.numberOfTickmarksSet();
     356                        $( window ).on( 'resize', _.debounce( function() {
     357                                self.$el.html( '' );
     358                                self.numberOfTickmarksSet();
     359                                }, 250 ) );
     360                }
     361        });
     362
    323363        // The meta view.
    324364        // This contains the revision meta, and the restore button.
    325365        revisions.view.Meta = wp.Backbone.View.extend({
  • wp-admin/revision.php

     
    152152        </div>
    153153</script>
    154154
     155<script id="tmpl-revisions-tickmarks" type="text/html">
     156</script>
     157
    155158<script id="tmpl-revisions-meta" type="text/html">
    156159        <div id="diff-header">
    157160                <div id="diff-header-from" class="diff-header">
  • wp-admin/css/colors-fresh.css

     
    13851385        background-color: #fff;
    13861386}
    13871387
     1388
     1389.revisions-tickmarks {
     1390        background-color: #f7f7f7;
     1391}
     1392
     1393
     1394.revisions-tickmarks
     1395.atickmark {
     1396        background-color: #ccc;
     1397}
     1398
     1399
    13881400#diff-title-to strong {
    13891401        color: #08a;
    13901402}
     
    13921404/* jQuery UI Slider */
    13931405.wp-slider.ui-slider {
    13941406        border-color: #d7d7d7;
    1395         background: #f7f7f7;
     1407        background: transparent;
    13961408}
    13971409
    13981410.wp-slider .ui-slider-handle {
  • wp-admin/css/wp-admin.css

     
    35053505        height: 100px;
    35063506}
    35073507
     3508.revisions-tickmarks {
     3509        position: relative;
     3510        margin: 0 auto 0;
     3511        height: 0.8em;
     3512        z-index: 2;
     3513        top: 7px;
     3514}
     3515
     3516.revisions-tickmarks .atickmark {
     3517        height: 0.8em;
     3518        width: 1px;
     3519        float: left;
     3520        position: relative;
     3521        z-index: 10002;
     3522}
     3523
     3524.atickmark {
     3525        display: block;
     3526}
     3527
    35083528.comparing-two-revisions .revisions-controls {
    35093529        height: 140px;
    35103530}
     
    35343554
    35353555.wp-slider {
    35363556        width: 70%;
    3537         margin: 6px auto 0;
     3557        margin: 0 auto 0;
     3558        top: -3px;
    35383559}
    35393560
    35403561/* Revision meta box */