External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-04-05 01:59:25 -02:30
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

6
awx/ui/client/src/job-templates/labels/labelsList.block.less
View File

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

7
awx/ui/client/src/job-templates/labels/labelsList.directive.js
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) { scope.deleteLabel = function(templateId, templateName, labelId, labelName) {
var action = function () { var action = function () {
$('#prompt-modal').modal('hide'); $('#prompt-modal').modal('hide');

4
awx/ui/client/src/job-templates/labels/labelsList.partial.html
View File

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