Add a group toggler to the rows in the Permission and Group Membership tables on the Admin Permissions page

[Ryan J Ollos]

A feature proposed in #11056 is to add a group toggle to the rows in the Permissions and Group Membership tables on the Admin Permissions page. The feature will be refined in this ticket.

The scope of this ticket may also be expanded to apply to filters on the query page (effectively integrating the ​th:QueryUiAssistPlugin into Trac).

[Ryan J Ollos]

Changes proposed in #11056 can be found in log:rjollos.git:t11417, however further iterations are likely.

[Ryan J Ollos]

Revised changes in log:rjollos.git:t11417.1, including a proposed rename of the function added in #10994.

[Ryan J Ollos]

The function added in #10994 was renamed in [13008]. The other changes in log:rjollos.git:t11417.1 will be reviewed again and committed sometime in milestone:1.1.3.

[Ryan J Ollos]

Replying to rjollos:

The scope of this ticket may also be expanded to apply to filters on the query page (effectively integrating the ​th:QueryUiAssistPlugin into Trac).

I'm aiming to add this behaviour as well.

The ​th:QueryUiAssistPlugin has the following behaviour:

• Double click on a checkbox label selects the checkbox and unselects all other checkboxes in the filter group.
• Double click on the label inverts the state of every checkbox. For example, X X O X → O O X O.

I like the first behaviour and I'm considering incorporating it here. The second behaviour I'm not sure is as useful or intuitive. We may want to stick with the originally proposed behaviour of toggling all the checkboxes when clicking on a group label. Both behaviours could work together though, the toggle all on single-click, invert state on double click.

[Ryan J Ollos]

Replying to rjollos:

The ​th:QueryUiAssistPlugin has the following behaviour:

• Double click on a checkbox label selects the checkbox and unselects all other checkboxes in the filter group.
• Double click on the label inverts the state of every checkbox. For example, X X O X → O O X O.

The behaviors would be useful for the search filters as well.

[Ryan J Ollos]

Refactoring of ​QueryUiAssistPlugin in ​#12062 may make the code more useful for direct utilization in Trac: ​browser:/queryuiassistplugin/1.0/uiassist/query.py.

[Ryan J Ollos]

log:rjollos.git:t11417-query-page integrates the code from ​QueryUiAssistPlugin.

[Jun Omae]

I think it would be simple to use document.getElementById() like this.

       var clicked = this.tagName === "LABEL" ?
-                    $('#' + $(this).attr("for"))[0] : this;
+                    document.getElementById(this.htmlFor) : this;

IMO, I like to use click with a modifier key rather than double click. It wouldn't need to prevent text selection. I don't want to eternally block text-selection by user-select: none for labels in filter.

trac/htdocs/js/query.js

@@ -110 +110 @@
 
     var $filters = $("#filters");
 
-    // disable selection of labels
-    function disableLabelSelection() {
-      $filters.find('label').css("user-select", "none")
-                            .attr("unselectable", "on")
-                            .on("selectstart", false);
-    }
-    disableLabelSelection();
-
     // Flip checkboxes in the row
-    $filters.on("dblclick", "th label", function(event) {
+    $filters.on("click", "th label", function(event) {
+      if (!event.metaKey && !event.altKey)
+        return;
       var name = this.id.slice(6);
       $filters.find("input[name=" + name + "]")
               .filter(":checkbox")
@@ -127 +121 @@
     });
 
     // Enable only clicked checkbox and clear others
-    $filters.on("dblclick", "td :checkbox, td :checkbox + label", function(event) {
+    $filters.on("click", "td :checkbox, td :checkbox + label", function(event) {
+      if (!event.metaKey && !event.altKey)
+        return;
       var clicked = this.tagName === "LABEL" ?
-                    $('#' + $(this).attr("for"))[0] : this;
+                    document.getElementById(this.htmlFor) : this;
       $("input[name=" + clicked.name + "]", $filters).prop("checked", false);
       $(clicked).prop("checked", true);
     });
@@ -278 +274 @@
 
       // Enable the Or... button if it's been disabled
       $("#add_clause").attr("disabled", false);
-
-      disableLabelSelection();
     }).next("div.inlinebuttons").remove();
 
     // Add a new empty clause at the end by cloning the current last clause

[Ryan J Ollos]

I'll rework the patch according to the suggestions in comment:12.

[Ryan J Ollos]

Latest changes in log:rjollos.git:t11417-query-page.2. In addition to the comment:11 changes, single click on row label toggles all checkboxes.

I tested on Win8 with the latest IE, Chrome, Firefox and Opera. I tested on Ubuntu 14.04 with the latest Firefox, Chromium and Opera. On Linux CTRL + ALT + click combination is required rather than just ALT + click. That could be due to running in VMWare though.

An annoying aspect with the Opera browser on Windows is that the main menu opens on keyup of the ALT key. Opera browser on Linux toggles all checkboxes off when CTRL + ALT + click on item of row. I'll investigate those issues further tomorrow.

[Ryan J Ollos]

Deferring the work in comment:14 to 1.1.5, see #11970.

[Ryan J Ollos]

Proposed changes in log:rjollos.git:t11417.3. This addresses the original topic of the ticket, a select all toggler for the row labels on the Admin Permissions page.

[Jun Omae]

Replying to rjollos:

Proposed changes in log:rjollos.git:t11417.3. This addresses the original topic of the ticket, a select all toggler for the row labels on the Admin Permissions page.

Looks good to me.

[Ryan J Ollos]

Thanks for the review. Committed to trunk in [13824].

[Ryan J Ollos]

See related #12376.