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,26 +6,29 @@ struct SetupView: View {
@Binding var visible: Bool @Binding var visible: Bool
var body: some View { var body: some View {
VStack { GeometryReader { proxy in
StepView(numberOfSteps: 3, currentStep: stepIndex) VStack {
GeometryReader { proxy in StepView(numberOfSteps: 3, currentStep: stepIndex, width: 500)
HStack { GeometryReader { proxy in
SecretAgentSetupView(buttonAction: advance) 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) .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) .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()
} }
} }
@ -130,10 +145,10 @@ struct SecretAgentSetupView: View {
var body: some View { var body: some View {
SetupStepView(title: "Setup Secret Agent", SetupStepView(title: "Setup Secret Agent",
image: Image(nsImage: NSApp.applicationIconImage), 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.", 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", buttonTitle: "Install",
buttonAction: 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.")) (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) .multilineTextAlignment(.center)
} }
@ -164,10 +179,10 @@ struct SSHAgentSetupView: View {
var body: some View { var body: some View {
SetupStepView(title: "Configure your SSH Agent", SetupStepView(title: "Configure your SSH Agent",
image: Image(systemName: "terminal"), 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.", 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", buttonTitle: "Done",
buttonAction: buttonAction) { buttonAction: buttonAction) {
Picker(selection: $selectedShellInstruction, label: EmptyView()) { Picker(selection: $selectedShellInstruction, label: EmptyView()) {
ForEach(SetupView.Constants.socketPrompts) { instruction in ForEach(SetupView.Constants.socketPrompts) { instruction in
Text(instruction.shell) Text(instruction.shell)
@ -198,10 +213,10 @@ struct UpdaterExplainerView: View {
var body: some View { var body: some View {
SetupStepView(title: "Updates", SetupStepView(title: "Updates",
image: Image(systemName: "dot.radiowaves.left.and.right"), 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.", 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", buttonTitle: "Okay",
buttonAction: buttonAction) { buttonAction: buttonAction) {
Link("Read more about this here.", destination: SetupView.Constants.updaterFAQURL) Link("Read more about this here.", destination: SetupView.Constants.updaterFAQURL)
} }
} }