AdminThemeBridge – a native web-component admin that keeps your existing modules working (beta)

[theoretic]

AdminThemeBridge – a native web-component admin that keeps your existing modules working (beta)

Hi friends! And, traditionally, thanks for ProcessWire 😉

For a while I've been building something bigger than my usual in-house modules, and it's ready for other eyes now. Bridge (a working name) is an admin theme for ProcessWire that renders the admin with native web components and a small TypeScript runtime, without jQuery — while every existing Inputfield and Process module keeps working unchanged.

 

The goal

A better and faster admin. Faster: far less to download and run on every screen (numbers below). Better: an admin that feels current, in light and dark, with the small daily annoyances fixed. The name says how it gets there: Bridge is a bridge between the jQuery-era admin and the modern web stack. Everything that can be native already is, and your modules stay on their side of the bridge, working exactly as before.

Bridge against Uikit and AdminThemeBoss at a glance; the full table with all six themes is further down

The idea in one paragraph

The admin carries a lot of history: jQuery, jQuery UI, inputfields.js, WireTabs, Magnific. Thousands of modules rely on exactly that, so simply removing it is not an option. Bridge does it the other way round: the shell and the core screens are native, and the whole legacy stack is loaded only on the screens that need it — with the same globals ($, jQuery, ProcessWire.config, Inputfields) and the same reloaded event. A page whose fields are all native loads no jQuery at all; a page with a jQuery-era field gets the classic stack, and that field works as before.

What's native today

• the admin frame: masthead, navigation, notices, light and dark scheme
• most core fields: text, select, checkboxes, datetime, file, image (incl. crop and variations), repeater, page table, language tabs
• core screens: page tree, page editor (save without reload), Lister, Modules, Fields, Templates, Users, Roles, Permissions, Profile, Logs, Trash and the rest

Small things that got better

• Multi-level dropdown menus: a submenu stays open while you move the pointer to it, fits the screen height and opens to the left at the right edge. On a phone or tablet the first tap opens a menu instead of following its link, and menus work from the keyboard too.
• Long content scrolls where it is: a deep page-tree branch or a long menu scrolls inside itself instead of running off the bottom of the screen.
• Notices never cover the Save button. They have their own place above the content, so showing or closing one doesn't move the page, and a long one pushes the content down instead of overlapping it.
• Save without reload in the page editor, and in the field, template, module, user, role and profile editors (Shift+click still saves the classic way).
• No jumping content while the Lister loads, and no stacked tab panels flashing before the tabs are set up.
• The dark scheme reaches CKEditor, TinyMCE and the other field widgets. Focus rings and button text stay readable in every colour preset, and the top bar turns into a drawer when its items don't fit.

What stays exactly as it is

• wire/ is never edited or patched. Bridge is a regular module.
• DOM ids and classes, AJAX endpoints (?modal=1, ?render=JSON, renderInputfieldAjax), module class names and hookable methods are kept as upstream emits them, so your modules and hooks find what they expect.
• It's per user: Uikit stays installed, and anyone can switch back under Profile > Admin Theme.

How it's tested

A conformance suite renders every admin screen under Uikit and under Bridge and compares what modules see. On copies of nine real sites that's 1,434 screens with no differences caused by the theme, covering 41 of the 45 third-party modules installed there (FieldtypeMatrix, PageTableNext, VersionControl, Fluency, BatchChildEditor, SettingsFactory, AdminThemeBoss, ProcessWireUpgrade and others; the other four have admin screens that already fail the same way under Uikit on those copies, so there was nothing to compare). Behaviour checks run in Chromium and Firefox. It's also running on two live sites.

 

CKEditor and TinyMCE run through the legacy stack and still follow the dark scheme

Lighter and faster: the numbers

Lighthouse 12 (desktop preset), logged in, cold cache, median of 3 runs, on a copy of a real site. Average over four screens: page tree, page editor, Lister, Modules. Bridge 0.9.3.

	Bridge	Uikit	Uikit (2025 look)	AdminThemeBoss	Reno	Default
Lighthouse performance	98	69	66	81	83	77
Largest Contentful Paint	0.9 s	3.6 s	3.9 s	1.8 s	1.8 s	1.6 s
JavaScript (gzip)	38 kB	272 kB	273 kB	190 kB	186 kB	184 kB
CSS (gzip)	55 kB	118 kB	150 kB	59 kB	74 kB	70 kB
jQuery loaded	no	yes	yes	yes	yes	yes
Fonts	71 kB	237 kB	458 kB	75 kB	75 kB	75 kB

 

The same table as a picture; the forum editor's tables are fiddly

Fonts include Font Awesome 6 in full: Bridge serves the icons in common use from small subsets built at release time, and any other icon from the full font, so nothing goes missing. These are localhost numbers, so absolute times will be higher on a real server — the differences between themes are the point. On a screen with a jQuery-era field, that field brings its stack with it, as it should.

Want to check on your own site? Chrome DevTools → Lighthouse → Navigation, Desktop, Performance, and untick "Clear storage" in its settings (otherwise it logs you out and measures the login page).

Installation

Requires ProcessWire 3.0.227+ and PHP 8.1+ (developed against 3.0.274 dev).

