active_admin_prism 0.1.0

data/app/views/active_admin/devise/shared/_brand.html.erb

@@ -0,0 +1,34 @@
+<%#
+  Shared brand block for every Devise auth page Prism reskins (sign in,
+  sign up, forgot/reset password, resend confirmation, resend unlock) —
+  each action's own view renders this instead of duplicating the
+  logo/app-name/subtitle markup, so all of them redesign (or degrade back
+  to stock ActiveAdmin) together instead of drifting out of sync. Gated by
+  ActiveAdminPrism::Configuration#login_page, the same flag the
+  sign-in page itself uses (see lib/prism_login_helper.rb for the
+  logo/app-name resolution logic behind prism_login_logo_html/
+  prism_login_app_name).
+
+  Locals:
+    action_title - the page's own translated title (e.g. "Sign up",
+                   "Change your password") — the caller has already run
+                   it through `title(...)` for its @page_title side
+                   effect before passing it in here, so this partial
+                   never needs to call `title` itself.
+    subtitle     - what to show under the app name in branded mode.
+                   Every caller except sessions#new just passes
+                   action_title again; sessions#new passes
+                   config.login_tagline instead, since that one has its
+                   own dedicated, independently configurable copy.
+%>
+<% if ActiveAdminPrism.configuration.login_page %>
+  <div class="prism-login-brand">
+    <div class="prism-login-logo"><%= prism_login_logo_html %></div>
+    <h2 class="prism-login-title"><%= prism_login_app_name %></h2>
+    <% if subtitle.present? %>
+      <p class="prism-login-tagline"><%= subtitle %></p>
+    <% end %>
+  </div>
+<% else %>
+  <h2><%= active_admin_application.site_title(self) %> <%= action_title %></h2>
+<% end %>

data/app/views/active_admin/devise/unlocks/new.html.erb

@@ -0,0 +1,25 @@
+<%#
+  Overrides ActiveAdmin's own active_admin/devise/unlocks/new.html.erb the
+  same way sessions/new.html.erb does (see that file's header comment for
+  the Gemfile-order mechanism this relies on). Form fields/behavior below
+  are byte-for-byte ActiveAdmin's own template; only the header markup
+  (shared devise/shared/_brand partial) and the links wrapper are new.
+%>
+<div id="login" class="prism-login">
+  <% action_title = title t('active_admin.devise.unlock.title') %>
+  <%= render "active_admin/devise/shared/brand", action_title: action_title, subtitle: action_title %>
+
+  <%= render partial: "active_admin/devise/shared/error_messages", resource: resource %>
+  <%= active_admin_form_for(resource, as: resource_name, url: unlock_path(resource_name), html: { method: :post }) do |f|
+    f.inputs do
+      f.input :email
+    end
+    f.actions do
+      f.action :submit, label: t('active_admin.devise.unlock.submit'), button_html: { value: t('active_admin.devise.unlock.submit') }
+    end
+  end %>
+
+  <div class="prism-login-links">
+    <%= render partial: "active_admin/devise/shared/links" %>
+  </div>
+</div>

data/js-src/prism.js

