Upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor.git synced 2025-01-11 18:38:14 +01:00
Code Issues Projects Releases Wiki Activity

Merge pull request #549 from wknet123/master

Browse Source 
Add re-sizable height of replication page.
This commit is contained in:
kun wang 2016-07-14 20:45:43 +08:00 committed by GitHub
commit 100a41e34b
3 changed files with 45 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
static/resources/css/replication.css
View File

@ -40,8 +40,7 @@
} }
.pane-split { .pane-split {
overflow-x: hidden; overflow: hidden;
overflow-y: auto;
width: 100%; width: 100%;
} }

8
static/resources/js/components/replication/list-replication.directive.html
View File

@ -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> <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> <create-policy reload="vm.retrievePolicy()" action="vm.action" modal-title="//vm.modalTitle//" policy-id="//vm.policyId//"></create-policy>
</div> </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="sub-pane-split">
<div class="table-head-container"> <div class="table-head-container">
<table class="table table-pane table-header"> <table class="table table-pane table-header">
@ -74,7 +74,7 @@
</div> </div>
</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> <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> <h4 class="h4-custom-down">// 'replication_jobs' | tr //</h4>
<hr class="hr-line"/> <hr class="hr-line"/>
<div class="form-inline"> <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> <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> </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="sub-pane-split">
<div class="table-head-container"> <div class="table-head-container">
<table class="table table-pane table-header"> <table class="table table-pane table-header">
@ -126,7 +126,7 @@
</thead> </thead>
</table> </table>
</div> </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"> <table class="table table-pane">
<tbody> <tbody>
<tr ng-if="vm.replicationJobs.length == 0"> <tr ng-if="vm.replicationJobs.length == 0">

40
static/resources/js/components/replication/list-replication.directive.js
View File

@ -252,6 +252,46 @@
function link(scope, element, attrs, ctrl) { 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; ctrl.lastPolicyId = -1;
scope.$watch('vm.replicationPolicies', function(current) { scope.$watch('vm.replicationPolicies', function(current) {