src/controls.6/MenuItemActionRow.qml

0001 // Copyright 2018-2020 Camilo Higuita <milo.h@aol.com>
0002 // Copyright 2018-2020 Nitrux Latinoamericana S.C.
0003 //
0004 // SPDX-License-Identifier: GPL-3.0-or-later
0005
0006 import QtQuick
0007 import QtQuick.Controls
0008 import QtQuick.Layouts
0009
0010 import org.mauikit.controls 1.3 as Maui
0011
0012 /**
0013  * @inherit QtQuick.Controls.MenuItem
0014  * @brief A menu item entry for placing a set of actions as the children.
0015  * The actions will be represented as row of QQC2 ToolButton.
0016  *
0017  * <a href="https://doc.qt.io/qt-6/qml-qtquick-controls-menuitem.html">This controls inherits from QQC2 MenuItem, to checkout its inherited properties refer to the Qt Docs.</a>
0018  *
0019  * This is mean tot be used inside a Menu, where a group of similar actions can be placed together to save vertical sspace and make the UI a bit less cluttered.
0020  *
0021  * @image html Misc/menuitemactionrow.png
0022  *
0023  * @code
0024  * Maui.ContextualMenu
0025 {
0026     id: _contextualMenu
0027
0028     title: "Menu Title"
0029     titleIconSource: "folder"
0030
0031     Maui.MenuItemActionRow
0032     {
0033         Action
0034         {
0035             text: "Action1"
0036             icon.name: "love"
0037         }
0038
0039         Action
0040         {
0041             text: "Action2"
0042             icon.name: "folder"
0043         }
0044
0045         Action
0046         {
0047             text: "Action3"
0048             icon.name: "anchor"
0049         }
0050     }
0051
0052     MenuSeparator {}
0053
0054     MenuItem
0055     {
0056         text: "Action3"
0057         icon.name: "actor"
0058     }
0059
0060     MenuItem
0061     {
0062         text: "Action4"
0063         icon.name: "anchor"
0064     }
0065 }
0066  * @endcode
0067
0068  @attention When an action here defined has been triggered, then the `triggered` signal fo the actual container -aka MenuItem - will also be emitted. This is done to support the auto-closing of the menu after a menu entry has been triggered.
0069  */
0070 MenuItem
0071 {
0072     id: control
0073
0074     /**
0075      * @brief The list of actions to be represented.
0076      * The children of this element should be a group of QQC2 Action.
0077      * @note Checkout Qt documentation on the Action element.
0078      */
0079     default property list<Action> actions
0080
0081     opacity: control.enabled ? 1 : 0.5
0082
0083     hoverEnabled: !Maui.Handy.isMobile
0084
0085     implicitHeight: implicitContentHeight + topPadding + bottomPadding
0086     implicitWidth: ListView.view ? ListView.view.width : Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitContentWidth + leftPadding + rightPadding)
0087
0088     background: null
0089
0090     padding: 0
0091     spacing: Maui.Style.space.small
0092     font: Maui.Style.defaultFont
0093
0094     display : width > Maui.Style.units.gridUnit * 28 && control.actions.length <= 3 ?  ToolButton.TextBesideIcon : (Maui.Handy.isMobile ? ToolButton.TextUnderIcon : ToolButton.IconOnly)
0095
0096     contentItem: Flow
0097     {
0098         id: _layout
0099         spacing: control.spacing
0100
0101         Repeater
0102         {
0103             id: _repeater
0104             model: control.actions
0105
0106             delegate: ToolButton
0107             {
0108                 id: _delegate
0109                 Maui.Theme.inherit: true
0110
0111                 action: modelData
0112                 display: control.display
0113
0114                 ToolTip.delay: 1000
0115                 ToolTip.timeout: 5000
0116                 ToolTip.visible: ( _delegate.hovered ) && _delegate.text.length
0117                 ToolTip.text: modelData.text
0118
0119                 background: Rectangle
0120                 {
0121                     radius: Maui.Style.radiusV
0122                     color: _delegate.checked || _delegate.pressed || _delegate.down ? Maui.Theme.highlightColor : _delegate.highlighted || _delegate.hovered ? Maui.Theme.hoverColor : Maui.Theme.alternateBackgroundColor
0123                 }
0124
0125                 Connections
0126                 {
0127                     target: _delegate.action
0128                     ignoreUnknownSignals: true
0129                     function onTriggered()
0130                     {
0131                         control.triggered()
0132                     }
0133                 }
0134             }
0135         }
0136     }
0137 }