@@ -0,0 +1,270 @@
+// This is the real source — mirrors scss-src/*.scss's role for the CSS
+// side. `bin/build-js` minifies this into
+// app/assets/javascripts/active_admin_prism/prism.js, the file actually
+// registered via ActiveAdmin.application.register_javascript and shipped
+// to hosts. Never hand-edit that compiled copy — edit this file and
+// rebuild. See bin/build-css's own comment for why shipping pre-minified
+// assets matters even though Sprockets hosts would otherwise re-minify on
+// their own `assets:precompile` — Propshaft hosts have no such step.
+//
+// Prism sidebar behaviour: collapsible nav groups + mobile off-canvas
+// toggle. Vanilla JS, no dependency on jQuery/Stimulus/a bundler.
+(function () {
+  "use strict";
+
+  var STORAGE_PREFIX = "prism_sidebar_";
+
+  function storageKey(li) {
+    return STORAGE_PREFIX + li.id;
+  }
+
+  function setOpen(li, open) {
+    li.classList.toggle("open", open);
+    try {
+      window.localStorage.setItem(storageKey(li), open ? "1" : "0");
+    } catch (e) {
+      // localStorage unavailable (private mode, disabled, etc.) — degrade to
+      // in-memory only, no persistence across reloads.
+    }
+  }
+
+  function restoreGroupState(sidebar) {
+    var groups = sidebar.querySelectorAll(".prism-nav-item.has-children");
+    groups.forEach(function (li) {
+      var stored;
+      try {
+        stored = window.localStorage.getItem(storageKey(li));
+      } catch (e) {
+        stored = null;
+      }
+
+      if (stored === "1") {
+        li.classList.add("open");
+      } else if (stored === "0") {
+        li.classList.remove("open");
+      }
+      // stored === null: leave the server-rendered default (open only when
+      // it contains the active item) untouched.
+    });
+  }
+
+  function onToggleClick(event) {
+    var toggle = event.target.closest("[data-prism-toggle]");
+    if (!toggle) return;
+
+    var li = toggle.closest(".prism-nav-item");
+    if (!li) return;
+
+    setOpen(li, !li.classList.contains("open"));
+  }
+
+  function onSidebarButtonClick(event) {
+    var button = event.target.closest("[data-prism-toggle-sidebar]");
+    if (!button) return;
+
+    document.body.classList.toggle("prism-sidebar-open");
+  }
+
+  document.addEventListener("DOMContentLoaded", function () {
+    var sidebar = document.getElementById("header");
+    if (!sidebar || !sidebar.classList.contains("prism-sidebar")) return;
+
+    restoreGroupState(sidebar);
+    sidebar.addEventListener("click", onToggleClick);
+    sidebar.addEventListener("click", onSidebarButtonClick);
+  });
+})();
+
+// Routes every plain `data-confirm` link (row-level View/Edit/Delete
+// actions, any other rails-ujs confirm) through ActiveAdmin's own styled
+// jQuery UI dialog — the same one it already uses for Batch Actions —
+// instead of the native, unstylable browser confirm(). Batch Actions links
+// are left alone; they already run their own confirm flow (with dynamic
+// per-action inputs) via active_admin/base.js.
+//
+// This overrides $.rails.allowAction, jquery-ujs's documented extension
+// point for custom confirm dialogs (jquery_ujs.js: "may be overridden with
+// custom confirm dialog in $.rails.confirm" / allowAction). allowAction is
+// called synchronously and expects true/false; since our dialog is async,
+// we return false to block the original action, then re-`click()` the same
+// element after the user confirms — allowAction runs again, sees the
+// "prismConfirmed" flag, and returns true so rails-ujs's normal
+// data-method handling proceeds untouched.
+(function () {
+  "use strict";
+
+  document.addEventListener("DOMContentLoaded", function () {
+    // Set by Pages::Base#body_classes when
+    // ActiveAdminPrism.configuration.styled_confirms is false.
+    if (document.body.classList.contains("prism-styled-confirms-disabled")) return;
+    if (typeof jQuery === "undefined" || !jQuery.rails || !window.ActiveAdmin || !window.ActiveAdmin.ModalDialog) {
+      return;
+    }
+
+    var $ = jQuery;
+    var originalAllowAction = $.rails.allowAction;
+
+    $.rails.allowAction = function (element) {
+      var message = element.data("confirm");
+      if (!message) return originalAllowAction.call($.rails, element);
+      if (element.closest(".batch_actions_selector").length) {
+        return originalAllowAction.call($.rails, element);
+      }
+      if (element.data("prismConfirmed")) {
+        element.removeData("prismConfirmed");
+        return true;
+      }
+
+      new window.ActiveAdmin.ModalDialog(message, {}, function () {
+        element.data("prismConfirmed", true);
+        element[0].click();
+      });
+
+      return false;
+    };
+  });
+})();
+
+// Flash messages: dismiss button + auto-hide. See
+// lib/active_admin/views/flash_messages.rb, which renders the
+// ".prism-flash-dismiss" button markup this responds to, and two data
+// attributes this reads at runtime so Ruby-side config controls behavior
+// without needing to rebuild this static asset:
+//   - "data-prism-auto-dismiss-ms" (present only when
+//     ActiveAdminPrism.configuration.flash_auto_dismiss is true)
+//   - "data-prism-transition-ms" (ActiveAdminPrism::Configuration
+//     #flash_transition_ms) — applied as an inline transition-duration
+//     (overriding the CSS default) and reused as the removal delay, so the
+//     fade-out animation and the element's actual removal always stay in
+//     sync regardless of the configured duration.
+(function () {
+  "use strict";
+
+  var DEFAULT_TRANSITION_MS = 320;
+
+  function dismiss(flash, transitionMs) {
+    if (flash.dataset.prismDismissed) return;
+    flash.dataset.prismDismissed = "true";
+    flash.style.transitionDuration = transitionMs + "ms";
+    flash.classList.add("prism-flash-hide");
+    setTimeout(function () {
+      flash.remove();
+    }, transitionMs);
+  }
+
+  document.addEventListener("DOMContentLoaded", function () {
+    var flashesWrapper = document.querySelector(".flashes");
+    var flashes = document.querySelectorAll(".flashes .flash");
+    if (!flashes.length) return;
+
+    var transitionMs = (flashesWrapper && parseInt(flashesWrapper.dataset.prismTransitionMs, 10)) || DEFAULT_TRANSITION_MS;
+    var autoDismissMs = flashesWrapper && parseInt(flashesWrapper.dataset.prismAutoDismissMs, 10);
+
+    if (autoDismissMs) {
+      flashes.forEach(function (flash) {
+        setTimeout(function () {
+          dismiss(flash, transitionMs);
+        }, autoDismissMs);
+      });
+    }
+
+    document.addEventListener("click", function (event) {
+      var button = event.target.closest("[data-prism-flash-dismiss]");
+      if (!button) return;
+      dismiss(button.closest(".flash"), transitionMs);
+    });
+  });
+})();
+
+// "Filters" sidebar panel: collapses to a single icon button, expanding to
+// the full form on click. See scss-src/_panels.scss (#filters_sidebar_section)
+// for the actual collapse/expand styling — this only toggles the ".open"
+// class an inline click responds to. Skipped entirely when
+// ActiveAdminPrism.configuration.collapsible_filters is false (the
+// "prism-filters-collapsible-disabled" body class, set in
+// lib/active_admin/views/flash_messages.rb#body_classes).
+(function () {
+  "use strict";
+
+  document.addEventListener("DOMContentLoaded", function () {
+    if (document.body.classList.contains("prism-filters-collapsible-disabled")) return;
+
+    var section = document.getElementById("filters_sidebar_section");
+    if (!section) return;
+
+    var toggle = section.querySelector(":scope > h3");
+    if (!toggle) return;
+
+    toggle.setAttribute("role", "button");
+    toggle.setAttribute("tabindex", "0");
+    toggle.setAttribute("aria-expanded", section.classList.contains("open") ? "true" : "false");
+    // Mirrored onto <body> because #main_content (the table/grid area)
+    // is a *sibling* of #sidebar, not a descendant of this section — CSS
+    // can't reach across siblings, so scss-src/_panels.scss keys the
+    // #main_content/#sidebar width reflow off this body class instead.
+    document.body.classList.toggle("prism-filters-open", section.classList.contains("open"));
+
+    function toggleOpen() {
+      var open = section.classList.toggle("open");
+      toggle.setAttribute("aria-expanded", open ? "true" : "false");
+      document.body.classList.toggle("prism-filters-open", open);
+    }
+
+    toggle.addEventListener("click", toggleOpen);
+    toggle.addEventListener("keydown", function (event) {
+      if (event.key !== "Enter" && event.key !== " ") return;
+      event.preventDefault();
+      toggleOpen();
+    });
+  });
+})();
+
+// "Languages" sidebar dropdown (see
+// lib/active_admin/views/prism_sidebar.rb#render_language_switcher) —
+// click/keyboard toggle plus click-outside-to-close, matching how a normal
+// dropdown popover behaves. Absent from the page entirely (nothing for this
+// to attach to) when ActiveAdminPrism.configuration.language_switcher or
+// #languages is empty, so no explicit disabled-body-class check is needed
+// here, unlike prism.js's other config-gated behaviors.
+(function () {
+  "use strict";
+
+  function closeAll(except) {
+    document.querySelectorAll(".prism-sidebar-lang.open").forEach(function (wrapper) {
+      if (wrapper === except) return;
+      wrapper.classList.remove("open");
+      var toggle = wrapper.querySelector(".prism-lang-toggle");
+      if (toggle) toggle.setAttribute("aria-expanded", "false");
+    });
+  }
+
+  document.addEventListener("DOMContentLoaded", function () {
+    var toggle = document.querySelector(".prism-lang-toggle");
+    if (!toggle) return;
+
+    var wrapper = toggle.closest(".prism-sidebar-lang");
+
+    function toggleOpen() {
+      var open = wrapper.classList.toggle("open");
+      toggle.setAttribute("aria-expanded", open ? "true" : "false");
+      if (open) closeAll(wrapper);
+    }
+
+    toggle.setAttribute("role", "button");
+    toggle.setAttribute("tabindex", "0");
+
+    toggle.addEventListener("click", function (event) {
+      event.stopPropagation();
+      toggleOpen();
+    });
+    toggle.addEventListener("keydown", function (event) {
+      if (event.key !== "Enter" && event.key !== " ") return;
+      event.preventDefault();
+      toggleOpen();
+    });
+
+    document.addEventListener("click", function () {
+      closeAll();
+    });
+  });
+})();

