ui/components/TouchButton.qml

0001 /*
0002  * Copyright 2019 Eike Hein <hein@kde.org>
0003  *
0004  * This program is free software; you can redistribute it and/or
0005  * modify it under the terms of the GNU General Public License as
0006  * published by the Free Software Foundation; either version 2 of
0007  * the License or (at your option) version 3 or any later version
0008  * accepted by the membership of KDE e.V. (or its successor approved
0009  * by the membership of KDE e.V.), which shall act as a proxy
0010  * defined in Section 14 of version 3 of the license.
0011  *
0012  * This program is distributed in the hope that it will be useful,
0013  * but WITHOUT ANY WARRANTY; without even the implied warranty of
0014  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
0015  * GNU General Public License for more details.
0016  *
0017  * You should have received a copy of the GNU General Public License
0018  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
0019  */
0020
0021 import QtQuick 2.12
0022 import QtQuick.Window 2.12
0023 import QtQuick.Controls 2.12 as QQC2
0024
0025 import org.kde.kirigami 2.6 as Kirigami
0026
0027 Item {
0028     id: button
0029
0030     width: Math.max(Kirigami.Units.iconSizes.medium, fontMetrics.height) + Kirigami.Units.smallSpacing * 2
0031     height: width
0032
0033     signal tapped
0034
0035     property string iconColor: "white"
0036     property string toolTipText: ""
0037
0038     property alias background: blurredBackground.sourceItem
0039     property alias icon: icon.source
0040     property alias backgroundOpacity: plate.opacity
0041     property alias pressed: tapHandler.pressed
0042     property alias hovered: hoverHandler.hovered
0043     property alias containsMouse: hoverHandler.hovered
0044
0045     Kirigami.Theme.colorSet: Kirigami.Theme.Button
0046
0047     BlurredBackground { id: blurredBackground; mask: plate }
0048
0049     Rectangle {
0050         id: plate
0051
0052         anchors.fill: parent
0053
0054         radius: width / 2
0055
0056         color: "black"
0057         opacity: 0.31
0058
0059         Behavior on border.color { ColorAnimation { duration: Kirigami.Units.shortDuration } }
0060     }
0061
0062     Rectangle {
0063         id: border
0064
0065         anchors.fill: parent
0066
0067         radius: width / 2
0068
0069         color: "transparent"
0070         opacity: (button.containsMouse || button.pressed) ? 1.0 : 0.7
0071
0072         border.width: 2
0073         border.color: button.containsMouse ? Kirigami.Theme.hoverColor : (button.pressed ? Kirigami.Theme.highlightColor : "white")
0074
0075         Behavior on opacity  { NumberAnimation { duration: Kirigami.Units.shortDuration } }
0076         Behavior on border.color { ColorAnimation { duration: Kirigami.Units.shortDuration } }
0077     }
0078
0079     Kirigami.Icon {
0080         id: icon
0081
0082         anchors.centerIn: parent
0083
0084         width: parent.height * 0.65
0085         height: width
0086
0087         color: button.containsMouse ? Kirigami.Theme.hoverColor : (button.pressed ? Kirigami.Theme.highlightColor : iconColor)
0088         smooth: true
0089         isMask: true
0090
0091         Behavior on color { ColorAnimation { duration: Kirigami.Units.shortDuration } }
0092     }
0093
0094     QQC2.ToolTip.visible: containsMouse && !tapHandler.pressed
0095     QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
0096     QQC2.ToolTip.text: toolTipText
0097
0098     HoverHandler {
0099         id: hoverHandler
0100
0101         enabled: !page.touched
0102     }
0103
0104     TapHandler {
0105         id: tapHandler
0106
0107         gesturePolicy: TapHandler.ReleaseWithinBounds
0108
0109         onTapped: button.tapped()
0110     }
0111 }