| Index: trunk/extensions/VisualEditor/modules/es/views/es.SurfaceView.js |
| — | — | @@ -113,7 +113,9 @@ |
| 114 | 114 | this.dimensions = { |
| 115 | 115 | width: this.$.width(), |
| 116 | 116 | height: this.$window.height(), |
| 117 | | - scrollTop: this.$window.scrollTop() |
| | 117 | + scrollTop: this.$window.scrollTop(), |
| | 118 | + toolbarTop: $( '#es-toolbar' ).offset().top, |
| | 119 | + toolbarHeight: $( '#es-toolbar' ).height() |
| 118 | 120 | }; |
| 119 | 121 | |
| 120 | 122 | // Re-render when resizing horizontally |
| — | — | @@ -131,6 +133,13 @@ |
| 132 | 134 | |
| 133 | 135 | this.$window.scroll( function() { |
| 134 | 136 | _this.dimensions.scrollTop = _this.$window.scrollTop(); |
| | 137 | + if ( _this.dimensions.scrollTop >= _this.dimensions.toolbarTop ) { |
| | 138 | + $( '#es-toolbar' ).addClass( 'float' ); |
| | 139 | + $( '#es-panes' ).css( 'padding-top', _this.dimensions.toolbarHeight ); |
| | 140 | + } else { |
| | 141 | + $( '#es-toolbar' ).removeClass( 'float' ); |
| | 142 | + $( '#es-panes' ).css( 'padding-top', 0 ); |
| | 143 | + } |
| 135 | 144 | } ); |
| 136 | 145 | }; |
| 137 | 146 | |
| — | — | @@ -680,8 +689,8 @@ |
| 681 | 690 | // Auto scroll to cursor |
| 682 | 691 | var inputTop = this.$input.offset().top, |
| 683 | 692 | inputBottom = inputTop + position.bottom - position.top; |
| 684 | | - if ( inputTop < this.dimensions.scrollTop ) { |
| 685 | | - this.$window.scrollTop( inputTop ); |
| | 693 | + if ( inputTop - this.dimensions.toolbarHeight < this.dimensions.scrollTop ) { |
| | 694 | + this.$window.scrollTop( inputTop - this.dimensions.toolbarHeight ); |
| 686 | 695 | } else if ( inputBottom > ( this.dimensions.scrollTop + this.dimensions.height ) ) { |
| 687 | 696 | this.$window.scrollTop( inputBottom - this.dimensions.height ); |
| 688 | 697 | } |
| Index: trunk/extensions/VisualEditor/demo/es.css |
| — | — | @@ -36,6 +36,22 @@ |
| 37 | 37 | background-position: bottom left; |
| 38 | 38 | background-repeat: repeat-x; |
| 39 | 39 | } |
| | 40 | +#es-toolbar.float { |
| | 41 | + position: fixed; |
| | 42 | + left: 2em; |
| | 43 | + right: 2em; |
| | 44 | + top: 0; |
| | 45 | + z-index: 100; |
| | 46 | + border-top: none; |
| | 47 | + -webkit-border-top-right-radius: 0; |
| | 48 | + -moz-border-top-right-radius: 0; |
| | 49 | + -o-border-top-right-radius: 0; |
| | 50 | + border-top-right-radius: 0; |
| | 51 | + -webkit-border-top-left-radius: 0; |
| | 52 | + -moz-border-top-left-radius: 0; |
| | 53 | + -o-border-top-left-radius: 0; |
| | 54 | + border-top-left-radius: 0; |
| | 55 | +} |
| 40 | 56 | .es-showData #es-visual, |
| 41 | 57 | .es-showData #es-previews { |
| 42 | 58 | width: 50%; |