#570 added resize and save option

4 files changed, 79 insertions, 8 deletions

diff --git a/www/js/DataModel.js b/www/js/DataModel.js
index a9602ed1..e5338bc2 100755
--- a/www/js/DataModel.js
+++ b/www/js/DataModel.js
@@ -169,6 +169,8 @@ angular.module('zmApp.controllers')
         'enableSlowLoading': false,
         'isFullScreen': false,
         'reloadInMontage': false,
+        'momentGridSize': 40,
+
 
       };
 
@@ -1018,6 +1020,12 @@ angular.module('zmApp.controllers')
 
                   }
 
+                  if (typeof loginData.momentGridSize == 'undefined') {
+
+                    loginData.momentGridSize = 40;
+
+                  }
+
                   log("DataModel init recovered this loginData as " + JSON.stringify(loginData));
                 } else {
                   log("defaultServer configuration NOT found. Keeping login at defaults");
diff --git a/www/js/MomentCtrl.js b/www/js/MomentCtrl.js
index 6edc5dd3..a170fdc8 100644
--- a/www/js/MomentCtrl.js
+++ b/www/js/MomentCtrl.js
@@ -111,6 +111,27 @@ angular.module('zmApp.controllers').controller('zmApp.MomentCtrl', ['$scope', '$
 
     }
 
+    $scope.toggleSubMenu = function() {
+    
+       
+        $scope.isSubMenu = !$scope.isSubMenu;
+        console.log ($scope.isSubMenu);    };
+
+    $scope.sizeChanged = function (dirn) {
+        var sz = $scope.gridSize;
+        sz = sz + 5 * dirn;
+        if (sz < 5) sz = 5;
+        if (sz > 100) sz = 100;
+        $scope.gridSize = sz;
+
+        var ld = NVRDataModel.getLogin();
+        ld.momentGridSize = $scope.gridSize;
+        NVRDataModel.setLogin(ld);
+
+        $timeout (function () {masonry.layout();},300);
+
+
+    };
 
     $scope.reLayout = function () {
         NVRDataModel.log ("relaying masonry");
@@ -198,11 +219,11 @@ angular.module('zmApp.controllers').controller('zmApp.MomentCtrl', ['$scope', '$
         masonry = new Masonry('.grid',
         {
             itemSelector: '.grid-item',
-            percentPosition: true,
-            columnWidth: '.grid-sizer',
+           // columnWidth: 10
             horizontalOrder: true,
             gutter: 2,
-            initLayout: true
+            initLayout: true,
+            percentPosition:true,
 
         });
         //console.log ("**** mygrid is " + JSON.stringify(elem));
@@ -427,6 +448,25 @@ angular.module('zmApp.controllers').controller('zmApp.MomentCtrl', ['$scope', '$
         masonry.destroy();
     });
 
+
+
+    $scope.$on('$ionicView.beforeEnter', function()
+    {
+        /*var w = Math.round(parseInt($rootScope.devWidth) / parseInt($rootScope.pixelRatio)) ;
+
+        w = $rootScope.devWidth;
+
+        var p = w / 100;
+
+        console.log ("old P="+p);
+        p = Math.ceil(p/5)*5;
+        console.log ("P="+p);*/
+
+        var ld = NVRDataModel.getLogin();
+
+        $scope.gridSize = ld.momentGridSize;
+        $scope.isSubMenu = false;
+    });
    
     $scope.$on('$ionicView.afterEnter', function()
     {
diff --git a/www/js/app.js b/www/js/app.js
index d8c78a0d..39e17199 100755
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -1405,6 +1405,7 @@ angular.module('zmApp', [
 
       var checkOrientation = function () {
         var pixelRatio = window.devicePixelRatio || 1;
+        $rootScope.pixelRatio = pixelRatio;
         $rootScope.devWidth = ((window.innerWidth > 0) ? window.innerWidth : screen.width);
         $rootScope.devHeight = ((window.innerHeight > 0) ? window.innerHeight : screen.height);
         //console.log("********NEW Computed Dev Width & Height as" + $rootScope.devWidth + "*" + $rootScope.devHeight);
@@ -1660,6 +1661,7 @@ angular.module('zmApp', [
       function continueInitialInit() {
         console.log("continueinit");
         var pixelRatio = window.devicePixelRatio || 1;
+        $rootScope.pixelRatio = pixelRatio;
         $rootScope.devWidth = ((window.innerWidth > 0) ? window.innerWidth : screen.width);
         $rootScope.devHeight = ((window.innerHeight > 0) ? window.innerHeight : screen.height);
         // for making sure we canuse $state.go with ng-click
diff --git a/www/templates/moment.html b/www/templates/moment.html
index 4720fa28..f3041910 100644
--- a/www/templates/moment.html
+++ b/www/templates/moment.html
@@ -7,21 +7,42 @@
 
     <ion-nav-buttons side="right">
 
-            <a  class="button button-icon icon ion-grid" ng-click="reLayout()" ;></a>
+            <a  class="button button-icon icon ion-android-more-vertical" ng-click="toggleSubMenu()" ;></a>
 
-            <a  class="button button-icon icon ion-android-more-vertical" ng-click="popover.show($event)" ;>&nbsp;&nbsp;&nbsp;</a>
+            <a  class="button button-icon icon ion-chevron-down" ng-click="popover.show($event)" ;>&nbsp;&nbsp;&nbsp;</a>
             
     </ion-nav-buttons>
-    <ion-content class="padding" scroll-sista delegate-handle="moment-delegate" overflow-scroll="false" mouse-wheel-scroll style="background-color:#444444" >
+    <ion-content class="padding" delegate-handle="moment-delegate" overflow-scroll="false" mouse-wheel-scroll style="background-color:#444444" >
+
+
+        <div ng-if="isSubMenu">
+            <br/>
+                <div id="flyoutmenu" style="float:left">
+                        <ul>
+                            <li>
+                                <a href="" ng-click="sizeChanged(1)"> <i class="ion-plus-circled"></i></a>
+                            </li>
+                            <li>
+                                <a href="" ng-click="sizeChanged(-1)"> <i class="ion-minus-circled"></i></a>
+                            </li>
+                            <li>
+                                    <a href="" ng-click="reLayout()"> <i class="ion-grid"></i></a>
+                            </li>
+                        </ul>
+                </div>
+            <div style="clear: both;"></div>
+            <br/>
+        </div>
+        
         
         <div style="color:white" ng-if="!moments.length">
             Nothing to show yet...
         </div>
 
         <div class="grid" id="mygrid">
-            <div class="grid-sizer grid-item-10"></div>
            
-            <figure class="grid-item" ng-repeat="moment in moments | onlyEnabledMoments">
+           
+            <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)"></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"