Warning, /maui/mauikit/src/controls.6/ListBrowserDelegate.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 import QtQuick.Layouts
0025 
0026 import org.mauikit.controls 1.3 as Maui
0027 
0028 /**
0029  * @inherit ItemDelegate
0030  * @brief A MauiKit ItemDelegate with an informational row layout.
0031  * This controls inherits from MauiKit ItemDelegate, to checkout its inherited properties refer to docs.
0032  * 
0033  *  @image html Delegates/listbrowserdelegate.png
0034  * @note An example of ListBrowserDelegate in the Index -f ile manager - application.
0035  * 
0036  * @section structure Structure
0037  *  The ListBrowserDelegate layouts its information horizontally. It's composed of two main sections: the far left icon header, and the text labels at the right side - there are four [4] possible labels. Those sections are all handled by a MauiKit ListItemTemplate control, which is exposed by the alias property `template`.
0038  *  @see ListItemTemplate
0039  * @see template
0040  *  
0041  *  The far left icon section is handled by default by a MauiKit IconItem, which can have an image or icon. Those can be set via the `imageSource` or the `iconSource` properties. 
0042  *  @see IconItem
0043  *  
0044  *  The said icon header can also be replaced by any other component using the `template.iconComponent` property.
0045  * 
0046  *  @section notes Notes
0047  *  This control can be `checkable`, and a CheckBox element will be placed on the left side. It also supports features from the Button type, such as the `autoExclusive`, `checked` properties and the press events.
0048  *  
0049  *  By inheritance this component can be `dragable`.
0050  *  
0051  *  @note This control is usually used as the delegate component for the ListBrowser or QQC2 ListView.
0052  *  
0053  *  @subsection dnd Drag & Drop
0054  *  To set up the drag and drop, use the Drag attached properties.
0055  * The most relevant part for this control is to set the `Drag.keys` and `Drag.mimeData`
0056  * 
0057  * @code
0058  * Drag.keys: ["text/uri-list"]
0059  * Drag.mimeData: Drag.active ?
0060  * {
0061  *    "text/uri-list": "" //here a list of file separated by a comma.
0062  * } : {}
0063  * @endcode
0064  * 
0065  * @code
0066  * Maui.ListBrowserDelegate
0067  * {
0068  *    width: ListView.view.width
0069  *    label1.text: "An example delegate."
0070  *    label2.text: "Using the MauiKit ListBrowser."
0071  * 
0072  *    iconSource: "folder"
0073  * }
0074  * @endcode
0075  * 
0076  * <a href="https://invent.kde.org/maui/mauikit/-/blob/qt6-2/examples/ListBrowser.qml">You can find a more complete example at this link.</a>
0077  */
0078 Maui.ItemDelegate
0079 {
0080   id: control
0081   
0082   focus: true
0083   
0084   radius: Maui.Style.radiusV
0085   
0086   flat : !Maui.Handy.isMobile
0087   
0088   implicitHeight: _layout.implicitHeight + topPadding + bottomPadding
0089   
0090   isCurrentItem : ListView.isCurrentItem || checked
0091   
0092   padding: Maui.Style.defaultPadding
0093   spacing: Maui.Style.space.small
0094   
0095   /**
0096    * @see ListItemTemplate::content
0097    */
0098   default property alias content : _template.content
0099     
0100     /**
0101      * @see ListItemTemplate::label1
0102      */
0103     readonly property alias label1 : _template.label1
0104     
0105     /**
0106      * @see ListItemTemplate::label2
0107      */
0108     readonly property alias label2 : _template.label2
0109     
0110     /**
0111      * @see ListItemTemplate::label3
0112      */
0113     readonly property alias label3 : _template.label3
0114     
0115     /**
0116      * @see ListItemTemplate::label4
0117      */
0118     readonly property alias label4 : _template.label4
0119     
0120     /**
0121      * @see ListItemTemplate::iconItem
0122      */
0123     property alias iconItem : _template.iconItem
0124     
0125     /**
0126      * @see ListItemTemplate::iconVisible
0127      */
0128     property alias iconVisible : _template.iconVisible
0129     
0130     /**
0131      * @see ListItemTemplate::iconSizeHint
0132      */
0133     property alias iconSizeHint : _template.iconSizeHint
0134     
0135     /**
0136      * @see ListItemTemplate::imageSource
0137      */
0138     property alias imageSource : _template.imageSource
0139     
0140     /**
0141      * @see ListItemTemplate::iconSource
0142      */
0143     property alias iconSource : _template.iconSource
0144     
0145     /**
0146      * @see ListItemTemplate::labelsVisible
0147      */
0148     property alias showLabel : _template.labelsVisible
0149     
0150     /**
0151      * @brief Whether the control is checked or not.
0152      * By default this is set to `false`.
0153      */
0154     property bool checked : false
0155     
0156     /**
0157      * @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.
0158      * By default this is set to `false`.
0159      */
0160     property bool checkable: false
0161     
0162     /**
0163      * @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.
0164      * By default this is set to `false`.
0165      */
0166     property bool autoExclusive: false
0167     
0168     /**
0169      * @see ListItemTemplate::leftLabels
0170      */
0171     readonly property alias leftLabels: _template.leftLabels
0172     
0173     /**
0174      * @see ListItemTemplate::rightLabels
0175      */
0176     readonly property alias rightLabels: _template.rightLabels
0177     
0178     /**
0179      * @brief An alias to access the ListItemTemplate control properties. This is the template element that layouts all the information: labels and icon/image.
0180      * @see ListItemTemplate
0181      * @property GridItemTemplate ListBrowserDelegate::template.
0182      */
0183     readonly property alias template : _template
0184     
0185     /**
0186      * @see ListItemTemplate::maskRadius
0187      */
0188     property alias maskRadius : _template.maskRadius
0189     
0190     /**
0191      * @brief Whether this element currently contains any item being dragged on top of it.
0192      * @property bool ListBrowserDelegate::containsDrag
0193      */
0194     readonly property alias containsDrag : _dropArea.containsDrag
0195     
0196     /**
0197      * @brief An alias to expose the DropArea component in charge of the drag&drop events.
0198      * @see contentDropped
0199      */
0200     readonly property alias dropArea : _dropArea
0201     
0202     /**
0203      * @brief An alias to access the layout fo this control handled by a RowLayout.
0204      * @property RowLayout ListBrowserDelegate::layout
0205      */
0206     readonly property alias layout : _layout
0207     
0208     /**
0209      * @brief Emitted when a drop event has been triggered on this control.
0210      * @param drop The object with information about the event.
0211      */
0212     signal contentDropped(var drop)
0213     
0214     /**
0215      * @brief Emitted when a drop event has entered the area of this control.
0216      * @param drop The object with information about the event.
0217      */
0218     signal contentEntered(var drag)
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     
0227     background: Rectangle
0228     {
0229       color: (control.isCurrentItem || control.containsPress ? Maui.Theme.highlightColor : ( control.hovered ? Maui.Theme.hoverColor : (control.flat ? "transparent" : Maui.Theme.alternateBackgroundColor)))
0230       
0231       radius: control.radius
0232       
0233       Rectangle
0234       {
0235         width: parent.width
0236         height: parent.height
0237         radius: control.radius
0238         visible: control.containsDrag
0239         color:  control.Maui.Theme.backgroundColor
0240         border.color: control.Maui.Theme.highlightColor
0241         
0242         Behavior on color
0243         {
0244           Maui.ColorTransition{}
0245         }
0246       }
0247       
0248       Behavior on color
0249       {
0250         enabled: !control.flat
0251         Maui.ColorTransition{}
0252       }
0253     }
0254     
0255     DropArea
0256     {
0257       id: _dropArea
0258       width: parent.width
0259       height: parent.height
0260       enabled: control.draggable
0261       
0262       onDropped: (drop) =>
0263       {
0264         control.contentDropped(drop)
0265       }
0266       
0267       onEntered: (drop) =>
0268       {
0269         control.contentEntered(drag)
0270       }
0271     }
0272     
0273     RowLayout
0274     {
0275       id: _layout
0276       anchors.fill: parent
0277       spacing: _template.spacing
0278       
0279       Loader
0280       {
0281         asynchronous: true
0282         active: control.checkable || control.checked
0283         visible: active
0284         
0285         Layout.alignment: Qt.AlignCenter
0286         
0287         scale: active? 1 : 0
0288         
0289         Behavior on scale
0290         {
0291           NumberAnimation
0292           {
0293             duration: Maui.Style.units.longDuration
0294             easing.type: Easing.InOutQuad
0295           }
0296         }
0297         
0298         sourceComponent: CheckBox
0299         {
0300           checkable: control.checkable
0301           autoExclusive: control.autoExclusive
0302           
0303           Binding on checked
0304           {
0305             value: control.checked
0306             restoreMode: Binding.RestoreBinding
0307           }
0308           
0309           onToggled: control.toggled(checked)
0310         }
0311       }
0312       
0313       Maui.ListItemTemplate
0314       {
0315         id: _template
0316         Layout.fillHeight: true
0317         Layout.fillWidth: true
0318         
0319         spacing: control.spacing
0320         
0321         hovered: control.hovered
0322         isCurrentItem : control.isCurrentItem
0323         highlighted: control.containsPress
0324       }
0325     }
0326 }