src/qml/NumberButton.qml

0001 /*
0002  * SPDX-FileCopyrightText: 2020-2021 Han Young <hanyoung@protonmail.com>
0003  * SPDX-FileCopyrightText: 2014 Aaron Seigo <aseigo@kde.org>
0004  * SPDX-FileCopyrightText: 2014 Marco Martin <mart@kde.org>
0005  * SPDX-FileCopyrightText: 2020 Devin Lin <espidev@gmail.com>
0006  *
0007  * SPDX-License-Identifier: GPL-3.0-or-later
0008  */
0009
0010 import QtQuick 2.15
0011 import QtQuick.Layouts 1.1
0012 import Qt5Compat.GraphicalEffects
0013 import QtQuick.Controls 2.2 as Controls
0014
0015 import org.kde.kirigami 2.15 as Kirigami
0016
0017 Item {
0018     id: root
0019     Layout.fillWidth: true
0020     Layout.fillHeight: true
0021
0022     signal clicked(string text)
0023     signal longClicked()
0024
0025     property string text
0026     property string display: text
0027     property bool special: false
0028     property bool down: false
0029
0030     Kirigami.Theme.colorSet: Kirigami.Theme.View
0031     Kirigami.Theme.inherit: false
0032
0033     property color baseColor: Kirigami.Theme.highlightColor
0034     property color buttonColor: Kirigami.Theme.backgroundColor
0035     property color buttonHoveredColor: Kirigami.Theme.alternateBackgroundColor
0036     property color buttonPressedColor: Qt.rgba(baseColor.r, baseColor.g, baseColor.b, 0.3)
0037     property color buttonBorderColor: Qt.rgba(buttonTextColor.r, buttonTextColor.g, buttonTextColor.b, 0.2)
0038     property color buttonBorderHoveredColor: buttonBorderColor
0039     property color buttonBorderPressedColor: Qt.rgba(baseColor.r, baseColor.g, baseColor.b, 0.7)
0040     property color buttonTextColor: Kirigami.Theme.textColor
0041
0042     // vibration
0043     // TODO bring back
0044     //HapticsEffect {
0045     //    id: vibrate
0046     //    attackIntensity: 0.0
0047     //    attackTime: 0
0048     //    fadeTime: 0
0049     //    fadeIntensity: 0.0
0050     //    intensity: 0.5
0051     //    duration: 10
0052     //}
0053
0054     Controls.AbstractButton {
0055         id: button
0056         anchors.fill: parent
0057         focusPolicy: Qt.NoFocus
0058
0059         background: Rectangle {
0060             radius: Kirigami.Units.smallSpacing
0061             color: Kirigami.Theme.backgroundColor
0062
0063             // actual background fill
0064             Rectangle {
0065                 anchors.fill: parent
0066                 radius: Kirigami.Units.smallSpacing
0067                 color: button.pressed || root.down ? root.buttonPressedColor :
0068                 (hoverHandler.hovered && !Kirigami.Settings.isMobile ? root.buttonHoveredColor : root.buttonColor)
0069                 border.color: button.pressed ? root.buttonBorderPressedColor :
0070                     (hoverHandler.hovered && !Kirigami.Settings.isMobile ? root.buttonBorderHoveredColor : root.buttonBorderColor)
0071
0072                 Behavior on color { ColorAnimation { duration: 50 } }
0073                 Behavior on border.color { ColorAnimation { duration: 50 } }
0074             }
0075
0076             // small box shadow
0077             Rectangle {
0078                 anchors.top: parent.top
0079                 anchors.topMargin: 1
0080                 anchors.left: parent.left
0081                 anchors.right: parent.right
0082                 height: parent.height
0083                 z: -1
0084                 color: Qt.rgba(0, 0, 0, 0.05)
0085                 radius: Kirigami.Units.smallSpacing
0086             }
0087         }
0088
0089         contentItem: Item {
0090             anchors.centerIn: parent
0091
0092             Controls.Label {
0093                 id: label
0094                 anchors.centerIn: parent
0095                 visible: root.display !== "⌫" // not backspace icon
0096
0097                 font.pointSize: Math.max(Math.min(Math.round(parent.height * 0.27), Math.round(parent.width * 0.27)), 10)
0098                 font.weight: Font.DemiBold
0099                 text: root.display
0100                 opacity: special ? 0.4 : 0.9
0101                 horizontalAlignment: Text.AlignHCenter
0102                 color: root.buttonTextColor
0103             }
0104             Kirigami.Icon {
0105                 visible: root.display === "⌫" // backspace icon
0106                 source: "edit-clear"
0107                 anchors.centerIn: parent
0108                 opacity: special ? 0.6 : 1.0
0109                 implicitWidth: Math.round(parent.height * 0.3)
0110                 implicitHeight: width
0111             }
0112         }
0113
0114         onPressedChanged: {
0115             if (pressed) {
0116                 //vibrate.start();
0117             }
0118         }
0119
0120         onClicked: root.clicked(root.text)
0121         onPressAndHold: root.longClicked()
0122
0123         HoverHandler {
0124             id: hoverHandler
0125             acceptedDevices: PointerDevice.Mouse | PointerDevice.Stylus
0126         }
0127     }
0128 }