Merge pull request #13 from mozilla/selected-job

selectedJob enhancements

ui/css/treeherder.css

@@ -40,3 +40,13 @@ body{
 .lv-line-highlight {
     background-color: LightGrey;
 }
+
+.job-table td {
+    border-top: 0px;
+    padding: 1px;
+}
+
+.selected-job {
+    border-width: 5px;
+    border-color: black;
+}

ui/index.html

@@ -70,6 +70,10 @@
              ng-show="selectedJob">
             <div class="navbar-inner">
                 <div class="container-fluid">
+                <button type="button"
+                        class="close pull-right"
+                        aria-hidden="true"
+                        ng-click="clearJob()">&times;</button>
                     <div class="span7">
                         <dl class="dl-horizontal">
                             <span ng-repeat="(label, value) in selectedJob.visibleFields">

ui/js/controllers/main.js

@@ -11,6 +11,10 @@ treeherder.controller('MainCtrl',
             $rootScope.statusMsg = msg;
             $rootScope.statusColor = "green";
         };
+        $scope.clearJob = function() {
+            // setting the selectedJob to null hides the bottom panel
+            $rootScope.selectedJob = null;
+        }
     }
 );
 

ui/partials/jobs.html

@@ -45,31 +45,33 @@
     </div>
     <div collapse="isCollapsedResults">
 
-        <div class="row-fluid"
-             ng-repeat="platform in job_results | filter:query">
-            <div class="span2"><span>{{ platform.name }}</span></div>
-            <div class="span10">
-                <div ng-repeat="group in platform.groups"
-                     ng-class="{'btn-group': group.symbol}">
-                    <a ng-show="group.symbol"
-                       class="btn-mini btn-info btn"
-                       title="{{ group.name }}">
-                       {{ group.symbol }}
-                    </a>
-                    <a class="btn-mini {{ job|typeClass }} {{ job.result|resultClass }}"
-                       title="{{ job|jobHover }}"
-                       ng-repeat="job in group.jobs"
-                       ng-click="viewJob(job)"
-                       ng-right-click="viewLog(job.resource_uri)">
-                       <!--
-                           We should conditionally remove the fire icon once they have
-                           starred it, most likely.
-                       -->
-                       <i class="icon-fire" ng-show="job.result=='testfailed' || job.result=='busted'"></i>
-                       {{ job.job_type_symbol }}
-                    </a>
-                </div>
-            </div>
-        </div>
+        <table class="table job-table table-hover">
+            <tr ng-repeat="platform in job_results | filter:query">
+                <td class="span2"><span>{{ platform.name }}</span></td>
+                <td class="span10">
+                    <div ng-repeat="group in platform.groups"
+                         ng-class="{'btn-group': group.symbol}">
+                        <a ng-show="group.symbol"
+                           class="btn-mini btn"
+                           title="{{ group.name }}">
+                           {{ group.symbol }}
+                        </a>
+                        <a class="{{ job|typeClass }} {{ job.result|resultClass }}"
+                           ng-class="{'btn-large selected-job': (selectedJob==job), 'btn-mini': (selectedJob!=job)}"
+                           title="{{ job|jobHover }}"
+                           ng-repeat="job in group.jobs"
+                           ng-click="viewJob(job)"
+                           ng-right-click="viewLog(job.resource_uri)">
+                           <!--
+                               We should conditionally remove the fire icon once they have
+                               starred it, most likely.
+                           -->
+                           <i class="icon-fire" ng-show="job.result=='testfailed' || job.result=='busted'"></i>
+                           {{ job.job_type_symbol }}
+                        </a>
+                    </div>
+                </td>
+            </tr>
+        </table>
     </div>
 </div>