active_admin_prism 0.1.2 → 0.1.4

data/scss-src/_base.scss

@@ -57,11 +57,44 @@ a {
 
 // Flash messages — ActiveAdmin renders these with a heavy full-width
 // gradient bar (padding: 13px 30px 11px, font-size: 1.1em); this reskins
-// them into a compact, inset, color-coded banner. ".flashes" itself gets
-// its grid placement from _sidebar.scss (must be explicit — see comment
-// there on why leaving it to auto-placement broke the layout).
+// them into a floating toast stack, pinned to the viewport rather than
+// pushed into the page's own grid flow (a toast that shifted #main_content
+// down every time one appeared, then snapped back up when it auto-hid,
+// would be its own layout-jank bug). ".flashes" still gets a grid-row/
+// grid-column from _sidebar.scss for its notional *static* position (some
+// tooling/AT expects every grid child to have one), but `position: fixed`
+// below is what actually places it — relative to the viewport, ignoring
+// that grid area entirely.
 .flashes {
-  padding: 10px 10px 0;
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 340px;
+  max-width: calc(100vw - 24px);
+  padding: 0;
+  pointer-events: none;
+
+  // Individual toasts opt back into being interactive (hoverable/
+  // clickable dismiss button) — the wrapper itself must stay
+  // non-interactive, or it would sit as an invisible 340px-wide click
+  // blocker over the top-right corner of every page even between toasts.
+  > * {
+    pointer-events: auto;
+  }
+}
+
+@media (max-width: 480px) {
+  .flashes {
+    top: 12px;
+    right: 12px;
+    left: 12px;
+    width: auto;
+    max-width: none;
+  }
 }
 
 // "body.active_admin .flash" (not a flat ".flash") on purpose: ActiveAdmin
@@ -83,21 +116,25 @@ body.active_admin .flash {
   position: relative;
   display: flex;
   align-items: flex-start;
-  gap: 12px;
-  background: $prism-bg-page;
+  gap: 10px;
+  background: $prism-bg-card;
   border: 1px solid $prism-border-color;
-  border-left: 3px solid $prism-text-muted;
-  border-radius: $prism-radius-sm;
-  box-shadow: none;
+  border-radius: $prism-radius;
+  // overflow: hidden clips .prism-flash-progress's square corners to this
+  // card's own rounded ones.
+  overflow: hidden;
+  box-shadow: $prism-shadow-popover;
   text-shadow: none;
   color: $prism-text-heading;
-  font-size: 0.9em;
+  font-size: 0.88em;
   font-weight: 600;
   line-height: 1.4;
-  padding: 10px 16px;
+  // Right padding clears .prism-flash-dismiss, absolutely positioned in
+  // this corner rather than sitting inline — see below.
+  padding: 14px 34px 16px 14px;
   margin-bottom: 0;
   opacity: 1;
-  transform: translateY(0) scale(1);
+  transform: translateX(0) scale(1);
   // 320ms/cubic-bezier here matches Configuration#flash_transition_ms's
   // default and is overridden inline by prism.js (transition-duration) if a
   // host configures a different value — see that file's flash-dismiss IIFE.
@@ -109,47 +146,147 @@ body.active_admin .flash {
   // outright once the transition finishes.
   &.prism-flash-hide {
     opacity: 0;
-    transform: translateY(-6px) scale(0.98);
+    transform: translateX(24px) scale(0.98);
   }
 
-  &.flash_notice {
-    background: $prism-color-success-light;
-    border-left-color: $prism-color-success;
-    color: darken($prism-color-success, 20%);
+  // "notice"/"success" both read as the positive/affirmative case (Rails'
+  // own convention already treats :notice that way) — same color, same
+  // :check_circle icon (see flash_messages.rb#FLASH_ICONS).
+  //
+  // background/border/color are redeclared here (not just left to the
+  // base .flash rule above) because ActiveAdmin core itself carries a
+  // "body.logged_in .flash.flash_notice"/".flash_error" rule of its own
+  // (active_admin/components/_flash_messages.scss — a pale gradient +
+  // colored border-bottom), and THAT selector is one class more specific
+  // than the base ".flash" rule above (0,3,1 vs 0,2,1) — more specific
+  // than "body.active_admin .flash" even though this gem's own class list
+  // ties AA's elsewhere. Only ".flash_notice"/".flash_error" get this
+  // treatment because those are the only two AA core actually special-
+  // cases; every other type here already wins on the base rule alone.
+  &.flash_notice,
+  &.flash_success {
+    background: $prism-bg-card;
+    border-bottom-color: $prism-border-color;
+    color: $prism-text-heading;
+
+    .prism-flash-icon {
+      color: $prism-color-success;
+    }
+
+    .prism-flash-progress {
+      background: $prism-color-success;
+    }
   }
 
   &.flash_error,
   &.flash_alert {
-    background: $prism-color-danger-light;
-    border-left-color: $prism-color-danger;
-    color: darken($prism-color-danger, 10%);
+    background: $prism-bg-card;
+    border-bottom-color: $prism-border-color;
+    color: $prism-text-heading;
+
+    .prism-flash-icon {
+      color: $prism-color-danger;
+    }
+
+    .prism-flash-progress {
+      background: $prism-color-danger;
+    }
+  }
+
+  &.flash_warning {
+    .prism-flash-icon {
+      color: $prism-color-warning;
+    }
+
+    .prism-flash-progress {
+      background: $prism-color-warning;
+    }
+  }
+
+  // Any other flash key (a host's own custom one) falls back here too —
+  // flash_messages.rb#flash_icon already defaults to the same :info icon
+  // for anything not in FLASH_ICONS, so this default color matches it.
+  &.flash_info,
+  &:not(.flash_notice):not(.flash_success):not(.flash_error):not(.flash_alert):not(.flash_warning) {
+    .prism-flash-icon {
+      color: $prism-color-info;
+    }
+
+    .prism-flash-progress {
+      background: $prism-color-info;
+    }
   }
 }
 
+.prism-flash-icon {
+  flex: 0 0 auto;
+  margin-top: 1px;
+}
+
 .prism-flash-message {
   flex: 1 1 auto;
+  padding-top: 1px;
 }
 
 .prism-flash-dismiss {
+  position: absolute;
+  top: 10px;
+  right: 10px;
   flex: 0 0 auto;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 22px;
   height: 22px;
-  margin: -2px -4px -2px 0;
   padding: 0;
   border: none;
   border-radius: $prism-radius-sm;
   background: transparent !important;
-  color: inherit !important;
-  opacity: 0.6;
+  color: $prism-text-muted !important;
+  opacity: 0.8;
   cursor: pointer;
   transition: opacity $prism-transition-fast, background $prism-transition-fast;
 
   &:hover {
     opacity: 1;
-    background: rgba(0, 0, 0, 0.06) !important;
+    background: $prism-bg-page !important;
+  }
+}
+
+// The countdown bar along the card's bottom edge — only rendered when
+// ActiveAdminPrism::Configuration#flash_auto_dismiss is on (see
+// flash_messages.rb), so its presence already implies a duration to
+// animate against. "--prism-flash-duration" is set inline per-flash
+// (flash_messages.rb) rather than read from js-src/prism.js's own
+// "data-prism-auto-dismiss-ms" (rendered once on the whole ".flashes"
+// wrapper, not per card) — CSS can't read a JS-parsed value, so the same
+// number is rendered twice rather than having JS set the animation
+// itself. scaleX (not animating `width` directly) is what lets the
+// browser run this on the compositor instead of laying out every frame.
+.prism-flash-progress {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 3px;
+  transform-origin: left center;
+  animation: prism-flash-countdown var(--prism-flash-duration, 5000ms) linear forwards;
+
+  // Paused (not hidden) rather than reset to full width — a flash a
+  // visitor is actively reading (mouse over it) shouldn't keep silently
+  // ticking down and vanish out from under them.
+  body.active_admin .flash:hover & {
+    animation-play-state: paused;
+  }
+}
+
+@keyframes prism-flash-countdown {
+  from {
+    transform: scaleX(1);
+  }
+
+  to {
+    transform: scaleX(0);
   }
 }
 

data/scss-src/_buttons.scss

@@ -43,6 +43,76 @@ form input[type="submit"].danger {
   margin: 0;
 }
 
+// #prism-titlebar-actions-row (below) and this button are appended as
+// plain DOM siblings inside .action_items via prismTitlebarActionsRow() in
+// js-src/prism.js, with no whitespace text node between them — inline-flex
+// elements packed that way sit flush with zero gap, so `gap` on the row
+// itself (which only spaces *its own* children) can't create the visual
+// separation on its own. Margin goes on this span itself, not its inner
+// `<a>`, since the rule just above pins that `<a>`'s own margin to 0.
+#title_bar .action_items span.action_item.prism-action-item-new {
+  margin-left: 10px;
+}
+
+// Shared row for this theme's own title-bar "jump menu" dropdowns —
+// js-src/prism.js's prismTitlebarActionsRow() creates this once and both
+// the consolidated action_items dropdown and the consolidated "More
+// Actions" sidebar-panels dropdown (below) append themselves into it, so
+// they render side by side rather than as two disconnected mechanisms in
+// different parts of the page. The row as a whole (not each dropdown
+// individually) is what a later IIFE aligns to the index table's right
+// edge — see that file for why.
+.prism-titlebar-actions-row {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+}
+
+// Consolidated "Actions" jump menu (ActiveAdminPrism::Configuration
+// #action_items_dropdown/#action_items_dropdown_threshold) — see
+// js-src/prism.js, which builds a real Select2-enhanced <select> here and
+// moves the actual action_item elements (their <a>/<button> still fully
+// live, just never shown) into .prism-action-items-holding, clicking the
+// right one when an option is picked. The visible widget is entirely
+// Select2's own generated markup, so none of the button-primary styling
+// above ever reaches it — this only needs to size/align the wrapper
+// itself, not fight any inherited button look.
+.prism-action-items-dropdown {
+  display: inline-block;
+
+  .select2-container {
+    min-width: 220px;
+  }
+}
+
+.prism-action-items-holding {
+  display: none;
+}
+
+// Consolidated "Sidebar Actions" jump menu (every collapsible sidebar
+// section besides Filters — see scss-src/_panels.scss and
+// lib/active_admin/views/filters_sidebar.rb). Every link/button inside
+// those sections' content is flattened into one option here, same
+// click-and-reset flow as .prism-action-items-dropdown above — the two
+// are styled identically (see scss-src/_select2.scss) since they're the
+// same kind of "jump menu", not a persistent value.
+.prism-sidebar-panel-select-wrapper {
+  display: inline-block;
+
+  .select2-container {
+    min-width: 220px;
+  }
+}
+
+// Same technique as .prism-action-items-holding above: the real
+// links/buttons stay attached to the document (just hidden), rather than
+// being fully removed, so Rails UJS's document-level click delegation
+// (data-method/data-confirm) still reaches them when the dropdown clicks
+// one on the option's behalf.
+.prism-sidebar-panel-holding {
+  display: none;
+}
+
 // Secondary / lower-emphasis buttons: batch actions trigger, pagination,
 // "clear filters", "cancel" form link.
 .dropdown_menu .dropdown_menu_button,

data/scss-src/_forms.scss

@@ -20,6 +20,21 @@ form {
       font-weight: 600;
       font-size: 0.9em;
     }
+
+    // ActiveAdmin core's form layout floats each field row's <label>
+    // (float: left; width: 20% — active_admin's own _forms.scss) as its
+    // two-column label/input technique. Without a clearfix, a floated
+    // label's height doesn't count toward its own <li>'s box, so a short
+    // row right after one whose label this theme deliberately does NOT
+    // float (e.g. a boolean field, or `as: :prism_toggle` above) can let
+    // the *next* row's own floated label render up alongside the previous
+    // row instead of starting its own line below it. Same class of
+    // fragility the button row below already had (float has no effect on
+    // siblings once contained) — same fix here, kept to a plain clearfix
+    // rather than a full flex rewrite of every field row.
+    > ol > li {
+      overflow: hidden;
+    }
   }
 
   input[type="text"],

data/scss-src/_login.scss

@@ -71,10 +71,11 @@ body.logged_out:has(.prism-login-brand) {
     margin: 0 auto;
   }
 
-  .flashes {
-    width: 100%;
-    padding: 0 0 10px;
-  }
+  // No login-specific ".flashes" override here (there used to be one,
+  // sizing it to the centered login card's own width) — .flashes is a
+  // fixed-position toast stack now (scss-src/_base.scss), anchored to the
+  // viewport corner rather than laid out inline above the card, so the
+  // same global sizing/position applies here unmodified too.
 
   #active_admin_content {
     width: 100%;

data/scss-src/_panels.scss

@@ -53,12 +53,12 @@
 }
 
 // Reflow #main_content (the table/grid) and #sidebar's own width to match
