#179 UI clean up - seems to be working now

Former-commit-id: 8aa4a47e204e27ce0453d6901043067be48a6447

4 files changed, 82 insertions, 37 deletions

diff --git a/www/css/style.css b/www/css/style.css
index dc5b4de5..ee4a4dc3 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -196,6 +196,7 @@ Credit: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
 
 figure {
      position: relative;
+    
 }
 
 figure img {
@@ -204,6 +205,9 @@ figure img {
     height: auto;
 }
 figcaption {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space:nowrap;
     
 }
 
diff --git a/www/js/DataModel.js b/www/js/DataModel.js
index b68b478e..66c0c1a5 100644
--- a/www/js/DataModel.js
+++ b/www/js/DataModel.js
@@ -124,7 +124,7 @@ angular.module('zmApp.controllers')
          
          
           
-            zmLog("Saving all parameters to storage");
+            //zmLog("Saving all parameters to storage");
             //zmDebug ("DataModel/setLogin: writing " + JSON.stringify(newLogin));
             
             //$localstorage.setObject($rootScope.currentServerGroup, loginData);
diff --git a/www/js/MontageCtrl.js b/www/js/MontageCtrl.js
index ab9a73e3..f65d8fec 100644
--- a/www/js/MontageCtrl.js
+++ b/www/js/MontageCtrl.js
@@ -82,7 +82,7 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', '
     var hiddenOrder = []; // 1 = hide, 0 = don't hide
     
     var tempMonitors = message;
-    
+    $scope.sliderChanging = false;
     
     if (tempMonitors.length == 0)
     {
@@ -148,7 +148,7 @@ function initPackery()
         }
         else
         {
-            console.log ("POSITION STR IS " + positionsStr);
+            //console.log ("POSITION STR IS " + positionsStr);
             positions = JSON.parse(positionsStr);
             ZMDataModel.zmLog ("found a packery layout");
             layouttype = false;
@@ -169,7 +169,7 @@ function initPackery()
         imagesLoaded(elem).on('progress', function() {
                 console.log ("******** SOME IMAGE LOADED");
                 progressCalled = true;
-                if (layouttype) $timeout (function(){pckry.layout();},50);
+                if (layouttype) $timeout (function(){pckry.layout();},100);
         });
         
         imagesLoaded(elem).on('always', function() {
@@ -196,7 +196,20 @@ function initPackery()
                 if (!isEmpty(positions))
                 {
                     ZMDataModel.zmLog ("Arranging as per packery grid");
-                    $timeout(function(){pckry.initShiftLayout(positions, 'data-item-id');},500);
+                    
+                    for (var i =0; i< $scope.MontageMonitors.length; i++)
+                    {
+                        for (var j=0; j < positions.length; j++)
+                        {
+                            if ($scope.MontageMonitors[i].Monitor.Id == positions[j].attr)
+                            {
+                                $scope.MontageMonitors[i].Monitor.gridScale = positions[j].size;
+                                ZMDataModel.zmDebug ("Setting monitor ID: " + $scope.MontageMonitors[i].Monitor.Id + " to size: " +positions[j].size);
+                            }
+                            //console.log ("Index:"+positions[j].attr+ " with size: " + positions[j].size);
+                        }
+                    }
+                    $timeout(function(){pckry.initShiftLayout(positions, 'data-item-id');},100);
                     //$grid.packery( 'initShiftLayout', initPositions, 'data-item-id' );
                 }
                
@@ -212,7 +225,7 @@ function initPackery()
             });
             
             var positions = pckry.getShiftPositions('data-item-id');
-             console.log ("POSITIONS MAP " + JSON.stringify(positions));
+             //console.log ("POSITIONS MAP " + JSON.stringify(positions));
              var ld = ZMDataModel.getLogin();
              ld.packeryPositions = JSON.stringify(positions);
              ZMDataModel.setLogin(ld);
@@ -523,7 +536,7 @@ function initPackery()
             " and hidden order as " + hiddenOrder.toString());
         $scope.modal.remove();
         ZMDataModel.zmLog ("Reloading packery");
-        $timeout (function(){pckry.reloadItems(); pckry.layout();},50);
+        $timeout (function(){pckry.reloadItems(); pckry.layout();},500);
     };
 
     $scope.cancelReorder = function () {
@@ -1146,11 +1159,33 @@ function initPackery()
     {
         for (var i=0; i< $scope.MontageMonitors.length; i++)
         {
-            $scope.MontageMonitors[i].Monitor.gridScale="20";
+            if ($scope.isDragabillyOn)
+            {
+             if ($scope.MontageMonitors[i].Monitor.selectStyle=="dragborder-selected")
+                $scope.MontageMonitors[i].Monitor.gridScale="20"; 
+            }
+            else
+            {
+                $scope.MontageMonitors[i].Monitor.gridScale="20";
+            }
         }
-        $timeout (function(){pckry.layout();},50);
-        $scope.slider.monsize = 2;
-        
+        $timeout (function()
+            {
+                
+                pckry.once( 'layoutComplete', function() {
+                    console.log ("Layout complete");
+                    var positions = pckry.getShiftPositions('data-item-id');
+                   // console.log ("POSITIONS MAP " + JSON.stringify(positions));
+                    var ld = ZMDataModel.getLogin();
+                    ld.packeryPositions = JSON.stringify(positions);
+                    ZMDataModel.setLogin(ld);
+                    $scope.slider.monsize = 2;
+                });
+                pckry.layout();
+                $timeout(function(){pckry.layout(); },100);// don't ask
+            
+            },100);
+ 
     };
     
 
@@ -1161,11 +1196,19 @@ function initPackery()
     // a copy and the value never changes
     //---------------------------------------------------------
 
-    $scope.sliderChanged = function () {
+    $scope.sliderChanged = function (dirn) {
+        
+        if ($scope.sliderChanging)
+        {
+           // console.log ("too fast my friend");
+            //$scope.slider.monsize = oldSliderVal;
+           // return;
+        }
+        
+        $scope.sliderChanging = true;
         
-        if (oldSliderVal == $scope.slider.monsize) return;
         
-        var dirn = (oldSliderVal > $scope.slider.monsize) ? -1:1;
+       // var dirn = (oldSliderVal > $scope.slider.monsize) ? -1:1;
          //pckry.destroy();
          //$scope.gridScale = "grid-item-" + ($scope.slider.monsize * 10).toString();
         
@@ -1193,26 +1236,24 @@ function initPackery()
                   $scope.MontageMonitors[i].Monitor.gridScale= curVal;
                   
               }
-              oldSliderVal = $scope.slider.monsize;
+              //oldSliderVal = $scope.slider.monsize;
           }
         
         
          //console.log("**** CSS IS " + $scope.gridScale);
          $timeout(function () {
-             pckry.layout();
-             pckry.getItemElements().forEach(function (itemElem) {
              
-                console.log (itemElem.attributes['data-item-id'].value+" size  "+itemElem.attributes['data-item-size'].value );
-                 
-                     
-            });
-              var positions = pckry.getShiftPositions('data-item-id');
-             console.log ("POSITIONS MAP " + JSON.stringify(positions));
-             var ld = ZMDataModel.getLogin();
-             ld.packeryPositions = JSON.stringify(positions);
-             ZMDataModel.setLogin(ld);
-          
-         },50);
+               pckry.once( 'layoutComplete', function() {
+                    var positions = pckry.getShiftPositions('data-item-id');
+                    //console.log ("POSITIONS MAP " + JSON.stringify(positions));
+                    var ld = ZMDataModel.getLogin();
+                    ld.packeryPositions = JSON.stringify(positions);
+                    ZMDataModel.setLogin(ld);
+                   $ionicLoading.hide();
+                   $scope.sliderChanging = false;
+                });
+                pckry.layout();
+        },100);
        // pckry.destroy();
      //   $timeout ( function () {initPackery(); },500);
           //pckry.reloadItems();
