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

Jobs list polish

Browse Source 
adjusting small things from the PR review: focus text-color, SmartStatus SUIT, and direct edit button to job template page
This commit is contained in:
Jared Tabor
2015-11-17 09:28:01 -08:00
parent 8b3faa24e2
commit 8be8b41539
6 changed files with 45 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
awx/ui/client/src/dashboard/lists/dashboard-list.block.less
View File

@@ -45,6 +45,10 @@
background-color: #f6f6f6; background-color: #f6f6f6;
} }
.DashboardList-viewAll:focus {
color: #b7b7b7;
}
.DashboardList-container { .DashboardList-container {
flex: 1; flex: 1;
width: 100%; width: 100%;

5
awx/ui/client/src/dashboard/lists/jobs/jobs-list.directive.js
View File

@@ -33,6 +33,7 @@ export default
status: job.status, status: job.status,
name: job.name, name: job.name,
id: job.id, id: job.id,
templateId: job.job_template,
time: $filter('longDate')(job.finished) time: $filter('longDate')(job.finished)
}; }); }; });
@@ -43,8 +44,8 @@ export default
return (status === "successful"); return (status === "successful");
}; };
scope.editJob = function (jobId) { scope.editJobTemplate = function (jobTemplateId) {
$location.path( '/jobs/' + jobId + "/stdout"); $location.path( '/job_templates/' + jobTemplateId);
}; };
} }
}]; }];

2
awx/ui/client/src/dashboard/lists/jobs/jobs-list.partial.html
View File

@@ -32,7 +32,7 @@
{{job.time}} {{job.time}}
</td> </td>
<td class="DashboardList-actionButtonCell"> <td class="DashboardList-actionButtonCell">
<button class="DashboardList-actionButton DashboardList-actionButton--edit" ng-click="editJob(job.id)"> <button class="DashboardList-actionButton DashboardList-actionButton--edit" ng-click="editJobTemplate(job.templateId)">
<i class="fa fa-pencil"></i> <i class="fa fa-pencil"></i>
</button> </button>
</td> </td>

40
awx/ui/client/src/smart-status/smart-status.block.less
View File

@@ -1,56 +1,72 @@
/** @define smartStatus */ /** @define SmartStatus */
@import "awx/ui/client/legacy-styles/animations.less"; @import "awx/ui/client/legacy-styles/animations.less";
.smartStatus-container{ .SmartStatus-container{
max-width: 165px; max-width: 165px;
display:flex; display:flex;
} }
.smartStatus-iconContainer{ .SmartStatus-iconContainer{
padding: 2px; padding: 2px;
flex: 0 1 auto; flex: 0 1 auto;
} }
.smartStatus--success{ .SmartStatus--success{
color: #5bbdbf; color: #5bbdbf;
margin-bottom: 20px; margin-bottom: 20px;
padding: 0px; padding: 0px;
} }
.smartStatus--failed{ .SmartStatus--failed{
color: #ff5850; color: #ff5850;
margin-top: 20px; margin-top: 20px;
padding: 0px; padding: 0px;
} }
.smartStatus--running{ .SmartStatus--running{
color: #5bbdbf; color: #b7b7b7;
margin-top: 10px; margin-top: 10px;
padding: 0px; padding: 0px;
.pulsate(); .pulsate();
} }
.smartStatus-tooltip{ .SmartStatus-tooltip{
text-align: left; text-align: left;
max-width: 250px; max-width: 250px;
padding: 10px; padding: 10px;
} }
.smartStatus-tooltip--success{ .SmartStatus-tooltip--success{
color: #5bbdbf; color: #5bbdbf;
padding-left: 5px; padding-left: 5px;
padding-right: 0px; padding-right: 0px;
text-shadow:
-1px -1px 0 #fff,
1px -1px 0 #fff,
-1px 1px 0 #fff,
1px 1px 0 #fff;
} }
.smartStatus-tooltip--failed{ .SmartStatus-tooltip--failed{
color: #ff5850; color: #ff5850;
padding-left: 5px; padding-left: 5px;
padding-right: 0px; padding-right: 0px;
text-shadow:
-1px -1px 0 #fff,
1px -1px 0 #fff,
-1px 1px 0 #fff,
1px 1px 0 #fff;
} }
.smartStatus-tooltip--running{ .SmartStatus-tooltip--running{
color: #5bbdbf; color: #b7b7b7;
padding-left: 5px; padding-left: 5px;
padding-right: 0px; padding-right: 0px;
text-shadow:
-1px -1px 0 #fff,
1px -1px 0 #fff,
-1px 1px 0 #fff,
1px 1px 0 #fff;
.pulsate(); .pulsate();
} }

