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/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'));
}