diff options
author | Mitch Curtis <mitch.curtis@qt.io> | 2016-07-20 11:05:11 +0200 |
---|---|---|
committer | Mitch Curtis <mitch.curtis@qt.io> | 2016-07-21 11:27:45 +0000 |
commit | 426854af0a4c17cc5c6ce98a4b34ba97573e7521 (patch) | |
tree | 3bba8e110634e72b233aeda21a512bae86e8b6da /src/imports | |
parent | 98cfcabe8accf733d8ef280889d7be8205a837ad (diff) |
Add ToolSeparator
ToolSeparator is used to visually distinguish between groups of items
in a toolbar by separating them with a line. It can be used in
horizontal or vertical toolbars.
Task-number: QTBUG-54862
Change-Id: Ie68e680510428ad19e7f80268063af07b61100eb
Reviewed-by: J-P Nurmi <jpnurmi@qt.io>
Diffstat (limited to 'src/imports')
20 files changed, 465 insertions, 0 deletions
diff --git a/src/imports/controls/ToolSeparator.qml b/src/imports/controls/ToolSeparator.qml new file mode 100644 index 00000000..7e2192a2 --- /dev/null +++ b/src/imports/controls/ToolSeparator.qml @@ -0,0 +1,57 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the Qt Quick Controls 2 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.Templates 2.1 as T + +T.ToolSeparator { + id: control + + implicitWidth: Math.max(background ? background.implicitWidth : 0, contentItem.implicitWidth + leftPadding + rightPadding) + implicitHeight: Math.max(background ? background.implicitHeight : 0, contentItem.implicitHeight + topPadding + bottomPadding) + + padding: vertical ? 6 : 2 + topPadding: vertical ? 2 : 6 + bottomPadding: vertical ? 2 : 6 + + //! [contentItem] + contentItem: Rectangle { + implicitWidth: vertical ? 1 : 30 + implicitHeight: vertical ? 30 : 1 + color: "#ccc" + } + //! [contentItem] +} diff --git a/src/imports/controls/controls.pri b/src/imports/controls/controls.pri index e7e2d7bd..618a8650 100644 --- a/src/imports/controls/controls.pri +++ b/src/imports/controls/controls.pri @@ -51,6 +51,7 @@ QML_CONTROLS = \ TextField.qml \ ToolBar.qml \ ToolButton.qml \ + ToolSeparator.qml \ ToolTip.qml \ Tumbler.qml diff --git a/src/imports/controls/designer/ToolSeparatorSpecifics.qml b/src/imports/controls/designer/ToolSeparatorSpecifics.qml new file mode 100644 index 00000000..2e967a6e --- /dev/null +++ b/src/imports/controls/designer/ToolSeparatorSpecifics.qml @@ -0,0 +1,71 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the Qt Quick Controls 2 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.8 +import HelperWidgets 2.0 +import QtQuick.Layouts 1.3 + +Column { + width: parent.width + + Section { + width: parent.width + caption: qsTr("ToolSeparator") + + SectionLayout { + Label { + text: qsTr("Orientation") + tooltip: qsTr("The orientation of the separator.") + } + SecondColumnLayout { + ComboBox { + backendValue: backendValues.orientation + model: [ "Horizontal", "Vertical" ] + scope: "Qt" + Layout.fillWidth: true + } + } + } + } + + ControlSection { + width: parent.width + } + + PaddingSection { + width: parent.width + } +} diff --git a/src/imports/controls/designer/images/toolseparator-icon.png b/src/imports/controls/designer/images/toolseparator-icon.png Binary files differnew file mode 100644 index 00000000..3d2e152f --- /dev/null +++ b/src/imports/controls/designer/images/toolseparator-icon.png diff --git a/src/imports/controls/designer/images/toolseparator-icon16.png b/src/imports/controls/designer/images/toolseparator-icon16.png Binary files differnew file mode 100644 index 00000000..97672506 --- /dev/null +++ b/src/imports/controls/designer/images/toolseparator-icon16.png diff --git a/src/imports/controls/designer/images/toolseparator-icon16@2x.png b/src/imports/controls/designer/images/toolseparator-icon16@2x.png Binary files differnew file mode 100644 index 00000000..979b6426 --- /dev/null +++ b/src/imports/controls/designer/images/toolseparator-icon16@2x.png diff --git a/src/imports/controls/designer/images/toolseparator-icon@2x.png b/src/imports/controls/designer/images/toolseparator-icon@2x.png Binary files differnew file mode 100644 index 00000000..19287154 --- /dev/null +++ b/src/imports/controls/designer/images/toolseparator-icon@2x.png diff --git a/src/imports/controls/designer/qtquickcontrols2.metainfo b/src/imports/controls/designer/qtquickcontrols2.metainfo index 81a6d914..af2c6d5c 100644 --- a/src/imports/controls/designer/qtquickcontrols2.metainfo +++ b/src/imports/controls/designer/qtquickcontrols2.metainfo @@ -388,6 +388,19 @@ MetaInfo { } Type { + name: "QtQuick.Controls.ToolSeparator" + icon: "images/toolseparator-icon16.png" + + ItemLibraryEntry { + name: "ToolSeparator" + category: "Qt Quick - Controls 2" + libraryIcon: "images/toolseparator-icon.png" + version: "2.1" + requiredImport: "QtQuick.Controls" + } + } + + Type { name: "QtQuick.Controls.Tumbler" icon: "images/tumbler-icon16.png" diff --git a/src/imports/controls/doc/images/qtquickcontrols2-toolseparator-custom.png b/src/imports/controls/doc/images/qtquickcontrols2-toolseparator-custom.png Binary files differnew file mode 100644 index 00000000..4f423154 --- /dev/null +++ b/src/imports/controls/doc/images/qtquickcontrols2-toolseparator-custom.png diff --git a/src/imports/controls/doc/images/qtquickcontrols2-toolseparator.png b/src/imports/controls/doc/images/qtquickcontrols2-toolseparator.png Binary files differnew file mode 100644 index 00000000..253c429b --- /dev/null +++ b/src/imports/controls/doc/images/qtquickcontrols2-toolseparator.png diff --git a/src/imports/controls/doc/snippets/qtquickcontrols2-toolseparator-custom.qml b/src/imports/controls/doc/snippets/qtquickcontrols2-toolseparator-custom.qml new file mode 100644 index 00000000..7495a993 --- /dev/null +++ b/src/imports/controls/doc/snippets/qtquickcontrols2-toolseparator-custom.qml @@ -0,0 +1,69 @@ +/**************************************************************************** +** +** Copyright (C) 2016 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.8 +import QtQuick.Layouts 1.1 +import QtQuick.Window 2.2 +import QtQuick.Controls 2.1 + +//! [file] +ToolBar { + RowLayout { + anchors.fill: parent + + ToolButton { + text: qsTr("Action 1") + } + ToolButton { + text: qsTr("Action 2") + } + + ToolSeparator { + padding: vertical ? 10 : 2 + topPadding: vertical ? 2 : 10 + bottomPadding: vertical ? 2 : 10 + + contentItem: Rectangle { + implicitWidth: parent.vertical ? 1 : 24 + implicitHeight: parent.vertical ? 24 : 1 + color: "#c3c3c3" + } + } + + ToolButton { + text: qsTr("Action 3") + } + ToolButton { + text: qsTr("Action 4") + } + + Item { + Layout.fillWidth: true + } + } +} +//! [file] diff --git a/src/imports/controls/doc/snippets/qtquickcontrols2-toolseparator.qml b/src/imports/controls/doc/snippets/qtquickcontrols2-toolseparator.qml new file mode 100644 index 00000000..7770d14c --- /dev/null +++ b/src/imports/controls/doc/snippets/qtquickcontrols2-toolseparator.qml @@ -0,0 +1,68 @@ +/**************************************************************************** +** +** Copyright (C) 2016 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.8 +import QtQuick.Layouts 1.1 +import QtQuick.Window 2.2 +import QtQuick.Controls 2.1 + +//! [1] +ToolBar { + RowLayout { + anchors.fill: parent + + ToolButton { + text: qsTr("Action 1") + } + ToolButton { + text: qsTr("Action 2") + } + + ToolSeparator {} + + ToolButton { + text: qsTr("Action 3") + } + ToolButton { + text: qsTr("Action 4") + } + + ToolSeparator {} + + ToolButton { + text: qsTr("Action 5") + } + ToolButton { + text: qsTr("Action 6") + } + + Item { + Layout.fillWidth: true + } + } +} +//! [1] diff --git a/src/imports/controls/doc/src/qtquickcontrols2-customize.qdoc b/src/imports/controls/doc/src/qtquickcontrols2-customize.qdoc index 6717c7c1..08b419d7 100644 --- a/src/imports/controls/doc/src/qtquickcontrols2-customize.qdoc +++ b/src/imports/controls/doc/src/qtquickcontrols2-customize.qdoc @@ -673,6 +673,16 @@ \snippet qtquickcontrols2-toolbutton-custom.qml file + \section2 Customizing ToolSeparator + + ToolSeparator consists of two visual items: \l {Control::background}{background} + and \l {Control::contentItem}{content item}. + + \image qtquickcontrols2-toolseparator-custom.png + + \snippet qtquickcontrols2-toolseparator-custom.qml file + + \section2 Customizing ToolTip ToolTip consists of two visual items: \l {Popup::background}{background} diff --git a/src/imports/controls/doc/src/qtquickcontrols2-separators.qdoc b/src/imports/controls/doc/src/qtquickcontrols2-separators.qdoc new file mode 100644 index 00000000..2f35fa3e --- /dev/null +++ b/src/imports/controls/doc/src/qtquickcontrols2-separators.qdoc @@ -0,0 +1,53 @@ +/**************************************************************************** +** +** Copyright (C) 2016 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$ +** +****************************************************************************/ + +/*! + \page qtquickcontrols2-separators.html + \title Separator Controls + \ingroup qtquickcontrols2-guidelines + \brief Guidelines for separator controls + + Qt Quick Controls 2 offers a selection of separators. + + \annotatedlist qtquickcontrols2-separators + + Each type of separator has its own specific use case. The following + sections offer guidelines for choosing the appropriate type of separator, + depending on the use case. + + \section1 ToolSeparator Control + + \image qtquickcontrols2-toolseparator.png + + \l ToolSeparator should be used to separate items (typically ToolButton + controls) in a ToolBar. It can be used in horizontal or vertical toolbars. + + \section1 Related Information + \list + \li \l {Qt Quick Controls 2 Guidelines} + \endlist +*/ diff --git a/src/imports/controls/material/ToolSeparator.qml b/src/imports/controls/material/ToolSeparator.qml new file mode 100644 index 00000000..f48fffd4 --- /dev/null +++ b/src/imports/controls/material/ToolSeparator.qml @@ -0,0 +1,59 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the Qt Quick Controls 2 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.Templates 2.1 as T +import QtQuick.Controls.Material 2.1 + +T.ToolSeparator { + id: control + + implicitWidth: Math.max(background ? background.implicitWidth : 0, contentItem.implicitWidth + leftPadding + rightPadding) + implicitHeight: Math.max(background ? background.implicitHeight : 0, contentItem.implicitHeight + topPadding + bottomPadding) + + leftPadding: vertical ? 12 : 5 + rightPadding: vertical ? 12 : 5 + topPadding: vertical ? 5 : 12 + bottomPadding: vertical ? 5 : 12 + + //! [contentItem] + contentItem: Rectangle { + implicitWidth: vertical ? 1 : 38 + implicitHeight: vertical ? 38 : 1 + color: control.Material.hintTextColor + } + //! [contentItem] +} diff --git a/src/imports/controls/material/material.pri b/src/imports/controls/material/material.pri index 25057352..d4ad1d8e 100644 --- a/src/imports/controls/material/material.pri +++ b/src/imports/controls/material/material.pri @@ -59,5 +59,6 @@ QML_FILES += \ $$PWD/TextField.qml \ $$PWD/ToolBar.qml \ $$PWD/ToolButton.qml \ + $$PWD/ToolSeparator.qml \ $$PWD/ToolTip.qml \ $$PWD/Tumbler.qml diff --git a/src/imports/controls/qtquickcontrols2plugin.cpp b/src/imports/controls/qtquickcontrols2plugin.cpp index f0ddf5db..e9108934 100644 --- a/src/imports/controls/qtquickcontrols2plugin.cpp +++ b/src/imports/controls/qtquickcontrols2plugin.cpp @@ -141,6 +141,7 @@ void QtQuickControls2Plugin::registerTypes(const char *uri) qmlRegisterType<QQuickContainer,1>(uri, 2, 1, "Container"); qmlRegisterType(selector.select(QStringLiteral("Dialog.qml")), uri, 2, 1, "Dialog"); qmlRegisterType(selector.select(QStringLiteral("DialogButtonBox.qml")), uri, 2, 1, "DialogButtonBox"); + qmlRegisterType(selector.select(QStringLiteral("ToolSeparator.qml")), uri, 2, 1, "ToolSeparator"); } void QtQuickControls2Plugin::initializeEngine(QQmlEngine *engine, const char *uri) diff --git a/src/imports/controls/universal/ToolSeparator.qml b/src/imports/controls/universal/ToolSeparator.qml new file mode 100644 index 00000000..31990954 --- /dev/null +++ b/src/imports/controls/universal/ToolSeparator.qml @@ -0,0 +1,59 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the Qt Quick Controls 2 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.Templates 2.1 as T +import QtQuick.Controls.Universal 2.1 + +T.ToolSeparator { + id: control + + implicitWidth: Math.max(background ? background.implicitWidth : 0, contentItem.implicitWidth + leftPadding + rightPadding) + implicitHeight: Math.max(background ? background.implicitHeight : 0, contentItem.implicitHeight + topPadding + bottomPadding) + + leftPadding: vertical ? 16 : 12 + rightPadding: vertical ? 15 : 12 + topPadding: vertical ? 12 : 16 + bottomPadding: vertical ? 12 : 15 + + //! [contentItem] + contentItem: Rectangle { + implicitWidth: vertical ? 1 : 20 + implicitHeight: vertical ? 20 : 1 + color: control.Universal.baseMediumLowColor + } + //! [contentItem] +} diff --git a/src/imports/controls/universal/universal.pri b/src/imports/controls/universal/universal.pri index 08388f98..2be05ac2 100644 --- a/src/imports/controls/universal/universal.pri +++ b/src/imports/controls/universal/universal.pri @@ -40,6 +40,7 @@ QML_FILES += \ $$PWD/TextField.qml \ $$PWD/ToolBar.qml \ $$PWD/ToolButton.qml \ + $$PWD/ToolSeparator.qml \ $$PWD/ToolTip.qml \ $$PWD/Tumbler.qml diff --git a/src/imports/templates/qtquicktemplates2plugin.cpp b/src/imports/templates/qtquicktemplates2plugin.cpp index ea26bbed..c19491c2 100644 --- a/src/imports/templates/qtquicktemplates2plugin.cpp +++ b/src/imports/templates/qtquicktemplates2plugin.cpp @@ -80,6 +80,7 @@ #include <QtQuickTemplates2/private/qquicktextfield_p.h> #include <QtQuickTemplates2/private/qquicktoolbar_p.h> #include <QtQuickTemplates2/private/qquicktoolbutton_p.h> +#include <QtQuickTemplates2/private/qquicktoolseparator_p.h> #include <QtQuickTemplates2/private/qquicktooltip_p.h> #include <QtQuickTemplates2/private/qquicktumbler_p.h> @@ -189,6 +190,7 @@ void QtQuickTemplates2Plugin::registerTypes(const char *uri) qmlRegisterType<QQuickSwipeView, 1>(uri, 2, 1, "SwipeView"); qmlRegisterType<QQuickTextArea, 1>(uri, 2, 1, "TextArea"); qmlRegisterType<QQuickTextField, 1>(uri, 2, 1, "TextField"); + qmlRegisterType<QQuickToolSeparator>(uri, 2, 1, "ToolSeparator"); qmlRegisterType<QQuickTumbler, 1>(uri, 2, 1, "Tumbler"); } |