diff options
| author |  humper <humper@google.com> | 2014-08-06 12:39:59 -0700 |
|---|---|---|
| committer |  Commit bot <commit-bot@chromium.org> | 2014-08-06 12:39:59 -0700 |
| commit | 27ff22758958c26759187b7f4060fad1ed4b62b7 (patch) | |
| tree | fec30c290d61e822eb0b74583ab1a26da78628e5 /gm | |
| parent | 683206a6933c17064a7ccd0f443b9a1e3d630567 (diff) | |
make the action buttons for rebaseline server stick to the top of the window as you scroll
NOTRY=true
BUG=skia:1912
R=stephana@google.com, epoger@google.com
Author: humper@google.com
Review URL: https://codereview.chromium.org/446933002
Diffstat (limited to 'gm')
| -rw-r--r-- | gm/rebaseline_server/static/live-loader.js | 4 | ||||
| -rw-r--r-- | gm/rebaseline_server/static/live-view.html | 3 | ||||
| -rw-r--r-- | gm/rebaseline_server/static/loader.js | 4 | ||||
| -rw-r--r-- | gm/rebaseline_server/static/utils.js | 12 | ||||
| -rw-r--r-- | gm/rebaseline_server/static/view.css | 20 | ||||
| -rw-r--r-- | gm/rebaseline_server/static/view.html | 77 |
6 files changed, 81 insertions, 39 deletions
diff --git a/gm/rebaseline_server/static/live-loader.js b/gm/rebaseline_server/static/live-loader.js index 418e9cc708..f171ff0fe9 100644 --- a/gm/rebaseline_server/static/live-loader.js +++ b/gm/rebaseline_server/static/live-loader.js @@ -296,6 +296,10 @@ Loader.controller( $scope.updateResults(); $scope.loadingMessage = ""; $scope.windowTitle = "Current GM Results"; + + $timeout( function() { + make_results_header_sticky(); + }); } } ).error( diff --git a/gm/rebaseline_server/static/live-view.html b/gm/rebaseline_server/static/live-view.html index 9e22ed4998..b19008cec9 100644 --- a/gm/rebaseline_server/static/live-view.html +++ b/gm/rebaseline_server/static/live-view.html @@ -4,9 +4,12 @@ <head> <title ng-bind="windowTitle"></title> + <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script> <script src="constants.js"></script> <script src="live-loader.js"></script> + <script src="utils.js"></script> + <link rel="stylesheet" href="view.css"> </head> diff --git a/gm/rebaseline_server/static/loader.js b/gm/rebaseline_server/static/loader.js index 19bc2378a0..1ec7305dc6 100644 --- a/gm/rebaseline_server/static/loader.js +++ b/gm/rebaseline_server/static/loader.js @@ -291,6 +291,10 @@ Loader.controller( $scope.updateResults(); $scope.loadingMessage = ""; $scope.windowTitle = "Current GM Results"; + + $timeout( function() { + make_results_header_sticky(); + }); } } ).error( diff --git a/gm/rebaseline_server/static/utils.js b/gm/rebaseline_server/static/utils.js new file mode 100644 index 0000000000..e846b90bd6 --- /dev/null +++ b/gm/rebaseline_server/static/utils.js @@ -0,0 +1,12 @@ +function make_results_header_sticky( ) { + element = $(".results-header-actions"); + var pos = element.position(); + $(window).scroll( function() { + var windowPos = $(window).scrollTop(); + if (windowPos > pos.top) { + element.addClass("sticky"); + } else { + element.removeClass("sticky"); + } + }); +} diff --git a/gm/rebaseline_server/static/view.css b/gm/rebaseline_server/static/view.css index 0e8641246d..ee9be3293b 100644 --- a/gm/rebaseline_server/static/view.css +++ b/gm/rebaseline_server/static/view.css @@ -68,3 +68,23 @@ .image-link { text-decoration: none; } + +.results-header { + overflow: hidden; + padding: 10px; + background-color: #ccccff; +} + +.results-header-actions { + float: right; +} + +.sticky { + position: fixed; + top: 2px; + box-shadow: -2px 2px 5px 0 rgba(0,0,0,.45); + background: white; + right: 2px; + padding: 10px; + border: 2px solid #222; +} diff --git a/gm/rebaseline_server/static/view.html b/gm/rebaseline_server/static/view.html index 0e964d1e98..bafa3f2f3f 100644 --- a/gm/rebaseline_server/static/view.html +++ b/gm/rebaseline_server/static/view.html @@ -4,9 +4,11 @@ <head> <title ng-bind="windowTitle"></title> + <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script> <script src="constants.js"></script> <script src="loader.js"></script> + <script src="utils.js"></script> <link rel="stylesheet" href="view.css"> </head> @@ -195,46 +197,43 @@ <p> + <div class="results-header"> <!-- results header --> + <div class="results-header-actions"> + all tests shown: + <button ng-click="selectAllImagePairs()"> + select + </button> + <button ng-click="clearAllImagePairs()"> + clear + </button> + <button ng-click="toggleAllImagePairs()"> + toggle + </button> + <div ng-repeat="otherTab in tabs"> + <button ng-click="moveSelectedImagePairsToTab(otherTab)" + ng-disabled="selectedImagePairs.length == 0" + ng-show="otherTab != viewingTab"> + move {{selectedImagePairs.length}} selected tests to {{otherTab}} tab + </button> + </div> + </div> + <div class="results-header-stats"> + Found {{filteredImagePairs.length}} matches; + <span ng-show="filteredImagePairs.length > limitedImagePairs.length"> + displaying the first {{limitedImagePairs.length}}. + </span> + <span ng-show="filteredImagePairs.length <= limitedImagePairs.length"> + displaying them all. + </span> + <span ng-show="renderEndTime > renderStartTime"> + Rendered in {{(renderEndTime - renderStartTime).toFixed(0)}} ms. + </span> + <br> + (click on the column header radio buttons to re-sort by that column) + </div> + </div> <!-- results header --> + <table border="0"><tr><td> <!-- table holding results header + results table --> - <table border="0" width="100%"> <!-- results header --> - <tr> - <td> - Found {{filteredImagePairs.length}} matches; - <span ng-show="filteredImagePairs.length > limitedImagePairs.length"> - displaying the first {{limitedImagePairs.length}}. - </span> - <span ng-show="filteredImagePairs.length <= limitedImagePairs.length"> - displaying them all. - </span> - <span ng-show="renderEndTime > renderStartTime"> - Rendered in {{(renderEndTime - renderStartTime).toFixed(0)}} ms. - </span> - <br> - (click on the column header radio buttons to re-sort by that column) - </td> - <td align="right"> - <div> - all tests shown: - <button ng-click="selectAllImagePairs()"> - select - </button> - <button ng-click="clearAllImagePairs()"> - clear - </button> - <button ng-click="toggleAllImagePairs()"> - toggle - </button> - </div> - <div ng-repeat="otherTab in tabs"> - <button ng-click="moveSelectedImagePairsToTab(otherTab)" - ng-disabled="selectedImagePairs.length == 0" - ng-show="otherTab != viewingTab"> - move {{selectedImagePairs.length}} selected tests to {{otherTab}} tab - </button> - </div> - </td> - </tr> - </table> <!-- results header --> </td></tr><tr><td> <table border="1" ng-app="diff_viewer"> <!-- results --> <tr> |