diff options
author | Gabriel de Dietrich <gabriel.dedietrich@digia.com> | 2013-11-07 14:11:26 +0100 |
---|---|---|
committer | The Qt Project <gerrit-noreply@qt-project.org> | 2014-02-14 11:05:10 +0100 |
commit | e88bdffe644e53912dfbce95117555cb6a87bfd2 (patch) | |
tree | 43b34dfad7bdcbfdf0ac2ea322b580933bbeb2a3 /src/controls/Private | |
parent | 6cfba0c37dcdbe13681f8241d9d2989d1ac05db8 (diff) | |
download | qtquickcontrols-e88bdffe644e53912dfbce95117555cb6a87bfd2.tar.gz |
Introducing styling for Menu, MenuBar
MenuStyle
We expose the frame and item properties together with some
convenience properties (basically color related).
The menu item data is exposed via a styleData object, similarly to
what's done in TabViewStyle.
In addition, we introduce MenuStyle.menuItem which brings some
convenience when it comes to overriding subcontrols of the menu item.
MenuBarStyle
We expose background and menuBarItem. The menubar item's properties
are accessible through the styleData property in scope.
Style cascading
Additionally, MenuBarStyle has a menuStyle property that will apply
to all its menus and their submenus. Similarly, assigning a style
to a Menu object, will apply it to its submenus. It's still possible
to override the parent menu's style by declaring its own.
[ChangeLog][QtQuickControls][Styles]Menu and MenuBar are now styleable
Change-Id: Ib724b7a6426bdfce5da314620d51dfaa76f76500
Reviewed-by: Jens Bache-Wiig <jens.bache-wiig@digia.com>
Diffstat (limited to 'src/controls/Private')
-rw-r--r-- | src/controls/Private/ColumnMenuContent.qml | 52 | ||||
-rw-r--r-- | src/controls/Private/MenuContentItem.qml | 186 | ||||
-rw-r--r-- | src/controls/Private/MenuContentScroller.qml | 27 | ||||
-rw-r--r-- | src/controls/Private/MenuItemSubControls.qml | 49 | ||||
-rw-r--r-- | src/controls/Private/private.pri | 1 | ||||
-rw-r--r-- | src/controls/Private/qmldir | 1 | ||||
-rw-r--r-- | src/controls/Private/qquickstyleitem.cpp | 17 |
7 files changed, 211 insertions, 122 deletions
diff --git a/src/controls/Private/ColumnMenuContent.qml b/src/controls/Private/ColumnMenuContent.qml index bb21dcb9..5a56b007 100644 --- a/src/controls/Private/ColumnMenuContent.qml +++ b/src/controls/Private/ColumnMenuContent.qml @@ -45,11 +45,11 @@ Item { id: content property Component menuItemDelegate + property Component scrollIndicatorStyle property Component scrollerStyle property var itemsModel property int minWidth: 100 property real maxHeight: 800 - property int margin: 1 signal triggered(var item) @@ -59,43 +59,55 @@ Item { } width: Math.max(list.contentWidth, minWidth) - height: Math.min(list.contentHeight, fittedMaxHeight) + 2 * margin + height: Math.min(list.contentHeight, fittedMaxHeight) - readonly property int currentIndex: menu.__currentIndex + readonly property int currentIndex: __menu.__currentIndex property Item currentItem: null readonly property int itemHeight: (list.count > 0 && list.contentItem.children[0]) ? list.contentItem.children[0].height : 23 readonly property int fittingItems: Math.floor((maxHeight - downScroller.height) / itemHeight) readonly property real fittedMaxHeight: itemHeight * fittingItems + downScroller.height - readonly property bool shouldUseScrollers: scrollView.__style.useScrollers && itemsModel.length > fittingItems + readonly property bool shouldUseScrollers: scrollView.style === emptyScrollerStyle && itemsModel.length > fittingItems readonly property real upScrollerHeight: upScroller.visible ? upScroller.height : 0 readonly property real downScrollerHeight: downScroller.visible ? downScroller.height : 0 function updateCurrentItem(mouse) { var pos = mapToItem(list.contentItem, mouse.x, mouse.y) if (!currentItem || !currentItem.contains(Qt.point(pos.x - currentItem.x, pos.y - currentItem.y))) { - if (currentItem && !hoverArea.pressed && currentItem.isSubmenu) - currentItem.closeSubMenu() + if (currentItem && !hoverArea.pressed + && currentItem.styleData.type === MenuItemType.Menu) + currentItem.__closeSubMenu() currentItem = list.itemAt(pos.x, pos.y) if (currentItem) { - menu.__currentIndex = currentItem.menuItemIndex - if (currentItem.isSubmenu && !currentItem.menuItem.__popupVisible) - currentItem.showSubMenu(false) + __menu.__currentIndex = currentItem.__menuItemIndex + if (currentItem.styleData.type === MenuItemType.Menu + && !currentItem.__menuItem.__popupVisible) + currentItem.__showSubMenu(false) } else { - menu.__currentIndex = -1 + __menu.__currentIndex = -1 } } } + Component { + id: emptyScrollerStyle + Style { + padding { left: 0; right: 0; top: 0; bottom: 0 } + property bool scrollToClickedPosition: false + property Component frame: Item { visible: false } + property Component corner: Item { visible: false } + property Component __scrollbar: Item { visible: false } + } + } + ScrollView { id: scrollView anchors { fill: parent - topMargin: content.margin + upScrollerHeight - bottomMargin: downScrollerHeight - content.margin - 1 - rightMargin: -1 + topMargin: upScrollerHeight + bottomMargin: downScrollerHeight } - style: scrollerStyle + style: scrollerStyle || emptyScrollerStyle __wheelAreaScrollSpeed: itemHeight ListView { @@ -121,25 +133,23 @@ Item { onPositionChanged: updateCurrentItem(mouse) onReleased: content.triggered(currentItem) onExited: { - if (currentItem && !currentItem.menuItem.__popupVisible) { + if (currentItem && !currentItem.__menuItem.__popupVisible) { currentItem = null - menu.__currentIndex = -1 + __menu.__currentIndex = -1 } } MenuContentScroller { id: upScroller - direction: "up" + direction: Qt.UpArrow visible: shouldUseScrollers && !list.atYBeginning - x: margin function scrollABit() { list.contentY -= itemHeight } } MenuContentScroller { id: downScroller - direction: "down" + direction: Qt.DownArrow visible: shouldUseScrollers && !list.atYEnd - x: margin function scrollABit() { list.contentY += itemHeight } } } @@ -148,7 +158,7 @@ Item { interval: 1 running: true repeat: false - onTriggered: list.positionViewAtIndex(currentIndex, scrollView.__style.useScrollers + onTriggered: list.positionViewAtIndex(currentIndex, !scrollView.__style ? ListView.Center : ListView.Beginning) } diff --git a/src/controls/Private/MenuContentItem.qml b/src/controls/Private/MenuContentItem.qml index 7056b4e1..44312fa5 100644 --- a/src/controls/Private/MenuContentItem.qml +++ b/src/controls/Private/MenuContentItem.qml @@ -45,42 +45,66 @@ import QtQuick.Controls.Styles 1.1 Loader { id: menuFrameLoader - readonly property Style __style: styleLoader.item - readonly property Component menuItemStyle: __style ? __style.menuItem : null - - property var menu: root - property alias contentWidth: content.width - property alias contentHeight: content.height - - readonly property int subMenuXPos: width + (item && item["subMenuOverlap"] || 0) + property var __menu: root visible: status === Loader.Ready - sourceComponent: __style ? __style.frame : undefined + width: content.width + (d.style ? d.style.padding.left + d.style.padding.right : 0) + height: content.height + (d.style ? d.style.padding.top + d.style.padding.bottom : 0) Loader { id: styleLoader - active: !menu.isNative - sourceComponent: menu.style + active: !__menu.isNative + sourceComponent: __menu.style property alias __control: menuFrameLoader onStatusChanged: { if (status === Loader.Error) - console.error("Failed to load Style for", menu) + console.error("Failed to load Style for", __menu) + } + } + sourceComponent: d.style ? d.style.frame : undefined + + QtObject { + id: d + property var mnemonicsMap: ({}) + readonly property Style style: styleLoader.item + readonly property Component menuItemPanel: style ? style.menuItemPanel : null + + function canBeHovered(index) { + var item = content.menuItemAt(index) + if (item && item.styleData.type !== MenuItemType.Separator && item.styleData.enabled) { + __menu.__currentIndex = index + return true + } + return false + } + + function triggerCurrent() { + var item = content.menuItemAt(__menu.__currentIndex) + if (item) + content.triggered(item) + } + + function triggerAndDismiss(item) { + if (item && item.styleData.type !== MenuItemType.Separator) { + __menu.__dismissMenu() + if (item.styleData.type !== MenuItemType.Menu) + item.__menuItem.trigger() + } } } focus: true - property var mnemonicsMap: ({}) Keys.onPressed: { var item = null if (!(event.modifiers & Qt.AltModifier) - && (item = mnemonicsMap[event.text.toUpperCase()])) { - if (item.isSubmenu) { - menu.__currentIndex = item.menuItemIndex - item.showSubMenu(true) - item.menuItem.__currentIndex = 0 + && (item = d.mnemonicsMap[event.text.toUpperCase()])) { + if (item.styleData.type === MenuItemType.Menu) { + __menu.__currentIndex = item.__menuItemIndex + item.__showSubMenu(true) + item.__menuItem.__currentIndex = 0 } else { - triggerAndDismiss(item) + d.triggerAndDismiss(item) } event.accepted = true } else { @@ -88,64 +112,41 @@ Loader { } } - Keys.onEscapePressed: menu.__dismissMenu() + Keys.onEscapePressed: __menu.__dismissMenu() Keys.onDownPressed: { - if (menu.__currentIndex < 0) - menu.__currentIndex = -1 + if (__menu.__currentIndex < 0) + __menu.__currentIndex = -1 - for (var i = menu.__currentIndex + 1; - i < menu.items.length && !canBeHovered(i); i++) + for (var i = __menu.__currentIndex + 1; + i < __menu.items.length && !d.canBeHovered(i); i++) ; event.accepted = true } Keys.onUpPressed: { - for (var i = menu.__currentIndex - 1; - i >= 0 && !canBeHovered(i); i--) + for (var i = __menu.__currentIndex - 1; + i >= 0 && !d.canBeHovered(i); i--) ; event.accepted = true } - function canBeHovered(index) { - var item = content.menuItemAt(index) - if (item && !item["isSeparator"] && item.enabled) { - menu.__currentIndex = index - return true - } - return false - } - Keys.onLeftPressed: { - if ((event.accepted = menu.__parentMenu.hasOwnProperty("title"))) + if ((event.accepted = __menu.__parentMenu.hasOwnProperty("title"))) __closeMenu() } Keys.onRightPressed: { - var item = content.menuItemAt(menu.__currentIndex) - if ((event.accepted = (item && item.isSubmenu))) { - item.showSubMenu(true) - item.menuItem.__currentIndex = 0 + var item = content.menuItemAt(__menu.__currentIndex) + if ((event.accepted = (item && item.styleData.type === MenuItemType.Menu))) { + item.__showSubMenu(true) + item.__menuItem.__currentIndex = 0 } } - Keys.onSpacePressed: triggerCurrent() - Keys.onReturnPressed: triggerCurrent() - Keys.onEnterPressed: triggerCurrent() - - function triggerCurrent() { - var item = content.menuItemAt(menu.__currentIndex) - if (item) - content.triggered(item) - } - - function triggerAndDismiss(item) { - if (item && !item.isSeparator) { - menu.__dismissMenu() - if (!item.isSubmenu) - item.menuItem.trigger() - } - } + Keys.onSpacePressed: d.triggerCurrent() + Keys.onReturnPressed: d.triggerCurrent() + Keys.onEnterPressed: d.triggerCurrent() Binding { // Make sure the styled frame is in the background @@ -156,13 +157,15 @@ Loader { ColumnMenuContent { id: content + x: d.style ? d.style.padding.left : 0 + y: d.style ? d.style.padding.top : 0 menuItemDelegate: menuItemComponent - scrollerStyle: __style ? __style.scrollerStyle : undefined - itemsModel: menu.items - margin: menuFrameLoader.item ? menuFrameLoader.item.margin : 0 - minWidth: menu.__minimumWidth - maxHeight: menuFrameLoader.item ? menuFrameLoader.item.maxHeight : 0 - onTriggered: triggerAndDismiss(item) + scrollIndicatorStyle: d.style && d.style.scrollIndicator + scrollerStyle: d.style && d.style.__scrollerStyle + itemsModel: __menu.items + minWidth: __menu.__minimumWidth + maxHeight: d.style ? d.style.__maxPopupHeight : 0 + onTriggered: d.triggerAndDismiss(item) } Component { @@ -170,25 +173,38 @@ Loader { Loader { id: menuItemLoader - property var menuItem: modelData - readonly property bool isSeparator: !!menuItem && menuItem.type === MenuItemType.Separator - readonly property bool isSubmenu: !!menuItem && menuItem.type === MenuItemType.Menu - property bool selected: !(isSeparator || !!scrollerDirection) && menu.__currentIndex === index - property string text: isSubmenu ? menuItem.title : !(isSeparator || !!scrollerDirection) ? menuItem.text : "" - property bool showUnderlined: menu.__contentItem.altPressed - readonly property var scrollerDirection: menuItem["scrollerDirection"] + property QtObject styleData: QtObject { + id: opts + readonly property int index: __menuItemIndex + readonly property int type: __menuItem ? __menuItem.type : -1 + readonly property bool selected: type !== MenuItemType.Separator && __menu.__currentIndex === index + readonly property string text: type === MenuItemType.Menu ? __menuItem.title : + type !== MenuItemType.Separator ? __menuItem.text : "" + readonly property bool underlineMnemonic: __menu.__contentItem.altPressed + readonly property string shortcut: !!__menuItem && __menuItem["shortcut"] || "" + readonly property var iconSource: !!__menuItem && __menuItem["iconSource"] || undefined + readonly property bool enabled: type !== MenuItemType.Separator && !!__menuItem && __menuItem.enabled + readonly property bool checked: !!__menuItem && !!__menuItem["checked"] + readonly property bool checkable: !!__menuItem && !!__menuItem["checkable"] + readonly property bool exclusive: !!__menuItem && !!__menuItem["exclusiveGroup"] + readonly property int scrollerDirection: Qt.NoArrow + } - property int menuItemIndex: index + readonly property var __menuItem: modelData + readonly property int __menuItemIndex: index - sourceComponent: menuFrameLoader.menuItemStyle - enabled: visible && !isSeparator && !!menuItem && menuItem.enabled - visible: !!menuItem && menuItem.visible + sourceComponent: d.menuItemPanel + enabled: visible && opts.enabled + visible: !!__menuItem && __menuItem.visible active: visible - function showSubMenu(immediately) { + function __showSubMenu(immediately) { if (immediately) { - if (menu.__currentIndex === menuItemIndex) - menuItem.__popup(menuFrameLoader.subMenuXPos, 0, -1) + if (__menu.__currentIndex === __menuItemIndex) { + if (__menuItem.__usingDefaultStyle) + __menuItem.style = __menu.style + __menuItem.__popup(menuFrameLoader.width - (d.style.submenuOverlap + d.style.padding.right), -d.style.padding.top, -1) + } } else { openMenuTimer.start() } @@ -197,37 +213,37 @@ Loader { Timer { id: openMenuTimer interval: 50 - onTriggered: menuItemLoader.showSubMenu(true) + onTriggered: menuItemLoader.__showSubMenu(true) } - function closeSubMenu() { closeMenuTimer.start() } + function __closeSubMenu() { closeMenuTimer.start() } Timer { id: closeMenuTimer interval: 1 onTriggered: { - if (menu.__currentIndex !== menuItemIndex) - menuItem.__closeMenu() + if (__menu.__currentIndex !== __menuItemIndex) + __menuItem.__closeMenu() } } onLoaded: { - menuItem.__visualItem = menuItemLoader + __menuItem.__visualItem = menuItemLoader if (content.width < item.implicitWidth) content.width = item.implicitWidth - var title = text + var title = opts.text var ampersandPos = title.indexOf("&") if (ampersandPos !== -1) - menuFrameLoader.mnemonicsMap[title[ampersandPos + 1].toUpperCase()] = menuItemLoader + d.mnemonicsMap[title[ampersandPos + 1].toUpperCase()] = menuItemLoader } Binding { target: menuItemLoader.item property: "width" property alias menuItem: menuItemLoader.item - value: menuItem ? Math.max(menu.__minimumWidth, content.width) - 2 * menuItem.x : 0 + value: menuItem ? Math.max(__menu.__minimumWidth, content.width) - 2 * menuItem.x : 0 } } } diff --git a/src/controls/Private/MenuContentScroller.qml b/src/controls/Private/MenuContentScroller.qml index 30a8825a..e18132bb 100644 --- a/src/controls/Private/MenuContentScroller.qml +++ b/src/controls/Private/MenuContentScroller.qml @@ -39,27 +39,36 @@ ****************************************************************************/ import QtQuick 2.1 +import QtQuick.Controls 1.1 MouseArea { - property string direction + id: scrollIndicator + property int direction: 0 anchors { - top: direction === "up" ? parent.top : undefined - bottom: direction === "down" ? parent.bottom : undefined + top: direction === Qt.UpArrow ? parent.top : undefined + bottom: direction === Qt.DownArrow ? parent.bottom : undefined } hoverEnabled: visible - height: scrollerLoader.item.height + height: scrollerLoader.height width: parent.width Loader { id: scrollerLoader - sourceComponent: menuItemDelegate - property int index: -1 - property var modelData: { - "visible": true, - "scrollerDirection": direction, + width: parent.width + sourceComponent: scrollIndicatorStyle + // Extra property values for desktop style + property var __menuItem: null + property var styleData: { + "index": -1, + "type": MenuItemType.ScrollIndicator, + "text": "", + "selected": scrollIndicator.containsMouse, + "scrollerDirection": scrollIndicator.direction, + "checkable": false, + "checked": false, "enabled": true } } diff --git a/src/controls/Private/MenuItemSubControls.qml b/src/controls/Private/MenuItemSubControls.qml new file mode 100644 index 00000000..af62bf5b --- /dev/null +++ b/src/controls/Private/MenuItemSubControls.qml @@ -0,0 +1,49 @@ +/**************************************************************************** +** +** Copyright (C) 2014 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** This file is part of the Qt Quick Controls module of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names +** of its contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.1 + +QtObject { + property Component background: null + property Component label: null + property Component submenuIndicator: null + property Component shortcut: null + property Component checkmarkIndicator: null +} diff --git a/src/controls/Private/private.pri b/src/controls/Private/private.pri index 7852edff..b12cabd7 100644 --- a/src/controls/Private/private.pri +++ b/src/controls/Private/private.pri @@ -34,6 +34,7 @@ PRIVATE_QML_FILES += \ $$PWD/SourceProxy.qml\ $$PWD/Style.qml \ $$PWD/style.js \ + $$PWD/MenuItemSubControls.qml \ $$PWD/ModalPopupBehavior.qml \ $$PWD/StackViewSlideDelegate.qml \ $$PWD/StackView.js \ diff --git a/src/controls/Private/qmldir b/src/controls/Private/qmldir index 5dc8061c..7536b7e6 100644 --- a/src/controls/Private/qmldir +++ b/src/controls/Private/qmldir @@ -7,6 +7,7 @@ BasicButton 1.0 BasicButton.qml ScrollBar 1.0 ScrollBar.qml ScrollViewHelper 1.0 ScrollViewHelper.qml Style 1.0 Style.qml +MenuItemSubControls 1.0 MenuItemSubControls.qml TabBar 1.0 TabBar.qml StackViewSlideDelegate 1.0 StackViewSlideDelegate.qml StyleHelpers 1.0 style.js diff --git a/src/controls/Private/qquickstyleitem.cpp b/src/controls/Private/qquickstyleitem.cpp index 105bb9f5..958adbdd 100644 --- a/src/controls/Private/qquickstyleitem.cpp +++ b/src/controls/Private/qquickstyleitem.cpp @@ -51,6 +51,7 @@ #include <qquickwindow.h> #include "private/qguiapplication_p.h" #include <QtGui/qpa/qplatformtheme.h> +#include "../qquickmenuitem_p.h" QT_BEGIN_NAMESPACE @@ -503,19 +504,23 @@ void QQuickStyleItem::initStyleOption() // For GTK style. See below, in setElementType() setProperty("_q_isComboBoxPopupItem", m_itemType == ComboBoxItem); - QString scrollerDirection = m_properties["scrollerDirection"].toString(); - if (!scrollerDirection.isEmpty()) { + QQuickMenuItemType::MenuItemType type = + static_cast<QQuickMenuItemType::MenuItemType>(m_properties["type"].toInt()); + if (type == QQuickMenuItemType::ScrollIndicator) { + int scrollerDirection = m_properties["scrollerDirection"].toInt(); opt->menuItemType = QStyleOptionMenuItem::Scroller; - opt->state |= scrollerDirection == "up" ? + opt->state |= scrollerDirection == Qt::UpArrow ? QStyle::State_UpArrow : QStyle::State_DownArrow; - } else if (text().isEmpty()) { + } else if (type == QQuickMenuItemType::Separator) { opt->menuItemType = QStyleOptionMenuItem::Separator; } else { opt->text = text(); - if (m_properties["isSubmenu"].toBool()) { + if (type == QQuickMenuItemType::Menu) { opt->menuItemType = QStyleOptionMenuItem::SubMenu; } else { + opt->menuItemType = QStyleOptionMenuItem::Normal; + QString shortcut = m_properties["shortcut"].toString(); if (!shortcut.isEmpty()) { opt->text += QLatin1Char('\t') + shortcut; @@ -527,8 +532,6 @@ void QQuickStyleItem::initStyleOption() QVariant exclusive = m_properties["exclusive"]; opt->checkType = exclusive.toBool() ? QStyleOptionMenuItem::Exclusive : QStyleOptionMenuItem::NonExclusive; - } else { - opt->menuItemType = QStyleOptionMenuItem::Normal; } } if (m_properties["icon"].canConvert<QIcon>()) |