#144 - new feature to lay out monitors as rows or columns. Also fixes #143

Former-commit-id: a124696e7b538bd7e854f6a3f5d8f8b2e3175511

2 files changed, 37 insertions, 3 deletions

diff --git a/www/js/MontageCtrl.js b/www/js/MontageCtrl.js
index f05967b2..4b167318 100644
--- a/www/js/MontageCtrl.js
+++ b/www/js/MontageCtrl.js
@@ -1,7 +1,7 @@
 // Controller for the montage view
 /* jshint -W041 */
 /* jslint browser: true*/
-/* global cordova,StatusBar,angular,console,ionic */
+/* global cordova,StatusBar,angular,console,ionic,Masonry */
 
 
 angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', '$rootScope', 'ZMDataModel', 'message', '$ionicSideMenuDelegate', '$timeout', '$interval', '$ionicModal', '$ionicLoading', '$http', '$state', '$ionicPopup', '$stateParams', '$ionicHistory', '$ionicScrollDelegate', '$ionicPlatform', 'zm', '$ionicPopover', '$controller', 'imageLoadingDataShare', '$window', function ($scope, $rootScope, ZMDataModel, message, $ionicSideMenuDelegate, $timeout, $interval, $ionicModal, $ionicLoading, $http, $state, $ionicPopup, $stateParams, $ionicHistory, $ionicScrollDelegate, $ionicPlatform, zm, $ionicPopover, $controller, imageLoadingDataShare, $window) {
@@ -18,6 +18,8 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', '
     $scope.isReorder = false;
     var intervalHandleMontage; // will hold image resize timer on long press
     var montageIndex = 0; // will hold monitor ID to scale in timer
+    
+    var gridcontainer;
 
     $scope.monitorSize = []; // array with montage sizes per monitor
     $scope.scaleDirection = []; // 1 = increase -1 = decrease
@@ -68,6 +70,20 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', '
     
     var loginData = ZMDataModel.getLogin();
     
+    $scope.packMontage = true;
+    
+    
+    
+    
+    if (0)
+    {
+        var elem = angular.element(document.getElementById('.grid'));
+            var msnry = new Masonry( elem, {
+          // options
+          itemSelector: '.grid-item',
+          columnWidth: 200
+        });
+    }
     // --------------------------------------------------------
     // Handling of back button in case modal is open should
     // close the modal
@@ -683,6 +699,12 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', '
 
 
     };
+    
+    
+    $scope.toggleMontageDisplayOrder = function()
+    {
+        $scope.packMontage = !$scope.packMontage;
+    };
 
     //---------------------------------------------------------------------
     // allows you to resize individual montage windows
diff --git a/www/templates/montage.html b/www/templates/montage.html
index df938f0e..de426b45 100644
--- a/www/templates/montage.html
+++ b/www/templates/montage.html
@@ -6,14 +6,24 @@
 
 
     <ion-nav-buttons side="right">
+        
+        <button ng-class="packMontage?'button button-icon button-clear ion-android-more-vertical':'button button-icon button-clear ion-android-more-horizontal'"
+                ng-click="toggleMontageDisplayOrder();">&nbsp;
+        </button>
+        
         <span class="rotate-button">
                 <button class="button button-icon button-clear ion-arrow-swap"
                         ng-click="toggleReorder();">
                 </button>
-        </span>
+        </span>   
+
+  
         <button class="button button-icon button-clear ion-android-contract" ng-click="switchMinimal()">
         </button>
         <!--<button class="button button-icon ion-ios-help-outline" ng-click="popover.show($event)"></button>-->
+        
+        
+        
     </ion-nav-buttons>
 
     <ion-content has-bouncing="false" style="background-color:#444444">
@@ -32,7 +42,9 @@
                 </div>
         </span>
 
-        <div style="-webkit-column-count:{{slider.monsize}};-webkit-column-gap:0px;line-height:0px;">
+       <div ng-style="packMontage ? {'-webkit-column-count':slider.monsize,'-webkit-column-gap':'0px','line-height':'0px'}:{'-webkit-column-count':slider.monsize,'-webkit-column-gap':'0px','line-height':'0px','display':'flex','display':'-webkit-flex','-webkit-flex-direction':'row','flex-direction':'row', 'flex-wrap':'wrap'}">
+            
+            
             <span ng-repeat="monitor in MontageMonitors|limitTo: monLimit" 
                   ng-if="monitor.Monitor.Function!='None' && monitor.Monitor.listDisplay!='noshow' && monitor.Monitor.Enabled !='0'">