#570 removed paddings, also added pinning capability for collapse

5 files changed, 36 insertions, 7 deletions

diff --git a/www/css/style.css b/www/css/style.css
index 81db03f7..f7dd5511 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -259,6 +259,17 @@ figcaption {
     font-size: 80%;
 }
 
+.normal-subfigcaption {
+    background: rgba(0, 0, 0, 0.2);
+    color: #FFF;
+    position: absolute;
+    bottom: 20px;
+    left: 0;
+    right: 0;
+    opacity: 1;
+    font-size: 80%;
+}
+
 .normal-figheader {
     background: rgba(0, 0, 0, 0.2);
     color: #FFF;
diff --git a/www/js/EventModalCtrl.js b/www/js/EventModalCtrl.js
index a450fe80..73f45474 100644
--- a/www/js/EventModalCtrl.js
+++ b/www/js/EventModalCtrl.js
@@ -968,7 +968,7 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro
                         NVRDataModel.log(">>>Modal was exited, not starting checkAllEvents");
                     }
 
-                }, 5000);
+                }, 2000);
             }
 
         }
diff --git a/www/js/MomentCtrl.js b/www/js/MomentCtrl.js
index c5300d0e..d4eceb7f 100644
--- a/www/js/MomentCtrl.js
+++ b/www/js/MomentCtrl.js
@@ -115,6 +115,8 @@ angular.module('zmApp.controllers').controller('zmApp.MomentCtrl', ['$scope', '$
       var mid = data.events[i].Event.MonitorId;
       data.events[i].Event.order = i;
 
+      data.events[i].Event.pinned = false;
+      data.events[i].Event.pinnedIcon = "ion-pin";
 
       // console.log ("---> PUSHING "+data.events[i].Event.StartTime);
       moments.push(data.events[i]);
@@ -234,6 +236,18 @@ angular.module('zmApp.controllers').controller('zmApp.MomentCtrl', ['$scope', '$
 
   };
 
+  $scope.togglePin =function(ndx) {
+    $scope.moments[ndx].Event.pinned = !$scope.moments[ndx].Event.pinned;
+    if ($scope.moments[ndx].Event.pinned) {
+      $scope.moments[ndx].Event.pinnedIcon ="animated infinite flash ion-pin";
+    }
+    else {
+      $scope.moments[ndx].Event.pinnedIcon ="ion-pin";
+
+    }
+
+
+  };
 
 // When a user taps on collapse on an eid,
 // all events after that for the same monitor should be collapsed
@@ -260,7 +274,7 @@ angular.module('zmApp.controllers').controller('zmApp.MomentCtrl', ['$scope', '$
     }
 
     for (var i = ndx+1; i < $scope.moments.length; i++ ) {
-     if ($scope.moments[i].Event.MonitorId == mid) {
+     if ($scope.moments[i].Event.MonitorId == mid && !$scope.moments[i].Event.pinned ) {
         $scope.moments[i].Event.hide = hide;
         $scope.moments[i].Event.icon = "ion-code-working";
         $scope.moments[i].Event.collapseCount = "";
@@ -394,7 +408,7 @@ angular.module('zmApp.controllers').controller('zmApp.MomentCtrl', ['$scope', '$
       itemSelector: '.grid-item',
       // columnWidth: 10
       horizontalOrder: true,
-      gutter: 2,
+      gutter: 0,
       initLayout: true,
       percentPosition: true,
 
diff --git a/www/templates/events-modal.html b/www/templates/events-modal.html
index 3458fb2e..b947f03a 100644
--- a/www/templates/events-modal.html
+++ b/www/templates/events-modal.html
@@ -72,13 +72,14 @@
                     <canvas style="padding-left:23px;
                         padding-right:23px;" id="eventchart" width="auto" height="20"></canvas>
                 </div>
+                
                 <div ng-if="checkEventOn" id="event_slider" data-tap-disabled="false">
                     <div class="range">
                         <input on-drag="enableSliderBlock()" on-release="youChangedSlider()" type="range" min="0" max="{{currentEventDuration}}" ng-model="sliderProgress.progress">
                     </div>
                 </div>
                 <div id="event_rate_text">
-                    @{{currentRate}}x {{'kAt' | translate}}:{{currentProgress.progress}}s
+                    @{{currentRate}}x {{'kAt' | translate}}:{{currentProgress.progress}}s 
                 </div>
             </div>
             
diff --git a/www/templates/moment.html b/www/templates/moment.html
index bdd64b6a..f90ea0de 100644
--- a/www/templates/moment.html
+++ b/www/templates/moment.html
@@ -22,7 +22,7 @@
     </div>
 
 
-    <ion-content class="padding" delegate-handle="moment-delegate" overflow-scroll="false" mouse-wheel-scroll style="background-color:#444444" >
+    <ion-content delegate-handle="moment-delegate" overflow-scroll="false" mouse-wheel-scroll style="background-color:#444444" >
 
 
         <div ng-if="isSubMenu">
@@ -66,12 +66,15 @@
            
            
             <figure class="grid-item grid-item-{{gridSize}}" ng-repeat="moment in moments | onlyEnabledMoments">
-                <figcaption class="normal-figheader">{{moment.Event.monitorName}}<span style="float:right"><button class="button button-small button-icon icon  {{moment.Event.icon}}" ng-click="toggleCollapse(moment.Event.MonitorId, moment.Event.Id, $index)"></button>{{moment.Event.collapseCount}}&nbsp;</span></figcaption>
+                <figcaption class="normal-figheader">&nbsp;{{moment.Event.monitorName}}<span style="float:right"><button class="button button-small button-icon icon  {{moment.Event.icon}}" ng-click="toggleCollapse(moment.Event.MonitorId, moment.Event.Id, $index)"></button>{{moment.Event.collapseCount}}&nbsp;</span></figcaption>
                  <img   image-spinner-src="{{moment.Event.baseURL}}/index.php?view=image&fid={{moment.Event.MaxScoreFrameId}}&width={{moment.Event.thumbWidth*2}}&height={{moment.Event.thumbHeight*2}}" img-spinner-w="{{moment.Event.width}}"
                  img-spinner-h="{{moment.Event.height}}" image-spinner-loader="lines" 
             on-tap="playEvent(moment)"/>
+
+            <figcaption class="normal-subfigcaption"><span style="float:right"><button class="button button-small button-icon icon  {{moment.Event.pinnedIcon}}" ng-click="togglePin( $index)"></button></span></figcaption>
+            
             <!--on-tap="showThumbnail(moment.Event.baseURL,moment.Event.MaxScoreFrameId)"-->
-            <figcaption class="normal-figcaption">{{moment.Event.humanizeTime}}<span style="float:right">{{hourmin(moment.Event.StartTime)}}</span></figcaption>
+            <figcaption class="normal-figcaption">&nbsp;{{moment.Event.humanizeTime}}<span style="float:right">{{hourmin(moment.Event.StartTime)}}&nbsp;</span></figcaption>
             </figure>
             
         </div>