Warning, /maui/mauikit/src/controls.6/GridBrowserDelegate.qml is written in an unsupported language. File is not indexed.

0001 /*
0002  *   Copyright 2018 Camilo Higuita <milo.h@aol.com>
0003  *
0004  *   This program is free software; you can redistribute it and/or modify
0005  *   it under the terms of the GNU Library General Public License as
0006  *   published by the Free Software Foundation; either version 2, or
0007  *   (at your option) any later version.
0008  *
0009  *   This program is distributed in the hope that it will be useful,
0010  *   but WITHOUT ANY WARRANTY; without even the implied warranty of
0011  *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
0012  *   GNU General Public License for more details
0013  *
0014  *   You should have received a copy of the GNU Library General Public
0015  *   License along with this program; if not, write to the
0016  *   Free Software Foundation, Inc.,
0017  *   51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
0018  */
0019 
0020 import QtQuick
0021 import QtQml
0022 
0023 import QtQuick.Controls
0024 
0025 import org.mauikit.controls 1.3 as Maui
0026 
0027 /**
0028  * @inherit ItemDelegate
0029  * @brief A MauiKit ItemDelegate with some extra functionality and an informational column layout.
0030  * 
0031  *  This controls inherits from MauiKit ItemDelegate, to checkout its inherited properties refer to docs.
0032  *  
0033  *  @note This is essentially different from QQC2 ItemDelegate control, where the QQC2 can have a text, an icon etc; this one is only a container with some predefined behavior. 
0034  *  @see ItemDelegate
0035  * 
0036  * @image html Delegates/gridbrowserdelegate.png
0037  * @note An example of GridBrowserDelegates in the Index -file manager - application.
0038  * 
0039  *  @section structure Structure
0040  *  The GridBrowserDelegate layouts the information vertically. It's composed of three main sections: the top icon header, a title label and finally an extra label message. Those sections are all handled by a MauiKit GridItemTemplate control, which is exposed by the alias property `template`.
0041  *  @see GridItemTemplate
0042  *  
0043  *  The top icon section is handled by default by a MauiKit IconItem, which hosts an image or icon. Those can be set via the `imageSource` or the `iconSource` properties. 
0044  *  @see IconItem
0045  *  
0046  *  The top icon header can also be replaced by any other component using the `template.iconComponent` property. An example of a custom icon header is the Mauikit controls GalleryItem and CollageItem, both of which inherit from GridBrowserDelegate and set a custom `template.iconComponent`.
0047  *  
0048  *  @section notes Notes
0049  *  This control can be `checkable`, and a CheckBox element will be placed on top of it. It also supports features from the Button type, such as the `autoExclusive`, `checked` properties and the press events.
0050  *  
0051  *  By inheritance this component can be `dragable`.
0052  *  
0053  *  @note This control is usually used as the delegate component for the GridBrowser or QQC2 GridView.
0054  *  
0055  *  @subsection dnd Drag & Drop
0056  *  To set up the drag and drop, use the Drag attached properties.
0057  * The most relevant part for this control is to set the `Drag.keys` and `Drag.mimeData`
0058  * 
0059  * @code
0060  * Drag.keys: ["text/uri-list"]
0061  * Drag.mimeData: Drag.active ?
0062  * {
0063  *    "text/uri-list": "" //here a list of file separated by a comma.
0064  * } : {}
0065  * @endcode
0066  *  
0067  * @image html Delegates/gridbrowserdelegate2.png
0068  *  
0069  * @code
0070  * Maui.GridBrowser
0071  * {
0072  *    id: _gridBrowser
0073  *    anchors.fill: parent
0074  *    model: 30
0075  * 
0076  *    itemSize: 120
0077  *    itemHeight: 120
0078  * 
0079  *    adaptContent: true
0080  * 
0081  *    delegate: Item
0082  *    {
0083  *        width: GridView.view.cellWidth
0084  *        height: GridView.view.cellHeight
0085  * 
0086  *        Maui.GridBrowserDelegate
0087  *        {
0088  *            width: _gridBrowser.itemSize
0089  *            height: width
0090  * 
0091  *            iconSource: "folder"
0092  *            iconSizeHint: Maui.Style.iconSizes.big
0093  *            label1.text: "Title"
0094  *            label2.text: "Message"
0095  * 
0096  *            anchors.centerIn: parent
0097  *        }
0098  *    }
0099  * }
0100  * @endcode
0101  *  
0102  * <a href="https://invent.kde.org/maui/mauikit/-/blob/qt6-2/examples/GridBrowserDelegate.qml">You can find a more complete example at this link.</a>
0103  */
0104 Maui.ItemDelegate
0105 {
0106     id: control
0107     
0108     isCurrentItem : GridView.isCurrentItem || checked
0109     flat : !Maui.Handy.isMobile
0110     
0111     implicitHeight: _template.implicitHeight + topPadding +bottomPadding
0112     
0113     padding: Maui.Style.defaultPadding
0114     spacing: Maui.Style.space.medium
0115     
0116     radius: Maui.Style.radiusV
0117     
0118     /**
0119      * @brief An alias to access the GridItemTemplate control properties. This is the template element that layouts all the information: labels and icon/image.
0120      * @see GridItemTemplate
0121      * @property GridItemTemplate GridBrowserDelegate::template.
0122      */
0123     readonly property alias template : _template
0124     
0125     /**
0126      * @see GridItemTemplate::label1
0127      */
0128     readonly property alias label1 : _template.label1
0129     
0130     /**
0131      * @see GridItemTemplate::label2
0132      */
0133     readonly property alias label2 : _template.label2
0134     
0135     /**
0136      * @see GridItemTemplate::iconItem
0137      */
0138     property alias iconItem : _template.iconItem
0139     
0140     /**
0141      * @see GridItemTemplate::iconVisible
0142      */
0143     property alias iconVisible : _template.iconVisible
0144     
0145     /**
0146      * @see GridItemTemplate::imageSizeHint
0147      */
0148     property alias imageSizeHint : _template.imageSizeHint
0149     
0150     /**
0151      * @see GridItemTemplate::iconSizeHint
0152      */
0153     property alias iconSizeHint : _template.iconSizeHint
0154     
0155     /**
0156      * @see GridItemTemplate::imageSource
0157      */
0158     property alias imageSource : _template.imageSource
0159     
0160     /**
0161      * @see GridItemTemplate::iconSource
0162      */
0163     property alias iconSource : _template.iconSource
0164     
0165     /**
0166      * @see GridItemTemplate::labelsVisible
0167      */
0168     property alias labelsVisible : _template.labelsVisible
0169     
0170     /**
0171      * @brief Whether the control is checked or not.
0172      * By default this is set to `false`.
0173      */
0174     property bool checked : false
0175     
0176     /**
0177      * @see GridItemTemplate::fillMode
0178      */
0179     property alias fillMode : _template.fillMode
0180     
0181     /**
0182      * @see GridItemTemplate::maskRadius
0183      */
0184     property alias maskRadius : _template.maskRadius
0185     
0186     /**
0187      * @brief Whether the control should become checkable. If it is checkable a CheckBox element  will become visible to allow to toggle between the checked states.
0188      * By default this is set to `false`.
0189      */
0190     property bool checkable: false
0191     
0192     /**
0193      * @brief Whether the control should be auto exclusive, this means that among other related elements - sharing the same parent- only one can be selected/checked at the time.
0194      * By default this is set to `false`.
0195      */
0196     property bool autoExclusive: false
0197     
0198     /**
0199      * @brief An alias to expose the DropArea component in charge of the drag&drop events.
0200      * @see contentDropped
0201      */
0202     readonly property alias dropArea : _dropArea
0203     
0204     /**
0205      * @see GridItemTemplate::imageWidth
0206      */
0207     property alias imageWidth : _template.imageWidth
0208     
0209     /**
0210      * @see GridItemTemplate::imageHeight
0211      */
0212     property alias imageHeight : _template.imageHeight
0213     
0214     /**
0215      * @brief Emitted when a drop event has been triggered on this control.
0216      * @param drop The object with information about the event.
0217      */
0218     signal contentDropped(var drop)
0219     
0220     /**
0221      * @brief Emitted when the control checked state has been changed.
0222      * @param state The checked state value. 
0223      */
0224     signal toggled(bool state)
0225     
0226     background: Rectangle
0227     {
0228         color: (control.isCurrentItem || control.containsPress ? Maui.Theme.highlightColor : ( control.hovered ? Maui.Theme.hoverColor : (control.flat ? "transparent" : Maui.Theme.alternateBackgroundColor)))
0229         
0230         radius: control.radius
0231         
0232         Behavior on color
0233         {
0234             enabled: !control.flat
0235             Maui.ColorTransition{}
0236         }
0237     }
0238     
0239     DropArea
0240     {
0241         id: _dropArea
0242         width: parent.width
0243         height: parent.height
0244         Rectangle
0245         {
0246             anchors.fill: parent
0247             radius: control.radius
0248             color:  control.Maui.Theme.backgroundColor
0249             border.color: control.Maui.Theme.highlightColor
0250             visible: parent.containsDrag
0251         }
0252         
0253         onDropped:
0254         {
0255             control.contentDropped(drop)
0256         }
0257     }
0258     
0259     Maui.GridItemTemplate
0260     {
0261         id: _template
0262         anchors.fill: parent
0263         iconContainer.scale: _dropArea.containsDrag  || _checkboxLoader.active ? 0.8 : 1
0264         hovered: control.hovered
0265         maskRadius: control.radius
0266         spacing: control.spacing
0267         isCurrentItem: control.isCurrentItem
0268         highlighted: control.containsPress
0269     }
0270     
0271     Loader
0272     {
0273         id: _checkboxLoader
0274         asynchronous: true
0275         active: control.checkable || control.checked
0276         
0277         anchors.top: parent.top
0278         anchors.left: parent.left
0279         anchors.margins: Maui.Style.space.medium
0280         
0281         scale: active ? 1 : 0
0282         
0283         Behavior on scale
0284         {
0285             NumberAnimation
0286             {
0287                 duration: Maui.Style.units.longDuration*2
0288                 easing.type: Easing.OutBack
0289             }
0290         }
0291         
0292         sourceComponent: CheckBox
0293         {
0294             checkable: control.checkable 
0295             autoExclusive: control.autoExclusive
0296             
0297             Binding on checked
0298             {
0299                 value: control.checked
0300                 restoreMode: Binding.RestoreBinding
0301             }
0302             
0303              onToggled:
0304              {
0305                  console.log("CHECKEDDDD STATE")
0306                   control.toggled(checked)
0307              }
0308         }
0309     }
0310 }