src/controls.5/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 2.15
0021 import QtQuick.Controls 2.15
0022
0023 import org.mauikit.controls 1.3 as Maui
0024
0025 /*!
0026 \since org.mauikit.controls 1.0
0027 \inqmlmodule org.mauikit.controls
0028 \brief Badge to show a counter or an icon as a notification hint.
0029 */
0030 Rectangle
0031 {
0032     id: control
0033
0034     Maui.Theme.inherit: false
0035     Maui.Theme.colorSet: Maui.Theme.Complementary
0036
0037     /*!
0038       \qmlproperty bool ApplicationWindow::item
0039
0040       The current item being used, a label or an icon
0041     */
0042     property alias item : loader.item
0043
0044     /*!
0045       \qmlproperty bool ApplicationWindow::hovered
0046
0047       If the badge is hovered by a cursor
0048     */
0049     readonly property alias hovered : mouseArea.containsMouse
0050
0051     /*!
0052       \qmlproperty bool ApplicationWindow::pressed
0053
0054       If the badge is pressed
0055     */
0056     readonly property alias pressed : mouseArea.pressed
0057
0058     /*!
0059       \qmlproperty MouseArea ApplicationWindow::mouseArea
0060     */
0061     property alias mouseArea : mouseArea
0062
0063     /*!
0064       Size of the badge. Can be used as width and height, unless the implicitWidth is wider.
0065     */
0066     property int size: Maui.Style.iconSizes.medium
0067
0068     /*!
0069       Name of the icon to be used by the badge
0070     */
0071     property string iconName : ""
0072
0073     /*!
0074       Text to be used by the badge
0075     */
0076     property string text : ""
0077
0078     property font font
0079
0080     font.weight: Font.Bold
0081     font.bold: true
0082     font.pointSize: Maui.Style.fontSizes.small
0083
0084
0085     /**
0086       * clicked :
0087       */
0088     signal clicked()
0089
0090     /**
0091       * hovered :
0092       */
0093     signal hovered()
0094
0095     /**
0096       * released :
0097       */
0098     signal released()
0099
0100     implicitHeight: size
0101     implicitWidth: loader.sourceComponent == labelComponent ? Math.max(loader.implicitWidth, size) : size
0102
0103     radius: Math.min(width, height)
0104     color: Maui.Theme.backgroundColor
0105
0106     Behavior on color
0107     {
0108         Maui.ColorTransition{}
0109     }
0110
0111     Loader
0112     {
0113         id: loader
0114         anchors.fill: parent
0115         asynchronous: true
0116         sourceComponent: control.text.length && !control.iconName.length ? labelComponent : (!control.text.length && control.iconName.length ? iconComponent : undefined)
0117     }
0118
0119     Component
0120     {
0121         id: labelComponent
0122
0123         Label
0124         {
0125             text: control.text
0126             font: control.font
0127             color: Maui.Theme.textColor
0128             verticalAlignment: Qt.AlignVCenter
0129             horizontalAlignment: Qt.AlignHCenter
0130         }
0131     }
0132
0133     Component
0134     {
0135         id: iconComponent
0136         Maui.Icon
0137         {
0138             anchors.centerIn: parent
0139             source: control.iconName
0140             color: Maui.Theme.textColor
0141             width: control.size
0142             height: width
0143             isMask: true
0144         }
0145     }
0146
0147     MouseArea
0148     {
0149         id: mouseArea
0150         hoverEnabled: true
0151
0152         readonly property int targetMargin:  Maui.Handy.isTouch ? Maui.Style.space.big : 0
0153
0154         height: parent.height + targetMargin
0155         width: parent.width + targetMargin
0156
0157         anchors.centerIn: parent
0158         onClicked: control.clicked()
0159         onReleased: control.released()
0160     }
0161 }