From 8be8b41539f873b0229f5b19a8bec458e49b9405 Mon Sep 17 00:00:00 2001
From: Jared Tabor <jtabor@ansible.com>
Date: Tue, 17 Nov 2015 09:28:01 -0800
Subject: [PATCH] Jobs list polish

adjusting small things from the PR review: focus text-color, SmartStatus SUIT, and direct edit button to job template page
---
 .../dashboard/lists/dashboard-list.block.less |  4 ++
 .../lists/jobs/jobs-list.directive.js         |  5 ++-
 .../lists/jobs/jobs-list.partial.html         |  2 +-
 .../src/smart-status/smart-status.block.less  | 40 +++++++++++++------
 .../smart-status/smart-status.controller.js   |  6 +--
 .../smart-status/smart-status.partial.html    | 12 +++---
 6 files changed, 45 insertions(+), 24 deletions(-)

diff --git a/awx/ui/client/src/dashboard/lists/dashboard-list.block.less b/awx/ui/client/src/dashboard/lists/dashboard-list.block.less
index 7bbed352e6..161127c1fd 100644
--- a/awx/ui/client/src/dashboard/lists/dashboard-list.block.less
+++ b/awx/ui/client/src/dashboard/lists/dashboard-list.block.less
@@ -45,6 +45,10 @@
     background-color: #f6f6f6;
 }
 
+.DashboardList-viewAll:focus {
+    color: #b7b7b7;
+}
+
 .DashboardList-container {
     flex: 1;
     width: 100%;
diff --git a/awx/ui/client/src/dashboard/lists/jobs/jobs-list.directive.js b/awx/ui/client/src/dashboard/lists/jobs/jobs-list.directive.js
index dbf3656076..2bf2b145ec 100644
--- a/awx/ui/client/src/dashboard/lists/jobs/jobs-list.directive.js
+++ b/awx/ui/client/src/dashboard/lists/jobs/jobs-list.directive.js
@@ -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);
             };
         }
 }];
diff --git a/awx/ui/client/src/dashboard/lists/jobs/jobs-list.partial.html b/awx/ui/client/src/dashboard/lists/jobs/jobs-list.partial.html
index d216232beb..e733ead58f 100644
--- a/awx/ui/client/src/dashboard/lists/jobs/jobs-list.partial.html
+++ b/awx/ui/client/src/dashboard/lists/jobs/jobs-list.partial.html
@@ -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>
diff --git a/awx/ui/client/src/smart-status/smart-status.block.less b/awx/ui/client/src/smart-status/smart-status.block.less
index 91bc54c39b..d06feb41e7 100644
--- a/awx/ui/client/src/smart-status/smart-status.block.less
+++ b/awx/ui/client/src/smart-status/smart-status.block.less
@@ -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();
 }
diff --git a/awx/ui/client/src/smart-status/smart-status.controller.js b/awx/ui/client/src/smart-status/smart-status.controller.js
index 1be8957de9..fe9d03b4ad 100644
--- a/awx/ui/client/src/smart-status/smart-status.controller.js
+++ b/awx/ui/client/src/smart-status/smart-status.controller.js
@@ -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;
diff --git a/awx/ui/client/src/smart-status/smart-status.partial.html b/awx/ui/client/src/smart-status/smart-status.partial.html
index 274a42ccdf..e100caf913 100644
--- a/awx/ui/client/src/smart-status/smart-status.partial.html
+++ b/awx/ui/client/src/smart-status/smart-status.partial.html
@@ -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>