good spot with footer but some bugs and not complete yet
This commit is contained in:
@@ -52,7 +52,7 @@ struct FooterControlsView: View {
|
|||||||
// .animation(.default, value: self.isHolding)
|
// .animation(.default, value: self.isHolding)
|
||||||
})
|
})
|
||||||
.zIndex(10)
|
.zIndex(10)
|
||||||
|
|
||||||
Circle()
|
Circle()
|
||||||
.frame(width: 60, height: 60, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
|
.frame(width: 60, height: 60, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
|
||||||
.scaleEffect(self.scaleBigPulser,
|
.scaleEffect(self.scaleBigPulser,
|
||||||
|
|||||||
@@ -12,6 +12,11 @@ struct CircleFooterView: View {
|
|||||||
@EnvironmentObject var navigationStack: NavigationStack
|
@EnvironmentObject var navigationStack: NavigationStack
|
||||||
@EnvironmentObject var authSessionStore: AuthSessionStore
|
@EnvironmentObject var authSessionStore: AuthSessionStore
|
||||||
|
|
||||||
|
@Binding var selectedFriendIndex: Int?
|
||||||
|
|
||||||
|
@State private var convoRelativeTime = ""
|
||||||
|
@State private var selectedFriend: User?
|
||||||
|
@State private var myTurn: Bool?
|
||||||
|
|
||||||
var body: some View {
|
var body: some View {
|
||||||
// TODO: do cool animations with this footer background fill in while recording or playing a message
|
// TODO: do cool animations with this footer background fill in while recording or playing a message
|
||||||
@@ -20,54 +25,77 @@ struct CircleFooterView: View {
|
|||||||
Spacer()
|
Spacer()
|
||||||
|
|
||||||
HStack {
|
HStack {
|
||||||
Image("Artboards_Diversity_Avatars_by_Netguru-1")
|
if self.selectedFriend != nil && !self.convoRelativeTime.isEmpty && self.myTurn != nil {
|
||||||
.resizable()
|
Image(self.selectedFriend!.avatar ?? "")
|
||||||
.scaledToFit()
|
.resizable()
|
||||||
.background(NirvanaColor.teal.opacity(0.1))
|
.scaledToFit()
|
||||||
.frame(width: 40, height: 40)
|
.background(NirvanaColor.teal.opacity(0.1))
|
||||||
.clipShape(Circle())
|
.frame(width: 40, height: 40)
|
||||||
.padding(5)
|
.clipShape(Circle())
|
||||||
|
.padding(5)
|
||||||
|
|
||||||
|
VStack (alignment: .leading) {
|
||||||
VStack (alignment: .leading) {
|
Text(self.selectedFriend!.nickname ?? "")
|
||||||
Text("Sarth Shah")
|
.font(.footnote)
|
||||||
.font(.footnote)
|
.foregroundColor(NirvanaColor.light)
|
||||||
.foregroundColor(NirvanaColor.light)
|
Text(self.convoRelativeTime)
|
||||||
Text("sent 20 minutes ago")
|
.font(.caption)
|
||||||
.font(.caption)
|
.foregroundColor(.gray)
|
||||||
.foregroundColor(.gray)
|
}
|
||||||
|
|
||||||
|
if self.myTurn! {
|
||||||
|
Text("it's your turn")
|
||||||
|
} else {
|
||||||
|
Text("it's their turn")
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Spacer()
|
Spacer()
|
||||||
|
|
||||||
Label("Replay", systemImage: "repeat.1.circle.fill")
|
|
||||||
.font(.title2)
|
|
||||||
.labelStyle(.iconOnly)
|
|
||||||
.foregroundColor(Color.orange)
|
|
||||||
|
|
||||||
|
|
||||||
Spacer(minLength: 65)
|
|
||||||
}
|
}
|
||||||
.frame(maxWidth: .infinity, maxHeight: 60) // 60 is the height of the footer control big circle
|
.frame(maxWidth: .infinity, maxHeight: 60) // 60 is the height of the footer control big circle
|
||||||
.background(Color.white.opacity(0.5))
|
.background(Color.white.opacity(0.5))
|
||||||
.clipShape(RoundedRectangle(cornerRadius: 30, style: .continuous))
|
.clipShape(RoundedRectangle(cornerRadius: 30, style: .continuous))
|
||||||
.shadow(color: Color.black.opacity(0.25), radius: 30, x: 0, y: 20)
|
.shadow(color: Color.black.opacity(0.25), radius: 30, x: 0, y: 20)
|
||||||
}
|
}
|
||||||
|
|
||||||
FooterControlsView()
|
|
||||||
}
|
}
|
||||||
.padding()
|
.padding()
|
||||||
// .offset(
|
.animation(Animation.spring(), value: self.selectedFriendIndex)
|
||||||
// x:0,
|
.offset(
|
||||||
// y:self.selectedUserIndex == nil ? 150 : 0
|
x:0,
|
||||||
// )
|
y:self.selectedFriendIndex == nil ? 150 : 0
|
||||||
// .animation(Animation.spring(), value: self.selectedUserIndex)
|
)
|
||||||
|
.onChange(of: self.selectedFriendIndex) {newValue in
|
||||||
|
// update meta data based on which friend was selected
|
||||||
|
let myId = self.authSessionStore.user?.id
|
||||||
|
|
||||||
|
// set convo moment/relative time to show
|
||||||
|
if newValue != nil && myId != nil {
|
||||||
|
self.selectedFriend = self.authSessionStore.friendsArr[newValue!]
|
||||||
|
|
||||||
|
// get the last message's sent timestamp
|
||||||
|
let lastMessage = self.authSessionStore.friendMessagesDict[self.selectedFriend!.id!]?.last
|
||||||
|
if lastMessage != nil {
|
||||||
|
// ask for the full relative date
|
||||||
|
let formatter = RelativeDateTimeFormatter()
|
||||||
|
formatter.unitsStyle = .full
|
||||||
|
|
||||||
|
let relativeDate = formatter.localizedString(for: lastMessage?.sentTimestamp ?? Date(), relativeTo: Date())
|
||||||
|
|
||||||
|
print("Relative date is: \(relativeDate)")
|
||||||
|
|
||||||
|
// setting the state for ui to update
|
||||||
|
self.convoRelativeTime = relativeDate
|
||||||
|
|
||||||
|
// figure out whose turn it is
|
||||||
|
self.myTurn = lastMessage!.receiverId == myId! ? true : false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
struct CircleFooterView_Previews: PreviewProvider {
|
struct CircleFooterView_Previews: PreviewProvider {
|
||||||
static var previews: some View {
|
static var previews: some View {
|
||||||
CircleFooterView()
|
CircleFooterView(selectedFriendIndex: Binding.constant(nil)).environmentObject(AuthSessionStore())
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -25,7 +25,7 @@ struct CircleGridView: View {
|
|||||||
private static let spacingBetweenRows: CGFloat = 0
|
private static let spacingBetweenRows: CGFloat = 0
|
||||||
private static let totalColumns: Int = Int(log2(Double(Self.numberOfItems))) // scaling the circles and calculating column count
|
private static let totalColumns: Int = Int(log2(Double(Self.numberOfItems))) // scaling the circles and calculating column count
|
||||||
|
|
||||||
@State private var selectedFriendIndex: Int? = nil
|
@Binding var selectedFriendIndex: Int?
|
||||||
|
|
||||||
// TODO: change the size to adaptive or something to make outer ring items shrink their overall size and fit better
|
// TODO: change the size to adaptive or something to make outer ring items shrink their overall size and fit better
|
||||||
let gridItems: [GridItem] = Array(
|
let gridItems: [GridItem] = Array(
|
||||||
@@ -266,6 +266,6 @@ struct CircleGridView: View {
|
|||||||
|
|
||||||
struct CircleGridView_Previews: PreviewProvider {
|
struct CircleGridView_Previews: PreviewProvider {
|
||||||
static var previews: some View {
|
static var previews: some View {
|
||||||
CircleGridView().environmentObject(AuthSessionStore())
|
CircleGridView(selectedFriendIndex: Binding.constant(nil)).environmentObject(AuthSessionStore())
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -20,6 +20,8 @@ struct InnerCircleView: View {
|
|||||||
|
|
||||||
@State var sheetView: SheetView? = nil
|
@State var sheetView: SheetView? = nil
|
||||||
|
|
||||||
|
@State var selectedFriendIndex: Int? = nil
|
||||||
|
|
||||||
let universalSize = UIScreen.main.bounds
|
let universalSize = UIScreen.main.bounds
|
||||||
|
|
||||||
var body: some View {
|
var body: some View {
|
||||||
@@ -28,7 +30,7 @@ struct InnerCircleView: View {
|
|||||||
WavesGlassBackgroundView()
|
WavesGlassBackgroundView()
|
||||||
|
|
||||||
// content
|
// content
|
||||||
CircleGridView()
|
CircleGridView(selectedFriendIndex: self.$selectedFriendIndex)
|
||||||
|
|
||||||
// header
|
// header
|
||||||
VStack(alignment: .leading) {
|
VStack(alignment: .leading) {
|
||||||
@@ -38,7 +40,7 @@ struct InnerCircleView: View {
|
|||||||
Spacer()
|
Spacer()
|
||||||
}
|
}
|
||||||
|
|
||||||
CircleFooterView()
|
CircleFooterView(selectedFriendIndex: self.$selectedFriendIndex)
|
||||||
}
|
}
|
||||||
.sheet(item: self.$sheetView) {page in
|
.sheet(item: self.$sheetView) {page in
|
||||||
switch page {
|
switch page {
|
||||||
|
|||||||
Reference in New Issue
Block a user