[Notifications Refresh] Redesign Likes and Follows details content

Modules/Sources/DesignSystem/Foundation/IconName.swift

@@ -24,6 +24,8 @@ public enum IconName: String, CaseIterable {
 	case arrowUp = "arrow.up"
 	case arrowDown = "arrow.down"
     case vector = "vector"
+	case readerFollow = "reader.follow"
+	case readerFollowing = "reader.following"
 }
 
 // MARK: - Load Image

Modules/Sources/DesignSystem/Foundation/Icons.xcassets/reader.follow.imageset/Contents.json

@@ -0,0 +1,16 @@
+{
+  "images" : [
+    {
+      "filename" : "reader-follow.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  },
+  "properties" : {
+    "preserves-vector-representation" : true,
+    "template-rendering-intent" : "template"
+  }
+}

Modules/Sources/DesignSystem/Foundation/Icons.xcassets/reader.following.imageset/Contents.json

@@ -0,0 +1,16 @@
+{
+  "images" : [
+    {
+      "filename" : "reader-following.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  },
+  "properties" : {
+    "preserves-vector-representation" : true,
+    "template-rendering-intent" : "template"
+  }
+}

WordPress/Classes/ViewRelated/Likes/LikesListController.swift

@@ -403,13 +403,22 @@ private extension LikesListController {
     }
 
     func userCell(for indexPath: IndexPath) -> UITableViewCell {
-        guard let user = likingUsers[safe: indexPath.row],
+        guard let parent = parent,
+              let user = likingUsers[safe: indexPath.row],
               let cell = tableView.dequeueReusableCell(withIdentifier: LikeUserTableViewCell.defaultReuseID) as? LikeUserTableViewCell else {
             DDLogError("Failed dequeueing LikeUserTableViewCell")
             return UITableViewCell()
         }
+        cell.configure(
+            avatarURL: URL(string: user.avatarUrl),
+            username: user.displayName,
+            blog: String(format: Constants.usernameFormat, user.username),
+            onUserClicked: { [weak self] in
+                self?.delegate?.didSelectUser(user, at: indexPath)
+            },
+            parent: parent
+        )
 
-        cell.configure(withUser: user, isLastRow: (indexPath.row == likingUsers.endIndex - 1))
         return cell
     }
 
@@ -429,6 +438,7 @@ private extension LikesListController {
         static let headerSectionIndex = 0
         static let headerRowIndex = 0
         static let numberOfHeaderRows = 1
+        static let usernameFormat = NSLocalizedString("@%1$@", comment: "Label displaying the user's username preceeded by an '@' symbol. %1$@ is a placeholder for the username.")
     }
 
     struct Strings {

WordPress/Classes/ViewRelated/Notifications/Controllers/NotificationDetailsViewController.swift

@@ -355,15 +355,15 @@ extension NotificationDetailsViewController {
     }
 
     func setupMainView() {
-        view.backgroundColor = note.isBadge ? .ungroupedListBackground : .listBackground
+        view.backgroundColor = .ungroupedListBackground
     }
 
     func setupTableView() {
         tableView.separatorStyle            = .none
         tableView.keyboardDismissMode       = .interactive
         tableView.accessibilityIdentifier   = .notificationDetailsTableAccessibilityId
         tableView.accessibilityLabel        = NSLocalizedString("Notification Details Table", comment: "Notifications Details Accessibility Identifier")
-        tableView.backgroundColor           = note.isBadge ? .ungroupedListBackground : .listBackground
+        tableView.backgroundColor           = .ungroupedListBackground
     }
 
     func setupTableViewCells() {
@@ -671,24 +671,37 @@ private extension NotificationDetailsViewController {
 
         let hasHomeURL = userBlock.metaLinksHome != nil
         let hasHomeTitle = userBlock.metaTitlesHome?.isEmpty == false
+        let isFollowEnabled = userBlock.isActionEnabled(id: FollowAction.actionIdentifier())
 
-        cell.accessoryType = hasHomeURL ? .disclosureIndicator : .none
-        cell.name = userBlock.text
-        cell.blogTitle = hasHomeTitle ? userBlock.metaTitlesHome : userBlock.metaLinksHome?.host
-        cell.isFollowEnabled = userBlock.isActionEnabled(id: FollowAction.actionIdentifier())
-        cell.isFollowOn = userBlock.isActionOn(id: FollowAction.actionIdentifier())
-
-        cell.onFollowClick = { [weak self] in
-            self?.followSiteWithBlock(userBlock)
-        }
-
-        cell.onUnfollowClick = { [weak self] in
-            self?.unfollowSiteWithBlock(userBlock)
+        if isFollowEnabled {
+            cell.configure(
+                avatarURL: userBlock.media.first?.mediaURL,
+                username: userBlock.text,
+                blog: hasHomeTitle ? userBlock.metaTitlesHome : userBlock.metaLinksHome?.host,
+                isFollowed: userBlock.isActionOn(id: FollowAction.actionIdentifier()),
+                onUserClicked: { [weak self] in
+                    self?.displayContent(blockGroup)
+                },
+                onFollowClicked: { [weak self] followClicked in
+                    if followClicked {
+                        self?.followSiteWithBlock(userBlock)
+                    } else {
+                        self?.unfollowSiteWithBlock(userBlock)
+                    }
+                },
+                parent: self
+            )
+        } else {
+            cell.configure(
+                avatarURL: userBlock.media.first?.mediaURL,
+                username: userBlock.text,
+                blog: hasHomeTitle ? userBlock.metaTitlesHome : userBlock.metaLinksHome?.host,
+                onUserClicked: { [weak self] in
+                    self?.displayContent(blockGroup)
+                },
+                parent: self
+            )
         }
-
-        // Download the Gravatar
-        let mediaURL = userBlock.media.first?.mediaURL
-        cell.downloadGravatarWithURL(mediaURL)
     }
 
     func setupCommentCell(_ cell: NoteBlockCommentTableViewCell, blockGroup: FormattableContentGroup, at indexPath: IndexPath) {

WordPress/Classes/ViewRelated/Notifications/Views/LikeUserTableViewCell.swift

@@ -1,65 +1,54 @@
 import Foundation
+import SwiftUI
 
 class LikeUserTableViewCell: UITableViewCell, NibReusable {
-
-    // MARK: - Properties
-
-    @IBOutlet weak var gravatarImageView: CircularImageView!
-    @IBOutlet weak var nameLabel: UILabel!
-    @IBOutlet weak var usernameLabel: UILabel!
-    @IBOutlet weak var separatorView: UIView!
-    @IBOutlet weak var separatorHeightConstraint: NSLayoutConstraint!
-    @IBOutlet weak var separatorLeadingConstraint: NSLayoutConstraint!
-    @IBOutlet weak var cellStackViewLeadingConstraint: NSLayoutConstraint!
-
     static let estimatedRowHeight: CGFloat = 80
-    private typealias Style = WPStyleGuide.Notifications
 
-    // MARK: - View
+    private var controller: UIHostingController<NotificationDetailUserView>?
 
-    override func awakeFromNib() {
-        super.awakeFromNib()
-        configureCell()
+    func configure(avatarURL: URL?, username: String?, blog: String?, onUserClicked: @escaping () -> Void, parent: UIViewController) {
+        let view = NotificationDetailUserView(avatarURL: avatarURL, username: username, blog: blog, onUserClicked: onUserClicked)
+        host(view, parent: parent)
     }
 
-    // MARK: - Public Methods
-
-    func configure(withUser user: LikeUser, isLastRow: Bool = false) {
-        nameLabel.text = user.displayName
-        usernameLabel.text = String(format: Constants.usernameFormat, user.username)
-        downloadGravatarWithURL(user.avatarUrl)
-        separatorLeadingConstraint.constant = isLastRow ? 0 : cellStackViewLeadingConstraint.constant
+    func configure(
+        avatarURL: URL?,
+        username: String?,
+        blog: String?,
+        isFollowed: Bool,
+        onUserClicked: @escaping () -> Void,
+        onFollowClicked: @escaping (Bool) -> Void,
+        parent: UIViewController
+    ) {
+        let view = NotificationDetailUserView(
+            avatarURL: avatarURL,
+            username: username,
+            blog: blog,
+            isFollowed: isFollowed,
+            onUserClicked: onUserClicked,
+            onFollowClicked: onFollowClicked
+        )
+        host(view, parent: parent)
     }
 
-}
-
-// MARK: - Private Extension
+    private func host(_ content: NotificationDetailUserView, parent: UIViewController) {
+        if let controller = controller {
+            controller.rootView = content
+            controller.view.layoutIfNeeded()
+        } else {
+            let cellViewController = UIHostingController(rootView: content)
+            controller = cellViewController
 
-private extension LikeUserTableViewCell {
+            parent.addChild(cellViewController)
+            contentView.addSubview(cellViewController.view)
+            cellViewController.view.translatesAutoresizingMaskIntoConstraints = false
+            layout(hostingView: cellViewController.view)
 
-    func configureCell() {
-        nameLabel.textColor = Style.blockTextColor
-        usernameLabel.textColor = .textSubtle
-        backgroundColor = Style.blockBackgroundColor
-        separatorView.backgroundColor = Style.blockSeparatorColor
-        separatorHeightConstraint.constant = .hairlineBorderWidth
-    }
-
-    func downloadGravatarWithURL(_ url: String?) {
-        // Always reset gravatar
-        gravatarImageView.cancelImageDownload()
-        gravatarImageView.image = .gravatarPlaceholderImage
-
-        guard let url = url,
-              let gravatarURL = URL(string: url) else {
-            return
+            cellViewController.didMove(toParent: parent)
         }
-
-        gravatarImageView.downloadImage(from: gravatarURL, placeholderImage: .gravatarPlaceholderImage)
     }
 
-    struct Constants {
-        static let usernameFormat = NSLocalizedString("@%1$@", comment: "Label displaying the user's username preceeded by an '@' symbol. %1$@ is a placeholder for the username.")
+    func layout(hostingView view: UIView) {
+        self.contentView.pinSubviewToAllEdges(view)
     }
-
 }

WordPress/Classes/ViewRelated/Notifications/Views/LikeUserTableViewCell.xib

@@ -1,11 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="17701" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="32700.99.1234" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
     <device id="retina6_1" orientation="portrait" appearance="light"/>
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17703"/>
-        <capability name="Named colors" minToolsVersion="9.0"/>
-        <capability name="System colors in document resources" minToolsVersion="11.0"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="22684"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <objects>
@@ -17,75 +15,8 @@
             <tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" preservesSuperviewLayoutMargins="YES" insetsLayoutMarginsFromSafeArea="NO" tableViewCell="vmg-Uv-oZf" id="AVd-CT-xQi">
                 <rect key="frame" x="0.0" y="0.0" width="435" height="86"/>
                 <autoresizingMask key="autoresizingMask"/>
-                <subviews>
-                    <stackView opaque="NO" contentMode="scaleToFill" alignment="center" spacing="12" translatesAutoresizingMaskIntoConstraints="NO" id="ZWJ-8F-a7O" userLabel="Cell Stack View">
-                        <rect key="frame" x="20" y="12" width="395" height="62"/>
-                        <subviews>
-                            <imageView userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="pe3-Qf-lcv" userLabel="Gravatar Image View" customClass="CircularImageView" customModule="WordPress" customModuleProvider="target">
-                                <rect key="frame" x="0.0" y="8" width="46" height="46"/>
-                                <constraints>
-                                    <constraint firstAttribute="width" secondItem="pe3-Qf-lcv" secondAttribute="height" multiplier="1:1" id="MlL-OM-UpJ"/>
-                                    <constraint firstAttribute="width" constant="46" id="se3-n4-gId"/>
-                                </constraints>
-                            </imageView>
-                            <stackView opaque="NO" contentMode="scaleToFill" verticalHuggingPriority="1000" axis="vertical" alignment="top" translatesAutoresizingMaskIntoConstraints="NO" id="wev-aD-HGJ" userLabel="Label Stack View">
-                                <rect key="frame" x="58" y="12" width="337" height="38.5"/>
-                                <subviews>
-                                    <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="TopLeft" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Name" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontForContentSizeCategory="YES" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="IUe-FJ-l5m" userLabel="Name Label">
-                                        <rect key="frame" x="0.0" y="0.0" width="45" height="20.5"/>
-                                        <fontDescription key="fontDescription" style="UICTFontTextStyleBody"/>
-                                        <color key="textColor" systemColor="darkTextColor"/>
-                                        <nil key="highlightedColor"/>
-                                    </label>
-                                    <label opaque="NO" clipsSubviews="YES" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="@username" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontForContentSizeCategory="YES" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="LDG-hl-sfI" userLabel="Username Label">
-                                        <rect key="frame" x="0.0" y="20.5" width="81.5" height="18"/>
-                                        <fontDescription key="fontDescription" style="UICTFontTextStyleSubhead"/>
-                                        <color key="textColor" name="Gray"/>
-                                        <nil key="highlightedColor"/>
-                                    </label>
-                                </subviews>
-                            </stackView>
-                        </subviews>
-                    </stackView>
-                    <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="7UX-Gg-MNF" userLabel="Separator">
-                        <rect key="frame" x="20" y="85" width="415" height="1"/>
-                        <color key="backgroundColor" systemColor="systemGrayColor"/>
-                        <constraints>
-                            <constraint firstAttribute="height" constant="1" id="mB6-co-8Ym"/>
-                        </constraints>
-                    </view>
-                </subviews>
-                <constraints>
-                    <constraint firstItem="ZWJ-8F-a7O" firstAttribute="leading" secondItem="AVd-CT-xQi" secondAttribute="leading" constant="20" id="GhN-Ib-f12"/>
-                    <constraint firstAttribute="trailing" secondItem="ZWJ-8F-a7O" secondAttribute="trailing" constant="20" id="P9x-je-fd1"/>
-                    <constraint firstAttribute="trailing" secondItem="7UX-Gg-MNF" secondAttribute="trailing" id="aCd-hU-kEG"/>
-                    <constraint firstItem="7UX-Gg-MNF" firstAttribute="leading" secondItem="AVd-CT-xQi" secondAttribute="leading" constant="20" id="kUW-yY-J0j"/>
-                    <constraint firstAttribute="bottom" secondItem="ZWJ-8F-a7O" secondAttribute="bottom" constant="12" id="mWv-qn-qTN"/>
-                    <constraint firstItem="ZWJ-8F-a7O" firstAttribute="top" secondItem="AVd-CT-xQi" secondAttribute="top" constant="12" id="oBa-U2-Pc3"/>
-                    <constraint firstAttribute="bottom" secondItem="7UX-Gg-MNF" secondAttribute="bottom" id="wFA-8X-y0T"/>
-                </constraints>
             </tableViewCellContentView>
-            <connections>
-                <outlet property="cellStackViewLeadingConstraint" destination="GhN-Ib-f12" id="xoY-Yw-dKq"/>
-                <outlet property="gravatarImageView" destination="pe3-Qf-lcv" id="Nm7-aR-dtA"/>
-                <outlet property="nameLabel" destination="IUe-FJ-l5m" id="sey-v1-1fE"/>
-                <outlet property="separatorHeightConstraint" destination="mB6-co-8Ym" id="53f-fU-ylZ"/>
-                <outlet property="separatorLeadingConstraint" destination="kUW-yY-J0j" id="3Yg-OB-oRi"/>
-                <outlet property="separatorView" destination="7UX-Gg-MNF" id="ElU-fs-oMZ"/>
-                <outlet property="usernameLabel" destination="LDG-hl-sfI" id="lAD-3V-QRG"/>
-            </connections>
             <point key="canvasLocation" x="-238.40579710144928" y="-22.098214285714285"/>
         </tableViewCell>
     </objects>
-    <resources>
-        <namedColor name="Gray">
-            <color red="0.39215686274509803" green="0.41176470588235292" blue="0.4392156862745098" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
-        </namedColor>
-        <systemColor name="darkTextColor">
-            <color white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
-        </systemColor>
-        <systemColor name="systemGrayColor">
-            <color red="0.55686274509803924" green="0.55686274509803924" blue="0.57647058823529407" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
-        </systemColor>
-    </resources>
 </document>

WordPress/Classes/ViewRelated/Notifications/Views/NoteBlockHeaderTableViewCell.swift

@@ -13,6 +13,16 @@ class NoteBlockHeaderTableViewCell: NoteBlockTableViewCell {
 
     private var controller: UIHostingController<HeaderView>?
 
+    init() {
+        super.init(style: .default, reuseIdentifier: NoteBlockHeaderTableViewCell.classNameWithoutNamespaces())
+        shouldSetSeparators = false
+    }
+
+    required init?(coder: NSCoder) {
+        super.init(coder: coder)
+        shouldSetSeparators = false
+    }
+
     func configure(post: String, action: @escaping () -> Void, parent: UIViewController) {
         let content = ContentPreview(text: post, action: action)
         host(HeaderView(preview: content), parent: parent)

WordPress/Classes/ViewRelated/Notifications/Views/NoteBlockTableViewCell.swift

@@ -41,6 +41,8 @@ class NoteBlockTableViewCell: WPTableViewCell {
         return view
     }()
 
+    @objc var shouldSetSeparators: Bool = true
+
     // MARK: - Overridden Methods
 
     override func layoutSubviews() {
@@ -50,8 +52,10 @@ class NoteBlockTableViewCell: WPTableViewCell {
 
     override func awakeFromNib() {
         super.awakeFromNib()
-        backgroundView = separatorsView
-        backgroundColor = .listForeground
+        if shouldSetSeparators {
+            backgroundView = separatorsView
+            backgroundColor = .listForeground
+        }
     }
 
     // MARK: - Public API