feat: add to templates - issue 2551353 - add roundup-classhelper

Incorporate roundup-classhelper into templates.

page.html:

  add script tag to load classhelper.js

  Wrap classhelp links in the macros:

      search_popup and search_multiselect

  with roundup-classhelper. Implement mechanism to set
  data-search-with using data_search_with variable defined in tal in
  the scope enclosing the macro call. E.G. in issue.search.html
  you could use:

  <tr tal:define="name string:keyword;
                data_search_with string:name;
                db_klass string:keyword;
                db_content string:name;">
    <th i18n:translate="">Keyword:</th>
    <td metal:use-macro="search_multiselect"></td>
    <td metal:use-macro="column_input"></td>
    <td metal:use-macro="sort_input"></td>
    <td metal:use-macro="group_input"></td>
  </tr>

  rather than the expression editor if you wanted.

  Note that the search_* macros are not documented AFAICT.  I can't
  find search_multiselect and search_popup used in any of the stock
  templates.

issue.item.html:

  Wrap classhelp links with roundup-classhelper. Configure
  data-search-with to emulate (or enhance) original classhelper
  popups.

  For user classhelpers show roles search only if he user has an Admin
  role.

_generic.translation, classhelper.css:

  import from https://github.com/UMB-CS-682-Team-03/tracker
  rev: 1b897b1

classhelper.js:

  import from https://github.com/UMB-CS-682-Team-03/tracker
  rev: 1b897b1

  with one change. Change roles endpoint from "/rest/roles" to
  "/rest/data/user/roles" to match new endpoint added to Roundup.

Author: rouilj

share/roundup/templates/classic/html/_generic.translation

@@ -0,0 +1,14 @@
+<tal xmlns:tal="http://xml.zope.org/namespaces/tal" tal:omit-tag="true"
+><tal:x tal:replace="python:request.client.additional_headers.update(
+    {'Content-Type':'application/vnd.roundup.translation+json'}
+    )"></tal:x>{
+   "RoundupTranslations": "RoundupTranslations"<tal:block
+	tal:condition="request/form/properties/value | false"
+	    ><tal:loop tal:repeat="field
+                 python:request.form['properties'].value.split(',')"
+              ><tal:x tal:condition="field" 
+                  tal:replace="python:',\n   \x22%s\x22: \x22%s\x22' % (
+                           field, i18n.gettext(field))"
+            /></tal:loop></tal:block>
+}
+</tal>

share/roundup/templates/classic/html/classhelper.css

@@ -0,0 +1,141 @@
+.popup-tablediv {
+    overflow: auto;
+}
+
+.popup-table {
+    table-layout: auto;
+    width: 100%;
+    font-size: .9em;
+}
+
+table th {
+    font-weight: normal;
+    text-align: left;
+    padding-left: .3em;
+    color: #444;
+    background-color: #efefef;
+    border-bottom: 1px solid #afafaf;
+    border-top: 1px solid #afafaf;
+    text-transform: uppercase;
+    vertical-align: middle;
+    line-height: 1.5em;
+}
+
+table td {
+    vertical-align: middle;
+    padding-left: .3em;
+    padding-right: .2em;
+    border-bottom: 1px solid #efefef;
+    text-align: left;
+    empty-cells: show;
+    white-space: nowrap;
+    vertical-align: middle;
+}
+
+table.popup-table tr:hover {
+    background-color: #eee;
+    cursor: pointer;
+}
+
+.row-style {
+    cursor: pointer;
+}
+
+.table-header {
+    width: 15px;
+}
+
+/* Accumulator */
+
+.popup-control {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    gap: 8px;
+    padding: 8px;
+    border-top: 2px solid #444;
+    background-color: #eee;
+}
+
+button {
+    min-width: 3em;
+}
+
+@media (pointer: coarse) {
+    /* make min width 48px (3em*16px/em) on touch screens */
+  button {
+    min-height: 3em;
+  }
+  table td { padding-block: 2em; }
+}
+
+.popup-apply {
+    background-color: #c1cee6;
+    font-weight: bold;
+    min-width: 7em;
+}
+
+/* Pagination */
+
+.popup-pagination {
+    display: flex;
+    justify-content: space-evenly;
+    padding: 8px;
+}
+
+.popup-pagination button {
+    min-width: 40px;
+    width: 30%;
+    cursor: pointer;
+    color: blue;
+}
+
+.popup-pagination button:disabled {
+    color: gray;
+    opacity: 0.4;
+    cursor: default;
+}
+
+/* Search */
+.popup-search {
+    border-bottom: 2px solid #444;
+}
+
+.search-label {
+    text-transform: capitalize;
+    font-weight: bold;
+}
+
+.search-button {
+    background-color: #c1cee6;
+    font-weight: bold;
+    min-width: 7em;
+}
+
+.reset-button {
+    margin-left: 60px;
+}
+
+.flex-container {
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.separator {
+    flex-grow: 1;
+}
+
+.search-error input {
+    border: 2px solid red;
+}
+
+.search-error > .error-message {
+    color: red;
+    font-size: 14px;
+    margin-left: 4px;
+    padding-block-start: 0.25em;
+}
+
+*:focus-visible { outline-offset: 3px; }