NComboBox completed

This commit is contained in:
quadbyte 2025-08-11 14:45:59 -04:00
parent 06c0c57a23
commit 3e46eed9a1

View file

@ -8,8 +8,8 @@ ComboBox {
id: root id: root
readonly property real scaling: Scaling.scale(screen) readonly property real scaling: Scaling.scale(screen)
property list<string> optionsKeys: ['cat', 'dog', 'bird'] property list<string> optionsKeys: ['cat', 'dog', 'bird', 'monkey', 'fish', 'turtle', 'elephant', 'tiger']
property list<string> optionsLabels: ['Cat ', 'Dog', 'Bird'] property list<string> optionsLabels: ['Cat ', 'Dog', 'Bird', 'Monkey', 'Fish', 'Turtle', 'Elephant', 'Tiger']
property string currentKey: "cat" property string currentKey: "cat"
property var onSelected: function (string) {} property var onSelected: function (string) {}
@ -25,7 +25,7 @@ ComboBox {
// Rounded background // Rounded background
background: Rectangle { background: Rectangle {
implicitWidth: 120 * scaling implicitWidth: 120 * scaling
implicitHeight: 40 * scaling implicitHeight: Style.baseWidgetSize * scaling
color: Colors.surfaceVariant color: Colors.surfaceVariant
border.color: root.activeFocus ? Colors.highlight : Colors.outline border.color: root.activeFocus ? Colors.highlight : Colors.outline
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderThin * scaling)
@ -37,6 +37,7 @@ ComboBox {
leftPadding: Style.spacingLarge * scaling leftPadding: Style.spacingLarge * scaling
rightPadding: root.indicator.width + Style.spacingLarge * scaling rightPadding: root.indicator.width + Style.spacingLarge * scaling
font.pointSize: Style.fontSizeMedium * scaling font.pointSize: Style.fontSizeMedium * scaling
font.weight: Style.fontWeightBold
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight elide: Text.ElideRight
text: { text: {
@ -56,8 +57,8 @@ ComboBox {
popup: Popup { popup: Popup {
y: root.height y: root.height
width: root.width width: root.width
implicitHeight: contentItem.implicitHeight implicitHeight: Math.min(160 * scaling, contentItem.implicitHeight + Style.spacingMedium * scaling * 2)
padding: 1 padding: Style.spacingMedium * scaling
contentItem: ListView { contentItem: ListView {
clip: true clip: true
@ -79,18 +80,20 @@ ComboBox {
width: root.width width: root.width
highlighted: root.highlightedIndex === index highlighted: root.highlightedIndex === index
contentItem: Text { contentItem: NText {
text: { text: {
return root.optionsLabels[root.model.indexOf(modelData)] return root.optionsLabels[root.model.indexOf(modelData)]
} }
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeMedium * scaling
color: highlighted ? Colors.backgroundPrimary : Colors.textPrimary color: highlighted ? Colors.backgroundPrimary : Colors.textPrimary
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight elide: Text.ElideRight
} }
background: Rectangle { background: Rectangle {
width: root.width - Style.spacingMedium * scaling * 3
color: highlighted ? Colors.highlight : "transparent" color: highlighted ? Colors.highlight : "transparent"
radius: Style.radiusSmall * scaling
} }
} }
} }