From f4891b1946d799007d0a6aba76c66141f6119a46 Mon Sep 17 00:00:00 2001
From: Russell Bryant <rbryant@redhat.com>
Date: Mon, 23 Dec 2013 13:17:17 -0500
Subject: [PATCH] zuul status: add a visual hint for change headers

Change headers can be clicked on to expand/collapse job details.  Add a
visual hint that the header can be clicked on by changing the background
color of the change header to be a lighter color when the mouse is over
it.

Change-Id: I24ac2347c1cfa6453754ea6d1613ad755c33fd26
---
 modules/openstack_project/files/zuul/status.html | 3 +++
 modules/openstack_project/files/zuul/status.js   | 5 ++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/modules/openstack_project/files/zuul/status.html b/modules/openstack_project/files/zuul/status.html
index b1de3f39dc..7486afb4a8 100644
--- a/modules/openstack_project/files/zuul/status.html
+++ b/modules/openstack_project/files/zuul/status.html
@@ -94,6 +94,9 @@ td.tree {
 .change > .header > .time {
     float: right;
 }
+.change > .hover {
+    background: #F3FDFF;
+}
 .jobwrapper {
     display: table;
     width: 100%;
diff --git a/modules/openstack_project/files/zuul/status.js b/modules/openstack_project/files/zuul/status.js
index 73d9ebd192..6eaf517985 100644
--- a/modules/openstack_project/files/zuul/status.js
+++ b/modules/openstack_project/files/zuul/status.js
@@ -229,7 +229,10 @@ function format_change(change, change_queue) {
     }
 
     html += '<td class="change-container">';
-    html += '<div class="change" id="' + safe_id(change['id']) + '"><div class="header" onClick="toggle_display_jobs(this)">';
+    html += '<div class="change" id="' + safe_id(change['id']) + '">' +
+            '<div class="header" onClick="toggle_display_jobs(this)" ' +
+            'onmouseover="$(this).addClass(\'hover\')" ' +
+            'onmouseout="$(this).removeClass(\'hover\')">';
 
     html += '<span class="project">' + change['project'] + '</span>';
     var id = change['id'];