src/controls.6/SplitViewItem.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
0007 import QtQuick
0008 import QtQuick.Controls
0009 import QtQml.Models
0010 import Qt5Compat.GraphicalEffects
0011
0012 import org.mauikit.controls 1.3 as Maui
0013
0014 /**
0015  * @inherit QtQuick.Controls.Pane
0016  * @brief An item to be used as a view container for the MauiKit SplitView.
0017  * <a href="https://doc.qt.io/qt-6/qml-qtquick-controls-pane.html">This controls inherits from QQC2 Pane, to checkout its inherited properties refer to the Qt Docs.</a>
0018  * This is the preferred control to use when adding a new view into the SplitView, since it follows the Maui Style HIG.
0019  * @see SplitView
0020  *
0021  * @note When this element is being resized by the SplitView handle, and reaches the minimum width, an action to close the view is then suggested and triggered if the pressed event of the handle is released at that minimum width.
0022  */
0023 Pane
0024 {
0025     id: control
0026
0027     Maui.Theme.colorSet: Maui.Theme.Window
0028     Maui.Theme.inherit: false
0029
0030     /**
0031      * @brief By default the children content of this item needs to be positioned manually.
0032      * @property list<QtObject> SplitViewItem::content
0033      */
0034     default property alias content: _container.data
0035
0036         /**
0037          * @brief The index of this view in the SplitView control.
0038          */
0039         readonly property int splitIndex : ObjectModel.index
0040
0041         /**
0042          * @brief The minimum width of this view when resizing the SplitView.
0043          * By default this is set to a fixed value of `200`.
0044          */
0045         property int minimumWidth : 200
0046
0047         /**
0048          * @brief The minimum height of this view when resizing the SplitView.
0049          * By default this is set to a fixed value of `100`.
0050          */
0051         property int minimumHeight : 100
0052
0053         /**
0054          * @brief Whether the style of this view will be more compact. A compact style has not border corners or styling.
0055          * While a non-compact mode means there is more than on view in the parent SplitView and the views will have rounded corners.
0056          * This is `true` for mobile devices and one there is a single item in the SplitView.
0057          */
0058         readonly property bool compact : Maui.Handy.isMobile || SplitView.view.count === 1
0059
0060         SplitView.fillHeight: true
0061         SplitView.fillWidth: true
0062
0063         SplitView.preferredHeight: SplitView.view.orientation === Qt.Vertical ? SplitView.view.height / (SplitView.view.count) :  SplitView.view.height
0064         SplitView.minimumHeight: SplitView.view.orientation === Qt.Vertical ?  minimumHeight : 0
0065
0066         SplitView.preferredWidth: SplitView.view.orientation === Qt.Horizontal ? SplitView.view.width / (SplitView.view.count) : SplitView.view.width
0067         SplitView.minimumWidth: SplitView.view.orientation === Qt.Horizontal ? minimumWidth :  0
0068
0069         clip: SplitView.view.orientation === Qt.Vertical && SplitView.view.count === 2 && splitIndex > 0
0070
0071         padding: compact ? 0 : Maui.Style.contentMargins
0072         Behavior on padding
0073         {
0074             NumberAnimation
0075             {
0076                 duration: Maui.Style.units.shortDuration
0077                 easing.type: Easing.InQuad
0078             }
0079         }
0080
0081
0082         contentItem: Item
0083         {
0084             Item
0085             {
0086                 id:  _container
0087                 anchors.fill: parent
0088             }
0089
0090             Loader
0091             {
0092                 asynchronous: true
0093                 anchors.fill: parent
0094                 active: control.SplitView.view.resizing
0095                 visible: active
0096                 sourceComponent: Rectangle
0097                 {
0098                     color: Maui.Theme.backgroundColor
0099                     opacity: (control.minimumWidth) / control.width
0100                 }
0101             }
0102
0103             Loader
0104             {
0105                 asynchronous: true
0106                 anchors.bottom: parent.bottom
0107                 anchors.left: parent.left
0108                 anchors.right: parent.right
0109                 height: 2
0110                 active: control.SplitView.view.currentIndex === splitIndex && control.SplitView.view.count > 1
0111                 visible: active
0112                 sourceComponent: Rectangle
0113                 {
0114                     color: Maui.Theme.highlightColor
0115                 }
0116             }
0117
0118             Loader
0119             {
0120                 asynchronous: true
0121                 anchors.centerIn: parent
0122                 active: control.SplitView.view.resizing && control.width < control.minimumWidth + 60
0123                 visible: active
0124                 sourceComponent: Maui.Chip
0125                 {
0126                     opacity: (control.minimumWidth) / control.width
0127
0128                     Maui.Theme.backgroundColor: Maui.Theme.negativeTextColor
0129                     label.text: i18nd("mauikit", "Close Split")
0130                 }
0131             }
0132
0133             Loader
0134             {
0135                 asynchronous: true
0136                 anchors.centerIn: parent
0137                 active: control.SplitView.view.resizing && control.height < control.minimumHeight + 60
0138                 visible: active
0139                 sourceComponent: Maui.Chip
0140                 {
0141                     opacity: (control.minimumHeight) / control.height
0142
0143                     Maui.Theme.backgroundColor: Maui.Theme.negativeTextColor
0144                     label.text: i18nd("mauikit", "Close Split")
0145                 }
0146             }
0147
0148             MouseArea
0149             {
0150                 anchors.fill: parent
0151                 propagateComposedEvents: true
0152                 preventStealing: false
0153                 cursorShape: undefined
0154
0155                 onPressed: (mouse) =>
0156                 {
0157                     control.SplitView.view.currentIndex = control.splitIndex
0158                     mouse.accepted = false
0159                 }
0160             }
0161
0162             layer.enabled: !control.compact
0163             layer.smooth: true
0164             layer.effect: OpacityMask
0165             {
0166                 maskSource: Rectangle
0167                 {
0168                     width: _container.width
0169                     height: _container.height
0170                     radius: Maui.Style.radiusV
0171                 }
0172             }
0173         }
0174
0175         Connections
0176         {
0177             target: control.SplitView.view
0178             function onResizingChanged()
0179             {
0180                 if(control.width === control.minimumWidth && !control.SplitView.view.resizing)
0181                 {
0182                     control.SplitView.view.closeSplit(control.splitIndex)
0183                 }
0184
0185                 if(control.height === control.minimumHeight && !control.SplitView.view.resizing)
0186                 {
0187                     control.SplitView.view.closeSplit(control.splitIndex)
0188                 }
0189             }
0190         }
0191
0192         /**
0193          * @brief Forces to focus this item in the SplitView, and marks it as the current view.
0194          */
0195         function focusSplitItem()
0196         {
0197             control.SplitView.view.currentIndex = control.splitIndex
0198         }
0199 }