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 }