From 1d94783dfc45f4d215ba59ddbb3f4392b004cbae Mon Sep 17 00:00:00 2001 From: Michael Bohlender Date: Fri, 7 Apr 2017 11:57:19 +0200 Subject: add initial Kube.ComboBox and use it in composer --- framework/qml/ComboBox.qml | 95 +++++++++++++++++++++++++++++++++++++++++ framework/qml/FocusComposer.qml | 2 +- 2 files changed, 96 insertions(+), 1 deletion(-) create mode 100644 framework/qml/ComboBox.qml (limited to 'framework/qml') 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, + * + * 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" -- cgit v1.2.3