combobox: update color mappings

This commit is contained in:
end-4
2025-11-22 16:07:10 +01:00
parent 18c264a85e
commit 4878f7dbb1
@@ -88,15 +88,27 @@ ComboBox {
delegate: ItemDelegate { delegate: ItemDelegate {
id: itemDelegate id: itemDelegate
width: ListView.view ? ListView.view.width : root.width width: ListView.view ? ListView.view.width : root.width
height: 40 implicitHeight: 40
required property var model required property var model
required property int index required property int index
property color color: {
if (root.currentIndex === itemDelegate.index) {
if (itemDelegate.down) return Appearance.colors.colSecondaryContainerActive;
if (itemDelegate.hovered) return Appearance.colors.colSecondaryContainerHover;
return Appearance.colors.colSecondaryContainer;
} else {
if (itemDelegate.down) return Appearance.colors.colLayer3Active;
if (itemDelegate.hovered) return Appearance.colors.colLayer3Hover;
return ColorUtils.transparentize(Appearance.colors.colLayer3);
}
}
property color colText: (root.currentIndex === itemDelegate.index) ? Appearance.colors.colOnSecondaryContainer : Appearance.colors.colOnLayer3
background: Rectangle { background: Rectangle {
anchors.fill: parent anchors.fill: parent
radius: Appearance.rounding.small radius: Appearance.rounding.small
color: root.currentIndex === itemDelegate.index ? Appearance.colors.colPrimary : itemDelegate.down ? Appearance.colors.colSecondaryContainerActive : itemDelegate.hovered ? Appearance.colors.colSecondaryContainerHover : ColorUtils.transparentize(Appearance.colors.colSurfaceContainerHigh) color: itemDelegate.color
Behavior on color { Behavior on color {
animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this) animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
@@ -119,31 +131,28 @@ ComboBox {
Layout.preferredHeight: Appearance.font.pixelSize.larger Layout.preferredHeight: Appearance.font.pixelSize.larger
active: typeof itemDelegate.model === 'object' && itemDelegate.model?.icon?.length > 0 active: typeof itemDelegate.model === 'object' && itemDelegate.model?.icon?.length > 0
visible: active visible: active
sourceComponent: Item { sourceComponent: Item {
implicitWidth: icon.implicitWidth implicitWidth: icon.implicitWidth
implicitHeight: Appearance.font.pixelSize.larger implicitHeight: Appearance.font.pixelSize.larger
MaterialSymbol { MaterialSymbol {
id: icon id: icon
anchors.centerIn: parent anchors.centerIn: parent
text: itemDelegate.model?.icon ?? "" text: itemDelegate.model?.icon ?? ""
iconSize: Appearance.font.pixelSize.larger iconSize: Appearance.font.pixelSize.larger
color: root.currentIndex === itemDelegate.index ? Appearance.colors.colOnPrimary : Appearance.colors.colOnSecondaryContainer color: itemDelegate.colText
} }
} }
} }
Item { StyledText {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: Appearance.font.pixelSize.larger Layout.preferredHeight: Appearance.font.pixelSize.larger
color: itemDelegate.colText
StyledText { text: itemDelegate.model[root.textRole]
anchors.centerIn: parent elide: Text.ElideRight
width: parent.width verticalAlignment: Text.AlignVCenter
color: root.currentIndex === itemDelegate.index ? Appearance.colors.colOnPrimary : Appearance.colors.colOnSecondaryContainer
text: itemDelegate.model[root.textRole]
elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter
}
} }
} }
} }