Repository navigation
fix(themes): skin jQuery multiselect in Deepness and fix 3.x markup in four themes (develop) - #8443
Conversation
…n four themes Deepness: main.css repainted select2 onto its --dp-* palette but never the jQuery multiselect button or popup menu, so those fell through to the jquery-ui.css textured surfaces and the generic uppercase button rule and looked like the Dark theme. Repaint them to match the select2 controls. Cacti, Carrot, Hollyberry, Raspberry: these themes ship the old 1.x jquery.multiselect.css while include/js/jquery.multiselect.js is 3.x, so optgroup menus showed list bullets, a nested indent, compounded 0.9em option text and an unstyled group label. Add the missing 3.x rules. All changes extend each theme's main.css; the stock jquery.multiselect.css files are left untouched. Reported in Cacti/plugin_flowview#298. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
There was a problem hiding this comment.
🟡 Changes recommended
Deepness’s existing important corner reset overrides the new button radius, preventing the intended match with select2.
1 open issue
What changed in this PR
Updates Cacti’s theme styles so jQuery multiselect matches Deepness’s palette and renders bundled 3.x markup correctly in four other themes.
Changes:
- Styles Deepness multiselect buttons, menus, headers, and option states.
- Adds missing optgroup and label rules to Cacti, Carrot, Hollyberry, and Raspberry without modifying stock plugin stylesheets.
- Records both fixes in the changelog.
| File | Description |
|---|---|
| include/themes/raspberry/main.css | Adds multiselect 3.x layout rules. |
| include/themes/hollyberry/main.css | Adds multiselect 3.x layout rules. |
| include/themes/deepness/main.css | Applies Deepness colors and control styling to multiselect. |
| include/themes/carrot/main.css | Adds multiselect 3.x layout rules. |
| include/themes/cacti/main.css | Adds multiselect 3.x layout rules. |
| CHANGELOG | Documents the theme fixes. |
Review effort: Balanced
- Move the CHANGELOG entries into changelog.d/8443.issue, as develop expects fragments rather than direct CHANGELOG edits. - Drop the Deepness multiselect border-radius; .ui-corner-all forces border-radius with !important in this theme, so it never applied. - Add Chromium computed-style tests for the new multiselect rules in Deepness, Cacti, Carrot, Hollyberry and Raspberry so the changed CSS lines are exercised by the theme correctness suite. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
|
somethingwithproof
left a comment
somethingwithproof
left a comment
There was a problem hiding this comment.
The Deepness part looks good.
Issue: the 3.x backfill for Cacti, Carrot, Hollyberry and Raspberry leaves out .ui-multiselect-columns { display: inline-block; vertical-align: top; }. Six develop call sites use groupColumns: true: the consolidation function picker in data_source_profiles.php and the schedule pickers in lib/api_scheduler.php. In those four themes each item still renders as a full-width block. On the data source profile picker (height: 28, menuWidth: 400) that means one visible option and a scrollbar instead of a row of 90px items. The collapser rules (groupsCollapsable) and the nowrap rules are missing too, though nothing in core uses those today. The new spec doesn't render groupColumns markup, so it doesn't catch this.
Suggestion: the four themes ship the same 1.x jquery.multiselect.css, and modern, dark and deepness ship the same 3.x file. Copying that 3.x file into the four themes fixes the gap above in one step, replacing four identical 35-line blocks in main.css. Colors would still come from each theme's jquery-ui.css.
Nit: computedStyles() could use getComputedStyle(element).getPropertyValue('background-color') with kebab-case names and drop the as any.
Summary
Fixes the core theme gap noted in Cacti/plugin_flowview#298 (the Deepness theme does not skin jQuery multiselect). It also fixes a related multiselect defect found while checking every theme on develop.
Deepness
Deepness's
main.cssalready repaints select2 onto its--dp-*palette. It never repaints the jQuery multiselect button or popup menu. Those fell through to:.ui-widget-contentand gradient.ui-widget-headersurfaces fromjquery-ui.cssbuttonrule, which forces uppercase textso multiselect controls rendered like the Dark theme.
The button, menu, header, labels (hover, active and disabled) and group labels are now repainted to match the select2 colors. The button's corners follow the theme's
.ui-corner-all { border-radius: 0px !important }rule, like the other jQuery UI widgets. They use develop's select2 colors (--dp-headerfor hover,--dp-panel-altfor selected). The existing.ui-multiselect-headerrule now sets a fullbackgroundso the jQuery UI gradient image no longer shows through.Cacti, Carrot, Hollyberry, Raspberry
These four themes ship the old 1.x
jquery.multiselect.css, whileinclude/js/jquery.multiselect.jsis 3.x. The 3.x optgroup markup therefore rendered with:<ul>indent0.9emoption textThe missing 3.x rules are added (
list-style, the optgroup font-size and padding, label indent, single-select indent,.ui-multiselect-grouplabel). Colors still come from each theme's ownjquery-ui.css.All changes extend each theme's
main.css. The stockjquery.multiselect.cssfiles are not modified.CHANGELOG and tests
changelog.d/8443.issue, as develop expects fragments rather than direct CHANGELOG edits.tests/e2e/tests/develop-theme-correctness.spec.tsadds Chromium computed-style tests. They render the jquery.multiselect 3.x button and menu markup against Deepness and the four themes above, with each theme's stockjquery.multiselect.cssloaded first. The changed-CSS coverage gate reports 143/143 changed lines covered.Verification
Rendered the multiselect (open menu, hovered button), select2 and selectmenu in a harness that loads each theme's CSS in
html_common_header()order. Compared before and after screenshots:jquery-ui.css.jquery-ui.midwinter.css(checked in dark and light).1.2.x counterpart: #8442 (only Deepness is affected there).