From 295c6b7db51d327f8948de22c5978a7defbadcf6 Mon Sep 17 00:00:00 2001
From: Jared Tabor <jtabor@ansible.com>
Date: Wed, 2 Mar 2016 11:54:06 -0800
Subject: [PATCH] Fixes from PR review: panel title alignment, cleanup stale
 code, add color alias for toggle button

---
 awx/ui/client/legacy-styles/job-details.less  |  5 --
 .../src/job-detail/job-detail.block.less      |  9 ++-
 .../src/job-detail/job-detail.controller.js   |  1 -
 .../src/job-detail/job-detail.partial.html    | 57 +++++++++----------
 .../src/shared/branding/colors.default.less   |  3 +
 5 files changed, 39 insertions(+), 36 deletions(-)

diff --git a/awx/ui/client/legacy-styles/job-details.less b/awx/ui/client/legacy-styles/job-details.less
index a3044945c5..0adc42ea1a 100644
--- a/awx/ui/client/legacy-styles/job-details.less
+++ b/awx/ui/client/legacy-styles/job-details.less
@@ -202,7 +202,6 @@
     }
 
     #job_plays, #job_tasks {
-        // height: 150px;
         overflow-y: auto;
         overflow-x: none;
     }
@@ -319,10 +318,6 @@
         text-overflow: ellipsis;
     }
 
-    #tasks-table-detail {
-        // height: 150px;
-    }
-
     #play-section {
         .table-detail {
             height: 150px;
diff --git a/awx/ui/client/src/job-detail/job-detail.block.less b/awx/ui/client/src/job-detail/job-detail.block.less
index 5e4ad5ab77..854584959d 100644
--- a/awx/ui/client/src/job-detail/job-detail.block.less
+++ b/awx/ui/client/src/job-detail/job-detail.block.less
@@ -12,6 +12,13 @@
     height: 30px;
 }
 
