Warning, /maui/mauikit/src/controls.6/Holder.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.Controls
0022
0023 import org.mauikit.controls 1.3 as Maui
0024
0025 /**
0026 * @inherit QtQuick.Item
0027 * @brief Holder
0028 * A component meant to be used as a placeholder element with support for a title, message body, icon image - animated or not -, and a set of contextual actions.
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 * This control is meant to display messages, such as warning messages with a title and icon, and with a set of possible actions.
0033 * The default content children of this component are QQC2 Actions.
0034 *
0035 * @image html Holder/holder_actions.png "Placeholder message using a colorful icon image"
0036 *
0037 * @section notes Notes
0038 * By default the icon is supossed to be symbolic and will be colored - if a colorful icon is to be used, the coloring mask should toggle off.
0039 * @see isMask
0040 * @see emoji
0041 *
0042 * It is possible to add an animated image source as the icon. To enable the animation toggle on the animation property.
0043 * @see isGif
0044 *
0045 * @code
0046 * Holder
0047 * {
0048 * title: "Holder"
0049 * body: "Placeholder message."
0050 *
0051 * emoji: "dialog-warning"
0052 * isMask: false
0053 *
0054 * QQC2.Action
0055 * {
0056 * text: "Action1"
0057 * }
0058 *
0059 * QQC2.Action
0060 * {
0061 * text: "Action2"
0062 * }
0063 *
0064 * QQC2.Action
0065 * {
0066 * text: "Action3"
0067 * }
0068 * }
0069 * @endcode
0070 *
0071 * <a href="https://invent.kde.org/maui/mauikit/-/blob/qt6-2/examples/Holder.qml">You can find a more complete example at this link.</a>
0072 *
0073 */
0074 Item
0075 {
0076 id: control
0077 implicitHeight: _layout.implicitHeight
0078
0079 /**
0080 * @brief A list of contextual actions. By default this control takes a list of QQC2 Actions as the children.
0081 * The actions will be represented as a column of button under the title and message.
0082 */
0083 default property list<Action> actions
0084
0085 /**
0086 * @brief An alias to add children elements to the bottom of the default layout container.
0087 * @property list<QtObject> Holder::content
0088 *
0089 * @code
0090 * Holder
0091 * {
0092 * title: "Example"
0093 * emoji: "actor"
0094 * body: "Test of the holder"
0095 *
0096 * content: Chip
0097 * {
0098 * text: "Hello World!"
0099 * }
0100 * }
0101 * @endcode
0102 */
0103 property alias content : _layout.data
0104
0105 /**
0106 * @brief The icon source to be used as the heading.
0107 */
0108 property string emoji
0109
0110 /**
0111 * @brief The image to be used as the heading.
0112 */
0113 property string imageSource
0114
0115 /**
0116 * @brief The title of the place holder element.
0117 * @property string Holder::title
0118 */
0119 property alias title : _template.text1
0120
0121 /**
0122 * @brief The body message of the place holder element.
0123 * @property string Holder::body
0124 */
0125 property alias body : _template.text2
0126
0127 /**
0128 * @brief Whether the image/icon should be masked and tinted with the text color. If the `emoji` is set to a colorful source, then this should be set to `false`.
0129 */
0130 property bool isMask : true
0131
0132 /**
0133 * @brief Whether the `emoji` source is an animated image file.
0134 * By default this is set to `false`.
0135 */
0136 property bool isGif : false
0137
0138 /**
0139 * @brief The size of the icon/image used as the emoji.
0140 * By default this value is set to `Style.iconSizes.big`.
0141 */
0142 property int emojiSize : Maui.Style.iconSizes.big
0143
0144 /**
0145 * @brief The Label element used as the title.
0146 * This is exposed so the title label properties can be tweaked, such as making the font bolder, lighter or changing its color or size.
0147 * @property Label Holder::label1
0148 * @see title
0149 */
0150 property alias label1 : _template.label1
0151
0152 /**
0153 * @brief The Label element used as the message body.
0154 * This is exposed so the body message label properties can be tweaked, such as making the font bolder, lighter or changing its color or size.
0155 * @property Label Holder::label2
0156 * @see body
0157 */
0158 property alias label2 : _template.label2
0159
0160 /**
0161 * @brief Alias to the DropArea exposed to tweak its properties.
0162 */
0163 readonly property alias dropArea: _dropArea
0164
0165 /**
0166 * @brief Emitted when a drop event has occurred
0167 * @param drop the drop object with the event information
0168 */
0169 signal contentDropped(var drop)
0170
0171 Component
0172 {
0173 id: imgComponent
0174
0175 Maui.IconItem
0176 {
0177 id: imageHolder
0178
0179 isMask: control.isMask
0180 opacity: isMask ? _template.opacity : 1
0181 iconSource: control.emoji
0182 imageSource: control.imageSource
0183 fillMode: Image.PreserveAspectFit
0184 }
0185 }
0186
0187 Component
0188 {
0189 id: animComponent
0190 AnimatedImage
0191 {
0192 id: animation
0193 source: control.emoji
0194 }
0195 }
0196
0197 Rectangle
0198 {
0199 anchors.fill: parent
0200 opacity: _dropArea.containsDrag ? 0.4 : 0
0201 color: Maui.Theme.textColor
0202 DropArea
0203 {
0204 id: _dropArea
0205 anchors.fill: parent
0206 onDropped: (drop) =>
0207 {
0208 control.contentDropped(drop)
0209 }
0210 }
0211 }
0212
0213 Column
0214 {
0215 id: _layout
0216 anchors.centerIn: parent
0217 spacing: Maui.Style.defaultSpacing
0218
0219 Loader
0220 {
0221 visible: active && (control.emoji || control.imageSource)
0222 active: control.height > (_template.implicitHeight + control.emojiSize)
0223 height: visible ? control.emojiSize : 0
0224 width: height
0225 asynchronous: true
0226 sourceComponent: control.isGif ? animComponent : imgComponent
0227 }
0228
0229 Maui.ListItemTemplate
0230 {
0231 id: _template
0232 width: Math.min(control.width * 0.7, layout.implicitWidth)
0233
0234 label1.font: Maui.Style.h1Font
0235 label1.wrapMode: Text.Wrap
0236 label2.wrapMode: Text.Wrap
0237 }
0238
0239 Item
0240 {
0241 height: Maui.Style.space.medium;
0242 width: height
0243 }
0244
0245 Repeater
0246 {
0247 model: control.actions
0248
0249 Button
0250 {
0251 id: _button
0252 width: Math.max(120, implicitWidth)
0253 action: modelData
0254 }
0255 }
0256 }
0257 }