[Notification Refresh] Likes and follows notifications header redesign

WordPress/Classes/ViewRelated/Likes/LikesListController.swift

@@ -339,11 +339,6 @@ extension LikesListController: UITableViewDataSource, UITableViewDelegate {
     func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
         tableView.deselectRow(at: indexPath, animated: true)
 
-        if showingNotificationLikes && indexPath.section == Constants.headerSectionIndex {
-            delegate?.didSelectHeader?()
-            return
-        }
-
         guard !isLoadingContent,
               let user = likingUsers[safe: indexPath.row] else {
             return
@@ -370,20 +365,18 @@ private extension LikesListController {
     }
 
     func setupHeaderCell(cell: NoteBlockHeaderTableViewCell, group: FormattableContentGroup) {
-        cell.attributedHeaderTitle = nil
-        cell.attributedHeaderDetails = nil
-
         guard let gravatarBlock: NotificationTextContent = group.blockOfKind(.image),
             let snippetBlock: NotificationTextContent = group.blockOfKind(.text) else {
                 return
         }
 
-        cell.attributedHeaderTitle = formatter.render(content: gravatarBlock, with: HeaderContentStyles())
-        cell.attributedHeaderDetails = formatter.render(content: snippetBlock, with: HeaderDetailsContentStyles())
-
         // Download the Gravatar
         let mediaURL = gravatarBlock.media.first?.mediaURL
-        cell.downloadAuthorAvatar(with: mediaURL)
+        cell.configure(
+            text: snippetBlock.text ?? "",
+            avatarURL: notification?.kind == .commentLike || notification?.kind == .follow ? mediaURL : nil,
+            action: { [weak self] in self?.delegate?.didSelectHeader!() }
+        )
     }
 
     func userCell(for indexPath: IndexPath) -> UITableViewCell {

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

@@ -340,12 +340,20 @@ extension NotificationDetailsViewController {
 
         navigationItem.backBarButtonItem = backButton
 
-        let next = UIButton(type: .custom)
-        next.setImage(.gridicon(.arrowUp), for: .normal)
+        let next = UIButton(type: .system)
+        if let customIcon = UIImage(named: "arrow-up") {
+            next.setImage(customIcon, for: .normal)
+        } else {
+            next.setImage(.gridicon(.arrowUp), for: .normal)
+        }
         next.addTarget(self, action: #selector(nextNotificationWasPressed), for: .touchUpInside)
 
-        let previous = UIButton(type: .custom)
-        previous.setImage(.gridicon(.arrowDown), for: .normal)
+        let previous = UIButton(type: .system)
+        if let customIcon = UIImage(named: "arrow-down") {
+            previous.setImage(customIcon, for: .normal)
+        } else {
+            previous.setImage(.gridicon(.arrowDown), for: .normal)
+        }
         previous.addTarget(self, action: #selector(previousNotificationWasPressed), for: .touchUpInside)
 
         previousNavigationButton = previous
@@ -621,20 +629,18 @@ private extension NotificationDetailsViewController {
         // -   UITableViewCell's taps don't require a Gestures Recognizer. No big deal, but less code!
         //
 
-        cell.attributedHeaderTitle = nil
-        cell.attributedHeaderDetails = nil
-
         guard let gravatarBlock: NotificationTextContent = blockGroup.blockOfKind(.image),
             let snippetBlock: NotificationTextContent = blockGroup.blockOfKind(.text) else {
                 return
         }
 
-        cell.attributedHeaderTitle = formatter.render(content: gravatarBlock, with: HeaderContentStyles())
-        cell.attributedHeaderDetails = formatter.render(content: snippetBlock, with: HeaderDetailsContentStyles())
-
         // Download the Gravatar
         let mediaURL = gravatarBlock.media.first?.mediaURL
-        cell.downloadAuthorAvatar(with: mediaURL)
+        cell.configure(
+            text: snippetBlock.text ?? "",
+            avatarURL: note.kind == .commentLike || note.kind == .follow ? mediaURL : nil,
+            action: { [weak self] in self?.didSelectHeader() }
+        )
     }
 
     func setupFooterCell(_ cell: NoteBlockTextTableViewCell, blockGroup: FormattableContentGroup) {

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

@@ -2,97 +2,37 @@ import Foundation
 import WordPressShared.WPStyleGuide
 import WordPressUI
 import Gravatar
+import SwiftUI
+import DesignSystem
 
 // MARK: - NoteBlockHeaderTableViewCell
 //
 class NoteBlockHeaderTableViewCell: NoteBlockTableViewCell {
-
-    // MARK: - Private
-    private var authorAvatarURL: URL?
-    private typealias Style = WPStyleGuide.Notifications
-
-    // MARK: - IBOutlets
-    @IBOutlet private var authorAvatarImageView: UIImageView!
-    @IBOutlet private var headerTitleLabel: UILabel!
-    @IBOutlet private var headerDetailsLabel: UILabel!
-
-    // MARK: - Public Properties
-    @objc var headerTitle: String? {
-        set {
-            headerTitleLabel.text  = newValue
-        }
-        get {
-            return headerTitleLabel.text
-        }
-    }
-
-    @objc var attributedHeaderTitle: NSAttributedString? {
-        set {
-            headerTitleLabel.attributedText  = newValue
-        }
-        get {
-            return headerTitleLabel.attributedText
-        }
-    }
-
-    @objc var headerDetails: String? {
-        set {
-            headerDetailsLabel.text = newValue
-        }
-        get {
-            return headerDetailsLabel.text
-        }
-    }
-
-    @objc var attributedHeaderDetails: NSAttributedString? {
-        set {
-            headerDetailsLabel.attributedText  = newValue
-        }
-        get {
-            return headerDetailsLabel.attributedText
-        }
+    private var hostViewController: UIHostingController<HeaderView>?
+
+    func configure(text: String, avatarURL: URL?, action: @escaping () -> Void) {
+        let headerView = HeaderView(image: avatarURL, text: text, action: action)
+        hostViewController = UIHostingController(rootView: headerView)
+        guard let hostViewController = hostViewController else { return }
+        hostViewController.view.translatesAutoresizingMaskIntoConstraints = false
+        contentView.addSubview(hostViewController.view)
+        contentView.pinSubviewToAllEdges(hostViewController.view)
     }
+}
 
-    // MARK: - Public Methods
-
-    @objc(downloadAuthorAvatarWithURL:)
-    func downloadAuthorAvatar(with url: URL?) {
-        guard url != authorAvatarURL else {
-            return
-        }
-
-        authorAvatarURL = url
-
-        guard let url = url else {
-            authorAvatarImageView.image = .gravatarPlaceholderImage
-            return
-        }
-
-        if let gravatar = AvatarURL(url: url) {
-            authorAvatarImageView.downloadGravatar(gravatar, placeholder: .gravatarPlaceholderImage, animate: true)
-        } else {
-            authorAvatarImageView.downloadSiteIcon(at: url.absoluteString)
-        }
-    }
-
-    // MARK: - View Methods
-
-    override func awakeFromNib() {
-        super.awakeFromNib()
-
-        accessoryType = .disclosureIndicator
-        backgroundColor = Style.blockBackgroundColor
+private struct HeaderView: View {
+    private let image: URL?
+    private let text: String
+    private let action: () -> Void
 
-        headerTitleLabel.font = Style.headerTitleBoldFont
-        headerTitleLabel.textColor = Style.headerTitleColor
-        headerDetailsLabel.font = Style.headerDetailsRegularFont
-        headerDetailsLabel.textColor = Style.headerDetailsColor
-        authorAvatarImageView.image = .gravatarPlaceholderImage
+    public init(image: URL?, text: String, action: @escaping () -> Void) {
+        self.image = image
+        self.text = text
+        self.action = action
     }
 
-    // MARK: - Overriden Methods
-    override func refreshSeparators() {
-        separatorsView.bottomVisible = true
-        separatorsView.bottomInsets = UIEdgeInsets.zero
+    var body: some View {
+        ContentPreview(image: image != nil ? .init(url: image) : nil, text: text, action: action)
+            .padding(EdgeInsets(top: 16.0, leading: 16.0, bottom: 8.0, trailing: 16.0))
     }
 }

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

@@ -1,12 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="13771" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES">
-    <device id="ipad12_9" orientation="portrait">
-        <adaptation id="fullscreen"/>
-    </device>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="22505" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES">
+    <device id="ipad12_9" orientation="portrait" layout="fullscreen" appearance="light"/>
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="13772"/>
-        <capability name="Constraints to layout margins" minToolsVersion="6.0"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="22504"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <objects>
@@ -16,71 +13,13 @@
             <rect key="frame" x="0.0" y="0.0" width="320" height="70"/>
             <autoresizingMask key="autoresizingMask"/>
             <tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" preservesSuperviewLayoutMargins="YES" layoutMarginsFollowReadableWidth="YES" tableViewCell="xVO-JJ-7hX" id="VpH-7p-vak">
-                <rect key="frame" x="0.0" y="0.0" width="320" height="69.5"/>
+                <rect key="frame" x="0.0" y="0.0" width="320" height="70"/>
                 <autoresizingMask key="autoresizingMask"/>
-                <subviews>
-                    <stackView opaque="NO" contentMode="scaleToFill" alignment="center" spacing="8" translatesAutoresizingMaskIntoConstraints="NO" id="ZNg-sw-Tsx">
-                        <rect key="frame" x="16" y="31" width="288" height="28"/>
-                        <subviews>
-                            <imageView userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="6Fx-cw-9OG" customClass="CircularImageView" customModule="WordPress" customModuleProvider="target">
-                                <rect key="frame" x="0.0" y="0.0" width="37" height="28"/>
-                                <constraints>
-                                    <constraint firstAttribute="height" priority="999" constant="37" id="DMw-1c-pNS"/>
-                                    <constraint firstAttribute="height" priority="999" constant="32" id="KBo-qG-huZ"/>
-                                    <constraint firstAttribute="width" constant="37" id="bQA-lh-KOQ"/>
-                                    <constraint firstAttribute="width" constant="32" id="yaH-Wc-jzV"/>
-                                </constraints>
-                                <variation key="default">
-                                    <mask key="constraints">
-                                        <exclude reference="DMw-1c-pNS"/>
-                                        <exclude reference="bQA-lh-KOQ"/>
-                                    </mask>
-                                </variation>
-                                <variation key="heightClass=regular-widthClass=regular">
-                                    <mask key="constraints">
-                                        <include reference="DMw-1c-pNS"/>
-                                        <exclude reference="KBo-qG-huZ"/>
-                                        <include reference="bQA-lh-KOQ"/>
-                                        <exclude reference="yaH-Wc-jzV"/>
-                                    </mask>
-                                </variation>
-                            </imageView>
-                            <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" translatesAutoresizingMaskIntoConstraints="NO" id="3q1-8d-Ceo">
-                                <rect key="frame" x="45" y="0.0" width="243" height="28"/>
-                                <subviews>
-                                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="1000" verticalCompressionResistancePriority="1000" text="Username" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="rnJ-hn-LCK">
-                                        <rect key="frame" x="0.0" y="0.0" width="243" height="14.5"/>
-                                        <constraints>
-                                            <constraint firstAttribute="height" constant="15" id="C7k-TB-cex"/>
-                                        </constraints>
-                                        <fontDescription key="fontDescription" type="system" pointSize="12"/>
-                                        <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
-                                        <nil key="highlightedColor"/>
-                                    </label>
-                                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="1000" verticalCompressionResistancePriority="1000" text="Snippet" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="wLG-3c-VUY">
-                                        <rect key="frame" x="0.0" y="14.5" width="243" height="13.5"/>
-                                        <fontDescription key="fontDescription" type="system" pointSize="12"/>
-                                        <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
-                                        <nil key="highlightedColor"/>
-                                    </label>
-                                </subviews>
-                            </stackView>
-                        </subviews>
-                    </stackView>
-                </subviews>
-                <constraints>
-                    <constraint firstItem="ZNg-sw-Tsx" firstAttribute="top" secondItem="VpH-7p-vak" secondAttribute="topMargin" id="89G-OR-82M"/>
-                    <constraint firstItem="ZNg-sw-Tsx" firstAttribute="leading" secondItem="VpH-7p-vak" secondAttribute="leadingMargin" id="XzS-gX-ECh"/>
-                    <constraint firstAttribute="bottomMargin" secondItem="ZNg-sw-Tsx" secondAttribute="bottom" id="Y9a-Vh-Zka"/>
-                    <constraint firstAttribute="trailingMargin" secondItem="ZNg-sw-Tsx" secondAttribute="trailing" id="p5F-pK-OIk"/>
-                </constraints>
             </tableViewCellContentView>
             <connections>
-                <outlet property="authorAvatarImageView" destination="6Fx-cw-9OG" id="ETS-oU-Wh6"/>
-                <outlet property="headerDetailsLabel" destination="wLG-3c-VUY" id="wmh-bf-7x6"/>
-                <outlet property="headerTitleLabel" destination="rnJ-hn-LCK" id="juG-RC-LBQ"/>
+                <outlet property="contentView" destination="VpH-7p-vak" id="H2X-OE-SE3"/>
             </connections>
-            <point key="canvasLocation" x="34" y="61"/>
+            <point key="canvasLocation" x="19.921875" y="26.793557833089309"/>
         </tableViewCell>
     </objects>
 </document>

WordPress/Resources/AppImages.xcassets/arrow-down.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "arrow-down.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

WordPress/Resources/AppImages.xcassets/arrow-up.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "arrow-up.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}