diff mbox series

patch-detail: move patch diff section up and add collapse button

Message ID 20210724013525.2789450-1-raxel@google.com
State Superseded
Headers show
Series patch-detail: move patch diff section up and add collapse button | expand
Related show

Commit Message

Raxel Gutierrez July 24, 2021, 1:35 a.m. UTC 
Add new hide/show button to "Patch" header action bar so that the patch

Comments

Raxel Gutierrez July 24, 2021, 1:39 a.m. UTC | #1 
Hi,

I didn't wanna create a cover letter for such a small patch, but I
wanted to mention that I think the download buttons bar next to the
patch subject title seems too repetitive. I see the benefit as it's
quicker to locate, but now the "Patch" section is moved up to the
user's viewable area when they go into a patch's page. So, I think
having it only in the "Patch" section suffices.

Best,
Raxel
diff mbox series

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@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 %}