diff options
Diffstat (limited to 'www')
| -rw-r--r-- | www/css/style.css | 3 | ||||
| -rw-r--r-- | www/js/EventCtrl.js | 23 | ||||
| -rwxr-xr-x | www/js/app.js | 3 | ||||
| -rw-r--r-- | www/templates/events.html | 53 |
4 files changed, 32 insertions, 50 deletions
diff --git a/www/css/style.css b/www/css/style.css index 626fe0ba..3b9d8160 100644 --- a/www/css/style.css +++ b/www/css/style.css @@ -1917,8 +1917,7 @@ fill-opacity: 0.8; } .smallThumbs { - - flex-wrap:wrap; + float:right; } diff --git a/www/js/EventCtrl.js b/www/js/EventCtrl.js index d5ec228d..acb01b3e 100644 --- a/www/js/EventCtrl.js +++ b/www/js/EventCtrl.js @@ -78,7 +78,12 @@ angular.module('zmApp.controllers') //--------------------------------------------------- - + $scope.$on('sizechanged', function() { + $timeout (function () { + recomputeThumbSize(); + },10); + + }); //we come here is TZ is updated after the view loads var tzu = $scope.$on('tz-updated', function () { @@ -95,7 +100,6 @@ angular.module('zmApp.controllers') $scope.$on('$ionicView.afterEnter', function () { - window.addEventListener("resize", recomputeThumbSize, false); $ionicListDelegate.canSwipeItems(true); // NVR.debug("enabling options swipe"); @@ -192,17 +196,13 @@ angular.module('zmApp.controllers') $scope.$on('$ionicView.beforeEnter', function () { - //console.log ("********* BEFORE ENTER"); - // - - var ld = NVR.getLogin(); if (ld.eventViewThumbsSize == 'large') { NVR.debug ('Switching to big thumbs style'); $scope.thumbClass = 'large'; $scope.rowHeightRegular = 450; - $scope.rowHeightExpanded = $scope.rowHeightRegular + 200; + $scope.rowHeightExpanded = $scope.rowHeightRegular + 230; } else { NVR.debug ('using small thumbs style'); $scope.thumbClass = 'small'; @@ -3003,17 +3003,18 @@ angular.module('zmApp.controllers') } var ld = NVR.getLogin(); var landscape = ($rootScope.devWidth > $rootScope.devHeight) ? true:false; - - var maxRowHeight = $scope.rowHeight - 120; + var maxRowHeight; if (ld.eventViewThumbsSize == 'large') { + maxRowHeight = $scope.rowHeight - 170; if (landscape) { - return calculateAspectRatioFit(mw, mh, 0.7* $rootScope.devWidth, maxRowHeight); + return calculateAspectRatioFit(mw, mh, 0.9* $rootScope.devWidth, maxRowHeight); } else { - return calculateAspectRatioFit(mw, mh, 0.4* $rootScope.devWidth, maxRowHeight); + return calculateAspectRatioFit(mw, mh, 0.8* $rootScope.devWidth, maxRowHeight); } } else { // small + maxRowHeight = $scope.rowHeight - 150; if (landscape) { return calculateAspectRatioFit(mw, mh, 0.5* $rootScope.devWidth, maxRowHeight); diff --git a/www/js/app.js b/www/js/app.js index 8799784d..f85a5571 100755 --- a/www/js/app.js +++ b/www/js/app.js @@ -1480,6 +1480,9 @@ angular.module('zmApp', [ $rootScope.devWidth = ((window.innerWidth > 0) ? window.innerWidth : screen.width); $rootScope.devHeight = ((window.innerHeight > 0) ? window.innerHeight : screen.height); $rootScope.videoHeight = $rootScope.devHeight - 20; + + $rootScope.devWidth *= pixelRatio; + $rootScope.devHeight *= pixelRatio; NVR.debug("resize/orient: " + $rootScope.devWidth + "(w) * " + $rootScope.devHeight+"(h)"); diff --git a/www/templates/events.html b/www/templates/events.html index c92bdffa..04e954fc 100644 --- a/www/templates/events.html +++ b/www/templates/events.html @@ -51,20 +51,10 @@ <i class="ion-clock"></i> {{prettifyDate(event.Event.StartTime)}} {{tzAbbr}} </span> - <div ng-class="::{'row responsive-lg': thumbClass=='large', 'row': thumbClass=='small'}" - style="font-size:80%; color:rgb(110,110,110)"> - - - - - <!--</div>--> - <!--row--> - <!--<div class="row" style="font-size:80%; color:rgb(110,110,110)">--> - <!-- <div class="col">--> - <div class="col"> - <div class="item-text-wrap"> + <div class="row" style="font-size:80%; color:rgb(110,110,110)"> + <div class="col item-text-wrap"> <!-- data --> <!-- this ngswitch displays different icons - depending on the cause of the event --> + depending on the cause of the event --> <span ng-switch on="event.Event.Cause" ng-class="::{'largeThumbsSpan': thumbClass=='large', 'smallThumbsSpan': thumbClass=='small'}"> <span ng-switch-when="Motion"> <i class="ion-android-walk" style="font-size:150%;"></i> @@ -73,45 +63,38 @@ </span> <span ng-switch-when="Signal"> <i class="ion-wifi" style="font-size:150%;"></i> - <!--<i ng-class="(event.Event.DefaultVideo !== undefined && event.Event.DefaultVideo!='')? 'ion-ios-videocam':'ion-images'" style="float:left; padding-left:5px; font-size:100%;"></i>--> - </span> <span ng-switch-default> <i class="ion-ionic" style="font-size:150%;"></i> - - </span> <b><i ng-if="event.Event.Archived=='1'" class="ion-ios-flag" style="color:red"> </i>{{event.Event.MonitorName}}</b> </span> - <span ng-class="::{'largeThumbsSpan': thumbClass=='large', 'smallThumbsSpan': thumbClass=='small'}"> <i class="ion-images"></i> {{event.Event.Frames}} <i class="ion-ios-bell-outline"></i> {{event.Event.AlarmFrames}} <span style="font-size:80%; color:rgb(110,110,110)"> {{humanize(event.Event.Length)}} </span> - </span> - - <span ng-class="::{'largeThumbsSpan': thumbClass=='large', 'smallThumbsSpan': thumbClass=='small'}"> <i class="ion-ios-pricetags-outline"></i> {{event.Event.Name}} - </span> - + <!-- for largeThumbs show image in this column --> + <div ng-if="loginData.eventViewThumbs!='none' && thumbClass=='large'"> + <br/><img bg-color="#6C7A89" ng-src="{{constructThumbnail(event)}}" + on-tap="closeIfOpen(event);openModalWithSnapshot(event)" width="{{event.Event.thumbWidth}}px" + height="{{event.Event.thumbHeight}}px" fallback-src="img/noimage.png" /> + </div> - <!-- <br/> Default video:{{event.Event.relativePath}}{{event.Event.DefaultVideo}}--> - </div> </div> <!-- col--> - <div class="col"> - <div ng-if="loginData.eventViewThumbs!='none'" - ng-class="::{'largeThumbs': thumbClass=='large', 'smallThumbs': thumbClass=='small'}"> - <img bg-color="#6C7A89" ng-src="{{constructThumbnail(event)}}" + <!-- 2 col format for small, 1 col format for large --> + <span ng-if="thumbClass=='small' && loginData.eventViewThumbs!='none'"> + <div class="col"> + <img bg-color="#6C7A89" ng-src="{{constructThumbnail(event)}}" on-tap="closeIfOpen(event);openModalWithSnapshot(event)" width="{{event.Event.thumbWidth}}px" height="{{event.Event.thumbHeight}}px" fallback-src="img/noimage.png" /> - </div> - </div> - <!--</div>--> - </div> + </div> <!--col---> + </span> <!-- thumbs --> + </div> <!--row--> <div ng-if="event.Event.Notes" class="row" style="font-size:80%; color:rgb(110,110,110)"> <i class="ion-clipboard"></i> {{event.Event.Notes}} </div> @@ -136,10 +119,6 @@ ng-click="closeIfOpen(event);openModal(event)"> <span translate="kFootage"></span> </button> - - - - </div> </span> </div> |