mirror of
https://github.com/goharbor/harbor.git
synced 2024-12-24 01:27:49 +01:00
Merge pull request #549 from wknet123/master
Add re-sizable height of replication page.
This commit is contained in:
commit
100a41e34b
@ -40,8 +40,7 @@
|
||||
}
|
||||
|
||||
.pane-split {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
@ -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">
|
||||
|
@ -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) {
|
||||
|
Loading…
Reference in New Issue
Block a user