+.JobDetail-expandContainer{
+    flex: 1;
+    margin: 0px;
+    line-height: 30px;
+    white-space: nowrap;
+}
+
 .JobDetail-panelHeaderText{
     color: @default-interface-txt;
     flex: 1 0 auto;
@@ -94,7 +101,7 @@
 .JobDetail-tableToggle.active{
     background-color: @default-link;
     border: 1px solid @default-link;
-    color: #eeeeee;
+    color: @toggle-selected-text;
 }
 
 .JobDetail-tableToggle--left{
diff --git a/awx/ui/client/src/job-detail/job-detail.controller.js b/awx/ui/client/src/job-detail/job-detail.controller.js
index 8601c7651a..220424352c 100644
--- a/awx/ui/client/src/job-detail/job-detail.controller.js
+++ b/awx/ui/client/src/job-detail/job-detail.controller.js
@@ -842,7 +842,6 @@ export default
                     $('.overlay').hide();
                     $('#summary-button').hide();
                     $('#hide-summary-button').hide();
-                    // $('#job-detail-container').css({ "width": "58.33333333%", "padding-right": "7px" });
                     $('#job-summary-container .job_well').css({
                         'box-shadow': 'none',
                         'height': 'auto'
diff --git a/awx/ui/client/src/job-detail/job-detail.partial.html b/awx/ui/client/src/job-detail/job-detail.partial.html
index 57c439c7c3..fcdfe87acb 100644
--- a/awx/ui/client/src/job-detail/job-detail.partial.html
+++ b/awx/ui/client/src/job-detail/job-detail.partial.html
@@ -4,14 +4,18 @@
             <div id="job-detail-container" class="JobDetail-leftSide">
                 <div id="job-results-panel" class="JobDetail-resultsContainer Panel">
                     <div class="JobDetail-panelHeader">
-                        <a class="JobDetail-panelHeaderText" ng-show="lessStatus" href="" ng-click="toggleLessStatus()">
-                            RESULTS<i class="JobDetail-expandArrow fa fa-caret-left"></i>
-                        </a>
-                        <a class="JobDetail-panelHeaderText" ng-show="!lessStatus" href="" ng-click="toggleLessStatus()">
-                            RESULTS<i class="JobDetail-expandArrow fa fa-caret-down"></i>
-                        </a>
-                        <button id="submit-action" class="List-actionButton JobDetail-launchButton" data-placement="top" mode="all" ng-click="relaunchJob()" aw-tool-tip="Start a job using this template" data-original-title="" title=""><i class="fa fa-rocket"></i> </button>
-                        <button id="delete-action" class="List-actionButton List-actionButton--delete JobDetail-launchButton" data-placement="top" ng-click="deleteJobTemplate(job_template.id, job_template.name)" aw-tool-tip="Delete template" data-original-title="" title=""><i class="fa fa-trash-o"></i> </button>
+                        <div class="JobDetail-expandContainer">
+                            <a class="JobDetail-panelHeaderText" ng-show="lessStatus" href="" ng-click="toggleLessStatus()">
+                                RESULTS<i class="JobDetail-expandArrow fa fa-caret-left"></i>
+                            </a>
+                            <a class="JobDetail-panelHeaderText" ng-show="!lessStatus" href="" ng-click="toggleLessStatus()">
+                                RESULTS<i class="JobDetail-expandArrow fa fa-caret-down"></i>
+                            </a>
+                        </div>
+                        <div class="JobDetail-actions">
+                            <button id="submit-action" class="List-actionButton JobDetail-launchButton" data-placement="top" mode="all" ng-click="relaunchJob()" aw-tool-tip="Start a job using this template" data-original-title="" title=""><i class="fa fa-rocket"></i> </button>
+                            <button id="delete-action" class="List-actionButton List-actionButton--delete JobDetail-launchButton" data-placement="top" ng-click="deleteJobTemplate(job_template.id, job_template.name)" aw-tool-tip="Delete template" data-original-title="" title=""><i class="fa fa-trash-o"></i> </button>
+                        </div>
                     </div>
 
                     <div class="form-horizontal JobDetail-resultsDetails" role="form" id="job-status-form">
@@ -150,12 +154,14 @@
 
                 <div id="job-detail-panel" class="JobDetail-resultsContainer Panel">
                     <div class="JobDetail-panelHeader">
-                        <a class="JobDetail-panelHeaderText" ng-show="lessDetail" href="" ng-click="toggleLessDetail()">
-                            DETAILS<i class="JobDetail-expandArrow fa fa-caret-left"></i>
-                        </a>
-                        <a class="JobDetail-panelHeaderText" ng-show="!lessDetail" href="" ng-click="toggleLessDetail()">
-                            DETAILS<i class="JobDetail-expandArrow fa fa-caret-down"></i>
-                        </a>
+                        <div class="JobDetail-expandContainer">
+                            <a class="JobDetail-panelHeaderText" ng-show="lessDetail" href="" ng-click="toggleLessDetail()">
+                                DETAILS<i class="JobDetail-expandArrow fa fa-caret-left"></i>
+                            </a>
+                            <a class="JobDetail-panelHeaderText" ng-show="!lessDetail" href="" ng-click="toggleLessDetail()">
+                                DETAILS<i class="JobDetail-expandArrow fa fa-caret-down"></i>
+                            </a>
+                        </div>
                     </div>
 
                     <div id="job-detail-details">
@@ -362,13 +368,14 @@
                         </div>
 
                         <div class="JobDetail-panelHeader">
-                            <a class="JobDetail-panelHeaderText" ng-show="lessEvents" href="" ng-click="toggleLessEvents()">
-                                EVENT SUMMARY<i class="JobDetail-expandArrow fa fa-caret-left"></i>
-                            </a>
-                            <a class="JobDetail-panelHeaderText" ng-show="!lessEvents" href="" ng-click="toggleLessEvents()">
-                                EVENT SUMMARY<i class="JobDetail-expandArrow fa fa-caret-down"></i>
-                            </a>
-
+                            <div class="JobDetail-expandContainer">
+                                <a class="JobDetail-panelHeaderText" ng-show="lessEvents" href="" ng-click="toggleLessEvents()">
+                                    EVENT SUMMARY<i class="JobDetail-expandArrow fa fa-caret-left"></i>
+                                </a>
+                                <a class="JobDetail-panelHeaderText" ng-show="!lessEvents" href="" ng-click="toggleLessEvents()">
+                                    EVENT SUMMARY<i class="JobDetail-expandArrow fa fa-caret-down"></i>
+                                </a>
+                            </div>
                         </div>
                         <div id="events-summary">
                         <div id="hosts-summary-section" class="section">
@@ -387,14 +394,6 @@
                                         </div>
                                     </div>
                                 </div>
-
-                            <!-- <div class="row legend-row">
-                                <div class="col-md-12">
-                                    <div class="legend"><i class="fa fa-circle successful-hosts-color"></i> OK <i class="fa fa-circle changed-hosts-color"></i> Changed
-                                <i class="fa fa-circle unreachable-hosts-color"></i> Unreachable <i class="fa fa-circle failed-hosts-color"></i> Failed</div>
-                                </div>
-                            </div> -->
-
                             <div class="table-header">
                                 <table class="table table-condensed">
                                     <thead>
diff --git a/awx/ui/client/src/shared/branding/colors.default.less b/awx/ui/client/src/shared/branding/colors.default.less
index dd53943e88..f63c3860f3 100644
--- a/awx/ui/client/src/shared/branding/colors.default.less
+++ b/awx/ui/client/src/shared/branding/colors.default.less
@@ -161,6 +161,9 @@
 @db-graph-axis:         @default-border;
 @db-graph-axis-label:   @default-interface-txt;
 
+//job detail
+@toggle-selected-text:  #eeeeee;
+
 // panel
 @panel-bg:              @default-bg;
 @panel-border:          @default-border;