1. Download the module from https://github.com/theoretic/AdminThemeBridge (Code > Download ZIP) into site/modules/AdminThemeBridge/, or git clone it there. It's the module only; development happens in https://github.com/theoretic/bridge. The modules directory listing is on its way.
2. Modules > Refresh, then install Bridge.
3. Select it under Profile > Admin Theme. Other users stay on their theme.

On a live site please back up the database first and read docs/install-live.md. Two things I learned the hard way: AdminThemeBoss's "activate for all users" must be off (it resets everyone to Uikit on each request), and a plain Modules > Refresh must complete before you install — a site module that loops during the cache rebuild has to be updated first.

For module authors

There is a small component contract (docs/contract.md) . Implement one interface and your Inputfield or Process runs natively too. If you don't, nothing breaks — your module simply gets the legacy stack, as today.

Known limits

• Beta (0.9.3). The contract is version 1 and may still change before 1.0.
• Pro modules (ProFields, FormBuilder, ListerPro) are not tested — I have no licences to test with, so I make no claims there.
• The name is a working name and may change.

What I'd love to hear

• Does your favourite module behave under Bridge? Screens that look or work differently are exactly what I'm looking for.
• Module authors: is the contract understandable, and what would you need from it?
• Anything about the look and the dark scheme.

Thanks

Bridge is mostly inspired by the perfect AdminThemeBoss by Noël Bossart, which was my default admin theme in every ProcessWire project before Bridge existed. Its colour presets (blue, vibrant, black, pink, green) are Bridge's colours, and its extended breadcrumbs are here too. Thank you, Noël!

Module: https://github.com/theoretic/AdminThemeBridge . Development, docs and changelog: https://github.com/theoretic/bridge (MIT; files derived from ProcessWire keep their MPL 2.0 header).

Advice and critics are welcome 😉

Edited October 22 by theoretic
layout imperfections; content unchanged

[adrian]

@theoretic - I absolutely love the idea of removing all those huge layers of cruft from the PW core, but I'll say what I have said whenever someone releases a new AdminTheme - it won't get used unless it's the core theme. But given the way you've built it so that it only loads legacy components as needed by other modules, perhaps it really could become the new core theme. I haven't tested it yet, but if it works flawlessly in that regard, I'd love to get behind it.

[theoretic]

7 hours ago, adrian said:

@theoretic - I absolutely love the idea of removing all those huge layers of cruft from the PW core, but I'll say what I have said whenever someone releases a new AdminTheme - it won't get used unless it's the core theme. But given the way you've built it so that it only loads legacy components as needed by other modules, perhaps it really could become the new core theme. I haven't tested it yet, but if it works flawlessly in that regard, I'd love to get behind it.

@adrian, thank You for Your kind words! I totally agree with You, and the whole Bridge project (not only the AdminBridge theme) is exactly about how to get rid of that JQuery era legacy code. I like how the Processwire core is made, and I think it truely deserves this. At admin level, the main problem will be the compatibility with modules (both native and 3rd-party), and, being fair, a huge part of Bridge is a compatibility layer allowing to run both legacy and modern (no JQuery / JQuery UI) modules. Of course I cannot test every module (thousands of them!), and actual Bridge is proved to run those I use in my own Processwire projects. Feel free to try Bridge with any module You have... and please don't smack me with a shovel if some of them will appear broken under Bridge 😉 Will appreciate any feedback!

[Jonathan Lahijani]

I've had this idea for a while now and thrilled to see this module.  Can't wait to play with it.  I agree that PW needs an admin modernization under the hood.

[diogo]

Well done! The theme feels great to use! A couple of issues that I noticed:

• Debug tools are always visible on some pages.
• Third level of the nav is hidden.
• "Add new template" button doesn't do anything.

👇 see screenshots

Spoiler

 

 

 

[theoretic]

AdminThemeBridge 0.9.5 is out

Thanks to everyone who tried the beta in its first day and sent reports, here in the thread and by PM. Every report below was reproduced on a clean ProcessWire install with the module in question, then fixed and covered by a test.

Modules that use UIkit now work

Some modules use UIkit directly, because AdminThemeUikit loads it on every page: grids, cards, modals, UIkit.notification(). Under Bridge there was no UIkit, so those screens looked broken. Special thanks to Matjaž Potočnik, who reported it for his ProcessShowcase module. Its UIkit page compares the admin theme with stock UIkit side by side, which made it the perfect test for this release.

Bridge now has a UIkit layer, built the same way as its jQuery bridge: it loads only on the pages that need it. A page needs it when its content uses UIkit markup, when a module script calls UIkit, or when a module adds UIkit's files. Core screens never load it.

• UIkit's own stylesheet, recoloured with Bridge's colours, so it follows the light and dark scheme, and it can never restyle Bridge's own parts.
• Core's own UIkit script, so modules get the same UIkit version as under Uikit.
• A UIkit.something() call made before the layer has loaded still works: the layer loads and the call runs.
• A new setting in the module's config, "UIkit for modules written for AdminThemeUikit": load only on pages that use UIkit (the default), always, or never.
• Module authors can ask for it explicitly with $adminTheme->needUikit('YourModule'), and the reasons are hookable (uikitReasons()).

Fixes

