moment/harmonyqml/components/base/HButton.qml

92 lines
2.3 KiB
QML
Raw Normal View History

2019-04-22 00:44:04 +10:00
import QtQuick 2.7
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.4
Button {
property int fontSize: HStyle.fontSize.normal
2019-04-27 06:02:20 +10:00
property color backgroundColor: "lightgray"
property alias overlayOpacity: buttonBackgroundOverlay.opacity
2019-04-22 00:44:04 +10:00
property string iconName: ""
2019-04-27 06:02:20 +10:00
property bool circle: false
property bool loading: false
property int contentWidth: 0
function loadingUntilFutureDone(future) {
loading = true
future.onGotResult.connect(function() { loading = false })
}
2019-04-22 00:44:04 +10:00
id: button
display: Button.TextBesideIcon
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
}
}
Component {
id: buttonContent
2019-04-27 06:02:20 +10:00
HRowLayout {
id: contentLayout
spacing: button.text && iconName ? 5 : 0
Component.onCompleted: contentWidth = implicitWidth
HIcon {
svgName: loading ? "hourglass" : iconName
dimension: contentLayout.height
2019-04-27 06:02:20 +10:00
}
HLabel {
text: button.text
font.pixelSize: fontSize
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
2019-04-27 06:02:20 +10:00
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
}
}
}
2019-04-27 06:02:20 +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
}
}
contentItem: Loader {
sourceComponent:
loading && ! iconName ? loadingOverlay : buttonContent
}
2019-04-27 06:02:20 +10:00
MouseArea {
2019-04-27 06:52:26 +10:00
z: 101
2019-04-27 06:02:20 +10:00
anchors.fill: parent
hoverEnabled: true
propagateComposedEvents: true
onEntered: overlayOpacity = checked ? 0 : 0.3
onExited: overlayOpacity = 0
onPressed: overlayOpacity += 0.3
onReleased: {
if (checkable) { checked = ! checked }
overlayOpacity = checked ? 0 : 0.3
}
}
2019-04-22 00:44:04 +10:00
}