AuroraMiddleware/skia2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

make the action buttons for rebaseline server stick to the top of the window as you scroll

Browse Source 
NOTRY=true

BUG=skia:1912
R=stephana@google.com, epoger@google.com

Author: humper@google.com

Review URL: https://codereview.chromium.org/446933002
This commit is contained in:
humper 2014-08-06 12:39:59 -07:00 committed by Commit bot
parent 683206a693
commit 27ff227589
6 changed files with 81 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
gm/rebaseline_server/static/live-loader.js
View File

@ -296,6 +296,10 @@ Loader.controller(
$scope.updateResults();
$scope.loadingMessage = "";
$scope.windowTitle = "Current GM Results";
$timeout( function() {
make_results_header_sticky();
});
}
}
).error(

3
gm/rebaseline_server/static/live-view.html
View File

@ -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>

4
gm/rebaseline_server/static/loader.js
View File

@ -291,6 +291,10 @@ Loader.controller(
$scope.updateResults();
$scope.loadingMessage = "";
$scope.windowTitle = "Current GM Results";
$timeout( function() {
make_results_header_sticky();
});
}
}
).error(

12
gm/rebaseline_server/static/utils.js Normal file
View File

@ -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");
}
});
}

20
gm/rebaseline_server/static/view.css
View File

@ -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;
}

77
gm/rebaseline_server/static/view.html
View File

@ -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>