From fed0816e9bccf5f316f9beebd3e3e25c1b32f7b7 Mon Sep 17 00:00:00 2001 From: vicrodh <103399283+vicrodh@users.noreply.github.com> Date: Mon, 14 Sep 2026 00:39:47 -0600 Subject: [PATCH] fix(qt): ambient mode reaches every chrome control MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Under the ambient field some controls still painted the opaque theme token while their neighbours used the half-alpha one: the album track filter and its select toggle, the Library tab strip's host, the Local Library icon selects, the header's active nav items and open playlists button, the queue sidebar's now-playing card and artwork placeholders, the Listen list's floating actions, and the shared SettingsButton, IconTextButton, multi-select bar, text area, load-more pill, tree row selection, sidebar count chips, Purchases tab strip, play-history filter box and Orbit banner. Each now takes the ambient-aware fill the header search and QbzTabBar already use (theme.ambientOn ? …A50 : …). Tooltips, popups and modals stay opaque on purpose: they are read over content, not chrome. cc --- crates/qbz-qt/qml/controls/IconTextButton.qml | 2 +- crates/qbz-qt/qml/controls/QbzLoadMore.qml | 2 +- crates/qbz-qt/qml/controls/QbzMultiSelectBar.qml | 2 +- crates/qbz-qt/qml/controls/QbzSearchField.qml | 3 ++- crates/qbz-qt/qml/controls/QbzTextArea.qml | 2 +- crates/qbz-qt/qml/controls/SettingsButton.qml | 2 +- crates/qbz-qt/qml/shell/HeaderBar.qml | 11 +++++++---- crates/qbz-qt/qml/shell/OrbitBanner.qml | 2 +- crates/qbz-qt/qml/shell/QueuePanel.qml | 7 ++++--- crates/qbz-qt/qml/shell/Sidebar.qml | 4 ++-- crates/qbz-qt/qml/views/AlbumView.qml | 3 ++- crates/qbz-qt/qml/views/PlayHistoryView.qml | 2 +- crates/qbz-qt/qml/views/PurchasesView.qml | 2 +- crates/qbz-qt/qml/views/QueueView.qml | 4 ++-- crates/qbz-qt/qml/views/library/LibraryToolbar.qml | 6 ++++-- crates/qbz-qt/qml/views/local/LocalIconSelect.qml | 2 +- crates/qbz-qt/qml/views/local/TreeRow.qml | 2 +- 17 files changed, 33 insertions(+), 25 deletions(-) diff --git a/crates/qbz-qt/qml/controls/IconTextButton.qml b/crates/qbz-qt/qml/controls/IconTextButton.qml index ae4e4bc42..738ff7763 100644 --- a/crates/qbz-qt/qml/controls/IconTextButton.qml +++ b/crates/qbz-qt/qml/controls/IconTextButton.qml @@ -36,7 +36,7 @@ Rectangle { radius: theme.radiusSm border.width: 1 border.color: theme.borderSubtle - color: hoverArea.containsMouse && root.btnEnabled ? theme.surfaceHover : theme.surfaceElevated + color: hoverArea.containsMouse && root.btnEnabled ? theme.surfaceHover : (theme.ambientOn ? theme.surfaceElevatedA50 : theme.surfaceElevated) opacity: root.btnEnabled ? 1.0 : 0.4 Row { diff --git a/crates/qbz-qt/qml/controls/QbzLoadMore.qml b/crates/qbz-qt/qml/controls/QbzLoadMore.qml index 8a4329d75..733c1b2e8 100644 --- a/crates/qbz-qt/qml/controls/QbzLoadMore.qml +++ b/crates/qbz-qt/qml/controls/QbzLoadMore.qml @@ -181,7 +181,7 @@ Column { width: pillText.implicitWidth + 36 height: 32 radius: theme.radiusSm - color: pillArea.containsMouse ? theme.surfaceElevated : theme.surfaceCard + color: pillArea.containsMouse ? theme.surfaceElevated : (theme.ambientOn ? theme.surfaceCardA50 : theme.surfaceCard) border.width: 1 border.color: theme.borderSubtle Text { diff --git a/crates/qbz-qt/qml/controls/QbzMultiSelectBar.qml b/crates/qbz-qt/qml/controls/QbzMultiSelectBar.qml index 4af9028ad..506f52168 100644 --- a/crates/qbz-qt/qml/controls/QbzMultiSelectBar.qml +++ b/crates/qbz-qt/qml/controls/QbzMultiSelectBar.qml @@ -47,7 +47,7 @@ Rectangle { height: 44 radius: 8 - color: theme.surfaceElevated + color: (theme.ambientOn ? theme.surfaceElevatedA50 : theme.surfaceElevated) Row { anchors.fill: parent diff --git a/crates/qbz-qt/qml/controls/QbzSearchField.qml b/crates/qbz-qt/qml/controls/QbzSearchField.qml index 263474576..fc01332bf 100644 --- a/crates/qbz-qt/qml/controls/QbzSearchField.qml +++ b/crates/qbz-qt/qml/controls/QbzSearchField.qml @@ -32,7 +32,8 @@ Rectangle { implicitWidth: 168 implicitHeight: 34 radius: 6 - color: theme.surfaceElevated + // The header search's ambient-aware fill, so every search box reads alike. + color: (theme.ambientOn ? theme.surfaceElevatedA50 : theme.surfaceElevated) border.width: 1 border.color: input.activeFocus ? theme.accent : theme.borderSubtle diff --git a/crates/qbz-qt/qml/controls/QbzTextArea.qml b/crates/qbz-qt/qml/controls/QbzTextArea.qml index 03ce073ee..67bbe2c57 100644 --- a/crates/qbz-qt/qml/controls/QbzTextArea.qml +++ b/crates/qbz-qt/qml/controls/QbzTextArea.qml @@ -33,7 +33,7 @@ Rectangle { width: 240 height: 96 radius: theme.radiusSm - color: theme.surfaceElevated + color: (theme.ambientOn ? theme.surfaceElevatedA50 : theme.surfaceElevated) border.width: 1 border.color: input.activeFocus ? theme.accent : theme.borderSubtle diff --git a/crates/qbz-qt/qml/controls/SettingsButton.qml b/crates/qbz-qt/qml/controls/SettingsButton.qml index 6aba6e94a..6821ebaf7 100644 --- a/crates/qbz-qt/qml/controls/SettingsButton.qml +++ b/crates/qbz-qt/qml/controls/SettingsButton.qml @@ -36,7 +36,7 @@ Rectangle { border.width: root.activeFocus ? 2 : 1 border.color: root.activeFocus ? theme.accent : (danger ? theme.danger : theme.borderSubtle) - color: enabled && btnArea.containsMouse ? theme.surfaceHover : theme.surfaceElevated + color: enabled && btnArea.containsMouse ? theme.surfaceHover : (theme.ambientOn ? theme.surfaceElevatedA50 : theme.surfaceElevated) opacity: enabled ? 1.0 : 0.4 activeFocusOnTab: enabled Accessible.role: Accessible.Button diff --git a/crates/qbz-qt/qml/shell/HeaderBar.qml b/crates/qbz-qt/qml/shell/HeaderBar.qml index c5a994f5b..f02362947 100644 --- a/crates/qbz-qt/qml/shell/HeaderBar.qml +++ b/crates/qbz-qt/qml/shell/HeaderBar.qml @@ -63,6 +63,9 @@ Rectangle { // HeaderBar.slint's with-alpha(app-background-surface-alpha)). color: ambientOn ? theme.surfaceCardA50 : theme.surfaceCard readonly property bool ambientOn: theme.ambientOn + /// The fill of an ACTIVE nav item / open button: elevated, at half alpha + /// under the ambient field like every other chrome control. + readonly property color activeFill: root.ambientOn ? theme.surfaceElevatedA50 : theme.surfaceElevated /// Raised by the app menu's "Report an issue" row; AppShell owns the modal. @@ -312,7 +315,7 @@ Rectangle { height: 30 width: purchaseRow.implicitWidth radius: theme.radiusSm - color: purchaseTab.isActive ? theme.surfaceElevated + color: purchaseTab.isActive ? root.activeFill : purchaseArea.containsMouse ? theme.surfaceHover : "transparent" Row { @@ -363,7 +366,7 @@ Rectangle { width: tabRow.implicitWidth radius: theme.radiusSm opacity: isEnabled ? 1.0 : 0.5 - color: isActive ? theme.surfaceElevated + color: isActive ? root.activeFill : (tabArea.containsMouse && isEnabled) ? theme.surfaceHover : "transparent" Row { @@ -439,7 +442,7 @@ Rectangle { height: 30 radius: theme.radiusSm opacity: isEnabled ? 1.0 : 0.5 - color: isActive ? theme.surfaceElevated + color: isActive ? root.activeFill : (cnbArea.containsMouse && isEnabled) ? theme.surfaceHover : "transparent" // Baked glyph, or the section's own raw image when it carries one // (My QBZ branding) — see shell/NavSectionGlyph.qml. @@ -640,7 +643,7 @@ Rectangle { height: 30 radius: theme.radiusSm anchors.verticalCenter: parent.verticalCenter - color: plPopup.opened ? theme.surfaceElevated + color: plPopup.opened ? root.activeFill : plBtnArea.containsMouse ? theme.surfaceHover : "transparent" QbzIcon { name: "list-music" diff --git a/crates/qbz-qt/qml/shell/OrbitBanner.qml b/crates/qbz-qt/qml/shell/OrbitBanner.qml index 7325e1aef..a1ed412dc 100644 --- a/crates/qbz-qt/qml/shell/OrbitBanner.qml +++ b/crates/qbz-qt/qml/shell/OrbitBanner.qml @@ -12,7 +12,7 @@ Rectangle { property string hostName: "" visible: remoteActive height: remoteActive ? Math.max(38, label.implicitHeight + 16) : 0 - color: theme.surfaceElevated + color: (theme.ambientOn ? theme.surfaceElevatedA50 : theme.surfaceElevated) border.width: 1 border.color: theme.accent Accessible.role: Accessible.StaticText diff --git a/crates/qbz-qt/qml/shell/QueuePanel.qml b/crates/qbz-qt/qml/shell/QueuePanel.qml index eb9dd76b6..f9bd286c9 100644 --- a/crates/qbz-qt/qml/shell/QueuePanel.qml +++ b/crates/qbz-qt/qml/shell/QueuePanel.qml @@ -429,7 +429,7 @@ Rectangle { height: 34 radius: 4 anchors.verticalCenter: parent.verticalCenter - color: theme.surfaceElevated + color: (theme.ambientOn ? theme.surfaceElevatedA50 : theme.surfaceElevated) // No clip: RoundedImage self-confines. One batch root per // visible queue row. RoundedImage { @@ -893,7 +893,8 @@ Rectangle { width: parent.width height: 44 radius: theme.radiusSm - color: theme.surfaceElevated + // Ambient-aware: the one opaque card left in a translucent sidebar. + color: (theme.ambientOn ? theme.surfaceElevatedA50 : theme.surfaceElevated) Row { anchors.fill: parent anchors.leftMargin: 6 @@ -906,7 +907,7 @@ Rectangle { height: 34 radius: 4 anchors.verticalCenter: parent.verticalCenter - color: theme.surfaceCard + color: (theme.ambientOn ? theme.surfaceCardA50 : theme.surfaceCard) // No clip: RoundedImage self-confines. RoundedImage { anchors.fill: parent diff --git a/crates/qbz-qt/qml/shell/Sidebar.qml b/crates/qbz-qt/qml/shell/Sidebar.qml index 364dc467e..3529ea280 100644 --- a/crates/qbz-qt/qml/shell/Sidebar.qml +++ b/crates/qbz-qt/qml/shell/Sidebar.qml @@ -1009,7 +1009,7 @@ Rectangle { anchors.verticalCenter: parent.verticalCenter height: 22 radius: 4 - color: theme.surfaceElevated + color: (theme.ambientOn ? theme.surfaceElevatedA50 : theme.surfaceElevated) border.width: 1 border.color: theme.borderSubtle TextInput { @@ -1286,7 +1286,7 @@ Rectangle { width: parent.width - 4 * 26 height: 22 radius: 4 - color: theme.surfaceElevated + color: (theme.ambientOn ? theme.surfaceElevatedA50 : theme.surfaceElevated) border.width: 1 border.color: theme.borderSubtle TextInput { diff --git a/crates/qbz-qt/qml/views/AlbumView.qml b/crates/qbz-qt/qml/views/AlbumView.qml index 5b50fcc2f..feb59b0ed 100644 --- a/crates/qbz-qt/qml/views/AlbumView.qml +++ b/crates/qbz-qt/qml/views/AlbumView.qml @@ -1591,7 +1591,8 @@ Rectangle { height: 30 radius: 6 anchors.verticalCenter: parent.verticalCenter - color: selectToggleArea.containsMouse ? theme.surfaceHover : theme.surfaceElevated + color: selectToggleArea.containsMouse ? theme.surfaceHover + : (theme.ambientOn ? theme.surfaceElevatedA50 : theme.surfaceElevated) border.width: 1 border.color: root.multiSelect ? theme.accent : theme.borderSubtle QbzIcon { diff --git a/crates/qbz-qt/qml/views/PlayHistoryView.qml b/crates/qbz-qt/qml/views/PlayHistoryView.qml index 4a52bbff8..0e6ffdaf2 100644 --- a/crates/qbz-qt/qml/views/PlayHistoryView.qml +++ b/crates/qbz-qt/qml/views/PlayHistoryView.qml @@ -103,7 +103,7 @@ Rectangle { radius: 6 border.width: 1 border.color: theme.borderSubtle - color: theme.surfaceElevated + color: (theme.ambientOn ? theme.surfaceElevatedA50 : theme.surfaceElevated) Row { anchors.fill: parent diff --git a/crates/qbz-qt/qml/views/PurchasesView.qml b/crates/qbz-qt/qml/views/PurchasesView.qml index c6d71c45b..08d71aaed 100644 --- a/crates/qbz-qt/qml/views/PurchasesView.qml +++ b/crates/qbz-qt/qml/views/PurchasesView.qml @@ -355,7 +355,7 @@ Rectangle { required property var modelData width: Math.max(96, kioskTabLabel.implicitWidth + 24) height: 64 - color: root.tab === modelData.id ? theme.surfaceElevated : "transparent" + color: root.tab === modelData.id ? (theme.ambientOn ? theme.surfaceElevatedA50 : theme.surfaceElevated) : "transparent" Text { id: kioskTabLabel; anchors.centerIn: parent; text: parent.modelData.label; color: theme.textPrimary; font.pixelSize: 18 } MouseArea { anchors.fill: parent; onClicked: QbzPurchases.setTab(parent.modelData.id) } } diff --git a/crates/qbz-qt/qml/views/QueueView.qml b/crates/qbz-qt/qml/views/QueueView.qml index b7c8d2f71..e6c71d03b 100644 --- a/crates/qbz-qt/qml/views/QueueView.qml +++ b/crates/qbz-qt/qml/views/QueueView.qml @@ -885,7 +885,7 @@ Rectangle { width: root.kioskHost ? 64 : 36 height: root.kioskHost ? 64 : 36 radius: theme.radiusSm - color: theme.surfaceCard + color: (theme.ambientOn ? theme.surfaceCardA50 : theme.surfaceCard) border.width: 1 border.color: root.followPlaying ? theme.accent : theme.borderSubtle @@ -908,7 +908,7 @@ Rectangle { width: root.kioskHost ? 64 : 36 height: root.kioskHost ? 64 : 36 radius: theme.radiusSm - color: theme.surfaceCard + color: (theme.ambientOn ? theme.surfaceCardA50 : theme.surfaceCard) border.width: 1 border.color: theme.borderSubtle QbzIconButton { diff --git a/crates/qbz-qt/qml/views/library/LibraryToolbar.qml b/crates/qbz-qt/qml/views/library/LibraryToolbar.qml index 619ef3d43..37e49ecde 100644 --- a/crates/qbz-qt/qml/views/library/LibraryToolbar.qml +++ b/crates/qbz-qt/qml/views/library/LibraryToolbar.qml @@ -82,7 +82,7 @@ Item { width: 30 height: 30 radius: 6 - color: active ? theme.surfaceElevated + color: active ? (theme.ambientOn ? theme.surfaceElevatedA50 : theme.surfaceElevated) : ttArea.containsMouse ? theme.surfaceHover : "transparent" QbzIcon { name: parent.name @@ -234,7 +234,9 @@ Item { y: 25 - height / 2 width: tabRow.width height: tabRow.height - color: theme.surfaceElevated + // Ambient-aware like the tab bar it hosts (the strip read opaque + // under the ambient field while Discover's and Local's had alpha). + color: (theme.ambientOn ? theme.surfaceElevatedA50 : theme.surfaceElevated) radius: 6 Row { id: tabRow diff --git a/crates/qbz-qt/qml/views/local/LocalIconSelect.qml b/crates/qbz-qt/qml/views/local/LocalIconSelect.qml index 1042b0e16..2b85c1310 100644 --- a/crates/qbz-qt/qml/views/local/LocalIconSelect.qml +++ b/crates/qbz-qt/qml/views/local/LocalIconSelect.qml @@ -40,7 +40,7 @@ Item { radius: 6 border.width: 1 border.color: root.marked ? theme.accent : theme.borderSubtle - color: btnArea.containsMouse ? theme.surfaceHover : theme.surfaceElevated + color: btnArea.containsMouse ? theme.surfaceHover : (theme.ambientOn ? theme.surfaceElevatedA50 : theme.surfaceElevated) QbzIcon { name: root.iconName width: 15 diff --git a/crates/qbz-qt/qml/views/local/TreeRow.qml b/crates/qbz-qt/qml/views/local/TreeRow.qml index 6fff7fa07..18e94645d 100644 --- a/crates/qbz-qt/qml/views/local/TreeRow.qml +++ b/crates/qbz-qt/qml/views/local/TreeRow.qml @@ -35,7 +35,7 @@ Rectangle { height: 26 radius: 6 - color: selected ? theme.surfaceElevated + color: selected ? (theme.ambientOn ? theme.surfaceElevatedA50 : theme.surfaceElevated) : rowArea.containsMouse ? theme.surfaceHover : "transparent" // Row body — declared FIRST so the chevron / checkbox win their clicks.