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 }