minor improvements in layout

This commit is contained in:
talksik
2021-12-12 01:47:38 -08:00
parent 70783ae74c
commit be3e744b49
2 changed files with 17 additions and 11 deletions
@@ -32,7 +32,7 @@ struct ChatsCarouselView: View {
TabView(selection: $selectedUserId) { TabView(selection: $selectedUserId) {
ForEach(viewModel.carouselUsers) { carouselUser in ForEach(viewModel.carouselUsers) { carouselUser in
GeometryReader {proxy in GeometryReader {proxy in
let minX = proxy.frame(in: .global).minX let minX = proxy.frame(in: .local).minX
let scale = getScale(proxy: proxy) let scale = getScale(proxy: proxy)
Image(carouselUser.profilePictureUrl) Image(carouselUser.profilePictureUrl)
@@ -44,14 +44,14 @@ struct ChatsCarouselView: View {
.rotation3DEffect(.degrees(minX / -10), axis: (x: 0, y: 1, z: 0)) .rotation3DEffect(.degrees(minX / -10), axis: (x: 0, y: 1, z: 0))
.blur(radius: abs(minX) / 40) .blur(radius: abs(minX) / 40)
.scaleEffect() .scaleEffect()
.padding(50) .padding(40)
} }
.frame(width: UIScreen.main.bounds.width)
.tag(carouselUser.id) .tag(carouselUser.id)
} }
} }
.frame(maxWidth: UIScreen.main.bounds.width * 0.8)
.tabViewStyle(.page(indexDisplayMode: .never)) .tabViewStyle(.page(indexDisplayMode: .never))
.padding(.top, 50)
.onAppear { .onAppear {
self.selectedUserId = self.viewModel.carouselUsers.first?.id ?? "" self.selectedUserId = self.viewModel.carouselUsers.first?.id ?? ""
} }
@@ -59,7 +59,7 @@ struct ChatsCarouselView: View {
// Bottom navigation carousel // Bottom navigation carousel
ScrollViewReader {proxy in ScrollViewReader {proxy in
ScrollView(.horizontal, showsIndicators: false) { ScrollView(.horizontal, showsIndicators: false) {
HStack { HStack(spacing: 20) {
ForEach(viewModel.carouselUsers) {user in ForEach(viewModel.carouselUsers) {user in
let isSelected = user.id == self.selectedUserId let isSelected = user.id == self.selectedUserId
// let isLeftOrRight = !isSelected && // let isLeftOrRight = !isSelected &&
@@ -67,23 +67,28 @@ struct ChatsCarouselView: View {
Image(user.profilePictureUrl) Image(user.profilePictureUrl)
.resizable() .resizable()
.aspectRatio(contentMode: .fill) .aspectRatio(contentMode: .fill)
.cornerRadius(12)
.clipShape(Circle()) .clipShape(Circle())
.shadow(radius: 10) .shadow(radius: 10)
.scaleEffect(isSelected ? 1 : 0.7) .scaleEffect(isSelected ? 1 : 0.7)
.blur(radius: isSelected ? 0 : 0.9) .blur(radius: isSelected ? 0 : 0.9)
.padding(25) // .padding(25)
.id(user.id) .id(user.id)
.overlay(
RoundedRectangle(cornerRadius: 100)
.strokeBorder(NirvanaColors.teal, lineWidth: 2)
.opacity(isSelected ? 1 : 0)
)
.onTapGesture { .onTapGesture {
withAnimation { withAnimation {
self.selectedUserId = user.id self.selectedUserId = user.id
} }
} }
.frame(minWidth: 100) .frame(maxHeight: 75)
} }
} }
.frame(maxWidth: .infinity, maxHeight: 50) .frame(maxWidth: .infinity, maxHeight: .infinity)
.padding(.vertical, 40) .padding(.vertical, 40)
.padding(.horizontal, 40)
} }
.onChange(of: self.selectedUserId) { _ in .onChange(of: self.selectedUserId) { _ in
@@ -92,8 +97,6 @@ struct ChatsCarouselView: View {
} }
} }
} }
Spacer()
} }
} }
@@ -14,6 +14,9 @@ struct HomeView: View {
ChatsCarouselView() ChatsCarouselView()
Text("This is the region for the bottom actions")
.padding(.vertical, 10)
Spacer() Spacer()
} }
.frame(maxWidth:.infinity, maxHeight: .infinity) .frame(maxWidth:.infinity, maxHeight: .infinity)