Replaced screenshot Zoom UI with input range along with buttons.

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

@@ -5,8 +5,7 @@ module.exports = function imageOnloadAnimateDirective($parse, $animate) {
       $animate.addClass(element, 'ng-image-not-loaded')
       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,24 +1,18 @@
 module.exports = function ScreenshotsCtrl($scope, SettingsService) {
   $scope.screenshots = []
-  $scope.shotSize = 'small'
+  $scope.shotSizeRange = 200
 
   $scope.clear = function () {
     $scope.screenshots = []
   }
 
-  SettingsService.bind($scope, {
+//  SettingsService.bind($scope, {
-    key: 'shotSize'
+//    key: 'shotSize', storeName: 'ScreenShots.shotSize'
-  , storeName: 'ScreenShots.shotSize'
+//  })
-  })
 
-  $scope.shotSizeUrlParameter = function () {
+  $scope.shotSizeUrlParameter = function (maxSize) {
-    var sizes = {
+    return ($scope.shotSizeRange === maxSize) ? '' :
-      'small': '?crop=100x',
+      '?crop=' + $scope.shotSizeRange + 'x'
-      'medium': '?crop=320x',
-      'large': '?crop=450x',
-      'original': ''
-    }
-    return sizes[$scope.shotSize]
   }
 
   $scope.takeScreenShot = function () {
@@ -29,8 +23,15 @@ module.exports = function ScreenshotsCtrl($scope, SettingsService) {
     })
   }
 
-  $scope.imageLoaded = function (shot) {
+  $scope.zoom = function (param) {
-    shot.ready = true
+    var newValue = parseInt($scope.shotSizeRange, 10) + param.step
-    console.log('[called')
+    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 {
+.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')
+      button.btn.btn-primary-outline.btn-sm.zoom-button(
-      input(type='range', ng-model='shotSizeRange', min='100', max='2000', step='25', style='width: 200px;')
+        ng-click='zoom({min: 80, step: -50})',
-      i.fa.fa-plus(tooltip='Zoom In')
+        ng-disabled='!screenshots.length')
-    small {{ shotSizeRange }}
+        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.btn.btn-primary-outline.btn-sm.zoom-button(
-      button(type='button', ng-model='shotSize', btn-radio="'small'", title='{{"Low"|translate}}').btn.btn-sm.btn-primary-outline
+        ng-click='zoom({max: 480, step: 50})',
-        span.fa.fa-fw(translate) L
+        ng-disabled='!screenshots.length')
-      button(type='button', ng-model='shotSize', btn-radio="'medium'", title='{{"Medium"|translate}}').btn.btn-sm.btn-primary-outline
+        i.fa.fa-plus
-        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
 
   .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