diff --git a/front/src/css/dashboard.css b/front/src/css/dashboard.css index dfb9b3d..e1e9515 100644 --- a/front/src/css/dashboard.css +++ b/front/src/css/dashboard.css @@ -29,43 +29,6 @@ font-weight: bold; margin: 0.5em 0 1em; } -.summary .globalScore .screenshotWrapper.desktop { - display: inline-block; - position: relative; - border: 0.2em solid #AAA; - background: #000; - padding: 0.5em; - border-top-left-radius: 0.4em; - border-top-right-radius: 0.4em; -} -.summary .globalScore .screenshotWrapper.desktop:before { - position: absolute; - width: 15em; - height: 0.6em; - bottom: -0.75em; - left: -1em; - background: #CCC; - border-bottom-left-radius: 0.2em; - border-bottom-right-radius: 0.2em; - content: " "; -} -.summary .globalScore .screenshotWrapper.desktop:after { - position: absolute; - width: 0.4em; - height: 0.2em; - bottom: -0.55em; - left: 12.5em; - background: lime; - content: " "; -} -.summary .globalScore .screenshotWrapper.desktop > div { - width: 12em; - height: 6.75em; - overflow: scroll; -} -.summary .globalScore .screenshot { - width: 100%; -} .summary .notations { display: table; width: 80%; diff --git a/front/src/css/main.css b/front/src/css/main.css index 8cab1bf..ead8c72 100644 --- a/front/src/css/main.css +++ b/front/src/css/main.css @@ -113,6 +113,43 @@ h1 span { margin-top: 4em; color: black; } +.screenshotWrapper.desktop { + display: inline-block; + position: relative; + border: 0.2em solid #AAA; + background: #000; + padding: 0.5em; + border-top-left-radius: 0.4em; + border-top-right-radius: 0.4em; +} +.screenshotWrapper.desktop:before { + position: absolute; + width: 15em; + height: 0.6em; + bottom: -0.75em; + left: -1em; + background: #CCC; + border-bottom-left-radius: 0.2em; + border-bottom-right-radius: 0.2em; + content: " "; +} +.screenshotWrapper.desktop:after { + position: absolute; + width: 0.4em; + height: 0.2em; + bottom: -0.55em; + left: 12.5em; + background: lime; + content: " "; +} +.screenshotWrapper.desktop > div { + width: 12em; + height: 6.75em; + overflow: scroll; +} +.screenshotWrapper.desktop .screenshotImage { + width: 100%; +} .star { font-weight: bold; } diff --git a/front/src/css/screenshot.css b/front/src/css/screenshot.css new file mode 100644 index 0000000..55af543 --- /dev/null +++ b/front/src/css/screenshot.css @@ -0,0 +1,7 @@ +.screenshot.board { + text-align: center; +} +.screenshot .screenshotWrapper { + font-size: 2.08333333333333em; + margin-bottom: 0.5em; +} diff --git a/front/src/js/app.js b/front/src/js/app.js index 7ddabb4..4c4f43b 100644 --- a/front/src/js/app.js +++ b/front/src/js/app.js @@ -6,6 +6,7 @@ var yltApp = angular.module('YellowLabTools', [ 'dashboardCtrl', 'queueCtrl', 'ruleCtrl', + 'screenshotCtrl', 'timelineCtrl', 'runsFactory', 'resultsFactory', @@ -46,6 +47,10 @@ yltApp.config(['$routeProvider', '$locationProvider', templateUrl: 'views/timeline.html', controller: 'TimelineCtrl' }). + when('/result/:runId/screenshot', { + templateUrl: 'views/screenshot.html', + controller: 'ScreenshotCtrl' + }). when('/result/:runId/rule/:policy', { templateUrl: 'views/rule.html', controller: 'RuleCtrl' diff --git a/front/src/js/controllers/screenshotCtrl.js b/front/src/js/controllers/screenshotCtrl.js new file mode 100644 index 0000000..78abc21 --- /dev/null +++ b/front/src/js/controllers/screenshotCtrl.js @@ -0,0 +1,38 @@ +var screenshotCtrl = angular.module('screenshotCtrl', ['resultsFactory', 'menuService']); + +screenshotCtrl.controller('ScreenshotCtrl', ['$scope', '$rootScope', '$routeParams', '$location', 'Results', 'Runs', 'Menu', function($scope, $rootScope, $routeParams, $location, Results, Runs, Menu) { + $scope.runId = $routeParams.runId; + $scope.Menu = Menu.setCurrentPage(null, $scope.runId); + + function loadResults() { + // Load result if needed + if (!$rootScope.loadedResult || $rootScope.loadedResult.runId !== $routeParams.runId) { + Results.get({runId: $routeParams.runId}, function(result) { + $rootScope.loadedResult = result; + $scope.result = result; + init(); + }, function(err) { + $scope.error = true; + }); + } else { + $scope.result = $rootScope.loadedResult; + init(); + } + } + + function init() { + + } + + $scope.testAgain = function() { + Runs.save({ + url: $scope.result.params.url, + waitForResponse: false, + screenshot: true + }, function(data) { + $location.path('/queue/' + data.runId); + }); + }; + + loadResults(); +}]); \ No newline at end of file diff --git a/front/src/less/dashboard.less b/front/src/less/dashboard.less index 6c451cf..59b5606 100644 --- a/front/src/less/dashboard.less +++ b/front/src/less/dashboard.less @@ -32,48 +32,6 @@ font-weight: bold; margin: 0.5em 0 1em; } - - .screenshotWrapper.desktop { - display: inline-block; - position: relative; - border: 0.2em solid #AAA; - background: #000; - padding: 0.5em; - border-top-left-radius: 0.4em; - border-top-right-radius: 0.4em; - - &:before { - position: absolute; - width: 15em; - height: 0.6em; - bottom: -0.75em; - left: -1em; - background: #CCC; - border-bottom-left-radius: 0.2em; - border-bottom-right-radius: 0.2em; - content: " "; - } - - &:after { - position: absolute; - width: 0.4em; - height: 0.2em; - bottom: -0.55em; - left: 12.5em; - background: lime; - content: " "; - } - - > div { - width: 12em; - height: 6.75em; - overflow: scroll; - } - } - - .screenshot { - width: 100%; - } } .summary .notations { diff --git a/front/src/less/main.less b/front/src/less/main.less index ae2cc21..9b1bdb5 100644 --- a/front/src/less/main.less +++ b/front/src/less/main.less @@ -113,6 +113,49 @@ h1 span { } +.screenshotWrapper.desktop { + display: inline-block; + position: relative; + border: 0.2em solid #AAA; + background: #000; + padding: 0.5em; + border-top-left-radius: 0.4em; + border-top-right-radius: 0.4em; + + &:before { + position: absolute; + width: 15em; + height: 0.6em; + bottom: -0.75em; + left: -1em; + background: #CCC; + border-bottom-left-radius: 0.2em; + border-bottom-right-radius: 0.2em; + content: " "; + } + + &:after { + position: absolute; + width: 0.4em; + height: 0.2em; + bottom: -0.55em; + left: 12.5em; + background: lime; + content: " "; + } + + > div { + width: 12em; + height: 6.75em; + overflow: scroll; + } + + .screenshotImage { + width: 100%; + } +} + + .star { font-weight: bold; span { diff --git a/front/src/less/screenshot.less b/front/src/less/screenshot.less new file mode 100644 index 0000000..a214659 --- /dev/null +++ b/front/src/less/screenshot.less @@ -0,0 +1,8 @@ +.screenshot.board { + text-align: center; +} + +.screenshot .screenshotWrapper { + font-size: 2.08333333333333em; + margin-bottom: 0.5em; +} \ No newline at end of file diff --git a/front/src/main.html b/front/src/main.html index fe5ec86..5d6f738 100644 --- a/front/src/main.html +++ b/front/src/main.html @@ -12,6 +12,7 @@ + @@ -27,6 +28,7 @@ + diff --git a/front/src/views/dashboard.html b/front/src/views/dashboard.html index 39d54d4..1d163bc 100644 --- a/front/src/views/dashboard.html +++ b/front/src/views/dashboard.html @@ -10,11 +10,13 @@
-
-
- + +
+
+ +
-
+
diff --git a/front/src/views/screenshot.html b/front/src/views/screenshot.html new file mode 100644 index 0000000..558846b --- /dev/null +++ b/front/src/views/screenshot.html @@ -0,0 +1,14 @@ +
+
+

Screenshot

+ +
+
+ +
+
+ +

(scroll on the screenshot to see under the fold)

+ +
Back to dashboard
+
\ No newline at end of file diff --git a/lib/screenshotHandler.js b/lib/screenshotHandler.js index c7f725f..5651a12 100644 --- a/lib/screenshotHandler.js +++ b/lib/screenshotHandler.js @@ -96,7 +96,7 @@ var screenshotHandler = function() { this.toBuffer = function(image) { var deferred = Q.defer(); - image.toBuffer('jpg', {quality: 85}, function(err, buffer){ + image.toBuffer('jpg', {quality: 90}, function(err, buffer){ if (err) { debug('Could not save image to buffer'); debug(err); diff --git a/lib/server/controllers/frontController.js b/lib/server/controllers/frontController.js index 9a19a67..4d5f531 100644 --- a/lib/server/controllers/frontController.js +++ b/lib/server/controllers/frontController.js @@ -7,7 +7,7 @@ var FrontController = function(app) { var cacheDuration = 365 * 24 * 60 * 60 * 1000; // One year var assetsPath = (app.get('env') === 'development') ? '../../../front/src' : '../../../front/build'; - var routes = ['/', '/about', '/result/:runId', '/result/:runId/timeline', '/result/:runId/rule/:policy', '/queue/:runId']; + var routes = ['/', '/about', '/result/:runId', '/result/:runId/timeline', '/result/:runId/screenshot', '/result/:runId/rule/:policy', '/queue/:runId']; routes.forEach(function(route) { app.get(route, function(req, res) { res.setHeader('Cache-Control', 'public, max-age=20');