Refactor HButton

This commit is contained in:
miruka
2019-08-20 17:41:24 -04:00
parent 7e7852b51e
commit ce128d5ab5
14 changed files with 101 additions and 187 deletions

View File

@@ -1,71 +0,0 @@
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
Button {
property bool circle: false
property color backgroundColor: theme.controls.button.background
property alias overlayOpacity: buttonBackgroundOverlay.opacity
property bool checkedLightens: false
signal canceled
signal clicked
signal doubleClicked
signal entered
signal exited
signal pressAndHold
signal pressed
signal released
id: button
background: Rectangle {
id: buttonBackground
color:
enabled ?
(checked ?
theme.controls.button.checkedBackground : backgroundColor) :
theme.controls.button.disabledBackground
radius: circle ? height : 0
Behavior on color { HColorAnimation { factor: 0.5 } }
Rectangle {
id: buttonBackgroundOverlay
anchors.fill: parent
radius: parent.radius
color: theme.controls.button.hoveredOverlay
opacity: 0
Behavior on opacity { HNumberAnimation { factor: 0.5 } }
}
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
onCanceled: button.canceled()
onClicked: button.clicked()
onDoubleClicked: button.doubleClicked()
onEntered: {
overlayOpacity = checked ? 0 : 0.15
button.entered()
}
onExited: {
overlayOpacity = 0
button.exited()
}
onPressAndHold: button.pressAndHold()
onPressed: {
overlayOpacity += 0.15
button.pressed()
}
onReleased: {
if (checkable) { checked = ! checked }
overlayOpacity = checked ? 0 : 0.15
button.released()
}
}
}

63
src/qml/Base/HButton.qml Normal file
View File

@@ -0,0 +1,63 @@
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
Button {
id: button
opacity: enabled ? 1 : theme.controls.button.disabledOpacity
onVisibleChanged: if (! visible) loading = false
readonly property alias ico: ico
readonly property alias label: label
property string iconName: ""
property color backgroundColor: theme.controls.button.background
property bool loading: false
property bool circle: false
background: HRectangle {
radius: circle ? height : 0
color: backgroundColor
HRectangle {
anchors.fill: parent
radius: parent.radius
color: button.checked ?
theme.controls.button.checkedOverlay :
button.enabled && button.pressed ?
theme.controls.button.pressedOverlay :
button.enabled && button.hovered ?
theme.controls.button.hoveredOverlay :
"transparent"
Behavior on color { HColorAnimation { factor: 0.5 } }
}
}
contentItem: HRowLayout {
spacing: button.spacing
HIcon {
id: ico
x: button.leftPadding
y: button.topPadding + button.availableHeight / 2 - height / 2
svgName: loading ? "hourglass" : iconName
}
HLabel {
id: label
text: button.text
visible: Boolean(text)
color: theme.controls.button.text
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
Layout.fillWidth: true
}
}
}

View File

@@ -1,6 +1,8 @@
import QtQuick 2.12
HImage {
visible: Boolean(svgName)
property string svgName: ""
property int dimension: 20

View File

@@ -68,13 +68,13 @@ HRectangle {
id: interfaceButtonsRepeater
model: []
HUIButton {
HButton {
property string name: modelData.name
id: button
text: modelData.text
iconName: modelData.iconName || ""
enabled: modelData.enabled === false ? false : true
enabled: modelData.enabled
onClicked: buttonCallbacks[modelData.name](button)
Layout.fillWidth: true

View File

@@ -1,74 +0,0 @@
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import QtGraphicalEffects 1.12
HBaseButton {
property int contentWidth: 0
property int horizontalMargin: 0
property int verticalMargin: 0
property int fontSize: theme.fontSize.normal
property string iconName: ""
property var iconDimension: null
property var iconTransform: null
property bool loading: false
readonly property alias visibility: button.visible
onVisibilityChanged: if (! visibility) { loading = false }
id: button
Component {
id: buttonContent
HRowLayout {
id: contentLayout
spacing: button.text && iconName ? theme.spacing : 0
Component.onCompleted: contentWidth = implicitWidth
HIcon {
svgName: loading ? "hourglass" : iconName
dimension: iconDimension || contentLayout.height
transform: iconTransform
opacity: button.enabled ? 1 : 0.7
Behavior on opacity { HNumberAnimation {} }
Layout.topMargin: verticalMargin
Layout.bottomMargin: verticalMargin
Layout.leftMargin: horizontalMargin
Layout.rightMargin: horizontalMargin
}
HLabel {
visible: Boolean(text)
text: button.text
font.pixelSize: fontSize
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
color: button.enabled ?
theme.controls.button.text :
theme.controls.button.disabledText
Layout.fillWidth: true
}
}
}
Component {
id: loadingOverlay
HRowLayout {
HIcon {
svgName: "hourglass"
Layout.preferredWidth: contentWidth || -1
Layout.alignment: Qt.AlignCenter
}
}
}
contentItem: HLoader {
sourceComponent:
loading && ! iconName ? loadingOverlay : buttonContent
}
}