lookandfeel/components/ActionButton.qml

0001 /*
0002     SPDX-FileCopyrightText: 2016 David Edmundson <davidedmundson@kde.org>
0003
0004     SPDX-License-Identifier: LGPL-2.0-or-later
0005 */
0006
0007 import QtQuick 2.15
0008
0009 import org.kde.plasma.components 3.0 as PlasmaComponents3
0010 import org.kde.kirigami 2.20 as Kirigami
0011
0012 Item {
0013     id: root
0014     property alias text: label.text
0015     property alias iconSource: icon.source
0016     property alias containsMouse: mouseArea.containsMouse
0017     property alias font: label.font
0018     property alias labelRendering: label.renderType
0019     property alias circleOpacity: iconCircle.opacity
0020     property alias circleVisiblity: iconCircle.visible
0021     property int fontSize: Kirigami.Theme.defaultFont.pointSize + 1
0022     readonly property bool softwareRendering: GraphicsInfo.api === GraphicsInfo.Software
0023     signal clicked
0024
0025     activeFocusOnTab: true
0026
0027     property int iconSize: Kirigami.Units.gridUnit * 3
0028
0029     implicitWidth: Math.max(iconSize + Kirigami.Units.gridUnit * 2, label.contentWidth)
0030     implicitHeight: iconSize + Kirigami.Units.smallSpacing + label.implicitHeight
0031
0032     opacity: activeFocus || containsMouse ? 1 : 0.85
0033     Behavior on opacity {
0034         PropertyAnimation { // OpacityAnimator makes it turn black at random intervals
0035             duration: Kirigami.Units.longDuration
0036             easing.type: Easing.InOutQuad
0037         }
0038     }
0039
0040     Rectangle {
0041         id: iconCircle
0042         anchors.centerIn: icon
0043         width: iconSize + Kirigami.Units.smallSpacing
0044         height: width
0045         radius: width / 2
0046         color: softwareRendering ?  Kirigami.Theme.backgroundColor : Kirigami.Theme.textColor
0047         opacity: root.activeFocus || containsMouse ? (softwareRendering ? 0.8 : 0.15) : (softwareRendering ? 0.6 : 0)
0048         Behavior on opacity {
0049             PropertyAnimation { // OpacityAnimator makes it turn black at random intervals
0050                 duration: Kirigami.Units.longDuration
0051                 easing.type: Easing.InOutQuad
0052             }
0053         }
0054     }
0055
0056     Rectangle {
0057         anchors.centerIn: iconCircle
0058         width: iconCircle.width
0059         height: width
0060         radius: width / 2
0061         scale: mouseArea.containsPress ? 1 : 0
0062         color: Kirigami.Theme.textColor
0063         opacity: 0.15
0064         Behavior on scale {
0065             PropertyAnimation {
0066                 duration: Kirigami.Units.shortDuration
0067                 easing.type: Easing.InOutQuart
0068             }
0069         }
0070     }
0071
0072     Kirigami.Icon {
0073         id: icon
0074         anchors {
0075             top: parent.top
0076             horizontalCenter: parent.horizontalCenter
0077         }
0078         isMask: true
0079         width: iconSize
0080         height: iconSize
0081
0082         active: mouseArea.containsMouse || root.activeFocus
0083     }
0084
0085     PlasmaComponents3.Label {
0086         id: label
0087         font.pointSize: root.fontSize
0088         anchors {
0089             top: icon.bottom
0090             topMargin: softwareRendering ? Kirigami.Units.mediumSpacing : Kirigami.Units.smallSpacing
0091             left: parent.left
0092             right: parent.right
0093         }
0094         style: softwareRendering ? Text.Outline : Text.Normal
0095         styleColor: softwareRendering ? Kirigami.Theme.backgroundColor : "transparent" //no outline, doesn't matter
0096         horizontalAlignment: Text.AlignHCenter
0097         verticalAlignment: Text.AlignTop
0098         textFormat: Text.PlainText
0099         wrapMode: Text.WordWrap
0100         font.underline: root.activeFocus
0101     }
0102
0103     MouseArea {
0104         id: mouseArea
0105         hoverEnabled: true
0106         onClicked: root.clicked()
0107         anchors.fill: parent
0108     }
0109
0110     Keys.onEnterPressed: clicked()
0111     Keys.onReturnPressed: clicked()
0112     Keys.onSpacePressed: clicked()
0113
0114     Accessible.onPressAction: clicked()
0115     Accessible.role: Accessible.Button
0116     Accessible.name: label.text
0117 }