dhis2-devs team mailing list archive

[noreply@xxxxxxxxxxxxx]

------------------------------------------------------------
revno: 18395
committer: Abyot Asalefew Gizaw <abyota@xxxxxxxxx>
branch nick: dhis2
timestamp: Tue 2015-02-24 18:47:51 +0100
message:
  tracker-capture: better responsive widget layout. if one of the columns contains no widget then the other column takes full space.
modified:
  dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dashboard/dashboard-controller.js
  dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dashboard/dashboard.html


--
lp:dhis2
https://code.launchpad.net/~dhis2-devs-core/dhis2/trunk

Your team DHIS 2 developers is subscribed to branch lp:dhis2.
To unsubscribe from this branch go to https://code.launchpad.net/~dhis2-devs-core/dhis2/trunk/+edit-subscription

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dashboard/dashboard-controller.js'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dashboard/dashboard-controller.js	2015-02-24 11:08:22 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dashboard/dashboard-controller.js	2015-02-24 17:47:51 +0000
@@ -29,7 +29,7 @@
         $scope.widgetsChanged = [];
         $scope.dashboardStatus = [];
         $scope.dashboardWidgetsOrder = {biggerWidgets: [], smallerWidgets: []};
-        $scope.orderChanged = false;
+        $scope.orderChanged = false;        
         
         DashboardLayoutService.get().then(function(response){
             $scope.dashboardLayouts = response;
@@ -79,14 +79,24 @@
                 }
             });
 
+            $scope.hasBigger = false;
             angular.forEach(orderByFilter($filter('filter')($scope.dashboardWidgets, {parent: "biggerWidget"}), 'order'), function(w){
+                if(w.show){
+                    $scope.hasBigger = true;
+                }
                 $scope.dashboardWidgetsOrder.biggerWidgets.push(w.title);
             });
 
+            $scope.hasSmaller = false;
             angular.forEach(orderByFilter($filter('filter')($scope.dashboardWidgets, {parent: "smallerWidget"}), 'order'), function(w){
+                if(w.show){
+                    $scope.hasSmaller = true;
+                }
                 $scope.dashboardWidgetsOrder.smallerWidgets.push(w.title);
             });
             
+            setWidgetsSize();
+            
             AttributesFactory.getAll().then(function(atts){
                 $scope.attributes = [];  
                 $scope.attributesById = [];
@@ -98,6 +108,20 @@
                 $scope.broadCastSelections();
             });            
         });        
+    };    
+    
+    
+    var setWidgetsSize = function(){        
+        
+        $scope.widgetSize = {smaller: "col-sm-6 col-md-4", bigger: "col-sm-6 col-md-8"};
+        
+        if(!$scope.hasSmaller){
+            $scope.widgetSize = {smaller: "col-sm-1", bigger: "col-sm-11"};
+        }
+
+        if(!$scope.hasBigger){
+            $scope.widgetSize = {smaller: "col-sm-11", bigger: "col-sm-1"};
+        }
     };
     
     if($scope.selectedTeiId){
@@ -238,27 +262,36 @@
     
     var saveDashboardLayout = function(){
         var widgets = [];
+        $scope.hasBigger = false;
+        $scope.hasSmaller = false;
         angular.forEach($rootScope.dashboardWidgets, function(widget){
             var w = angular.copy(widget);            
             if($scope.orderChanged){
                 if($scope.widgetsOrder.biggerWidgets.indexOf(w.title) !== -1){
+                    $scope.hasBigger = $scope.hasBigger || w.show;
                     w.parent = 'biggerWidget';
                     w.order = $scope.widgetsOrder.biggerWidgets.indexOf(w.title);
                 }
                 
                 if($scope.widgetsOrder.smallerWidgets.indexOf(w.title) !== -1){
+                    $scope.hasSmaller = $scope.hasSmaller || w.show;
                     w.parent = 'smallerWidget';
                     w.order = $scope.widgetsOrder.smallerWidgets.indexOf(w.title);
                 }
-            }            
+            }
             widgets.push(w);
         });
-            
+
         if($scope.selectedProgram && $scope.selectedProgram.id){
             $scope.dashboardLayouts[$scope.selectedProgram.id] = {widgets: widgets, program: $scope.selectedProgram.id};
         }
         
         DashboardLayoutService.saveLayout($scope.dashboardLayouts).then(function(){
+            if(!$scope.orderChanged){
+                $scope.hasSmaller = $filter('filter')($scope.dashboardWidgets, {parent: "smallerWidget", show: true}).length > 0;
+                $scope.hasBigger = $filter('filter')($scope.dashboardWidgets, {parent: "biggerWidget", show: true}).length > 0;                                
+            }                
+            setWidgetsSize();      
         });
     };
     

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dashboard/dashboard.html'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dashboard/dashboard.html	2015-02-18 13:12:41 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dashboard/dashboard.html	2015-02-24 17:47:51 +0000
@@ -27,7 +27,7 @@
     
     <div class="col-sm-12">
         <div class="row">            
-            <div class="col-sm-6 col-md-8">
+            <div ng-class="widgetSize.bigger">
                 <div id="biggerWidget"
                     d2-sortable  
                     bigger-widgets={{ dashboardWidgets  | filter: {parent: 'biggerWidget'} }} 
@@ -38,7 +38,7 @@
                     </div>                                       
                 </div>                
             </div>            
-            <div class="col-sm-6 col-md-4">
+            <div ng-class="widgetSize.smaller">
                 <div id="smallerWidget" 
                     d2-sortable 
                     bigger-widgets={{ dashboardWidgets  | filter: {parent: 'biggerWidget'} }}