forked from Shinonome/dots-hyprland
overview: search: fix contrast issue on highlighted item
This commit is contained in:
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user