Room screen header (#86)

* #35 Create `ElementNavigationController` subclass * #35 Add encryption icons * #35 Add avatar and encryption badge image to the room screen view model * #35 Create `RoomHeaderView` class * #35 Replace room title with a RoomHeaderView instance in the toolbar * #35 Add changelog * #35 Introduce `UITestScreenIdentifier` and refactor ui tests * #35 Fix old tests * #35 add some tests for room screen * #35 Use svgs instead of pngs * #35 Fix PR remarks
2026-11-02 21:33:26 +00:00 · 2022-06-21 20:28:42 +03:00
parent ffd3ffa369
commit 7dcd494de8
32 changed files with 347 additions and 51 deletions
@@ -0,0 +1,89 @@
+//
+//  RoomHeaderView.swift
+//  ElementX
+//
+//  Created by Ismail on 21.06.2022.
+//  Copyright © 2022 Element. All rights reserved.
+//
+
+import Foundation
+import SwiftUI
+import Combine
+
+import Introspect
+
+struct RoomHeaderView: View {
+
+    @ObservedObject var context: RoomScreenViewModel.Context
+
+    var body: some View {
+        HStack(spacing: 8) {
+            roomAvatar
+            Text(context.viewState.roomTitle)
+                .font(.element.headline)
+                .accessibilityIdentifier("roomNameLabel")
+        }
+    }
+
+    @ViewBuilder private var roomAvatar: some View {
+        ZStack(alignment: .bottomTrailing) {
+            roomAvatarImage
+                .clipShape(Circle())
+
+            if let encryptionBadge = context.viewState.roomEncryptionBadge {
+                Image(uiImage: encryptionBadge)
+                    .accessibilityIdentifier("encryptionBadgeIcon")
+            }
+        }
+        .frame(width: 32.0, height: 32.0)
+    }
+
+    @ViewBuilder private var roomAvatarImage: some View {
+        if let avatar = context.viewState.roomAvatar {
+            Image(uiImage: avatar)
+                .resizable()
+                .scaledToFill()
+                .accessibilityIdentifier("roomAvatarImage")
+        } else {
+            PlaceholderAvatarImage(firstCharacter: String(context.viewState.roomTitle.first ?? Character("")))
+                .accessibilityIdentifier("roomAvatarPlaceholderImage")
+        }
+    }
+
+}
+
+struct RoomHeaderView_Previews: PreviewProvider {
+    static var previews: some View {
+        bodyPlain.preferredColorScheme(.light)
+        bodyPlain.preferredColorScheme(.dark)
+        bodyEncrypted.preferredColorScheme(.light)
+        bodyEncrypted.preferredColorScheme(.dark)
+    }
+
+    @ViewBuilder
+    static var bodyPlain: some View {
+        let viewModel = RoomScreenViewModel(timelineController: MockRoomTimelineController(),
+                                            timelineViewFactory: RoomTimelineViewFactory(),
+                                            roomName: "Some Room name",
+                                            roomAvatar: Asset.Images.appLogo.image
+        )
+
+        RoomHeaderView(context: viewModel.context)
+            .previewLayout(.sizeThatFits)
+            .padding()
+    }
+
+    @ViewBuilder
+    static var bodyEncrypted: some View {
+        let viewModel = RoomScreenViewModel(timelineController: MockRoomTimelineController(),
+                                            timelineViewFactory: RoomTimelineViewFactory(),
+                                            roomName: "Some Room name",
+                                            roomAvatar: Asset.Images.appLogo.image,
+                                            roomEncryptionBadge: Asset.Images.encryptionTrusted.image
+        )
+
+        RoomHeaderView(context: viewModel.context)
+            .previewLayout(.sizeThatFits)
+            .padding()
+    }
+}