Skip to content

Redesign pmahomme theme with SVG icons - #20538

Open
PrimeTestLab wants to merge 1 commit into
phpmyadmin:masterfrom
PrimeTestLab:design-update
Open

PrimeTestLab wants to merge 1 commit into
phpmyadmin:masterfrom
PrimeTestLab:design-update

Conversation

@PrimeTestLab

@PrimeTestLab PrimeTestLab commented Oct 18, 2026 •

Copy link
Copy Markdown

Description

Replace the 171 PNG icons of the pmahomme theme with SVG icons, so
they stay sharp on high-resolution screens and at any zoom level.
Each icon is an inline SVG in the theme's CSS (not a sprite, unlike
the reverted #18789), keeps the colours of the image it replaces and
is aligned with the text next to it. Tested in Edge (Chromium).

Other changes to the theme:

  • Top menu tabs wrap onto a new row instead of using the "More" menu
  • Shorter breadcrumb bar with evenly spaced icons on the right
  • The navigation panel slides in and out with a short animation and
    cannot be dragged open while hidden
  • Drop-down lists get a custom picker with an animated arrow
    (falls back to the native list where appearance: base-select is
    not supported)
  • The login form gets a show/hide password button and locks its
    fields while logging in
  • Slim custom page scrollbar

Old vs new icons:
icons-all-old-vs-new0

Related to #11392
Discussion: #20537

Before submitting pull request, please review the following checklist:

  • Make sure you have read our CONTRIBUTING.md document.
  • Make sure you are making a pull request against the correct branch. For example, for bug fixes in a released version use the corresponding QA branch and for new features use the master branch. If you have a doubt, you can ask as a comment in the bug report or on the mailing list.
  • Every commit has proper Signed-off-by line as described in our DCO. This ensures that the work you're submitting is your own creation.
  • Every commit has a descriptive commit message.
  • Every commit is needed on its own, if you have just minor fixes to previous commits, you can squash them.
  • Any new functionality is covered by tests.

Replace the PNG icons of the pmahomme theme with SVG icons. Each
icon keeps the colours of the image it replaces and is aligned with
the text next to it, so the theme stays sharp on every screen and
zoom level.

Icons
- All theme icon classes, the top menu tabs and the breadcrumb
- Navigation panel links, tree items and tree controls
- Page actions, messages, pagination and sorting

Top bar
- Shorter breadcrumb bar with evenly spaced account, settings and
  back-to-top icons
- Tabs wrap onto a new row instead of hiding in a "More" menu, and
  each row is filled to the edge

Navigation panel
- Slides in and out with a short animation
- New collapser button that matches the height of the top bar
- A hidden panel opens only with the button, not by dragging

Forms
- Drop-down lists use a custom picker with a turning arrow, an
  animated open and close, and a slim scrollbar
- Login form has a show/hide password button and locks its fields
  while logging in

Other
- Slim custom page scrollbar

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Signed-off-by: PrimeTestLab <arifkhann5321@gmail.com>
@PrimeTestLab

Copy link
Copy Markdown
Author

I am waiting for your response.

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.

2 participants