Fix roles drag panel position bug
Change-Id: I2b49cb21c7dc4278c418b82f1380194f8006f5bc
This commit is contained in:
jiahuay
parent
3284821539
commit
dff9fcadb2
@ -181,6 +181,9 @@ select {
|
||||
.no-cluster-panel h4 {
|
||||
padding-top: 50px;
|
||||
}
|
||||
.widget-box {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.widget-body .table {
|
||||
border-top: 0px !important;
|
||||
}
|
||||
@ -975,28 +978,32 @@ circle[depth='4'] {
|
||||
background-color: #687074 !important;
|
||||
color: #FFF !important;
|
||||
}
|
||||
.role-assign-drop {
|
||||
min-height: 25px;
|
||||
min-width: 100px;
|
||||
/* background-color: rgba(221, 221, 221, 0.32); */
|
||||
.margin-left-neg4 {
|
||||
margin-left: -4px;
|
||||
}
|
||||
.table-col {
|
||||
width: 87%;
|
||||
}
|
||||
.role-col {
|
||||
width: 10%;
|
||||
}
|
||||
.role-panel {
|
||||
z-index: 10;
|
||||
}
|
||||
.role-panel.stick {
|
||||
position: fixed;
|
||||
z-index: 10000;
|
||||
top: 0px;
|
||||
}
|
||||
.role-assign-drag {
|
||||
border: 1px solid rgba(190, 210, 219, 0.5) !important;
|
||||
border-radius: 4px;
|
||||
min-height: 120px;
|
||||
min-width: 120px;
|
||||
width: 122px;
|
||||
}
|
||||
.role-table-padding {
|
||||
padding: 0px 0px 15px 0px !important;
|
||||
width: 87%;
|
||||
}
|
||||
.role-widget-box {
|
||||
position: fixed !important;
|
||||
margin-left: 0px !important;
|
||||
z-index: 10;
|
||||
}
|
||||
.margin-left-neg4 {
|
||||
margin-left: -4px;
|
||||
.role-assign-drop {
|
||||
min-height: 30px;
|
||||
min-width: 150px;
|
||||
}
|
||||
.drag-roles {
|
||||
margin-left: 7px;
|
||||
@ -1005,16 +1012,6 @@ circle[depth='4'] {
|
||||
width: 105px !important;
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
.drag-role-col {
|
||||
width: 13%;
|
||||
}
|
||||
.role-col {
|
||||
float: left !important;
|
||||
min-height: 1px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
position: relative;
|
||||
}
|
||||
.drag-enter-role {
|
||||
background: none repeat scroll 0 0 #F0F9FF;
|
||||
border: 2px dashed #BED2DB !important;
|
||||
|
||||
@ -173,7 +173,7 @@
|
||||
<input ng-model="general.local_repo" type="text" class="col-xs-10 col-sm-5" placeholder="Local Repo" name="local_repo">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!--table class="table table-hover nowrap">
|
||||
@ -209,4 +209,4 @@
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -28,55 +28,56 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="pull-left">
|
||||
<!--Search Input-->
|
||||
<span class="input-icon">
|
||||
<input type="text" placeholder="Search" ng-model="search.$">
|
||||
<i class="ace-icon fa fa-search blue"></i>
|
||||
</span>
|
||||
<!-- Column Show / Hide button -->
|
||||
<div class="btn-group" dropdown>
|
||||
<button type="button" class="btn btn-default dropdown-toggle">
|
||||
Column Show / Hide
|
||||
<span class="ace-icon fa fa-caret-down icon-on-right"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li ng-repeat="column in server_columns" ng-click="column.visible=!column.visible">
|
||||
<a class="action">
|
||||
<span ng-class="{'opacity-zero': !column.visible}">
|
||||
<i class="ace-icon fa fa-check blue"></i>
|
||||
</span>
|
||||
{{column.title}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="pull-left table-col">
|
||||
<div>
|
||||
<div class="pull-left">
|
||||
<!--Search Input-->
|
||||
<span class="input-icon">
|
||||
<input type="text" placeholder="Search" ng-model="search.$">
|
||||
<i class="ace-icon fa fa-search blue"></i>
|
||||
</span>
|
||||
<!-- Column Show / Hide button -->
|
||||
<div class="btn-group" dropdown>
|
||||
<button type="button" class="btn btn-default dropdown-toggle">
|
||||
Column Show / Hide
|
||||
<span class="ace-icon fa fa-caret-down icon-on-right"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li ng-repeat="column in server_columns" ng-click="column.visible=!column.visible">
|
||||
<a class="action">
|
||||
<span ng-class="{'opacity-zero': !column.visible}">
|
||||
<i class="ace-icon fa fa-check blue"></i>
|
||||
</span>
|
||||
{{column.title}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pull-right">
|
||||
<span class="opacity-zero">
|
||||
<input type="text" placeholder="HA VIP" ng-model="ha_vip">
|
||||
</span>
|
||||
<button class="btn btn-sm btn-info" ng-init="autoAssignRoles.isCollapsed = true;" ng-click="autoAssignRoles.isCollapsed = !autoAssignRoles.isCollapsed">
|
||||
Auto Assign
|
||||
<i class="ace-icon fa fa-plus" ng-class="{'fa-minus': !autoAssignRoles.isCollapsed}"></i>
|
||||
</button>
|
||||
<div class="btn-group" dropdown>
|
||||
<button type="button" style="border-bottom-width: 3px; border-top-width: 3px;" class="btn btn-sm btn-info dropdown-toggle">
|
||||
Manually Assign
|
||||
<span class="ace-icon fa fa-caret-down icon-on-right"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-info dropdown-menu-right" role="menu">
|
||||
<li ng-repeat="role in roles">
|
||||
<a class="action" ng-click="assignRole(role)">
|
||||
{{role.display_name}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pull-right">
|
||||
<span class="opacity-zero">
|
||||
<input type="text" placeholder="HA VIP" ng-model="ha_vip">
|
||||
</span>
|
||||
<button class="btn btn-sm btn-info" ng-init="autoAssignRoles.isCollapsed = true;" ng-click="autoAssignRoles.isCollapsed = !autoAssignRoles.isCollapsed">
|
||||
Auto Assign
|
||||
<i class="ace-icon fa fa-plus" ng-class="{'fa-minus': !autoAssignRoles.isCollapsed}"></i>
|
||||
</button>
|
||||
<div class="btn-group" dropdown>
|
||||
<button type="button" style="border-bottom-width: 3px; border-top-width: 3px;" class="btn btn-sm btn-info dropdown-toggle">
|
||||
Manually Assign
|
||||
<span class="ace-icon fa fa-caret-down icon-on-right"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-info dropdown-menu-right" role="menu">
|
||||
<li ng-repeat="role in roles">
|
||||
<a class="action" ng-click="assignRole(role)">
|
||||
{{role.display_name}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="role-col role-table-padding">
|
||||
<div class="clearfix"></div>
|
||||
<div class="space-6"></div>
|
||||
<table ng-table="tableParams" class="table table-hover table-striped">
|
||||
<thead>
|
||||
@ -136,10 +137,10 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="role-col drag-role-col">
|
||||
<div class="widget-box transparent role-widget-box">
|
||||
<div class="widget-header widget-header-marginbottom">
|
||||
<br>
|
||||
<div class="pull-right role-col">
|
||||
<div id="sticky-anchor"></div>
|
||||
<div class="row role-panel" rolepanelscroll>
|
||||
<div class="blue">
|
||||
<h4 class="margin-left-neg4">Drag to Assign</h4>
|
||||
</div>
|
||||
<div class="role-assign-drag">
|
||||
@ -150,5 +151,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -106,16 +106,6 @@ angular.module('compass.wizard', [
|
||||
$scope.steps = wizardStepsData["os_and_ts"];
|
||||
wizardFactory.setSteps($scope.steps);
|
||||
|
||||
// start loading spinner
|
||||
$scope.startSpin = function() {
|
||||
usSpinnerService.spin('spinner-1');
|
||||
};
|
||||
|
||||
// stop loading spinner
|
||||
$scope.stopSpin = function() {
|
||||
usSpinnerService.stop('spinner-1');
|
||||
};
|
||||
|
||||
// Watch commit state change
|
||||
$scope.$watch(function() {
|
||||
$scope.loading = false;
|
||||
@ -209,9 +199,6 @@ angular.module('compass.wizard', [
|
||||
}
|
||||
}
|
||||
if (newStep == $scope.networkStep + 1) {
|
||||
if ($scope.maxStep > $scope.roleAssignStep) {
|
||||
$scope.steps[$scope.roleAssignStep].state = "incomplete";
|
||||
}
|
||||
if ($scope.maxStep > $scope.networkMappingStep) {
|
||||
$scope.steps[$scope.networkMappingStep].state = "incomplete";
|
||||
}
|
||||
@ -1692,24 +1679,44 @@ angular.module('compass.wizard', [
|
||||
};
|
||||
|
||||
})
|
||||
.directive('ngKeypress', function() {
|
||||
return function(scope, element, attrs) {
|
||||
element.bind("keydown keypress", function(event) {
|
||||
if (event.which === 9) { // 9 is tab key
|
||||
var current = attrs.position;
|
||||
var result = current.split('_');
|
||||
var next = result[0] + "_" + (parseInt(result[1]) + 1);
|
||||
if ($("input[data-position=" + next + "]").length) {
|
||||
|
||||
$("input[data-position=" + next + "]").focus();
|
||||
} else {
|
||||
$(".btn-next").focus();
|
||||
}
|
||||
event.preventDefault();
|
||||
.directive('ngKeypress', function() {
|
||||
return function(scope, element, attrs) {
|
||||
element.bind("keydown keypress", function(event) {
|
||||
if (event.which === 9) { // 9 is tab key
|
||||
var current = attrs.position;
|
||||
var result = current.split('_');
|
||||
var next = result[0] + "_" + (parseInt(result[1]) + 1);
|
||||
if ($("input[data-position=" + next + "]").length) {
|
||||
|
||||
$("input[data-position=" + next + "]").focus();
|
||||
} else {
|
||||
$(".btn-next").focus();
|
||||
}
|
||||
});
|
||||
};
|
||||
});
|
||||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
};
|
||||
})
|
||||
|
||||
//Used for roles panel on Role Assignment page
|
||||
.directive("rolepanelscroll", function($window) {
|
||||
return function(scope, element, attrs) {
|
||||
angular.element($window).bind("scroll", function() {
|
||||
var window_top = this.pageYOffset;
|
||||
var sticky_anchor_elem = angular.element($('#sticky-anchor'));
|
||||
if(sticky_anchor_elem.length != 0) {
|
||||
var div_top = sticky_anchor_elem.offset().top;
|
||||
if (window_top > div_top) {
|
||||
$('.role-panel').addClass('stick');
|
||||
} else {
|
||||
$('.role-panel').removeClass('stick');
|
||||
}
|
||||
scope.$apply();
|
||||
}
|
||||
});
|
||||
};
|
||||
});
|
||||
|
||||
var wizardModalInstanceCtrl = function($scope, $modalInstance, warning) {
|
||||
$scope.warning = warning;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user