active_admin_prism 0.1.2 → 0.1.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 34c64b9f9a4624ab0c6b5bcebd46bd4c65b220e86fa6b8095d26ee35acdb4af2
-  data.tar.gz: 72e3885c4e3f91874b6e6f99b629c3480eb4b1098de4044f12e3c6d50b95bf66
+  metadata.gz: 72cc73689e83be856fdc1e2e321df486dc8cb6033bcca1380aae1d7aed8a15b0
+  data.tar.gz: 999e31015012d3dcb58de142de2fe050754fba7903612f259f8ab92709388c05
 SHA512:
-  metadata.gz: 230e4441cbc71b105e1abe0b0e592fa7451c070ab4be8b2d32c5acdce55f9014b3f6c2918915bff637fe568e4299243dd9362c6a303725d977d3010ddf409e59
-  data.tar.gz: 052d8bfe74e598622c5922e0e1201ccfcf574d35937c1a6af17b71c9da06c8dbcf8311ab6df7edcd97cab957f0c70a9bf7205fdbfcf61ef63b576b230ab3a16c
+  metadata.gz: f94ead774c60a6c285fa59c624c0f472cd7eb31c2a21d970a7609a74bb3f948d86754d32050d416c7fdfc2fb9fdaa915c3071f998a7832dacb02027ecc606052
+  data.tar.gz: b71bbf23aceebcf5febdc7690b4b27064d4d1b9dfe050254e931b15060398a35b55ea0a228220386098fd061e57633ab7e1d00ec3bc5af350db520bfdbb2f23f

data/CHANGELOG.md

@@ -1,5 +1,92 @@
 # Changelog
 
