Skip to content

Commit ddc0279

Browse files
laevanduslaevandus
authored
Fix spacings in message annotations (#1403)
1 parent 2a79a63 commit ddc0279

72 files changed

Lines changed: 184 additions & 23 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions

‎Sources/StreamChatSwiftUI/ChatMessageList/MessageAnnotationView.swift‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,9 @@ public struct MessageAnnotationView: View {
4545
HStack(spacing: tokens.spacingXxs) {
4646
Image(uiImage: icon)
4747
.renderingMode(.template)
48+
.scaledToFit()
4849
.frame(width: tokens.iconSizeSm, height: tokens.iconSizeSm)
50+
.padding(.horizontal, tokens.spacingXxxs)
4951
.accessibilityHidden(true)
5052
if let title {
5153
Text(title)

‎Sources/StreamChatSwiftUI/ChatMessageList/MessageContainerView.swift‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -92,10 +92,10 @@ struct MessageContainerView<Factory: ViewFactory>: View {
9292
}
9393
}
9494
.frame(maxWidth: .infinity, alignment: messageViewModel.isRightAligned ? .trailing : .leading)
95-
.padding(.top, messageViewModel.topReactionsShown && !messageViewModel.isPinned ? messageListConfig.messageDisplayOptions.reactionsTopPadding(message) : 0)
95+
.padding(.top, messageViewModel.topReactionsShown && !messageViewModel.annotationsShown ? messageListConfig.messageDisplayOptions.reactionsTopPadding(message) : 0)
9696
.padding(.horizontal, messageListConfig.messagePaddings.horizontal)
9797
.padding(.bottom, showsAllInfo || messageViewModel.annotationsShown ? paddingValue : groupMessageInterItemSpacing)
98-
.padding(.top, isLast ? paddingValue : 0)
98+
.padding(.top, isLast ? paddingValue : (messageViewModel.annotationsShown ? groupMessageInterItemSpacing : 0))
9999
}
100100

101101
// MARK: - Sub-views

‎Sources/StreamChatSwiftUI/ChatMessageList/MessageListConfig.swift‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -293,7 +293,7 @@ public final class MessageDisplayOptions {
293293
}
294294

295295
public static var defaultReactionsTopPadding: (ChatMessage) -> CGFloat {
296-
{ _ in 20 }
296+
{ _ in 19 }
297297
}
298298
}
299299

‎Sources/StreamChatSwiftUI/ChatMessageList/MessageTopView.swift‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ struct MessageTopView: View {
1818
var usesInvertedStyle: Bool = false
1919

2020
var body: some View {
21-
VStack(alignment: messageViewModel.isRightAligned ? .trailing : .leading, spacing: tokens.spacingXxs) {
21+
VStack(alignment: messageViewModel.isRightAligned ? .trailing : .leading, spacing: tokens.spacingXs) {
2222
if messageViewModel.isPinned {
2323
MessageAnnotationView(
2424
icon: images.pin,

‎StreamChatSwiftUITests/Tests/ChatChannel/MessageListView_Tests.swift‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -383,6 +383,137 @@ import XCTest
383383
AssertSnapshot(view)
384384
}
385385

386+
// MARK: - Grouped Messages with Annotations
387+
388+
func test_messageListView_groupedMessages_withThreadReplyAnnotation() {
389+
// Given
390+
let channel = ChatChannel.mockNonDMChannel()
391+
let author = ChatUser.mock(id: "martin", name: "Martin")
392+
let baseTime = Date(timeIntervalSince1970: 1000)
393+
let msg1 = ChatMessage.mock(
394+
id: "msg1",
395+
cid: channel.cid,
396+
text: "Let me check the latest updates.",
397+
author: author,
398+
createdAt: baseTime.addingTimeInterval(-20)
399+
)
400+
let msg2 = ChatMessage.mock(
401+
id: "msg2",
402+
cid: channel.cid,
403+
text: "I found the issue in the logs.",
404+
author: author,
405+
createdAt: baseTime.addingTimeInterval(-10),
406+
parentMessageId: .unique,
407+
showReplyInChannel: true
408+
)
409+
let msg3 = ChatMessage.mock(
410+
id: "msg3",
411+
cid: channel.cid,
412+
text: "Looks like it was a timeout.",
413+
author: author,
414+
createdAt: baseTime
415+
)
416+
let messages = [msg3, msg2, msg1]
417+
let messagesGroupingInfo: [String: [String]] = [
418+
msg3.id: [firstMessageKey],
419+
msg1.id: [lastMessageKey]
420+
]
421+
let view = MessageListView(
422+
factory: DefaultViewFactory.shared,
423+
channel: channel,
424+
messages: messages,
425+
messagesGroupingInfo: messagesGroupingInfo,
426+
scrolledId: .constant(nil),
427+
showScrollToLatestButton: .constant(false),
428+
quotedMessage: .constant(nil),
429+
currentDateString: nil,
430+
listId: "listId",
431+
isMessageThread: false,
432+
shouldShowTypingIndicator: false,
433+
onMessageAppear: { _, _ in },
434+
onScrollToBottom: {},
435+
onLongPress: { _ in }
436+
)
437+
.applyDefaultSize()
438+
439+
// Then
440+
assertSnapshot(matching: view, as: .image(perceptualPrecision: precision))
441+
}
442+
443+
func test_messageListView_groupedMessages_withAllAnnotations() {
444+
// Given
445+
streamChat = StreamChat(chatClient: chatClient, utils: Utils(
446+
messageListConfig: .init(messageDisplayOptions: MessageDisplayOptions(showOriginalTranslatedButton: true))
447+
))
448+
449+
let channel = ChatChannel.mock(
450+
cid: .unique,
451+
config: .mock(messageRemindersEnabled: true),
452+
membership: .mock(id: .unique, language: .spanish)
453+
)
454+
let author = ChatUser.mock(id: "martin", name: "Martin")
455+
let baseTime = Date(timeIntervalSince1970: 1000)
456+
let msg1 = ChatMessage.mock(
457+
id: "msg1",
458+
cid: channel.cid,
459+
text: "Let me check the latest updates.",
460+
author: author,
461+
createdAt: baseTime.addingTimeInterval(-20)
462+
)
463+
let msg2 = ChatMessage.mock(
464+
id: "msg2",
465+
cid: channel.cid,
466+
text: "I found the issue in the logs.",
467+
author: author,
468+
createdAt: baseTime.addingTimeInterval(-10),
469+
parentMessageId: .unique,
470+
showReplyInChannel: true,
471+
translations: [.spanish: "Encontré el problema en los registros."],
472+
pinDetails: MessagePinDetails(
473+
pinnedAt: Date(),
474+
pinnedBy: .mock(id: .unique, name: "Martin"),
475+
expiresAt: nil
476+
),
477+
reminder: MessageReminderInfo(
478+
remindAt: Date().addingTimeInterval(3600),
479+
createdAt: Date(),
480+
updatedAt: Date()
481+
)
482+
)
483+
let msg3 = ChatMessage.mock(
484+
id: "msg3",
485+
cid: channel.cid,
486+
text: "Looks like it was a timeout.",
487+
author: author,
488+
createdAt: baseTime
489+
)
490+
let messages = [msg3, msg2, msg1]
491+
let messagesGroupingInfo: [String: [String]] = [
492+
msg3.id: [firstMessageKey],
493+
msg1.id: [lastMessageKey]
494+
]
495+
let view = MessageListView(
496+
factory: DefaultViewFactory.shared,
497+
channel: channel,
498+
messages: messages,
499+
messagesGroupingInfo: messagesGroupingInfo,
500+
scrolledId: .constant(nil),
501+
showScrollToLatestButton: .constant(false),
502+
quotedMessage: .constant(nil),
503+
currentDateString: nil,
504+
listId: "listId",
505+
isMessageThread: false,
506+
shouldShowTypingIndicator: false,
507+
onMessageAppear: { _, _ in },
508+
onScrollToBottom: {},
509+
onLongPress: { _ in }
510+
)
511+
.applyDefaultSize()
512+
513+
// Then
514+
assertSnapshot(matching: view, as: .image(perceptualPrecision: precision))
515+
}
516+
386517
// MARK: - private
387518

388519
func makeMessageListView(

‎StreamChatSwiftUITests/Tests/ChatChannel/MessageTopView_Tests.swift‎

Lines changed: 31 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,10 @@ import XCTest
2626
)
2727
)
2828

29-
let view = makeAnnotationsView(message: message)
29+
let size = CGSize(width: 375, height: 72)
30+
let view = makeAnnotationsView(message: message, size: size)
3031

31-
AssertSnapshot(view, size: CGSize(width: 375, height: 40))
32+
AssertSnapshot(view, size: size)
3233
}
3334

3435
func test_pinnedByYouAnnotation_snapshot() {
@@ -45,9 +46,10 @@ import XCTest
4546
)
4647
)
4748

48-
let view = makeAnnotationsView(message: message)
49+
let size = CGSize(width: 375, height: 72)
50+
let view = makeAnnotationsView(message: message, size: size)
4951

50-
AssertSnapshot(view, size: CGSize(width: 375, height: 40))
52+
AssertSnapshot(view, size: size)
5153
}
5254

5355
// MARK: - Sent in channel
@@ -62,9 +64,10 @@ import XCTest
6264
showReplyInChannel: true
6365
)
6466

65-
let view = makeAnnotationsView(message: message, isInThread: true)
67+
let size = CGSize(width: 375, height: 72)
68+
let view = makeAnnotationsView(message: message, isInThread: true, size: size)
6669

67-
AssertSnapshot(view, size: CGSize(width: 375, height: 40))
70+
AssertSnapshot(view, size: size)
6871
}
6972

