framework/qml/ComboBox.qml

0001 /*
0002  *  Copyright (C) 2017 Michael Bohlender, <bohlender@kolabsys.com>
0003  *
0004  *  This program is free software; you can redistribute it and/or modify
0005  *  it under the terms of the GNU General Public License as published by
0006  *  the Free Software Foundation; either version 2 of the License, or
0007  *  (at your option) any later version.
0008  *
0009  *  This program is distributed in the hope that it will be useful,
0010  *  but WITHOUT ANY WARRANTY; without even the implied warranty of
0011  *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
0012  *  GNU General Public License for more details.
0013  *
0014  *  You should have received a copy of the GNU General Public License along
0015  *  with this program; if not, write to the Free Software Foundation, Inc.,
0016  *  51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
0017  */
0018
0019 import QtQuick 2.7
0020 import QtQuick.Controls 2.0
0021 import QtQuick.Templates 2.0 as T
0022 import org.kube.framework 1.0 as Kube
0023
0024 T.ComboBox {
0025     id: root
0026
0027     implicitWidth: Kube.Units.gridUnit * 10
0028     implicitHeight: Kube.Units.gridUnit + Kube.Units.smallSpacing * 2
0029
0030     baselineOffset: contentItem.y + contentItem.baselineOffset
0031
0032     spacing: Kube.Units.largeSpacing
0033     padding: Kube.Units.smallSpacing
0034
0035     //Autoselect the first item
0036     onCountChanged: {
0037         if (currentIndex < 0) {
0038             currentIndex = 0
0039         }
0040     }
0041
0042     contentItem: Kube.Label {
0043         leftPadding: Kube.Units.smallSpacing
0044         rightPadding: Kube.Units.smallSpacing
0045
0046         text: root.displayText
0047         horizontalAlignment: Text.AlignLeft
0048         verticalAlignment: Text.AlignVCenter
0049         elide: Text.ElideRight
0050     }
0051
0052     indicator: Kube.Icon {
0053         x: root.mirrored ? root.leftPadding : root.width - width - root.rightPadding
0054         y: root.topPadding + (root.availableHeight - height) / 2
0055         iconName: Kube.Icons.goDown
0056     }
0057
0058     background: Rectangle {
0059         border.width: 1
0060         border.color: root.activeFocus ? Kube.Colors.highlightColor : Kube.Colors.buttonColor
0061         color: Kube.Colors.viewBackgroundColor
0062     }
0063
0064     popup: T.Popup {
0065         width: root.width
0066         implicitHeight: Math.min(Kube.Units.gridUnit * 10, contentItem.implicitHeight)
0067
0068         contentItem: Kube.ListView {
0069             clip: true
0070             implicitHeight: contentHeight
0071             model: root.popup.visible ? root.delegateModel : null
0072             currentIndex: root.highlightedIndex
0073             ScrollBar.vertical: Kube.ScrollBar {}
0074         }
0075
0076         background: Rectangle {
0077             color: Kube.Colors.backgroundColor
0078             border.color: Kube.Colors.buttonColor
0079             border.width: 1
0080         }
0081     }
0082
0083     delegate: Kube.ListDelegate {
0084         width: root.popup.width
0085         height: Kube.Units.gridUnit * 1.5
0086
0087         contentItem: Kube.Label {
0088             padding: Kube.Units.smallSpacing
0089             text: root.textRole ? (Array.isArray(root.model) ? modelData[root.textRole] : model[root.textRole]) : modelData
0090             color:  root.highlightedIndex === index ? Kube.Colors.highlightedTextColor : Kube.Colors.textColor
0091         }
0092
0093         MouseArea {
0094             anchors.fill: parent
0095
0096             onClicked: {
0097                 root.currentIndex = root.highlightedIndex
0098                 root.activated(root.highlightedIndex)
0099                 root.popup.close()
0100             }
0101         }
0102     }
0103 }