data/lib/active_admin/views/filters_sidebar.rb

@@ -0,0 +1,69 @@
+# frozen_string_literal: true
+
+module ActiveAdmin
+  module Views
+    # Reopens ActiveAdmin::Views::SidebarSection (used for every sidebar
+    # section, e.g. "Filters", "Search Status", any custom
+    # `sidebar :title do ... end` block) to inject a real inline SVG icon
+    # into the title of the *Filters* section specifically — matching the
+    # id ActiveAdmin::SidebarSection#id computes for it
+    # ("filters_sidebar_section"). Every other sidebar section is untouched.
+    #
+    # The label text is wrapped in its own span so CSS can visually hide it
+    # while collapsed without touching the icon (see
+    # scss-src/_panels.scss's #filters_sidebar_section rules, and
+    # prism.js's filters-collapse handler for the actual toggle).
+    #
+    # This only runs when ActiveAdminPrism.configuration.collapsible_filters
+    # is true — when it's false the section is left exactly as ActiveAdmin
+    # renders it by default (plain text title, no icon).
+    class SidebarSection < Panel
+      FILTERS_SECTION_ID = "filters_sidebar_section"
+
+      def build(section)
+        @section = section
+        super(@section.title)
+        add_class @section.custom_class if @section.custom_class
+        self.id = @section.id
+
+        if @section.id == FILTERS_SECTION_ID && ActiveAdminPrism.configuration.collapsible_filters
+          add_class "prism-collapsible-panel"
+
+          # Panel#build already appended the plain-text @title (h3) as the
+          # first child, followed by @contents (the panel_contents div).
+          # Replace it with an [icon, label-span] version — built fresh
+          # rather than mutated in place (Arbre elements don't expose an
+          # API to insert content before an existing child).
+          #
+          # Panel#add_child redirects *any* add_child call on this object to
+          # @contents once @contents exists (so plain builder calls inside a
+          # panel's do-block land in .panel_contents, not as top-level
+          # siblings) — building a fresh h3 via the normal `h3(...)` verb at
+          # this point would silently land *inside* .panel_contents instead
+          # of replacing @title. Building it while @contents is
+          # (temporarily) nil bypasses that redirect — but add_child still
+          # *appends* (to the end of `children`, after the contents div,
+          # since that div itself is still sitting in `children` even
+          # though the @contents variable is momentarily nil), so it has to
+          # be explicitly deleted from wherever it landed before unshifting
+          # it to the front — otherwise it ends up in `children` twice.
+          children.delete(@title)
+          icon = ActiveAdminPrism::Icons.svg(:filter, css_class: "prism-filter-icon")
+          contents = @contents
+          @contents = nil
+          new_title = h3 do
+            text_node icon.html_safe if icon
+            span @section.title.to_s, class: "prism-filter-label"
+          end
+          @contents = contents
+
+          children.delete(new_title)
+          children.unshift(new_title)
+          @title = new_title
+        end
+
+        build_sidebar_content
+      end
+    end
+  end
+end

