Fix row label bugs and responsive actions button alignment

This commit is contained in:
Marliana Lara 2018-04-19 13:13:13 -04:00
parent 92a742af98
commit 763afc7245
No known key found for this signature in database
GPG Key ID: 38C73B40DFA809EE
5 changed files with 26 additions and 19 deletions

View File

@ -66,7 +66,7 @@
tag-values="job.summary_fields.credentials"
tags-are-creds="true">
</at-row-item>
<labels-list class="LabelList" show-delete="false" is-row-item="true">
<labels-list class="LabelList" show-delete="false" is-row-item="true" state="job">
</labels-list>
</div>
<div class="at-Row-actions">

View File

@ -83,7 +83,7 @@
label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_RAN') }}"
value="{{ vm.getLastRan(template) }}">
</at-row-item>
<labels-list class="LabelList" show-delete="false" is-row-item="true">
<labels-list class="LabelList" show-delete="false" is-row-item="true" state="template">
</labels-list>
</div>
<div class="at-Row-actions">

View File

@ -114,6 +114,7 @@
.at-Row-content {
align-items: center;
display: flex;
flex-wrap: wrap;
grid-column-start: 2;
padding: @at-padding-list-row;
}
@ -160,6 +161,10 @@
line-height: @at-line-height-list-row-item-labels;
display: flex;
flex-wrap: wrap;
* {
font-size: 10px;
}
}
.at-RowItem-header {
@ -268,6 +273,7 @@
@media screen and (max-width: @at-breakpoint-compact-list) {
.at-Row-actions {
flex-direction: column;
align-items: center;
}
.at-RowAction {

View File

@ -6,6 +6,9 @@
align-items: flex-start;
}
.LabelList-tagContainer {
height: fit-content;
}
.LabelList-tagContainer,
.LabelList-seeMoreLess {
@ -70,6 +73,7 @@
.LabelList-name {
flex: initial;
max-width: 100%;
word-break: break-word;
}
.LabelList-tag--deletable > .LabelList-name {

View File

@ -12,7 +12,9 @@ export default
function(templateUrl, Wait, Rest, GetBasePath, ProcessErrors, Prompt, $q, $filter, $state) {
return {
restrict: 'E',
scope: false,
scope: {
state: '='
},
templateUrl: templateUrl('templates/labels/labelsList'),
link: function(scope, element, attrs) {
scope.showDelete = attrs.showDelete === 'true';
@ -33,7 +35,9 @@ export default
scope.seeMore = function () {
var seeMoreResolve = $q.defer();
Rest.setUrl(scope[scope.$parent.list.iterator].related.labels);
if (scope.state) {
Rest.setUrl(scope.state.related.labels);
}
Rest.get()
.then(({data}) => {
if (data.next) {
@ -92,23 +96,16 @@ export default
});
};
if (scope.$parent.$parent.template) {
if (_.has(scope, '$parent.$parent.template.summary_fields.labels.results')) {
scope.labels = scope.$parent.$parent.template.summary_fields.labels.results.slice(0, 5);
scope.count = scope.$parent.$parent.template.summary_fields.labels.count;
}
} else if (scope.$parent.$parent.job) {
if (_.has(scope, '$parent.$parent.job.summary_fields.labels.results')) {
scope.labels = scope.$parent.$parent.job.summary_fields.labels.results.slice(0, 5);
scope.count = scope.$parent.$parent.job.summary_fields.labels.count;
}
} else {
scope.$watchCollection(scope.$parent.list.iterator, function() {
if (_.has(scope.state, 'summary_fields.labels.results')) {
scope.labels = scope.state.summary_fields.labels.results.slice(0, 5);
scope.count = scope.state.summary_fields.labels.count;
} else {
scope.$watchCollection(scope.state, function() {
// To keep the array of labels fresh, we need to set up a watcher - otherwise, the
// array will get set initially and then never be updated as labels are removed
if (scope[scope.$parent.list.iterator].summary_fields.labels){
scope.labels = scope[scope.$parent.list.iterator].summary_fields.labels.results.slice(0, 5);
scope.count = scope[scope.$parent.list.iterator].summary_fields.labels.count;
if (scope.state.summary_fields.labels){
scope.labels = scope.state.summary_fields.labels.results.slice(0, 5);
scope.count = scope.state.summary_fields.labels.count;
}
else{
scope.labels = null;