add carousel view to message details screen

pull/874/head
Ryan Zhao 2 years ago
parent 6568ab0d19
commit b4d414bbfe

@ -16,45 +16,179 @@ struct MessageInfoView: View {
Color.black Color.black
} }
VStack( ScrollView(.vertical, showsIndicators: false) {
alignment: .leading, VStack(
spacing: 10 alignment: .leading,
) { spacing: 10
// Message bubble snapshot ) {
if let body: String = messageViewModel.body { // Message bubble snapshot
ZStack { if let body: String = messageViewModel.body {
RoundedRectangle(cornerRadius: 18) ZStack {
.fill(Color(red: 49.0/255, green: 241.0/255, blue: 150.0/255)) RoundedRectangle(cornerRadius: 18)
.fill(Color(red: 49.0/255, green: 241.0/255, blue: 150.0/255))
Text(body) Text(body)
.padding(
EdgeInsets(
top: 8,
leading: 16,
bottom: 8,
trailing: 16
)
)
}
.frame(
maxWidth: .infinity,
maxHeight: .infinity,
alignment: .topLeading
)
.fixedSize(horizontal: true, vertical: true)
.padding(
EdgeInsets(
top: 8,
leading: 30,
bottom: 4,
trailing: 30
)
)
}
// TODO: Attachment carousel view
SessionCarouselView_SwiftUI(colors: [.orange, .gray, .blue, .yellow])
.frame(
maxWidth: .infinity,
maxHeight: .infinity,
alignment: .topLeading
)
.padding(
EdgeInsets(
top: 4,
leading: 0,
bottom: 4,
trailing: 0
)
)
// Attachment Info
if (messageViewModel.attachments?.isEmpty != false) {
ZStack {
RoundedRectangle(cornerRadius: 17)
.fill(Color(red: 27.0/255, green: 27.0/255, blue: 27.0/255))
VStack(
alignment: .leading,
spacing: 16
) {
VStack(
alignment: .leading,
spacing: 4
) {
Text("ATTACHMENT_INFO_FILE_ID".localized() + ":")
.bold()
.font(.system(size: 18))
.foregroundColor(.white)
Text("12378965485235985214")
.font(.system(size: 16))
.foregroundColor(.white)
}
HStack(
alignment: .center,
spacing: 48
) {
VStack(
alignment: .leading,
spacing: 4
) {
Text("ATTACHMENT_INFO_FILE_TYPE".localized() + ":")
.bold()
.font(.system(size: 18))
.foregroundColor(.white)
Text(".PNG")
.font(.system(size: 16))
.foregroundColor(.white)
}
Spacer()
VStack(
alignment: .leading,
spacing: 4
) {
Text("ATTACHMENT_INFO_FILE_SIZE".localized() + ":")
.bold()
.font(.system(size: 18))
.foregroundColor(.white)
Text("6mb")
.font(.system(size: 16))
.foregroundColor(.white)
}
Spacer()
}
HStack(
alignment: .center,
spacing: 48
) {
VStack(
alignment: .leading,
spacing: 4
) {
Text("ATTACHMENT_INFO_RESOLUTION".localized() + ":")
.bold()
.font(.system(size: 18))
.foregroundColor(.white)
Text("550×550")
.font(.system(size: 16))
.foregroundColor(.white)
}
Spacer()
VStack(
alignment: .leading,
spacing: 4
) {
Text("ATTACHMENT_INFO_DURATION".localized() + ":")
.bold()
.font(.system(size: 18))
.foregroundColor(.white)
Text("N/A")
.font(.system(size: 16))
.foregroundColor(.white)
}
Spacer()
}
}
.frame(
maxWidth: .infinity,
maxHeight: .infinity,
alignment: .topLeading
)
.padding( .padding(
EdgeInsets( EdgeInsets(
top: 8, top: 16,
leading: 16, leading: 16,
bottom: 8, bottom: 16,
trailing: 16 trailing: 16
) )
) )
} }
.frame( .frame(maxHeight: .infinity)
maxWidth: .infinity, .fixedSize(horizontal: false, vertical: true)
maxHeight: .infinity, .padding(
alignment: .topLeading EdgeInsets(
) top: 4,
.fixedSize(horizontal: true, vertical: true) leading: 30,
.padding( bottom: 4,
EdgeInsets( trailing: 30
top: 10, )
leading: 30,
bottom: 10,
trailing: 30
) )
) }
}
// TODO: Attachment carousel view
// Attachment Info // Message Info
if (messageViewModel.attachments?.isEmpty != false) {
ZStack { ZStack {
RoundedRectangle(cornerRadius: 17) RoundedRectangle(cornerRadius: 17)
.fill(Color(red: 27.0/255, green: 27.0/255, blue: 27.0/255)) .fill(Color(red: 27.0/255, green: 27.0/255, blue: 27.0/255))
@ -67,83 +201,62 @@ struct MessageInfoView: View {
alignment: .leading, alignment: .leading,
spacing: 4 spacing: 4
) { ) {
Text("ATTACHMENT_INFO_FILE_ID".localized() + ":") Text("Sent:")
.bold() .bold()
.font(.system(size: 18)) .font(.system(size: 18))
.foregroundColor(.white) .foregroundColor(.white)
Text("12378965485235985214") Text(messageViewModel.dateForUI.fromattedForMessageInfo)
.font(.system(size: 16)) .font(.system(size: 16))
.foregroundColor(.white) .foregroundColor(.white)
} }
HStack( VStack(
alignment: .center, alignment: .leading,
spacing: 48 spacing: 4
) { ) {
VStack( Text("Received:")
alignment: .leading, .bold()
spacing: 4 .font(.system(size: 18))
) { .foregroundColor(.white)
Text("ATTACHMENT_INFO_FILE_TYPE".localized() + ":") Text(messageViewModel.receivedDateForUI.fromattedForMessageInfo)
.bold() .font(.system(size: 16))
.font(.system(size: 18)) .foregroundColor(.white)
.foregroundColor(.white)
Text(".PNG")
.font(.system(size: 16))
.foregroundColor(.white)
}
Spacer()
VStack(
alignment: .leading,
spacing: 4
) {
Text("ATTACHMENT_INFO_FILE_SIZE".localized() + ":")
.bold()
.font(.system(size: 18))
.foregroundColor(.white)
Text("6mb")
.font(.system(size: 16))
.foregroundColor(.white)
}
Spacer()
} }
HStack( VStack(
alignment: .center, alignment: .leading,
spacing: 48 spacing: 4
) { ) {
VStack( Text("From:")
alignment: .leading, .bold()
spacing: 4 .font(.system(size: 18))
.foregroundColor(.white)
HStack(
spacing: 10
) { ) {
Text("ATTACHMENT_INFO_RESOLUTION".localized() + ":") Circle()
.bold() .frame(
.font(.system(size: 18)) width: 46,
.foregroundColor(.white) height: 46,
Text("550×550") alignment: .topLeading
.font(.system(size: 16)) )
.foregroundColor(.white) .foregroundColor(Color(red: 49.0/255, green: 241.0/255, blue: 150.0/255))
} // ProfilePictureSwiftUI(size: .message)
Spacer()
VStack( VStack(
alignment: .leading, alignment: .leading,
spacing: 4 spacing: 4
) { ) {
Text("ATTACHMENT_INFO_DURATION".localized() + ":") Text(messageViewModel.senderName ?? "Tester")
.bold() .bold()
.font(.system(size: 18)) .font(.system(size: 18))
.foregroundColor(.white) .foregroundColor(.white)
Text("N/A") Text(messageViewModel.authorId)
.font(.system(size: 16)) .font(.system(size: 16))
.foregroundColor(.white) .foregroundColor(.white)
}
} }
Spacer()
} }
} }
.frame( .frame(
@ -164,125 +277,29 @@ struct MessageInfoView: View {
.fixedSize(horizontal: false, vertical: true) .fixedSize(horizontal: false, vertical: true)
.padding( .padding(
EdgeInsets( EdgeInsets(
top: 10, top: 4,
leading: 30, leading: 30,
bottom: 10, bottom: 4,
trailing: 30 trailing: 30
) )
) )
}
// Message Info
ZStack {
RoundedRectangle(cornerRadius: 17)
.fill(Color(red: 27.0/255, green: 27.0/255, blue: 27.0/255))
VStack(
alignment: .leading,
spacing: 16
) {
VStack(
alignment: .leading,
spacing: 4
) {
Text("Sent:")
.bold()
.font(.system(size: 18))
.foregroundColor(.white)
Text(messageViewModel.dateForUI.fromattedForMessageInfo)
.font(.system(size: 16))
.foregroundColor(.white)
}
VStack(
alignment: .leading,
spacing: 4
) {
Text("Received:")
.bold()
.font(.system(size: 18))
.foregroundColor(.white)
Text(messageViewModel.receivedDateForUI.fromattedForMessageInfo)
.font(.system(size: 16))
.foregroundColor(.white)
}
VStack(
alignment: .leading,
spacing: 4
) {
Text("From:")
.bold()
.font(.system(size: 18))
.foregroundColor(.white)
HStack(
spacing: 10
) {
Circle()
.frame(
width: 46,
height: 46,
alignment: .topLeading
)
.foregroundColor(Color(red: 49.0/255, green: 241.0/255, blue: 150.0/255))
// ProfilePictureSwiftUI(size: .message)
VStack( // Actions
alignment: .leading, // ZStack {
spacing: 4 // RoundedRectangle(cornerRadius: 8)
) { // VStack {
Text(messageViewModel.senderName ?? "Tester") // ForEach(
.bold() // 0...(actions.count - 1),
.font(.system(size: 18)) // id: \.self
.foregroundColor(.white) // ) { index in
Text(messageViewModel.authorId) // HStack {
.font(.system(size: 16)) // Image(uiImage: actions[index].icon!)
.foregroundColor(.white) // Text(actions[index].title)
} // }
} // }
} // }
} // }
.frame(
maxWidth: .infinity,
maxHeight: .infinity,
alignment: .topLeading
)
.padding(
EdgeInsets(
top: 16,
leading: 16,
bottom: 16,
trailing: 16
)
)
} }
.frame(maxHeight: .infinity)
.fixedSize(horizontal: false, vertical: true)
.padding(
EdgeInsets(
top: 10,
leading: 30,
bottom: 10,
trailing: 30
)
)
// Actions
// ZStack {
// RoundedRectangle(cornerRadius: 8)
// VStack {
// ForEach(
// 0...(actions.count - 1),
// id: \.self
// ) { index in
// HStack {
// Image(uiImage: actions[index].icon!)
// Text(actions[index].title)
// }
// }
// }
// }
} }
} }
} }

@ -2,12 +2,17 @@
import SwiftUI import SwiftUI
struct SessionCarouselView_SwiftUI: View { public struct SessionCarouselView_SwiftUI: View {
@State var index = 0 @State var index = 0
var colors: [Color] = [.red, .orange, .blue] var colors: [Color]
var body: some View {
HStack { public init(colors: [Color]) {
self.colors = colors
}
public var body: some View {
HStack(spacing: 0) {
ArrowView(value: $index.animation(.easeInOut), range: 0...(colors.count - 1), type: .decrement) ArrowView(value: $index.animation(.easeInOut), range: 0...(colors.count - 1), type: .decrement)
.zIndex(1) .zIndex(1)
@ -175,7 +180,7 @@ struct SessionCarouselView_SwiftUI_Previews: PreviewProvider {
Color.black Color.black
} }
SessionCarouselView_SwiftUI() SessionCarouselView_SwiftUI(colors: [.red, .orange, .blue])
} }
} }
} }

Loading…
Cancel
Save