moving the waves background out and starting phone verification ui

This commit is contained in:
talksik
2021-12-17 12:34:44 -08:00
parent e105bb0ead
commit 7b345a8e98
5 changed files with 146 additions and 91 deletions
+8
View File
@@ -33,6 +33,8 @@
89BCABE2276B3CB0009E9B10 /* NavigationStack in Frameworks */ = {isa = PBXBuildFile; productRef = 89BCABE1276B3CB0009E9B10 /* NavigationStack */; };
89BCABE5276B3D58009E9B10 /* InnerCircleView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 89BCABE4276B3D58009E9B10 /* InnerCircleView.swift */; };
89BCABE7276B3D64009E9B10 /* InnerCircleViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 89BCABE6276B3D64009E9B10 /* InnerCircleViewModel.swift */; };
89BCABEB276D2A09009E9B10 /* PhoneVerificationView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 89BCABEA276D2A07009E9B10 /* PhoneVerificationView.swift */; };
89BCABED276D2B05009E9B10 /* WavesGlassBackgroundView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 89BCABEC276D2B05009E9B10 /* WavesGlassBackgroundView.swift */; };
89BDCDE527695DB900577829 /* NirvanaImage.swift in Sources */ = {isa = PBXBuildFile; fileRef = 89BDCDE427695DB900577829 /* NirvanaImage.swift */; };
89BDCDE72769616600577829 /* UIImage+Extension.swift in Sources */ = {isa = PBXBuildFile; fileRef = 89BDCDE62769616600577829 /* UIImage+Extension.swift */; };
89BDCDEA27697F9C00577829 /* UserMenu.swift in Sources */ = {isa = PBXBuildFile; fileRef = 89BDCDE927697F9C00577829 /* UserMenu.swift */; };
@@ -71,6 +73,8 @@
89B46E70276893E200B74255 /* AuthSessionStore.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AuthSessionStore.swift; sourceTree = "<group>"; };
89BCABE4276B3D58009E9B10 /* InnerCircleView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = InnerCircleView.swift; sourceTree = "<group>"; };
89BCABE6276B3D64009E9B10 /* InnerCircleViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = InnerCircleViewModel.swift; sourceTree = "<group>"; };
89BCABEA276D2A07009E9B10 /* PhoneVerificationView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PhoneVerificationView.swift; sourceTree = "<group>"; };
89BCABEC276D2B05009E9B10 /* WavesGlassBackgroundView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = WavesGlassBackgroundView.swift; sourceTree = "<group>"; };
89BDCDE427695DB900577829 /* NirvanaImage.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NirvanaImage.swift; sourceTree = "<group>"; };
89BDCDE62769616600577829 /* UIImage+Extension.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "UIImage+Extension.swift"; sourceTree = "<group>"; };
89BDCDE927697F9C00577829 /* UserMenu.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = UserMenu.swift; sourceTree = "<group>"; };
@@ -160,6 +164,8 @@
891A16052765726800B26659 /* Templates */,
891A16042765725D00B26659 /* WelcomeView */,
891A1608276572BB00B26659 /* HomeView */,
89BCABEA276D2A07009E9B10 /* PhoneVerificationView.swift */,
89BCABEC276D2B05009E9B10 /* WavesGlassBackgroundView.swift */,
);
path = Views;
sourceTree = "<group>";
@@ -367,6 +373,7 @@
89F05B9F276A8D360002E9C7 /* Contact.swift in Sources */,
891A160327656FC700B26659 /* HomeView.swift in Sources */,
891A160B2765732700B26659 /* HomeViewModel.swift in Sources */,
89BCABEB276D2A09009E9B10 /* PhoneVerificationView.swift in Sources */,
892179E62765FECD001E6C60 /* FooterControlsViewModel.swift in Sources */,
891A15F5276557AB00B26659 /* colors.swift in Sources */,
89288ECB27675B9F00E962C4 /* OnboardingTemplateView.swift in Sources */,
@@ -379,6 +386,7 @@
891A16132765A44300B26659 /* ChatsCarouselViewModel.swift in Sources */,
89F05B9B276A87920002E9C7 /* ContactsViewModel.swift in Sources */,
891A15E127653A7000B26659 /* nirvana_iosApp.swift in Sources */,
89BCABED276D2B05009E9B10 /* WavesGlassBackgroundView.swift in Sources */,
89F05BA6276ACD830002E9C7 /* ContactsPickerView.swift in Sources */,
89BDCDEA27697F9C00577829 /* UserMenu.swift in Sources */,
89BCABE7276B3D64009E9B10 /* InnerCircleViewModel.swift in Sources */,
+6 -8
View File
@@ -12,14 +12,12 @@ struct ContentView: View {
var body: some View {
ZStack {
InnerCircleView()
// ContactsView() // TEMPORARY FOR TESTING
// switch self.authSessionStore.sessionState {
// case SessionState.isAuthenticated:
// HomeView()
// case SessionState.isLoggedOut:
// WelcomeView()
// }
switch self.authSessionStore.sessionState {
case SessionState.isAuthenticated:
HomeView()
case SessionState.isLoggedOut:
WelcomeView()
}
}.animation(.default, value:authSessionStore.sessionState)
}
}
@@ -9,10 +9,9 @@ import SwiftUI
struct InnerCircleView: View {
let universalSize = UIScreen.main.bounds
// y position of where waves should start
let baseLineY = UIScreen.main.bounds.height * 0.95
@State var animateWaves = false
// TESTING
// users who will have a thumping thing because they sent a message
@@ -21,62 +20,11 @@ struct InnerCircleView: View {
var body: some View {
ZStack {
// background
ZStack {
AngularGradient(
gradient: Gradient(
colors: [NirvanaColor.solidBlue, NirvanaColor.dimTeal, Color.orange, NirvanaColor.solidBlue]),
center: .center,
angle: .degrees(120))
LinearGradient(gradient: Gradient(
colors: [NirvanaColor.white.opacity(0), NirvanaColor.white.opacity(1.0)]), startPoint: .bottom, endPoint: .top)
getWave(peakPercentage: 0.4, troughPercentage: 0.65, peakAltercation: baseLineY + 100, troughAltercation: baseLineY - 90)
.foregroundColor(NirvanaColor.dimTeal.opacity(0.5))
.blur(radius:2)
.offset(x: self.animateWaves ? -1*universalSize.width : 0)
.animation(
Animation.linear(duration: 20).repeatForever(autoreverses: false),
value: self.animateWaves
)
getWave(peakPercentage: 0.2, troughPercentage: 0.75, peakAltercation: baseLineY - 50, troughAltercation: baseLineY + 100)
.foregroundColor(Color.orange.opacity(0.3))
.blur(radius:2)
.offset(x: self.animateWaves ? -1*universalSize.width : 0)
.animation(
Animation.linear(duration: 10).repeatForever(autoreverses: false),
value: self.animateWaves
)
getWave(peakPercentage: 0.25, troughPercentage: 0.75, peakAltercation: baseLineY + 70, troughAltercation: baseLineY - 100)
.foregroundColor(NirvanaColor.teal.opacity(0.3))
.blur(radius:2)
.offset(x: self.animateWaves ? -1*universalSize.width : 0)
.animation(
Animation.linear(duration: 12).repeatForever(autoreverses: false),
value: self.animateWaves
)
}
.ignoresSafeArea(.all)
WavesGlassBackgroundView()
// content
gridContent
// inner circle
// Rectangle()
// .foregroundColor(Color.white.opacity(0.5))
// .frame(width:universalSize.width*0.65, height: universalSize.height*0.3)
// // outer circle
// Rectangle()
// .foregroundColor(Color.white.opacity(0.5))
// .frame(width:universalSize.width*0.75, height: universalSize.height*0.15)
//way out circle
// Ellipse()
// .foregroundColor(Color.white)
// .frame(width:universalSize.width*0.65, height: universalSize.height*0.3)
// header
VStack(alignment: .leading) {
header
@@ -105,9 +53,7 @@ struct InnerCircleView: View {
footerNavigation
}
.onAppear() {
self.animateWaves = true
.onAppear() {
// TESTING
// fake like these users sent a message to view
DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
@@ -420,31 +366,6 @@ struct InnerCircleView: View {
.shadow(color: Color.black.opacity(0.25), radius: 30, x: 0, y: 20)
.padding(.horizontal)
}
private func getWave(peakPercentage: Double, troughPercentage: Double, peakAltercation: CGFloat, troughAltercation: CGFloat) -> Path {
Path {path in
path.move(
to: CGPoint(
x: 0,
y: baseLineY
)
)
path.addCurve(
to: CGPoint(x: universalSize.width, y: baseLineY),
control1: CGPoint(x: universalSize.width * peakPercentage, y: peakAltercation),
control2: CGPoint(x: universalSize.width * troughPercentage, y: troughAltercation))
path.addCurve(
to: CGPoint(x: 2*universalSize.width, y: baseLineY),
control1: CGPoint(x: universalSize.width * (1 + peakPercentage), y: peakAltercation),
control2: CGPoint(x: universalSize.width * (1 + troughPercentage), y: troughAltercation))
path.addLine(to: CGPoint(x: 2*universalSize.width, y: universalSize.height))
path.addLine(to: CGPoint(x: 0, y: universalSize.height))
}
}
}
struct InnerCircleView_Previews: PreviewProvider {
@@ -0,0 +1,35 @@
//
// PhoneVerificationView.swift
// nirvana-ios
//
// Created by Arjun Patel on 12/17/21.
//
import SwiftUI
// user can type in a phone number and then receive a text
struct PhoneVerificationView: View {
var body: some View {
Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/)
}
}
struct PhoneVerificationView_Previews: PreviewProvider {
static var previews: some View {
PhoneVerificationView()
}
}
// another view for user to type in the sms code
struct PhoneVerificationCodeView: View {
var body: some View {
Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/)
}
}
struct PhoneVerificationCodeView_Previews: PreviewProvider {
static var previews: some View {
PhoneVerificationCodeView()
}
}
@@ -0,0 +1,93 @@
//
// WavesGlassBackgroundView.swift
// nirvana-ios
//
// Created by Arjun Patel on 12/17/21.
//
import SwiftUI
struct WavesGlassBackgroundView: View {
let universalSize = UIScreen.main.bounds
// y position of where waves should start
let baseLineY = UIScreen.main.bounds.height * 0.95
@State var animateWaves = false
var body: some View {
ZStack {
AngularGradient(
gradient: Gradient(
colors: [NirvanaColor.solidBlue, NirvanaColor.dimTeal, Color.orange, NirvanaColor.solidBlue]),
center: .center,
angle: .degrees(120))
LinearGradient(gradient: Gradient(
colors: [NirvanaColor.white.opacity(0), NirvanaColor.white.opacity(1.0)]), startPoint: .bottom, endPoint: .top)
getWave(peakPercentage: 0.4, troughPercentage: 0.65, peakAltercation: baseLineY + 100, troughAltercation: baseLineY - 90)
.foregroundColor(NirvanaColor.dimTeal.opacity(0.5))
.blur(radius:2)
.offset(x: self.animateWaves ? -1*universalSize.width : 0)
.animation(
Animation.linear(duration: 20).repeatForever(autoreverses: false),
value: self.animateWaves
)
getWave(peakPercentage: 0.2, troughPercentage: 0.75, peakAltercation: baseLineY - 50, troughAltercation: baseLineY + 100)
.foregroundColor(Color.orange.opacity(0.3))
.blur(radius:2)
.offset(x: self.animateWaves ? -1*universalSize.width : 0)
.animation(
Animation.linear(duration: 10).repeatForever(autoreverses: false),
value: self.animateWaves
)
getWave(peakPercentage: 0.25, troughPercentage: 0.75, peakAltercation: baseLineY + 70, troughAltercation: baseLineY - 100)
.foregroundColor(NirvanaColor.teal.opacity(0.3))
.blur(radius:2)
.offset(x: self.animateWaves ? -1*universalSize.width : 0)
.animation(
Animation.linear(duration: 12).repeatForever(autoreverses: false),
value: self.animateWaves
)
}
.ignoresSafeArea(.all)
.onAppear() {
// start repeat animation for waves
self.animateWaves = true
}
}
private func getWave(peakPercentage: Double, troughPercentage: Double, peakAltercation: CGFloat, troughAltercation: CGFloat) -> Path {
Path {path in
path.move(
to: CGPoint(
x: 0,
y: baseLineY
)
)
path.addCurve(
to: CGPoint(x: universalSize.width, y: baseLineY),
control1: CGPoint(x: universalSize.width * peakPercentage, y: peakAltercation),
control2: CGPoint(x: universalSize.width * troughPercentage, y: troughAltercation))
path.addCurve(
to: CGPoint(x: 2*universalSize.width, y: baseLineY),
control1: CGPoint(x: universalSize.width * (1 + peakPercentage), y: peakAltercation),
control2: CGPoint(x: universalSize.width * (1 + troughPercentage), y: troughAltercation))
path.addLine(to: CGPoint(x: 2*universalSize.width, y: universalSize.height))
path.addLine(to: CGPoint(x: 0, y: universalSize.height))
}
}
}
struct WavesGlassBackgroundView_Previews: PreviewProvider {
static var previews: some View {
WavesGlassBackgroundView()
}
}