added a nav bar but I don't like it...takes away from the flow

This commit is contained in:
talksik
2021-12-17 00:15:20 -08:00
parent 36202e972e
commit 3895e52fdb
2 changed files with 79 additions and 52 deletions
@@ -37,61 +37,53 @@ struct FooterControlsView: View {
}
var body: some View {
HStack(alignment: .center) {
Spacer()
ZStack {
Button(action: {
}, label: {
Image(systemName: self.isHolding ? "waveform" : "mic.fill")
.foregroundColor(.white)
.padding()
.background(NirvanaColor.teal)
.clipShape(Circle())
.shadow(radius: 10)
.scaleEffect(self.isHolding ? 1.2: 1,
anchor: .center)
.simultaneousGesture(dragGesture)
// .animation(.default, value: self.isHolding)
})
.zIndex(10)
Circle()
.frame(width: 60, height: 60, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
.scaleEffect(self.scaleBigPulser,
ZStack {
Button(action: {
}, label: {
Image(systemName: self.isHolding ? "waveform" : "mic.fill")
.foregroundColor(.white)
.padding()
.background(NirvanaColor.teal)
.clipShape(Circle())
.shadow(radius: 10)
.scaleEffect(self.isHolding ? 1.2: 1,
anchor: .center)
.foregroundColor(NirvanaColor.teal)
.opacity(0.3)
.onAppear {
let baseAnimation = Animation.easeOut(duration: 1)
let repeated = baseAnimation.repeatForever(autoreverses: true)
.simultaneousGesture(dragGesture)
// .animation(.default, value: self.isHolding)
})
.zIndex(10)
withAnimation(repeated) {
self.scaleBigPulser = 1.12
}
Circle()
.frame(width: 60, height: 60, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
.scaleEffect(self.scaleBigPulser,
anchor: .center)
.foregroundColor(NirvanaColor.teal)
.opacity(0.3)
.onAppear {
let baseAnimation = Animation.easeOut(duration: 1)
let repeated = baseAnimation.repeatForever(autoreverses: true)
withAnimation(repeated) {
self.scaleBigPulser = 1.12
}
Circle()
.frame(width: 50, height: 50, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
.scaleEffect(self.isHolding ? 1.5: 1,
anchor: .center)
.foregroundColor(NirvanaColor.teal)
.opacity(0.5)
.animation(Animation.easeInOut(duration:1).repeat(while: self.isHolding, autoreverses: true))
Circle()
.frame(width: 30, height: 30, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
.scaleEffect(self.isHolding ? 1.1: 1,
anchor: .center)
.foregroundColor(NirvanaColor.teal)
.opacity(0.9)
.animation(Animation.easeInOut(duration: 1).repeat(while: self.isHolding, autoreverses: true))
}
}
Circle()
.frame(width: 50, height: 50, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
.scaleEffect(self.isHolding ? 1.5: 1,
anchor: .center)
.foregroundColor(NirvanaColor.teal)
.opacity(0.5)
.animation(Animation.easeInOut(duration:1).repeat(while: self.isHolding, autoreverses: true))
Circle()
.frame(width: 30, height: 30, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
.scaleEffect(self.isHolding ? 1.1: 1,
anchor: .center)
.foregroundColor(NirvanaColor.teal)
.opacity(0.9)
.animation(Animation.easeInOut(duration: 1).repeat(while: self.isHolding, autoreverses: true))
}
.padding()
}
}
@@ -99,7 +99,7 @@ struct InnerCircleView: View {
//TODO: find a better solution than hacking it like this
Color.clear
FooterControlsView()
footer
}
}
@@ -108,6 +108,41 @@ struct InnerCircleView: View {
}
}
var footer : some View {
ZStack {
HStack {
Image(systemName: "house.fill")
.frame(maxWidth: .infinity)
.frame(width: 40, height: 40)
.foregroundColor(NirvanaColor.white)
.padding(5)
.background(NirvanaColor.teal.opacity(0.1))
.clipShape(Circle())
Spacer()
Image(systemName: "rectangle.3.group.fill")
.frame(maxWidth: .infinity)
.frame(width: 40, height: 40)
.foregroundColor(NirvanaColor.teal)
Spacer()
Image(systemName: "suitcase.fill")
.frame(maxWidth: .infinity)
.frame(width: 40, height: 40)
.foregroundColor(NirvanaColor.teal)
}
.frame(maxWidth: .infinity, maxHeight: 50)
.background(Color.white.opacity(0.5))
.clipShape(RoundedRectangle(cornerRadius: 30, style: .continuous))
.shadow(color: Color.black.opacity(0.25), radius: 30, x: 0, y: 20)
.padding()
FooterControlsView()
.offset(x: 0, y: -25)
}
}
// magic variables for grid
// TODO: change the number of columns based on the number of items
private static var numberOfItems: Int = 20