diff --git a/www/templates/montage.html b/www/templates/montage.html
index 60b9321a..dea87247 100644
--- a/www/templates/montage.html
+++ b/www/templates/montage.html
@@ -42,20 +42,20 @@
         </ion-refresher>-->
 
         <span ng-show="!minimal">
-                <div class="range range-positive">
-                    <i style="color:#bbbbbb" class="icon ion-grid"></i>
-                    <input type="range" ng-model="slider.monsize" min="2"
-                           max="10" ng-change="sliderChanged(slider.monsize)">
-                    <i style="color:#bbbbbb" class="icon ion-image"></i>
-
-                </div>
+            
+            <span ng-click="sliderChanged(1)" style="float:right;margin-top:0px;padding-top:2px;background-color:#6d0909;color:#fff;font-size:25px;opacity:1;width:40px;height:30px;border-radius: 0px 0px 0px 5px;">&nbsp;<i class="ion-plus-circled">&nbsp;</i></span>
+            
+            <span ng-click="sliderChanged(-1)" style="float:left;margin-top:0px;padding-top:2px;background-color:#6d0909;color:#fff;font-size:22px;opacity:1;width:40px;height:30px;border-radius: 0px 0px 5px 0px;">&nbsp;<i class="ion-minus-circled">&nbsp;</i></span>
+            <br/><br/>
+                
+                
         </span>
-
+        
 
         <div class="grid" id="mygrid">
             <div class="grid-sizer grid-item-10"></div>
             <span ng-repeat="monitor in MontageMonitors|limitTo: monLimit" ng-if="monitor.Monitor.Function!='None' && monitor.Monitor.listDisplay!='noshow' && monitor.Monitor.Enabled !='0'">
-            <div class="grid-item grid-item-{{monitor.Monitor.gridScale}} {{dragBorder}}" data-item-id="{{monitor.Monitor.Id}}" data-item-size="{{gridScale}}" >
+            <div class="grid-item grid-item-{{monitor.Monitor.gridScale}} {{dragBorder}}" data-item-id="{{monitor.Monitor.Id}}" data-item-size="{{monitor.Monitor.gridScale}}" >
                 <figure>
                     <div ng-if="!isModalActive" >
                         <div ng-if="$root.authSession!='undefined' && !isBackground()">