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 }