Replaced screenshot Zoom UI with input range along with buttons.

res/app/components/stf/image-onload/image-onload-animate-directive.js

@@ -3,10 +3,9 @@ module.exports = function imageOnloadAnimateDirective($parse, $animate) {
     restrict: 'A',
     link: function (scope, element, attrs) {
       $animate.addClass(element, 'ng-image-not-loaded')
-      element.bind('load', function() {
+      element.bind('load', function () {
         $animate.removeClass(element, 'ng-image-not-loaded')
-//        scope.$eval(attrs.imageOnload)
-        console.log('image is loaded')
+//        console.log('image is loaded')
       })
     }
   }

res/app/control-panes/screenshots/screenshots-controller.js

@@ -1,36 +1,37 @@
 module.exports = function ScreenshotsCtrl($scope, SettingsService) {
   $scope.screenshots = []
-  $scope.shotSize = 'small'
+  $scope.shotSizeRange = 200
 
   $scope.clear = function () {
     $scope.screenshots = []
   }
 
-  SettingsService.bind($scope, {
-    key: 'shotSize'
-  , storeName: 'ScreenShots.shotSize'
-  })
+//  SettingsService.bind($scope, {
+//    key: 'shotSize', storeName: 'ScreenShots.shotSize'
+//  })
 
-  $scope.shotSizeUrlParameter = function () {
-    var sizes = {
-      'small': '?crop=100x',
-      'medium': '?crop=320x',
-      'large': '?crop=450x',
-      'original': ''
-    }
-    return sizes[$scope.shotSize]
+  $scope.shotSizeUrlParameter = function (maxSize) {
+    return ($scope.shotSizeRange === maxSize) ? '' :
+      '?crop=' + $scope.shotSizeRange + 'x'
   }
 
   $scope.takeScreenShot = function () {
-    $scope.control.screenshot().then(function(result) {
-      $scope.$apply(function() {
+    $scope.control.screenshot().then(function (result) {
+      $scope.$apply(function () {
         $scope.screenshots.unshift(result)
       })
     })
   }
 
-  $scope.imageLoaded = function (shot) {
-    shot.ready = true
-    console.log('[called')
+  $scope.zoom = function (param) {
+    var newValue = parseInt($scope.shotSizeRange, 10) + param.step
+    if (param.min && newValue < param.min) {
+      newValue = param.min
+    } else
+    if (param.max && newValue > param.max) {
+      newValue = param.max
+    }
+    $scope.shotSizeRange = newValue
   }
+
 }

res/app/control-panes/screenshots/screenshots.css

@@ -2,13 +2,15 @@
 
 }
 
-.screenshot-image {
-  display:block!important;
+.stf-screenshots .screenshot-image {
+  display: block !important;
 }
 
 .stf-screenshots .screenshot-image {
   -webkit-transition: 1000ms;
   transition: 1000ms;
+  /*-webkit-transition: width 2s; */
+  /*transition: width 2s;*/
 }
 
 .stf-screenshots .screenshot-image.ng-image-not-loaded {
@@ -18,3 +20,12 @@
 .stf-screenshots .screenshot-image {
   opacity: 1;
 }
+
+.stf-screenshots .zoom-button {
+  border: 1px solid transparent;
+}
+
+.stf-screenshots .zoom-range {
+  width: 180px;
+  margin-right: 5px;
+}

res/app/control-panes/screenshots/screenshots.jade

@@ -1,40 +1,44 @@
 .widget-container.fluid-height(ng-controller='ScreenshotsCtrl').stf-screenshots
   .heading
-    button.btn.btn-sm.btn-primary-outline(ng-click='takeScreenShot()', title='{{"Take Screenshot"|translate}}')
+    button.btn.btn-sm.btn-primary-outline(ng-click='takeScreenShot()',
+    title='{{"Take Screenshot"|translate}}')
       i.fa.fa-camera
       span(translate) Screenshot
-    button.btn.btn-sm.btn-info-outline(ng-click='takePageShot()', title='{{"Take Pageshot (Needs WebView running)"|translate}}',
+    button.btn.btn-sm.btn-info-outline(ng-click='takePageShot()',
+    title='{{"Take Pageshot (Needs WebView running)"|translate}}',
     ng-if='$root.platform == "web" && $root.browser == "webview"')
       i.fa.fa-camera-retro(translate)
       span(translate) Pageshot
 
+    .button-spacer
+
     clear-button(ng-click='clear()', ng-disabled='!screenshots.length')
 
+    .button-spacer
+
     .pull-right
-      i.fa.fa-minus(tooltip='Zoom Out')
-      input(type='range', ng-model='shotSizeRange', min='100', max='2000', step='25', style='width: 200px;')
-      i.fa.fa-plus(tooltip='Zoom In')
-    small {{ shotSizeRange }}
+      button.btn.btn-primary-outline.btn-sm.zoom-button(
+        ng-click='zoom({min: 80, step: -50})',
+        ng-disabled='!screenshots.length')
+        i.fa.fa-minus
 
-    .btn-group.pull-right
+      input(type='range', ng-model='shotSizeRange', min='80', max='480', step='10',
+      ng-model-options='{ updateOn: "default blur", debounce: { default: 100, blur: 0} }',
+      ng-disabled='!screenshots.length').zoom-range
 
-
-      button(type='button', ng-model='shotSize', btn-radio="'small'", title='{{"Low"|translate}}').btn.btn-sm.btn-primary-outline
-        span.fa.fa-fw(translate) L
-      button(type='button', ng-model='shotSize', btn-radio="'medium'", title='{{"Medium"|translate}}').btn.btn-sm.btn-primary-outline
-        span.fa.fa-fw(translate) M
-      button(type='button', ng-model='shotSize', btn-radio="'large'", title='{{"High"|translate}}').btn.btn-sm.btn-primary-outline
-        span.fa.fa-fw(translate) H
-      button(type='button', ng-model='shotSize', btn-radio="'original'", title='{{"Original"|translate}}').btn.btn-sm.btn-primary-outline
-        i.fa.fa-picture-o.fa-fw
+      button.btn.btn-primary-outline.btn-sm.zoom-button(
+        ng-click='zoom({max: 480, step: 50})',
+        ng-disabled='!screenshots.length')
+        i.fa.fa-plus
 
   .widget-content.padded
     nothing-to-show(message='{{"No screenshots taken"|translate}}', icon='fa-camera', ng-show='!screenshots.length')
 
     ul.screenshots-icon-view.clear-fix
       li.screenshots-icon-item(ng-repeat='shot in screenshots').cursor-select
-        h5 {{ shot.body.date | date:'yyyy/MM/dd HH:mm:ss'  }}
+        h5 {{ device.name }}
+        h6 {{ shot.body.date | date:'HH:mm:ss' }}
         a(ng-href='{{ shot.body.href }}', target='_blank')
-          img(ng-src='{{ shot.body.href + shotSizeUrlParameter() }}', image-onload-animate).screenshot-image
+          img(ng-src='{{ shot.body.href + shotSizeUrlParameter(480) }}', image-onload-animate).screenshot-image
 
     .clearfix