From 937ac44e8a2173c5a3763cadd4bb564e034f7f76 Mon Sep 17 00:00:00 2001
From: Adam Waldenberg <adam.waldenberg@ejwa.se>
Date: Sat, 14 Nov 2015 00:25:56 +0100
Subject: [PATCH] Replaced table footers with buttons and fixed zebra coloring
 (#28).

Apart from the aforementioned changes, some slight improvements were
also done to the styling of the table.

The buttons utilize a check mark symbol instead of modifying the
button text upon selection.
---
 gitinspector/html/html.header        | 55 ++++++++++++++++++++++------
 gitinspector/output/blameoutput.py   | 10 +++--
 gitinspector/output/changesoutput.py | 12 ++++--
 3 files changed, 58 insertions(+), 19 deletions(-)

diff --git a/gitinspector/html/html.header b/gitinspector/html/html.header
index eb0329d..a354879 100644
--- a/gitinspector/html/html.header
+++ b/gitinspector/html/html.header
@@ -64,22 +64,17 @@
 					$(this).append("<strong> &#x25bc;</strong>");
 				}});
 
-				$("table#changes tfoot tr td:first-child, table#blame tfoot tr td:first-child").filter(function() {{
-					this.hiddenCount = $(this).parent().parent().parent().find("tbody tr:hidden").length;
+				$("table#changes, table#blame").parent().find("button").filter(function() {{
+					this.hiddenCount = $(this).parent().find("tbody tr:hidden").length;
 					return this.hiddenCount > 0;
-				}}).each(function() {{
-					$(this).addClass("hoverable");
-					this.innerHTML = "{show_minor_authors} (" + this.hiddenCount + ") &#x25bc;";
 				}}).click(function() {{
 					this.clicked = !this.clicked;
 
 					if (this.clicked) {{
-						this.innerHTML = "{hide_minor_authors} (" + this.hiddenCount + ") &#x25b2;";
-						$(this).parent().parent().parent().find("tbody tr:empty").remove();
-						$(this).parent().parent().parent().find("tbody tr").show();
+						$(this).parent().find("tbody tr:empty").remove();
+						$(this).parent().find("tbody tr").show();
 					}} else {{
-						this.innerHTML = "{show_minor_authors} (" + this.hiddenCount + ") &#x25bc;";
-						$(this).parent().parent().parent().find("tbody tr td:last-child").filter(function() {{
+						$(this).parent().find("tbody tr td:last-child").filter(function() {{
 							return parseFloat(this.innerHTML) < MINOR_AUTHOR_PERCENTAGE;
 						}}).parent().each(function() {{
 							$(this).after("<tr></tr>").hide();
@@ -207,6 +202,9 @@
 				box-shadow: 1px 1px 3px #666;
 				-moz-box-shadow: 1px 1px 3px #666;
 			}}
+			div.box div {{
+				text-align: center;
+			}}
 			div.logo p {{
 				margin: 0;
 				padding: 15px 0 0 0;
@@ -218,13 +216,20 @@
 			table {{
 				font-size: small;
 			}}
+			table.table > tbody > tr > td {{
+				border: 1px solid #e8e8e8;
+			}}
 			table.table > thead > tr > th, table.table > tbody > tr > td {{
-				border: 1px solid #efefef;
 				vertical-align: middle;
-				padding: 6px;
+				padding: 8px 0px 8px 12px;
 			}}
 			thead tr th.header {{
 				background-color: #e7b7a5;
+				border-width: 0px;
+			}}
+			thead tr th:hover {{
+				color: #fff;
+				background-color: #b78775;
 			}}
 
 			th:first-child {{
@@ -252,6 +257,32 @@
 			hr {{
 				border: 3px solid #e7e7e7;
 			}}
+			button.btn.btn-primary {{
+				font-weight: bold;
+				color: rgb(51, 51, 51);
+				background-color: #e7b7a5;
+				border-color: #e2b2a0;
+				margin-bottom: 20px;
+				padding: 10px 25px 10px 15px;
+				text-align: center;
+			}}
+			button.btn.btn-primary:hover {{
+				color: #fff;
+				background-color: #b78775;
+				border-color: #a77765;
+			}}
+			button.btn.btn-primary.active {{
+				color: #fff;
+				background-color: #b78775;
+				border-color: #b28270;
+			}}
+			button.btn span {{
+				color: transparent;
+			}}
+
+			button.btn.active span {{
+				color: white;
+			}}
 			/*body > div {{
 				width: 100%;
 				display: inline-block;
diff --git a/gitinspector/output/blameoutput.py b/gitinspector/output/blameoutput.py
index a50cc6d..68c7528 100644
--- a/gitinspector/output/blameoutput.py
+++ b/gitinspector/output/blameoutput.py
@@ -41,7 +41,12 @@ class BlameOutput(Outputable):
 
 	def output_html(self):
 		blame_xml = "<div><div class=\"box\">"
-		blame_xml += "<h1>" + _(BLAME_INFO_TEXT) + "</h1><hr /><div><table id=\"blame\" class=\"table table-striped\">"
+		blame_xml += "<h1>" + _(BLAME_INFO_TEXT) + "</h1><hr /><div>"
+		blame_xml += "<button type=\"button\" class=\"btn btn-primary\""
+		blame_xml += "        data-toggle=\"button\" aria-pressed=\"false\" autocomplete=\"off\">"
+		blame_xml += "    <span>&#x2713;</span> " + _("Show minor authors")
+		blame_xml += "</button>"
+		blame_xml += "<table id=\"blame\" class=\"table table-striped\">"
 		blame_xml += "<thead><tr> <th>{0}</th> <th>{1}</th> <th>{2}</th> <th>{3}</th> <th>{4}</th> </tr></thead>".format(
 		             _("Author"), _("Rows"), _("Stability"), _("Age"), _("% in comments"))
 		blame_xml += "<tbody>"
@@ -72,8 +77,7 @@ class BlameOutput(Outputable):
 			if blames[-1] != entry:
 				chart_data += ", "
 
-		blame_xml += "<tfoot><tr> <td colspan=\"5\">&nbsp;</td> </tr></tfoot></tbody></table>"
-		blame_xml += "<div class=\"chart\" id=\"blame_chart\"></div></div>"
+		blame_xml += "</tbody></table><div class=\"chart\" id=\"blame_chart\"></div></div>"
 		blame_xml += "<script type=\"text/javascript\">"
 		blame_xml += "    blame_plot = $.plot($(\"#blame_chart\"), [{0}], {{".format(chart_data)
 		blame_xml += "        series: {"
diff --git a/gitinspector/output/changesoutput.py b/gitinspector/output/changesoutput.py
index a837a2e..f45c035 100644
--- a/gitinspector/output/changesoutput.py
+++ b/gitinspector/output/changesoutput.py
@@ -44,7 +44,12 @@ class ChangesOutput(Outputable):
 			total_changes += authorinfo_list.get(i).deletions
 
 		if authorinfo_list:
-			changes_xml += "<h1>" + _(HISTORICAL_INFO_TEXT) + "</h1><hr /><div><table id=\"changes\" class=\"table table-striped\">"
+			changes_xml += "<h1>" + _(HISTORICAL_INFO_TEXT) + "</h1><hr /><div>"
+			changes_xml += "<button type=\"button\" class=\"btn btn-primary\""
+			changes_xml += "        data-toggle=\"button\" aria-pressed=\"false\" autocomplete=\"off\">"
+			changes_xml += "    <span>&#x2713;</span> " + _("Show minor authors")
+			changes_xml += "</button>"
+			changes_xml += "<table id=\"changes\" class=\"table table-striped\">"
 			changes_xml += "<thead><tr> <th>{0}</th> <th>{1}</th> <th>{2}</th> <th>{3}</th> <th>{4}</th>".format(
 			               _("Author"), _("Commits"), _("Insertions"), _("Deletions"), _("% of changes"))
 			changes_xml += "</tr></thead><tbody>"
@@ -52,13 +57,12 @@ class ChangesOutput(Outputable):
 			for i, entry in enumerate(sorted(authorinfo_list)):
 				authorinfo = authorinfo_list.get(entry)
 				percentage = 0 if total_changes == 0 else (authorinfo.insertions + authorinfo.deletions) / total_changes * 100
-				changes_xml += "<tr>"
 
 				if format.get_selected() == "html":
-					changes_xml += "<td><img src=\"{0}\"/>{1}</td>".format(
+					changes_xml += "<tr><td><img src=\"{0}\"/>{1}</td>".format(
 					               gravatar.get_url(self.changes.get_latest_email_by_author(entry)), entry)
 				else:
-					changes_xml += "<td>" + entry + "</td>"
+					changes_xml += "<tr><td>" + entry + "</td>"
 
 				changes_xml += "<td>" + str(authorinfo.commits) + "</td>"
 				changes_xml += "<td>" + str(authorinfo.insertions) + "</td>"