• Third-level menus (Pages > Tree > a page with children) opened inside their parent menu instead of beside it.
• The Add New button at the top of Setup > Templates did nothing. The same went for other list screens with an Add New button.
• With $config->debug on, the Debug Mode Tools panel didn't work on most pages. It now opens in a dialog on every page.
• TracyDebugger's bar ran off the left edge of the screen on a phone.
• In the page editor, the View tab's menu sometimes showed open below the form.

Updating

Replace site/modules/AdminThemeBridge/ with the new version from https://github.com/theoretic/AdminThemeBridge (or git pull there), then Modules > Refresh. The full changelog is in the development repo at https://github.com/theoretic/bridge .

Still open

• The UIkit layer doesn't support right-to-left layouts yet.
• I've tested it with ProcessShowcase and the modules on my own sites. If a module that uses UIkit still looks wrong, please post a screenshot and the module's name.

Keep the reports coming. A module that misbehaves under Bridge is exactly what I'm looking for 😉

Edited October 22 by theoretic

[MSP01]

Nice work. I've long thought that the admin interface is the weakest part of Processwire.

Are you planning on adding any UX functionality or just more or less showing same things with faster UI?

[theoretic]

@MSP01, a big elephant can be eaten part by part only 😉 Any idea is welcome, and I have my own ideas on new admin functionality. But the first goal is to get the basic implementation working well and moving it from beta stage to something anyone can use in everyday work. After that, new functionality time will come.

[theoretic]

AdminThemeBridge 0.9.6 is out

A small release with two fixes, both found while checking Ryan's AgentTools module under Bridge (Setup > Agent Tools > Migrations).

Confirmation dialogs work again

Since 0.9.5, on pages that load the classic jQuery admin scripts, core's ProcessWire.confirm(), ProcessWire.alert() and ProcessWire.prompt() threw an error instead of opening a dialog. Any button that asks "Are you sure?" first did nothing. AgentTools' "Apply pending migrations" button was one of them.

The cause was the UIkit layer from 0.9.5. Core's dialog functions use UIkit whenever it is present, and they read their OK and Cancel labels from a setting that only AdminThemeUikit provides. Bridge now provides it too, with its own translated labels, so these dialogs open as UIkit dialogs in Bridge's colours.

Stray module output no longer breaks the admin's look

When a module prints text before the page itself begins, Bridge lost its styles for that request: plain serif font, no background. The browser starts the page body at the first piece of text, and one of Bridge's early scripts then marked that body, so the browser dropped the real body tag and the classes Bridge's styles depend on. That script now waits until the whole page is read. The stray text itself still shows at the top, as it does under AdminThemeUikit.

AgentTools prints its site map progress this way after applying migrations. That part is AgentTools' own, and outflux3 has already reported it with a fix, as issue 16 on its GitHub repository.

Updating

Replace site/modules/AdminThemeBridge/ with the new version from https://github.com/theoretic/AdminThemeBridge (or git pull there), then Modules > Refresh. The full changelog is in the development repo at https://github.com/theoretic/bridge

If you use AgentTools or any other module with "Are you sure?" buttons on 0.9.5, this update is worth taking.

Thanks for the reports so far, and keep them coming 😉

[theoretic]

AdminThemeBridge 0.9.7: a small layout fix

One fix, found on the same AgentTools screens as the last release.

On a page without the classic jQuery stack, a toggle field (Yes / No buttons, InputfieldToggle) showed its notes squeezed in beside the buttons instead of below them. Radio buttons could do the same. Core wraps both in its clearfix classes, and Bridge had no rule for them: jQuery UI's lives in the stylesheet Bridge defers, and AdminThemeUikit's in its own. Bridge now defines them itself, so the notes sit under the buttons on every page.

Updating

Replace site/modules/AdminThemeBridge/ with the new version from https://github.com/theoretic/AdminThemeBridge (or git pull there), then Modules > Refresh. The full changelog is in the development repo at https://github.com/theoretic/bridge

If you skipped 0.9.6, this one includes it: confirmation dialogs on classic pages work again, and a module that prints text before the page no longer strips the admin's styles.

[theoretic]

AdminThemeBridge 0.11.3 is out

This is the biggest update since the first beta. It fixes a long list of bugs, makes the admin faster and easier to use with a keyboard, and adds a few features you have asked for, page scaling first among them. If you are on 0.9.7 or older, please update.

Thank you

This release exists because of your feedback here in the thread and by PM. Every report sent me back through the code, and after a while it was clear that a full review of the theme was due, not one fix at a time. Special thanks to @matjazp, whose reports and patient testing shaped much of this work. Thank you all, and please keep the reports coming.

New: interface scale

Two buttons left of the user menu make the whole admin smaller or larger, in steps from 75 % to 150 %. Everything scales together: text, spacing, form controls, the masthead, dialogs, tables and the page tree. On phones the buttons step aside for pinch zoom.

The light and dark switch moved out of the user menu and now sits next to the scale buttons. On small screens the menu button now sits right next to the logo, away from the buttons on the right.

Both settings are kept per user and per browser. If you share a browser with another editor, each of you keeps your own scale and scheme, and you can use a different scale on your laptop and on your big monitor. They apply before the page is painted, in dialogs too, and a change shows at once in your other open tabs.

