src/controls.6/Badge.qml

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.Controls.Control
0027  *    @since org.mauikit.controls 1.0
0028  *    @brief A Badge item to display text - as a counter - or an icon as a notification hint.
0029  *
0030  *    <a href="https://doc.qt.io/qt-6/qml-qtquick-controls-control.html">This controls inherits from QQC2 Control, to checkout its inherited properties refer to the Qt Docs.</a>
0031  *
0032  *    @image html Badge/badges.png "Badges with different sizes and colors"
0033  *
0034  *    @code
0035  *    Button
0036  *    {
0037  *        text: "Example1"
0038  *
0039  *        Maui.Badge
0040  *        {
0041  *            icon.name: "actor"
0042  *            color: Maui.Theme.neutralBackgroundColor
0043  *            anchors.horizontalCenter: parent.right
0044  *            anchors.verticalCenter: parent.top
0045  *        }
0046  *    }
0047  *    @endcode
0048  *
0049  *    <a href="https://invent.kde.org/maui/mauikit/-/blob/qt6-2/examples/Badge.qml">You can find a more complete example at this link.</a>
0050  *
0051  */
0052 Control
0053 {
0054     id: control
0055
0056     Maui.Theme.inherit: false
0057     Maui.Theme.colorSet: Maui.Theme.Complementary
0058
0059     /**
0060      * @brief Size of the badge. Used as width and height, unless the `implicitWidth` is wider.
0061      * It is also used as the icon size doimentions.
0062      * By default is set to `Style.iconSizes.small`
0063      */
0064     property int size: Maui.Style.iconSizes.small
0065
0066     /**
0067      * @brief The icon group property. Exposed to define the icon name, color, and width and height.
0068      * To know more about it you can check the QQC2 icon property.
0069      */
0070     property alias icon : _dummyButton.icon
0071
0072     /**
0073      * @brief The text to be used in the label.
0074      * Consider using short text, as this is meant to work as a notification hint.
0075      */
0076     property alias text : _dummyButton.text
0077
0078     /**
0079      * @brief The color for the background of the badge
0080      */
0081     property color color:  Maui.Theme.backgroundColor
0082
0083     font.weight: Font.Bold
0084     font.bold: true
0085     font.pointSize: Maui.Style.fontSizes.small
0086
0087     implicitWidth: implicitContentWidth + leftPadding + rightPadding
0088     implicitHeight: implicitContentHeight + topPadding + bottomPadding
0089
0090     padding: Maui.Style.space.tiny
0091
0092     AbstractButton
0093     {
0094         id: _dummyButton
0095         visible: false
0096         icon.color: Maui.Theme.textColor
0097         icon.width: size
0098         icon.height: size
0099     }
0100
0101     background: Rectangle
0102     {
0103         radius: Math.min(width, height)
0104         color: control.color
0105         border.color: Qt.lighter(control.color)
0106
0107         Behavior on color
0108         {
0109             Maui.ColorTransition{}
0110         }
0111     }
0112
0113     contentItem: Maui.IconLabel
0114     {
0115         text: control.text
0116         font: control.font
0117         icon: control.icon
0118         color: control.icon.color
0119         spacing: control.spacing
0120         alignment: Qt.AlignHCenter
0121     }
0122 }