diff --git a/ElementX.xcodeproj/project.pbxproj b/ElementX.xcodeproj/project.pbxproj index f1540e2be6..fe1e8ec57a 100644 --- a/ElementX.xcodeproj/project.pbxproj +++ b/ElementX.xcodeproj/project.pbxproj @@ -746,6 +746,7 @@ AC69B6DF15FC451AB2945036 /* UserSessionStoreProtocol.swift in Sources */ = {isa = PBXBuildFile; fileRef = BEBA759D1347CFFB3D84ED1F /* UserSessionStoreProtocol.swift */; }; AC7AA215D60FBC307F984028 /* Consumable.swift in Sources */ = {isa = PBXBuildFile; fileRef = 127A57D053CE8C87B5EFB089 /* Consumable.swift */; }; AC90434798E7894370E80E66 /* SecureBackupScreenViewModelProtocol.swift in Sources */ = {isa = PBXBuildFile; fileRef = D79BB714D28C9F588DD69353 /* SecureBackupScreenViewModelProtocol.swift */; }; + AC95FB1F352F66D36F32A670 /* TimelineItemSendInfoModifier.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7A1156D47F9A23517A54F1F2 /* TimelineItemSendInfoModifier.swift */; }; AD2A81B65A9F6163012086F1 /* MXLog.swift in Sources */ = {isa = PBXBuildFile; fileRef = 111B698739E3410E2CDB7144 /* MXLog.swift */; }; AD55E245FE686D7DB4C86406 /* RoomTimelineItemView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 90F2F8998E5632668B0AD848 /* RoomTimelineItemView.swift */; }; AE1160076F663BF14E0E893A /* EffectsView.swift in Sources */ = {isa = PBXBuildFile; fileRef = F4548A9BDE5CB3AB864BCA9F /* EffectsView.swift */; }; @@ -1645,6 +1646,7 @@ 796CBD0C56FA0D3AEDAB255B /* SessionVerificationScreenCoordinator.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SessionVerificationScreenCoordinator.swift; sourceTree = ""; }; 79FAC366FF299BCC555D756E /* ElementWellKnown.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ElementWellKnown.swift; sourceTree = ""; }; 7A03E073077D92AA19C43DCF /* IdentityConfirmationScreenCoordinator.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = IdentityConfirmationScreenCoordinator.swift; sourceTree = ""; }; + 7A1156D47F9A23517A54F1F2 /* TimelineItemSendInfoModifier.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TimelineItemSendInfoModifier.swift; sourceTree = ""; }; 7A5D2323D7B6BF4913EB7EED /* landscape_test_image.jpg */ = {isa = PBXFileReference; lastKnownFileType = image.jpeg; path = landscape_test_image.jpg; sourceTree = ""; }; 7AAD8C633AA57948B34EDCF7 /* RoomChangeRolesScreenViewModelProtocol.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RoomChangeRolesScreenViewModelProtocol.swift; sourceTree = ""; }; 7AC0CD1CAFD3F8B057F9AEA5 /* ClientBuilderHook.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ClientBuilderHook.swift; sourceTree = ""; }; @@ -4368,6 +4370,7 @@ E2DCA495ED42D2463DDAA94D /* TimelineBubbleLayout.swift */, 74C6F3DAD167F972702C8893 /* TimelineItemAccessibilityModifier.swift */, 98A2932515EA11D3DD8A3506 /* TimelineItemBubbledStylerView.swift */, + 7A1156D47F9A23517A54F1F2 /* TimelineItemSendInfoModifier.swift */, 8DC2C9E0E15C79BBDA80F0A2 /* TimelineStyle.swift */, 892E29C98C4E8182C9037F84 /* TimelineStyler.swift */, ); @@ -6640,6 +6643,7 @@ 1C815DD79B401DEBA2914773 /* TimelineItemMock.swift in Sources */, 440123E29E2F9B001A775BBE /* TimelineItemProxy.swift in Sources */, 9586E90A447C4896C0CA3A8E /* TimelineItemReplyDetails.swift in Sources */, + AC95FB1F352F66D36F32A670 /* TimelineItemSendInfoModifier.swift in Sources */, 1B88BB631F7FC45A213BB554 /* TimelineItemSender.swift in Sources */, A680F54935A6ADEA4ED6C38F /* TimelineItemStatusView.swift in Sources */, 562EFB9AB62B38830D9AA778 /* TimelineMediaFrame.swift in Sources */, diff --git a/ElementX/Sources/Screens/RoomScreen/View/Style/TimelineItemBubbledStylerView.swift b/ElementX/Sources/Screens/RoomScreen/View/Style/TimelineItemBubbledStylerView.swift index fff5b30f53..b719c36c2f 100644 --- a/ElementX/Sources/Screens/RoomScreen/View/Style/TimelineItemBubbledStylerView.swift +++ b/ElementX/Sources/Screens/RoomScreen/View/Style/TimelineItemBubbledStylerView.swift @@ -14,10 +14,8 @@ // limitations under the License. // -import Foundation -import SwiftUI - import Compound +import SwiftUI struct TimelineItemBubbledStylerView: View { @EnvironmentObject private var context: RoomScreenViewModel.Context @@ -34,9 +32,9 @@ struct TimelineItemBubbledStylerView: View { /// The base padding applied to bubbles on either side. /// /// **Note:** This is on top of the insets applied to the cells by the table view. - let bubbleHorizontalPadding: CGFloat = 8 + private let bubbleHorizontalPadding: CGFloat = 8 /// Additional padding applied to outgoing bubbles when the avatar is shown - var bubbleAvatarPadding: CGFloat { + private var bubbleAvatarPadding: CGFloat { guard !timelineItem.isOutgoing, !isEncryptedOneToOneRoom else { return 0 } return 8 } @@ -108,7 +106,7 @@ struct TimelineItemBubbledStylerView: View { private var messageBubbleWithReactions: some View { // Figma overlaps reactions by 3 VStack(alignment: alignment, spacing: -3) { - messageBubble + messageBubbleWithActions .timelineItemAccessibility(timelineItem) { context.send(viewAction: .displayTimelineItemMenu(itemID: timelineItem.id)) } @@ -124,8 +122,8 @@ struct TimelineItemBubbledStylerView: View { } } - var messageBubble: some View { - styledContent + var messageBubbleWithActions: some View { + messageBubble .onTapGesture { context.send(viewAction: .itemTapped(itemID: timelineItem.id)) } @@ -156,59 +154,14 @@ struct TimelineItemBubbledStylerView: View { } .padding(.top, messageBubbleTopPadding) } - - @ViewBuilder - var styledContent: some View { - contentWithTimestamp + + var messageBubble: some View { + contentWithReply + .timelineItemSendInfo(timelineItem: timelineItem, adjustedDeliveryStatus: adjustedDeliveryStatus) .bubbleStyle(insets: timelineItem.bubbleInsets, color: timelineItem.bubbleBackgroundColor, corners: roundedCorners) } - - @ViewBuilder - var contentWithTimestamp: some View { - timelineItem.bubbleSendInfoLayoutType - .layout { - contentWithReply - layoutedLocalizedSendInfo - } - } - - @ViewBuilder - var layoutedLocalizedSendInfo: some View { - switch timelineItem.bubbleSendInfoLayoutType { - case .overlay(capsuleStyle: true): - localizedSendInfo - .padding(.horizontal, 4) - .padding(.vertical, 2) - .background(Color.compound.bgSubtleSecondary) - .cornerRadius(10) - .padding(.trailing, 4) - .padding(.bottom, 4) - case .horizontal, .overlay(capsuleStyle: false): - localizedSendInfo - .padding(.bottom, -4) - case .vertical: - GridRow { - localizedSendInfo - .gridColumnAlignment(.trailing) - } - } - } - - @ViewBuilder - var localizedSendInfo: some View { - HStack(spacing: 4) { - Text(timelineItem.localizedSendInfo) - - if adjustedDeliveryStatus == .sendingFailed { - CompoundIcon(\.error, size: .xSmall, relativeTo: .compound.bodyXS) - .accessibilityLabel(L10n.commonSendingFailed) - } - } - .font(.compound.bodyXS) - .foregroundColor(adjustedDeliveryStatus == .sendingFailed ? .compound.textCriticalPrimary : .compound.textSecondary) - } @ViewBuilder var contentWithReply: some View { @@ -293,28 +246,6 @@ private extension View { } } -// Describes how the content and the send info should be arranged inside a bubble -private enum BubbleSendInfoLayoutType { - case horizontal(spacing: CGFloat = 4) - case vertical(spacing: CGFloat = 4) - case overlay(capsuleStyle: Bool) - - var layout: AnyLayout { - let layout: any Layout - - switch self { - case .horizontal(let spacing): - layout = HStackLayout(alignment: .bottom, spacing: spacing) - case .vertical(let spacing): - layout = GridLayout(alignment: .leading, verticalSpacing: spacing) - case .overlay: - layout = ZStackLayout(alignment: .bottomTrailing) - } - - return AnyLayout(layout) - } -} - private extension EventBasedTimelineItemProtocol { var bubbleBackgroundColor: Color? { let defaultColor: Color = isOutgoing ? .compound._bgBubbleOutgoing : .compound._bgBubbleIncoming @@ -335,8 +266,8 @@ private extension EventBasedTimelineItemProtocol { } } - // The insets for the full bubble content. - // Padding affecting just the "send info" should be added inside `layoutedLocalizedSendInfo` + /// The insets for the full bubble content. + /// Padding affecting just the "send info" should be added inside `TimelineItemSendInfoView` var bubbleInsets: EdgeInsets { let defaultInsets: EdgeInsets = .init(around: 8) @@ -363,25 +294,6 @@ private extension EventBasedTimelineItemProtocol { return defaultInsets } } - - var bubbleSendInfoLayoutType: BubbleSendInfoLayoutType { - let defaultTimestampLayout: BubbleSendInfoLayoutType = .horizontal() - - switch self { - case is TextBasedRoomTimelineItem: - return .overlay(capsuleStyle: false) - case is ImageRoomTimelineItem, - is VideoRoomTimelineItem, - is StickerRoomTimelineItem: - return .overlay(capsuleStyle: true) - case let locationTimelineItem as LocationRoomTimelineItem: - return .overlay(capsuleStyle: locationTimelineItem.content.geoURI != nil) - case is PollRoomTimelineItem: - return .vertical(spacing: 16) - default: - return defaultTimestampLayout - } - } var contentCornerRadius: CGFloat { guard let message = self as? EventBasedMessageTimelineItemProtocol else { return .zero } @@ -395,6 +307,16 @@ private extension EventBasedTimelineItemProtocol { } } +private extension EdgeInsets { + init(around: CGFloat) { + self.init(top: around, leading: around, bottom: around, trailing: around) + } + + static var zero: Self = .init(around: 0) +} + +// MARK: - Previews + struct TimelineItemBubbledStylerView_Previews: PreviewProvider, TestablePreview { static let viewModel = RoomScreenViewModel.mock @@ -556,11 +478,3 @@ struct TimelineItemBubbledStylerView_Previews: PreviewProvider, TestablePreview .environmentObject(viewModel.context) } } - -private extension EdgeInsets { - init(around: CGFloat) { - self.init(top: around, leading: around, bottom: around, trailing: around) - } - - static var zero: Self = .init(around: 0) -} diff --git a/ElementX/Sources/Screens/RoomScreen/View/Style/TimelineItemSendInfoModifier.swift b/ElementX/Sources/Screens/RoomScreen/View/Style/TimelineItemSendInfoModifier.swift new file mode 100644 index 0000000000..f958953677 --- /dev/null +++ b/ElementX/Sources/Screens/RoomScreen/View/Style/TimelineItemSendInfoModifier.swift @@ -0,0 +1,143 @@ +// +// Copyright 2024 New Vector Ltd +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// + +import Compound +import SwiftUI + +extension View { + /// Adds the send info (timestamp along indicators for edits and delivery/encryption issues) for the given timeline item to this view. + func timelineItemSendInfo(timelineItem: EventBasedTimelineItemProtocol, + adjustedDeliveryStatus: TimelineItemDeliveryStatus?) -> some View { + modifier(TimelineItemSendInfoModifier(sendInfo: .init(timelineItem: timelineItem, + adjustedDeliveryStatus: adjustedDeliveryStatus))) + } +} + +/// Adds the send info to a view with the correct layout. +private struct TimelineItemSendInfoModifier: ViewModifier { + let sendInfo: TimelineItemSendInfo + + var layout: AnyLayout { + switch sendInfo.layoutType { + case .horizontal(let spacing): + AnyLayout(HStackLayout(alignment: .bottom, spacing: spacing)) + case .vertical(let spacing): + AnyLayout(GridLayout(alignment: .leading, verticalSpacing: spacing)) + case .overlay: + AnyLayout(ZStackLayout(alignment: .bottomTrailing)) + } + } + + func body(content: Content) -> some View { + layout { + content + TimelineItemSendInfoLabel(sendInfo: sendInfo) + } + } +} + +/// The label shown for a timeline item with info about it's timestamp and various other indicators. +private struct TimelineItemSendInfoLabel: View { + let sendInfo: TimelineItemSendInfo + + var body: some View { + switch sendInfo.layoutType { + case .overlay(capsuleStyle: true): + content + .padding(.horizontal, 4) + .padding(.vertical, 2) + .background(Color.compound.bgSubtleSecondary) + .cornerRadius(10) + .padding(.trailing, 4) + .padding(.bottom, 4) + case .horizontal, .overlay(capsuleStyle: false): + content + .padding(.bottom, -4) + case .vertical: + GridRow { + content + .gridColumnAlignment(.trailing) + } + } + } + + @ViewBuilder + var content: some View { + HStack(spacing: 4) { + Text(sendInfo.localizedString) + + if sendInfo.adjustedDeliveryStatus == .sendingFailed { + CompoundIcon(\.error, size: .xSmall, relativeTo: .compound.bodyXS) + .accessibilityLabel(L10n.commonSendingFailed) + } + } + .font(.compound.bodyXS) + .foregroundStyle(sendInfo.foregroundStyle) + } +} + +/// All the data needed to render a timeline item's send info label. +private struct TimelineItemSendInfo { + let localizedString: String + let layoutType: LayoutType + var adjustedDeliveryStatus: TimelineItemDeliveryStatus? + + /// Describes how the content and the send info should be arranged inside a bubble + enum LayoutType { + case horizontal(spacing: CGFloat = 4) + case vertical(spacing: CGFloat = 4) + case overlay(capsuleStyle: Bool) + } + + var foregroundStyle: Color { + adjustedDeliveryStatus == .sendingFailed ? .compound.textCriticalPrimary : .compound.textSecondary + } +} + +private extension TimelineItemSendInfo { + init(timelineItem: EventBasedTimelineItemProtocol, adjustedDeliveryStatus: TimelineItemDeliveryStatus?) { + localizedString = timelineItem.localizedSendInfo + layoutType = switch timelineItem { + case is TextBasedRoomTimelineItem: + .overlay(capsuleStyle: false) + case is ImageRoomTimelineItem, + is VideoRoomTimelineItem, + is StickerRoomTimelineItem: + .overlay(capsuleStyle: true) + case let locationTimelineItem as LocationRoomTimelineItem: + .overlay(capsuleStyle: locationTimelineItem.content.geoURI != nil) + case is PollRoomTimelineItem: + .vertical(spacing: 16) + default: + .horizontal() + } + self.adjustedDeliveryStatus = adjustedDeliveryStatus + } +} + +// MARK: - Previews + +struct TimelineItemSendInfoLabel_Previews: PreviewProvider, TestablePreview { + static var previews: some View { + VStack(spacing: 16) { + TimelineItemSendInfoLabel(sendInfo: .init(localizedString: "09:47 AM", + layoutType: .horizontal())) + TimelineItemSendInfoLabel(sendInfo: .init(localizedString: "09:47 AM", + layoutType: .horizontal(), + adjustedDeliveryStatus: .sendingFailed)) + } + } +}