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 buttonVerticalPadding: 6
property bool keyboardDown: false
readonly property bool selected: (root.hovered || root.focus)
implicitHeight: rowLayout.implicitHeight + root.buttonVerticalPadding * 2
implicitWidth: rowLayout.implicitWidth + root.buttonHorizontalPadding * 2
buttonRadius: Appearance.rounding.normal
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))
colBackgroundHover: Appearance.colors.colPrimaryContainer
colRipple: Appearance.colors.colPrimaryContainerActive
property color colForeground: selected ? Appearance.colors.colOnPrimaryContainer : Appearance.m3colors.m3onSurface
property string highlightPrefix: `<u><font color="${Appearance.colors.colPrimary}">`
property string highlightSuffix: `</font></u>`
readonly property string highlightPrefix: `<u><font color="${Appearance.colors.colPrimary}">`
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) {
if (!query || query.length === 0 || content == query || fontType === "monospace")
return StringUtils.escapeHtml(content);
@@ -162,7 +166,7 @@ RippleButton {
MaterialSymbol {
text: root.materialSymbol
iconSize: 30
color: Appearance.m3colors.m3onSurface
color: root.colForeground
}
}
@@ -171,7 +175,7 @@ RippleButton {
StyledText {
text: root.bigText
font.pixelSize: Appearance.font.pixelSize.larger
color: Appearance.m3colors.m3onSurface
color: root.colForeground
}
}
@@ -183,7 +187,7 @@ RippleButton {
spacing: 0
StyledText {
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")
text: root.itemType
}
@@ -219,10 +223,10 @@ RippleButton {
textFormat: Text.StyledText // RichText also works, but StyledText ensures elide work
font.pixelSize: Appearance.font.pixelSize.small
font.family: Appearance.font.family[root.fontType]
color: Appearance.m3colors.m3onSurface
color: root.colForeground
horizontalAlignment: Text.AlignLeft
elide: Text.ElideRight
text: `${root.displayContent}`
text: root.selected ? root.itemName : root.displayContent
}
}
Loader { // Clipboard image preview
@@ -240,7 +244,7 @@ RippleButton {
// Action text
StyledText {
Layout.fillWidth: false
visible: (root.hovered || root.focus)
visible: root.selected
id: clickAction
font.pixelSize: Appearance.font.pixelSize.normal
color: Appearance.colors.colOnPrimaryContainer
@@ -275,7 +279,7 @@ RippleButton {
sourceComponent: MaterialSymbol {
text: actionButton.iconName || "video_settings"
font.pixelSize: Appearance.font.pixelSize.hugeass
color: Appearance.m3colors.m3onSurface
color: root.colForeground
}
}
Loader {