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 }