Skip to content

Commit 8a83e8e

Browse files
authored
docs: document crisscross highlighting and the Trix editor (#69)
Both landed in #67/#68 without README coverage. Crisscross is opt-in like the clock and theme toggle (require/import wigu/table_crisscross); Trix is styled automatically. Screenshots reuse the ones the PRs added.
1 parent b2d891e commit 8a83e8e

1 file changed

Lines changed: 36 additions & 0 deletions

File tree

‎README.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -220,6 +220,42 @@ short of unsetting `current_user_method`, which breaks authorization):
220220
ActiveAdminTheme.add_current_user = false
221221
```
222222

223+
### Crisscross table highlighting
224+
225+
Clicking a cell in an index table highlights its whole row and column — the
226+
cells get class `selected`, which the theme paints with `--aa-selected`, so the
227+
clicked value sits at the centre of a cross, with an accent outline on the cell
228+
itself. Handy for tracing a value to its row and column in a wide table.
229+
230+
The `selected` fill is always in the theme (it also covers ActiveAdmin's own
231+
batch-action row selection); the click behaviour is opt-in — load the script to
232+
enable it, leave it out to keep tables static:
233+
234+
```js
235+
// app/assets/javascripts/active_admin.js
236+
//= require wigu/table_crisscross
237+
238+
// or, as an npm module
239+
import "@activeadmin-plugins/active_admin_theme/src/table_crisscross";
240+
```
241+
242+
It uses jQuery, which ActiveAdmin already loads.
243+
244+
[![Crisscross cell highlighting](./img/crisscross-light.png)](./img/crisscross-light.png)
245+
246+
### Trix / ActionText editor
247+
248+
Trix ships with ActionText (a Rails built-in), so any ActiveAdmin app can have a
249+
rich-text field. The theme styles the editor chrome — toolbar, editor surface,
250+
link dialog, content `pre`/`blockquote` — off the theme variables in both light
251+
and dark, and inverts Trix's black toolbar icons in dark mode so they stay
252+
legible. Nothing to opt into: your app still imports Trix's own base CSS
253+
(`trix/dist/trix`), the theme only restyles it, and the rules are inert when no
254+
editor is on the page.
255+
256+
[![Trix editor, light](./img/trix-light.png)](./img/trix-light.png)
257+
[![Trix editor, dark](./img/trix-dark.png)](./img/trix-dark.png)
258+
223259
### Upgrading
224260

225261
#### 3.1.0

0 commit comments

Comments
 (0)