status-desktop/ui/shared/status/StatusRoundButton.qml

210 lines
6.1 KiB
QML
Raw Normal View History

2020-08-25 11:15:18 +00:00
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtGraphicalEffects 1.13
import QtQml 2.14
import StatusQ.Components 0.1
import utils 1.0
import "../../shared/panels"
2020-08-25 11:15:18 +00:00
RoundButton {
property string type: "primary"
2020-08-25 11:15:18 +00:00
property string size: "large"
property int pressedIconRotation: 0
property alias iconX: iconImg.x
2020-08-25 11:15:18 +00:00
id: control
font.pixelSize: 15
font.weight: Font.Medium
implicitWidth: {
switch(size) {
case "large":
return 44
case "medium":
return 40
case "small":
return 32
default:
return 44
}
}
implicitHeight: implicitWidth
enabled: state === "default" || state === "pressed"
rotation: 0
state: "default"
states: [
State {
name: "default"
PropertyChanges {
target: iconColorOverlay
visible: true
rotation: 0
}
PropertyChanges {
target: loadingIndicator
active: false
}
},
State {
name: "pressed"
PropertyChanges {
target: iconColorOverlay
rotation: control.pressedIconRotation
visible: true
}
PropertyChanges {
target: loadingIndicator
active: false
}
},
State {
name: "pending"
PropertyChanges {
target: loadingIndicator
active: true
}
PropertyChanges {
target: iconColorOverlay
visible: false
}
}
]
transitions: [
Transition {
from: "default"
to: "pressed"
2020-08-25 11:15:18 +00:00
RotationAnimation {
duration: 150
direction: RotationAnimation.Clockwise
easing.type: Easing.InCubic
}
},
Transition {
from: "pressed"
to: "default"
RotationAnimation {
duration: 150
direction: RotationAnimation.Counterclockwise
easing.type: Easing.OutCubic
}
}
]
2020-08-25 11:15:18 +00:00
icon.height: {
switch(size) {
case "large":
return 20
case "medium":
return 14
case "small":
return 12
default:
return 20
}
}
icon.width: {
switch(size) {
case "large":
return 20
case "medium":
return 14
case "small":
return 12
default:
return 20
}
}
icon.color: type === "secondary" ?
!enabled ?
2020-08-25 11:15:18 +00:00
Style.current.roundedButtonSecondaryDisabledForegroundColor :
Style.current.roundedButtonSecondaryForegroundColor
:
!enabled ?
Style.current.roundedButtonDisabledForegroundColor :
2020-08-25 11:15:18 +00:00
Style.current.roundedButtonForegroundColor
onIconChanged: {
icon.source = icon.name ? Style.svg(icon.name) : ""
}
2020-08-25 11:15:18 +00:00
background: Rectangle {
anchors.fill: parent
opacity: hovered && size === "large" && type !== "secondary" ? 0.2 : 1
2020-08-25 11:15:18 +00:00
color: {
if (size === "medium" || size === "small" || type === "secondary") {
2020-08-25 11:15:18 +00:00
return !enabled ? Style.current.roundedButtonSecondaryDisabledBackgroundColor :
hovered ? (control.type === "warn" ? Style.current.red : Style.current.roundedButtonSecondaryHoveredBackgroundColor) :
(control.type === "warn" ? Style.current.lightRed : Style.current.roundedButtonSecondaryBackgroundColor)
2020-08-25 11:15:18 +00:00
}
return !enabled ?
Style.current.roundedButtonDisabledBackgroundColor :
hovered ? (control.type === "warn" ? Style.current.red : Style.current.buttonHoveredBackgroundColor) :
(control.type === "warn" ? Style.current.lightRed : Style.current.roundedButtonBackgroundColor)
2020-08-25 11:15:18 +00:00
}
radius: parent.width / 2
}
contentItem: Item {
anchors.fill: parent
2020-08-25 11:15:18 +00:00
SVGImage {
id: iconImg
visible: false
source: control.icon.source
height: control.icon.height
width: control.icon.width
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
fillMode: Image.PreserveAspectFit
}
Component {
id: loadingComponent
StatusLoadingIndicator {
color: control.size === "medium" || control.size === "small" ?
Style.current.roundedButtonSecondaryDisabledForegroundColor :
Style.current.roundedButtonDisabledForegroundColor
}
}
Loader {
id: loadingIndicator
sourceComponent: loadingComponent
height: size === "small" ? 14 : 18
width: loadingIndicator.height
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}
ColorOverlay {
id: iconColorOverlay
anchors.fill: iconImg
source: iconImg
color: {
if (type === "secondary") {
return !control.enabled ?
Style.current.roundedButtonSecondaryDisabledForegroundColor :
(control.type === "warn" ? Style.current.danger : Style.current.roundedButtonSecondaryForegroundColor)
}
return !control.enabled ?
Style.current.roundedButtonDisabledForegroundColor :
(control.type === "warn" ? Style.current.danger : Style.current.roundedButtonForegroundColor)
}
antialiasing: true
}
2020-08-25 11:15:18 +00:00
}
MouseArea {
hoverEnabled: true
2020-08-25 11:15:18 +00:00
cursorShape: Qt.PointingHandCursor
anchors.fill: parent
onPressed: mouse.accepted = false
}
}