External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-17 20:51:21 -03: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
Show Stats 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;
}
.DashboardList-viewAll:focus {
color: #b7b7b7;
}
.DashboardList-container {
flex: 1;
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,
name: job.name,
id: job.id,
templateId: job.job_template,
time: $filter('longDate')(job.finished)
}; });
@ -43,8 +44,8 @@ export default
return (status === "successful");
};
scope.editJob = function (jobId) {
$location.path( '/jobs/' + jobId + "/stdout");
scope.editJobTemplate = function (jobTemplateId) {
$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}}
</td>
<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>
</button>
</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";
.smartStatus-container{
.SmartStatus-container{
max-width: 165px;
display:flex;
}
.smartStatus-iconContainer{
.SmartStatus-iconContainer{
padding: 2px;
flex: 0 1 auto;
}
.smartStatus--success{
.SmartStatus--success{
color: #5bbdbf;
margin-bottom: 20px;
padding: 0px;
}
.smartStatus--failed{
.SmartStatus--failed{
color: #ff5850;
margin-top: 20px;
padding: 0px;
}
.smartStatus--running{
color: #5bbdbf;
.SmartStatus--running{
color: #b7b7b7;
margin-top: 10px;
padding: 0px;
.pulsate();
}
.smartStatus-tooltip{
.SmartStatus-tooltip{
text-align: left;
max-width: 250px;
padding: 10px;
}
.smartStatus-tooltip--success{
.SmartStatus-tooltip--success{
color: #5bbdbf;
padding-left: 5px;
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;
padding-left: 5px;
padding-right: 0px;
text-shadow:
-1px -1px 0 #fff,
1px -1px 0 #fff,
-1px 1px 0 #fff,
1px 1px 0 #fff;
}
.smartStatus-tooltip--running{
color: #5bbdbf;
.SmartStatus-tooltip--running{
color: #b7b7b7;
padding-left: 5px;
padding-right: 0px;
text-shadow:
-1px -1px 0 #fff,
1px -1px 0 #fff,
-1px 1px 0 #fff,
1px 1px 0 #fff;
.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') {
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)) {
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 {
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;

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

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