Skip to content

Commit d9d30e0

Browse files
FivellFivell
committed
Add crisscross cell highlighting for index tables
Clicking a cell in an index table highlights its whole row and column (the cells get class "selected"), so the clicked value sits at the centre of a cross — handy for tracing a cell to its row and column in a wide table. The three apps that use this theme each shipped their own copy of this JS; move it into the theme alongside the server clock and theme toggle so it lives with the CSS that styles it. Uses jQuery, which ActiveAdmin loads before the theme JS. Also fixes the td.selected fill from #66: the even-stripe rule is `...tbody tr:nth-child(even) > td` (specificity 0,0,2,4) while the selected fill was `...tbody td.selected` (0,0,2,3), so the stripe won on every even row and the cross came out dashed. Matching the `tr >` ties the specificity and lets source order win, so the cross is solid on all rows. Adds a Table demo page to the dummy app plus a screenshot task producing img/crisscross-{light,dark}.png.
1 parent 689f6ad commit d9d30e0

7 files changed

Lines changed: 104 additions & 2 deletions

File tree

‎app/assets/javascripts/wigu/table_crisscross.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
// Crisscross highlighting for ActiveAdmin index tables. Clicking a cell marks
2+
// its whole row and column with class "selected", which the stylesheet paints
3+
// with var(--aa-selected) — so the clicked cell sits at the centre of a
4+
// highlighted cross, making it easy to trace a value to its row and column in a
5+
// wide table.
6+
//
7+
// Uses jQuery, which ActiveAdmin loads before this file (its own
8+
// checkbox-toggler is jQuery too); the rest of the theme JS is dependency-free,
9+
// but this behaviour lives entirely in AA's jQuery-driven index table.
10+
//
11+
// AA's table-checkbox-toggler selects the row when a cell is clicked; we undo
12+
// that (re-click the checkbox) so crisscross highlighting never leaves rows
13+
// ticked for batch actions.
14+
$(document).ready(function () {
15+
var marker = 'selected';
16+
17+
// "Select all" clears every row marker left by AA's toggler.
18+
$('table.index_table .toggle_all').click(function () {
19+
$(this).closest('table').find('tr.' + marker).removeClass(marker);
20+
});
21+
22+
// Clicking the row checkbox itself must not bubble into the cell handler.
23+
$('table.index_table').find(':checkbox').click(function (e) {
24+
e.stopPropagation();
25+
$(this).closest('tr.' + marker).removeClass(marker);
26+
});
27+
28+
$('table.index_table').on('click', 'td', function (e) {
29+
var tdIndex = e.currentTarget.cellIndex,
30+
$cell = $(e.currentTarget),
31+
$table = $cell.closest('table'),
32+
$row = $cell.closest('tr'),
33+
$columnTds = $table.find('td:nth-child(' + (tdIndex + 1) + ')'),
34+
$rowTds = $row.find('td');
35+
36+
// AA ticks the row checkbox on a cell click; click it again to revert.
37+
$row.find(':checkbox').click();
38+
39+
if (!$cell.hasClass('col-selectable')) {
40+
$table.find('td.' + marker).removeClass(marker);
41+
$columnTds.addClass(marker);
42+
$rowTds.addClass(marker);
43+
}
44+
});
45+
});

‎app/assets/stylesheets/wigu/active_admin_theme.scss‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1774,10 +1774,14 @@ input[type='radio'] {
17741774
// Selected cells: the zebra and hover rules above outrank ActiveAdmin's own
17751775
// `tr.selected td` / `td.selected`, so without this a ticked row (batch
17761776
// actions) or a click-highlighted row + column (crisscross) looks unselected.
1777-
// The :hover variants keep the selection visible under the pointer.
1777+
// The `tr >` in the td.selected selector is load-bearing: the even-stripe
1778+
// rule is `...tbody tr:nth-child(even) > td` (specificity 0,0,2,4); a plain
1779+
// `tbody td.selected` is only (0,0,2,3) and loses on even rows, breaking the
1780+
// cross every other row. Matching the `tr >` ties the specificity, so source
1781+
// order wins. The :hover variants keep the selection visible under the pointer.
17781782
table.index_table tbody tr.selected > td,
17791783
table.index_table tbody tr.selected:hover > td,
1780-
table.index_table tbody td.selected,
1784+
table.index_table tbody tr > td.selected,
17811785
table.index_table tbody tr:hover > td.selected { background: var(--aa-selected); }
17821786
// Plain content tables (e.g. the CDR show "Attempts" table) are striped by the
17831787
// base CSS with light fills; map the odd/even rows onto the dark surfaces too.

‎img/crisscross-dark.png‎

35.4 KB
Loading

‎img/crisscross-light.png‎

35.4 KB
Loading

‎test/crisscross_screenshot.rb‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Regenerates img/crisscross-light.png / img/crisscross-dark.png — the crisscross
2+
# cell highlighting (wigu/table_crisscross.js) in both palettes. Clicks a middle
3+
# cell so the screenshot shows the highlighted row + column crossing at it, then
4+
# crops to the demo panel.
5+
require_relative "capybara_boot"
6+
require "capybara/dsl"
7+
8+
include Capybara::DSL
9+
10+
visit "/admin/table"
11+
# Click a cell away from the edges so the cross is clearly centred (row 3, Email).
12+
find("table.index_table tbody tr:nth-child(3) td:nth-child(3)").click
13+
page.driver.resize_window_to(page.driver.window_handles.first, 1120, 640)
14+
15+
{ "light" => "crisscross-light.png", "dark" => "crisscross-dark.png" }.each do |theme, file|
16+
page.execute_script(%(document.documentElement.setAttribute('data-theme', '#{theme}')))
17+
sleep 0.3
18+
out = File.expand_path("../img/#{file}", __dir__)
19+
page.driver.browser.screenshot(path: out, selector: ".panel")
20+
puts "wrote #{out} (#{File.size(out)} bytes)"
21+
end
22+
23+
Capybara.reset_sessions!

‎test/dummy/app/admin/table.rb‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# Demo page with a plain index table so the crisscross highlighting (wigu/
2+
# table_crisscross.js) can be exercised and screenshotted: clicking a cell marks
3+
# its whole row and column with .selected, which the theme paints.
4+
ActiveAdmin.register_page "Table" do
5+
menu priority: 3
6+
7+
ROWS = [
8+
%w[101 Ada\ Lovelace ada@example.com UK Active],
9+
%w[102 Alan\ Turing alan@example.com UK Active],
10+
%w[103 Grace\ Hopper grace@example.com US Closed],
11+
%w[104 Katherine\ Johnson katherine@example.com US Active],
12+
%w[105 Edsger\ Dijkstra edsger@example.com NL Closed],
13+
%w[106 Donald\ Knuth donald@example.com US Active]
14+
].freeze
15+
16+
content do
17+
panel "Crisscross highlighting (click a cell)" do
18+
head = "<thead><tr><th>ID</th><th>Name</th><th>Email</th>" \
19+
"<th>Country</th><th>Status</th></tr></thead>"
20+
body = ROWS.map do |r|
21+
"<tr>" + r.map { |c| "<td>#{ERB::Util.html_escape(c)}</td>" }.join + "</tr>"
22+
end.join
23+
text_node(
24+
(%(<table class="index_table">) + head + "<tbody>" + body + "</tbody></table>")
25+
.html_safe
26+
)
27+
end
28+
end
29+
end

‎test/dummy/app/assets/javascripts/active_admin.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
//= require active_admin/base
22
//= require wigu/server_clock
33
//= require wigu/theme_toggle
4+
//= require wigu/table_crisscross

0 commit comments

Comments
 (0)