data/lib/active_admin/views/flash_messages.rb

@@ -0,0 +1,77 @@
+# frozen_string_literal: true
+
+module ActiveAdmin
+  module Views
+    module Pages
+      # Reopens ActiveAdmin::Views::Pages::Base to add a dismiss ("x")
+      # button to each flash message, and to render the configured
+      # auto-dismiss delay as a data attribute prism.js reads at runtime
+      # (see ActiveAdminPrism::Configuration#flash_dismissible /
+      # #flash_auto_dismiss / #flash_auto_dismiss_seconds).
+      #
+      # The stock #build_flash_messages just renders
+      # `div message, class: "flash flash_#{type}"` — no room for a button.
+      # When flash_dismissible is false, that exact stock markup is what
+      # this renders; only when it's true (the default) does the message
+      # get wrapped with a dismiss button alongside it.
+      #
+      # Auto-dismiss timing and the click handler for the dismiss button
+      # both live in active_admin_prism/prism.js (CSS alone can't
+      # remove an element from the DOM or run a timer).
+      class Base
+        def build_flash_messages
+          config = ActiveAdminPrism.configuration
+          flashes_data = { "prism-transition-ms": config.flash_transition_ms.to_i }
+          if config.flash_auto_dismiss
+            flashes_data[:"prism-auto-dismiss-ms"] = (config.flash_auto_dismiss_seconds.to_f * 1000).round
+          end
+
+          div class: "flashes", data: flashes_data do
+            flash_messages.each do |type, messages|
+              [*messages].each do |message|
+                if config.flash_dismissible
+                  div class: "flash flash_#{type}" do
+                    span message, class: "prism-flash-message"
+                    button class: "prism-flash-dismiss", type: "button",
+                           "aria-label": "Dismiss", data: { "prism-flash-dismiss": true } do
+                      text_node ActiveAdminPrism::Icons.svg(:x, css_class: "prism-flash-dismiss-icon", size: 14).html_safe
+                    end
+                  end
+                else
+                  div message, class: "flash flash_#{type}"
+                end
+              end
+            end
+          end
+        end
+
+        # Read by prism.js / scss-src's CSS to decide whether to route
+        # data-confirm links through the styled dialog, whether the Filters
+        # sidebar panel collapses to an icon, and whether ActiveAdmin's
+        # original #footer should stay hidden (see
+        # ActiveAdminPrism::Configuration #styled_confirms /
+        # #collapsible_filters / #sidebar_footer).
+        #
+        # Can't call `super` here — #body_classes is defined directly on
+        # this same class (not a superclass), so reopening and redefining
+        # it replaces that definition outright; there's no ancestor
+        # implementation left for `super` to reach; (Arbre::Element#method_missing
+        # would silently redirect it right back to this same method,
+        # recursing forever). The body has to be copied instead.
+        def body_classes
+          config = ActiveAdminPrism.configuration
+          classes = Arbre::HTML::ClassList.new [
+            params[:action],
+            params[:controller].tr("/", "_"),
+            "active_admin", "logged_in",
+            active_admin_namespace.name.to_s + "_namespace"
+          ]
+          classes << "prism-styled-confirms-disabled" unless config.styled_confirms
+          classes << "prism-filters-collapsible-disabled" unless config.collapsible_filters
+          classes << "prism-sidebar-footer-disabled" unless config.sidebar_footer
+          classes
+        end
+      end
+    end
+  end
+end

