From 4ecb85d4468782378c091e42d5733a976a3e0307 Mon Sep 17 00:00:00 2001 From: J-P Nurmi Date: Thu, 26 Nov 2015 18:02:15 +0100 Subject: Add ComboBox Change-Id: I4cfc2367db92786097a1ce66bd4b5a2f71322a2e Reviewed-by: Mitch Curtis --- src/imports/controls/ComboBox.qml | 133 ++++++++++++++++++ src/imports/controls/controls.pri | 1 + .../images/qtlabscontrols-combobox-background.png | Bin 0 -> 2903 bytes .../images/qtlabscontrols-combobox-contentItem.png | Bin 0 -> 2913 bytes .../images/qtlabscontrols-combobox-delegate.png | Bin 0 -> 5012 bytes .../doc/images/qtlabscontrols-combobox-panel.png | Bin 0 -> 4969 bytes .../doc/images/qtlabscontrols-combobox.png | Bin 0 -> 4993 bytes .../qtlabscontrols-combobox-background.qml | 38 +++++ .../qtlabscontrols-combobox-contentItem.qml | 38 +++++ .../snippets/qtlabscontrols-combobox-delegate.qml | 54 ++++++++ .../doc/snippets/qtlabscontrols-combobox-panel.qml | 47 +++++++ .../doc/snippets/qtlabscontrols-combobox.qml | 43 ++++++ .../controls/doc/src/qtlabscontrols-customize.qdoc | 32 +++++ .../controls/doc/src/qtlabscontrols-index.qdoc | 3 + .../controls/doc/src/qtlabscontrols-input.qdoc | 6 + src/imports/controls/images/drop-indicator.png | Bin 0 -> 2873 bytes src/imports/controls/images/drop-indicator@2x.png | Bin 0 -> 2942 bytes src/imports/controls/images/drop-indicator@3x.png | Bin 0 -> 3013 bytes src/imports/controls/images/drop-indicator@4x.png | Bin 0 -> 3125 bytes src/imports/controls/material/ComboBox.qml | 154 +++++++++++++++++++++ .../controls/material/images/drop-indicator.png | Bin 0 -> 342 bytes .../controls/material/images/drop-indicator@2x.png | Bin 0 -> 273 bytes .../controls/material/images/drop-indicator@3x.png | Bin 0 -> 406 bytes .../controls/material/images/drop-indicator@4x.png | Bin 0 -> 520 bytes src/imports/controls/material/material.pri | 1 + .../controls/material/qquickmaterialstyle.cpp | 5 + .../controls/material/qquickmaterialstyle_p.h | 2 + .../material/qtlabsmaterialstyleplugin.qrc | 4 + src/imports/controls/qtlabscontrolsplugin.cpp | 1 + src/imports/controls/qtlabscontrolsplugin.qrc | 4 + src/imports/controls/universal/ComboBox.qml | 142 +++++++++++++++++++ .../controls/universal/images/downarrow.png | Bin 0 -> 200 bytes .../controls/universal/images/downarrow@2x.png | Bin 0 -> 263 bytes .../controls/universal/images/downarrow@3x.png | Bin 0 -> 329 bytes .../controls/universal/images/downarrow@4x.png | Bin 0 -> 358 bytes .../universal/qtlabsuniversalstyleplugin.qrc | 4 + src/imports/controls/universal/universal.pri | 1 + 37 files changed, 713 insertions(+) create mode 100644 src/imports/controls/ComboBox.qml create mode 100644 src/imports/controls/doc/images/qtlabscontrols-combobox-background.png create mode 100644 src/imports/controls/doc/images/qtlabscontrols-combobox-contentItem.png create mode 100644 src/imports/controls/doc/images/qtlabscontrols-combobox-delegate.png create mode 100644 src/imports/controls/doc/images/qtlabscontrols-combobox-panel.png create mode 100644 src/imports/controls/doc/images/qtlabscontrols-combobox.png create mode 100644 src/imports/controls/doc/snippets/qtlabscontrols-combobox-background.qml create mode 100644 src/imports/controls/doc/snippets/qtlabscontrols-combobox-contentItem.qml create mode 100644 src/imports/controls/doc/snippets/qtlabscontrols-combobox-delegate.qml create mode 100644 src/imports/controls/doc/snippets/qtlabscontrols-combobox-panel.qml create mode 100644 src/imports/controls/doc/snippets/qtlabscontrols-combobox.qml create mode 100644 src/imports/controls/images/drop-indicator.png create mode 100644 src/imports/controls/images/drop-indicator@2x.png create mode 100644 src/imports/controls/images/drop-indicator@3x.png create mode 100644 src/imports/controls/images/drop-indicator@4x.png create mode 100644 src/imports/controls/material/ComboBox.qml create mode 100644 src/imports/controls/material/images/drop-indicator.png create mode 100644 src/imports/controls/material/images/drop-indicator@2x.png create mode 100644 src/imports/controls/material/images/drop-indicator@3x.png create mode 100644 src/imports/controls/material/images/drop-indicator@4x.png create mode 100644 src/imports/controls/universal/ComboBox.qml create mode 100644 src/imports/controls/universal/images/downarrow.png create mode 100644 src/imports/controls/universal/images/downarrow@2x.png create mode 100644 src/imports/controls/universal/images/downarrow@3x.png create mode 100644 src/imports/controls/universal/images/downarrow@4x.png (limited to 'src/imports/controls') diff --git a/src/imports/controls/ComboBox.qml b/src/imports/controls/ComboBox.qml new file mode 100644 index 00000000..7f2adcb0 --- /dev/null +++ b/src/imports/controls/ComboBox.qml @@ -0,0 +1,133 @@ +/**************************************************************************** +** +** Copyright (C) 2015 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the Qt Labs Controls module of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL3$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see http://www.qt.io/terms-conditions. For further +** information use the contact form at http://www.qt.io/contact-us. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 3 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPLv3 included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 3 requirements +** will be met: https://www.gnu.org/licenses/lgpl.html. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 2.0 or later as published by the Free +** Software Foundation and appearing in the file LICENSE.GPL included in +** the packaging of this file. Please review the following information to +** ensure the GNU General Public License version 2.0 requirements will be +** met: http://www.gnu.org/licenses/gpl-2.0.html. +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.6 +import QtQuick.Window 2.2 +import Qt.labs.templates 1.0 as T + +T.ComboBox { + id: control + + implicitWidth: Math.max(background ? background.implicitWidth : 0, + contentItem.implicitWidth + leftPadding + rightPadding) + implicitHeight: Math.max(background ? background.implicitHeight : 0, + contentItem.implicitHeight + topPadding + bottomPadding) + baselineOffset: contentItem.y + contentItem.baselineOffset + + spacing: 8 + padding: 6 + leftPadding: 8 + rightPadding: 8 + + //! [delegate] + delegate: ItemDelegate { + width: control.width + text: control.textRole ? model[control.textRole] : modelData + checkable: true + autoExclusive: true + checked: control.currentIndex === index + highlighted: control.highlightedIndex === index + pressed: highlighted && control.pressed + } + //! [delegate] + + //! [contentItem] + contentItem: Text { + text: control.displayText + font: control.font + color: "#ffffff" + horizontalAlignment: Text.AlignLeft + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight + rightPadding: 18 + control.spacing + } + //! [contentItem] + + //! [background] + background: Item { + implicitWidth: 120 + implicitHeight: 40 + + Rectangle { + width: parent.width + height: parent.height + opacity: control.enabled ? 1.0 : 0.2 + color: control.pressed || panel.visible ? "#585A5C" : "#353637" + } + + Image { + x: parent.width - width - control.rightPadding + y: (parent.height - height) / 2 + source: "qrc:/images/drop-indicator.png" + } + } + //! [background] + + //! [panel] + panel: T.Panel { + id: popup + contentItem: Rectangle { + // TODO: Panel::anchors + readonly property var above: popup.visible ? control.mapToItem(null, 0, -height + 1) : Qt.point(0, 0) + readonly property var below: popup.visible ? control.mapToItem(null, 0, control.height - 1) : Qt.point(0, 0) + + x: below.x + y: above.y >= 0 && below.y + height > control.Window.height ? above.y : below.y + width: control.width + height: listview.height + + ListView { + id: listview + width: control.width + height: Math.min(200, contentHeight) + + clip: true + model: control.delegateModel + currentIndex: control.highlightedIndex + +// ScrollIndicator.vertical: ScrollIndicator { } + } + + Rectangle { + width: parent.width + height: parent.height + color: "transparent" + border.color: "#353637" + } + } + } + //! [panel] +} diff --git a/src/imports/controls/controls.pri b/src/imports/controls/controls.pri index 78c9a1d0..63e3373e 100644 --- a/src/imports/controls/controls.pri +++ b/src/imports/controls/controls.pri @@ -3,6 +3,7 @@ QML_FILES = \ BusyIndicator.qml \ Button.qml \ CheckBox.qml \ + ComboBox.qml \ Dial.qml \ Drawer.qml \ Frame.qml \ diff --git a/src/imports/controls/doc/images/qtlabscontrols-combobox-background.png b/src/imports/controls/doc/images/qtlabscontrols-combobox-background.png new file mode 100644 index 00000000..fa296270 Binary files /dev/null and b/src/imports/controls/doc/images/qtlabscontrols-combobox-background.png differ diff --git a/src/imports/controls/doc/images/qtlabscontrols-combobox-contentItem.png b/src/imports/controls/doc/images/qtlabscontrols-combobox-contentItem.png new file mode 100644 index 00000000..9b8e8175 Binary files /dev/null and b/src/imports/controls/doc/images/qtlabscontrols-combobox-contentItem.png differ diff --git a/src/imports/controls/doc/images/qtlabscontrols-combobox-delegate.png b/src/imports/controls/doc/images/qtlabscontrols-combobox-delegate.png new file mode 100644 index 00000000..88462185 Binary files /dev/null and b/src/imports/controls/doc/images/qtlabscontrols-combobox-delegate.png differ diff --git a/src/imports/controls/doc/images/qtlabscontrols-combobox-panel.png b/src/imports/controls/doc/images/qtlabscontrols-combobox-panel.png new file mode 100644 index 00000000..0e9eacbf Binary files /dev/null and b/src/imports/controls/doc/images/qtlabscontrols-combobox-panel.png differ diff --git a/src/imports/controls/doc/images/qtlabscontrols-combobox.png b/src/imports/controls/doc/images/qtlabscontrols-combobox.png new file mode 100644 index 00000000..69fc9c95 Binary files /dev/null and b/src/imports/controls/doc/images/qtlabscontrols-combobox.png differ diff --git a/src/imports/controls/doc/snippets/qtlabscontrols-combobox-background.qml b/src/imports/controls/doc/snippets/qtlabscontrols-combobox-background.qml new file mode 100644 index 00000000..d6715f07 --- /dev/null +++ b/src/imports/controls/doc/snippets/qtlabscontrols-combobox-background.qml @@ -0,0 +1,38 @@ +/**************************************************************************** +** +** Copyright (C) 2015 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see http://www.qt.io/terms-conditions. For further +** information use the contact form at http://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: http://www.gnu.org/copyleft/fdl.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 +import Qt.labs.controls 1.0 + +ComboBox { + model: ["ComboBox"] + Rectangle { + anchors.fill: background + color: 'transparent' + border.color: 'red' + } +} diff --git a/src/imports/controls/doc/snippets/qtlabscontrols-combobox-contentItem.qml b/src/imports/controls/doc/snippets/qtlabscontrols-combobox-contentItem.qml new file mode 100644 index 00000000..08523088 --- /dev/null +++ b/src/imports/controls/doc/snippets/qtlabscontrols-combobox-contentItem.qml @@ -0,0 +1,38 @@ +/**************************************************************************** +** +** Copyright (C) 2015 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see http://www.qt.io/terms-conditions. For further +** information use the contact form at http://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: http://www.gnu.org/copyleft/fdl.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 +import Qt.labs.controls 1.0 + +ComboBox { + model: ["ComboBox"] + Rectangle { + anchors.fill: contentItem + color: 'transparent' + border.color: 'red' + } +} diff --git a/src/imports/controls/doc/snippets/qtlabscontrols-combobox-delegate.qml b/src/imports/controls/doc/snippets/qtlabscontrols-combobox-delegate.qml new file mode 100644 index 00000000..47c4f606 --- /dev/null +++ b/src/imports/controls/doc/snippets/qtlabscontrols-combobox-delegate.qml @@ -0,0 +1,54 @@ +/**************************************************************************** +** +** Copyright (C) 2015 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see http://www.qt.io/terms-conditions. For further +** information use the contact form at http://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: http://www.gnu.org/copyleft/fdl.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 +import Qt.labs.controls 1.0 + +Item { + id: root + width: combo.width + height: combo.height + combo.panel.contentItem.height + ComboBox { + id: combo + model: ["First", "Second", "Third"] + panel.contentItem.parent: root + panel.contentItem.y: combo.height + delegate: ItemDelegate { + width: combo.width + text: modelData + checkable: true + autoExclusive: true + checked: combo.currentIndex === index + Rectangle { + visible: index === 0 + anchors.fill: parent + color: 'transparent' + border.color: 'red' + } + } + } +} diff --git a/src/imports/controls/doc/snippets/qtlabscontrols-combobox-panel.qml b/src/imports/controls/doc/snippets/qtlabscontrols-combobox-panel.qml new file mode 100644 index 00000000..d1788d55 --- /dev/null +++ b/src/imports/controls/doc/snippets/qtlabscontrols-combobox-panel.qml @@ -0,0 +1,47 @@ +/**************************************************************************** +** +** Copyright (C) 2015 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see http://www.qt.io/terms-conditions. For further +** information use the contact form at http://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: http://www.gnu.org/copyleft/fdl.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 +import Qt.labs.controls 1.0 + +Item { + id: root + width: combo.width + height: combo.height + combo.panel.contentItem.height + ComboBox { + id: combo + model: ["First", "Second", "Third"] + panel.contentItem.parent: root + panel.contentItem.y: combo.height + } + Rectangle { + parent: combo.panel.contentItem + anchors.fill: parent + color: 'transparent' + border.color: 'red' + } +} diff --git a/src/imports/controls/doc/snippets/qtlabscontrols-combobox.qml b/src/imports/controls/doc/snippets/qtlabscontrols-combobox.qml new file mode 100644 index 00000000..bac6136d --- /dev/null +++ b/src/imports/controls/doc/snippets/qtlabscontrols-combobox.qml @@ -0,0 +1,43 @@ +/**************************************************************************** +** +** Copyright (C) 2015 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see http://www.qt.io/terms-conditions. For further +** information use the contact form at http://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: http://www.gnu.org/copyleft/fdl.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 +import Qt.labs.controls 1.0 + +Item { + id: root + width: combo.width + height: combo.height + combo.panel.contentItem.height + //! [1] + ComboBox { + id: combo + model: ["First", "Second", "Third"] + panel.contentItem.parent: root + panel.contentItem.y: combo.height + } + //! [1] +} diff --git a/src/imports/controls/doc/src/qtlabscontrols-customize.qdoc b/src/imports/controls/doc/src/qtlabscontrols-customize.qdoc index a7bd7d8b..eb1dc71d 100644 --- a/src/imports/controls/doc/src/qtlabscontrols-customize.qdoc +++ b/src/imports/controls/doc/src/qtlabscontrols-customize.qdoc @@ -95,6 +95,38 @@ \snippet CheckBox.qml indicator + + \section1 Customizing ComboBox + + ComboBox consists of \l {Control::background}{background}, + \l {Control::contentItem}{content item}, \l {ComboBox::panel}{panel}, + and \l {ComboBox::delegate}{delegate}. + + \section3 Background + + \image qtlabscontrols-combobox-background.png + + \snippet ComboBox.qml background + + \section3 Content item + + \image qtlabscontrols-combobox-contentItem.png + + \snippet ComboBox.qml contentItem + + \section3 Panel + + \image qtlabscontrols-combobox-panel.png + + \snippet ComboBox.qml panel + + \section3 Delegate + + \image qtlabscontrols-combobox-delegate.png + + \snippet ComboBox.qml delegate + + \section1 Customizing Dial Dial consists of two visual items: \l {Control::background}{background} diff --git a/src/imports/controls/doc/src/qtlabscontrols-index.qdoc b/src/imports/controls/doc/src/qtlabscontrols-index.qdoc index 936e65e8..6e486ff0 100644 --- a/src/imports/controls/doc/src/qtlabscontrols-index.qdoc +++ b/src/imports/controls/doc/src/qtlabscontrols-index.qdoc @@ -218,6 +218,9 @@ \row \li \l [QtQuickControls] {CheckBox} \li \l [QtLabsControls] {CheckBox} + \row + \li \l [QtQuickControls] {ComboBox} + \li \l [QtLabsControls] {ComboBox} \row \li \l [QtQuickControls] {ExclusiveGroup} \li \l [QtLabsControls] {ButtonGroup} diff --git a/src/imports/controls/doc/src/qtlabscontrols-input.qdoc b/src/imports/controls/doc/src/qtlabscontrols-input.qdoc index 130ca83d..06c0b40d 100644 --- a/src/imports/controls/doc/src/qtlabscontrols-input.qdoc +++ b/src/imports/controls/doc/src/qtlabscontrols-input.qdoc @@ -38,6 +38,12 @@ following sections offer guidelines for choosing the appropriate type of input control, depending on the use case. + \section1 ComboBox Control + + \image qtlabscontrols-combobox.png + + \l ComboBox is used to select a value from a drop-down list. + \section1 Dial Control \image qtlabscontrols-dial.png diff --git a/src/imports/controls/images/drop-indicator.png b/src/imports/controls/images/drop-indicator.png new file mode 100644 index 00000000..77359311 Binary files /dev/null and b/src/imports/controls/images/drop-indicator.png differ diff --git a/src/imports/controls/images/drop-indicator@2x.png b/src/imports/controls/images/drop-indicator@2x.png new file mode 100644 index 00000000..54d23b4b Binary files /dev/null and b/src/imports/controls/images/drop-indicator@2x.png differ diff --git a/src/imports/controls/images/drop-indicator@3x.png b/src/imports/controls/images/drop-indicator@3x.png new file mode 100644 index 00000000..22c6d010 Binary files /dev/null and b/src/imports/controls/images/drop-indicator@3x.png differ diff --git a/src/imports/controls/images/drop-indicator@4x.png b/src/imports/controls/images/drop-indicator@4x.png new file mode 100644 index 00000000..7ab1eb86 Binary files /dev/null and b/src/imports/controls/images/drop-indicator@4x.png differ diff --git a/src/imports/controls/material/ComboBox.qml b/src/imports/controls/material/ComboBox.qml new file mode 100644 index 00000000..035863f6 --- /dev/null +++ b/src/imports/controls/material/ComboBox.qml @@ -0,0 +1,154 @@ +/**************************************************************************** +** +** Copyright (C) 2015 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the Qt Labs Controls module of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL3$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see http://www.qt.io/terms-conditions. For further +** information use the contact form at http://www.qt.io/contact-us. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 3 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPLv3 included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 3 requirements +** will be met: https://www.gnu.org/licenses/lgpl.html. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 2.0 or later as published by the Free +** Software Foundation and appearing in the file LICENSE.GPL included in +** the packaging of this file. Please review the following information to +** ensure the GNU General Public License version 2.0 requirements will be +** met: http://www.gnu.org/licenses/gpl-2.0.html. +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.6 +import QtQuick.Window 2.2 +import Qt.labs.templates 1.0 as T +import Qt.labs.controls.material 1.0 +import QtGraphicalEffects 1.0 + +T.ComboBox { + id: control + + implicitWidth: Math.max(background ? background.implicitWidth : 0, + contentItem.implicitWidth + leftPadding + rightPadding) + implicitHeight: Math.max(background ? background.implicitHeight : 0, + contentItem.implicitHeight + topPadding + bottomPadding) + baselineOffset: contentItem.y + contentItem.baselineOffset + + spacing: 6 + padding: 12 + + //! [delegate] + delegate: ItemDelegate { + width: control.width + text: control.textRole ? model[control.textRole] : modelData + highlighted: control.highlightedIndex === index + pressed: highlighted && control.pressed + } + //! [delegate] + + //! [contentItem] + contentItem: Text { + text: control.displayText + font: control.font + color: control.enabled ? control.Material.primaryTextColor : control.Material.hintTextColor + horizontalAlignment: Text.AlignLeft + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight + rightPadding: 14 + control.spacing + } + //! [contentItem] + + //! [background] + background: Rectangle { + implicitWidth: 120 + implicitHeight: 32 + + radius: 2 + color: control.Material.comboBoxColor + + Behavior on color { + ColorAnimation { + duration: 400 + } + } + + layer.enabled: control.enabled + layer.effect: DropShadow { + verticalOffset: 1 + color: control.Material.dropShadowColor + samples: control.pressed ? 15 : 9 + spread: 0.5 + + // TODO: Doesn't work because of QTBUG-49072 + Behavior on radius { + NumberAnimation { duration: 1000 } + } + } + + Image { + x: parent.width - width - control.rightPadding + y: (parent.height - height) / 2 + opacity: !control.enabled ? 0.5 : 1.0 + source: "qrc:/qt-project.org/imports/Qt/labs/controls/material/images/drop-indicator.png" + } + } + //! [background] + + //! [panel] + panel: T.Panel { + id: popup + contentItem: Rectangle { + // TODO: Panel::anchors + readonly property var above: popup.visible ? control.mapToItem(null, 0, -height) : Qt.point(0, 0) + readonly property var below: popup.visible ? control.mapToItem(null, 0, control.height) : Qt.point(0, 0) + + x: below.x + y: above.y >= 0 && below.y + height > control.Window.height ? above.y : below.y + width: control.width + height: listview.height + + color: control.Material.comboBoxColor + + layer.enabled: control.enabled + layer.effect: DropShadow { + verticalOffset: 1 + color: control.Material.dropShadowColor + samples: 15 + spread: 0.5 + + // TODO: Doesn't work because of QTBUG-49072 + Behavior on radius { + NumberAnimation { duration: 1000 } + } + } + + ListView { + id: listview + width: control.width + height: Math.min(200, contentHeight) // TODO: 396 + + clip: true + model: control.delegateModel + currentIndex: control.highlightedIndex + +// ScrollIndicator.vertical: ScrollIndicator { } + } + } + } + //! [panel] +} diff --git a/src/imports/controls/material/images/drop-indicator.png b/src/imports/controls/material/images/drop-indicator.png new file mode 100644 index 00000000..b4396ec6 Binary files /dev/null and b/src/imports/controls/material/images/drop-indicator.png differ diff --git a/src/imports/controls/material/images/drop-indicator@2x.png b/src/imports/controls/material/images/drop-indicator@2x.png new file mode 100644 index 00000000..1c711bc2 Binary files /dev/null and b/src/imports/controls/material/images/drop-indicator@2x.png differ diff --git a/src/imports/controls/material/images/drop-indicator@3x.png b/src/imports/controls/material/images/drop-indicator@3x.png new file mode 100644 index 00000000..06dd8bd2 Binary files /dev/null and b/src/imports/controls/material/images/drop-indicator@3x.png differ diff --git a/src/imports/controls/material/images/drop-indicator@4x.png b/src/imports/controls/material/images/drop-indicator@4x.png new file mode 100644 index 00000000..b2157c30 Binary files /dev/null and b/src/imports/controls/material/images/drop-indicator@4x.png differ diff --git a/src/imports/controls/material/material.pri b/src/imports/controls/material/material.pri index a238dcfe..1c71b9fa 100644 --- a/src/imports/controls/material/material.pri +++ b/src/imports/controls/material/material.pri @@ -13,6 +13,7 @@ QML_FILES += \ $$PWD/BusyIndicator.qml \ $$PWD/Button.qml \ $$PWD/CheckBox.qml \ + $$PWD/ComboBox.qml \ $$PWD/Dial.qml \ $$PWD/Drawer.qml \ $$PWD/Frame.qml \ diff --git a/src/imports/controls/material/qquickmaterialstyle.cpp b/src/imports/controls/material/qquickmaterialstyle.cpp index a3d2329a..bce5db21 100644 --- a/src/imports/controls/material/qquickmaterialstyle.cpp +++ b/src/imports/controls/material/qquickmaterialstyle.cpp @@ -724,6 +724,11 @@ QColor QQuickMaterialStyle::drawerBackgroundColor() const return dividerTextColorLight; } +QColor QQuickMaterialStyle::comboBoxColor() const +{ + return m_theme == Light ? "#ffffff" : backgroundColorDark; +} + QColor QQuickMaterialStyle::color(QQuickMaterialStyle::Color color, QQuickMaterialStyle::Shade shade) const { int count = sizeof(colors) / sizeof(colors[0]); diff --git a/src/imports/controls/material/qquickmaterialstyle_p.h b/src/imports/controls/material/qquickmaterialstyle_p.h index 69891b9c..e657fd57 100644 --- a/src/imports/controls/material/qquickmaterialstyle_p.h +++ b/src/imports/controls/material/qquickmaterialstyle_p.h @@ -92,6 +92,7 @@ class QQuickMaterialStyle : public QQuickStyle Q_PROPERTY(QColor scrollBarColor READ scrollBarColor NOTIFY paletteChanged FINAL) Q_PROPERTY(QColor scrollBarPressedColor READ scrollBarPressedColor NOTIFY paletteChanged FINAL) Q_PROPERTY(QColor drawerBackgroundColor READ drawerBackgroundColor NOTIFY paletteChanged FINAL) + Q_PROPERTY(QColor comboBoxColor READ comboBoxColor NOTIFY paletteChanged FINAL) public: enum Theme { @@ -199,6 +200,7 @@ public: QColor scrollBarColor() const; QColor scrollBarPressedColor() const; QColor drawerBackgroundColor() const; + QColor comboBoxColor() const; Q_INVOKABLE QColor color(Color color, Shade shade) const; diff --git a/src/imports/controls/material/qtlabsmaterialstyleplugin.qrc b/src/imports/controls/material/qtlabsmaterialstyleplugin.qrc index 6c7b65f1..8398d505 100644 --- a/src/imports/controls/material/qtlabsmaterialstyleplugin.qrc +++ b/src/imports/controls/material/qtlabsmaterialstyleplugin.qrc @@ -4,5 +4,9 @@ images/check@2x.png images/check@3x.png images/check@4x.png + images/drop-indicator.png + images/drop-indicator@2x.png + images/drop-indicator@3x.png + images/drop-indicator@4x.png diff --git a/src/imports/controls/qtlabscontrolsplugin.cpp b/src/imports/controls/qtlabscontrolsplugin.cpp index 079d843d..2d71284e 100644 --- a/src/imports/controls/qtlabscontrolsplugin.cpp +++ b/src/imports/controls/qtlabscontrolsplugin.cpp @@ -71,6 +71,7 @@ void QtLabsControlsPlugin::registerTypes(const char *uri) qmlRegisterType(selector->select(QStringLiteral("/BusyIndicator.qml")), uri, 1, 0, "BusyIndicator"); qmlRegisterType(selector->select(QStringLiteral("/Button.qml")), uri, 1, 0, "Button"); qmlRegisterType(selector->select(QStringLiteral("/CheckBox.qml")), uri, 1, 0, "CheckBox"); + qmlRegisterType(selector->select(QStringLiteral("/ComboBox.qml")), uri, 1, 0, "ComboBox"); qmlRegisterType(selector->select(QStringLiteral("/Dial.qml")), uri, 1, 0, "Dial"); qmlRegisterType(selector->select(QStringLiteral("/Drawer.qml")), uri, 1, 0, "Drawer"); qmlRegisterType(selector->select(QStringLiteral("/Frame.qml")), uri, 1, 0, "Frame"); diff --git a/src/imports/controls/qtlabscontrolsplugin.qrc b/src/imports/controls/qtlabscontrolsplugin.qrc index c54083ed..bebbe570 100644 --- a/src/imports/controls/qtlabscontrolsplugin.qrc +++ b/src/imports/controls/qtlabscontrolsplugin.qrc @@ -11,5 +11,9 @@ images/dial-indicator@2x.png images/dial-indicator@3x.png images/dial-indicator@4x.png + images/drop-indicator.png + images/drop-indicator@2x.png + images/drop-indicator@3x.png + images/drop-indicator@4x.png diff --git a/src/imports/controls/universal/ComboBox.qml b/src/imports/controls/universal/ComboBox.qml new file mode 100644 index 00000000..0fdcb894 --- /dev/null +++ b/src/imports/controls/universal/ComboBox.qml @@ -0,0 +1,142 @@ +/**************************************************************************** +** +** Copyright (C) 2015 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the Qt Labs Controls module of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL3$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see http://www.qt.io/terms-conditions. For further +** information use the contact form at http://www.qt.io/contact-us. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 3 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPLv3 included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 3 requirements +** will be met: https://www.gnu.org/licenses/lgpl.html. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 2.0 or later as published by the Free +** Software Foundation and appearing in the file LICENSE.GPL included in +** the packaging of this file. Please review the following information to +** ensure the GNU General Public License version 2.0 requirements will be +** met: http://www.gnu.org/licenses/gpl-2.0.html. +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.6 +import QtQuick.Window 2.2 +import Qt.labs.templates 1.0 as T +import Qt.labs.controls.universal 1.0 + +T.ComboBox { + id: control + + implicitWidth: Math.max(background ? background.implicitWidth : 0, + contentItem.implicitWidth + leftPadding + rightPadding) + implicitHeight: Math.max(background ? background.implicitHeight : 0, + contentItem.implicitHeight + topPadding + bottomPadding) + baselineOffset: contentItem.y + contentItem.baselineOffset + + spacing: 10 + topPadding: 5 + leftPadding: 12 + rightPadding: 10 + bottomPadding: 7 + + font.pixelSize: Universal.fontSize + font.family: Universal.fontFamily + + //! [delegate] + delegate: ItemDelegate { + width: control.width + text: control.textRole ? model[control.textRole] : modelData + highlighted: control.highlightedIndex === index + pressed: highlighted && control.pressed + } + //! [delegate] + + //! [contentItem] + contentItem: Text { + text: control.displayText + font: control.font + color: !control.enabled ? control.Universal.baseLowColor : control.Universal.baseHighColor + horizontalAlignment: Text.AlignLeft + verticalAlignment: Text.AlignVCenter + renderType: Text.NativeRendering + elide: Text.ElideRight + rightPadding: 12 + control.spacing + } + //! [contentItem] + + //! [background] + background: Rectangle { + implicitWidth: 120 + implicitHeight: 32 + + border.width: 2 // ComboBoxBorderThemeThickness + border.color: !control.enabled ? control.Universal.baseLowColor : + control.pressed || panel.visible ? control.Universal.baseMediumLowColor : control.Universal.baseMediumLowColor + color: !control.enabled ? control.Universal.baseLowColor : + control.pressed || panel.visible ? control.Universal.listMediumColor : control.Universal.altMediumLowColor + + Rectangle { + x: 2 + y: 2 + width: parent.width - 4 + height: parent.height - 4 + + visible: control.activeFocus + color: control.Universal.accentColor + opacity: control.Universal.theme === Universal.Light ? 0.4 : 0.6 + } + + Image { + id: checkmark + x: parent.width - width - control.rightPadding + y: (parent.height - height) / 2 + source: "image://universal/downarrow/" + (!control.enabled ? control.Universal.baseLowColor : control.Universal.baseMediumHighColor) + } + } + //! [background] + + //! [panel] + panel: T.Panel { + id: popup + contentItem: Rectangle { + // TODO: Panel::anchors + readonly property var above: popup.visible ? control.mapToItem(null, 0, control.height - height) : Qt.point(0, 0) + readonly property var below: popup.visible ? control.mapToItem(null, 0, 0) : Qt.point(0, 0) + + x: below.x + y: above.y >= 0 && below.y + height > control.Window.height ? above.y : below.y + width: control.width + height: listview.height + + color: control.Universal.chromeMediumLowColor + + ListView { + id: listview + width: control.width + height: Math.min(200, contentHeight) // TODO: 396 + + clip: true + model: control.delegateModel + currentIndex: control.highlightedIndex + +// ScrollIndicator.vertical: ScrollIndicator { } + } + } + } + //! [panel] +} diff --git a/src/imports/controls/universal/images/downarrow.png b/src/imports/controls/universal/images/downarrow.png new file mode 100644 index 00000000..fef7b0f2 Binary files /dev/null and b/src/imports/controls/universal/images/downarrow.png differ diff --git a/src/imports/controls/universal/images/downarrow@2x.png b/src/imports/controls/universal/images/downarrow@2x.png new file mode 100644 index 00000000..eabf658a Binary files /dev/null and b/src/imports/controls/universal/images/downarrow@2x.png differ diff --git a/src/imports/controls/universal/images/downarrow@3x.png b/src/imports/controls/universal/images/downarrow@3x.png new file mode 100644 index 00000000..f9d39a2c Binary files /dev/null and b/src/imports/controls/universal/images/downarrow@3x.png differ diff --git a/src/imports/controls/universal/images/downarrow@4x.png b/src/imports/controls/universal/images/downarrow@4x.png new file mode 100644 index 00000000..b252b588 Binary files /dev/null and b/src/imports/controls/universal/images/downarrow@4x.png differ diff --git a/src/imports/controls/universal/qtlabsuniversalstyleplugin.qrc b/src/imports/controls/universal/qtlabsuniversalstyleplugin.qrc index 6cd57f89..5edda119 100644 --- a/src/imports/controls/universal/qtlabsuniversalstyleplugin.qrc +++ b/src/imports/controls/universal/qtlabsuniversalstyleplugin.qrc @@ -4,6 +4,10 @@ images/checkmark@2x.png images/checkmark@3x.png images/checkmark@4x.png + images/downarrow.png + images/downarrow@2x.png + images/downarrow@3x.png + images/downarrow@4x.png images/leftarrow.png images/leftarrow@2x.png images/leftarrow@3x.png diff --git a/src/imports/controls/universal/universal.pri b/src/imports/controls/universal/universal.pri index 4865e499..7348ac84 100644 --- a/src/imports/controls/universal/universal.pri +++ b/src/imports/controls/universal/universal.pri @@ -3,6 +3,7 @@ QML_FILES += \ $$PWD/BusyIndicator.qml \ $$PWD/Button.qml \ $$PWD/CheckBox.qml \ + $$PWD/ComboBox.qml \ $$PWD/Dial.qml \ $$PWD/Frame.qml \ $$PWD/GroupBox.qml \ -- cgit v1.2.3