7073
// MARK: - Replied to thread
@@ -79,17 +82,19 @@ import XCTest
7982
showReplyInChannel: true
8083
)
8184

82-
let view = makeAnnotationsView(message: message, isInThread: false)
85+
let size = CGSize(width: 375, height: 72)
86+
let view = makeAnnotationsView(message: message, isInThread: false, size: size)
8387

84-
AssertSnapshot(view, size: CGSize(width: 375, height: 40))
88+
AssertSnapshot(view, size: size)
8589
}
8690

8791
// MARK: - Reminder
8892

8993
func test_reminderAnnotation_snapshot() {
94+
let channel = ChatChannel.mockDMChannel(config: .mock(messageRemindersEnabled: true))
9095
let message = ChatMessage.mock(
9196
id: .unique,
92-
cid: .unique,
97+
cid: channel.cid,
9398
text: "Message with reminder",
9499
author: .mock(id: .unique),
95100
reminder: MessageReminderInfo(
@@ -99,9 +104,10 @@ import XCTest
99104
)
100105
)
101106

102-
let view = makeAnnotationsView(message: message)
107+
let size = CGSize(width: 375, height: 72)
108+
let view = makeAnnotationsView(message: message, channel: channel, size: size)
103109

104-
AssertSnapshot(view, size: CGSize(width: 375, height: 40))
110+
AssertSnapshot(view, size: size)
105111
}
106112