-// whether the collapsible Filters panel is expanded or not — driven by a
-// "prism-filters-open" class prism.js toggles on <body> in lockstep with
-// #filters_sidebar_section's own ".open" (a body class is necessary since
-// #main_content is a *sibling* of #sidebar, not a descendant — CSS can't
-// reach across siblings any other way). Both of ActiveAdmin's own rules
-// here are triple-ID-scoped / double-ID-scoped
+// whether ANY collapsible sidebar section is currently expanded —
+// ":has(.prism-collapsible-panel.open)" is what actually drives this
+// (every section collapsed = squeeze to the icon gutter; any one of them
+// open = back to full width), so #sidebar only needs to squeeze while
+// every one of its sections agrees to collapse. Both of ActiveAdmin's own
+// rules here are triple-ID-scoped / double-ID-scoped
 // (structure/_main_structure.scss), so matching that path (rather than a
 // flatter selector) is what lets this reliably win regardless of load order.
 $prism-filters-collapsed-gutter: 72px !default;
@@ -69,7 +69,7 @@ $prism-filters-collapsed-gutter: 72px !default;
     width 280ms cubic-bezier(0.4, 0, 0.2, 1), margin-left 280ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-body:has(.prism-collapsible-panel):not(.prism-filters-open) {
+body:has(.prism-collapsible-panel):not(:has(.prism-collapsible-panel.open)) {
   #active_admin_content:not(.without_sidebar) #main_content_wrapper #main_content {
     margin-right: $prism-filters-collapsed-gutter;
   }
@@ -80,14 +80,17 @@ body:has(.prism-collapsible-panel):not(.prism-filters-open) {
   }
 }
 
