overview: search: fix contrast issue on highlighted item

This commit is contained in:
end-4
2026-04-04 23:32:07 +02:00
parent 799bfae184
commit 77ce65a53c
@@ -40,18 +40,22 @@ RippleButton {
property int buttonHorizontalPadding: 10 property int buttonHorizontalPadding: 10
property int buttonVerticalPadding: 6 property int buttonVerticalPadding: 6
property bool keyboardDown: false property bool keyboardDown: false
readonly property bool selected: (root.hovered || root.focus)
implicitHeight: rowLayout.implicitHeight + root.buttonVerticalPadding * 2 implicitHeight: rowLayout.implicitHeight + root.buttonVerticalPadding * 2
implicitWidth: rowLayout.implicitWidth + root.buttonHorizontalPadding * 2 implicitWidth: rowLayout.implicitWidth + root.buttonHorizontalPadding * 2
buttonRadius: Appearance.rounding.normal buttonRadius: Appearance.rounding.normal
colBackground: (root.down || root.keyboardDown) ? Appearance.colors.colPrimaryContainerActive : colBackground: (root.down || root.keyboardDown) ? Appearance.colors.colPrimaryContainerActive :
((root.hovered || root.focus) ? Appearance.colors.colPrimaryContainer : (selected ? Appearance.colors.colPrimaryContainer :
ColorUtils.transparentize(Appearance.colors.colPrimaryContainer, 1)) ColorUtils.transparentize(Appearance.colors.colPrimaryContainer, 1))
colBackgroundHover: Appearance.colors.colPrimaryContainer colBackgroundHover: Appearance.colors.colPrimaryContainer
colRipple: Appearance.colors.colPrimaryContainerActive colRipple: Appearance.colors.colPrimaryContainerActive
property color colForeground: selected ? Appearance.colors.colOnPrimaryContainer : Appearance.m3colors.m3onSurface
property string highlightPrefix: `<u><font color="${Appearance.colors.colPrimary}">` readonly property string highlightPrefix: `<u><font color="${Appearance.colors.colPrimary}">`
property string highlightSuffix: `</font></u>` readonly property string highlightSuffix: `</font></u>`
// Note that this highlighting is independent from the search
// It's close, but does not accurately represent how the fuzzy algorithm works
function highlightContent(content, query) { function highlightContent(content, query) {
if (!query || query.length === 0 || content == query || fontType === "monospace") if (!query || query.length === 0 || content == query || fontType === "monospace")
return StringUtils.escapeHtml(content); return StringUtils.escapeHtml(content);
@@ -162,7 +166,7 @@ RippleButton {
MaterialSymbol { MaterialSymbol {
text: root.materialSymbol text: root.materialSymbol
iconSize: 30 iconSize: 30
color: Appearance.m3colors.m3onSurface color: root.colForeground
} }
} }
@@ -171,7 +175,7 @@ RippleButton {
StyledText { StyledText {
text: root.bigText text: root.bigText
font.pixelSize: Appearance.font.pixelSize.larger font.pixelSize: Appearance.font.pixelSize.larger
color: Appearance.m3colors.m3onSurface color: root.colForeground
} }
} }
@@ -183,7 +187,7 @@ RippleButton {
spacing: 0 spacing: 0
StyledText { StyledText {
font.pixelSize: Appearance.font.pixelSize.smaller font.pixelSize: Appearance.font.pixelSize.smaller
color: Appearance.colors.colSubtext color: root.selected ? Appearance.colors.colOnPrimaryContainer : Appearance.colors.colSubtext
visible: root.itemType && root.itemType != Translation.tr("App") visible: root.itemType && root.itemType != Translation.tr("App")
text: root.itemType text: root.itemType
} }
@@ -219,10 +223,10 @@ RippleButton {
textFormat: Text.StyledText // RichText also works, but StyledText ensures elide work textFormat: Text.StyledText // RichText also works, but StyledText ensures elide work
font.pixelSize: Appearance.font.pixelSize.small font.pixelSize: Appearance.font.pixelSize.small
font.family: Appearance.font.family[root.fontType] font.family: Appearance.font.family[root.fontType]
color: Appearance.m3colors.m3onSurface color: root.colForeground
horizontalAlignment: Text.AlignLeft horizontalAlignment: Text.AlignLeft
elide: Text.ElideRight elide: Text.ElideRight
text: `${root.displayContent}` text: root.selected ? root.itemName : root.displayContent
} }
} }
Loader { // Clipboard image preview Loader { // Clipboard image preview
@@ -240,7 +244,7 @@ RippleButton {
// Action text // Action text
StyledText { StyledText {
Layout.fillWidth: false Layout.fillWidth: false
visible: (root.hovered || root.focus) visible: root.selected
id: clickAction id: clickAction
font.pixelSize: Appearance.font.pixelSize.normal font.pixelSize: Appearance.font.pixelSize.normal
color: Appearance.colors.colOnPrimaryContainer color: Appearance.colors.colOnPrimaryContainer
@@ -275,7 +279,7 @@ RippleButton {
sourceComponent: MaterialSymbol { sourceComponent: MaterialSymbol {
text: actionButton.iconName || "video_settings" text: actionButton.iconName || "video_settings"
font.pixelSize: Appearance.font.pixelSize.hugeass font.pixelSize: Appearance.font.pixelSize.hugeass
color: Appearance.m3colors.m3onSurface color: root.colForeground
} }
} }
Loader { Loader {