From 6432a5651ca2d4e5d297f5cbd824fab9a8066739 Mon Sep 17 00:00:00 2001 From: Gunther Brunner Date: Tue, 27 May 2014 15:48:34 +0900 Subject: [PATCH] Replaced screenshot Zoom UI with input range along with buttons. --- .../image-onload-animate-directive.js | 5 +-- .../screenshots/screenshots-controller.js | 37 ++++++++--------- .../control-panes/screenshots/screenshots.css | 15 ++++++- .../screenshots/screenshots.jade | 40 ++++++++++--------- 4 files changed, 56 insertions(+), 41 deletions(-) diff --git a/res/app/components/stf/image-onload/image-onload-animate-directive.js b/res/app/components/stf/image-onload/image-onload-animate-directive.js index 01085544..b57e20a3 100644 --- a/res/app/components/stf/image-onload/image-onload-animate-directive.js +++ b/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') }) } } diff --git a/res/app/control-panes/screenshots/screenshots-controller.js b/res/app/control-panes/screenshots/screenshots-controller.js index 4d4727d4..a1577607 100644 --- a/res/app/control-panes/screenshots/screenshots-controller.js +++ b/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 } + } diff --git a/res/app/control-panes/screenshots/screenshots.css b/res/app/control-panes/screenshots/screenshots.css index 985e557c..508332ee 100644 --- a/res/app/control-panes/screenshots/screenshots.css +++ b/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; +} diff --git a/res/app/control-panes/screenshots/screenshots.jade b/res/app/control-panes/screenshots/screenshots.jade index dd3e26f6..ca60f4a2 100644 --- a/res/app/control-panes/screenshots/screenshots.jade +++ b/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