Refactor HButton
This commit is contained in:
@@ -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
63
src/qml/Base/HButton.qml
Normal 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
|
||||
}
|
||||
}
|
||||
}
|
@@ -1,6 +1,8 @@
|
||||
import QtQuick 2.12
|
||||
|
||||
HImage {
|
||||
visible: Boolean(svgName)
|
||||
|
||||
property string svgName: ""
|
||||
property int dimension: 20
|
||||
|
||||
|
@@ -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
|
||||
|
@@ -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
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user