[PATCH 0/5] patch-list: improve usability of list action bar

Raxel Gutierrez raxel at google.com
Tue Jul 20 09:34:23 AEST 2021

The current actions for the patch list page exist at the bottom of the page
making them hard to discover for users. Also, the UI for the existing forms
occupies a lot of screen real estate. This series adds a JS cookie library
to get the csrftoken for requests that are made in the 4th and 5th patches.
The second patch refactors the HTML code so that it's easier to style in
the third patch that changes the design to a more action bar UI. I create
a separate js file for the html templates which I believe is better for
code health and I hope the pattern continues. Additionally, selectors are
renamed to use a dash-case convention for naming that improves readability.

The fourth patch adds a static utility js file for functions that will be
reused throughout other js files. One nice benefit of these functions
being separated is that now the handling of update & error messages for
requests can be worked on in one specific spot. For example, the current
handling of messages stacks the messages up as a list of messages.
Alternative behaviors like adding timeouts to requests to remove each
update message, simply replacing the existing messages & errors, or
adding to the counter of (e.g. "x+1 patches updated") can be made.
The functions in the fourth and fifth patches are documented using Google's
JS Style Guide [1] for function specs.

Also, there is a thread about design choices and future improvements that
can be added to the patch list action bar [2].

[1] https://google.github.io/styleguide/jsguide.html
[2] https://lists.ozlabs.org/pipermail/patchwork/2021-July/006939.html

Raxel Gutierrez (5):
  static: added JS Cookie Library to get csrftoken for fetch requests
  patch-list: refactored html and patch list forms
  patch-list: improved list action bar ui
  static: utils.js for modular handling of requests & messages
  patch-list: added inline dropdown changes functionality

 htdocs/README.rst                             |  23 +++
 htdocs/css/style.css                          |  64 +++---
 htdocs/js/js.cookie-2.2.1.min.js              |   3 +
 htdocs/js/patch-list.js                       |  46 +++++
 htdocs/js/utils.js                            |  71 +++++++
 patchwork/forms.py                            |  27 ++-
 .../patchwork/partials/patch-list.html        | 195 ++++++++----------
 patchwork/views/__init__.py                   |   5 +
 templates/base.html                           |   3 +-
 9 files changed, 296 insertions(+), 141 deletions(-)
 create mode 100644 htdocs/js/js.cookie-2.2.1.min.js
 create mode 100644 htdocs/js/patch-list.js
 create mode 100644 htdocs/js/utils.js


More information about the Patchwork mailing list