Skip to content

Add looping animation to Estimating state #325

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 12, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 75 additions & 14 deletions src/qml/components/BlockClock.qml
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,11 @@ Item {
property int headerSize: 32
property bool connected: nodeModel.numOutboundPeers > 0
property bool synced: nodeModel.verificationProgress > 0.999
property string syncProgress: formatProgressPercentage(nodeModel.verificationProgress * 100)
property bool paused: false
property var syncState: formatRemainingSyncTime(nodeModel.remainingSyncTime)
property string syncTime: syncState.text
property bool estimating: syncState.estimating

activeFocusOnTab: true

Expand Down Expand Up @@ -82,15 +86,44 @@ Item {
Label {
id: subText
anchors.top: mainText.bottom
property bool estimating: root.estimating
anchors.horizontalCenter: root.horizontalCenter
font.family: "Inter"
font.styleName: "Semi Bold"
font.pixelSize: 18
color: Theme.color.neutral4

Behavior on color {
ColorAnimation { duration: 150 }
Component.onCompleted: {
colorChanged.connect(function() {
if (!subText.estimating) {
themeChange.restart();
}
});

estimatingChanged.connect(function() {
if (subText.estimating) {
estimatingTime.start();
} else {
estimatingTime.stop();
}
});

subText.estimatingChanged(subText.estimating);
}

ColorAnimation on color{
id: themeChange
target: subText
duration: 150
}

SequentialAnimation {
id: estimatingTime
loops: Animation.Infinite
ColorAnimation { target: subText; property: "color"; from: subText.color; to: Theme.color.neutral6; duration: 1000 }
ColorAnimation { target: subText; property: "color"; from: Theme.color.neutral6; to: subText.color; duration: 1000 }
}

}

PeersIndicator {
Expand Down Expand Up @@ -119,17 +152,17 @@ Item {
name: "IBD"; when: !synced && !paused && connected
PropertyChanges {
target: root
header: formatProgressPercentage(nodeModel.verificationProgress * 100)
subText: formatRemainingSyncTime(nodeModel.remainingSyncTime)
header: root.syncProgress
subText: root.syncTime
}
},

State {
name: "BLOCKCLOCK"; when: synced && !paused && connected
PropertyChanges {
target: root
header: Number(nodeModel.blockTipHeight).toLocaleString(Qt.locale(), 'f', 0)
subText: "Blocktime"
estimating: false
}
},

Expand All @@ -140,6 +173,7 @@ Item {
header: "Paused"
headerSize: 24
subText: "Tap to resume"
estimating: false
}
PropertyChanges {
target: bitcoinIcon
Expand All @@ -158,6 +192,7 @@ Item {
header: "Connecting"
headerSize: 24
subText: "Please wait"
estimating: false
}
PropertyChanges {
target: bitcoinIcon
Expand Down Expand Up @@ -191,29 +226,55 @@ Item {
minutes %= 1440;
var hours = Math.floor(minutes / 60);
minutes %= 60;
var result = "";
var estimatingStatus = false;

if (weeks > 0) {
return "~" + weeks + (weeks === 1 ? " week" : " weeks") + " left";
return {
text: "~" + weeks + (weeks === 1 ? " week" : " weeks") + " left",
estimating: false
};
}
if (days > 0) {
return "~" + days + (days === 1 ? " day" : " days") + " left";
return {
text: "~" + days + (days === 1 ? " day" : " days") + " left",
estimating: false
};
}
if (hours >= 5) {
return "~" + hours + (hours === 1 ? " hour" : " hours") + " left";
return {
text: "~" + hours + (hours === 1 ? " hour" : " hours") + " left",
estimating: false
};
}
if (hours > 0) {
return "~" + hours + "h " + minutes + "m" + " left";
return {
text: "~" + hours + "h " + minutes + "m" + " left",
estimating: false
};
}
if (minutes >= 5) {
return "~" + minutes + (minutes === 1 ? " minute" : " minutes") + " left";
return {
text: "~" + minutes + (minutes === 1 ? " minute" : " minutes") + " left",
estimating: false
};
}
if (minutes > 0) {
return "~" + minutes + "m " + seconds + "s" + " left";
return {
text: "~" + minutes + "m " + seconds + "s" + " left",
estimating: false
};
}
if (seconds > 0) {
return "~" + seconds + (seconds === 1 ? " second" : " seconds") + " left";
return {
text: "~" + seconds + (seconds === 1 ? " second" : " seconds") + " left",
estimating: false
};
} else {
return {
text: "Estimating",
estimating: true
};
}

return "Estimating";
}
}