Skip to content

Put every admin form's buttons in Orchard Core's sticky bottom action bar - #1262

Merged
MikeAlhayek merged 2 commits into
mainfrom
claude/sticky-action-bar
Nov 3, 2026
Merged

MikeAlhayek merged 2 commits into
mainfrom
claude/sticky-action-bar

Conversation

@MikeAlhayek

Copy link
Copy Markdown
Member

Orchard Core 4 (OrchardCMS/OrchardCore#19302, TheAdmin 4.0.0-preview-19210, already on main) keeps the buttons of every admin edit page in a bar fixed to the bottom of the screen, so Save and Cancel stay visible on long forms. This PR does the same for every admin form page in this solution, so our pages match Orchard Core's own editors.

What changed

  • 145 admin views (create, edit, import, upload, refund, convert, setup, My account...) render their buttons in <div class="action-bar-bottom"> instead of an ocat-wrapper/ocat-end-offset, d-flex gap-2 or mb-3 row at the end of the form. 122 were converted by script (the row had to hold only buttons and be the last thing in a page-level form), and the rest by hand.
  • Less used buttons are marked action-bar-secondary (Delete, Preview, Deliveries, Cancel event, Remove the address, "Receive everything still to come"). With Configuration → Settings → Admin → Actions layout = Menu, and always on phones, they move into the bar's ellipsis menu.
  • Calendar event forms also render inside the calendar's modal. They use the bar only on the full page and keep inline buttons in the modal; a local Razor function renders the shared buttons once.
  • Hints and warnings that sat under the buttons (Profile wizard, draft orders) moved above the bar.
  • Floating widgets: the soft phone button, the Contact Center agent bar tab and the admin AI assistant were fixed to the bottom too and covered Cancel. On pages with a bar they now sit above it (--oc-action-bar-bottom-height), and the agent bar stays one layer under the bar so its menu opens over the tab.
  • Kept inline on purpose: modals, sub-forms in a card or an accordion (coupon "Generate codes", Store Setup steps, customer loyalty/credit/erase), list pages and filters, row actions, detail-page status actions (appointments, bookings, transactions), the messaging composer, and storefront/customer pages (the bar exists only in the admin theme).

Guidance for new forms

  • AGENTS.md: new "Admin Edit (Form) Page Buttons" rules, plus the skill in the skills list.
  • CLAUDE.md: the same rule in short.
  • New skill .agents/skills/crestapps-admin-edit-views: the markup, secondary actions, page+modal partials, which forms stay inline, and how to check a page.
  • New lint test tests/js/lint/admin-forms-use-action-bar.test.js fails when a module view ends a page-level form with an inline ocat-end-offset button row again. It fails on main (lists the old views) and passes here.
  • 3.0.0 changelog: "Admin edit page buttons" under breaking changes (theme overrides and UI tests that look for the old row must update).

Validation

  • dotnet build of CrestApps.OrchardCore.Cms.Web in Release with -warnaserror: 0 warnings, 0 errors (views compile at build).
  • npx vitest run: 85 files, 1401 tests pass.
  • Page check on a fresh site (Online store recipe plus 156 CrestApps features enabled): a crawler signed in, opened every admin menu page and followed each page's Add/Create/Edit/Settings/Import links. 606 admin pages, 0 server errors, 332 with the action bar. On every other page with a post form, the buttons are in the bar or are one of the intentional inline cases above.
  • In the browser: Save in the bar submits (created a calendar and an event); Buttons and Menu layouts (secondary actions move into the ellipsis menu and back); phone width; the event form shows the bar on the page and inline buttons in the modal; the soft phone and agent bar tab no longer cover the bar.

Not covered: Edit pages of records that a fresh site doesn't have were only compiled, not opened (their markup matches the Create page of the same record, which was opened). The admin AI assistant offset was not checked in a browser, because no admin chat widget was configured on the test site.

🤖 Generated with Claude Code

… bar

Orchard Core 4 (PR #19302) keeps the buttons of every admin edit page in a
bar fixed to the bottom of the screen, so Save and Cancel stay visible on
long forms. The module views now do the same:

- 143 admin create, edit, import, upload, refund, convert and setup views
  render their buttons in <div class="action-bar-bottom"> instead of an
  ocat-wrapper/ocat-end-offset (or d-flex/mb-3) row at the end of the form.
- Delete, Preview, Deliveries and similar less used buttons are marked
  action-bar-secondary, so they move into the bar's ellipsis menu in the
  Menu actions layout and on small screens.
- The calendar event forms, which also render inside the calendar modal,
  use the bar only on the full page.
- Hints and warnings that sat under the buttons moved above the bar.
- Modals, card and accordion sub-forms, list filters, row actions and
  storefront pages keep their buttons inline.

AGENTS.md, CLAUDE.md and a new crestapps-admin-edit-views skill describe
the rule for new forms, and a lint test fails when a module view ends a
form with an inline button row again. The 3.0.0 changelog notes the change.
…'s buttons into it

The page check found two more things:

- The soft phone button, the Contact Center agent bar tab and the admin AI
  assistant are fixed to the bottom of the screen too, and covered the bar's
  Cancel button. On pages with an action bar they now sit above it, using
  the bar height Orchard Core publishes in --oc-action-bar-bottom-height.
  The agent bar stays one layer under the bar, so the bar's "more actions"
  menu opens over its tab.
- My account and its address form are admin pages, so their Save buttons
  move into the bar as well.
@MikeAlhayek
MikeAlhayek merged commit 7063269 into main Nov 3, 2026
9 checks passed
@MikeAlhayek
MikeAlhayek deleted the claude/sticky-action-bar branch November 3, 2026 04:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant