making labels section collapsible on job results

This commit is contained in:
jaredevantabor 2016-11-29 14:44:27 -08:00
parent 0bde7bf920
commit 9dcd6d52af
3 changed files with 42 additions and 5 deletions

View File

@ -94,6 +94,15 @@
width: 100%;
}
.JobResults-expandArrow {
color: #D7D7D7;
font-size: 14px;
font-weight: bold;
margin-right: 10px;
text-transform: uppercase;
margin-left: 10px;
}
.JobResults-resultRowText--revision{
font-family: monospace;
}

View File

@ -86,6 +86,18 @@ export default ['jobData', 'jobDataOptions', 'jobLabels', 'jobFinished', 'count'
jobResultsService.relaunchJob($scope);
};
$scope.lessLabels = false;
$scope.toggleLessLabels = function() {
if (!$scope.lessLabels) {
$('#job-results-labels').slideUp(200);
$scope.lessLabels = true;
}
else {
$('#job-results-labels').slideDown(200);
$scope.lessLabels = false;
}
};
// get initial count from resolve
$scope.count = count.val;
$scope.hostCount = getTotalHostCount(count.val);

View File

@ -305,11 +305,27 @@
<!-- LABELS DETAIL -->
<div class="JobResults-resultRow"
ng-show="labels && labels.length > 0">
<label class="JobResults-resultRowLabel
JobResults-resultRowLabel--fullWidth">
Labels
</label>
<div class="LabelList
<div class="JobResults-resultRow">
<a class="JobResults-resultRowLabel
JobResults-resultRowLabel--fullWidth"
ng-show="lessLabels"
href=""
ng-click="toggleLessLabels()">
Labels
<i class="JobResults-expandArrow
fa fa-caret-right"></i>
</a>
<a class="JobResults-resultRowLabel
JobResults-resultRowLabel--fullWidth"
ng-show="!lessLabels"
href=""
ng-click="toggleLessLabels()">
Labels
<i class="JobResults-expandArrow
fa fa-caret-down"></i>
</a>
</div>
<div id="job-results-labels" class="LabelList
JobResults-resultRowText
JobResults-resultRowText--fullWidth">
<div ng-repeat="label in labels"