Resolving layout issues

This commit is contained in:
Max Goedjen 2020-09-20 18:11:49 -07:00
parent d591dc9518
commit 01c9b05334
No known key found for this signature in database
GPG Key ID: E58C21DD77B9B8E8

View File

@ -7,11 +7,11 @@ struct SetupView: View {
@Binding var setupComplete: Bool @Binding var setupComplete: Bool
var body: some View { var body: some View {
GeometryReader { outerProxy in GeometryReader { proxy in
VStack { VStack {
StepView(numberOfSteps: 3, currentStep: stepIndex, width: 100) StepView(numberOfSteps: 3, currentStep: stepIndex, width: proxy.size.width)
GeometryReader { proxy in GeometryReader { _ in
HStack { HStack(spacing: 0) {
SecretAgentSetupView(buttonAction: advance) SecretAgentSetupView(buttonAction: advance)
.frame(width: proxy.size.width) .frame(width: proxy.size.width)
SSHAgentSetupView(buttonAction: advance) SSHAgentSetupView(buttonAction: advance)
@ -63,7 +63,7 @@ struct StepView: View {
.frame(height: 5) .frame(height: 5)
Rectangle() Rectangle()
.foregroundColor(.green) .foregroundColor(.green)
.frame(width: max(0, (width / CGFloat(numberOfSteps - 1)) * CGFloat(currentStep)), height: 5) .frame(width: max(0, ((width - (Constants.padding * 2)) / CGFloat(numberOfSteps - 1)) * CGFloat(currentStep) - (Constants.circleWidth / 2)), height: 5)
.animation(.spring()) .animation(.spring())
HStack { HStack {
ForEach(0..<numberOfSteps) { index in ForEach(0..<numberOfSteps) { index in
@ -71,18 +71,18 @@ struct StepView: View {
if currentStep > index { if currentStep > index {
Circle() Circle()
.foregroundColor(.green) .foregroundColor(.green)
.frame(width: 30, height: 30) .frame(width: Constants.circleWidth, height: Constants.circleWidth)
Text("") Text("")
.foregroundColor(.white) .foregroundColor(.white)
.bold() .bold()
} else { } else {
Circle() Circle()
.foregroundColor(.blue) .foregroundColor(.blue)
.frame(width: 30, height: 30) .frame(width: Constants.circleWidth, height: Constants.circleWidth)
if currentStep == index { if currentStep == index {
Circle() Circle()
.strokeBorder(Color.white, lineWidth: 3) .strokeBorder(Color.white, lineWidth: 3)
.frame(width: 30, height: 30) .frame(width: Constants.circleWidth, height: Constants.circleWidth)
} }
Text(String(describing: index + 1)) Text(String(describing: index + 1))
.foregroundColor(.white) .foregroundColor(.white)
@ -94,8 +94,18 @@ struct StepView: View {
} }
} }
} }
} }.padding(Constants.padding)
.padding() }
}
extension StepView {
enum Constants {
static let padding: CGFloat = 15
static let circleWidth: CGFloat = 30
} }
} }
@ -136,8 +146,7 @@ struct SetupStepView<Content> : View where Content : View {
Button(buttonTitle) { Button(buttonTitle) {
buttonAction() buttonAction()
} }
} }.padding()
.padding()
} }
} }