moment/harmonyqml/components/Base/HButton.qml
miruka 55e701c24d Improve sidePane expand toggle buttons
Animate them, use an icon that makes more sense, have a componant file
2019-05-06 20:37:41 -04:00

128 lines
3.3 KiB
QML

import QtQuick 2.7
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
Button {
property int horizontalMargin: 0
property int verticalMargin: 0
property string iconName: ""
property var iconDimension: null
property var iconTransform: null
property bool circle: false
property int fontSize: HStyle.fontSize.normal
property color backgroundColor: HStyle.controls.button.background
property alias overlayOpacity: buttonBackgroundOverlay.opacity
property bool loading: false
property int contentWidth: 0
readonly property alias visibility: button.visible
onVisibilityChanged: if (! visibility) { loading = false }
signal canceled
signal clicked
signal doubleClicked
signal entered
signal exited
signal pressAndHold
signal pressed
signal released
function loadingUntilFutureDone(future) {
loading = true
future.onGotResult.connect(function() { loading = false })
}
id: button
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
HRowLayout {
id: contentLayout
spacing: button.text && iconName ? 5 : 0
Component.onCompleted: contentWidth = implicitWidth
HIcon {
svgName: loading ? "hourglass" : iconName
dimension: iconDimension || contentLayout.height
transform: iconTransform
Layout.topMargin: verticalMargin
Layout.bottomMargin: verticalMargin
Layout.leftMargin: horizontalMargin
Layout.rightMargin: horizontalMargin
}
HLabel {
text: button.text
font.pixelSize: fontSize
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
}
}
}
Component {
id: loadingOverlay
HRowLayout {
HIcon {
svgName: "hourglass"
Layout.preferredWidth: contentWidth || -1
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
}
}
}
contentItem: Loader {
sourceComponent:
loading && ! iconName ? loadingOverlay : buttonContent
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
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()
}
onReleased: {
if (checkable) { checked = ! checked }
overlayOpacity = checked ? 0 : 0.3
button.released()
}
}
}