diff --git a/Session/Media Viewing & Editing/MessageInfoView.swift b/Session/Media Viewing & Editing/MessageInfoView.swift index 5ec1beef1..4a08b7209 100644 --- a/Session/Media Viewing & Editing/MessageInfoView.swift +++ b/Session/Media Viewing & Editing/MessageInfoView.swift @@ -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) - // } - // } - // } - // } } } } diff --git a/SessionUIKit/Components/SessionCarouselView+SwiftUI.swift b/SessionUIKit/Components/SessionCarouselView+SwiftUI.swift index 79a564887..84d2f42d2 100644 --- a/SessionUIKit/Components/SessionCarouselView+SwiftUI.swift +++ b/SessionUIKit/Components/SessionCarouselView+SwiftUI.swift @@ -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]) } } }