[RFC/PATCH 2/3] patch-detail: add label and button for comment addressed status

Raxel Gutierrez raxel at google.com
Fri Jul 23 07:35:42 AEST 2021


Add new label to show the status of whether a comment is addressed and a
button to change the status of the comment. Only users that can edit
the patch (submitter, delegate, project maintainers) can change the
status of a comment. Clean up submission.html to have hyphen delimited
id and class selector names as well. Before [1] and after [2] images
for reference.

[1] https://imgur.com/NDfcPJy
[2] https://imgur.com/kIhohED

Signed-off-by: Raxel Gutierrez <raxel at google.com>
---
 htdocs/css/style.css                          |  46 +++++-
 patchwork/templates/patchwork/submission.html | 146 +++++++++++-------
 patchwork/views/patch.py                      |   1 +
 3 files changed, 134 insertions(+), 59 deletions(-)

diff --git a/htdocs/css/style.css b/htdocs/css/style.css
index 243caa0..ff34ff5 100644
--- a/htdocs/css/style.css
+++ b/htdocs/css/style.css
@@ -1,3 +1,9 @@
+:root {
+    --light-color: #F7F7F7;
+    --warning-color: #f0ad4e;
+    --success-color: #5cb85c;
+}
+
 h2 {
     font-size: 25px;
     margin: 18px 0 18px 0;
@@ -192,7 +198,7 @@ table.patchmeta tr th, table.patchmeta tr td {
     vertical-align: top;
 }
 
-.submissionlist ul {
+.submission-list ul {
     list-style-type: none;
     padding: 0;
     margin: 0;
@@ -277,12 +283,18 @@ table.patchmeta tr th, table.patchmeta tr td {
     color: #f7977a;
 }
 
-.comment .meta {
+.patch-message .meta {
+    display: flex;
+    align-items: center;
     background: #f0f0f0;
     padding: 0.3em 0.5em;
 }
 
-.comment .content {
+.patch-message .message-date {
+    margin-left: 8px;
+}
+
+.patch-message .content {
     border: 0;
 }
 
@@ -294,6 +306,34 @@ table.patchmeta tr th, table.patchmeta tr td {
     font-family: "DejaVu Sans Mono", fixed;
 }
 
+#comment-status-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+#comment-status-label {
+    margin: 0px 8px;
+}
+
+#comment-action-addressed, #comment-action-unaddressed {
+    background-color: var(--light-color);
+    border-radius: 4px;
+}
+
+#comment-action-addressed {
+    border-color: var(--success-color);
+}
+
+#comment-action-unaddressed {
+    border-color: var(--warning-color);
+}
+
+#comment-action-addressed:hover, #comment-action-unaddressed:hover {
+    background-color: var(--success-color);
+    color: var(--light-color);
+}
+
 .quote {
     color: #007f00;
 }
diff --git a/patchwork/templates/patchwork/submission.html b/patchwork/templates/patchwork/submission.html
index 978559b..4109442 100644
--- a/patchwork/templates/patchwork/submission.html
+++ b/patchwork/templates/patchwork/submission.html
@@ -1,3 +1,4 @@
+
 {% extends "base.html" %}
 
 {% load humanize %}
@@ -32,7 +33,7 @@ function toggle_div(link_id, headers_id, label_show, label_hide)
   <h1>{{ submission.name }}</h1>
 </div>
 
-<table class="patchmeta">
+<table class="patch-meta">
  <tr>
   <th>Message ID</th>
   {% if submission.list_archive_url %}
@@ -61,12 +62,14 @@ function toggle_div(link_id, headers_id, label_show, label_hide)
 {% endif %}
  <tr>
   <th>Headers</th>
-  <td><a id="togglepatchheaders"
-   href="javascript:toggle_div('togglepatchheaders', 'patchheaders')"
-   >show</a>
-   <div id="patchheaders" class="patchheaders" style="display:none;">
-    <pre>{{submission.headers}}</pre>
-   </div>
+  <td>
+    <button
+      id="toggle-patch-headers"
+      onclick="javascript:toggle_div('toggle-patch-headers', 'patch-headers')"
+      >show</button>
+    <div id="patch-headers" class="patch-headers" style="display:none;">
+      <pre>{{submission.headers}}</pre>
+    </div>
   </td>
  </tr>
 {% if submission.series %}
@@ -75,11 +78,12 @@ function toggle_div(link_id, headers_id, label_show, label_hide)
   <td>
    <a href="{% url 'patch-list' project_id=project.linkname %}?series={{ submission.series.id }}">
     {{ submission.series.name }}
-   </a> |
-   <a id="togglepatchseries"
-      href="javascript:toggle_div('togglepatchseries', 'patchseries', 'expand', 'collapse')"
-   >expand</a>
-   <div id="patchseries" class="submissionlist" style="display:none;">
+   </a>
+   <button
+    id="toggle-patch-series"
+    onclick="javascript:toggle_div('toggle-patch-series', 'patch-series', 'expand', 'collapse')"
+    >expand</button>
+   <div id="patch-series" class="submission-list" style="display:none;">
     <ul>
      {% with submission.series.cover_letter as cover %}
       <li>
@@ -114,36 +118,38 @@ function toggle_div(link_id, headers_id, label_show, label_hide)
  <tr>
   <th>Related</th>
   <td>