6
awx/ui/client/src/smart-status/smart-status.controller.js
View File

@@ -20,13 +20,13 @@ export default ['$scope', '$filter',
if (job.status === 'successful') { if (job.status === 'successful') {
data.value = 1; data.value = 1;
data.smartStatus = "<i class=\"fa DashboardList-status smartStatus-tooltip--success icon-job-successful\"></i> " + job.status.charAt(0).toUpperCase() + job.status.slice(1); data.smartStatus = "<i class=\"fa DashboardList-status SmartStatus-tooltip--success icon-job-successful\"></i> " + job.status.charAt(0).toUpperCase() + job.status.slice(1);
} else if (isFailureState(job.status)) { } else if (isFailureState(job.status)) {
data.value = -1; data.value = -1;
data.smartStatus = "<i class=\"fa DashboardList-status smartStatus-tooltip--failed icon-job-successful\"></i> " + job.status.charAt(0).toUpperCase() + job.status.slice(1); data.smartStatus = "<i class=\"fa DashboardList-status SmartStatus-tooltip--failed icon-job-successful\"></i> " + job.status.charAt(0).toUpperCase() + job.status.slice(1);
} else { } else {
data.value = 0; data.value = 0;
data.smartStatus = "<i class=\"fa DashboardList-status smartStatus-tooltip--running icon-job-successful\"></i> " + job.status.charAt(0).toUpperCase() + job.status.slice(1); data.smartStatus = "<i class=\"fa DashboardList-status SmartStatus-tooltip--running icon-job-successful\"></i> " + job.status.charAt(0).toUpperCase() + job.status.slice(1);
} }
data.jobId = job.id; data.jobId = job.id;

12
awx/ui/client/src/smart-status/smart-status.partial.html
View File

@@ -1,5 +1,5 @@
<div class="smartStatus-container"> <div class="SmartStatus-container">
<div ng-repeat="job in sparkArray track by $index" class='smartStatus-iconContainer'> <div ng-repeat="job in sparkArray track by $index" class='SmartStatus-iconContainer'>
<a href="#/jobs/{{ job.jobId }}" <a href="#/jobs/{{ job.jobId }}"
aw-tool-tip=" aw-tool-tip="
JOB ID: {{job.jobId}} <br>STATUS: {{job.smartStatus}} <br>FINISHED: {{job.finished}}" JOB ID: {{job.jobId}} <br>STATUS: {{job.smartStatus}} <br>FINISHED: {{job.finished}}"
@@ -7,13 +7,13 @@
data-original-title="" data-original-title=""
data-trigger="hover" data-trigger="hover"
data-container="body" data-container="body"
tooltipInnerClass="smartStatus-tooltip" tooltipInnerClass="SmartStatus-tooltip"
title=""> title="">
<i class="fa <i class="fa
DashboardList-status" DashboardList-status"
ng-class="{'smartStatus--success icon-job-successful': job.value === 1, ng-class="{'SmartStatus--success icon-job-successful': job.value === 1,
'smartStatus--failed icon-job-successful': job.value === -1, 'SmartStatus--failed icon-job-successful': job.value === -1,
'smartStatus--running icon-job-successful': job.value === 0}"> 'SmartStatus--running icon-job-successful': job.value === 0}">
</i> </i>
</a> </a>
</div> </div>