Added possiblity to customize no content icons (#740)

GetStream · Feb 4, 2025 · 9fc5e64 · 9fc5e64
1 parent f172363
commit 9fc5e64
Show file tree

Hide file tree

Showing 66 changed files with 41 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ### ✅ Added
 - Add factory method to customize the channel avatar [#734](https://github.com/GetStream/stream-chat-swiftui/pull/734)
+- Add possibility to replace the no content icons [#740](https://github.com/GetStream/stream-chat-swiftui/pull/740)
 
 # [4.71.0](https://github.com/GetStream/stream-chat-swiftui/releases/tag/4.71.0)
 _January 28, 2025_

diff --git a/Sources/StreamChatSwiftUI/ChatChannel/ChannelInfo/FileAttachmentsView.swift b/Sources/StreamChatSwiftUI/ChatChannel/ChannelInfo/FileAttachmentsView.swift
@@ -12,6 +12,7 @@ public struct FileAttachmentsView: View {
 
     @Injected(\.colors) private var colors
     @Injected(\.fonts) private var fonts
+    @Injected(\.images) private var images
 
     public init(channel: ChatChannel) {
         _viewModel = StateObject(
@@ -29,7 +30,7 @@ public struct FileAttachmentsView: View {
                 LoadingView()
             } else if viewModel.attachmentsDataSource.isEmpty {
                 NoContentView(
-                    imageName: "folder",
+                    image: images.noMedia,
                     title: L10n.ChatInfo.Files.emptyTitle,
                     description: L10n.ChatInfo.Files.emptyDesc
                 )

diff --git a/Sources/StreamChatSwiftUI/ChatChannel/ChannelInfo/MediaAttachmentsView.swift b/Sources/StreamChatSwiftUI/ChatChannel/ChannelInfo/MediaAttachmentsView.swift
@@ -7,6 +7,8 @@ import SwiftUI
 
 /// View displaying media attachments.
 public struct MediaAttachmentsView: View {
+
+    @Injected(\.images) private var images
 
     @StateObject private var viewModel: MediaAttachmentsViewModel
 
@@ -40,7 +42,7 @@ public struct MediaAttachmentsView: View {
                 LoadingView()
             } else if viewModel.mediaItems.isEmpty {
                 NoContentView(
-                    imageName: "folder",
+                    image: images.noMedia,
                     title: L10n.ChatInfo.Media.emptyTitle,
                     description: L10n.ChatInfo.Media.emptyDesc
                 )

diff --git a/Sources/StreamChatSwiftUI/ChatChannel/ChannelInfo/PinnedMessagesView.swift b/Sources/StreamChatSwiftUI/ChatChannel/ChannelInfo/PinnedMessagesView.swift
@@ -7,6 +7,8 @@ import SwiftUI
 
 /// View displaying pinned messages in the chat info screen.
 public struct PinnedMessagesView: View {
+
+    @Injected(\.images) private var images
 
     @StateObject private var viewModel: PinnedMessagesViewModel
 
@@ -32,7 +34,7 @@ public struct PinnedMessagesView: View {
                 }
             } else {
                 NoContentView(
-                    imageName: "message",
+                    image: images.noContent,
                     title: L10n.ChatInfo.PinnedMessages.emptyTitle,
                     description: L10n.ChatInfo.PinnedMessages.emptyDesc,
                     shouldRotateImage: true

diff --git a/Sources/StreamChatSwiftUI/ChatChannelList/NoChannelsView.swift b/Sources/StreamChatSwiftUI/ChatChannelList/NoChannelsView.swift
@@ -8,10 +8,12 @@ import SwiftUI
 ///
 /// Different view can be injected in its place.
 public struct NoChannelsView: View {
+
+    @Injected(\.images) private var images
 
     public var body: some View {
         NoContentView(
-            imageName: "message",
+            image: images.noContent,
             title: L10n.Channel.NoContent.title,
             description: L10n.Channel.NoContent.message,
             shouldRotateImage: true

diff --git a/Sources/StreamChatSwiftUI/ChatThreadList/NoThreadsView.swift b/Sources/StreamChatSwiftUI/ChatThreadList/NoThreadsView.swift
@@ -6,12 +6,14 @@ import SwiftUI
 
 /// Default SDK implementation for the view displayed when there are no threads available.
 public struct NoThreadsView: View {
+
+    @Injected(\.images) private var images
 
     public init() {}
 
     public var body: some View {
         NoContentView(
-            imageName: "text.bubble",
+            image: images.noThreads,
             title: nil,
             description: L10n.Thread.NoContent.message,
             shouldRotateImage: false

diff --git a/Sources/StreamChatSwiftUI/CommonViews/NoContentView.swift b/Sources/StreamChatSwiftUI/CommonViews/NoContentView.swift
@@ -10,22 +10,25 @@ struct NoContentView: View {
     @Injected(\.fonts) private var fonts
     @Injected(\.colors) private var colors
 
-    var imageName: String
+    var image: UIImage
     var title: String?
     var description: String
     var shouldRotateImage: Bool = false
+    var size: CGSize = CGSize(width: 100, height: 100)
 
     public var body: some View {
         VStack(spacing: 8) {
             Spacer()
 
             VStack(spacing: 8) {
-                Image(systemName: imageName)
+                Image(uiImage: image)
+                    .resizable()
+                    .renderingMode(.template)
+                    .aspectRatio(contentMode: .fit)
+                    .frame(width: size.width, height: size.height)
                     .rotation3DEffect(
                         shouldRotateImage ? .degrees(180) : .zero, axis: (x: 0, y: 1, z: 0)
                     )
-                    .aspectRatio(contentMode: .fit)
-                    .font(.system(size: 100))
                     .foregroundColor(Color(colors.textLowEmphasis))
                 title.map { Text($0) }
                     .font(fonts.bodyBold)

diff --git a/Sources/StreamChatSwiftUI/Images.swift b/Sources/StreamChatSwiftUI/Images.swift
@@ -278,4 +278,19 @@ public class Images {
     // MARK: - Threads
 
     public var threadIcon: UIImage = UIImage(systemName: "text.bubble")!
+
+    // MARK: - No Content Icons
+
+    public var noContent: UIImage = UIImage(
+        systemName: "message",
+        withConfiguration: UIImage.SymbolConfiguration(pointSize: 100, weight: .regular)
+    ) ?? UIImage.circleImage
+    public var noMedia: UIImage = UIImage(
+        systemName: "folder",
+        withConfiguration: UIImage.SymbolConfiguration(pointSize: 100, weight: .regular)
+    ) ?? UIImage.circleImage
+    public var noThreads: UIImage = UIImage(
+        systemName: "text.bubble",
+        withConfiguration: UIImage.SymbolConfiguration(pointSize: 100, weight: .regular)
+    ) ?? UIImage.circleImage
 }
diff --git a/StreamChatSwiftUITests/Tests/ChatChannel/ChannelInfo/FileAttachmentsView_Tests.swift b/StreamChatSwiftUITests/Tests/ChatChannel/ChannelInfo/FileAttachmentsView_Tests.swift
@@ -42,7 +42,7 @@ class FileAttachmentsView_Tests: StreamChatTestCase {
             .applyDefaultSize()
 
         // Then
-        assertSnapshot(matching: view, as: .image(perceptualPrecision: precision))
+        AssertSnapshot(view, size: defaultScreenSize)
     }
 
     func test_fileAttachmentsView_loadingSnapshot() {

diff --git a/StreamChatSwiftUITests/Tests/ChatChannel/ChannelInfo/MediaAttachmentsView_Tests.swift b/StreamChatSwiftUITests/Tests/ChatChannel/ChannelInfo/MediaAttachmentsView_Tests.swift
@@ -43,7 +43,7 @@ class MediaAttachmentsView_Tests: StreamChatTestCase {
             .applyDefaultSize()
 
         // Then
-        assertSnapshot(matching: view, as: .image(perceptualPrecision: precision))
+        AssertSnapshot(view, size: .defaultAvatarSize)
     }
 
     func test_mediaAttachmentsView_loading() {

diff --git a/StreamChatSwiftUITests/Tests/ChatChannel/ChannelInfo/PinnedMessagesView_Tests.swift b/StreamChatSwiftUITests/Tests/ChatChannel/ChannelInfo/PinnedMessagesView_Tests.swift
@@ -118,7 +118,7 @@ class PinnedMessagesView_Tests: StreamChatTestCase {
             .applyDefaultSize()
 
         // Then
-        assertSnapshot(matching: view, as: .image(perceptualPrecision: precision))
+        AssertSnapshot(view, size: defaultScreenSize)
     }
 }
 

diff --git a/...pshots__/FileAttachmentsView_Tests/test_fileAttachmentsView_emptySnapshot.1.png b/...pshots__/FileAttachmentsView_Tests/test_fileAttachmentsView_emptySnapshot.1.png
diff --git a/...eAttachmentsView_Tests/test_fileAttachmentsView_emptySnapshot.default-light.png b/...eAttachmentsView_Tests/test_fileAttachmentsView_emptySnapshot.default-light.png
diff --git a/...iew_Tests/test_fileAttachmentsView_emptySnapshot.extraExtraExtraLarge-light.png b/...iew_Tests/test_fileAttachmentsView_emptySnapshot.extraExtraExtraLarge-light.png
diff --git a/...View_Tests/test_fileAttachmentsView_emptySnapshot.rightToLeftLayout-default.png b/...View_Tests/test_fileAttachmentsView_emptySnapshot.rightToLeftLayout-default.png
diff --git a/...FileAttachmentsView_Tests/test_fileAttachmentsView_emptySnapshot.small-dark.png b/...FileAttachmentsView_Tests/test_fileAttachmentsView_emptySnapshot.small-dark.png
diff --git a/...hots__/MediaAttachmentsView_Tests/test_mediaAttachmentsView_emptySnapshot.1.png b/...hots__/MediaAttachmentsView_Tests/test_mediaAttachmentsView_emptySnapshot.1.png
diff --git a/...AttachmentsView_Tests/test_mediaAttachmentsView_emptySnapshot.default-light.png b/...AttachmentsView_Tests/test_mediaAttachmentsView_emptySnapshot.default-light.png
diff --git a/...ew_Tests/test_mediaAttachmentsView_emptySnapshot.extraExtraExtraLarge-light.png b/...ew_Tests/test_mediaAttachmentsView_emptySnapshot.extraExtraExtraLarge-light.png
diff --git a/...iew_Tests/test_mediaAttachmentsView_emptySnapshot.rightToLeftLayout-default.png b/...iew_Tests/test_mediaAttachmentsView_emptySnapshot.rightToLeftLayout-default.png
diff --git a/...diaAttachmentsView_Tests/test_mediaAttachmentsView_emptySnapshot.small-dark.png b/...diaAttachmentsView_Tests/test_mediaAttachmentsView_emptySnapshot.small-dark.png
diff --git a/...napshots__/PinnedMessagesView_Tests/test_pinnedMessagesView_emptySnapshot.1.png b/...napshots__/PinnedMessagesView_Tests/test_pinnedMessagesView_emptySnapshot.1.png
diff --git a/...innedMessagesView_Tests/test_pinnedMessagesView_emptySnapshot.default-light.png b/...innedMessagesView_Tests/test_pinnedMessagesView_emptySnapshot.default-light.png
diff --git a/...View_Tests/test_pinnedMessagesView_emptySnapshot.extraExtraExtraLarge-light.png b/...View_Tests/test_pinnedMessagesView_emptySnapshot.extraExtraExtraLarge-light.png
diff --git a/...sView_Tests/test_pinnedMessagesView_emptySnapshot.rightToLeftLayout-default.png b/...sView_Tests/test_pinnedMessagesView_emptySnapshot.rightToLeftLayout-default.png
diff --git a/..._/PinnedMessagesView_Tests/test_pinnedMessagesView_emptySnapshot.small-dark.png b/..._/PinnedMessagesView_Tests/test_pinnedMessagesView_emptySnapshot.small-dark.png
diff --git a/...apshots__/ChatChannelHeader_Tests/test_chatChannelHeaderModifier_snapshot.1.png b/...apshots__/ChatChannelHeader_Tests/test_chatChannelHeaderModifier_snapshot.1.png
diff --git a/...nel/__Snapshots__/ChatChannelHeader_Tests/test_chatChannelHeader_snapshot.1.png b/...nel/__Snapshots__/ChatChannelHeader_Tests/test_chatChannelHeader_snapshot.1.png
diff --git a/...napshots__/ChatChannelViewDateOverlay_Tests/test_chatChannelView_snapshot.1.png b/...napshots__/ChatChannelViewDateOverlay_Tests/test_chatChannelView_snapshot.1.png
diff --git a/...Channel/__Snapshots__/ChatChannelView_Tests/test_chatChannelView_snapshot.1.png b/...Channel/__Snapshots__/ChatChannelView_Tests/test_chatChannelView_snapshot.1.png
diff --git a/...el/__Snapshots__/ChatChannelView_Tests/test_chatChannelView_snapshotEmpty.1.png b/...el/__Snapshots__/ChatChannelView_Tests/test_chatChannelView_snapshotEmpty.1.png
diff --git a/...el/__Snapshots__/ChatChannelView_Tests/test_defaultChannelHeader_snapshot.1.png b/...el/__Snapshots__/ChatChannelView_Tests/test_defaultChannelHeader_snapshot.1.png
diff --git a/...s__/MessageListViewLastGroupHeader_Tests/test_messageListView_headerOnTop.1.png b/...s__/MessageListViewLastGroupHeader_Tests/test_messageListView_headerOnTop.1.png
diff --git a/...ew_Tests/test_messageViewVoiceRecordingFromMeTheming_snapshot.default-light.png b/...ew_Tests/test_messageViewVoiceRecordingFromMeTheming_snapshot.default-light.png
diff --git a/...ssageView_Tests/test_messageViewVoiceRecordingFromMe_snapshot.default-light.png b/...ssageView_Tests/test_messageViewVoiceRecordingFromMe_snapshot.default-light.png
diff --git a/...ts/test_messageViewVoiceRecordingFromMe_snapshot.extraExtraExtraLarge-light.png b/...ts/test_messageViewVoiceRecordingFromMe_snapshot.extraExtraExtraLarge-light.png
diff --git a/...sts/test_messageViewVoiceRecordingFromMe_snapshot.rightToLeftLayout-default.png b/...sts/test_messageViewVoiceRecordingFromMe_snapshot.rightToLeftLayout-default.png
diff --git a/.../MessageView_Tests/test_messageViewVoiceRecordingFromMe_snapshot.small-dark.png b/.../MessageView_Tests/test_messageViewVoiceRecordingFromMe_snapshot.small-dark.png
diff --git a/..._Tests/test_messageViewVoiceRecordingFromParticipant_snapshot.default-light.png b/..._Tests/test_messageViewVoiceRecordingFromParticipant_snapshot.default-light.png
diff --git a/...essageViewVoiceRecordingFromParticipant_snapshot.extraExtraExtraLarge-light.png b/...essageViewVoiceRecordingFromParticipant_snapshot.extraExtraExtraLarge-light.png
diff --git a/...messageViewVoiceRecordingFromParticipant_snapshot.rightToLeftLayout-default.png b/...messageViewVoiceRecordingFromParticipant_snapshot.rightToLeftLayout-default.png
diff --git a/...iew_Tests/test_messageViewVoiceRecordingFromParticipant_snapshot.small-dark.png b/...iew_Tests/test_messageViewVoiceRecordingFromParticipant_snapshot.small-dark.png
diff --git a/...test_messageViewVoiceRecordingWithTextFromMeMultiple_snapshot.default-light.png b/...test_messageViewVoiceRecordingWithTextFromMeMultiple_snapshot.default-light.png
diff --git a/...iewVoiceRecordingWithTextFromMeMultiple_snapshot.extraExtraExtraLarge-light.png b/...iewVoiceRecordingWithTextFromMeMultiple_snapshot.extraExtraExtraLarge-light.png
diff --git a/...ViewVoiceRecordingWithTextFromMeMultiple_snapshot.rightToLeftLayout-default.png b/...ViewVoiceRecordingWithTextFromMeMultiple_snapshot.rightToLeftLayout-default.png
diff --git a/...ts/test_messageViewVoiceRecordingWithTextFromMeMultiple_snapshot.small-dark.png b/...ts/test_messageViewVoiceRecordingWithTextFromMeMultiple_snapshot.small-dark.png
diff --git a/...w_Tests/test_messageViewVoiceRecordingWithTextFromMe_snapshot.default-light.png b/...w_Tests/test_messageViewVoiceRecordingWithTextFromMe_snapshot.default-light.png
diff --git a/...messageViewVoiceRecordingWithTextFromMe_snapshot.extraExtraExtraLarge-light.png b/...messageViewVoiceRecordingWithTextFromMe_snapshot.extraExtraExtraLarge-light.png
diff --git a/..._messageViewVoiceRecordingWithTextFromMe_snapshot.rightToLeftLayout-default.png b/..._messageViewVoiceRecordingWithTextFromMe_snapshot.rightToLeftLayout-default.png
diff --git a/...View_Tests/test_messageViewVoiceRecordingWithTextFromMe_snapshot.small-dark.png b/...View_Tests/test_messageViewVoiceRecordingWithTextFromMe_snapshot.small-dark.png
diff --git a/...ageViewVoiceRecordingWithTextFromParticipantMultiple_snapshot.default-light.png b/...ageViewVoiceRecordingWithTextFromParticipantMultiple_snapshot.default-light.png
diff --git a/...ecordingWithTextFromParticipantMultiple_snapshot.extraExtraExtraLarge-light.png b/...ecordingWithTextFromParticipantMultiple_snapshot.extraExtraExtraLarge-light.png
diff --git a/...RecordingWithTextFromParticipantMultiple_snapshot.rightToLeftLayout-default.png b/...RecordingWithTextFromParticipantMultiple_snapshot.rightToLeftLayout-default.png
diff --git a/...essageViewVoiceRecordingWithTextFromParticipantMultiple_snapshot.small-dark.png b/...essageViewVoiceRecordingWithTextFromParticipantMultiple_snapshot.small-dark.png
diff --git a/...est_messageViewVoiceRecordingWithTextFromParticipant_snapshot.default-light.png b/...est_messageViewVoiceRecordingWithTextFromParticipant_snapshot.default-light.png
diff --git a/...ewVoiceRecordingWithTextFromParticipant_snapshot.extraExtraExtraLarge-light.png b/...ewVoiceRecordingWithTextFromParticipant_snapshot.extraExtraExtraLarge-light.png
diff --git a/...iewVoiceRecordingWithTextFromParticipant_snapshot.rightToLeftLayout-default.png b/...iewVoiceRecordingWithTextFromParticipant_snapshot.rightToLeftLayout-default.png
diff --git a/...s/test_messageViewVoiceRecordingWithTextFromParticipant_snapshot.small-dark.png b/...s/test_messageViewVoiceRecordingWithTextFromParticipant_snapshot.small-dark.png
diff --git a/StreamChatSwiftUITests/Tests/ChatChannelList/NoChannelsView_Tests.swift b/StreamChatSwiftUITests/Tests/ChatChannelList/NoChannelsView_Tests.swift
@@ -15,6 +15,6 @@ class NoChannelsView_Tests: StreamChatTestCase {
             .frame(width: 375, height: 600)
 
         // Then
-        assertSnapshot(matching: view, as: .image)
+        AssertSnapshot(view, size: CGSize(width: 375, height: 600))
     }
 }
diff --git a/...annelList/__Snapshots__/NoChannelsView_Tests/test_noChannelsView_snapshot.1.png b/...annelList/__Snapshots__/NoChannelsView_Tests/test_noChannelsView_snapshot.1.png
diff --git a/...Snapshots__/NoChannelsView_Tests/test_noChannelsView_snapshot.default-light.png b/...Snapshots__/NoChannelsView_Tests/test_noChannelsView_snapshot.default-light.png
diff --git a/...oChannelsView_Tests/test_noChannelsView_snapshot.extraExtraExtraLarge-light.png b/...oChannelsView_Tests/test_noChannelsView_snapshot.extraExtraExtraLarge-light.png
diff --git a/...NoChannelsView_Tests/test_noChannelsView_snapshot.rightToLeftLayout-default.png b/...NoChannelsView_Tests/test_noChannelsView_snapshot.rightToLeftLayout-default.png
diff --git a/.../__Snapshots__/NoChannelsView_Tests/test_noChannelsView_snapshot.small-dark.png b/.../__Snapshots__/NoChannelsView_Tests/test_noChannelsView_snapshot.small-dark.png
diff --git a/...List/__Snapshots__/ChatThreadListView_Tests/test_chatThreadListView_empty.1.png b/...List/__Snapshots__/ChatThreadListView_Tests/test_chatThreadListView_empty.1.png
diff --git a/...ts__/ChatThreadListView_Tests/test_chatThreadListView_errorLoadingThreads.1.png b/...ts__/ChatThreadListView_Tests/test_chatThreadListView_errorLoadingThreads.1.png
-Original file line number
+Diff line change
@@ Expand Up / @@ -118,7 +118,7 @@ class PinnedMessagesView_Tests: StreamChatTestCase { @@
                 .applyDefaultSize()
             // Then
-            assertSnapshot(matching: view, as: .image(perceptualPrecision: precision))
+            AssertSnapshot(view, size: defaultScreenSize)
         }
     }
@@ Expand Down @@