-   <a id="togglerelated"
-      href="javascript:toggle_div('togglerelated', 'related')"
-   >show</a>
-   <div id="related" class="submissionlist" style="display:none;">
-    <ul>
-     {% for sibling in related_same_project %}
-      <li>
-       {% if sibling.id != submission.id %}
-        <a href="{% url 'patch-detail' project_id=project.linkname msgid=sibling.url_msgid %}">
-         {{ sibling.name|default:"[no subject]"|truncatechars:100 }}
-        </a>
-       {% endif %}
-      </li>
-     {% endfor %}
-     {% if related_different_project %}
-      <a id="togglerelatedoutside"
-         href="javascript:toggle_div('togglerelatedoutside', 'relatedoutside', 'show from other projects')"
-      >show from other projects</a>
-      <div id="relatedoutside" class="submissionlist" style="display:none;">
-       {% for sibling in related_outside %}
+    <button
+      id="toggle-related"
+      onclick="javascript:toggle_div('toggle-related', 'related')"
+      >show</button>
+    <div id="related" class="submission-list" style="display:none;">
+      <ul>
+      {% for sibling in related_same_project %}
         <li>
-         <a href="{% url 'patch-detail' project_id=sibling.project.linkname msgid=sibling.url_msgid %}">
+        {% if sibling.id != submission.id %}
+          <a href="{% url 'patch-detail' project_id=project.linkname msgid=sibling.url_msgid %}">
           {{ sibling.name|default:"[no subject]"|truncatechars:100 }}
-         </a> (in {{ sibling.project }})
+          </a>
+        {% endif %}
         </li>
-       {% endfor %}
-      </div>
-     {% endif %}
-    </ul>
-   </div>
+      {% endfor %}
+      {% if related_different_project %}
+        <button
+          id="toggle-related-outside"
+          onclick="javascript:toggle_div('toggle-related-outside', 'related-outside', 'show from other projects')"
+          >show from other projects</button>
+        <div id="related-outside" class="submission-list" style="display:none;">
+        {% for sibling in related_outside %}
+          <li>
+          <a href="{% url 'patch-detail' project_id=sibling.project.linkname msgid=sibling.url_msgid %}">
+            {{ sibling.name|default:"[no subject]"|truncatechars:100 }}
+          </a> (in {{ sibling.project }})
+          </li>
+        {% endfor %}
+        </div>
+      {% endif %}
+      </ul>
+    </div>
   </td>
  </tr>
 {% endif %}
@@ -277,14 +283,14 @@ function toggle_div(link_id, headers_id, label_show, label_hide)
 {% else %}
 <h2>Message</h2>
 {% endif %}
-<div class="comment">
-<div class="meta">
- <span>{{ submission.submitter|personify:project }}</span>
- <span class="pull-right">{{ submission.date }} UTC</span>
-</div>
-<pre class="content">
-{{ submission|commentsyntax }}
-</pre>
+<div class="patch-message">
+  <div class="meta">
+    <span>{{ submission.submitter|personify:project }}</span>
+    <span class="message-date">{{ submission.date }} UTC</span>
+  </div>
+  <pre class="content">
+  {{ submission|commentsyntax }}
+  </pre>
 </div>
 
 {% for item in comments %}
@@ -293,15 +299,43 @@ function toggle_div(link_id, headers_id, label_show, label_hide)
 {% endif %}
 
 <a name="{{ item.id }}"></a>
-<div class="comment">
-<div class="meta">
- <span>{{ item.submitter|personify:project }}</span>
- <span class="pull-right">{{ item.date }} UTC | <a href="{% url 'comment-redirect' comment_id=item.id %}"
-   >#{{ forloop.counter }}</a></span>
-</div>
-<pre class="content">
-{{ item|commentsyntax }}
-</pre>
+<div class="patch-message">
+  <div class="meta">
+    {{ item.submitter|personify:project }}
+    <span class="message-date">{{ item.date }} UTC |
+      <a href="{% url 'comment-redirect' comment_id=item.id %}">#{{ forloop.counter }}</a>
+    </span>
+    {% if item.addressed %}
+      <div id="comment-status-bar">
+        <div id="comment-status-label" class="text-success mx-3">
+          <span id="comment-status-icon" class="glyphicon glyphicon-ok-circle" aria-hidden="true"></span>
+          Addressed
+        </div>
+        {% if editable %}
+          <button id="comment-action-unaddressed" class="text-warning">
+            <span id="comment-action-icon" class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span>
+            Unaddressed
+          </button>
+        {% endif %}
+      </div>
+    {% else %}
+      <div id="comment-status-bar">
+        <div id="comment-status-label" class="text-warning mx-3">
+          <span id="comment-status-icon" class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span>
+          Unaddressed
+        </div>
+        {% if editable %}
+          <button id="comment-action-addressed" class="text-success">
+            <span id="comment-action-icon" class="glyphicon glyphicon-ok-circle" aria-hidden="true"></span>
+            Addressed
+          </button>
+        {% endif %}
+      </div>
+    {% endif %}
+  </div>
+  <pre class="content">
+  {{ item|commentsyntax }}
+  </pre>
 </div>
 {% endfor %}
 
diff --git a/patchwork/views/patch.py b/patchwork/views/patch.py
index 3e6874a..ac9cb44 100644
--- a/patchwork/views/patch.py
+++ b/patchwork/views/patch.py
@@ -128,6 +128,7 @@ def patch_detail(request, project_id, msgid):
         patch.check_set.all().select_related('user'),
     )
     context['submission'] = patch
+    context['editable'] = editable
     context['patchform'] = form
     context['createbundleform'] = createbundleform
     context['project'] = patch.project
-- 
2.32.0.432.gabb21c7263-goog



More information about the Patchwork mailing list