Added the ability to "See Less" labels on the job template list

This commit is contained in:
Michael Abashian 2016-07-15 16:02:51 -04:00
parent 0e4a61119e
commit 8d7d933519
3 changed files with 13 additions and 4 deletions

View File

@ -8,7 +8,7 @@
}
.LabelList-tagContainer,
.LabelList-seeMore {
.LabelList-seeMoreLess {
display: flex;
max-width: 100%;
}
@ -27,7 +27,7 @@
overflow: hidden;
}
.LabelList-seeMore {
.LabelList-seeMoreLess {
color: @default-link;
margin: 4px 0px;
text-transform: uppercase;
@ -37,7 +37,7 @@
font-size: 11px;
}
.LabelList-seeMore:hover {
.LabelList-seeMoreLess:hover {
color: @default-link-hov;
}

View File

@ -47,6 +47,13 @@ export default
});
};
scope.seeLess = function() {
// Trim the labels array back down to 10 items
scope.labels = scope.labels.slice(0, 10);
// Re-set the seeMoreInteractive flag so that the "See More" will be displayed
scope.seeMoreInactive = true;
};
scope.deleteLabel = function(templateId, templateName, labelId, labelName) {
var action = function () {
$('#prompt-modal').modal('hide');

View File

@ -8,5 +8,7 @@
<span class="LabelList-name">{{ label.name }}</span>
</div>
</div>
<div class="LabelList-seeMore" ng-show="count > 10 && seeMoreInactive"
<div class="LabelList-seeMoreLess" ng-show="count > 10 && seeMoreInactive"
ng-click="seeMore()">View More</div>
<div class="LabelList-seeMoreLess" ng-show="count > 10 && !seeMoreInactive"
ng-click="seeLess()">View Less</div>