External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-19 23:07:42 -02:30
Code Issues Packages Projects Releases Wiki Activity

Fix row label bugs and responsive actions button alignment

Browse Source
This commit is contained in:
Marliana Lara
2018-04-19 13:13:13 -04:00
parent 92a742af98
commit 763afc7245
5 changed files with 26 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
awx/ui/client/features/jobs/jobsList.view.html
View File

@@ -66,7 +66,7 @@
tag-values="job.summary_fields.credentials" tag-values="job.summary_fields.credentials"
tags-are-creds="true"> tags-are-creds="true">
</at-row-item> </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> </labels-list>
</div> </div>
<div class="at-Row-actions"> <div class="at-Row-actions">

2
awx/ui/client/features/templates/templatesList.view.html
View File

@@ -83,7 +83,7 @@
label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_RAN') }}" label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_RAN') }}"
value="{{ vm.getLastRan(template) }}"> value="{{ vm.getLastRan(template) }}">
</at-row-item> </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> </labels-list>
</div> </div>
<div class="at-Row-actions"> <div class="at-Row-actions">

6
awx/ui/client/lib/components/list/_index.less
View File

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

4
awx/ui/client/src/templates/labels/labelsList.block.less
View File

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

31
awx/ui/client/src/templates/labels/labelsList.directive.js
View File

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