From 508bb6ddde831fb0d0b7065b39d99be01b4e4771 Mon Sep 17 00:00:00 2001 From: Mitch Curtis Date: Thu, 21 Jul 2016 16:04:18 +0200 Subject: Add MenuSeparator [ChangeLog][Controls] Added MenuSeparator to visually distinguish between groups of items in a menu. Change-Id: I7a52910b19633ed1188c90ca56c92346a28d4d5c Task-number: QTBUG-54862 Reviewed-by: J-P Nurmi --- src/imports/controls/MenuSeparator.qml | 57 +++++++++++++++++ src/imports/controls/controls.pri | 1 + .../qtquickcontrols2-menuseparator-custom.png | Bin 0 -> 5574 bytes .../doc/images/qtquickcontrols2-menuseparator.png | Bin 0 -> 5614 bytes .../qtquickcontrols2-menuseparator-custom.qml | 69 +++++++++++++++++++++ .../snippets/qtquickcontrols2-menuseparator.qml | 60 ++++++++++++++++++ .../doc/src/qtquickcontrols2-customize.qdoc | 17 +++++ .../doc/src/qtquickcontrols2-separators.qdoc | 10 +++ src/imports/controls/material/MenuSeparator.qml | 55 ++++++++++++++++ src/imports/controls/material/material.pri | 1 + src/imports/controls/qtquickcontrols2plugin.cpp | 1 + src/imports/controls/universal/MenuSeparator.qml | 60 ++++++++++++++++++ src/imports/controls/universal/universal.pri | 1 + 13 files changed, 332 insertions(+) create mode 100644 src/imports/controls/MenuSeparator.qml create mode 100644 src/imports/controls/doc/images/qtquickcontrols2-menuseparator-custom.png create mode 100644 src/imports/controls/doc/images/qtquickcontrols2-menuseparator.png create mode 100644 src/imports/controls/doc/snippets/qtquickcontrols2-menuseparator-custom.qml create mode 100644 src/imports/controls/doc/snippets/qtquickcontrols2-menuseparator.qml create mode 100644 src/imports/controls/material/MenuSeparator.qml create mode 100644 src/imports/controls/universal/MenuSeparator.qml (limited to 'src/imports/controls') diff --git a/src/imports/controls/MenuSeparator.qml b/src/imports/controls/MenuSeparator.qml new file mode 100644 index 00000000..f74047bb --- /dev/null +++ b/src/imports/controls/MenuSeparator.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.MenuSeparator { + 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: 2 + topPadding: padding + 4 + bottomPadding: padding + 4 + + //! [contentItem] + contentItem: Rectangle { + implicitWidth: 188 + implicitHeight: 1 + color: "#ccc" + } + //! [contentItem] +} diff --git a/src/imports/controls/controls.pri b/src/imports/controls/controls.pri index 618a8650..9eeb2c1f 100644 --- a/src/imports/controls/controls.pri +++ b/src/imports/controls/controls.pri @@ -26,6 +26,7 @@ QML_CONTROLS = \ Label.qml \ Menu.qml \ MenuItem.qml \ + MenuSeparator.qml \ Page.qml \ PageIndicator.qml \ Pane.qml \ diff --git a/src/imports/controls/doc/images/qtquickcontrols2-menuseparator-custom.png b/src/imports/controls/doc/images/qtquickcontrols2-menuseparator-custom.png new file mode 100644 index 00000000..48785b73 Binary files /dev/null and b/src/imports/controls/doc/images/qtquickcontrols2-menuseparator-custom.png differ diff --git a/src/imports/controls/doc/images/qtquickcontrols2-menuseparator.png b/src/imports/controls/doc/images/qtquickcontrols2-menuseparator.png new file mode 100644 index 00000000..beb1cfeb Binary files /dev/null and b/src/imports/controls/doc/images/qtquickcontrols2-menuseparator.png differ diff --git a/src/imports/controls/doc/snippets/qtquickcontrols2-menuseparator-custom.qml b/src/imports/controls/doc/snippets/qtquickcontrols2-menuseparator-custom.qml new file mode 100644 index 00000000..b5d8b18b --- /dev/null +++ b/src/imports/controls/doc/snippets/qtquickcontrols2-menuseparator-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$ +** +****************************************************************************/ + +//! [file] +import QtQuick 2.6 +import QtQuick.Controls 2.1 + +Item { + id: window + width: menu.contentItem.width + height: menu.contentItem.height + visible: true + +// Indent it like this so that the indenting in the generated doc is normal. +Menu { + id: menu + contentItem.parent: window + + MenuItem { + text: qsTr("New...") + } + MenuItem { + text: qsTr("Open...") + } + MenuItem { + text: qsTr("Save") + } + + MenuSeparator { + padding: 0 + topPadding: 12 + bottomPadding: 12 + contentItem: Rectangle { + implicitWidth: 200 + implicitHeight: 1 + color: "#1E000000" + } + } + + MenuItem { + text: qsTr("Exit") + } +} +} +//! [file] diff --git a/src/imports/controls/doc/snippets/qtquickcontrols2-menuseparator.qml b/src/imports/controls/doc/snippets/qtquickcontrols2-menuseparator.qml new file mode 100644 index 00000000..d41d3cf9 --- /dev/null +++ b/src/imports/controls/doc/snippets/qtquickcontrols2-menuseparator.qml @@ -0,0 +1,60 @@ +/**************************************************************************** +** +** 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$ +** +****************************************************************************/ + +//! [file] +import QtQuick 2.6 +import QtQuick.Controls 2.1 + +Item { + id: window + width: menu.contentItem.width + height: menu.contentItem.height + visible: true + +// Indent it like this so that the indenting in the generated doc is normal. +Menu { + id: menu + contentItem.parent: window + + MenuItem { + text: qsTr("New...") + } + MenuItem { + text: qsTr("Open...") + } + MenuItem { + text: qsTr("Save") + } + + MenuSeparator {} + + MenuItem { + text: qsTr("Exit") + } +} +} +//! [file] diff --git a/src/imports/controls/doc/src/qtquickcontrols2-customize.qdoc b/src/imports/controls/doc/src/qtquickcontrols2-customize.qdoc index 08b419d7..d98b70d1 100644 --- a/src/imports/controls/doc/src/qtquickcontrols2-customize.qdoc +++ b/src/imports/controls/doc/src/qtquickcontrols2-customize.qdoc @@ -471,6 +471,23 @@ \l {Customizing Button}{Button}. + \section2 Customizing MenuSeparator + + MenuSeparator consists of two visual items: \l {Control::background}{background} + and \l {Control::contentItem}{content item}. + + \image qtquickcontrols2-menuseparator-custom.png + + \quotefromfile qtquickcontrols2-menuseparator-custom.qml + \skipto import QtQuick 2.6 + \printuntil import QtQuick.Controls 2.1 + \skipto Menu + \printto contentItem.parent: window + \skipline contentItem.parent: window + \printuntil text: qsTr("Exit") + \printuntil } + \printuntil } + \section2 Customizing PageIndicator PageIndicator consists of a \l {Control::background}{background}, \l {Control::contentItem}{content item}, and \l {PageIndicator::delegate}{delegate}. diff --git a/src/imports/controls/doc/src/qtquickcontrols2-separators.qdoc b/src/imports/controls/doc/src/qtquickcontrols2-separators.qdoc index 2f35fa3e..c4ef1c76 100644 --- a/src/imports/controls/doc/src/qtquickcontrols2-separators.qdoc +++ b/src/imports/controls/doc/src/qtquickcontrols2-separators.qdoc @@ -39,6 +39,16 @@ sections offer guidelines for choosing the appropriate type of separator, depending on the use case. + \section1 MenuSeparator Control + + \image qtquickcontrols2-menuseparator.png + + \l MenuSeparator should be used to separate items (typically MenuItem + controls) in a Menu. Grouping related menu items together makes it easier + for the user to interact with the menu. For example, a typical desktop + user interface might have \c Undo and \c Redo items in one group, and + \c Cut, \c Copy and \c Paste in another. + \section1 ToolSeparator Control \image qtquickcontrols2-toolseparator.png diff --git a/src/imports/controls/material/MenuSeparator.qml b/src/imports/controls/material/MenuSeparator.qml new file mode 100644 index 00000000..c6ba401f --- /dev/null +++ b/src/imports/controls/material/MenuSeparator.qml @@ -0,0 +1,55 @@ +/**************************************************************************** +** +** 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.MenuSeparator { + id: control + + implicitWidth: Math.max(background ? background.implicitWidth : 0, contentItem.implicitWidth + leftPadding + rightPadding) + implicitHeight: Math.max(background ? background.implicitHeight : 0, contentItem.implicitHeight + topPadding + bottomPadding) + + topPadding: 8 + bottomPadding: 8 + + contentItem: Rectangle { + implicitWidth: 200 + implicitHeight: 1 + color: control.Material.dividerColor + } +} diff --git a/src/imports/controls/material/material.pri b/src/imports/controls/material/material.pri index d4ad1d8e..437edeee 100644 --- a/src/imports/controls/material/material.pri +++ b/src/imports/controls/material/material.pri @@ -32,6 +32,7 @@ QML_FILES += \ $$PWD/Label.qml \ $$PWD/Menu.qml \ $$PWD/MenuItem.qml \ + $$PWD/MenuSeparator.qml \ $$PWD/Page.qml \ $$PWD/PageIndicator.qml \ $$PWD/Pane.qml \ diff --git a/src/imports/controls/qtquickcontrols2plugin.cpp b/src/imports/controls/qtquickcontrols2plugin.cpp index e9108934..ee35d61a 100644 --- a/src/imports/controls/qtquickcontrols2plugin.cpp +++ b/src/imports/controls/qtquickcontrols2plugin.cpp @@ -141,6 +141,7 @@ void QtQuickControls2Plugin::registerTypes(const char *uri) qmlRegisterType(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("MenuSeparator.qml")), uri, 2, 1, "MenuSeparator"); qmlRegisterType(selector.select(QStringLiteral("ToolSeparator.qml")), uri, 2, 1, "ToolSeparator"); } diff --git a/src/imports/controls/universal/MenuSeparator.qml b/src/imports/controls/universal/MenuSeparator.qml new file mode 100644 index 00000000..d62d2b6c --- /dev/null +++ b/src/imports/controls/universal/MenuSeparator.qml @@ -0,0 +1,60 @@ +/**************************************************************************** +** +** 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.MenuSeparator { + 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: 12 + topPadding: 9 + bottomPadding: 10 + + contentItem: Rectangle { + implicitWidth: 188 + implicitHeight: 1 + color: control.Universal.baseMediumLowColor + } + + background: Rectangle { + color: control.Universal.altMediumLowColor + } +} diff --git a/src/imports/controls/universal/universal.pri b/src/imports/controls/universal/universal.pri index 2be05ac2..72edbc32 100644 --- a/src/imports/controls/universal/universal.pri +++ b/src/imports/controls/universal/universal.pri @@ -16,6 +16,7 @@ QML_FILES += \ $$PWD/Label.qml \ $$PWD/Menu.qml \ $$PWD/MenuItem.qml \ + $$PWD/MenuSeparator.qml \ $$PWD/Page.qml \ $$PWD/PageIndicator.qml \ $$PWD/Pane.qml \ -- cgit v1.2.3