New: every data table sorts

Click any column header in a core data table to sort it, with no page reload: field and template lists, log entries, a field's overrides, a page's redirects, tags and more. Headers show an arrow for the current order and work from the keyboard too. Numbers, dates and text with numbers in it sort the way you would expect. On a paged table, such as a log with more than 100 entries, the sort applies to the rows of the current page, and the header's tooltip says so.

The Lister keeps its own server-side sorting. Module authors can opt a table in or out with the hookable AdminThemeBridge::sortableDataTable().

Keyboard and screen readers

• Dropdown menus work with the arrow keys, and Escape closes them.
• Collapsible fields open and close with Enter or Space.
• Repeater controls are real buttons.
• Any drag-sorted list can be reordered with Alt+Arrow Up and Alt+Arrow Down: repeater items, files, images, asmSelect and page tables.
• Every link and control shows a focus ring.
• There is a "skip to content" link, and navigation, breadcrumbs and pagination are named landmarks.
• Notices are announced to screen readers.
• The "reduce motion" system setting is honoured everywhere.
• Printing a page prints every tab and every collapsed field.

Fixes worth knowing about

• A field value that contained the text $(document).ready(function() { was changed when the page was saved. If you keep code samples in textareas, this one matters.
• On a translated admin, a date picked in the date picker could be lost on save.
• On Add Page, typing a title could put a whole admin page under the name field.
• A repeater item that failed to load stayed empty until the page was reloaded. Failed requests now show a notice and leave no spinners behind.
• Changes made by the theme itself, such as sorting repeater items or files, now count as changes, so the "unsaved changes" warning and showIf dependencies see them.
• jQuery-based fields loaded by AJAX were sometimes set up twice: two rows per "Add" in the selector builder, two calendars on a date field.
• The Lister in minimal mode, link dialogs on multi-language sites, file fields loaded by AJAX and several smaller things work again.
• The version number is no longer shown to visitors who are not signed in.

Faster

Less work on every request and on every keystroke. Forms with many showIf and requiredIf rules react faster while you type, the server no longer re-reads the theme's files on each page, and the theme's assets are now cached by the browser for a year (on Apache with mod_headers; the nginx rule is in the development repo). Each new version gets new file URLs, so an update is picked up at once.

For module authors

The theme's code is now split into smaller files, but the class name and every hookable method are unchanged, so existing hooks keep working. Theme sizes are now in rem. Read a length in pixels with ProcessWireAdminTheme.cssLength(), and listen for the pw-scale-change event when the user changes the scale. The details are in docs/contract.md in the development repo.

Updating

Replace site/modules/AdminThemeBridge/ with the new version from https://github.com/theoretic/AdminThemeBridge (or run git pull there), then Modules > Refresh. The full changelog is in the development repo at https://github.com/theoretic/bridge

If you prefer darker field borders for stronger contrast, set the --pw-input-border variable in your admin CSS. The default stays light, to match the editors and buttons.

As always, if a module looks or behaves wrong under Bridge, post a screenshot and the module's name here 😉

[Markus Thomas]

@theoretic Thanks a lot for your work on AdminThemeBridge! I have been testing the module across three different installations and overall it runs really smoothly.

During testing I noticed two small visual issues that I wanted to share with you.

First, the chevron and navigation icons are not rendering properly in my setups. Instead of the expected arrows or icons in the dropdown navigation and the page tree, small empty square boxes appear as fallback glyphs. I attached a screenshot to illustrate where this happens.

Second, nested Repeater Matrix items look visually a bit confusing. When items are indented to show hierarchy, the background and border styling leaves an awkward white gap on the left side of the item header bar, which makes the structure somewhat hard to parse.

I added two screenshots to show both cases. Let me know if you need any additional details on the environment or the setup to reproduce this!

 

[theoretic]

@Markus Thomas, thank You! Nested repeaters is a rare case which I didn't investigate under Bridge yet. As to the icons, I couldn't reproduce the problem with my setup, and You're the first to report such problem. Please PM me with Your setup (hardware, OS, browser) -- this will help me to understand what's happening.

[theoretic]

Bridge 0.11.10: keyboard navigation, nesting on phones, and a batch of fixes

Since 0.11.3, Bridge (an admin theme based on ProcessWire) has had seven small releases. Most of them came from your feedback.

Special thanks to @matjazp, who sent me a long and detailed wishlist, mostly about keyboard navigation. Most of the keyboard changes below come from that list. Thanks also to @Markus Thomas, who found a couple of new bugs, now fixed.

Keyboard and focus

• Skip to content shows where it lands. It used to move only the starting point of the next Tab, so you couldn’t tell where you were until you pressed Tab again. Now it focuses the main area and draws a ring around the page head (breadcrumbs, head buttons, title). The next Tab goes to the first control there.
• Consistent focus rings. Links, page tree items and buttons have a 2px outline. Inputs, buttons and pills have a 2px halo (was 3px). Both widths are CSS tokens, --ring-width and --ring-halo, if you want to adjust them.
• The page tree’s focus ring is whole and even. A branch that limits its height used to clip the ring’s left side, and items without children had a wider left side. Both are fixed, and rows don’t move.
• Tab leaves a tag field (InputfieldTextTags, and the tags of file and image fields). If an option is highlighted, Tab still takes it, then moves to the next field instead of keeping the focus.

Nesting, touch screens and phones

I went through every core field that nests: fieldsets in fieldsets, repeaters with depth inside repeaters, FieldsetPage and page tables. I checked each at desktop and phone widths.

• Nested repeater items now draw their card from their indent, not across the full width. Collapsed repeater item headers are rounded on all corners.
• FieldsetPage no longer shows a frame inside its frame.
• On touch screens, repeater item controls sit beside the label instead of covering it.
• On phones, deep nesting keeps usable widths: smaller paddings, and a 16px indent per repeater depth level instead of 50px. At the deepest point of my test page, inputs went from 37px wide to full width.
• On phones, labels in checkbox tables wrap. A role’s template permissions used to run past their card.

Smaller fixes

• Sites on cores before 3.0.265: breadcrumb separators, submenu arrows and page tree carets showed as empty boxes, because those cores load Font Awesome 4.7. They now fall back to it.
• On screens without notices (Setup, the page tree, listings), the band above the title is now narrower. Closing a notice no longer makes the page jump.
• In InputfieldPageListSelect and InputfieldPageListSelectMultiple, icons have room around the title, and Change and Add line up with the label.
• Sort arrows on table headers are visible before you sort a column.
• The “more actions” chevron in the page tree is centred in its button, open or closed.

To upgrade, get the current version from https://github.com/theoretic/bridge and replace the module folder. The full changelog is in CHANGELOG.md. As always, keep the wishes and bug reports coming.

[theoretic]

AdminThemeBridge 0.13.3 is out

This is the first release that is mainly about UI/UX and productivity rather than bug fixing. The earlier releases were about making Bridge work everywhere a classic admin works. This one is about making everyday editing quicker and the admin calmer to look at. If you are on 0.11.3 or older, please update.

New: Add New can skip the template step

When you add a page under a parent whose children all use the same template, ProcessWire already suggests that template, but you still go through the Add New form. A new setting, "Step 2 if template auto-selected", lets Bridge skip that form and open the new page straight in the editor. It works the same when the parent allows only one template.

A notice tells you which template was used and why, with a link to the setting. The page starts unpublished, and its name comes from the title when you first save it. A page you leave without saving goes to the trash after a day, as with core's own quick add.

A template chosen in the link (Add New shortcuts, Save + Publish + Add Another) still shows the form. The setting is off by default: turn it on under Modules > Bridge > Features.

New: Save waits for uploads

Clicking Save while images were still uploading used to ask "Are you sure? An upload is currently in progress", and saying yes cut the upload off. Now Save simply waits until the uploads are done, then saves. The same goes for a repeater item being added or a field still loading.

The button shows a spinner while it waits. Click it again to save at once, or press Escape to stop waiting. This works in the page, user, field, template and module editors and in the profile, in modal windows too.

Upload progress in your colour

The spinner over an uploading image is gone. Instead, the strip along the bottom of the tile is a progress bar in your theme colour, and it turns red if the upload fails.

Settings in four groups

The theme's settings are now grouped as Users, Appearance, Features and Legacy, so the everyday options are no longer mixed with the compatibility ones. Your saved settings are unchanged.

A calmer admin

• No more dotted or dashed lines. The page you drag in the page tree is a rounded band with its content centred, and Cancel fits inside it. A file dragged over a field gets a solid ring. Table rows on phones, the gap left by a dragged image, the crop grid and empty slots in JSON fields all use solid lines now. Rich-text editors keep their own guides in the edited content.
• Image tiles: an image marked for deletion gets a thin red frame instead of a fully red tile, and the buttons and hover overlay have rounded corners.
• Screens without notices have a narrow band above the title instead of an empty notice row, so the page never jumps.
• Nested fields on phones: deep fieldsets and repeaters keep usable widths, FieldsetPage no longer draws a frame inside its frame, repeater controls stay clear of the label on touch screens, and checkbox tables wrap.
• Keyboard: the focus ring is even and rounded in the page tree, Tab leaves a tag field instead of staying in it, and "skip to content" now shows where it landed.

Fixes

• On ProcessWire versions before 3.0.265, breadcrumb separators, submenu arrows and page tree carets showed as empty boxes.
• Nested repeater items now start at their indent, and collapsed repeater headers are rounded on all corners.
• Sort arrows on table headers are visible before you sort a column.

I would love to hear from you

I always appreciate any feedback, and I stay open to new ideas. If something in your daily editing feels slower than it should, or you have a feature in mind, tell me here or by PM.

Updating

Replace site/modules/AdminThemeBridge/ with the new version from https://github.com/theoretic/AdminThemeBridge (or run git pull there), then Modules > Refresh. The full changelog is in the development repo at https://github.com/theoretic/bridge

As always, if a module looks or behaves wrong under Bridge, post a screenshot and the module's name here 😉

[theoretic]

AdminThemeBridge 0.17.0 is out

Hi everyone,

This time it's some UI/UX magic I've been dreaming about for a long time, and which, as far as I know, couldn't be done with the other existing admin themes.

Select several items, like in a file manager (0.14.0)

• This works in file fields, image fields and the page tree:
  • Ctrl+click (Cmd+click on a Mac) adds or removes an item.
  • Shift+click selects a range.
  • A rubber band drawn from the empty part of a list selects everything it touches.
  • Esc or a click outside clears the selection, and Ctrl+A selects the whole list.
• A plain click still does what it always did: it opens the image editor, or opens a page in the tree.
• Selected files and images drag together as one block. Marking one selected item for deletion marks them all.
• In the page tree, the rubber band can also start in the empty space to the left or right of the tree (0.15.1).

Drag files and images to another field of the same page (0.14.0)

• Drag items onto another file or image field. A ring on that field shows whether it takes all of them, some of them, or none.
• The move is saved at once, including any unsaved descriptions and tags. Files keep their names and dates.
• A field accepts what it would accept as an upload: its file types, its maximum number of files, and an image field's minimum size.
• An image moved to a file field becomes a plain file. A file that is an image can go to an image field.
• If a single-file field already holds a file, you choose: Replace, Swap or Leave.
• Fields inside one repeater item can exchange files the same way. Moves between the page and a repeater item are not supported yet.

Page tree: work with many pages at once (0.14.1 to 0.16.0)

• Selected pages next to each other form one band.
• Hovering any selected page shows one menu for the whole selection:
  • Hide, Unhide, Unpublish, Lock, Copy and Trash run on every selected page.
  • New opens the pages one after another in a dialog, with a Next page button.
  • Copy treats each page the way its own Copy would (0.15.3).
• The Move button is gone (0.16.0). You now drag a page by its title:
  • You can drop it between pages, into an open page, or onto the Trash.
  • A click without moving still opens or closes the page.
  • On a touch screen, hold the title for a moment, then drag. A swipe still scrolls.
  • Dragging a selected page brings the whole selection along.
  • Pages the server refuses to move go back where they were, with a single message saying why.

A warning before risky actions (0.15.0)

Before something is lost for good, a dialog says what will go, when, and whether it can be undone. Cancel has the focus, and the red button names the action. It asks before:

• a file or image replaces the one in a single-file field, or an upload overwrites a file of the same name;
• Save and Replace, B&W, Sepia or Reduce 50% in the image editor, or Delete Checked in the variations window;
• a comment is set to Delete, or a module is uninstalled;
• a published page is renamed while PagePathHistory is not installed;
• a page is sent to the Trash;
• images are moved to a plain file field, which deletes their sized copies;
• a filled-in new repeater item is removed.

It's on by default and can be turned off under Features. It works the same with and without the legacy script stack.

Tables sort only when it helps (0.17.0)

• A data table now sorts by its column headers only once it has at least 10 rows. Shorter tables show no sort arrows, so their headers stay plain.
• This applies to every table, including those a module made sortable itself. A table split into pages counts the rows on its page.
• The number is a new setting under Features, "Datatable sortable rows threshold". Set it to 0 to sort every table as before.

For module authors

• Bridge.confirm(opts) asks with the theme's dialog. Bridge.guard(opts) asks only while the warnings setting is on. Both return a promise.
• AdminThemeBridge::moveFiles() moves files from PHP.
• The hookable moveFileAllowed() can refuse a move, and filesMoved() runs after one.
• Fields dispatch a pw-files-moved event.
• AdminThemeBridge::getDataTableSortRows() returns the table threshold. A hook after sortableDataTable() can still make a shorter table sortable.

Leaving beta soon?

Since my last post there have been no user reports of bugs or suggested improvements. I take that as a sign the theme has become more robust and may leave the beta stage soon.

As always, I'm open to any suggestions you have for this module, so don't hesitate to write to me if you have some 😉

Updating

Replace site/modules/AdminThemeBridge/ with the new version from https://github.com/theoretic/AdminThemeBridge (or run git pull there), then Modules > Refresh. The full changelog is in the development repo at https://github.com/theoretic/bridge

[theoretic]

Bridge 0.22: a bridge to a safer ProcessWire admin

Hi all,

AdminThemeBridge 0.22.1 is out. This round was mostly about security.

Special thanks to @adrian, who opened an issue on the Bridge GitHub asking for enterprise-level security in the admin: a strict Content-Security-Policy with a per-request nonce and 'strict-dynamic', plus Trusted Types. As Adrian wrote, the classic admin stack isn’t a realistic place to do that work. Bridge, with its native core screens and one TypeScript codebase, turned out to be. So the Bridge is now becoming a bridge to a safer ProcessWire 😉

CSP and Trusted Types

• New hookable AdminThemeBridge::nonce(). Hook it to return your site’s nonce, and the theme puts it on every script, style and module preload it prints, and on the core inline scripts it recognises exactly. Unknown inline scripts never get it, so injected markup can’t borrow it.
• Scripts in content loaded later (AJAX fields, repeater items, Lister results, in-place saves) run only when they carry their response’s nonce.
• Every HTML write in the theme’s scripts goes through one Trusted Types policy, bridge. document.write is gone.
• New optional module BridgeCsp: it makes the nonce and sends the policy, off, report-only or enforced. Enforcement applies to native screens. Screens that load the legacy jQuery stack (jQuery-era Inputfields, CKEditor, TinyMCE, many third-party modules) stay report-only, since that code isn’t Bridge’s. BridgeCsp adds its header and never replaces a policy your site already sends.

Security fixes found along the way

Since this update was mainly about security, I audited the whole theme, and some security-related bugs turned up. All fixed:

• The nonce went on any inline script that merely started like a known core script. Now only exact matches get it.
• Fragments re-ran every script they contained, which a 'strict-dynamic' policy would have trusted. Now only scripts carrying the response’s nonce run.
• Moving files between fields skipped the page editor’s ajaxEditable() hook. Now it asks it, a swap checks both directions, and error details no longer reach the browser.
• The <html lang> attribute is escaped, user menu attributes are checked, and Add New’s quick add accepts same-origin requests only.
• Dialogs refuse javascript: URLs, and the theme’s cookies are SameSite, and Secure over HTTPS.

Your own colour

A small UI/UX improvement too: each user can now pick their preferred theme colour in the user menu, one of the five presets or any custom colour. It’s stored with the user, so it follows them to every device. The site’s colour stays the default, and a setting switches the picker off if you want everyone on the same colour.

There’s more in this round: keyboard and screen reader support for dialogs, tabs and the page tree, faster server responses, and a 158 kB icon font that no longer loads on every screen. The full list is in the changelog.

Install or update from the module repository. Feedback and issues are welcome on GitHub.

[dotnetic]

I really love this sleek and fast theme. Thank you for your work.

In one project I make extensive use of ProcessWires panels. But it seems they don't work with the Bridge theme. Also not if I select to rquire the legacy JS stack on every page load.

I get an error:

Uncaught ReferenceError: pwPanels is not defined
    at HTMLAnchorElement.<anonymous> (tabulator.default.js?v=2.0.0:46:10)
    at HTMLDocument.dispatch (JqueryCore.js?v=1.12.4:1:70090)
    at elemData.handle (JqueryCore.js?v=1.12.4:1:64653)

For example, I trigger them in a custom module like so:

$(document).on("click", ".pw-panel:not(pw-panel-init)", (e) => {
  e.preventDefault();
  const $el = $(e.target).closest(".pw-panel");
  $el.addClass("pw-panel-init");

  // setup link element
  const $a = $el.closest("a[href]");

  // add panel and trigger click
  $.when(pwPanels.addPanel($a)).then(() => {
    $a.click();
  });
  return false;
});

 

[MrSnoozles]

Hi @theoretic! Thanks for this huge effort. The theme is great.
A more modern admin UI is well appreciated. A few things I've noticed and a couple of suggestions:
 

- The language tabs don't have a border on top + I personally would like a single line underneath (where the part from the active tab is highlighted) more

- I can select multiple pages in the tree, but then I don't know what I can do with them. I see an action, but the way it's positioned it's not clear, that it belongs to all selected pages. I was hoping to see a toolbar pop up, for bulk actions. It should be placed outside the selected pages to be clearly recognizable as a toolbar for bulk actions. 
- the zoom controls are prominently placed, but most people will use them either never or at most once
- in my opinion it's lacking a bit of color to visualize hierarchy, especially on longer ProcessPageEdit pages. It's a bit too uniform white
- for repeater matrix blocks the icons are not vertically centered in the section

And one thing I would like to see in a future admin theme:
AdminThemeUikit has experimental settings to always display a page tree on the side. That's an amazing productivity gain, if it works correctly. Being able to switch from one page to another while editing pages can speed up so many workflows. Would be cool to have the option to have some tool-rail on the left or right side where the tree can be displayed and that remembers the open/closed state between pages.

Edited Monday at 02:48 PM by MrSnoozles

[theoretic]

@MrSnoozles, thank You for Your feedback! Unfortunately, I couldn't reproduce Your issues on my setup. Please PM me with Your setup (OS and browser) to make me understand well what's happening on Your side.

[theoretic]

AdminThemeBridge 0.24.1 is out

Hi everyone,

Two things made me especially happy this time.

I'm fascinated to see the first PW module author who decided to adapt his module to Bridge! phlppschrr, the author of FieldtypeFlex, sent two pull requests that make Bridge look better and fit module authors' needs better. Many thanks!

@matjazp, very consistent in his PMs about AdminThemeBridge's accessibility and UI imperfections, gave me another fresh kick. I'm always grateful to You, Matjaž!

From phlppschrr's pull requests (0.23.1, 0.24.0)

• In an image field's list view, opaque images no longer sit in big grey checkerboard triangles. The checkerboard stays on the image itself.
• Bridge.sortable(list, options): a native component can sort its own lists the way the core fields do, with the mouse, a touch hold, Alt+Up/Down and Esc. The sorting code loads on the first call.
• A subclass of InputfieldFile or InputfieldImage can run on Bridge's core file or image widget. It declares that in a nativeMap() hook ('widget' => 'InputfieldImage'), and Bridge starts the widget for it, also for AJAX content.
• Alt+Up/Down in a repeater inside a repeater moved the outer item too. Fixed.

Each user picks their own colour (0.22.0)

• The user menu now ends with a colour picker: the five presets, any custom colour, or "Site default". The page switches at once.
• The choice is saved with the user, so it follows them to every device. The site's colour stays the default and is what the login screen shows.
• It's on by default. Turn it off under Appearance, "Users choose their own colour".

Small things that add up (0.23.0)

• The scale buttons show the current scale in percent. A click on the number goes back to 100 %.
• In a long branch of the page tree, the pagination stays at the top left while you scroll.
• In the fields list, the checkboxes and Delete appear only after you press Select.
• Plain text links have the link colour, and are underlined on hover.
• Inline code and code blocks have a muted background and rounded corners.

Keyboard and screen readers (0.20.0 to 0.20.2)

• Dialogs take the focus once loaded. Escape, the close button and a click on the backdrop ask first if the form inside has unsaved changes.
• WireTabs and language tabs are real tab lists for screen readers, and the arrow keys, Home and End move between them.
• The mobile menu opens and closes from the keyboard and gives the focus back.
• Buttons that show only an icon now have names.
• In the page tree, Alt+Up and Alt+Down move a page among its siblings. In file, image and page tree lists, Ctrl+Space and Shift+Space select items.
• When the system asks for less motion, Bridge's own animations are left out too.
• On touch screens, a sortable list starts a drag after a short hold, so a swipe scrolls the page again.
• Every word the theme's scripts show can be translated.

Faster on the server (0.19.0)

The main menu is now kept in the session, as AdminThemeUikit does, along with a few smaller savings. Time to first byte on my sandbox:

• Page editor: 316 ms before, 285 ms now (Uikit 249 ms)
• Fields list: 204 ms before, 171 ms now (Uikit 150 ms)
• Page tree: 112 ms before, 93 ms now (Uikit 86 ms)

In the browser, the same screens spend 1 to 7 ms on scripts under Bridge, against 30 to 83 ms under Uikit. One more fix in 0.21.1: every screen used to fetch the full icon font (158 kB) on top of the small subset. Now it fetches only the subset.

Content-Security-Policy and Trusted Types (0.18.0 to 0.18.4)

• New hookable AdminThemeBridge::nonce(). Return your policy's nonce from it, and Bridge puts it on every script and style it prints and on the core inline scripts it knows.
• New optional module Bridge CSP, which makes a nonce per request and sends the policy: off, report only, or enforced.
• Every HTML string the theme writes goes through one Trusted Types policy, bridge.
• An enforced policy works on every screen that doesn't need the legacy jQuery stack. Screens that do need it get the policy as report only, so nobody gets locked out.

Many thanks to the reporter of issue 1 on GitHub, which started this.

Fixes

• ProcessWire's slide-in panels (pwPanels) work again whenever the legacy stack is loaded, so modules that open their own panels work as they do with Uikit (0.24.1). Thanks for the report!
• A save stopped by the browser's own validation no longer turns the next save into a classic one. A slow Lister answer no longer replaces a newer one. The page tree takes clicks again after an answer it can't use (0.18.5).
• No more listeners left behind when the page tree is reloaded in the editor's Children tab (0.18.6).
• Moves between file fields are checked the same way as core's own AJAX saves (0.18.2).

For module authors

• Bridge.sortable(list, options) and the widget key of the native map, see above.
• $adminTheme->nonceAttr() for inline scripts your module prints, including ones in AJAX markup.
• ProcessWireAdminTheme.trusted for writing HTML under Trusted Types.
• All of it is in the component contract (docs/contract.md in the development repo).

Updating

Replace site/modules/AdminThemeBridge/ with the new version from https://github.com/theoretic/AdminThemeBridge (or run git pull there), then Modules > Refresh. The full changelog is in the development repo at https://github.com/theoretic/bridge

As always, I'm open to any suggestions, so don't hesitate to write to me 😉

[theoretic]

Hi everyone,

AdminThemeBridge 0.26.1 is out. It brings two new drawers that you can open from any admin screen, plus a good portion of polishing.

New:

• Page tree drawer on every page, thanks to @MrSnoozles’ idea. A tree button next to the logo opens the page tree in a side drawer, so you don’t have to go back to the Pages screen. It is optional and can be switched off in the module settings.
• History drawer on every page, showing the recent screens you worked on in admin (pages, templates, fields, modules...), newest first. It is kept per user, so it is the same on every device, and it is also optional and can be switched off in the module settings.

Polishing:

• The history drawer got a Clear button, retries if loading failed, keeps your keyboard focus when it refreshes, and no longer makes duplicate entries for the same screen.
• A failed action on several selected tree rows (Hide, Unpublish, Trash...) now shows one alert instead of one per row.
• Dragging a file or image over a closed tab in the page editor opens that tab, so you can drop it into a field there.
• Touch screens: hold a file row, image tile or tree row to select it, then tap to add more.
• Fewer screens load the UIkit layer: more UIkit classes and icons used by AdminPageTool, PageTableNext, AgentTools, AdminPageDealers and RockMigrations are now covered by the theme itself.
• Fix: a page autocomplete inside (or just above) a repeater now actually picks and saves the page. Thanks for the report!
• Fix: no more console error in Firefox when leaving a page early.

Full details are in the CHANGELOG.

I still have very interesting ideas and proposals from those of you who use AdminThemeBridge, and I didn’t forget about them. Thank you friends 😉 The next update is planned to bring in more new features.