2019-04-22 00:44:04 +10:00
|
|
|
import QtQuick 2.7
|
|
|
|
import QtQuick.Controls 2.2
|
|
|
|
import QtQuick.Layouts 1.4
|
|
|
|
|
|
|
|
Button {
|
2019-04-29 02:08:54 +10:00
|
|
|
property string iconName: ""
|
|
|
|
property var iconDimension: null
|
|
|
|
property bool circle: false
|
|
|
|
|
2019-04-27 11:16:45 +10:00
|
|
|
property int fontSize: HStyle.fontSize.normal
|
2019-04-29 05:13:18 +10:00
|
|
|
property color backgroundColor: HStyle.controls.button.background
|
2019-04-27 06:02:20 +10:00
|
|
|
property alias overlayOpacity: buttonBackgroundOverlay.opacity
|
2019-04-29 02:08:54 +10:00
|
|
|
|
2019-04-27 11:16:45 +10:00
|
|
|
property bool loading: false
|
|
|
|
|
|
|
|
property int contentWidth: 0
|
|
|
|
|
2019-04-29 04:20:30 +10:00
|
|
|
readonly property alias visibility: button.visible
|
|
|
|
onVisibilityChanged: if (! visibility) { loading = false }
|
|
|
|
|
2019-04-28 08:00:28 +10:00
|
|
|
signal canceled
|
|
|
|
signal clicked
|
|
|
|
signal doubleClicked
|
|
|
|
signal entered
|
|
|
|
signal exited
|
|
|
|
signal pressAndHold
|
|
|
|
signal pressed
|
|
|
|
signal released
|
|
|
|
|
2019-04-27 11:16:45 +10:00
|
|
|
function loadingUntilFutureDone(future) {
|
|
|
|
loading = true
|
|
|
|
future.onGotResult.connect(function() { loading = false })
|
|
|
|
}
|
2019-04-22 00:44:04 +10:00
|
|
|
|
|
|
|
id: button
|
2019-04-27 06:02:20 +10:00
|
|
|
|
|
|
|
background: Rectangle {
|
|
|
|
id: buttonBackground
|
|
|
|
color: Qt.lighter(backgroundColor, checked ? 1.3 : 1.0)
|
|
|
|
radius: circle ? height : 0
|
|
|
|
|
|
|
|
Rectangle {
|
|
|
|
id: buttonBackgroundOverlay
|
|
|
|
anchors.fill: parent
|
|
|
|
radius: parent.radius
|
|
|
|
color: "black"
|
|
|
|
opacity: 0
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-04-27 11:16:45 +10:00
|
|
|
Component {
|
|
|
|
id: buttonContent
|
2019-04-27 06:02:20 +10:00
|
|
|
|
2019-04-27 11:16:45 +10:00
|
|
|
HRowLayout {
|
|
|
|
id: contentLayout
|
|
|
|
spacing: button.text && iconName ? 5 : 0
|
|
|
|
Component.onCompleted: contentWidth = implicitWidth
|
|
|
|
|
|
|
|
HIcon {
|
|
|
|
svgName: loading ? "hourglass" : iconName
|
2019-04-29 02:08:54 +10:00
|
|
|
dimension: iconDimension || contentLayout.height
|
2019-04-27 06:02:20 +10:00
|
|
|
}
|
|
|
|
|
2019-04-27 11:16:45 +10:00
|
|
|
HLabel {
|
|
|
|
text: button.text
|
|
|
|
font.pixelSize: fontSize
|
|
|
|
horizontalAlignment: Text.AlignHCenter
|
|
|
|
verticalAlignment: Text.AlignVCenter
|
2019-04-27 06:02:20 +10:00
|
|
|
|
2019-04-27 11:16:45 +10:00
|
|
|
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2019-04-27 06:02:20 +10:00
|
|
|
|
2019-04-27 11:16:45 +10:00
|
|
|
Component {
|
|
|
|
id: loadingOverlay
|
|
|
|
HRowLayout {
|
|
|
|
HIcon {
|
|
|
|
svgName: "hourglass"
|
|
|
|
Layout.preferredWidth: contentWidth || -1
|
|
|
|
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
|
|
|
|
}
|
2019-04-27 06:02:20 +10:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-04-27 11:16:45 +10:00
|
|
|
contentItem: Loader {
|
|
|
|
sourceComponent:
|
|
|
|
loading && ! iconName ? loadingOverlay : buttonContent
|
|
|
|
}
|
|
|
|
|
2019-04-27 06:02:20 +10:00
|
|
|
MouseArea {
|
|
|
|
anchors.fill: parent
|
|
|
|
hoverEnabled: true
|
|
|
|
|
2019-04-28 08:00:28 +10:00
|
|
|
onCanceled: button.canceled()
|
|
|
|
onClicked: button.clicked()
|
|
|
|
onDoubleClicked: button.doubleClicked()
|
|
|
|
onEntered: {
|
|
|
|
overlayOpacity = checked ? 0 : 0.3
|
|
|
|
button.entered()
|
|
|
|
}
|
|
|
|
onExited: {
|
|
|
|
overlayOpacity = 0
|
|
|
|
button.exited()
|
|
|
|
}
|
|
|
|
onPressAndHold: button.pressAndHold()
|
|
|
|
onPressed: {
|
|
|
|
overlayOpacity += 0.3
|
|
|
|
button.pressed()
|
|
|
|
}
|
2019-04-27 06:02:20 +10:00
|
|
|
onReleased: {
|
|
|
|
if (checkable) { checked = ! checked }
|
|
|
|
overlayOpacity = checked ? 0 : 0.3
|
2019-04-28 08:00:28 +10:00
|
|
|
button.released()
|
2019-04-27 06:02:20 +10:00
|
|
|
}
|
|
|
|
}
|
2019-04-22 00:44:04 +10:00
|
|
|
}
|