From f2619f2c04203ac3a56bf0ac914149df5616ef49 Mon Sep 17 00:00:00 2001
From: Pliable Pixels <pliablepixels@gmail.com>
Date: Thu, 5 Apr 2018 14:22:38 -0400
Subject: added non-obstructing loading indicator for montage and moment

---
 www/css/style.css          | 20 +++++++++++++++++++-
 www/js/MomentCtrl.js       |  6 +++++-
 www/js/MontageCtrl.js      |  5 +++--
 www/templates/moment.html  |  3 +++
 www/templates/montage.html |  2 +-
 5 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/www/css/style.css b/www/css/style.css
index 8d150a3c..5b32a033 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -454,6 +454,24 @@ http://www.cssportal.com/tryit/index.php?file=blog/css-notification-badge */
     width: 95% !important;
 }
 
+
+.screen-note {
+    position: absolute;
+    top:0;
+    left:50%;
+    transform: translate(-50%, 0%);
+    background-color:#82589F;
+    color:white;
+    font-size: 11px;
+    border-radius: 0px 0px 5px 5px;
+    z-index: 99999;
+    padding-top: 2px;
+    padding-bottom: 2px;
+    padding-left:5px;
+    padding-right:5px;
+    opacity: 0.7;
+}
+
 .events-modal-camera-icon {
     position: absolute;
     bottom: 120px;
@@ -535,7 +553,7 @@ http://www.cssportal.com/tryit/index.php?file=blog/css-notification-badge */
     -webkit-writing-mode: vertical-lr;
     position: absolute;
     top: 30%;
-    transform: translateY(-50%: );
+    transform: translateY(-50%);
     right: 0;
     background-color: #f1c40f;
     color: #000;
diff --git a/www/js/MomentCtrl.js b/www/js/MomentCtrl.js
index 3ed6a49a..4a0d41ec 100644
--- a/www/js/MomentCtrl.js
+++ b/www/js/MomentCtrl.js
@@ -514,6 +514,8 @@ angular.module('zmApp.controllers').controller('zmApp.MomentCtrl', ['$scope', '$
       noBackdrop: true,
       duration: zm.loadingTimeout
     });*/
+
+    $scope.areImagesLoading = true;
     var progressCalled = false;
 
     var ld = NVRDataModel.getLogin();
@@ -536,6 +538,7 @@ angular.module('zmApp.controllers').controller('zmApp.MomentCtrl', ['$scope', '$
 
       NVRDataModel.debug("All images loaded");
       $ionicLoading.hide();
+      $scope.areImagesLoading = false;
       jiggleAway();
 
       if (!progressCalled) {
@@ -825,6 +828,7 @@ angular.module('zmApp.controllers').controller('zmApp.MomentCtrl', ['$scope', '$
   $scope.$on('$ionicView.beforeEnter', function () {
 
     $scope.showIcons = true;
+    $scope.areImagesLoading = true;
     $scope.expand = false;
     var ld = NVRDataModel.getLogin();
 
@@ -858,7 +862,7 @@ angular.module('zmApp.controllers').controller('zmApp.MomentCtrl', ['$scope', '$
 
   $scope.$on('$ionicView.afterEnter', function () {
    
-
+    
     getMoments(momentType);
 
 
diff --git a/www/js/MontageCtrl.js b/www/js/MontageCtrl.js
index 9d257d33..5c5fb5ca 100644
--- a/www/js/MontageCtrl.js
+++ b/www/js/MontageCtrl.js
@@ -157,7 +157,6 @@ angular.module('zmApp.controllers')
             //$ionicHistory.clearCache();
             //$state.go('app.montage');
 
-            console.log ("======HOPPAAAAA!!!========"+$state.current.name);
             /*$ionicHistory.clearCache([$state.current.name]).then(function() {
                 $state.go('app.montage', $stateParams, {reload:true, inherit:false});
               });*/
@@ -207,6 +206,8 @@ angular.module('zmApp.controllers')
             duration: zm.loadingTimeout
         });*/
 
+
+        $scope.areImagesLoading = true;
         var progressCalled = false;
         draggies = [];
         var layouttype = true;
@@ -599,7 +600,7 @@ angular.module('zmApp.controllers')
     function loadNotifications()
     {
         if (multiPortZms) {
-           // console.log ("Skipping timer as multiportZMS="+multiPortZms);
+          // console.log ("Skipping timer as multiportZMS="+multiPortZms);
             return;
         }
 
diff --git a/www/templates/moment.html b/www/templates/moment.html
index 9094559f..bb62c581 100644
--- a/www/templates/moment.html
+++ b/www/templates/moment.html
@@ -24,6 +24,9 @@
 
 
   <ion-content delegate-handle="moment-delegate" overflow-scroll="false" mouse-wheel-scroll style="background-color:#444444">
+
+      <div ng-if="areImagesLoading" class="screen-note">&nbsp;{{ 'kArrangingImages' | translate }}...&nbsp;</div>
+      
     <div ng-if="isSubMenu">
       <br/>
       <div id="flyoutmenu" style="float:left">
diff --git a/www/templates/montage.html b/www/templates/montage.html
index 11008f85..e5ec6c25 100644
--- a/www/templates/montage.html
+++ b/www/templates/montage.html
@@ -25,7 +25,7 @@
     </ion-nav-buttons>
     <ion-content ng-cloak has-bouncing="false" style="background-color:#444444" delegate-handle="montage-delegate" overflow-scroll="false">
     <!--<ion-content scroll-sista ng-cloak has-bouncing="false" style="background-color:#444444" delegate-handle="montage-delegate" overflow-scroll="false">-->
-      
+      <div ng-if="areImagesLoading" class="screen-note">&nbsp;{{ 'kArrangingImages' | translate }}...&nbsp;</div>
           
       
         <div ng-if="!minimal && toggleSubMenu" >
-- 
cgit v1.2.3