-// "Filters" sidebar panel — collapses to a single icon button by default
+// Every sidebar section — collapses to a single icon button by default
 // (ActiveAdminPrism::Configuration#collapsible_filters), expanding to
-// the full form on click (see prism.js's filters-collapse handler, and
-// lib/active_admin/views/filters_sidebar.rb for the icon + label-span
-// markup this targets). AA gives this specific SidebarSection a stable id
-// ("#{name}_sidebar_section" => "filters_sidebar_section"), so this is
-// scoped to it alone — any other panel (dashboard panels, custom sidebar
-// sections a host adds) is untouched.
+// its full content on click (see prism.js's collapsible-panel handler,
+// and lib/active_admin/views/filters_sidebar.rb for the icon + label-span
+// markup this targets, and for how a section picks its own icon). Used to
+// be scoped to the "Filters" section alone (AA gives it a stable id,
+// "filters_sidebar_section") — generalized to every section, including a
+// host's own custom `sidebar "Title" do ... end` block, since one left
+// out of this treatment still rendered at its full width/height inside
+// the #sidebar column's own squeeze above instead of collapsing alongside
+// it, wrapping or overflowing instead.
 .prism-collapsible-panel {
   // Collapsed (default): no floating white card — just the icon button —
   // so it doesn't read as a stray tiny panel. Restored in full under
@@ -204,6 +207,17 @@ body:has(.prism-collapsible-panel):not(.prism-filters-open) {
   }
 }
 
