1
0
mirror of https://github.com/ansible/awx.git synced 2024-11-01 16:51:11 +03:00

Tweaked some spacing on the inv manage breadcrumbs

This commit is contained in:
Michael Abashian 2016-06-22 10:08:41 -04:00
parent 705bacc32c
commit cec12d61d8
3 changed files with 26 additions and 23 deletions

View File

@ -2,7 +2,7 @@
padding-right: 0px; padding-right: 0px;
} }
.InventoryManageBreadCrumb-ncy.BreadCrumb-list{ .InventoryManageBreadCrumb-ncy.BreadCrumb-list{
padding-left: 5px; padding-left: 0px;
} }
.InventoryManageBreadCrumbs-separator{ .InventoryManageBreadCrumbs-separator{
content: "/"; content: "/";
@ -22,4 +22,4 @@
} }
ol.BreadCrumb-list{ ol.BreadCrumb-list{
display: inline-block; display: inline-block;
} }

View File

@ -5,23 +5,29 @@
*************************************************/ *************************************************/
export default export default
['$state', '$stateParams', '$scope', 'inventoryData', 'breadCrumbData', function($state, $stateParams, $scope, inventoryData, breadCrumbData){ ['$state', '$stateParams', '$scope', '$rootScope', 'inventoryData', 'breadCrumbData', function($state, $stateParams, $scope, $rootScope, inventoryData, breadCrumbData){
// process result data into the same order specified in the traversal path // process result data into the same order specified in the traversal path
$scope.groups = _.sortBy(breadCrumbData, function(item){ $scope.groups = _.sortBy(breadCrumbData, function(item){
var index = _.indexOf($stateParams.group, item.id); var index = _.indexOf($stateParams.group, item.id);
return (index === -1) ? $stateParams.group.length : index; return (index === -1) ? $stateParams.group.length : index;
}); });
$scope.inventory = inventoryData; $scope.inventory = inventoryData;
$scope.state = $state; $scope.currentState = $state.current.name;
// slices the group stack at $index to supply new group params to $state.go() // slices the group stack at $index to supply new group params to $state.go()
$scope.goToGroup = function(index){ $scope.goToGroup = function(index){
var group = $stateParams.group.slice(0, index); var group = $stateParams.group.slice(0, index);
$state.go('inventoryManage', {group: group}, {reload: true}); $state.go('inventoryManage', {group: group}, {reload: true});
}; };
$scope.isRootState = function(){
return $state.current.name === 'inventoryManage';
};
$scope.goToInventory = function(){ $scope.goToInventory = function(){
$state.go('inventoryManage', {group: undefined}, {reload: true}); $state.go('inventoryManage', {group: undefined}, {reload: true});
}; };
var cleanUpStateChangeListener = $rootScope.$on('$stateChangeSuccess', function(event, toState){
$scope.currentState = toState.name;
});
// Remove the listener when the scope is destroyed to avoid a memory leak
$scope.$on('$destroy', function() {
cleanUpStateChangeListener();
});
}]; }];

View File

@ -1,25 +1,22 @@
<div class="BreadCrumb InventoryManageBreadCrumbs"> <div class="BreadCrumb InventoryManageBreadCrumbs">
<ol class="BreadCrumb-list"> <ol class="BreadCrumb-list">
<li class="BreadCrumb-item"><a ui-sref="inventories">Inventories</a></li> <li class="BreadCrumb-item"><a ui-sref="inventories">Inventories</a></li>
<li href class="BreadCrumb-item"> <li class="BreadCrumb-item">
<a href ng-if="!isRootState() || groups.length > 0" ng-click="goToInventory()">{{inventory.name}}</a> <a href ng-if="currentState !== 'inventoryManage' || groups.length > 0" ng-click="goToInventory()">{{inventory.name}}</a>
<span ng-if="isRootState() && groups.length === 0">{{inventory.name}}</span> <span ng-if="currentState === 'inventoryManage' && groups.length === 0">{{inventory.name}}</span>
</li> </li>
<!-- inside inventoryManage list view (last item is not clickable) --> <!-- inside inventoryManage list view (last item is not clickable) -->
<span ng-if="isRootState()"> <li ng-repeat="group in groups | limitTo:(groups.length-1) track by $index" class="BreadCrumb-item" ng-if="currentState === 'inventoryManage'">
<li class="BreadCrumb-item"></li> <a href ng-click="goToGroup($index+1)">{{group.name}}</a>
<li ng-repeat="group in groups | limitTo:(groups.length-1) track by $index" class="BreadCrumb-item"> </li>
<a href ng-click="goToGroup($index+1)">{{group.name}}</a> <li ng-hide="groups.length == 0" class="BreadCrumb-item" ng-if="currentState === 'inventoryManage'">
</li> <span>{{groups[groups.length-1].name}}</span>
<li ng-hide="groups.length == 0" class="BreadCrumb-item"><span>{{groups[groups.length-1].name}}</span></li> </li>
</span>
<!-- inside inventoryManage.child like add/edit (last item is clickable)--> <!-- inside inventoryManage.child like add/edit (last item is clickable)-->
<span ng-if="!isRootState()"> <li ng-repeat="group in groups track by $index" class="BreadCrumb-item" ng-if="currentState !== 'inventoryManage'">
<li class="BreadCrumb-item"></li> <a href ng-click="goToGroup($index+1)">{{group.name}}</a>
<li ng-repeat="group in groups track by $index" class="BreadCrumb-item"> </li>
<a href ng-click="goToGroup($index+1)">{{group.name}}</a> <li class="BreadCrumb-item" ng-if="currentState !== 'inventoryManage'"></li>
</li>
<li class="BreadCrumb-item"></li>
</span> </span>
<div class="InventoryManageBreadCrumb-ncy" ng-if="!licenseMissing" ncy-breadcrumb></div> <div class="InventoryManageBreadCrumb-ncy" ng-if="!licenseMissing" ncy-breadcrumb></div>
</ol> </ol>