shaba/awx
1
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2024-11-02 01:21:21 +03:00
Code Releases Activity

Merge pull request #1396 from marshmalien/fix/1342-css-gridify-lists

Browse Source 
Fix alignment of list action icons and invalid item bar
This commit is contained in:
Marliana Lara 2018-04-20 09:03:49 -04:00 committed by GitHub
commit 8d6bd2f3a9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 85 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,6 +24,7 @@
header-link="{{ vm.getLink(job) }}"
header-tag="{{ vm.jobTypes[job.type] }}">
</at-row-item>
<div class="at-Row--inline">
<at-row-item
label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_STARTED') }}"
value="{{ job.started | longDate }}"
@ -34,6 +35,7 @@
value="{{ job.finished | longDate }}"
inline="true">
</at-row-item>
</div>
<at-row-item
label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_WORKFLOW_JOB') }}"
value="{{ job.summary_fields.source_workflow_job.name }}"
@ -64,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">

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') }}"
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">

5
awx/ui/client/lib/components/launchTemplateButton/_index.less
View File

@ -1,6 +1,4 @@
.at-LaunchTemplate {
margin-left: 15px;
&--button {
font-size: 16px;
height: 30px;
@ -8,8 +6,9 @@
color: #848992;
background-color: inherit;
border: none;
border-radius: 4px;
border-radius: 5px;
}
&--button:hover {
background-color: @at-blue;
color: white;

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

@ -68,12 +68,8 @@
}
.at-Row {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: @at-padding-list-row;
position: relative;
display: grid;
grid-template-columns: 10px 1fr;
}
.at-Row--active {
@ -86,15 +82,21 @@
border-left: @at-white solid 1px;
}
.at-Row--active .at-Row-content {
margin-left: -5px;
}
.at-Row ~ .at-Row {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-top: @at-border-default-width solid @at-color-list-border;
}
.at-Row--invalid {
align-items: center;
background: @at-color-error;
display: flex;
height: 100%;
justify-content: center;
left: 0;
position: absolute;
width: @at-space-2x;
.at-Popover {
padding: 0;
@ -109,31 +111,15 @@
}
}
.at-Row ~ .at-Row {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-top: @at-border-default-width solid @at-color-list-border;
}
.at-Row--rowLayout {
.at-Row-content {
align-items: center;
display: flex;
flex-direction: row;
.at-RowItem {
margin-right: @at-space-4x;
&-label {
width: auto;
}
}
flex-wrap: wrap;
grid-column-start: 2;
padding: @at-padding-list-row;
}
.at-RowStatus {
align-self: flex-start;
margin: 0 10px 0 0;
}
.at-Row-firstColumn {
.at-Row-toggle {
margin-right: @at-space-4x;
}
@ -142,12 +128,12 @@
}
.at-Row-items {
align-self: flex-start;
flex: 1;
}
.at-RowItem {
display: flex;
display: grid;
grid-template-columns: 120px 1fr;
align-items: center;
line-height: @at-height-list-row-item;
}
@ -157,6 +143,7 @@
}
.at-RowItem--isHeader {
display: flex;
color: @at-color-body-text;
margin-bottom: @at-margin-bottom-list-header;
line-height: @at-line-height-list-row-item-header;
@ -172,6 +159,12 @@
.at-RowItem--labels {
line-height: @at-line-height-list-row-item-labels;
display: flex;
flex-wrap: wrap;
* {
font-size: 10px;
}
}
.at-RowItem-header {
@ -179,6 +172,7 @@
}
.at-RowItem-tagContainer {
display: flex;
margin-left: @at-margin-left-list-row-item-tag-container;
}
@ -211,8 +205,6 @@
.at-RowItem-label {
text-transform: uppercase;
width: auto;
width: @at-width-list-row-item-label;
color: @at-color-list-row-item-label;
font-size: @at-font-size;
}
@ -281,6 +273,7 @@
@media screen and (max-width: @at-breakpoint-compact-list) {
.at-Row-actions {
flex-direction: column;
align-items: center;
}
.at-RowAction {

2
awx/ui/client/lib/components/list/row.partial.html
View File

@ -2,5 +2,5 @@
<div class="at-Row--invalid" ng-show="invalid">
<at-popover state="invalidTooltip"></at-popover>
</div>
<ng-transclude></ng-transclude>
<div class="at-Row-content" ng-transclude></div>
</div>

4
awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.block.less
View File

@ -46,4 +46,8 @@ capacity-bar {
.Capacity-details--percentage {
width: 40px;
}
&:only-child {
margin-right: 50px;
}
}

5
awx/ui/client/src/instance-groups/instances/instances-list.partial.html
View File

@ -35,7 +35,7 @@
<at-list results='vm.instances'>
<at-row ng-repeat="instance in vm.instances"
ng-class="{'at-Row--active': (instance.id === vm.activeId)}">
<div class="at-Row-firstColumn">
<div class="at-Row-toggle">
<div class="ScheduleToggle"
ng-class="{'is-on': instance.enabled}">
<button ng-show="instance.enabled"
@ -53,15 +53,14 @@
<div class="at-Row-items">
<at-row-item header-value="{{ instance.hostname }}"></at-row-item>
<div class="at-Row--rowLayout">
<at-row-item
label-value="Running Jobs"
label-state="instanceGroups.instanceJobs({instance_group_id: {{vm.instance_group_id}}, instance_id: {{instance.id}}})"
value="{{ instance.jobs_running }}"
inline="true"
badge="true">
</at-row-item>
</div>
</div>
<div class="at-Row-actions">
<capacity-adjuster state="instance"></capacity-adjuster>

5
awx/ui/client/src/instance-groups/list/instance-groups-list.partial.html
View File

@ -39,11 +39,12 @@
header-link="/#/instance_groups/{{ instance_group.id }}">
</at-row-item>
<div class="at-Row--rowLayout">
<div class="at-Row--inline">
<at-row-item
label-value="Instances"
label-link="/#/instance_groups/{{ instance_group.id }}/instances"
value="{{ instance_group.instances }}"
inline="true"
badge="true">
</at-row-item>
@ -51,10 +52,10 @@
label-value="Running Jobs"
label-link="/#/instance_groups/{{ instance_group.id }}/jobs"
value="{{ instance_group.jobs_running }}"
inline="true"
badge="true">
</at-row-item>
</div>
</div>
<div class="at-Row-actions">

4
awx/ui/client/src/templates/labels/labelsList.block.less
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 {

29
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) {
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;
}
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.$parent.list.iterator, function() {
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;

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

@ -12,10 +12,11 @@
ng-click="seeMore()" ng-if="!isRowItem">View More</div>
<div class="LabelList-seeMoreLess" ng-show="count > 5 && !seeMoreInactive"
ng-click="seeLess()" ng-if="!isRowItem">View Less</div>
<div class="at-RowItem at-RowItem--labels" ng-show="count > 0" ng-if="isRowItem">
<div class="at-RowItem" ng-show="count > 0" ng-if="isRowItem">
<div class="at-RowItem-label">
Labels
</div>
<div class="at-RowItem--labels">
<div class="LabelList-tagContainer" ng-repeat="label in labels">
<div class="LabelList-tag" ng-class="{'LabelList-tag--deletable' : (showDelete && template.summary_fields.user_capabilities.edit)}">
<span class="LabelList-name">{{ label.name }}</span>
@ -30,4 +31,5 @@
ng-click="seeMore()">View More</div>
<div class="LabelList-seeMoreLess" ng-show="count > 5 && !seeMoreInactive"
ng-click="seeLess()">View Less</div>
</div>
</div>