src/style.5/Menu.qml

0001 /****************************************************************************
0002  * *
0003  ** Copyright (C) 2017 The Qt Company Ltd.
0004  ** Contact: http://www.qt.io/licensing/
0005  **
0006  ** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
0007  **
0008  ** $QT_BEGIN_LICENSE:LGPL3$
0009  ** Commercial License Usage
0010  ** Licensees holding valid commercial Qt licenses may use this file in
0011  ** accordance with the commercial license agreement provided with the
0012  ** Software or, alternatively, in accordance with the terms contained in
0013  ** a written agreement between you and The Qt Company. For licensing terms
0014  ** and conditions see http://www.qt.io/terms-conditions. For further
0015  ** information use the contact form at http://www.qt.io/contact-us.
0016  **
0017  ** GNU Lesser General Public License Usage
0018  ** Alternatively, this file may be used under the terms of the GNU Lesser
0019  ** General Public License version 3 as published by the Free Software
0020  ** Foundation and appearing in the file LICENSE.LGPLv3 included in the
0021  ** packaging of this file. Please review the following information to
0022  ** ensure the GNU Lesser General Public License version 3 requirements
0023  ** will be met: https://www.gnu.org/licenses/lgpl.html.
0024  **
0025  ** GNU General Public License Usage
0026  ** Alternatively, this file may be used under the terms of the GNU
0027  ** General Public License version 2.0 or later as published by the Free
0028  ** Software Foundation and appearing in the file LICENSE.GPL included in
0029  ** the packaging of this file. Please review the following information to
0030  ** ensure the GNU General Public License version 2.0 requirements will be
0031  ** met: http://www.gnu.org/licenses/gpl-2.0.html.
0032  **
0033  ** $QT_END_LICENSE$
0034  **
0035  ****************************************************************************/
0036
0037 import QtQuick 2.15
0038 import QtQuick.Templates 2.15 as T
0039 import QtQuick.Window 2.15
0040 import org.mauikit.controls 1.3 as Maui
0041 import QtGraphicalEffects 1.0
0042
0043 T.Menu
0044 {
0045     id: control
0046
0047     Maui.Theme.colorSet: Maui.Theme.View
0048     Maui.Theme.inherit: false
0049
0050     property string subtitle
0051     property string titleImageSource
0052     property string titleIconSource: "application-menu"
0053
0054     readonly property bool responsive: Maui.Handy.isMobile
0055
0056     readonly property size parentWindow : parent.Window.window ? Qt.size(parent.Window.window.width, parent.Window.window.height) : Qt.size(0,0)
0057
0058     transformOrigin: !cascade ? Item.Top : (mirrored ? Item.TopRight : Item.TopLeft)
0059
0060     readonly property int finalY : control.responsive ? parentWindow.height - height : 0
0061    readonly property int preferredWidth: control.responsive ? 600 : 300
0062
0063    y: finalY
0064     x: control.responsive ? Math.round(parentWindow.width/2 - control.width/2) : 0
0065
0066     implicitWidth: Math.min(parentWindow.width, preferredWidth)
0067
0068     implicitHeight: Math.min(contentHeight + topPadding + bottomPadding, (control.responsive ? parentWindow.height *0.7 : parentWindow.height))
0069
0070     focus: true
0071
0072     modal: control.responsive
0073     cascade: !control.responsive
0074     overlap: cascade ? 0-Maui.Style.space.medium : 0
0075
0076     padding: 0
0077     spacing: Maui.Style.defaultSpacing
0078
0079     margins: Maui.Style.space.medium
0080
0081     closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
0082     delegate: MenuItem { }
0083
0084     enter:  Maui.Style.enableEffects ? (control.responsive ? _responsiveEnterTransition : _enterTransition) : null
0085     exit: Maui.Style.enableEffects ? (control.responsive ? _responsiveExitTransition : _exitTransition) : null
0086
0087     Transition
0088     {
0089         id: _enterTransition
0090         enabled: Maui.Style.enableEffects
0091         // grow_fade_in
0092         // NumberAnimation { property: "scale"; from: 0.9; to: 1.0; easing.type: Easing.OutQuint; duration: 220 }
0093         NumberAnimation { property: "opacity"; from: 0.0; to: 1.0; easing.type: Easing.OutCubic; duration: 150 }
0094     }
0095
0096
0097     Transition
0098     {
0099         id: _exitTransition
0100         enabled: Maui.Style.enableEffects
0101
0102         // shrink_fade_out
0103         // NumberAnimation { property: "scale"; from: 1.0; to: 0.9; easing.type: Easing.OutQuint; duration: 220 }
0104         NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; easing.type: Easing.OutCubic; duration: 150 }
0105     }
0106
0107     Transition
0108     {
0109         id: _responsiveEnterTransition
0110         enabled: Maui.Style.enableEffects
0111
0112         ParallelAnimation
0113         {
0114             //NumberAnimation { property: "y"; from: control.parentWindow.height; to: control.finalY; easing.type: Easing.OutQuint; duration: 220 }
0115             NumberAnimation { property: "opacity"; from: 0.0; to: 1.0; easing.type: Easing.OutCubic; duration: 150 }
0116         }
0117     }
0118
0119     Transition
0120     {
0121         id: _responsiveExitTransition
0122         enabled: Maui.Style.enableEffects
0123
0124         ParallelAnimation
0125         {
0126             //NumberAnimation { property: "y"; from: control.finalY; to: control.parentWindow.height; easing.type: Easing.OutQuint; duration: 220 }
0127             NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; easing.type: Easing.OutCubic; duration: 150 }
0128         }
0129     }
0130
0131     contentItem: ScrollView
0132         {
0133             id: _scrollView
0134             focus: true
0135             contentWidth: availableWidth
0136             padding: Maui.Style.contentMargins
0137
0138             implicitHeight: _listView.contentHeight + topPadding+bottomPadding
0139
0140             ListView
0141             {
0142                 id: _listView
0143
0144                 clip: true
0145                 focus: true
0146
0147                 headerPositioning: ListView.InlineHeader
0148
0149                 model: control.contentModel
0150                 spacing: control.spacing
0151                 currentIndex: control.currentIndex
0152
0153                 snapMode: ListView.NoSnap
0154
0155                 boundsBehavior: Flickable.StopAtBounds
0156                 boundsMovement: Flickable.StopAtBounds
0157                 highlightFollowsCurrentItem: true
0158                 highlightMoveDuration: 0
0159                 highlightResizeDuration : 0
0160
0161                 keyNavigationEnabled : true
0162                 keyNavigationWraps : true
0163
0164                 header: Maui.SectionHeader
0165                 {
0166                     visible: control.title && control.title.length
0167                     width: parent.width
0168                     height: visible ? implicitContentHeight + topPadding + bottomPadding : 0
0169                     padding: control.padding
0170                     bottomPadding: _scrollView.topPadding + padding
0171                     topPadding: 0
0172
0173                   label1.text: control.title
0174                   label2.text: control.subtitle
0175                   label1.elide:Text.ElideMiddle
0176                   template.imageSource: control.titleImageSource
0177                   template.iconSource: control.titleIconSource
0178                  template.maskRadius: 0
0179                   template.imageSizeHint: Maui.Style.iconSizes.big
0180                   template.iconSizeHint: Maui.Style.iconSize
0181                 }
0182             }
0183         }
0184
0185
0186     background: Rectangle
0187     {
0188         id: _bg
0189         color: control.Maui.Theme.backgroundColor
0190         radius: Maui.Style.radiusV
0191
0192         property color borderColor: Maui.Theme.textColor
0193         border.color: !Maui.Handy.isMobile ? Qt.rgba(borderColor.r, borderColor.g, borderColor.b, 0.3) : undefined
0194         Behavior on color
0195         {
0196             Maui.ColorTransition{}
0197         }
0198
0199         Behavior on border.color
0200         {
0201             Maui.ColorTransition{}
0202         }
0203
0204         layer.enabled: true
0205         layer.effect: DropShadow
0206         {
0207             horizontalOffset: 0
0208             verticalOffset: 0
0209             radius: 8
0210             samples: 16
0211             color: "#80000000"
0212             transparentBorder: true
0213         }
0214     }
0215
0216     T.Overlay.modal: Rectangle
0217     {
0218         color: Qt.rgba( control.Maui.Theme.backgroundColor.r,  control.Maui.Theme.backgroundColor.g,  control.Maui.Theme.backgroundColor.b, 0.4)
0219
0220         Behavior on opacity { NumberAnimation { duration: 150 } }
0221     }
0222
0223     T.Overlay.modeless: Rectangle
0224     {
0225         color: Qt.rgba( control.Maui.Theme.backgroundColor.r,  control.Maui.Theme.backgroundColor.g,  control.Maui.Theme.backgroundColor.b, 0.4)
0226         Behavior on opacity { NumberAnimation { duration: 150 } }
0227     }
0228
0229     onOpened: _listView.forceActiveFocus()
0230
0231 }