+// The consolidated "Sidebar Actions" dropdown itself
+// (.prism-sidebar-panel-select-wrapper + .prism-sidebar-panel-holding)
+// lives in scss-src/_buttons.scss, next to .prism-action-items-dropdown —
+// both render in the title bar's shared row (js-src/prism.js's
+// prismTitlebarActionsRow), not here in #sidebar at all. Filters is
+// excluded from this dropdown entirely and keeps living here, unchanged,
+// with its own plain icon button — every *other* collapsible section has
+// its links flattened into that dropdown and the section itself discarded
+// outright (see buildOtherSectionsDropdown in that file), so #sidebar
+// never has to make room for more than Filters alone.
+
 // Backstop for ActiveAdminPrism::Configuration#collapsible_filters =
 // false: always show the full panel, matching ActiveAdmin's own default
 // (prism.js also skips attaching the click handler in this case, and
@@ -236,6 +250,167 @@ body.prism-filters-collapsible-disabled .prism-collapsible-panel {
   }
 }
 
+// AA core's own ".table_tools" (active_admin/views/pages/index.rb,
+// styled by its components/_table_tools.scss) is a clearfixed block whose
+// children (the Batch Actions dropdown, scope tabs) float left. Flexbox
+// is what puts .prism-active-filters-bar below on the same row — floats
+// have no effect on flex items regardless of specificity/load order, same
+// rationale as the form actions row in _forms.scss.
+.table_tools {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  // row-gap only (not the shorthand "gap", i.e. no column-gap) —
+  // .prism-active-filters-bar below is pushed to this row's far end via
+  // `margin-left: auto`, not `justify-content`, and a nonzero column-gap
+  // on the same axis as that auto margin gets double-counted by the auto
+  // margin's own free-space math, leaving exactly one gap's worth of
+  // unclaimed space *after* the last item instead of before it — the bar
+  // fell short of the table's own right edge by exactly 12px. row-gap
+  // still spaces .table_tools_actions from the bar vertically if they
+  // wrap onto separate lines on a narrow viewport, without that bug.
+  row-gap: 12px;
+}
+
+// New wrapper (not AA's own markup) around whatever .table_tools would
+// have rendered directly before — see
+// lib/active_admin/views/active_filters_bar.rb#build_table_tools. Only
+// present when any_table_tools? is true.
+.table_tools_actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+}
+
+// Compact "current scope + active filters" bar, rendered beside the Batch
+// Actions button/scope tabs instead of ActiveAdmin core's own
+// #sidebar-based "Search status" panel — see
+// lib/active_admin/views/active_filters_bar.rb (Ruby side,
+// ActiveAdminPrism::Configuration#active_filters_bar) for why: that
+// sidebar panel is a child of #sidebar, so it gets squeezed down to the
+// same 72px icon gutter as the Filters form whenever collapsible_filters
+// has it collapsed, and its content (one "field contains value" sentence
+// per active filter) has nowhere to fit in 72px and overflows out over
+// the table instead of shrinking cleanly. This reuses that same Ruby
+// component's markup/i18n (ActiveAdmin::Views::ActiveFiltersSidebarContent)
+// wholesale — restyled here as a single horizontal row of pill tags
+// instead of a vertical sidebar list, rather than reimplemented.
+//
+// Given its own tinted background/border (the theme's primary color,
+// same tokens as an active nav item or a focused input's ring) rather
+// than a plain card, so it reads as a distinct, "something is filtered"
+// signal at a glance next to the neutral Batch Actions button beside it —
+// not just another gray panel a visitor could mistake for chrome.
+.prism-active-filters-bar {
+  // inline-flex (not the plain block a bare `div` defaults to) sizes this
+  // to its own content instead of stretching to fill .table_tools's
+  // remaining width. margin-left: auto pushes it to the row's far end
+  // regardless of whether .table_tools_actions exists beside it (only
+  // rendered `if any_table_tools?` — a resource with filters active but
+  // no batch actions/scopes has nothing else in this row at all).
+  display: inline-flex;
+  max-width: 100%;
+  margin-left: auto;
+  padding: 8px 14px;
+  background: $prism-color-primary-light;
+  border: 1px solid rgba($prism-color-primary, 0.3);
+  border-left: 3px solid $prism-color-primary;
+  border-radius: $prism-radius;
+  font-size: 0.85em;
+  // Clicking it opens the Filters panel (js-src/prism.js) — a plain
+  // hover/focus cue rather than restyling the whole card on hover, so it
+  // doesn't fight with the already-deliberate "eye-catching" tinted look.
+  cursor: pointer;
+  transition: box-shadow $prism-transition-fast;
+
+  &:hover,
+  &:focus-visible {
+    box-shadow: 0 0 0 3px rgba($prism-color-primary, 0.15);
+  }
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  // The builder_method wraps ActiveFiltersSidebarContent's own output in a
+  // ".active_filters_sidebar_content" div (Arbre::Component's own
+  // convention) — this, not .prism-active-filters-bar itself, is the
+  // direct parent of the "Scope:"/"Current filters:" markup below.
+  .active_filters_sidebar_content {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px 14px;
+  }
+
+  // ActiveFiltersSidebarContent#scope_block's "Scope:" <h4> (only present
+  // when a scope is active) + its value <b class="current_scope_name">.
+  > .active_filters_sidebar_content > h4 {
+    margin: 0;
+    font-size: 1em;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: $prism-color-primary-dark;
+  }
+
+  .current_scope_name {
+    color: $prism-color-primary-dark;
+    font-weight: 700;
+  }
+
+  // #filters_list wraps its own "Current filters:" <h4> + <ul> in a
+  // `div style="margin-top: 10px"`, sized for stacking under the scope
+  // line in a vertical sidebar — reset that now that everything sits
+  // inline in the same row instead.
+  > .active_filters_sidebar_content > div {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px 14px;
+    margin-top: 0 !important;
+
+    > h4 {
+      margin: 0 !important;
+      font-size: 1em;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+      color: $prism-color-primary-dark;
+    }
+
+    > ul {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+
+      li {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        padding: 4px 10px;
+        border-radius: $prism-radius-pill;
+        background: $prism-bg-card;
+        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
+        line-height: 1.4;
+
+        span {
+          color: $prism-text-muted;
+        }
+
+        b {
+          font-weight: 700;
+          color: $prism-color-primary-dark;
+        }
+      }
+    }
+  }
+}
+
 .blank_slate_container {
   .blank_slate {
     background: $prism-bg-card;