diff options
Diffstat (limited to 'www')
| -rw-r--r-- | www/js/EventCtrl.js | 74 | ||||
| -rwxr-xr-x | www/js/app.js | 2 | ||||
| -rw-r--r-- | www/templates/events.html | 2 |
3 files changed, 40 insertions, 38 deletions
diff --git a/www/js/EventCtrl.js b/www/js/EventCtrl.js index 23fda099..0038579f 100644 --- a/www/js/EventCtrl.js +++ b/www/js/EventCtrl.js @@ -79,9 +79,12 @@ angular.module('zmApp.controllers') $scope.$on('sizechanged', function() { - $timeout (function () { + recomputeRowHeights(); recomputeThumbSize(); - },10); + $scope.eventsBeingLoaded = true; + $timeout (function() { + $scope.eventsBeingLoaded = false; + },20); }); @@ -214,48 +217,53 @@ angular.module('zmApp.controllers') NVR.computeDeviceSize(); }); - - $scope.$on('$ionicView.beforeEnter', function () { - - /* - It's a bleeding mess trying to get this working on - multiple devices and orientations with flex-box, primarily - because I'm not a CSS guru. - - Plus, collection-repeat offers significant performance benefits - and this requires fixed row sizes across all rows. - - The layout I am using: - a) If you are using large thumbs, it's a single column format - b) If you are using small thumbs, it's a two column format - - The max size of the image is in computeThumbnailSize() - */ - + + function recomputeRowHeights() { + NVR.debug ("recomputing row height"); var ld = NVR.getLogin(); if (ld.eventViewThumbs != 'none') { if (ld.eventViewThumbsSize == 'large') { NVR.debug ('Switching to big thumbs style'); $scope.thumbClass = 'large'; - $scope.rowHeightRegular = 450; + $scope.rowHeightRegular = Math.min(450, $rootScope.devWidth); $scope.rowHeightExpanded = $scope.rowHeightRegular + 230; } else { NVR.debug ('using small thumbs style'); $scope.thumbClass = 'small'; - $scope.rowHeightRegular = 250; - $scope.rowHeightExpanded = $scope.rowHeightRegular + 200; + $scope.rowHeightRegular = Math.min(250, $rootScope.devWidth); + $scope.rowHeightExpanded = $scope.rowHeightRegular + 230; } } else { NVR.debug ('No thumbs'); $scope.rowHeightRegular = 170; - $scope.rowHeightExpanded = $scope.rowHeightRegular + 200; + $scope.rowHeightExpanded = $scope.rowHeightRegular + 230; } $scope.rowHeight = $scope.rowHeightRegular; - $scope.mid = ''; + } + + $scope.$on('$ionicView.beforeEnter', function () { + + /* + It's a bleeding mess trying to get this working on + multiple devices and orientations with flex-box, primarily + because I'm not a CSS guru. + + Plus, collection-repeat offers significant performance benefits + and this requires fixed row sizes across all rows. + The layout I am using: + a) If you are using large thumbs, it's a single column format + b) If you are using small thumbs, it's a two column format + + The max size of the image is in computeThumbnailSize() + */ + + recomputeRowHeights(); + $scope.mid = ''; + var ld = NVR.getLogin(); if (ld.eventViewThumbs != 'objdetect_gif') { maxEventsToLoad = 50; } else { @@ -2369,7 +2377,6 @@ angular.module('zmApp.controllers') NVR.debug("EventCtrl:Old event scrub will hide now"); oldEvent.Event.ShowScrub = false; - event.Event.rowHeight = $scope.rowHeightRegular; oldEvent = ""; } @@ -2396,7 +2403,6 @@ angular.module('zmApp.controllers') if (event.Event.ShowScrub == true) // turn on display now { - event.Event.rowHeight = $scope.rowHeightExpanded; if (groupType == 'alarms') { // $ionicListDelegate.canSwipeItems(false); //NVR.debug ("Disabling flag swipe as alarms are swipable"); @@ -2504,7 +2510,6 @@ angular.module('zmApp.controllers') }; - event.Event.rowHeight = $scope.rowHeightExpanded; $ionicScrollDelegate.resize(); $scope.mycarousel.index = 0; @@ -2630,7 +2635,6 @@ angular.module('zmApp.controllers') // // $ionicListDelegate.canSwipeItems(true); // NVR.debug ("enabling options swipe"); - event.Event.rowHeight = $scope.rowHeightRegular; $ionicSideMenuDelegate.canDragContent(true); $ionicScrollDelegate.resize(); @@ -3317,9 +3321,8 @@ angular.module('zmApp.controllers') function recomputeThumbSize() { // NVR.debug("EventCtrl: recompute thumbnails"); - + NVR.debug ("recompute thumbs size"); // remember, devHeight/devWidth upate 300ms after rotation - $timeout ( function () { for (var i = 0; i < $scope.events.length; i++) { var tempMon = NVR.getMonitorObject($scope.events[i].Event.MonitorId); if (tempMon != undefined) { @@ -3339,7 +3342,6 @@ angular.module('zmApp.controllers') } - },500); } @@ -3366,21 +3368,21 @@ angular.module('zmApp.controllers') maxRowHeight = $scope.rowHeight - 190; if (landscape) { // go till 90% of width in large landscape, but restricted to useable row height - return calculateAspectRatioFit(mw, mh, 0.9* $rootScope.devWidth, maxRowHeight); + return calculateAspectRatioFit(mw, mh, 0.95* $rootScope.devWidth, maxRowHeight); } else { // go till 80% of width in large portrait, but restricted to useable row height - return calculateAspectRatioFit(mw, mh, 0.8* $rootScope.devWidth, maxRowHeight); + return calculateAspectRatioFit(mw, mh, 0.95* $rootScope.devWidth, maxRowHeight); } } else { // small - maxRowHeight = $scope.rowHeight - 150; + maxRowHeight = $scope.rowHeight - 120; if (landscape) { // go till 50% of width in small landscape, but restricted to useable row height return calculateAspectRatioFit(mw, mh, 0.5* $rootScope.devWidth, maxRowHeight); } else { // go till 30% of width in small portrait, but restricted to useable row height - return calculateAspectRatioFit(mw, mh, 0.3* $rootScope.devWidth, maxRowHeight); + return calculateAspectRatioFit(mw, mh, 0.5* $rootScope.devWidth, maxRowHeight); } } diff --git a/www/js/app.js b/www/js/app.js index a21d2da1..57eb9a3f 100755 --- a/www/js/app.js +++ b/www/js/app.js @@ -1487,7 +1487,7 @@ angular.module('zmApp', [ NVR.computeDeviceSize(); $rootScope.$broadcast('sizechanged'); - },300); + },100); }; diff --git a/www/templates/events.html b/www/templates/events.html index 06efc92f..77605e8d 100644 --- a/www/templates/events.html +++ b/www/templates/events.html @@ -33,7 +33,7 @@ <ion-list show-delete="eventList.showDelete"> <ion-item force-refresh-images="true" collection-repeat="event in events| filter:search.text | eventListFilter" force-refresh-images=true - item-height="event.Event.rowHeight" id="item-{{$index}}" on-swipe-left="checkSwipe($index);" force-refresh-images="true" > + item-height="event.Event.ShowScrub? rowHeightExpanded:rowHeight" id="item-{{$index}}" on-swipe-left="checkSwipe($index);" force-refresh-images="true" > <span style="float:left;margin-top:-18px;background-color:#96281B;color:#fff;font-size:11px;opacity:0.7;border-radius: 0px 0px 5px 5px;"> |