AZEN-SGG/amnezia-client
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added busy indicator component

Browse source 
- replaced the image of the connect button with native rendering
This commit is contained in:
vladimir.kuznetsov 2023-07-04 09:58:19 +09:00
parent b32935dd97
commit 43261f8469
10 changed files with 197 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

117
client/ui/qml/Components/ConnectButton.qml
View file

@ -1,12 +1,21 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Shapes
import Qt5Compat.GraphicalEffects
import ConnectionState 1.0
Button {
id: root
property string defaultButtonColor: "#D7D8DB"
property string progressButtonColor: "#D7D8DB"
property string connectedButtonColor: "#FBB26A"
implicitWidth: 190
implicitHeight: 190
Connections {
target: ConnectionController
@ -17,48 +26,98 @@ Button {
text: ConnectionController.connectionStateText
enabled: !ConnectionController.isConnectionInProgress
// enabled: !ConnectionController.isConnectionInProgress
background: Item {
clip: true
implicitWidth: parent.width
implicitHeight: parent.height
transformOrigin: Item.Center
implicitHeight: border.implicitHeight
implicitWidth: border.implicitWidth
Shape {
id: backgroundCircle
width: parent.implicitWidth
height: parent.implicitHeight
anchors.bottom: parent.bottom
anchors.right: parent.right
layer.enabled: true
layer.samples: 4
layer.effect: DropShadow {
anchors.fill: backgroundCircle
horizontalOffset: 0
verticalOffset: 0
radius: 10
samples: 25
color: "#FBB26A"
source: backgroundCircle
}
Image {
id: border
ShapePath {
fillColor: "transparent"
strokeColor: {
if (ConnectionController.isConnectionInProgress) {
return Qt.rgba(251/255, 178/255, 106/255, 1)
} else if (ConnectionController.isConnected) {
return connectedButtonColor
} else {
return defaultButtonColor
}
}
strokeWidth: 3
capStyle: ShapePath.RoundCap
source: {
if (ConnectionController.isConnectionInProgress) {
return "/images/connectionProgress.svg"
} else if (ConnectionController.isConnected) {
return "/images/connectionOff.svg"
} else {
return "/images/connectionOn.svg"
PathAngleArc {
centerX: backgroundCircle.width / 2
centerY: backgroundCircle.height / 2
radiusX: 93
radiusY: 93
startAngle: 0
sweepAngle: 360
}
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
enabled: false
}
}
Shape {
id: shape
width: parent.implicitWidth
height: parent.implicitHeight
anchors.bottom: parent.bottom
anchors.right: parent.right
layer.enabled: true
layer.samples: 4
visible: ConnectionController.isConnectionInProgress
ShapePath {
fillColor: "transparent"
strokeColor: "#D7D8DB"
strokeWidth: 3
capStyle: ShapePath.RoundCap
PathAngleArc {
centerX: shape.width / 2
centerY: shape.height / 2
radiusX: 93
radiusY: 93
startAngle: 245
sweepAngle: -180
}
}
RotationAnimator {
id: connectionProccess
target: border
target: shape
running: ConnectionController.isConnectionInProgress
from: 0
to: 360
loops: Animation.Infinite
duration: 1250
duration: 1000
}
Behavior on source {
PropertyAnimation { duration: 200 }
}
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
enabled: false
}
}
@ -69,7 +128,7 @@ Button {
font.weight: 700
font.pixelSize: 20
color: "#D7D8DB"
color: ConnectionController.isConnected ? connectedButtonColor : defaultButtonColor
text: root.text
horizontalAlignment: Text.AlignHCenter