Warning, /maui/mauikit/src/controls.6/GridItemTemplate.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 QtQuick.Layouts
0022 import QtQuick.Controls
0023
0024 import org.mauikit.controls 1.3 as Maui
0025
0026 /**
0027 * @inherit QtQuick.Item
0028 * @brief A template with a icon or image and a two bottom labels.
0029 *
0030 * <a href="https://doc.qt.io/qt-6/qml-qtquick-controls-item.html">This controls inherits from QQC2 Item, to checkout its inherited properties refer to the Qt Docs.</a>
0031 *
0032 * The structure of this control is divided into a top header for the image/icon and a two labels for the title and message, at the bottom.
0033 * The top section can be modified and assigned to any custom control.
0034 * @see iconComponent
0035 *
0036 * For extra information checkout the GridBrowserDelegate documentation, since this template elementis used as its base.
0037 */
0038 Item
0039 {
0040 id: control
0041 focus: true
0042 smooth : true
0043
0044 implicitHeight: _layout.implicitHeight
0045
0046 /**
0047 * @brief The spacing size between the image/icon header and the label title and message.
0048 * @property int GridItemTemplate::spacing
0049 */
0050 property alias spacing: _layout.spacing
0051
0052 /**
0053 * @brief By default all children will be positioned at the bottom end of the column.
0054 * The positioning of the elements is handled by a ColumnLayout, so use the attached properties accordingly.
0055 * @property list<QtObject> GridItemTemplate::content
0056 */
0057 default property alias content: _layout.data
0058
0059 /**
0060 * @brief The text use for the title text.
0061 * @property string GridItemTemplate::text1
0062 */
0063 property alias text1 : _label1.text
0064
0065 /**
0066 * @brief The text use for the message text.
0067 * @property string GridItemTemplate::text2
0068 */
0069 property alias text2 : _label2.text
0070
0071 /**
0072 * @brief An alias for the QQC2 Label handling the title text. Exposed for fine tuning the label font properties.
0073 * @note See the QQC2 Label documentation for more information.
0074 * @property Label GridItemTemplate::label1
0075 */
0076 readonly property alias label1 : _label1
0077
0078 /**
0079 * @brief An alias for the QQC2 Label handling the message text. Exposed for fine tuning the label font properties.
0080 * @note See the QQC2 Label documentation for more information.
0081 * @property Label GridItemTemplate::label2
0082 */
0083 readonly property alias label2 : _label2
0084
0085 /**
0086 * @brief The Item loaded as the icon header section.
0087 * The component used as the icon header is loaded with a QQC2 Loader - this property exposes that element that was loaded.
0088 * By default the loaded item will be a MauiKit IconItem, but if another component is used for `iconComponent`, that will be the resulting Item.
0089 * @see structure
0090 * @property Item GridItemTemplate::iconItem
0091 */
0092 readonly property alias iconItem : _iconLoader.item
0093
0094 /**
0095 * @brief The container for the icon header section. This is handled by a QQC2 Loader.
0096 * By default the source component will be loaded asynchronous.
0097 * @property Loader GridItemTemplate::iconContainer
0098 */
0099 readonly property alias iconContainer : _iconLoader
0100
0101 /**
0102 * @brief Whether the icon/image header section should be visible.
0103 * @property bool GridItemTemplate::iconVisible
0104 */
0105 property alias iconVisible : _iconLoader.visible
0106
0107 /**
0108 * @brief A size hint for the bottom labels. The final size will depend on the available space.
0109 * @property int GridItemTemplate::iconSizeHint
0110 */
0111 property alias labelSizeHint : _labelsContainer.labelSizeHint
0112
0113 /**
0114 * @brief A size hint for the icon to be used in the header. The final size will depend on the available space.
0115 */
0116 property int iconSizeHint : Maui.Style.iconSizes.big
0117
0118 /**
0119 * @brief A size hint for the image to be used in the header. The final size will depend on the available space.
0120 * By default this is set to `-1` which means that the image header will take the rest of the available space.
0121 */
0122 property int imageSizeHint : -1
0123
0124 /**
0125 * @see IconItem::imageSource
0126 */
0127 property string imageSource
0128
0129 /**
0130 * @see IconItem::iconSource
0131 */
0132 property string iconSource
0133
0134 /**
0135 * @brief Whether this element is currently on a selected or checked state. This is used to highlight the component accordingly.
0136 * By default this is set to `false`.
0137 */
0138 property bool isCurrentItem: false
0139
0140 /**
0141 * @brief Whether the two bottom labels, for title and message, should be displayed.
0142 * By default this is set to `true`.
0143 */
0144 property bool labelsVisible: true
0145
0146 /**
0147 * @see IconItem::fillMode
0148 * By default this is set to `Image.PreserveAspectCrop`.
0149 * @note For more options and information review the QQC2 Image documentation.
0150 */
0151 property int fillMode : Image.PreserveAspectCrop
0152
0153 /**
0154 * @see IconItem::maskRadius
0155 */
0156 property int maskRadius: 0
0157
0158 /**
0159 * @see IconItem::imageWidth
0160 */
0161 property int imageWidth : -1
0162
0163 /**
0164 * @see IconItem::imageHeight
0165 */
0166 property int imageHeight: -1
0167
0168 /**
0169 * @see IconItem::isMask
0170 * By default this is set to evaluate `true` for icons equal or smaller in size then 16 pixels.
0171 */
0172 property bool isMask : iconSizeHint <= Maui.Style.iconSizes.small
0173
0174 /**
0175 * @brief Whether the control should be styled as being hovered by a cursor.
0176 * By default his is set to `false`.
0177 */
0178 property bool hovered: false
0179
0180 /**
0181 * @brief Whether the image should be auto transformed, that means auto rotated.
0182 * @note See the QQC2 Image documentation for further information on this property.
0183 * By default this is set to `false`.
0184 */
0185 property bool autoTransform: false
0186
0187 /**
0188 * @brief Whether the control should be styled as being highlighted by some external event.
0189 * By default this is set to `false`.
0190 */
0191 property bool highlighted: false
0192
0193 /**
0194 * @brief The horizontal alignment of the control elements. If the text in the labels should be aligned to the left, right or be centered. This can also affect the icon.
0195 * By default this is set to `Qt.AlignHCenter`.
0196 * Possible values are:
0197 * - Qt.AlignLeft
0198 * - Qt.AlignRight
0199 * - Qt.AlignHCenter
0200 */
0201 property int alignment: Qt.AlignHCenter
0202
0203 /**
0204 * @brief The header section can be modified by changing its component to a custom one. By default the component used for the `iconComponent` is a MauiKit IconItem element.
0205 * @note When using a custom component for the header section, pay attention that it has an `implicitHeight` and `implicitWidth` set.
0206 */
0207 property Component iconComponent : _iconComponent
0208
0209 Component
0210 {
0211 id: _iconComponent
0212
0213 Maui.IconItem
0214 {
0215 iconSource: control.iconSource
0216 imageSource: control.imageSource
0217
0218 highlighted: control.isCurrentItem || control.highlighted
0219 hovered: control.hovered
0220 smooth: control.smooth
0221 iconSizeHint: control.iconSizeHint
0222 imageSizeHint: control.imageSizeHint
0223
0224 fillMode: control.fillMode
0225 maskRadius: control.maskRadius
0226
0227 imageWidth: control.imageWidth
0228 imageHeight: control.imageHeight
0229
0230 isMask: control.isMask
0231 image.autoTransform: control.autoTransform
0232
0233 alignment: control.alignment
0234 }
0235 }
0236
0237 ColumnLayout
0238 {
0239 id: _layout
0240 anchors.fill: parent
0241 spacing: Maui.Style.space.medium
0242
0243 Loader
0244 {
0245 id: _iconLoader
0246
0247 Layout.fillWidth: true
0248 Layout.fillHeight: true
0249
0250 asynchronous: true
0251 active: visible
0252 sourceComponent: control.iconComponent
0253
0254 Behavior on scale
0255 {
0256 NumberAnimation
0257 {
0258 duration: Maui.Style.units.longDuration
0259 easing.type: Easing.OutBack
0260 }
0261 }
0262 }
0263
0264 Item
0265 {
0266 id: _labelsContainer
0267 property int labelSizeHint: Math.min(64, _labels.implicitHeight)
0268 visible: control.labelsVisible && ( _label1.text || _label2.text)
0269
0270 Layout.preferredHeight: labelSizeHint
0271 Layout.fillWidth: true
0272 Layout.maximumHeight: control.height* 0.9
0273 Layout.minimumHeight: labelSizeHint
0274
0275 ColumnLayout
0276 {
0277 id: _labels
0278 anchors.fill: parent
0279 spacing: Maui.Style.space.tiny
0280
0281 Label
0282 {
0283 id: _label1
0284 visible: text && text.length
0285
0286 horizontalAlignment: control.alignment
0287 verticalAlignment: Qt.AlignVCenter
0288
0289 Layout.fillWidth: true
0290 Layout.fillHeight: true
0291 Layout.alignment: Qt.AlignCenter
0292
0293 elide: Qt.ElideRight
0294 wrapMode: Text.Wrap
0295 color: control.isCurrentItem || control.highlighted? control.Maui.Theme.highlightedTextColor : control.Maui.Theme.textColor
0296 }
0297
0298 Label
0299 {
0300 id: _label2
0301 visible: text.length
0302
0303 horizontalAlignment: control.alignment
0304 verticalAlignment: Qt.AlignVCenter
0305
0306 Layout.fillWidth: visible
0307 Layout.fillHeight: true
0308 Layout.alignment: Qt.AlignCenter
0309
0310 elide: Qt.ElideRight
0311 wrapMode: Text.NoWrap
0312 color: control.isCurrentItem || control.highlighted? control.Maui.Theme.highlightedTextColor : control.Maui.Theme.textColor
0313 opacity: control.isCurrentItem ? 0.8 : 0.6
0314 }
0315 }
0316 }
0317 }
0318 }