ranger/rangerhq-radio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(0.3.2): play-button glyph baseline — drop dashicon for Unicode ▶ / ‖

Browse Source 
The dashicon used for the play/pause icon was rendering visibly below
the button text — dashicon font metrics sit the glyph low inside its
own box, so even with `inline-flex` centering the symbol looked like
it was on a separate row from the word "Play".

Swap dashicons-controls-play / dashicons-controls-pause for plain
Unicode glyphs (▶ / ‖) which render on the text baseline like any
other character. Flex container changed to align-items: baseline.
font-variant-emoji: text on the glyph span to keep platforms that
might otherwise pick up an emoji variant of ▶ as monochrome text.

Files: radio.php (version), inc/admin-page.php +
inc/dashboard-widget.php (dashicon span → glyph span),
assets/css/radio.css (drop dashicon-sizing rule, add
.radio-player__play-glyph, baseline alignment),
assets/js/radio.js (setPlayIcon swaps glyph textContent instead of
dashicon className), inc/about.php (history entry).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
David Keane
2026-05-29 23:19:04 +01:00
parent 774e7f9958
commit a56fd7aff7
7 changed files with 39 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/radio.css
+12 -6
View File
@@ -80,17 +80,23 @@
}
.radio-player__play {
/* native .button .button-primary styling; just ensure icon aligns */
/* native .button .button-primary styling; just ensure glyph aligns */
display: inline-flex !important;
align-items: center;
align-items: baseline;
gap: 6px;
}
.radio-player__play .dashicons {
font-size: 14px;
width: 14px;
height: 14px;
/* Unicode play/pause glyph (not a dashicon — those sit low inside their
own font box and look like they're below the text baseline). A plain
▶ / ‖ glyph renders on the text baseline like any other character. */
.radio-player__play-glyph {
display: inline-block;
font-size: 11px;
line-height: 1;
/* Coerce to text rendering rather than colour-emoji on systems that
might otherwise pick up an emoji variant for ▶ / ‖. */
font-variant-emoji: text;
font-family: "Helvetica Neue", Arial, sans-serif;
}
.radio-player__volume {
assets/js/radio.js
+5 -3
View File
@@ -68,11 +68,13 @@
});
}
/** Update play/pause button icon + label to reflect current audio state. */
/** Update play/pause button glyph + label to reflect current audio state.
* v0.3.2: switched from .dashicons to a Unicode glyph so the symbol sits
* on the text baseline instead of below it. */
function setPlayIcon(btn, playing) {
var icon = btn.querySelector('.dashicons');
var glyph = btn.querySelector('[data-radio-play-glyph]');
var label = btn.querySelector('[data-radio-play-label]');
if (icon) { icon.className = 'dashicons ' + (playing ? 'dashicons-controls-pause' : 'dashicons-controls-play'); }
if (glyph) { glyph.textContent = playing ? '‖' : '▶'; } // ‖ or ▶
if (label) { label.textContent = playing ? (cfg.strings.pause || 'Pause') : (cfg.strings.play || 'Play'); }
btn.setAttribute('title', playing ? (cfg.strings.pause || 'Pause') : (cfg.strings.play || 'Play'));
}