107113
// MARK: - Translated
@@ -124,9 +130,10 @@ import XCTest
124130
translations: [.spanish: "Hola"]
125131
)
126132

127-
let view = makeAnnotationsView(message: message, channel: channel)
133+
let size = CGSize(width: 375, height: 72)
134+
let view = makeAnnotationsView(message: message, channel: channel, size: size)
128135

129-
AssertSnapshot(view, size: CGSize(width: 375, height: 40))
136+
AssertSnapshot(view, size: size)
130137
}
131138

132139
// MARK: - All annotations (not in thread)
@@ -138,6 +145,7 @@ import XCTest
138145

139146
let channel = ChatChannel.mock(
140147
cid: .unique,
148+
config: .mock(messageRemindersEnabled: true),
141149
membership: .mock(id: .unique, language: .spanish)
142150
)
143151

@@ -161,9 +169,10 @@ import XCTest
161169
)
162170
)
163171

164-
let view = makeAnnotationsView(message: message, channel: channel, isInThread: false)
172+
let size = CGSize(width: 375, height: 100)
173+
let view = makeAnnotationsView(message: message, channel: channel, isInThread: false, size: size)
165174

166-
AssertSnapshot(view, size: CGSize(width: 375, height: 140))
175+
AssertSnapshot(view, size: size)
167176
}
168177

169178
// MARK: - All annotations (in thread)
@@ -175,6 +184,7 @@ import XCTest
175184

176185
let channel = ChatChannel.mock(
177186
cid: .unique,
187+
config: .mock(messageRemindersEnabled: true),
178188
membership: .mock(id: .unique, language: .spanish)
179189
)
180190

@@ -198,17 +208,19 @@ import XCTest
198208
)
199209
)
200210

201-
let view = makeAnnotationsView(message: message, channel: channel, isInThread: true)
211+
let size = CGSize(width: 375, height: 100)
212+
let view = makeAnnotationsView(message: message, channel: channel, isInThread: true, size: size)
202213

203-
AssertSnapshot(view, size: CGSize(width: 375, height: 140))
214+
AssertSnapshot(view, size: size)
204215
}
205216

206217
// MARK: - Helpers
207218

208219
private func makeAnnotationsView(
209220
message: ChatMessage,
210221
channel: ChatChannel? = nil,
211-
isInThread: Bool = false
222+
isInThread: Bool = false,
223+
size: CGSize
212224
) -> some View {
213225
let ch = channel ?? .mockDMChannel()
214226
let viewModel = MessageViewModel(message: message, channel: ch, isInThread: isInThread)
@@ -217,6 +229,6 @@ import XCTest
217229
channel: ch,
218230
messageViewModel: viewModel
219231
)
220-
.frame(width: 375)
232+
.applySize(size)
221233
}
222234
}

‎StreamChatSwiftUITests/Tests/ChatChannel/__Snapshots__/MessageItemView_Tests/test_messageContainerViewPinned_snapshot.1.png‎

158 Bytes

‎StreamChatSwiftUITests/Tests/ChatChannel/__Snapshots__/MessageItemView_Tests/test_messageContainerView_topReactionsWithPinnedAnnotation_snapshot.default-light.png‎

51 Bytes

‎StreamChatSwiftUITests/Tests/ChatChannel/__Snapshots__/MessageItemView_Tests/test_messageContainerView_topReactionsWithPinnedAnnotation_snapshot.extraExtraExtraLarge-light.png‎

-1 Bytes

0 commit comments

Comments
 (0)