active_admin_prism 0.1.2 → 0.1.3

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/_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

@@ -236,6 +236,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;

data/scss-src/_select2.scss

@@ -201,19 +201,36 @@ form.filter_form .filter_form_field.select_and_search .select2-container {
 
 // Main "fieldset.inputs" form: ActiveAdmin's own _forms.scss floats the
 // label left at 20% width and gives text inputs an explicit
-// width: calc(80% - padding) so they sit in the remaining space beside it
-// — a value this gem has no access to at compile time (it's compiled
+// width: calc(80% - 22px) so they sit in the remaining space beside it —
+// a value this gem has no access to at compile time (it's compiled
 // standalone, without AA's own SCSS variables/mixins in its load path; see
-// bin/build-css). Rather than hardcode an equivalent, giving the container
-// its own block formatting context (overflow: hidden, no explicit width)
-// gets the same result for free: per the CSS spec, a BFC-establishing box
-// must not overlap a preceding float's margin box, so the browser sizes it
-// to exactly the remaining space automatically. Without this, the default
-// 100% width above would render full-width *underneath* the floated
-// label, visually painting over it — this is the fix for that, not just a
-// visual nicety.
-fieldset.inputs .select2-container {
-  overflow: hidden;
+// bin/build-css), so it's matched here as a literal instead.
+//
+// A block-formatting-context trick (overflow: hidden, no explicit width)
+// looks like it should get the same result for free — per the CSS spec, a
+// BFC-establishing box must not overlap a preceding float's margin box —
+// but it only actually sizes the box when its width is auto. Select2 sets
+// an inline `width: 100%` directly on `.select2-container` itself
+// (prism.js's own auto-init passes `{ width: "100%" }`, and jQuery's
+// .css("width", ...) call is what select2.js uses under the hood even for
+// a host's own manual `.select2()` call left at its default width option),
+// so that inline 100% is never auto and the BFC sizing never kicks in —
+// the container renders full-width *underneath* the floated label instead
+// of beside it. `!important` is required here to beat that inline style.
+form fieldset.inputs li.select > .select2-container {
+  display: inline-block;
+  width: calc(80% - 22px) !important;
+  vertical-align: middle;
+}
+
+// Any select Select2 has not (yet) enhanced — it hides the real one via a
+// 1px offscreen technique once active, so this only matches before that,
+// or if it's disabled/skipped entirely — needs the same geometry so the
+// row doesn't jump once Select2 does attach.
+form fieldset.inputs li.select > select:not(.select2-hidden-accessible) {
+  display: inline-block;
+  width: calc(80% - 22px);
+  vertical-align: middle;
 }
 
 // The dropdown panel itself is appended to <body> (or wherever