1
0
mirror of https://github.com/ansible/awx.git synced 2024-11-01 08:21:15 +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;
}
.InventoryManageBreadCrumb-ncy.BreadCrumb-list{
padding-left: 5px;
padding-left: 0px;
}
.InventoryManageBreadCrumbs-separator{
content: "/";
@ -22,4 +22,4 @@
}
ol.BreadCrumb-list{
display: inline-block;
}
}

View File

@ -5,23 +5,29 @@
*************************************************/
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
$scope.groups = _.sortBy(breadCrumbData, function(item){
var index = _.indexOf($stateParams.group, item.id);
return (index === -1) ? $stateParams.group.length : index;
});
$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()
$scope.goToGroup = function(index){
var group = $stateParams.group.slice(0, index);
$state.go('inventoryManage', {group: group}, {reload: true});
};
$scope.isRootState = function(){
return $state.current.name === 'inventoryManage';
};
$scope.goToInventory = function(){
$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">
<ol class="BreadCrumb-list">
<li class="BreadCrumb-item"><a ui-sref="inventories">Inventories</a></li>
<li href class="BreadCrumb-item">
<a href ng-if="!isRootState() || groups.length > 0" ng-click="goToInventory()">{{inventory.name}}</a>
<span ng-if="isRootState() && groups.length === 0">{{inventory.name}}</span>
<li class="BreadCrumb-item">
<a href ng-if="currentState !== 'inventoryManage' || groups.length > 0" ng-click="goToInventory()">{{inventory.name}}</a>
<span ng-if="currentState === 'inventoryManage' && groups.length === 0">{{inventory.name}}</span>
</li>
<!-- inside inventoryManage list view (last item is not clickable) -->
<span ng-if="isRootState()">
<li class="BreadCrumb-item"></li>
<li ng-repeat="group in groups | limitTo:(groups.length-1) track by $index" class="BreadCrumb-item">
<a href ng-click="goToGroup($index+1)">{{group.name}}</a>
</li>
<li ng-hide="groups.length == 0" class="BreadCrumb-item"><span>{{groups[groups.length-1].name}}</span></li>
</span>
<li ng-repeat="group in groups | limitTo:(groups.length-1) track by $index" class="BreadCrumb-item" ng-if="currentState === 'inventoryManage'">
<a href ng-click="goToGroup($index+1)">{{group.name}}</a>
</li>
<li ng-hide="groups.length == 0" class="BreadCrumb-item" ng-if="currentState === 'inventoryManage'">
<span>{{groups[groups.length-1].name}}</span>
</li>
<!-- inside inventoryManage.child like add/edit (last item is clickable)-->
<span ng-if="!isRootState()">
<li class="BreadCrumb-item"></li>
<li ng-repeat="group in groups track by $index" class="BreadCrumb-item">
<a href ng-click="goToGroup($index+1)">{{group.name}}</a>
</li>
<li class="BreadCrumb-item"></li>
<li ng-repeat="group in groups track by $index" class="BreadCrumb-item" ng-if="currentState !== 'inventoryManage'">
<a href ng-click="goToGroup($index+1)">{{group.name}}</a>
</li>
<li class="BreadCrumb-item" ng-if="currentState !== 'inventoryManage'"></li>
</span>
<div class="InventoryManageBreadCrumb-ncy" ng-if="!licenseMissing" ncy-breadcrumb></div>
</ol>