From 5c2f1608a4c1946cbb38e91b79a1d7a99a7b48b7 Mon Sep 17 00:00:00 2001 From: talksik Date: Mon, 13 Dec 2021 11:36:49 -0800 Subject: [PATCH] phase 2 refactor for reusable onboarding element --- .../Templates/OnboardingTemplateView.swift | 62 ++++++--- .../Views/WelcomeView/WelcomeView.swift | 128 ++++-------------- 2 files changed, 71 insertions(+), 119 deletions(-) diff --git a/nirvana-ios/Views/Templates/OnboardingTemplateView.swift b/nirvana-ios/Views/Templates/OnboardingTemplateView.swift index 5e618ad..2e1ac10 100644 --- a/nirvana-ios/Views/Templates/OnboardingTemplateView.swift +++ b/nirvana-ios/Views/Templates/OnboardingTemplateView.swift @@ -11,14 +11,14 @@ struct OnboardingTemplateView: View { let screenWidth = UIScreen.main.bounds.width let screenHeight = UIScreen.main.bounds.height - private let headerText: String? - private let imageName:String? + private var headerText: String? + private var imageName:String? - private let mainLeadingActionText:String? - private let mainHighlightedActionText:String? - private let mainTrailingActionText:String? + private var mainLeadingActionText:String? + private var mainHighlightedActionText:String? + private var mainTrailingActionText:String? - private let subActionText:String? + private var subActionText:String? private var bottomActionArea:AnyView? @@ -40,31 +40,59 @@ struct OnboardingTemplateView: View { var body: some View { VStack(spacing: 0) { - // nav bar HeaderView() VStack { - // imported image name + self.onboardingImageView + self.onboardingActionTextView - if (self.mainLeadingActionText != nil) { //only show section if leading text there assuming everything is won't be there - - } - - // passed in action area from template user self.bottomActionArea - } .padding() .frame(maxWidth: screenWidth - 20) Spacer() - } // Vstack + } //outermost vstack .accentColor(NirvanaColor.teal) .background(NirvanaColor.bgLightGrey) .navigationBarTitleDisplayMode(.inline) - // .background(RadialGradient(gradient: Gradient(colors: [NirvanaColor.teal.opacity(0.1), NirvanaColor.bgLightGrey, NirvanaColor.bgLightGrey]), center: .center, startRadius: 0, endRadius: 200) - // ) + } + + private var onboardingImageView: some View { + Image(self.imageName ?? "") + .renderingMode(.original) + .resizable() + .aspectRatio(contentMode: .fit) + } + + private var onboardingActionTextView: some View { + ZStack { + if (self.mainLeadingActionText == nil || self.mainHighlightedActionText == nil || self.mainTrailingActionText == nil || self.subActionText == nil) { + EmptyView() + } else { + VStack(alignment: .leading) { + + Text(self.mainLeadingActionText!) + .font(.title) + .foregroundColor(NirvanaColor.black) + + Text(self.mainHighlightedActionText!) + .font(.title) + .foregroundColor(NirvanaColor.teal) + + Text(self.mainTrailingActionText!) + .font(.title) + .foregroundColor(NirvanaColor.black) + + Text(self.subActionText!) + .foregroundColor(Color.gray) + .padding(.top, 5) + .fixedSize(horizontal: false, vertical: true) + + Spacer() + } + .frame(maxWidth: screenWidth - 20) + } + } } } diff --git a/nirvana-ios/Views/WelcomeView/WelcomeView.swift b/nirvana-ios/Views/WelcomeView/WelcomeView.swift index 7666086..63db896 100644 --- a/nirvana-ios/Views/WelcomeView/WelcomeView.swift +++ b/nirvana-ios/Views/WelcomeView/WelcomeView.swift @@ -12,24 +12,33 @@ struct WelcomeView: View { let screenHeight = UIScreen.main.bounds.height var body: some View { - VStack(spacing: 0) { - HeaderView() - - VStack { - OnboardingImageView("undraw_friendship_mni7") - - OnboardingActionTextView(leadingText: "Your ", highlightedText: "minimalist ", trailingText: "social media", subActText: "tired of the rat race on insta, snap, tik-tok, \"meta\"?") - - OnboardingActionAreaView() - } - .padding() - .frame(maxWidth: screenWidth - 20) + OnboardingTemplateView(imgName: "undraw_friendship_mni7", mainLeadingActText: "Your", mainHighlightedActText: "minimalist", mainTrailingActText: "social media.", subActText: "Tired of the rat race?", bottomActArea: AnyView( + VStack(alignment: .center) { + NavigationLink(destination: HomeView()) { + Text("Start Your Detox") + .bold() + .foregroundColor(NirvanaColor.white) + .frame(maxWidth: .infinity) + .padding(.vertical, 20) + .background(NirvanaColor.teal) + .clipShape(Capsule()) + .shadow(radius:10) + } + + Button( + action: { + print("link to website learn more clicked") + }, + label: { + Text("Learn More") + .bold() + }) - Spacer() - } //outermost vstack - .accentColor(NirvanaColor.teal) - .background(NirvanaColor.bgLightGrey) - .navigationBarTitleDisplayMode(.inline) + //learn more button to usenirvana.com + } + .padding(.top, 20) + ) + ) } // View body } // View @@ -41,89 +50,4 @@ struct WelcomeView_Previews: PreviewProvider { } -struct OnboardingActionTextView: View { - let screenWidth = UIScreen.main.bounds.width - let screenHeight = UIScreen.main.bounds.height - - private var mainLeadingActionText:String - private var mainHighlightedActionText:String - private var mainTrailingActionText:String - - private var subActionText:String - - init(leadingText:String, highlightedText: String, trailingText: String, subActText: String) { - self.mainLeadingActionText = leadingText - self.mainHighlightedActionText = highlightedText - self.mainTrailingActionText = trailingText - - self.subActionText = subActText - } - - var body : some View { - VStack(alignment: .leading) { - - Text(self.mainLeadingActionText) - .font(.title) - .foregroundColor(NirvanaColor.black) - + Text(self.mainHighlightedActionText) - .font(.title) - .foregroundColor(NirvanaColor.teal) - + Text(self.mainTrailingActionText) - .font(.title) - .foregroundColor(NirvanaColor.black) - - Text(self.subActionText) - .foregroundColor(Color.gray) - .padding(.top, 5) - .fixedSize(horizontal: false, vertical: true) - - Spacer() - } - .frame(maxWidth: screenWidth - 20) - } -} -struct OnboardingActionAreaView: View { - var body : some View { - VStack(alignment: .center) { - NavigationLink(destination: HomeView()) { - Text("Start Your Detox") - .bold() - .foregroundColor(NirvanaColor.white) - .frame(maxWidth: .infinity) - .padding(.vertical, 20) - .background(NirvanaColor.teal) - .clipShape(Capsule()) - .shadow(radius:10) - } - - - Button( - action: { - print("link to website learn more clicked") - }, - label: { - Text("Learn More") - .bold() - }) - - //learn more button to usenirvana.com - } - .padding(.top, 20) - } -} - -struct OnboardingImageView: View { - private var imageName:String - - init(_ imgName: String) { - self.imageName = imgName - } - - var body : some View { - Image(self.imageName) - .renderingMode(.original) - .resizable() - .aspectRatio(contentMode: .fit) - } -}