Joren/qbz
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(qt): ambient mode reaches every chrome control

Browse Source 
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
This commit is contained in:
vicrodh committed 2026-09-14 00:39:47 -06:00
1 parent a75d7b0087
commit fed0816e9b
17 files changed
+33 -25
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

crates/qbz-qt/qml/controls/IconTextButton.qml
+1 -1
View File
@@ -36,7 +36,7 @@ Rectangle {
radius: theme.radiusSm radius: theme.radiusSm
border.width: 1 border.width: 1
border.color: theme.borderSubtle 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 opacity: root.btnEnabled ? 1.0 : 0.4
Row { Row {
crates/qbz-qt/qml/controls/QbzLoadMore.qml
+1 -1
View File
@@ -181,7 +181,7 @@ Column {
width: pillText.implicitWidth + 36 width: pillText.implicitWidth + 36
height: 32 height: 32
radius: theme.radiusSm 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.width: 1
border.color: theme.borderSubtle border.color: theme.borderSubtle
Text { Text {
crates/qbz-qt/qml/controls/QbzMultiSelectBar.qml
+1 -1
View File
@@ -47,7 +47,7 @@ Rectangle {
height: 44 height: 44
radius: 8 radius: 8
color: theme.surfaceElevated color: (theme.ambientOn ? theme.surfaceElevatedA50 : theme.surfaceElevated)
Row { Row {
anchors.fill: parent anchors.fill: parent
crates/qbz-qt/qml/controls/QbzSearchField.qml
+2 -1
View File
@@ -32,7 +32,8 @@ Rectangle {
implicitWidth: 168 implicitWidth: 168
implicitHeight: 34 implicitHeight: 34
radius: 6 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.width: 1
border.color: input.activeFocus ? theme.accent : theme.borderSubtle border.color: input.activeFocus ? theme.accent : theme.borderSubtle
crates/qbz-qt/qml/controls/QbzTextArea.qml
+1 -1
View File
@@ -33,7 +33,7 @@ Rectangle {
width: 240 width: 240
height: 96 height: 96
radius: theme.radiusSm radius: theme.radiusSm
color: theme.surfaceElevated color: (theme.ambientOn ? theme.surfaceElevatedA50 : theme.surfaceElevated)
border.width: 1 border.width: 1
border.color: input.activeFocus ? theme.accent : theme.borderSubtle border.color: input.activeFocus ? theme.accent : theme.borderSubtle
crates/qbz-qt/qml/controls/SettingsButton.qml
+1 -1
View File
@@ -36,7 +36,7 @@ Rectangle {
border.width: root.activeFocus ? 2 : 1 border.width: root.activeFocus ? 2 : 1
border.color: root.activeFocus ? theme.accent border.color: root.activeFocus ? theme.accent
: (danger ? theme.danger : theme.borderSubtle) : (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 opacity: enabled ? 1.0 : 0.4
activeFocusOnTab: enabled activeFocusOnTab: enabled
Accessible.role: Accessible.Button Accessible.role: Accessible.Button
crates/qbz-qt/qml/shell/HeaderBar.qml
+7 -4
View File
@@ -63,6 +63,9 @@ Rectangle {
// HeaderBar.slint's with-alpha(app-background-surface-alpha)). // HeaderBar.slint's with-alpha(app-background-surface-alpha)).
color: ambientOn ? theme.surfaceCardA50 : theme.surfaceCard color: ambientOn ? theme.surfaceCardA50 : theme.surfaceCard
readonly property bool ambientOn: theme.ambientOn 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. /// Raised by the app menu's "Report an issue" row; AppShell owns the modal.
@@ -312,7 +315,7 @@ Rectangle {
height: 30 height: 30
width: purchaseRow.implicitWidth width: purchaseRow.implicitWidth
radius: theme.radiusSm radius: theme.radiusSm
color: purchaseTab.isActive ? theme.surfaceElevated color: purchaseTab.isActive ? root.activeFill
: purchaseArea.containsMouse ? theme.surfaceHover : "transparent" : purchaseArea.containsMouse ? theme.surfaceHover : "transparent"
Row { Row {
@@ -363,7 +366,7 @@ Rectangle {
width: tabRow.implicitWidth width: tabRow.implicitWidth
radius: theme.radiusSm radius: theme.radiusSm
opacity: isEnabled ? 1.0 : 0.5 opacity: isEnabled ? 1.0 : 0.5
color: isActive ? theme.surfaceElevated color: isActive ? root.activeFill
: (tabArea.containsMouse && isEnabled) ? theme.surfaceHover : "transparent" : (tabArea.containsMouse && isEnabled) ? theme.surfaceHover : "transparent"
Row { Row {
@@ -439,7 +442,7 @@ Rectangle {
height: 30 height: 30
radius: theme.radiusSm radius: theme.radiusSm
opacity: isEnabled ? 1.0 : 0.5 opacity: isEnabled ? 1.0 : 0.5
color: isActive ? theme.surfaceElevated color: isActive ? root.activeFill
: (cnbArea.containsMouse && isEnabled) ? theme.surfaceHover : "transparent" : (cnbArea.containsMouse && isEnabled) ? theme.surfaceHover : "transparent"
// Baked glyph, or the section's own raw image when it carries one // Baked glyph, or the section's own raw image when it carries one
// (My QBZ branding) — see shell/NavSectionGlyph.qml. // (My QBZ branding) — see shell/NavSectionGlyph.qml.
@@ -640,7 +643,7 @@ Rectangle {
height: 30 height: 30
radius: theme.radiusSm radius: theme.radiusSm
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
color: plPopup.opened ? theme.surfaceElevated color: plPopup.opened ? root.activeFill
: plBtnArea.containsMouse ? theme.surfaceHover : "transparent" : plBtnArea.containsMouse ? theme.surfaceHover : "transparent"
QbzIcon { QbzIcon {
name: "list-music" name: "list-music"
crates/qbz-qt/qml/shell/OrbitBanner.qml
+1 -1
View File
@@ -12,7 +12,7 @@ Rectangle {
property string hostName: "" property string hostName: ""
visible: remoteActive visible: remoteActive
height: remoteActive ? Math.max(38, label.implicitHeight + 16) : 0 height: remoteActive ? Math.max(38, label.implicitHeight + 16) : 0
color: theme.surfaceElevated color: (theme.ambientOn ? theme.surfaceElevatedA50 : theme.surfaceElevated)
border.width: 1 border.width: 1
border.color: theme.accent border.color: theme.accent
Accessible.role: Accessible.StaticText Accessible.role: Accessible.StaticText
crates/qbz-qt/qml/shell/QueuePanel.qml
+4 -3
View File
@@ -429,7 +429,7 @@ Rectangle {
height: 34 height: 34
radius: 4 radius: 4
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
color: theme.surfaceElevated color: (theme.ambientOn ? theme.surfaceElevatedA50 : theme.surfaceElevated)
// No clip: RoundedImage self-confines. One batch root per // No clip: RoundedImage self-confines. One batch root per
// visible queue row. // visible queue row.
RoundedImage { RoundedImage {
@@ -893,7 +893,8 @@ Rectangle {
width: parent.width width: parent.width
height: 44 height: 44
radius: theme.radiusSm 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 { Row {
anchors.fill: parent anchors.fill: parent
anchors.leftMargin: 6 anchors.leftMargin: 6
@@ -906,7 +907,7 @@ Rectangle {
height: 34 height: 34
radius: 4 radius: 4
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
color: theme.surfaceCard color: (theme.ambientOn ? theme.surfaceCardA50 : theme.surfaceCard)
// No clip: RoundedImage self-confines. // No clip: RoundedImage self-confines.
RoundedImage { RoundedImage {
anchors.fill: parent anchors.fill: parent
crates/qbz-qt/qml/shell/Sidebar.qml
+2 -2
View File
@@ -1009,7 +1009,7 @@ Rectangle {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
height: 22 height: 22
radius: 4 radius: 4
color: theme.surfaceElevated color: (theme.ambientOn ? theme.surfaceElevatedA50 : theme.surfaceElevated)
border.width: 1 border.width: 1
border.color: theme.borderSubtle border.color: theme.borderSubtle
TextInput { TextInput {
@@ -1286,7 +1286,7 @@ Rectangle {
width: parent.width - 4 * 26 width: parent.width - 4 * 26
height: 22 height: 22
radius: 4 radius: 4
color: theme.surfaceElevated color: (theme.ambientOn ? theme.surfaceElevatedA50 : theme.surfaceElevated)
border.width: 1 border.width: 1
border.color: theme.borderSubtle border.color: theme.borderSubtle
TextInput { TextInput {
crates/qbz-qt/qml/views/AlbumView.qml
+2 -1
View File
@@ -1591,7 +1591,8 @@ Rectangle {
height: 30 height: 30
radius: 6 radius: 6
anchors.verticalCenter: parent.verticalCenter 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.width: 1
border.color: root.multiSelect ? theme.accent : theme.borderSubtle border.color: root.multiSelect ? theme.accent : theme.borderSubtle
QbzIcon { QbzIcon {
crates/qbz-qt/qml/views/PlayHistoryView.qml
+1 -1
View File
@@ -103,7 +103,7 @@ Rectangle {
radius: 6 radius: 6
border.width: 1 border.width: 1
border.color: theme.borderSubtle border.color: theme.borderSubtle
color: theme.surfaceElevated color: (theme.ambientOn ? theme.surfaceElevatedA50 : theme.surfaceElevated)
Row { Row {
anchors.fill: parent anchors.fill: parent
crates/qbz-qt/qml/views/PurchasesView.qml
+1 -1
View File
@@ -355,7 +355,7 @@ Rectangle {
required property var modelData required property var modelData
width: Math.max(96, kioskTabLabel.implicitWidth + 24) width: Math.max(96, kioskTabLabel.implicitWidth + 24)
height: 64 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 } 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) } MouseArea { anchors.fill: parent; onClicked: QbzPurchases.setTab(parent.modelData.id) }
} }
crates/qbz-qt/qml/views/QueueView.qml
+2 -2
View File
@@ -885,7 +885,7 @@ Rectangle {
width: root.kioskHost ? 64 : 36 width: root.kioskHost ? 64 : 36
height: root.kioskHost ? 64 : 36 height: root.kioskHost ? 64 : 36
radius: theme.radiusSm radius: theme.radiusSm
color: theme.surfaceCard color: (theme.ambientOn ? theme.surfaceCardA50 : theme.surfaceCard)
border.width: 1 border.width: 1
border.color: root.followPlaying ? theme.accent border.color: root.followPlaying ? theme.accent
: theme.borderSubtle : theme.borderSubtle
@@ -908,7 +908,7 @@ Rectangle {
width: root.kioskHost ? 64 : 36 width: root.kioskHost ? 64 : 36
height: root.kioskHost ? 64 : 36 height: root.kioskHost ? 64 : 36
radius: theme.radiusSm radius: theme.radiusSm
color: theme.surfaceCard color: (theme.ambientOn ? theme.surfaceCardA50 : theme.surfaceCard)
border.width: 1 border.width: 1
border.color: theme.borderSubtle border.color: theme.borderSubtle
QbzIconButton { QbzIconButton {
crates/qbz-qt/qml/views/library/LibraryToolbar.qml
+4 -2
View File
@@ -82,7 +82,7 @@ Item {
width: 30 width: 30
height: 30 height: 30
radius: 6 radius: 6
color: active ? theme.surfaceElevated color: active ? (theme.ambientOn ? theme.surfaceElevatedA50 : theme.surfaceElevated)
: ttArea.containsMouse ? theme.surfaceHover : "transparent" : ttArea.containsMouse ? theme.surfaceHover : "transparent"
QbzIcon { QbzIcon {
name: parent.name name: parent.name
@@ -234,7 +234,9 @@ Item {
y: 25 - height / 2 y: 25 - height / 2
width: tabRow.width width: tabRow.width
height: tabRow.height 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 radius: 6
Row { Row {
id: tabRow id: tabRow
crates/qbz-qt/qml/views/local/LocalIconSelect.qml
+1 -1
View File
@@ -40,7 +40,7 @@ Item {
radius: 6 radius: 6
border.width: 1 border.width: 1
border.color: root.marked ? theme.accent : theme.borderSubtle 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 { QbzIcon {
name: root.iconName name: root.iconName
width: 15 width: 15
crates/qbz-qt/qml/views/local/TreeRow.qml
+1 -1
View File
@@ -35,7 +35,7 @@ Rectangle {
height: 26 height: 26
radius: 6 radius: 6
color: selected ? theme.surfaceElevated color: selected ? (theme.ambientOn ? theme.surfaceElevatedA50 : theme.surfaceElevated)
: rowArea.containsMouse ? theme.surfaceHover : "transparent" : rowArea.containsMouse ? theme.surfaceHover : "transparent"
// Row body — declared FIRST so the chevron / checkbox win their clicks. // Row body — declared FIRST so the chevron / checkbox win their clicks.