Add border-bottom to job details header

Helps define where it ends and the rest of the page starts.
gocd · Apr 18, 2017 · b9e1c20 · b9e1c20
1 parent 11f19db
commit b9e1c20
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 3 deletions.
diff --git a/server/webapp/WEB-INF/rails.new/app/assets/javascripts/json_to_css.js b/server/webapp/WEB-INF/rails.new/app/assets/javascripts/json_to_css.js
@@ -56,6 +56,7 @@ JsonToCss.prototype = {
     update_build_detail_header : function(json) {
         var css_class_name = json.building_info.current_status.toLowerCase();
         this._renew_class_name('build_status', [css_class_name]);
+        this._renew_class_name('job_details_header', [css_class_name]);
     },
 
 	update_build_list : function(json, id, imgSrc) {

diff --git a/server/webapp/WEB-INF/rails.new/app/assets/stylesheets/css/build_detail.scss b/server/webapp/WEB-INF/rails.new/app/assets/stylesheets/css/build_detail.scss
@@ -624,6 +624,24 @@ a.collapse-all {
   }
 }
 
+.job_details.page_header {
+  border-bottom: 1px solid #000;
+}
+.job_details.page_header.building {
+  border-bottom: 3px solid #ffc11b;
+}
+.job_details.page_header.passed {
+  border-bottom: 3px solid #78C42D;
+}
+.job_details.page_header.cancelled {
+  border-bottom: 3px dotted #ffc11b;
+}
+.job_details.page_header.failed,
+.job_details.page_header.failing
+{
+  border-bottom: 3px solid #fa2d2d;
+}
+
 .build-status.cancelled {
   background-color: #ffc11b;
   color: #000;

diff --git a/server/webapp/WEB-INF/rails.new/spec/javascripts/json_to_css_spec.js b/server/webapp/WEB-INF/rails.new/spec/javascripts/json_to_css_spec.js
@@ -18,8 +18,12 @@ describe("json_to_css", function () {
     var json_to_css;
 
     beforeEach(function () {
-        setFixtures("<a id=\"project1_forcebuild\"></a>\n" +
-            "<a id=\"project1_config_panel\"></a>");
+        setFixtures(
+          "<a id=\"project1_forcebuild\"></a>\n" +
+          "<a id=\"project1_config_panel\"></a>\n" +
+          "<div id=\"build_status\"></div>\n" +
+          "<div id=\"job_details_header\"></div>\n"
+        );
     });
 
     beforeEach(function () {
@@ -42,4 +46,22 @@ describe("json_to_css", function () {
         json_to_css.update_force_build(paused_json("project1"));
         assertTrue($("project1_forcebuild").className, $("project1_forcebuild").hasClassName("force_build_disabled"));
     });
+
+    it("should add current status as a class to build status and job details header", function () {
+        json_to_css.update_build_detail_header(construct_new_json('job1', 'Failed', 'Failed'));
+        assertTrue($("build_status").hasClassName('failed'));
+        assertTrue($("job_details_header").hasClassName('failed'));
+    });
+
+    it("should replace old status with current status as a class to build status and job details header", function () {
+        $("build_status").className = "failed";
+        $("job_details_header").className = "failed";
+
+        json_to_css.update_build_detail_header(construct_new_json('job1', 'passed', 'Passed'));
+
+        assertTrue($("build_status").hasClassName('passed'));
+        assertFalse($("build_status").hasClassName('failed'));
+        assertTrue($("job_details_header").hasClassName('passed'));
+        assertFalse($("job_details_header").hasClassName('failed'));
+    });
 });
diff --git a/server/webapp/WEB-INF/vm/shared/_job_details_breadcrumbs.vm b/server/webapp/WEB-INF/vm/shared/_job_details_breadcrumbs.vm
@@ -15,7 +15,7 @@
  *************************GO-LICENSE-END***********************************#
 
 #if($_page_title)
-<div class="job_details entity_title page_header">
+<div id="job_details_header" class="job_details entity_title page_header">
   <div class="row">
     <ul class="entity_title">
       <li class="name"><a href="$req.getContextPath()/tab/pipeline/history/$presenter.pipelineName"