From 38c47c0a7cf9e40aedea7fadefc82e448a740c45 Mon Sep 17 00:00:00 2001 From: J-P Nurmi Date: Tue, 8 Dec 2015 15:19:01 +0100 Subject: Introduce Pane Provides a background color that matches with the application style and theme. Change-Id: I5e7ea4fededaaf46687a2ea0391f43dbf55e3b42 Reviewed-by: Mitch Curtis --- src/imports/controls/Pane.qml | 60 ++++++++++++++++++++ src/imports/controls/controls.pri | 1 + .../doc/images/qtlabscontrols-pane-background.png | Bin 0 -> 341 bytes .../controls/doc/images/qtlabscontrols-pane.png | Bin 0 -> 5022 bytes .../snippets/qtlabscontrols-pane-background.qml | 38 +++++++++++++ .../controls/doc/snippets/qtlabscontrols-pane.qml | 41 ++++++++++++++ .../doc/src/qtlabscontrols-containers.qdoc | 7 +++ .../controls/doc/src/qtlabscontrols-customize.qdoc | 11 ++++ src/imports/controls/material/Pane.qml | 61 +++++++++++++++++++++ src/imports/controls/material/material.pri | 1 + src/imports/controls/qtlabscontrolsplugin.cpp | 1 + src/imports/controls/universal/Pane.qml | 61 +++++++++++++++++++++ src/imports/controls/universal/universal.pri | 1 + 13 files changed, 283 insertions(+) create mode 100644 src/imports/controls/Pane.qml create mode 100644 src/imports/controls/doc/images/qtlabscontrols-pane-background.png create mode 100644 src/imports/controls/doc/images/qtlabscontrols-pane.png create mode 100644 src/imports/controls/doc/snippets/qtlabscontrols-pane-background.qml create mode 100644 src/imports/controls/doc/snippets/qtlabscontrols-pane.qml create mode 100644 src/imports/controls/material/Pane.qml create mode 100644 src/imports/controls/universal/Pane.qml (limited to 'src/imports/controls') diff --git a/src/imports/controls/Pane.qml b/src/imports/controls/Pane.qml new file mode 100644 index 00000000..7bd72493 --- /dev/null +++ b/src/imports/controls/Pane.qml @@ -0,0 +1,60 @@ +/**************************************************************************** +** +** 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 Qt.labs.templates 1.0 as T + +T.Frame { + id: control + + implicitWidth: Math.max(background ? background.implicitWidth : 0, contentWidth + leftPadding + rightPadding) + implicitHeight: Math.max(background ? background.implicitHeight : 0, contentHeight + topPadding + bottomPadding) + + contentWidth: contentChildren.length === 1 ? contentChildren[0].implicitWidth : 0 + contentHeight: contentChildren.length === 1 ? contentChildren[0].implicitHeight : 0 + + padding: 6 + + //! [contentItem] + contentItem: Item { } + //! [contentItem] + + //! [background] + background: Rectangle { + color: "#ffffff" + } + //! [background] +} diff --git a/src/imports/controls/controls.pri b/src/imports/controls/controls.pri index 63e3373e..7cd0af87 100644 --- a/src/imports/controls/controls.pri +++ b/src/imports/controls/controls.pri @@ -12,6 +12,7 @@ QML_FILES = \ Label.qml \ Menu.qml \ MenuItem.qml \ + Pane.qml \ PageIndicator.qml \ ProgressBar.qml \ RadioButton.qml \ diff --git a/src/imports/controls/doc/images/qtlabscontrols-pane-background.png b/src/imports/controls/doc/images/qtlabscontrols-pane-background.png new file mode 100644 index 00000000..a379d915 Binary files /dev/null and b/src/imports/controls/doc/images/qtlabscontrols-pane-background.png differ diff --git a/src/imports/controls/doc/images/qtlabscontrols-pane.png b/src/imports/controls/doc/images/qtlabscontrols-pane.png new file mode 100644 index 00000000..ba0c0479 Binary files /dev/null and b/src/imports/controls/doc/images/qtlabscontrols-pane.png differ diff --git a/src/imports/controls/doc/snippets/qtlabscontrols-pane-background.qml b/src/imports/controls/doc/snippets/qtlabscontrols-pane-background.qml new file mode 100644 index 00000000..d1d9f22f --- /dev/null +++ b/src/imports/controls/doc/snippets/qtlabscontrols-pane-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 + +Pane { + width: 100 + height: 100 + background: Rectangle { + color: 'transparent' + border.color: 'red' + } +} diff --git a/src/imports/controls/doc/snippets/qtlabscontrols-pane.qml b/src/imports/controls/doc/snippets/qtlabscontrols-pane.qml new file mode 100644 index 00000000..09bfa6a0 --- /dev/null +++ b/src/imports/controls/doc/snippets/qtlabscontrols-pane.qml @@ -0,0 +1,41 @@ +/**************************************************************************** +** +** 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 QtQuick.Layouts 1.0 +import Qt.labs.controls 1.0 + +//! [1] +Pane { + ColumnLayout { + anchors.fill: parent + CheckBox { text: qsTr("E-mail") } + CheckBox { text: qsTr("Calendar") } + CheckBox { text: qsTr("Contacts") } + } +} +//! [1] diff --git a/src/imports/controls/doc/src/qtlabscontrols-containers.qdoc b/src/imports/controls/doc/src/qtlabscontrols-containers.qdoc index cf47499c..a627a26a 100644 --- a/src/imports/controls/doc/src/qtlabscontrols-containers.qdoc +++ b/src/imports/controls/doc/src/qtlabscontrols-containers.qdoc @@ -57,6 +57,13 @@ \l GroupBox is used to layout a logical group of controls together, within a titled visual frame. + \section1 Pane Control + + \image qtlabscontrols-pane.png + + \l Pane provides a background color that matches with the application + style and theme. + \section1 StackView Control \image qtlabscontrols-stackview-wireframe.png diff --git a/src/imports/controls/doc/src/qtlabscontrols-customize.qdoc b/src/imports/controls/doc/src/qtlabscontrols-customize.qdoc index 524cd23a..4aff46a4 100644 --- a/src/imports/controls/doc/src/qtlabscontrols-customize.qdoc +++ b/src/imports/controls/doc/src/qtlabscontrols-customize.qdoc @@ -260,6 +260,17 @@ TODO + \section1 Customizing Pane + + Pane consists of a \l {Control::background}{background}. + + \section3 Background + + \image qtlabscontrols-pane-background.png + + \snippet Pane.qml background + + \section1 Customizing ProgressBar ProgressBar consists of two visual items: \l {Control::background}{background} diff --git a/src/imports/controls/material/Pane.qml b/src/imports/controls/material/Pane.qml new file mode 100644 index 00000000..abb94808 --- /dev/null +++ b/src/imports/controls/material/Pane.qml @@ -0,0 +1,61 @@ +/**************************************************************************** +** +** 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 Qt.labs.templates 1.0 as T +import Qt.labs.controls.material 1.0 + +T.Frame { + id: control + + implicitWidth: Math.max(background ? background.implicitWidth : 0, contentWidth + leftPadding + rightPadding) + implicitHeight: Math.max(background ? background.implicitHeight : 0, contentHeight + topPadding + bottomPadding) + + contentWidth: contentChildren.length === 1 ? contentChildren[0].implicitWidth : 0 + contentHeight: contentChildren.length === 1 ? contentChildren[0].implicitHeight : 0 + + padding: 6 + + //! [contentItem] + contentItem: Item { } + //! [contentItem] + + //! [background] + background: Rectangle { + color: control.Material.backgroundColor + } + //! [background] +} diff --git a/src/imports/controls/material/material.pri b/src/imports/controls/material/material.pri index 1c71b9fa..a1e99550 100644 --- a/src/imports/controls/material/material.pri +++ b/src/imports/controls/material/material.pri @@ -20,6 +20,7 @@ QML_FILES += \ $$PWD/GroupBox.qml \ $$PWD/ItemDelegate.qml \ $$PWD/Label.qml \ + $$PWD/Pane.qml \ $$PWD/PageIndicator.qml \ $$PWD/ProgressBar.qml \ $$PWD/RadioButton.qml \ diff --git a/src/imports/controls/qtlabscontrolsplugin.cpp b/src/imports/controls/qtlabscontrolsplugin.cpp index 2d71284e..fef5e41e 100644 --- a/src/imports/controls/qtlabscontrolsplugin.cpp +++ b/src/imports/controls/qtlabscontrolsplugin.cpp @@ -80,6 +80,7 @@ void QtLabsControlsPlugin::registerTypes(const char *uri) qmlRegisterType(selector->select(QStringLiteral("/Label.qml")), uri, 1, 0, "Label"); qmlRegisterType(selector->select(QStringLiteral("/Menu.qml")), uri, 1, 0, "Menu"); qmlRegisterType(selector->select(QStringLiteral("/MenuItem.qml")), uri, 1, 0, "MenuItem"); + qmlRegisterType(selector->select(QStringLiteral("/Pane.qml")), uri, 1, 0, "Pane"); qmlRegisterType(selector->select(QStringLiteral("/PageIndicator.qml")), uri, 1, 0, "PageIndicator"); qmlRegisterType(selector->select(QStringLiteral("/ProgressBar.qml")), uri, 1, 0, "ProgressBar"); qmlRegisterType(selector->select(QStringLiteral("/RadioButton.qml")), uri, 1, 0, "RadioButton"); diff --git a/src/imports/controls/universal/Pane.qml b/src/imports/controls/universal/Pane.qml new file mode 100644 index 00000000..8477dccf --- /dev/null +++ b/src/imports/controls/universal/Pane.qml @@ -0,0 +1,61 @@ +/**************************************************************************** +** +** 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 Qt.labs.templates 1.0 as T +import Qt.labs.controls.universal 1.0 + +T.Frame { + id: control + + implicitWidth: Math.max(background ? background.implicitWidth : 0, contentWidth + leftPadding + rightPadding) + implicitHeight: Math.max(background ? background.implicitHeight : 0, contentHeight + topPadding + bottomPadding) + + contentWidth: contentChildren.length === 1 ? contentChildren[0].implicitWidth : 0 + contentHeight: contentChildren.length === 1 ? contentChildren[0].implicitHeight : 0 + + padding: 12 + + //! [contentItem] + contentItem: Item { } + //! [contentItem] + + //! [background] + background: Rectangle { + color: Universal.altHighColor + } + //! [background] +} diff --git a/src/imports/controls/universal/universal.pri b/src/imports/controls/universal/universal.pri index c0f4eb66..12c939c1 100644 --- a/src/imports/controls/universal/universal.pri +++ b/src/imports/controls/universal/universal.pri @@ -11,6 +11,7 @@ QML_FILES += \ $$PWD/Label.qml \ $$PWD/Menu.qml \ $$PWD/MenuItem.qml \ + $$PWD/Pane.qml \ $$PWD/PageIndicator.qml \ $$PWD/ProgressBar.qml \ $$PWD/RadioButton.qml \ -- cgit v1.2.3