Add a custom busy indicator to further align look and feel across platforms.

This commit is contained in:
Adam Treat 2023-05-31 19:28:09 -04:00
parent 9c6c09cbd2
commit 7d78ed50aa
6 changed files with 72 additions and 7 deletions

View File

@ -95,6 +95,7 @@ qt_add_qml_module(chat
qml/MyComboBox.qml
qml/MyTextField.qml
qml/MyCheckBox.qml
qml/MyBusyIndicator.qml
RESOURCES
icons/send_message.svg
icons/stop_generating.svg

View File

@ -163,7 +163,7 @@ Window {
height: childrenRect.height
Row {
spacing: 5
BusyIndicator {
MyBusyIndicator {
anchors.verticalCenter: parent.verticalCenter
running: parent.visible
Accessible.role: Accessible.Animation
@ -174,7 +174,7 @@ Window {
Label {
anchors.verticalCenter: parent.verticalCenter
text: qsTr("Loading model...")
color: theme.mutedTextColor
color: theme.textAccent
}
}
}
@ -649,7 +649,7 @@ Window {
height: childrenRect.height
Row {
spacing: 5
BusyIndicator {
MyBusyIndicator {
anchors.verticalCenter: parent.verticalCenter
running: (currentResponse ? true : false) && value === "" && currentChat.responseInProgress
Accessible.role: Accessible.Animation
@ -659,7 +659,7 @@ Window {
Label {
anchors.verticalCenter: parent.verticalCenter
text: currentChat.responseState + "..."
color: theme.mutedTextColor
color: theme.textAccent
}
}
}

View File

@ -177,7 +177,7 @@ Item {
LocalDocs.removeFolder(collection, folder_path)
}
}
BusyIndicator {
MyBusyIndicator {
id: busyIndicator
anchors.centerIn: parent
visible: item.removing

View File

@ -199,7 +199,7 @@ Dialog {
Accessible.description: qsTr("Whether the file hash is being calculated")
}
BusyIndicator {
MyBusyIndicator {
id: busyCalcHash
anchors.right: parent.right
padding: 20

View File

@ -0,0 +1,64 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Controls.Basic
BusyIndicator {
id: control
contentItem: Item {
implicitWidth: 48
implicitHeight: 48
Item {
id: item
x: parent.width / 2 - 24
y: parent.height / 2 - 24
width: 48
height: 48
opacity: control.running ? 1 : 0
Behavior on opacity {
OpacityAnimator {
duration: 250
}
}
RotationAnimator {
target: item
running: control.visible && control.running
from: 0
to: 360
loops: Animation.Infinite
duration: 1750
}
Repeater {
id: repeater
model: 6
Rectangle {
id: delegate
x: item.width / 2 - width / 2
y: item.height / 2 - height / 2
implicitWidth: 10
implicitHeight: 10
radius: 5
color: theme.textAccent
required property int index
transform: [
Translate {
y: -Math.min(item.width, item.height) * 0.5 + 5
},
Rotation {
angle: delegate.index / repeater.count * 360
origin.x: 5
origin.y: 5
}
]
}
}
}
}
}

View File

@ -37,7 +37,7 @@ Dialog {
Accessible.description: qsTr("Reveals a shortlived help balloon")
}
BusyIndicator {
MyBusyIndicator {
id: busyIndicator
visible: shouldShowBusy
running: shouldShowBusy