+## 0.1.3
+
+- A hamburger icon button next to the brand, at the top of the Prism
+  sidebar (`config.sidebar_collapsible`, default `true`), collapses it to
+  a narrow icon-only rail on desktop, expanding back to full width (with
+  labels) on another click — state persists across page loads. Purely a
+  desktop feature; the existing off-canvas mobile toggle below 900px is
+  unaffected either way. Every nav item keeps a native tooltip (its label,
+  on hover) so it stays identifiable while collapsed. Set
+  `config.sidebar_collapsible = false` to render no toggle at all — the
+  sidebar is always full width, matching this gem's behavior before this
+  flag existed.
+- Flash messages now render as floating toast cards (icon + message +
+  dismiss button + a countdown progress bar), pinned to the top-right
+  corner of the viewport and stacking if more than one is active, instead
+  of ActiveAdmin's plain inline banner. A type-colored icon
+  (`:check_circle`/`:alert_triangle`/`:alert_circle`/`:info`) is selected
+  from the flash's key — `:notice`/`:success`, `:alert`/`:warning`,
+  `:error`, and anything else, respectively. While `flash_auto_dismiss`
+  is on, a bar along the card's bottom edge visually counts down over
+  `flash_auto_dismiss_seconds`; hovering the card pauses both that bar
+  and the actual removal timer in lockstep (not just the animation), so a
+  flash a visitor is mid-read can't vanish out from under them. This
+  applies identically to Devise's sign-in/password/etc pages, which
+  needed a small layout override of their own — see
+  `app/views/layouts/active_admin_logged_out.html.erb` — since those
+  route through a completely separate layout ActiveAdmin itself ships
+  rather than through this gem's usual Arbre-based override point.
+- The active filters bar is now itself a shortcut to the Filters form —
+  clicking anywhere on it opens the (possibly collapsed) Filters panel and
+  scrolls it into view, instead of only the separate funnel icon doing
+  that.
+- Fixed: the active filters bar fell 12px short of the table's own right
+  edge instead of aligning flush with it — `.table_tools`'s `gap` and the
+  bar's `margin-left: auto` (used to push it to the row's far end) are on
+  the same axis, and a nonzero column-gap there gets double-counted by
+  the auto margin's free-space math, leaving exactly one gap's worth of
+  space unclaimed after the last item. Switched to `row-gap` (still
+  spaces Batch Actions from the bar vertically if they wrap onto separate
+  lines on a narrow viewport, without the bug).
+- Fixed: the rail-collapsed sidebar (`config.sidebar_collapsible`) had two
+  space issues — a group left open before collapsing kept rendering its
+  full submenu (every child's icon *and* label) spilling out past the
+  76px rail instead of collapsing to just the parent's own icon (a
+  `.prism-nav-item.open > .prism-nav-submenu` rule was more specific than
+  the one meant to hide it); and any menu item with no `icon:` set (see
+  [Sidebar navigation: icons & badges] in INTEGRATION.md) rendered as
+  either an empty color-highlighted box (if `.active`) or a totally blank
+  row once its label was hidden, reading as broken dead space. Menu items
+  without an icon now get a small dot instead, once collapsed.
+- Fixed: the mobile off-canvas sidebar toggle (`.prism-sidebar-mobile-toggle`,
+  ≤900px viewports) was rendered completely off-screen and unclickable —
+  it's a `position: fixed` descendant of `#header.prism-sidebar`, and that
+  element's own `transform: translateX(-100%)` (used to slide the closed
+  sidebar off-screen) made it the containing block for that fixed
+  descendant too, dragging the toggle button off-screen right along with
+  the hidden sidebar. The off-canvas slide now animates `left` instead of
+  `transform`, which carries no such side effect.
+- The "current scope + active filters" summary (ActiveAdmin core's own
+  "Search status" sidebar section, auto-added to every resource) now
+  renders as a highlighted pill bar in the same row as the Batch Actions
+  button/scope tabs, instead of inside `#sidebar`
+  (`config.active_filters_bar`, default `true`) — tinted with the theme's
+  primary color so it reads as a clear, eye-catching signal rather than
+  another gray panel. It used to get squeezed down to the same 72px icon
+  gutter as the Filters form whenever `collapsible_filters` had it
+  collapsed, and its content had nowhere to fit in 72px — it overflowed
+  out over the table instead of shrinking cleanly. Set
+  `config.active_filters_bar = false` to restore ActiveAdmin's stock
+  sidebar-based behavior.
+- Fixed: a Select2-enhanced `<select>` in the main form (`config.select2`,
+  or any field opted in individually) rendered full-width on its own line
+  below its label instead of beside it, like every other field. The BFC
+  sizing trick used to fit it into ActiveAdmin core's floated-label layout
+  only works when the element's width is `auto` — but Select2 always sets
+  an inline `width: 100%` on `.select2-container` itself (prism.js's
+  auto-init passes `{ width: "100%" }`, and a host's own manual
+  `.select2()` call hits the same code path at its default width), so that
+  trick never actually engaged. Matches ActiveAdmin core's own input width
+  instead.
+- Fixed: a field row whose label this theme deliberately doesn't float
+  (e.g. a boolean checkbox, or `as: :prism_toggle`) could let the *next*
+  row's floated label render up alongside it instead of starting on its
+  own line below, since the short row's un-cleared float left no height
+  for the next label to clear against. Every field row now clears its own
+  floats.
+
 ## 0.1.2
 
 - Adds [Select2](https://select2.org) support (`config.select2`, default

data/INTEGRATION.md

@@ -116,6 +116,7 @@ ActiveAdminPrism.configure do |config|
   config.colorize_action_icons = true      # default: true
   config.styled_confirms = true            # default: true
   config.collapsible_filters = true        # default: true
+  config.active_filters_bar = true         # default: true
   config.sidebar_footer = true             # default: true
   config.flash_dismissible = true          # default: true
   config.flash_auto_dismiss = true         # default: true
@@ -133,6 +134,7 @@ ActiveAdminPrism.configure do |config|
   ]
   config.menu_search = true                # default: true
   config.select2 = false                   # default: false (opt-in — see below)
+  config.sidebar_collapsible = true        # default: true
 end
 
 ActiveAdminPrism.enable!
