mirror of
https://github.com/Psychotoxical/psysonic.git
synced 2026-07-22 15:25:46 +00:00
fix(ui): consolidate Orbit / Server / Live header dropdowns (#725)
* fix(ui): consolidate Orbit / Server / Live header dropdowns The three header dropdown popovers each had their own container style. Live used a glass utility class with backdrop-filter that read poorly on many themes (reported by cucadmuh). Move all three onto the shared `.nav-library-dropdown-panel` container — same bg, border, shadow and radius via existing semantic tokens (`--bg-card`, `--border-dropdown`, `--shadow-dropdown`, `--radius-md`). Item styles per dropdown stay case-specific. - NowPlayingDropdown: replace `glass animate-fade-in` with `nav-library-dropdown-panel animate-fade-in`; drop now-redundant inline borderRadius / boxShadow / zIndex; keep padding + gap for the user-list breathing room. - OrbitStartTrigger: add `nav-library-dropdown-panel` alongside `orbit-launch-pop`. The component-local class is now reduced to the menu-specific min-width + tighter item gap; bg / border / shadow / radius / padding inherit from the shared container. - Drop the unused `.glass` utility class; no other call sites. * docs(changelog): header dropdown consistency fix (#725)
This commit is contained in:
committed by
GitHub
parent
ccf4d5d8cb
commit
c16134dab5
@@ -534,6 +534,12 @@ Foundational work: faster reviews, narrower diffs, and a safety net under the pa
|
|||||||
|
|
||||||
* The global **`selectstart`** handler assumed `event.target` was always an **`Element`**. Starting selection inside text (e.g. Now Playing **`[data-selectable]`** copy) could pass a **Text** node and crash with **`target.closest is not a function`**. The handler now resolves Text nodes to their parent element before applying allow/deny rules.
|
* The global **`selectstart`** handler assumed `event.target` was always an **`Element`**. Starting selection inside text (e.g. Now Playing **`[data-selectable]`** copy) could pass a **Text** node and crash with **`target.closest is not a function`**. The handler now resolves Text nodes to their parent element before applying allow/deny rules.
|
||||||
|
|
||||||
|
### UI — consistent Orbit / Server / Live header dropdown styling
|
||||||
|
|
||||||
|
**By [@Psychotoxical](https://github.com/Psychotoxical) + [@cucadmuh](https://github.com/cucadmuh), PR [#725](https://github.com/Psychotoxical/psysonic/pull/725)**
|
||||||
|
|
||||||
|
* The three header dropdowns (Orbit launch, Server picker, Live listeners) each had their own container styling. Live in particular used a glass / backdrop-filter utility that read poorly on many themes. All three now share the **`.nav-library-dropdown-panel`** container — same background, border, shadow and radius via the existing semantic tokens. Item layouts per dropdown stay case-specific.
|
||||||
|
|
||||||
## [1.45.0] - 2026-05-04
|
## [1.45.0] - 2026-05-04
|
||||||
|
|
||||||
## Added
|
## Added
|
||||||
|
|||||||
@@ -121,7 +121,7 @@ export default function NowPlayingDropdown() {
|
|||||||
{isOpen && createPortal(
|
{isOpen && createPortal(
|
||||||
<div
|
<div
|
||||||
ref={panelRef}
|
ref={panelRef}
|
||||||
className="glass animate-fade-in"
|
className="nav-library-dropdown-panel animate-fade-in"
|
||||||
style={{
|
style={{
|
||||||
position: 'fixed',
|
position: 'fixed',
|
||||||
top: panelPos.top,
|
top: panelPos.top,
|
||||||
@@ -129,13 +129,8 @@ export default function NowPlayingDropdown() {
|
|||||||
width: `${PANEL_WIDTH}px`,
|
width: `${PANEL_WIDTH}px`,
|
||||||
maxHeight: '400px',
|
maxHeight: '400px',
|
||||||
overflowY: 'auto',
|
overflowY: 'auto',
|
||||||
borderRadius: '12px',
|
|
||||||
boxShadow: 'var(--shadow-lg)',
|
|
||||||
padding: '1rem',
|
padding: '1rem',
|
||||||
zIndex: 10050,
|
gap: '1rem',
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
gap: '1rem'
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid var(--border-subtle)', paddingBottom: '0.5rem' }}>
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid var(--border-subtle)', paddingBottom: '0.5rem' }}>
|
||||||
|
|||||||
@@ -82,7 +82,7 @@ export default function OrbitStartTrigger() {
|
|||||||
</button>
|
</button>
|
||||||
|
|
||||||
{popoverOpen && createPortal(
|
{popoverOpen && createPortal(
|
||||||
<div ref={popRef} className="orbit-launch-pop" style={popoverStyle} role="menu">
|
<div ref={popRef} className="nav-library-dropdown-panel orbit-launch-pop" style={popoverStyle} role="menu">
|
||||||
<button type="button" className="orbit-launch-pop__item" onClick={pickCreate}>
|
<button type="button" className="orbit-launch-pop__item" onClick={pickCreate}>
|
||||||
<Plus size={14} />
|
<Plus size={14} />
|
||||||
<span>{t('orbit.launchCreate')}</span>
|
<span>{t('orbit.launchCreate')}</span>
|
||||||
|
|||||||
@@ -432,16 +432,12 @@
|
|||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Launch popover — three-option menu anchored below the topbar trigger. */
|
/* Launch popover — three-option menu anchored below the topbar trigger.
|
||||||
|
Container (bg / border / shadow / radius / padding) comes from the shared
|
||||||
|
`.nav-library-dropdown-panel` class; this rule only adds the menu-specific
|
||||||
|
min-width and tighter item gap. */
|
||||||
.orbit-launch-pop {
|
.orbit-launch-pop {
|
||||||
min-width: 220px;
|
min-width: 220px;
|
||||||
padding: 6px;
|
|
||||||
background: var(--ctp-base, #1e1e2e);
|
|
||||||
border: 1px solid color-mix(in srgb, var(--accent) 22%, rgba(255,255,255,0.1));
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 2px;
|
gap: 2px;
|
||||||
}
|
}
|
||||||
.orbit-launch-pop__item {
|
.orbit-launch-pop__item {
|
||||||
|
|||||||
@@ -1,11 +1,4 @@
|
|||||||
/* ─── Utility Classes ─── */
|
/* ─── Utility Classes ─── */
|
||||||
.glass {
|
|
||||||
background: var(--bg-glass, rgba(30, 30, 46, 0.75));
|
|
||||||
backdrop-filter: blur(20px);
|
|
||||||
-webkit-backdrop-filter: blur(20px);
|
|
||||||
border: 1px solid var(--border-subtle);
|
|
||||||
}
|
|
||||||
|
|
||||||
.gradient-text {
|
.gradient-text {
|
||||||
background: linear-gradient(135deg, var(--ctp-mauve), var(--ctp-blue));
|
background: linear-gradient(135deg, var(--ctp-mauve), var(--ctp-blue));
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
|
|||||||
Reference in New Issue
Block a user