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
}
VStack(
alignment: .leading,
spacing: 10
) {
// Message bubble snapshot
if let body: String = messageViewModel.body {
ZStack {
RoundedRectangle(cornerRadius: 18)
.fill(Color(red: 49.0/255, green: 241.0/255, blue: 150.0/255))
Text(body)
ScrollView(.vertical, showsIndicators: false) {
VStack(
alignment: .leading,
spacing: 10
) {
// Message bubble snapshot
if let body: String = messageViewModel.body {
ZStack {
RoundedRectangle(cornerRadius: 18)
.fill(Color(red: 49.0/255, green: 241.0/255, blue: 150.0/255))
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(
EdgeInsets(
top: 8,
top: 16,
leading: 16,
bottom: 8,
bottom: 16,
trailing: 16
)
)
}
.frame(
maxWidth: .infinity,
maxHeight: .infinity,
alignment: .topLeading
)
.fixedSize(horizontal: true, vertical: true)
.padding(
EdgeInsets(
top: 10,
leading: 30,
bottom: 10,
trailing: 30
}
.frame(maxHeight: .infinity)
.fixedSize(horizontal: false, vertical: true)
.padding(
EdgeInsets(
top: 4,
leading: 30,
bottom: 4,
trailing: 30
)
)
)
}
// TODO: Attachment carousel view
// Attachment Info
if (messageViewModel.attachments?.isEmpty != false) {
}
// Message Info
ZStack {
RoundedRectangle(cornerRadius: 17)
.fill(Color(red: 27.0/255, green: 27.0/255, blue: 27.0/255))
@ -67,83 +201,62 @@ struct MessageInfoView: View {
alignment: .leading,
spacing: 4
) {
Text("ATTACHMENT_INFO_FILE_ID".localized() + ":")
Text("Sent:")
.bold()
.font(.system(size: 18))
.foregroundColor(.white)
Text("12378965485235985214")
Text(messageViewModel.dateForUI.fromattedForMessageInfo)
.font(.system(size: 16))
.foregroundColor(.white)
}
HStack(
alignment: .center,
spacing: 48
VStack(
alignment: .leading,
spacing: 4
) {
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()
Text("Received:")
.bold()
.font(.system(size: 18))
.foregroundColor(.white)
Text(messageViewModel.receivedDateForUI.fromattedForMessageInfo)
.font(.system(size: 16))
.foregroundColor(.white)
}
HStack(
alignment: .center,
spacing: 48
VStack(
alignment: .leading,
spacing: 4
) {
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("From:")
.bold()
.font(.system(size: 18))
.foregroundColor(.white)
HStack(
spacing: 10
) {
Text("ATTACHMENT_INFO_DURATION".localized() + ":")
.bold()
.font(.system(size: 18))
.foregroundColor(.white)
Text("N/A")
.font(.system(size: 16))
.foregroundColor(.white)
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(
alignment: .leading,
spacing: 4
) {
Text(messageViewModel.senderName ?? "Tester")
.bold()
.font(.system(size: 18))
.foregroundColor(.white)
Text(messageViewModel.authorId)
.font(.system(size: 16))
.foregroundColor(.white)
}
}
Spacer()
}
}
.frame(
@ -164,125 +277,29 @@ struct MessageInfoView: View {
.fixedSize(horizontal: false, vertical: true)
.padding(
EdgeInsets(
top: 10,
top: 4,
leading: 30,
bottom: 10,
bottom: 4,
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(
alignment: .leading,
spacing: 4
) {
Text(messageViewModel.senderName ?? "Tester")
.bold()
.font(.system(size: 18))
.foregroundColor(.white)
Text(messageViewModel.authorId)
.font(.system(size: 16))
.foregroundColor(.white)
}
}
}
}
.frame(
maxWidth: .infinity,
maxHeight: .infinity,
alignment: .topLeading
)
.padding(
EdgeInsets(
top: 16,
leading: 16,
bottom: 16,
trailing: 16
)
)
// 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)
// }
// }
// }
// }
}
.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
struct SessionCarouselView_SwiftUI: View {
public struct SessionCarouselView_SwiftUI: View {
@State var index = 0
var colors: [Color] = [.red, .orange, .blue]
var body: some View {
HStack {
var colors: [Color]
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)
.zIndex(1)
@ -175,7 +180,7 @@ struct SessionCarouselView_SwiftUI_Previews: PreviewProvider {
Color.black
}
SessionCarouselView_SwiftUI()
SessionCarouselView_SwiftUI(colors: [.red, .orange, .blue])
}
}
}

Loading…
Cancel
Save