[Rt-commit] rt branch, 4.4/highlight-rights-tabs-containing-granted-rights, created. rt-4.2.11-251-gdd66ac0
Todd Wade
todd at bestpractical.com
Fri Oct 23 23:27:58 EDT 2015
The branch, 4.4/highlight-rights-tabs-containing-granted-rights has been created
at dd66ac03ff68dddf7c2b383f9c83e5d529d32f4b (commit)
- Log -----------------------------------------------------------------
commit dd66ac03ff68dddf7c2b383f9c83e5d529d32f4b
Author: Matt Zagrabelny <mzagrabe at d.umn.edu>
Date: Tue Oct 20 10:33:20 2015 -0500
add highlighting functionality to Edit Rights admin pages
Use CSS to indicate when both category and principal tabs have rights
granted "underneath" them. This will visually help the administrator
know where unseen rights are granted in the admin UI. When all
checkboxes for a given category or principal have been unchecked (rights
revoked, thought still need to be committed), then the category and/or
principal tab will return to its unhighlighted state.
In order to keep the original text padding the same as how it is with
the highlighting, we need to tweak the padding of a couple of CSS
entries.
Signed-off-by: Todd Wade <todd at bestpractical.com>
diff --git a/share/html/Admin/Elements/EditRights b/share/html/Admin/Elements/EditRights
index bd86131..49434f0 100644
--- a/share/html/Admin/Elements/EditRights
+++ b/share/html/Admin/Elements/EditRights
@@ -112,6 +112,68 @@ if ($anchor =~ /AddPrincipal/) {
});
}
});
+
+ // "rights" checkbox state datastore...
+ var categories_check_counts = new Object;
+ var principals_check_counts = new Object;
+
+ // Before page loads we need to initialize our "rights" checkbox state
+ // datastore.
+ jQuery("div.category-tabs input[type=checkbox]").each(function(index, element) {
+ // Evaluating each checkbox and its current check state is the same
+ // as evaluating a check event once the page is loaded. However, we
+ // must indicate to the process_check_event that we are initializing
+ // the datastore. That is, we musn't decrement values from count
+ // totals for checkboxes that aren't checked. That only happens when
+ // a user actually unchecks a box, not when we are initially counting
+ // checked or unchecked boxes.
+ process_check_event(element, false);
+ });
+
+ jQuery("div.category-tabs input[type=checkbox]").change(function() {
+ process_check_event(this);
+ });
+
+ /*
+ parameters:
+ checkbox - DOM checkbox element that was checked
+ is_initialized - a boolean that defines whether or not this function
+ can assume that the "rights" checkbox state
+ datastore has been initialized.
+
+ */
+ function process_check_event(checkbox, is_initialized) {
+ is_initialized = typeof is_initialized !== 'undefined' ? is_initialized : true;
+
+ var category_tab = checkbox.getAttribute('data-category-tab');
+ var principal_tab = checkbox.getAttribute('data-principal-tab');
+
+ classify_tab(checkbox.checked, category_tab, categories_check_counts, is_initialized);
+ classify_tab(checkbox.checked, principal_tab, principals_check_counts, is_initialized);
+ }
+
+ function classify_tab(checked, tab_id, tab_check_counts, is_initialized) {
+ if (typeof tab_check_counts[tab_id] == 'undefined') {
+ tab_check_counts[tab_id] = 0;
+ }
+
+ if (checked) {
+ tab_check_counts[tab_id]++;
+ if (tab_check_counts[tab_id] == 1) {
+ // Then this is the first check and we need to add a class
+ // to the tab.
+ jQuery('[id="' + tab_id + '"]').addClass("tab-aggregates-checked-rights");
+ }
+ }
+ else if (is_initialized) {
+ tab_check_counts[tab_id]--;
+ if (tab_check_counts[tab_id] == 0) {
+ // Then this is the last uncheck and we need to remove a
+ // class from the tab.
+ jQuery('[id="' + tab_id + '"]').removeClass("tab-aggregates-checked-rights");
+ }
+ }
+ }
});
</script>
@@ -129,7 +191,7 @@ for my $category (@$Principals) {
my $display = ref $col eq 'CODE' ? $col->($obj) : $obj->$col;
my $id = "acl-" . $obj->PrincipalId;
</%perl>
-<li><a href="#<% $id %>"><% $loc ? loc($display) : $display %></a></li>
+<li><a href="#<% $id %>"><span class="rights-editor-label" id="<% "principal-tab-$id" %>"><% $loc ? loc($display) : $display %></span></a></li>
<%perl>
}
}
diff --git a/share/html/Admin/Elements/EditRightsCategoryTabs b/share/html/Admin/Elements/EditRightsCategoryTabs
index 6174e68..ffb6f34 100644
--- a/share/html/Admin/Elements/EditRightsCategoryTabs
+++ b/share/html/Admin/Elements/EditRightsCategoryTabs
@@ -105,7 +105,7 @@ $available_rights{$_} = loc( $available_rights{$_} ) for keys %available_rights;
<div class="category-tabs">
<ul>
% for my $category (sort { $catsort{$a} <=> $catsort{$b} } keys %categories) {
- <li><a href="#<% "$id-$category" %>"><% $category_desc{$category} || loc($category) %></a></li>
+ <li><a href="#<% "$id-$category" %>"><span class="rights-editor-label" id="<% "category-tab-$id-$category" %>"><% $category_desc{$category} || loc($category) %></span></a></li>
% }
</ul>
% for my $category (sort { $catsort{$a} <=> $catsort{$b} } keys %categories) {
@@ -113,11 +113,16 @@ $available_rights{$_} = loc( $available_rights{$_} ) for keys %available_rights;
<ul class="rights-list">
% for my $right (sort { $available_rights{$a} cmp $available_rights{$b} } @{$categories{$category}}) {
<li>
- <input type="checkbox" class="checkbox"
- name="SetRights-<% $acldesc %>"
- id="SetRights-<% $acldesc %>-<% $right %>"
- value="<% $right %>"
- <% $current_rights{$right} ? 'checked' : '' %> />
+ <input
+ type="checkbox"
+ class="checkbox"
+ name="SetRights-<% $acldesc %>"
+ id="SetRights-<% $acldesc %>-<% $right %>"
+ value="<% $right %>"
+ data-category-tab="<% "category-tab-$id-$category" %>"
+ data-principal-tab="<% "principal-tab-$id" %>"
+ <% $current_rights{$right} ? 'checked' : '' %>
+ />
<label for="SetRights-<% $acldesc %>-<% $right %>" title="<% $right %>">
<% $available_rights{$right} %>
<span class="separator">—</span>
diff --git a/share/static/css/base/rights-editor.css b/share/static/css/base/rights-editor.css
index acfc3d9..f0d2547 100644
--- a/share/static/css/base/rights-editor.css
+++ b/share/static/css/base/rights-editor.css
@@ -25,7 +25,7 @@
.rights-editor > .ui-tabs-nav li a {
float: none;
display: block;
- padding: 0 0 0.2em 1em;
+ padding: 0 0 0.2em 0.5em;
overflow: hidden;
text-overflow: ellipsis;
}
@@ -128,3 +128,19 @@ li.category ~ li.category {
text-align: right;
}
+
+span.rights-editor-label {
+ padding: 0.15em 0.5em;
+ border-radius: 6px;
+}
+
+.tab-aggregates-checked-rights {
+ background: #cfcfcf;
+}
+
+/* override jquery-ui by using a more specific
+ * class identifier.
+ */
+.category-tabs.ui-tabs .ui-tabs-nav li a {
+ padding: .5em 0.5em;
+}
-----------------------------------------------------------------------
More information about the rt-commit
mailing list