[PATCH v2] patch-detail: move patch diff section up and add collapse button

[Raxel Gutierrez]

Add new hide/show button to "Patch" header action bar so that the patch
diff can be collapsed for easier viewing of comments and other related
information. Also, the buttons are now left-aligned instead of
right-aligned. The download buttons are also next to the patch subject
title. Before [1] when the Patch section is at the bottom of the page
and after [2] where it is moved to the top and button group next to the
patch subject title is also left-aligned now.

[1] https://imgur.com/svhP18W
[2] https://imgur.com/loFPIpX

Signed-off-by: Raxel Gutierrez <raxel at google.com>
---
 htdocs/css/style.css                          | 10 +++++++
 htdocs/js/submission.js                       |  6 ++++
 .../patchwork/partials/download-buttons.html  |  5 +++-
 patchwork/templates/patchwork/submission.html | 29 +++++++++----------
 4 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/htdocs/css/style.css b/htdocs/css/style.css
index 2f63b9a..8161310 100644
--- a/htdocs/css/style.css
+++ b/htdocs/css/style.css
@@ -302,6 +302,16 @@ table.patchmeta tr th, table.patchmeta tr td {
     border: 0;
 }
 
+.patch-diff-header, .patch-submission-header {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+#patch-diff-actions {
+    margin-left: 16px;
+}
+
 .patch .content {
     padding: 1em;
 }
diff --git a/htdocs/js/submission.js b/htdocs/js/submission.js
index 79b677d..2a3cb7f 100644
--- a/htdocs/js/submission.js
+++ b/htdocs/js/submission.js
@@ -39,6 +39,12 @@ $( document ).ready(function() {
         toggle_div("toggle-patch-series", "patch-series", "expand", "collapse");
     });
 
+    // Click listener to show/hide patch diff
+    document.getElementById("toggle-patch-diff").addEventListener("click", function() {
+        console.log("hello");
+        toggle_div("toggle-patch-diff", "patch");
+    });
+
     // Click listener to show/hide related patches
     document.getElementById("toggle-related").addEventListener("click", function() {
         toggle_div("toggle-related", "related");
diff --git a/patchwork/templates/patchwork/partials/download-buttons.html b/patchwork/templates/patchwork/partials/download-buttons.html
index e75a25c..bbe3e0e 100644
--- a/patchwork/templates/patchwork/partials/download-buttons.html
+++ b/patchwork/templates/patchwork/partials/download-buttons.html
@@ -1,4 +1,7 @@
-<div class="btn-group pull-right">
+<div id="patch-diff-actions" class="btn-group">
+  {% if collapse %}
+    <button id="toggle-patch-diff" type="button" class="btn btn-default btn-hide">hide</button>
+  {% endif %}
   <button type="button" class="btn btn-default btn-copy"
      data-clipboard-text="{{ submission.id }}" title="Copy to Clipboard">
       {{ submission.id }}
diff --git a/patchwork/templates/patchwork/submission.html b/patchwork/templates/patchwork/submission.html
index e3a8909..8f4d3d9 100644
--- a/patchwork/templates/patchwork/submission.html
+++ b/patchwork/templates/patchwork/submission.html
@@ -14,9 +14,9 @@
 {% block title %}{{submission.name}}{% endblock %}
 
 {% block body %}
-<div>
-  {% include "patchwork/partials/download-buttons.html" %}
+<div class="patch-submission-header">
   <h1>{{ submission.name }}</h1>
+  {% include "patchwork/partials/download-buttons.html" with collapse=False %}
 </div>
 
 <table class="patch-meta">
@@ -267,6 +267,18 @@
   </pre>
 </div>
 
+{% if submission.diff %}
+<div class="patch-diff-header">
+  <h2>Patch</h2>
+  {% include "patchwork/partials/download-buttons.html" with collapse=True %}
+</div>
+<div id="patch" data-patch-id={{submission.id}} class="patch">
+  <pre class="content">
+    {{ submission|patchsyntax }}
+  </pre>
+</div>
+{% endif %}
+
 {% for item in comments %}
 {% if forloop.first %}
 <h2>Comments</h2>
@@ -317,17 +329,4 @@
   </pre>
 </div>
 {% endfor %}
-
-{% if submission.diff %}
-<div>
-  {% include "patchwork/partials/download-buttons.html" %}
-  <h2>Patch</h2>
-</div>
-<div id="patch" data-patch-id={{submission.id}} class="patch">
-<pre class="content">
-{{ submission|patchsyntax }}
-</pre>
-</div>
-{% endif %}
-
 {% endblock %}
-- 
2.32.0.432.gabb21c7263-goog