From 005bb70b6a788d860bca74fcff53cc1db0b1ab87 Mon Sep 17 00:00:00 2001
From: Max Goedjen <max.goedjen@gmail.com>
Date: Sun, 20 Sep 2020 00:47:57 -0700
Subject: [PATCH] Progress on onboaring view.

---
 Secretive/Views/SetupView.swift | 69 ++++++++++++++++++++-------------
 1 file changed, 42 insertions(+), 27 deletions(-)

diff --git a/Secretive/Views/SetupView.swift b/Secretive/Views/SetupView.swift
index 7162380..26d2a99 100644
--- a/Secretive/Views/SetupView.swift
+++ b/Secretive/Views/SetupView.swift
@@ -6,26 +6,29 @@ struct SetupView: View {
     @Binding var visible: Bool
 
     var body: some View {
-        VStack {
-            StepView(numberOfSteps: 3, currentStep: stepIndex)
-            GeometryReader { proxy in
-                HStack {
-                    SecretAgentSetupView(buttonAction: advance)
+        GeometryReader { proxy in
+            VStack {
+                StepView(numberOfSteps: 3, currentStep: stepIndex, width: 500)
+                GeometryReader { proxy in
+                    HStack {
+                        SecretAgentSetupView(buttonAction: advance)
+                            .frame(width: proxy.size.width)
+                        SSHAgentSetupView(buttonAction: advance)
+                            .frame(width: proxy.size.width)
+                        UpdaterExplainerView {
+                            visible = false
+                        }
                         .frame(width: proxy.size.width)
-                    SSHAgentSetupView(buttonAction: advance)
-                        .frame(width: proxy.size.width)
-                    UpdaterExplainerView {
-                        visible = false
                     }
-                        .frame(width: proxy.size.width)
+                    .offset(x: -proxy.size.width * CGFloat(stepIndex), y: 0)
+                    .animation(.spring())
                 }
-                .offset(x: -proxy.size.width * CGFloat(stepIndex), y: 0)
-                .animation(.spring())
             }
         }
         .frame(idealWidth: 500, idealHeight: 500)
     }
 
+
     func advance() {
         stepIndex += 1
     }
@@ -47,11 +50,18 @@ struct StepView: View {
     let numberOfSteps: 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 {
-        ZStack {
+        ZStack(alignment: .leading) {
             Rectangle()
                 .foregroundColor(.blue)
                 .frame(height: 5)
+            Rectangle()
+                .foregroundColor(.green)
+                .frame(width: max(0, (width / CGFloat(numberOfSteps - 1)) * CGFloat(currentStep) - 15), height: 5)
+                .animation(.spring())
             HStack {
                 ForEach(0..<numberOfSteps) { index in
                     ZStack {
@@ -64,10 +74,15 @@ struct StepView: View {
                                 .bold()
                         } else {
                             Circle()
-                                .foregroundColor(currentStep == index ? .white : .blue)
+                                .foregroundColor(.blue)
                                 .frame(width: 30, height: 30)
+                            if currentStep == index {
+                                Circle()
+                                    .strokeBorder(Color.white, lineWidth: 3)
+                                    .frame(width: 30, height: 30)
+                            }
                             Text(String(describing: index + 1))
-                                .foregroundColor(currentStep == index ? .blue : .white)
+                                .foregroundColor(.white)
                                 .bold()
                         }
                     }
@@ -130,10 +145,10 @@ struct SecretAgentSetupView: View {
 
     var body: some View {
         SetupStepView(title: "Setup Secret Agent",
-                     image: Image(nsImage: NSApp.applicationIconImage),
-                     bodyText: "Secretive needs to set up a helper app to work properly. It will sign requests from SSH clients in the background, so you don't need to keep the main Secretive app open.",
-                     buttonTitle: "Install",
-                     buttonAction: install) {
+                      image: Image(nsImage: NSApp.applicationIconImage),
+                      bodyText: "Secretive needs to set up a helper app to work properly. It will sign requests from SSH clients in the background, so you don't need to keep the main Secretive app open.",
+                      buttonTitle: "Install",
+                      buttonAction: install) {
             (Text("This helper app is called ") + Text("Secret Agent").bold().underline() + Text(" and you may see it in Activity Manager from time to time."))
                 .multilineTextAlignment(.center)
         }
@@ -164,10 +179,10 @@ struct SSHAgentSetupView: View {
 
     var body: some View {
         SetupStepView(title: "Configure your SSH Agent",
-                     image: Image(systemName: "terminal"),
-                     bodyText: "Add this line to your shell config telling SSH to talk to Secret Agent when it wants to authenticate. Drag this into your config file.",
-                     buttonTitle: "Done",
-                    buttonAction: buttonAction) {
+                      image: Image(systemName: "terminal"),
+                      bodyText: "Add this line to your shell config telling SSH to talk to Secret Agent when it wants to authenticate. Drag this into your config file.",
+                      buttonTitle: "Done",
+                      buttonAction: buttonAction) {
             Picker(selection: $selectedShellInstruction, label: EmptyView()) {
                 ForEach(SetupView.Constants.socketPrompts) { instruction in
                     Text(instruction.shell)
@@ -198,10 +213,10 @@ struct UpdaterExplainerView: View {
 
     var body: some View {
         SetupStepView(title: "Updates",
-                     image: Image(systemName: "dot.radiowaves.left.and.right"),
-                     bodyText: "Secretive will periodically check with GitHub to see if there's a new release. If you see any network requests to GitHub, that's why.",
-                     buttonTitle: "Okay",
-                     buttonAction: buttonAction) {
+                      image: Image(systemName: "dot.radiowaves.left.and.right"),
+                      bodyText: "Secretive will periodically check with GitHub to see if there's a new release. If you see any network requests to GitHub, that's why.",
+                      buttonTitle: "Okay",
+                      buttonAction: buttonAction) {
             Link("Read more about this here.", destination: SetupView.Constants.updaterFAQURL)
         }
     }