data/lib/active_admin/views/index_table_actions.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+module ActiveAdmin
+  module Views
+    class IndexAsTable
+      class IndexTableFor
+        # ActiveAdmin's default View/Edit/Delete row links (built by
+        # IndexTableFor#defaults) already carry distinct classes —
+        # "view_link", "edit_link", "delete_link" — specifically so themes
+        # can hook into them. This swaps their text label for an icon +
+        # a visually-hidden label (kept for screen readers/tooltips),
+        # without touching the url/method/data-confirm behavior at all.
+        # Any other custom `item(...)` call (e.g. from a host's own
+        # `actions do |resource| item "Preview", ... end` block) is
+        # untouched, since it won't carry one of these classes.
+        class TableActions
+          ACTION_ICONS = {
+            "view_link" => :eye,
+            "edit_link" => :pencil,
+            "delete_link" => :trash
+          }.freeze
+
+          def item(*args, **kwargs)
+            unless ActiveAdminPrism.configuration.colorize_action_icons
+              return text_node helpers.link_to(*args, **kwargs)
+            end
+
+            label = args[0]
+            url = args[1]
+            icon_name = ACTION_ICONS.values_at(*kwargs[:class].to_s.split).compact.first
+
+            unless icon_name && (icon = ActiveAdminPrism::Icons.svg(icon_name, css_class: "prism-action-icon"))
+              return text_node helpers.link_to(*args, **kwargs)
+            end
+
+            content = helpers.safe_join([
+              icon.html_safe,
+              helpers.content_tag(:span, label, class: "prism-visually-hidden")
+            ])
+            text_node helpers.link_to(content, url, **kwargs)
+          end
+        end
+      end
+    end
+  end
+end