Ticket #24804: 24804.pin-to-top.diff

wp-admin/css/colors-classic.css

@@ -1485 +1485 @@
         border: 1px solid #d1e5ee;
 }
 
+.revisions-controls {
+        background: #fff;
+        background: -moz-linear-gradient(bottom,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 30px, rgba(255,255,255,1) 100%);
+        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)));
+        background: -webkit-linear-gradient(bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 30px,rgba(255,255,255,1) 100%);
+        background: -o-linear-gradient(bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 30px,rgba(255,255,255,1) 100%);
+        background: -ms-linear-gradient(bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 30px,rgba(255,255,255,1) 100%);
+        background: linear-gradient(to top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 30px,rgba(255,255,255,1) 100%);
+}
+
 .revisions-tooltip,
 .revisions-tooltip-arrow span {
         border-color: #d1e5ee;

wp-admin/css/colors-fresh.css

@@ -1379 +1379 @@
         border: 1px solid #dfdfdf;
 }
 
+.revisions-controls {
+        background: #fff;
+        background: -moz-linear-gradient(bottom,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 30px, rgba(255,255,255,1) 100%);
+        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)));
+        background: -webkit-linear-gradient(bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 30px,rgba(255,255,255,1) 100%);
+        background: -o-linear-gradient(bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 30px,rgba(255,255,255,1) 100%);
+        background: -ms-linear-gradient(bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 30px,rgba(255,255,255,1) 100%);
+        background: linear-gradient(to top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 30px,rgba(255,255,255,1) 100%);
+}
+
 .revisions-tooltip,
 .revisions-tooltip-arrow span {
         border-color: #d7d7d7;

wp-admin/css/wp-admin.css

@@ -3511 +3511 @@
 /*------------------------------------------------------------------------------
   11.2 - Post Revisions
 ------------------------------------------------------------------------------*/
+.revisions {
+        position: relative;
+}
+
 .revisions-control-frame,
 .revisions-diff-frame {
         position: relative;
@@ -3519 +3523 @@
 .revisions-controls {
         padding-top: 40px;
         height: 100px;
+        z-index: 1;
 }
 
 .revisions-controls input[type="checkbox"] {
@@ -3527 +3532 @@
         vertical-align: text-bottom;
 }
 
+.revisions.pinned .revisions-controls {
+        position: fixed;
+        top: 0;
+        padding-bottom: 10px;
+}
+
 .revisions-tickmarks {
         position: relative;
         margin: 0 auto;
@@ -3754 +3765 @@
         transition:         left 15ms;
 }
 
+.revisions.pinned .revisions-tooltip {
+        display: none !important;
+}
+
 .comparing-two-revisions .revisions-tooltip {
         bottom: 145px;
 }

wp-admin/js/revisions.js

@@ -531 +531 @@
                 className: 'revisions-controls',
 
                 initialize: function() {
+                        _.bindAll( this, 'setWidth' );
+
                         // Add the button view
                         this.views.add( new revisions.view.Buttons({
                                 model: this.model
@@ -573 +575 @@
                         this.views.add( new revisions.view.Meta({
                                 model: this.model
                         }) );
+                },
+
+                ready: function() {
+                        this.top = this.$el.offset().top;
+                        this.window = $(window);
+                        this.window.on( 'scroll.wp.revisions', {controls: this}, function(e) {
+                                var controls = e.data.controls;
+                                var container = controls.$el.parent();
+                                var scrolled = controls.window.scrollTop();
+                                var frame = controls.views.parent;
+
+                                if ( scrolled >= controls.top ) {
+                                        if ( ! frame.$el.hasClass('pinned') ) {
+                                                controls.setWidth();
+                                                container.css('height', container.height() + 'px' );
+                                                controls.window.on('resize.wp.revisions.pinning click.wp.revisions.pinning', {controls: controls}, function(e) {
+                                                        e.data.controls.setWidth();
+                                                });
+                                        }
+                                        frame.$el.addClass('pinned');
+                                } else if ( frame.$el.hasClass('pinned') ) {
+                                        controls.window.off('.wp.revisions.pinning');
+                                        controls.$el.css('width', 'auto');
+                                        frame.$el.removeClass('pinned');
+                                        container.css('height', 'auto');
+                                        controls.top = controls.$el.offset().top;
+                                } else {
+                                        controls.top = controls.$el.offset().top;
+                                }
+                        });
+                },
 
+                setWidth: function() {
+                        this.$el.css('width', this.$el.parent().width() + 'px');
                 }
         });