NComboBox looking almost great

Assets/Colors/default.json

@@ -18,8 +18,6 @@
   "warning": "#f6c177",
 
   "highlight": "#c4a7e7",
-  "rippleEffect": "#31748f",
-
   "onAccent": "#191724",
   "outline": "#44415a",
 

Modules/DemoPanel/DemoPanel.qml

@@ -38,6 +38,49 @@ NLoader {
           anchors.margins: Style.marginXL * scaling
           spacing: Style.marginSmall * scaling
 
+          // NSlider
+          ColumnLayout {
+            spacing: 16 * scaling
+            NText {
+              text: "Scaling"
+              color: Colors.accentSecondary
+              font.weight: Style.fontWeightBold
+            }
+            RowLayout {
+              spacing: Style.marginSmall * scaling
+              NText {
+                text: `${Math.round(Scaling.overrideScale * 100)}%`
+                Layout.alignment: Qt.AlignVCenter
+              }
+              NSlider {
+                id: scaleSlider
+                from: 0.6
+                to: 1.8
+                stepSize: 0.01
+                value: Scaling.overrideScale
+                implicitWidth: bgRect.width * 0.75
+                onMoved: function () {
+                  Scaling.overrideScale = value
+                }
+                onPressedChanged: function () {
+                  Scaling.overrideEnabled = true
+                }
+              }
+              NIconButton {
+                icon: "refresh"
+                sizeMultiplier: 1.0
+                fontPointSize: Style.fontSizeXL * scaling
+                onClicked: function () {
+                  Scaling.overrideEnabled = false
+                  Scaling.overrideScale = 1.0
+                }
+              }
+            }
+            NDivider {
+              Layout.fillWidth: true
+            }
+          }
+
           // NIconButton
           ColumnLayout {
             spacing: 16 * scaling
@@ -81,44 +124,22 @@ NLoader {
             }
           }
 
-          // NSlider
+          // NComboBox
           ColumnLayout {
-            spacing: 16 * scaling
+            spacing: Style.marginLarge * scaling
             NText {
-              text: "Scaling"
+              text: "NComboBox"
               color: Colors.accentSecondary
               font.weight: Style.fontWeightBold
             }
-            RowLayout {
-              spacing: Style.marginSmall * scaling
-              NText {
-                text: `${Math.round(Scaling.overrideScale * 100)}%`
-                Layout.alignment: Qt.AlignVCenter
-              }
-              NSlider {
-                id: scaleSlider
-                from: 0.6
-                to: 1.8
-                stepSize: 0.01
-                value: Scaling.overrideScale
-                implicitWidth: bgRect.width * 0.75
-                onMoved: function () {
-                  Scaling.overrideScale = value
-                }
-                onPressedChanged: function () {
-                  Scaling.overrideEnabled = true
-                }
-              }
-              NIconButton {
-                icon: "refresh"
-                sizeMultiplier: 1.0
-                fontPointSize: Style.fontSizeXL * scaling
-                onClicked: function () {
-                  Scaling.overrideEnabled = false
-                  Scaling.overrideScale = 1.0
-                }
+
+            NComboBox {// label: "Label"
+              // description: "Description"
+              onSelected: function (value) {
+                console.log("NComboBox: " + value)
               }
             }
+
             NDivider {
               Layout.fillWidth: true
             }

Widgets/NComboBox.qml

@@ -0,0 +1,96 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import qs.Services
+import qs.Widgets
+
+ComboBox {
+  id: root
+
+  readonly property real scaling: Scaling.scale(screen)
+  property list<string> optionsKeys: ['cat', 'dog', 'bird']
+  property list<string> optionsLabels: ['Cat ', 'Dog', 'Bird']
+  property string currentKey: "cat"
+  property var onSelected: function (string) {}
+
+  Layout.fillWidth: true
+  Layout.preferredHeight: Style.baseWidgetSize * scaling
+
+  model: optionsKeys
+  currentIndex: model.indexOf(currentKey)
+  onActivated: {
+   root.onSelected(model[currentIndex])
+  }
+
+  // Rounded background
+  background: Rectangle {
+    implicitWidth: 120 * scaling
+    implicitHeight: 40 * scaling
+    color: Colors.surfaceVariant
+    border.color: root.activeFocus ? Colors.highlight : Colors.outline
+    border.width: Math.max(1, Style.borderThin * scaling)
+    radius: Style.radiusMedium * scaling
+  }
+
+  // Label (currently selected)
+  contentItem: NText {
+    leftPadding: Style.spacingLarge * scaling
+    rightPadding: root.indicator.width + Style.spacingLarge * scaling
+    font.pointSize: Style.fontSizeMedium * scaling
+    verticalAlignment: Text.AlignVCenter
+    elide: Text.ElideRight
+    text: {
+      return root.optionsLabels[root.currentIndex]
+    }
+  }
+
+  // Drop down indicator
+  indicator: NText {
+    x: root.width - width - Style.spacingMedium * scaling
+    y: root.topPadding + (root.availableHeight - height) / 2
+    text: "arrow_drop_down"
+    font.family: "Material Symbols Outlined"
+    font.pointSize: Style.fontSizeXL * scaling
+  }
+
+  popup: Popup {
+    y: root.height
+    width: root.width
+    implicitHeight: contentItem.implicitHeight
+    padding: 1
+
+    contentItem: ListView {
+      clip: true
+      implicitHeight: contentHeight
+      model: root.popup.visible ? root.delegateModel : null
+      currentIndex: root.highlightedIndex
+      ScrollIndicator.vertical: ScrollIndicator {}
+    }
+
+    background: Rectangle {
+      color: Colors.surfaceVariant
+      border.color: Colors.outline
+      border.width: Math.max(1, Style.borderThin * scaling)
+      radius: Style.radiusMedium * scaling
+    }
+  }
+
+  delegate: ItemDelegate {
+    width: root.width
+    highlighted: root.highlightedIndex === index
+
+    contentItem: Text {
+      text: {
+        return root.optionsLabels[root.model.indexOf(modelData)]
+      }
+      font.pointSize: Style.fontSizeSmall * scaling
+      color: highlighted ? Colors.backgroundPrimary : Colors.textPrimary
+      verticalAlignment: Text.AlignVCenter
+      elide: Text.ElideRight
+    }
+
+    background: Rectangle {
+      color: highlighted ? Colors.highlight : "transparent"
+    }
+  }
+}