Fix triple avatar cell vertical alignment

wordpress-mobile · Feb 14, 2024 · 0ee88c7 · 0ee88c7
1 parent 2b1626e
commit 0ee88c7
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 30 deletions.
diff --git a/.../Notifications/Controllers/NotificationsViewController/NotificationsTableHeaderView.swift b/.../Notifications/Controllers/NotificationsViewController/NotificationsTableHeaderView.swift
@@ -63,7 +63,7 @@ final class NotificationsTableHeaderView: UITableViewHeaderFooterView {
         static let textColor = UIColor.DS.Foreground.primary ?? .text
         static let textFont = UIFont.DS.font(.bodyLarge(.emphasized))
         static let layoutMargins = NSDirectionalEdgeInsets(
-            top: Length.Padding.single,
+            top: Length.Padding.double,
             leading: Length.Padding.double,
             bottom: Length.Padding.double,
             trailing: Length.Padding.double

diff --git a/WordPress/Classes/ViewRelated/Views/List/NotificationsList/AvatarsView.swift b/WordPress/Classes/ViewRelated/Views/List/NotificationsList/AvatarsView.swift
@@ -33,6 +33,15 @@ struct AvatarsView: View {
                 return Length.Padding.split/2
             }
         }
+
+        var verticalOffset: CGFloat {
+            switch self {
+            case .single, .double:
+                return 0
+            case .triple:
+                return Length.Padding.large/2
+            }
+        }
     }
 
     private let style: Style
@@ -92,7 +101,6 @@ struct AvatarsView: View {
                     .avatarBorderOverlay()
             }
         }
-        .frame(height: style.diameter)
     }
 
     private func tripleAvatarView(
@@ -116,7 +124,6 @@ struct AvatarsView: View {
                     .avatarBorderOverlay()
             }
         }
-        .frame(height: Length.Padding.large + style.diameter)
     }
 }
 
@@ -150,30 +157,3 @@ private extension View {
         )
     }
 }
-
-#if DEBUG
-#Preview {
-    VStack(spacing: Length.Padding.medium) {
-        AvatarsView(
-            style: .single(
-                URL(string: "https://i.pickadummy.com/index.php?imgsize=40x40")!
-            )
-        )
-        AvatarsView(
-            style: .double(
-                URL(string: "https://i.pickadummy.com/index.php?imgsize=34x34")!,
-                URL(string: "https://i.pickadummy.com/index.php?imgsize=34x34")!
-            )
-        )
-        AvatarsView(
-            style: .init(
-                urls: [
-                    URL(string: "https://i.pickadummy.com/index.php?imgsize=28x28")!,
-                    URL(string: "https://i.pickadummy.com/index.php?imgsize=28x28")!,
-                    URL(string: "https://i.pickadummy.com/index.php?imgsize=28x28")!
-                ]
-            )!
-        )
-    }
-}
-#endif
diff --git a/.../Classes/ViewRelated/Views/List/NotificationsList/NotificationsTableViewCellContent.swift b/.../Classes/ViewRelated/Views/List/NotificationsList/NotificationsTableViewCellContent.swift
@@ -59,6 +59,7 @@ fileprivate extension NotificationsTableViewCellContent {
                 }
                 Spacer()
             }
+            .offset(x: 0, y: info.avatarStyle.verticalOffset)
             .padding(.trailing, Length.Padding.double)
         }
-Original file line number
+Diff line change
@@ Expand Up / @@ -59,6 +59,7 @@ fileprivate extension NotificationsTableViewCellContent { @@
                     }
                     Spacer()
                 }
+                .offset(x: 0, y: info.avatarStyle.verticalOffset)
                 .padding(.trailing, Length.Padding.double)
             }
@@ Expand Down @@