add initial Kube.ComboBox and use it in composer

3 files changed, 97 insertions, 1 deletions

diff --git a/framework/qml/ComboBox.qml b/framework/qml/ComboBox.qml
new file mode 100644
index 00000000..9fea0ca3
--- /dev/null
+++ b/framework/qml/ComboBox.qml
@@ -0,0 +1,95 @@
+/*
+ *  Copyright (C) 2017 Michael Bohlender, <bohlender@kolabsys.com>
+ *
+ *  This program is free software; you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation; either version 2 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License along
+ *  with this program; if not, write to the Free Software Foundation, Inc.,
+ *  51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+ */
+
+import QtQuick 2.7
+import QtQuick.Controls 2.0
+import QtQuick.Templates 2.0 as T
+import org.kube.framework 1.0
+
+T.ComboBox {
+    id: root
+
+    implicitWidth: Units.gridUnit * 10
+    implicitHeight: Units.gridUnit + Units.smallSpacing * 2
+
+    baselineOffset: contentItem.y + contentItem.baselineOffset
+
+    spacing: Units.largeSpacing
+    padding: Units.smallSpacing
+
+    contentItem: Text {
+        leftPadding: Units.smallSpacing
+        rightPadding: Units.largeSpacing
+
+        color: Colors.textColor
+        text: root.displayText
+        //TODO font:
+        horizontalAlignment: Text.AlignLeft
+        verticalAlignment: Text.AlignVCenter
+        elide: Text.ElideRight
+    }
+
+    indicator: Icon {
+        x: root.mirrored ? root.leftPadding : root.width - width - root.rightPadding
+        y: root.topPadding + (root.availableHeight - height) / 2
+        iconName: Icons.goDown
+    }
+
+    background: Rectangle {
+        border.width: 1
+        border.color: Colors.buttonColor
+        color: Colors.viewBackgroundColor
+    }
+
+    popup: T.Popup {
+        width: root.width
+        implicitHeight: Math.min(Units.gridUnit * 5, contentItem.implicitHeight)
+
+        contentItem: ListView {
+            clip: true
+            implicitHeight: contentHeight
+            model: root.popup.visible ? root.delegateModel : null
+            currentIndex: root.highlightedIndex
+            //FIXME use Kube.Scrollbar once available
+            T.ScrollIndicator.vertical: ScrollIndicator { }
+        }
+
+        background: Rectangle {
+            color: Colors.backgroundColor
+            border.color: Colors.buttonColor
+            border.width: 1
+        }
+    }
+
+    delegate: T.ItemDelegate {
+        width: root.popup.width
+        height: Units.gridUnit * 1.5
+
+        contentItem: Text {
+            padding: Units.smallSpacing
+            text: root.textRole ? (Array.isArray(root.model) ? modelData[root.textRole] : model[root.textRole]) : modelData
+            color:  root.highlightedIndex === index ? Colors.highlightedTextColor : Colors.textColor
+        }
+
+        background: Rectangle {
+            color: root.highlightedIndex === index ? Colors.highlightColor : Colors.viewBackgroundColor
+            border.width: 1
+            border.color: Colors.buttonColor
+        }
+    }
+}
diff --git a/framework/qml/FocusComposer.qml b/framework/qml/FocusComposer.qml
index 08eafe36..bd5612f1 100644
--- a/framework/qml/FocusComposer.qml
+++ b/framework/qml/FocusComposer.qml
@@ -146,7 +146,7 @@ Kube.Popup {
 
                     RowLayout {
 
-                        Controls2.ComboBox {
+                        Kube.ComboBox {
                             id: identityCombo
                             model: composerController.identitySelector.model
                             textRole: "displayName"
diff --git a/framework/qmldir b/framework/qmldir
index 1ca1cb72..7b1f0be6 100644
--- a/framework/qmldir
+++ b/framework/qmldir
@@ -15,6 +15,7 @@ NotificationPopup 1.0 NotificationPopup.qml
 Icon 1.0 Icon.qml
 Button 1.0 Button.qml
 Popup 1.0 Popup.qml
+ComboBox 1.0 ComboBox.qml
 PositiveButton 1.0 PositiveButton.qml
 singleton Colors 1.0 Colors.qml
 singleton Icons 1.0 Icons.qml