From a4da50bf6dd2e3916179e17ace8577dadba69343 Mon Sep 17 00:00:00 2001
From: kunw <kunw@vmware.com>
Date: Thu, 14 Jul 2016 20:43:58 +0800
Subject: [PATCH] add resizable height in replication page.

---
 static/resources/css/replication.css          |  3 +-
 .../list-replication.directive.html           |  8 ++--
 .../replication/list-replication.directive.js | 40 +++++++++++++++++++
 3 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/static/resources/css/replication.css b/static/resources/css/replication.css
index f79862d34..1f41d5c18 100644
--- a/static/resources/css/replication.css
+++ b/static/resources/css/replication.css
@@ -40,8 +40,7 @@
 }
 
 .pane-split {
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: hidden;
   width: 100%;
 }
 
diff --git a/static/resources/js/components/replication/list-replication.directive.html b/static/resources/js/components/replication/list-replication.directive.html
index dfef80342..e5762a57f 100644
--- a/static/resources/js/components/replication/list-replication.directive.html
+++ b/static/resources/js/components/replication/list-replication.directive.html
@@ -24,7 +24,7 @@
       <button ng-if="!vm.isOpen" class="btn btn-success" type="button" ng-click="vm.addReplication()" data-toggle="modal" data-target="#createPolicyModal"><span class="glyphicon glyphicon-plus"></span>// 'add_new_policy' | tr //</button>
       <create-policy reload="vm.retrievePolicy()" action="vm.action" modal-title="//vm.modalTitle//" policy-id="//vm.policyId//"></create-policy>
     </div>
-    <div class="pane-split" id="upon-pane"> 	           
+    <div class="pane-split" id="upon-pane" style="max-height: 760px;"> 	           
       <div class="sub-pane-split">
         <div class="table-head-container">
         <table class="table table-pane table-header">
@@ -74,7 +74,7 @@
       </div>
     </div>
     <div class="col-xs-4 col-md-12 well well-sm well-custom well-split"><div class="col-md-offset-10">//vm.replicationPolicies ? vm.replicationPolicies.length : 0// // 'items' | tr //</div></div>  
-    <!--p class="split-handle"><span class="glyphicon glyphicon-align-justify"></span></p-->
+    <p class="split-handle"><span class="glyphicon glyphicon-align-justify"></span></p>
     <h4 class="h4-custom-down">// 'replication_jobs' | tr //</h4>
     <hr class="hr-line"/>
     <div class="form-inline">
@@ -112,7 +112,7 @@
         <button type="button" class="btn btn-success" ng-click="vm.refreshReplicationJob()" loading-progress hide-target = "true" toggle-in-progress="vm.refreshJobTIP" title="//'refresh' | tr//"><span class="glyphicon glyphicon-refresh"></span></button>
       </div>
     </div> 
-    <div class="pane-split" id="down-pane">   
+    <div class="pane-split" id="down-pane" style="min-height: 142px;">   
       <div class="sub-pane-split">
         <div class="table-head-container">
           <table class="table table-pane table-header">
@@ -126,7 +126,7 @@
       			 </thead>
           </table>
          </div>
-          <div class="table-body-container" style="height: 510px;">
+          <div class="table-body-container" style="height: 510px; min-height: 80px;">
             <table class="table table-pane">
         			 <tbody>
                 <tr ng-if="vm.replicationJobs.length == 0">
diff --git a/static/resources/js/components/replication/list-replication.directive.js b/static/resources/js/components/replication/list-replication.directive.js
index 0d2f8db53..0208c5ff1 100644
--- a/static/resources/js/components/replication/list-replication.directive.js
+++ b/static/resources/js/components/replication/list-replication.directive.js
@@ -252,6 +252,46 @@
     
     function link(scope, element, attrs, ctrl) {
 
+
+      var uponPaneHeight = element.find('#upon-pane').height();		
+      var downPaneHeight = element.find('#down-pane').height();
+      
+      var uponTableHeight = element.find('#upon-pane .table-body-container').height();
+      var downTableHeight = element.find('#down-pane .table-body-container').height();
+      
+      var handleHeight = element.find('.split-handle').height() + element.find('.split-handle').offset().top + element.find('.well').height() - 24;		
+      
+      var maxDownPaneHeight = 760;		
+                      		
+      element.find('.split-handle').on('mousedown', mousedownHandler);		
+     		
+      function mousedownHandler(e) {		
+        e.preventDefault();		
+        $(document).on('mousemove', mousemoveHandler);    		
+        $(document).on('mouseup', mouseupHandler);		
+      }		
+      		
+      function mousemoveHandler(e) {		
+        
+        var incrementHeight = $('.container-fluid').scrollTop() + e.pageY;
+                
+        if(element.find('#down-pane').height() <= maxDownPaneHeight) {		
+          element.find('#upon-pane').css({'height' : (uponPaneHeight - (handleHeight - incrementHeight)) + 'px'});		
+          element.find('#down-pane').css({'height' : (downPaneHeight + (handleHeight - incrementHeight)) + 'px'});  		
+          element.find('#upon-pane .table-body-container').css({'height': (uponTableHeight - (handleHeight - incrementHeight)) + 'px'});
+          element.find('#down-pane .table-body-container').css({'height': (downTableHeight + (handleHeight - incrementHeight)) + 'px'});
+        }else{
+          element.find('#down-pane').css({'height' : (maxDownPaneHeight) + 'px'});
+          $(document).off('mousemove');		
+        }			
+      }		
+      
+      function mouseupHandler(e) {		
+        $(document).off('mousedown');		
+        $(document).off('mousemove');		
+      }
+   
+    
       ctrl.lastPolicyId = -1;          
       
       scope.$watch('vm.replicationPolicies', function(current) {