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 }