@@ -144,6 +146,7 @@ ActiveAdminPrism.enable!
 | `colorize_action_icons`          | `true`  | Index-table View/Edit/Delete render as ActiveAdmin's plain text links instead of color-coded icon buttons. |
 | `styled_confirms`                | `true`  | Row-level `data-confirm` links (View/Edit/Delete, or anything else using Rails UJS's `data-confirm`) fall back to the browser's native `confirm()`. Batch Actions confirms are unaffected either way — they always use ActiveAdmin's own dialog. |
 | `collapsible_filters`            | `true`  | The "Filters" sidebar panel always renders fully expanded (ActiveAdmin's own default) instead of collapsing to a single icon button that expands on click. |
+| `active_filters_bar`             | `true`  | The current scope/active-filters summary renders inside `#sidebar` as its own panel (ActiveAdmin's own default) instead of as a highlighted bar beside Batch Actions — see [Active filters bar](#active-filters-bar). |
 | `sidebar_footer`                 | `true`  | "Powered by Active Admin" (or your own `config.footer`) stays in ActiveAdmin's original page-level `#footer` instead of moving into the sidebar. |
 | `flash_dismissible`              | `true`  | Flash messages render as ActiveAdmin's original plain `<div>` (no dismiss button). |
 | `flash_auto_dismiss`             | `true`  | Flash messages stay on screen until the next page load (ActiveAdmin's default) instead of disappearing on their own. |
@@ -157,6 +160,7 @@ ActiveAdminPrism.enable!
 | `languages`                      | 3 entries (English/Español/Français) | The list the dropdown renders; an empty array (`[]`) has the same effect as `language_switcher = false`. |
 | `menu_search`                    | `true`  | No search box renders above the sidebar's "Pages" nav — see [Menu search](#menu-search). |
 | `select2`                        | `false` | **Opposite polarity from every other flag above — opt-in, not opt-out.** `false` (the default) leaves every `<select>` exactly as ActiveAdmin renders it. `true` auto-enhances *every* plain `<select>` (filters, form inputs, association pickers — no per-field setup) into a searchable Select2 widget — see [Select2](#select2). |
+| `sidebar_collapsible`             | `true`  | No hamburger toggle button renders next to the brand — the sidebar is always full width, with no way to collapse it to an icon-only rail. Desktop-only either way; the mobile off-canvas toggle is unaffected — see [Collapsible sidebar rail](#collapsible-sidebar-rail). |
 
 **How this crosses the server/client boundary.** `sidebar`,
 `colorize_action_icons`, and the `login_*` flags are pure server-side
@@ -288,6 +292,23 @@ passes this hash through untouched) accepts: `:dashboard`, `:users`,
 `:home`, `:list`, `:folder`, `:bell`, `:search`, `:menu`, `:logout`,
 `:check`, `:x`, `:chevron_down`, `:eye`, `:pencil`, `:trash`, `:filter`.
 
+### Collapsible sidebar rail
+
+A hamburger icon button next to the brand, at the top of the sidebar,
+collapses it to a narrow icon-only rail — labels, the search box, language
+switcher, and section headings all hide, leaving just the icons (each
+still identifiable via a native tooltip on hover). Clicking again expands
+it back to full width. The choice persists across page loads
+(`localStorage`, like the per-group nav expand/collapse state already
+does). Desktop-only: below the 900px mobile breakpoint the sidebar is
+already off-canvas (a full-width drawer toggled by its own separate
+hamburger button, `.prism-sidebar-mobile-toggle`), and collapsing to a
+rail there wouldn't make sense — this toggle has no effect on that
+behavior either way. Turn it off with
+`config.sidebar_collapsible = false` to remove the toggle entirely (the
+sidebar is then always full width, ActiveAdmin's own implicit default
+before this flag existed).
+
 ### Parent groups & submenus (nested navigation)
 
 Nested groups (e.g. an "E-Commerce" group containing "Products" and
@@ -617,12 +638,46 @@ The reflow relies on the CSS `:has()` selector (broadly supported in
 current browsers); without it, the Filters panel still collapses/expands
 correctly, it just won't reclaim the extra width.
 
+### Active filters bar
+
+Once at least one filter or scope is active, a summary ("Scope: All",
+"Bank code contains BCA", etc.) renders as a highlighted pill bar in the
+same row as the Batch Actions button/scope tabs (AA core's own
+`.table_tools`, pushed to the row's far end), instead of inside
+ActiveAdmin's own `#sidebar` as its own panel. Tinted with the theme's
+primary color (a colored left border + tinted background, distinct from
+the plain gray panels elsewhere) so an active filter reads as a clear,
+eye-catching signal rather than blending in as more chrome. It's also
+clickable — clicking anywhere on it opens the Filters panel (expanding it
+if `collapsible_filters` has it collapsed) and scrolls it into view,
+a shortcut to editing the filters currently producing this exact result
+set, rather than only the separate funnel icon doing that. This is also
+the fix for that sidebar summary overflowing out whenever the collapsible
+Filters panel (above) is collapsed to its 72px icon gutter — there's
+nowhere in 72px for a sentence-length filter description to fit. Turn it
+off with `config.active_filters_bar = false` to restore ActiveAdmin's own
+stock sidebar-based rendering (only sensible if `collapsible_filters` is
+also `false`, since otherwise the two flags combined bring the overflow
+back).
+
 ### Flash messages
 
-Flash messages get a dismiss button, auto-hide after a configurable delay,
-and fade/slide out with a smooth, configurable transition — see
-[Configuration reference](#configuration-reference) for
-`flash_dismissible`, `flash_auto_dismiss(_seconds)`, and
+Flash messages render as floating toast cards, pinned to the top-right
+corner of the viewport (stacking if more than one is active) instead of
+ActiveAdmin's plain inline banner — a type-colored icon
+(`:check_circle`/`:alert_triangle`/`:alert_circle`/`:info` depending on
+the flash key: `:notice`/`:success`, `:alert`/`:warning`, `:error`, and
+anything else respectively), the message, a dismiss button, and — while
+`flash_auto_dismiss` is on — a countdown bar along the card's bottom edge
+that visually empties out over `flash_auto_dismiss_seconds`, pausing
+(along with the actual auto-dismiss timer, not just its own animation) as
+long as the pointer is over the card, so a flash a visitor is mid-read
+never vanishes out from under them. Fades/slides out with a smooth,
+configurable transition on dismiss (manual or automatic) either way. This
+applies identically on Devise's sign-in/password/etc pages — see
+[Flash messages markup](#flash-messages-markup) for why that needed its
+own layout override. See [Configuration reference](#configuration-reference)
+for `flash_dismissible`, `flash_auto_dismiss(_seconds)`, and
 `flash_transition_ms`.
 
 ### Sidebar footer ("Powered by Active Admin")
@@ -765,6 +820,8 @@ Ruby view files under `lib/active_admin/views/`.
   span.prism-sidebar-mobile-toggle       <- hamburger, ≤900px viewports only
   div.prism-sidebar-inner
     div.prism-sidebar-brand
+      span.prism-sidebar-collapse-toggle[role=button][data-prism-toggle-sidebar-collapse]  <- only if config.sidebar_collapsible
+        svg.prism-sidebar-collapse-icon <- the :menu (hamburger) icon
       #site_title                       <- AA's own site_title verb, unchanged
     div.prism-sidebar-lang              <- only if config.language_switcher and #languages is non-empty
     div.prism-sidebar-search            <- only if config.menu_search
@@ -812,8 +869,16 @@ Notes:
   built-in styling of its own beyond what you see in `_sidebar.scss` — it's
   just an example class name, feel free to use your own.
 - Body-level state: `body.prism-sidebar-open` (mobile off-canvas open,
-  toggled by `prism.js`), `body.prism-sidebar-footer-disabled` (set when
-  `config.sidebar_footer` is `false` — see [Configuration reference](#configuration-reference)).
+  toggled by `prism.js`), `body.prism-sidebar-collapsed` (desktop rail
+  collapsed, also toggled by `prism.js` and persisted to `localStorage` —
+  see [Collapsible sidebar rail](#collapsible-sidebar-rail)),
+  `body.prism-sidebar-footer-disabled` (set when `config.sidebar_footer` is
+  `false` — see [Configuration reference](#configuration-reference)).
+- Every `a.prism-nav-link` / `span.prism-nav-group-toggle` also carries a
+  plain `title="<label>"` attribute (a host's own explicit `:title` via
+  `html_options` wins instead) — inert most of the time, but the only way
+  left to identify an item by hovering once `.prism-nav-label` itself is
+  hidden by the rail-collapsed state above.
 
 ### Language switcher markup
 
@@ -995,21 +1060,70 @@ panel) gets the extra icon/collapse markup — any other sidebar section
 `body.prism-filters-collapsible-disabled` is the backstop class that forces
 the panel back to always-expanded.
 
+### Active filters bar (`#prism_active_filters_bar`)
+
+Only present once at least one filter or scope is active
+(`config.active_filters_bar`, default `true` — see
+[Active filters bar](#active-filters-bar)); reuses ActiveAdmin core's own
+`ActiveAdmin::Views::ActiveFiltersSidebarContent` markup/i18n wholesale, so
+the `h4`/`b`/`ul`/`li` structure below is AA's, not Prism's own:
+
+```
+#main_content
+  .index_content
+    .table_tools                                        <- AA core's own — Batch Actions/scope tabs row
+      .table_tools_actions                               <- only if any_table_tools? — wraps the controls AA core itself renders here
+        .dropdown_menu                                    <- Batch Actions button
+        .scopes                                           <- scope tabs, if any are defined
+      #prism_active_filters_bar.prism-active-filters-bar  <- only if a scope/filter is active; pushed to the row's far end
+        h4 + b.current_scope_name                          <- only if a scope is active
+        div
+          h4                                                <- "Current filters:"
+          ul
+            li[class="current_filter_*"]                    <- one per active filter/scope value
+              span                                           <- filter label + predicate
+              b                                               <- the filter's value
+```
+
 ### Flash messages markup
 
+Rendered twice over — once from `lib/active_admin/views/flash_messages.rb`
+(Arbre, for every logged-in page) and once, identically, from
+`app/views/layouts/active_admin_logged_out.html.erb` (plain ERB, for
+Devise's sign-in/password/etc pages, which route through a completely
+separate layout ActiveAdmin itself ships rather than through
+`Pages::Base`/Arbre at all — the Ruby-side override alone never reaches
+them, which is why this gem ships a full layout override just for this).
+Both share the same icon-selection logic
+(`ActiveAdminPrism::Icons.flash_icon_name`, in `lib/prism_icons.rb`) and
+duration math (`ActiveAdminPrism::Configuration#flash_auto_dismiss_ms`)
+rather than duplicating either:
+
 ```
-.flashes[data-prism-transition-ms][data-prism-auto-dismiss-ms]
-  .flash.flash_notice / .flash_error / .flash_alert [.prism-flash-hide]
+.flashes[data-prism-transition-ms][data-prism-auto-dismiss-ms]    <- position: fixed toast stack, top-right
+  .flash.flash_notice / .flash_success / .flash_alert / .flash_warning / .flash_error / .flash_info [.prism-flash-hide]
+    [style="--prism-flash-duration: <ms>"]                         <- only if config.flash_auto_dismiss
+    svg.prism-flash-icon                                           <- :check_circle / :alert_triangle / :alert_circle / :info, by type
     span.prism-flash-message
-    button.prism-flash-dismiss[data-prism-flash-dismiss]   <- only if config.flash_dismissible
+    button.prism-flash-dismiss[data-prism-flash-dismiss]           <- only if config.flash_dismissible
       svg.prism-flash-dismiss-icon
+    div.prism-flash-progress                                       <- only if config.flash_auto_dismiss — the countdown bar
 ```
 
 `flash_notice`/`flash_error`/`flash_alert` are ActiveAdmin's own type
-classes (from `flash_messages.each { |type, ...| }`); Prism just colors
-each one distinctly. `.prism-flash-hide` is added by `prism.js` right
-before removal (opacity/transform transition), timed against the
-`data-prism-transition-ms` attribute — see
+classes (from `flash_messages.each { |type, ...| }`); `flash_success`/
+`flash_warning`/`flash_info` are the same convention extended to a host
+setting those keys directly (`flash[:warning] = "..."`, etc) — Prism
+colors each of the four icon/progress-bar combinations distinctly, all
+five type classes included. `.prism-flash-hide` is added by `prism.js`
+right before removal (opacity/transform transition), timed against the
+`data-prism-transition-ms` attribute. `.prism-flash-progress`'s width
+animates via CSS (`@keyframes prism-flash-countdown`, `transform: scaleX`)
+against the same duration `prism.js` uses for the actual removal timer —
+hovering a card pauses both in lockstep (`animation-play-state` for the
+bar, a tracked remaining-time restart for the timer itself) rather than
+just the visual, so a paused bar can't silently disagree with a flash
+that's still counting down underneath it. See
 [Flash messages](#flash-messages) / [Configuration reference](#configuration-reference).
 
 ### Confirm dialog (jQuery UI)

data/README.md

@@ -101,6 +101,7 @@ ActiveAdminPrism.configure do |config|
   config.colorize_action_icons = true   # color-coded View/Edit/Delete icons
   config.styled_confirms = true         # route data-confirm through the styled dialog
   config.collapsible_filters = true     # "Filters" panel collapses to an icon until clicked
+  config.active_filters_bar = true      # current scope/filters summary renders above the table
   config.sidebar_footer = true          # "Powered by Active Admin" moves into the sidebar
   config.flash_dismissible = true       # dismiss (x) button on flash messages
   config.flash_auto_dismiss = true      # auto-hide flash messages
@@ -118,6 +119,7 @@ ActiveAdminPrism.configure do |config|
   ]
   config.menu_search = true             # search box that filters the sidebar's Pages nav
   config.select2 = false                # default: false — auto-enhance every <select> into Select2
+  config.sidebar_collapsible = true     # sidebar collapses to an icon-only rail (desktop only)
 end
 
 ActiveAdminPrism.enable!