talksik/nirvana-ios
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

phase 2 refactor for reusable onboarding element

Browse Source
This commit is contained in:
talksik
2021-12-13 11:36:49 -08:00
parent 5f5a1122e8
commit 5c2f1608a4
2 changed files with 71 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nirvana-ios/Views/Templates/OnboardingTemplateView.swift
+45 -17
View File
@@ -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)
}
}
}
}
nirvana-ios/Views/WelcomeView/WelcomeView.swift
+26 -102
View File
@@ -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)
}
}