#121 UI tweaks for avatar and display name and preview

element-hq · Jun 29, 2022 · a9eb68f · a9eb68f
1 parent c9906f3
commit a9eb68f
Showing 1 changed file with 45 additions and 34 deletions.
diff --git a/ElementX/Sources/Screens/HomeScreen/View/HomeScreen.swift b/ElementX/Sources/Screens/HomeScreen/View/HomeScreen.swift
@@ -41,6 +41,7 @@ struct HomeScreen: View {
                     Section(ElementL10n.bottomActionPeople) {
                         ForEach(context.viewState.visibleDMs) { room in
                             RoomCell(room: room, context: context)
+                                .listRowBackground(Color.clear)
                         }
                     }
                 }
@@ -55,41 +56,48 @@ struct HomeScreen: View {
         .navigationBarTitleDisplayMode(.inline)
         .toolbar {
             ToolbarItem(placement: .navigationBarLeading) {
-                HStack {
-                    ZStack {
-                        if let avatar = context.viewState.userAvatar {
-                            Button { context.send(viewAction: .tapUserAvatar) } label: {
-                                Image(uiImage: avatar)
-                                    .resizable()
-                                    .scaledToFill()
-                                    .frame(width: 40, height: 40, alignment: .center)
-                                    .mask(Circle())
-                            }
-                        } else {
-                            EmptyView()
-                        }
-                    }
-                    .animation(.default, value: context.viewState.userAvatar)
-                    .transition(.opacity)
-
-                    ZStack {
-                        if let displayName = context.viewState.userDisplayName {
-                            Button { context.send(viewAction: .tapUserAvatar) } label: {
-                                Text(displayName)
-                                    .font(.subheadline)
-                                    .fontWeight(.bold)
-                                    .foregroundColor(.primary)
-                            }
-                        } else {
-                            EmptyView()
-                        }
-                    }
-                    .animation(.default, value: context.viewState.userDisplayName)
-                    .transition(.opacity)
+                HStack(spacing: 0) {
+                    userAvatarImage
+                        .animation(.default, value: context.viewState.userAvatar)
+                        .transition(.opacity)
+
+                    userDisplayNameView
+                        .animation(.default, value: context.viewState.userDisplayName)
+                        .transition(.opacity)
                 }
             }
         }
     }
+
+    @ViewBuilder
+    private var userAvatarImage: some View {
+        if let avatar = context.viewState.userAvatar {
+            Button { context.send(viewAction: .tapUserAvatar) } label: {
+                Image(uiImage: avatar)
+                    .resizable()
+                    .scaledToFill()
+                    .frame(width: 32, height: 32, alignment: .center)
+                    .clipShape(Circle())
+                    .accessibilityIdentifier("userAvatarImage")
+            }
+        } else {
+            EmptyView()
+        }
+    }
+
+    @ViewBuilder
+    private var userDisplayNameView: some View {
+        if let displayName = context.viewState.userDisplayName {
+            Button { context.send(viewAction: .tapUserAvatar) } label: {
+                Text(displayName)
+                    .font(.headline)
+                    .fontWeight(.bold)
+                    .foregroundColor(.primary)
+            }
+        } else {
+            EmptyView()
+        }
+    }
 }
 
 struct RoomCell: View {
@@ -107,7 +115,7 @@ struct RoomCell: View {
                         .resizable()
                         .scaledToFill()
                         .frame(width: 40, height: 40)
-                        .mask(Circle())
+                        .clipShape(Circle())
                 } else {
                     PlaceholderAvatarImage(text: room.displayName ?? room.id)
                         .clipShape(Circle())
@@ -170,11 +178,14 @@ struct HomeScreen_Previews: PreviewProvider {
                              MockRoomSummary(displayName: "Omega", lastMessage: eventBrief)]
 
         viewModel.updateWithRoomSummaries(roomSummaries)
+        viewModel.updateWithUserDisplayName("username")
 
-        if let avatarImage = UIImage(systemName: "person.fill.questionmark") {
+        if let avatarImage = UIImage(systemName: "person.fill") {
             viewModel.updateWithUserAvatar(avatarImage)
         }
 
-        return HomeScreen(context: viewModel.context)
+        return NavigationView {
+            HomeScreen(context: viewModel.context)
+        }
     }
 }