Progress on onboaring view.

This commit is contained in:
Max Goedjen 2020-09-20 00:47:57 -07:00
parent e2f519987f
commit 005bb70b6a
No known key found for this signature in database
GPG Key ID: E58C21DD77B9B8E8

View File

@ -6,8 +6,9 @@ struct SetupView: View {
@Binding var visible: Bool @Binding var visible: Bool
var body: some View { var body: some View {
GeometryReader { proxy in
VStack { VStack {
StepView(numberOfSteps: 3, currentStep: stepIndex) StepView(numberOfSteps: 3, currentStep: stepIndex, width: 500)
GeometryReader { proxy in GeometryReader { proxy in
HStack { HStack {
SecretAgentSetupView(buttonAction: advance) SecretAgentSetupView(buttonAction: advance)
@ -23,9 +24,11 @@ struct SetupView: View {
.animation(.spring()) .animation(.spring())
} }
} }
}
.frame(idealWidth: 500, idealHeight: 500) .frame(idealWidth: 500, idealHeight: 500)
} }
func advance() { func advance() {
stepIndex += 1 stepIndex += 1
} }
@ -47,11 +50,18 @@ struct StepView: View {
let numberOfSteps: Int let numberOfSteps: Int
let currentStep: Int let currentStep: Int
// Ideally we'd have a geometry reader inside this view doing this for us, but that crashes on 11.0b7
let width: CGFloat
var body: some View { var body: some View {
ZStack { ZStack(alignment: .leading) {
Rectangle() Rectangle()
.foregroundColor(.blue) .foregroundColor(.blue)
.frame(height: 5) .frame(height: 5)
Rectangle()
.foregroundColor(.green)
.frame(width: max(0, (width / CGFloat(numberOfSteps - 1)) * CGFloat(currentStep) - 15), height: 5)
.animation(.spring())
HStack { HStack {
ForEach(0..<numberOfSteps) { index in ForEach(0..<numberOfSteps) { index in
ZStack { ZStack {
@ -64,10 +74,15 @@ struct StepView: View {
.bold() .bold()
} else { } else {
Circle() Circle()
.foregroundColor(currentStep == index ? .white : .blue) .foregroundColor(.blue)
.frame(width: 30, height: 30) .frame(width: 30, height: 30)
if currentStep == index {
Circle()
.strokeBorder(Color.white, lineWidth: 3)
.frame(width: 30, height: 30)
}
Text(String(describing: index + 1)) Text(String(describing: index + 1))
.foregroundColor(currentStep == index ? .blue : .white) .foregroundColor(.white)
.bold() .bold()
} }
} }