[PATCH] 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                       |  9 +++++-
 .../patchwork/partials/download-buttons.html  |  5 +++-
 patchwork/templates/patchwork/submission.html | 29 +++++++++----------
 4 files changed, 36 insertions(+), 17 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..d5284f2 100644
--- a/htdocs/js/submission.js
+++ b/htdocs/js/submission.js
@@ -1,6 +1,7 @@
-import { updateProperty } from "./rest.js";
+// import { updateProperty } from "./rest.js";
 
 $( document ).ready(function() {
+    console.log("hello");
     function toggle_div(link_id, headers_id, label_show, label_hide) {
         const link = document.getElementById(link_id)
         const headers = document.getElementById(headers_id)
@@ -39,6 +40,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 b741282..753b2a4 100644
--- a/patchwork/templates/patchwork/submission.html
+++ b/patchwork/templates/patchwork/submission.html
@@ -33,9 +33,9 @@ function toggle_div(link_id, headers_id, label_show, label_hide)
 }
 </script>
 
-<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">
@@ -286,6 +286,18 @@ function toggle_div(link_id, headers_id, label_show, label_hide)
   </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>
@@ -336,17 +348,4 @@ function toggle_div(link_id, headers_id, label_show, label_hide)
   </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