Reader: Update ReaderTagCell to new UI

WordPress/Classes/ViewRelated/Reader/ReaderHelpers.swift

@@ -22,6 +22,8 @@ extension NSNotification.Name {
     static let ReaderUserBlockingWillBegin = NSNotification.Name(rawValue: "ReaderUserBlockingWillBegin")
     // Sent when the user blocking request is complete
     static let ReaderUserBlockingDidEnd = NSNotification.Name(rawValue: "ReaderUserBlockingDidEnd")
+    // Sent when the filter from a feed is updated
+    static let ReaderFilterUpdated = NSNotification.Name(rawValue: "ReaderFilterUpdated")
 }
 
 struct ReaderNotificationKeys {

WordPress/Classes/ViewRelated/Reader/ReaderPost+Display.swift

@@ -24,42 +24,8 @@ extension ReaderPost {
     }
 
     func summaryForDisplay(isPad: Bool = false) -> String? {
-        if featuredImageURLForDisplay() == nil || isPad {
-            let content = contentForDisplay()?
-                .stringByDecodingXMLCharacters()
-                .replacingOccurrences(of: "<br>", with: "\n")
-                .strippingHTML()
-                .replacingOccurrences(of: "^\n+", with: "", options: .regularExpression)
-                .replacingOccurrences(of: "\n{2,}", with: "\n\n", options: .regularExpression)
-                .trim()
-            if let content {
-                let maxContentLength = isPad ? 4000 : 500
-                return String(content.prefix(maxContentLength))
-            }
-        }
-        return contentPreviewForDisplay()
-    }
-
-    func countsForDisplay(isLoggedIn: Bool) -> String? {
-        let likes: String? = {
-            guard isLikesEnabled(isLoggedIn: isLoggedIn),
-                  let count = likeCount()?.intValue,
-                  count > 0 else {
-                return nil
-            }
-            return WPStyleGuide.likeCountForDisplay(count)
-        }()
-        let comments: String? = {
-            guard isCommentsEnabled,
-                  let count = commentCount()?.intValue,
-                  count > 0 else {
-                return nil
-            }
-            return WPStyleGuide.commentCountForDisplay(count)
-        }()
-
-        let countStrings = [likes, comments].compactMap { $0 }
-        return countStrings.count > 0 ? countStrings.joined(separator: " • ") : nil
+        return contentPreviewForDisplay()?
+            .replacingOccurrences(of: "\n{2,}", with: "\n\n", options: .regularExpression)
     }
 
 }

WordPress/Classes/ViewRelated/Reader/ReaderTagCardCell.swift

@@ -84,10 +84,10 @@ class ReaderTagCardCell: UITableViewCell {
     }
 
     struct Constants {
-        static let phoneDefaultCellSize = CGSize(width: 240, height: 297)
-        static let phoneLargeCellSize = CGSize(width: 240, height: 500)
-        static let padDefaultCellSize = CGSize(width: 480, height: 600)
-        static let padLargeCellSize = CGSize(width: 480, height: 900)
+        static let phoneDefaultCellSize = CGSize(width: 300, height: 150)
+        static let phoneLargeCellSize = CGSize(width: 300, height: 300)
+        static let padDefaultCellSize = CGSize(width: 480, height: 206)
+        static let padLargeCellSize = CGSize(width: 480, height: 400)
     }
 
 }

WordPress/Classes/ViewRelated/Reader/ReaderTagCardCell.xib

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <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_12" orientation="portrait" appearance="light"/>
+    <device id="ipad12_9rounded" orientation="portrait" layout="fullscreen" appearance="light"/>
     <dependencies>
         <deployment identifier="iOS"/>
         <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="22684"/>
@@ -12,11 +12,11 @@
         <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
         <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
         <view contentMode="scaleToFill" layoutMarginsFollowReadableWidth="YES" id="iN0-l3-epB" userLabel="Reader Tag Card Cell" customClass="ReaderTagCardCell" customModule="WordPress" customModuleProvider="target">
-            <rect key="frame" x="0.0" y="0.0" width="328" height="359"/>
+            <rect key="frame" x="0.0" y="0.0" width="328" height="256"/>
             <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
             <subviews>
                 <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="gUR-Rt-jPM">
-                    <rect key="frame" x="11.999999999999996" y="24" width="51.666666666666657" height="30"/>
+                    <rect key="frame" x="12" y="24" width="51.5" height="18"/>
                     <inset key="imageEdgeInsets" minX="0.0" minY="0.0" maxX="2.2250738585072014e-308" maxY="0.0"/>
                     <state key="normal" title="Button"/>
                     <buttonConfiguration key="configuration" style="filled" title="Tag"/>
@@ -25,13 +25,15 @@
                     </connections>
                 </button>
                 <collectionView multipleTouchEnabled="YES" contentMode="scaleToFill" bounces="NO" showsHorizontalScrollIndicator="NO" showsVerticalScrollIndicator="NO" bouncesZoom="NO" dataMode="none" translatesAutoresizingMaskIntoConstraints="NO" id="GeQ-Gs-OvG">
-                    <rect key="frame" x="16" y="62" width="296" height="297"/>
+                    <rect key="frame" x="16" y="50" width="296" height="206"/>
                     <color key="backgroundColor" systemColor="systemBackgroundColor"/>
                     <constraints>
-                        <constraint firstAttribute="height" constant="297" id="uTt-pZ-gUW"/>
+                        <constraint firstAttribute="height" constant="150" id="uTt-pZ-gUW">
+                            <variation key="heightClass=regular-widthClass=regular" constant="206"/>
+                        </constraint>
                     </constraints>
-                    <collectionViewFlowLayout key="collectionViewLayout" scrollDirection="horizontal" minimumLineSpacing="10" minimumInteritemSpacing="16" id="0Qb-19-SWX" customClass="AdaptiveCollectionViewFlowLayout" customModule="WordPress" customModuleProvider="target">
-                        <size key="itemSize" width="240" height="297"/>
+                    <collectionViewFlowLayout key="collectionViewLayout" scrollDirection="horizontal" minimumLineSpacing="24" minimumInteritemSpacing="24" id="0Qb-19-SWX" customClass="AdaptiveCollectionViewFlowLayout" customModule="WordPress" customModuleProvider="target">
+                        <size key="itemSize" width="300" height="150"/>
                         <size key="headerReferenceSize" width="0.0" height="0.0"/>
                         <size key="footerReferenceSize" width="50" height="50"/>
                         <inset key="sectionInset" minX="0.0" minY="0.0" maxX="0.0" maxY="0.0"/>

WordPress/Classes/ViewRelated/Reader/ReaderTagCardCellViewModel.swift

@@ -36,6 +36,7 @@ class ReaderTagCardCellViewModel: NSObject {
     let slug: String
     weak var viewDelegate: ReaderTagCardCellViewModelDelegate? = nil
 
+    private let tag: ReaderAbstractTopic
     private let coreDataStack: CoreDataStackSwift
     private weak var parentViewController: UIViewController?
     private weak var collectionView: UICollectionView?
@@ -78,6 +79,7 @@ class ReaderTagCardCellViewModel: NSObject {
          cellSize: @escaping @autoclosure () -> CGSize?) {
         self.parentViewController = parent
         self.slug = tag.slug
+        self.tag = tag
         self.collectionView = collectionView
         self.isLoggedIn = isLoggedIn
         self.viewDelegate = viewDelegate
@@ -115,11 +117,18 @@ class ReaderTagCardCellViewModel: NSObject {
     }
 
     func onTagButtonTapped(source: TagButtonSource) {
-        let controller = ReaderStreamViewController.controllerWithTagSlug(slug)
-        controller.statSource = .tagsFeed
+        switch source {
+        case .footer:
+            let controller = ReaderStreamViewController.controllerWithTagSlug(slug)
+            controller.statSource = .tagsFeed
+            parentViewController?.navigationController?.pushViewController(controller, animated: true)
+        case .header:
+            NotificationCenter.default.post(name: .ReaderFilterUpdated,
+                                            object: nil,
+                                            userInfo: [ReaderNotificationKeys.topic: tag])
+        }
 
         WPAnalytics.track(source.event)
-        parentViewController?.navigationController?.pushViewController(controller, animated: true)
     }
 
     struct Constants {

WordPress/Classes/ViewRelated/Reader/ReaderTagCardEmptyCell.swift

@@ -55,7 +55,7 @@ private struct ReaderTagCardEmptyCellView: View {
     private var iconLength = 32.0
 
     var body: some View {
-        VStack(spacing: .DS.Padding.double) {
+        VStack(spacing: .DS.Padding.single) {
             Image(systemName: "wifi.slash")
                 .resizable()
                 .frame(width: iconLength, height: iconLength)
@@ -64,7 +64,7 @@ private struct ReaderTagCardEmptyCellView: View {
             // added to double the padding between the Image and the VStack.
             Spacer().frame(height: .hairlineBorderWidth)
 
-            VStack(spacing: .DS.Padding.single) {
+            VStack(spacing: .DS.Padding.half) {
                 Text(Strings.title)
                     .font(.callout)
                     .fontWeight(.semibold)
@@ -73,6 +73,7 @@ private struct ReaderTagCardEmptyCellView: View {
                     .font(.callout)
                     .foregroundStyle(.secondary)
                     .multilineTextAlignment(.center)
+                    .fixedSize(horizontal: false, vertical: true)
             }
 
             Button {

WordPress/Classes/ViewRelated/Reader/ReaderTagCell.swift

@@ -10,12 +10,14 @@ class ReaderTagCell: UICollectionViewCell {
     @IBOutlet private weak var postDateLabel: UILabel!
     @IBOutlet private weak var titleLabel: UILabel!
     @IBOutlet private weak var summaryLabel: UILabel!
+    @IBOutlet private weak var featuredImageViewContainer: UIView!
     @IBOutlet private weak var featuredImageView: CachedAnimatedImageView!
-    @IBOutlet private weak var countsLabel: UILabel!
     @IBOutlet private weak var likeButton: UIButton!
     @IBOutlet private weak var menuButton: UIButton!
     @IBOutlet weak var spacerView: UIView!
+    @IBOutlet weak var titleSpacerView: UIView!
     @IBOutlet weak var countsLabelSpacerView: UIView!
+    @IBOutlet private var contentBoundsConstraints: [NSLayoutConstraint]!
 
     private lazy var imageLoader = ImageLoader(imageView: featuredImageView)
     private var viewModel: ReaderTagCellViewModel?
@@ -28,13 +30,17 @@ class ReaderTagCell: UICollectionViewCell {
         headerStackView.addGestureRecognizer(tapGesture)
 
         spacerView.isGhostableDisabled = true
+        titleSpacerView.isGhostableDisabled = true
         countsLabelSpacerView.isGhostableDisabled = true
+
+        updateContentConstraints()
     }
 
     override func prepareForReuse() {
         super.prepareForReuse()
         imageLoader.prepareForReuse()
         resetHiddenViews()
+        updateContentConstraints()
     }
 
     func configure(parent: UIViewController?, post: ReaderPost, isLoggedIn: Bool) {
@@ -80,8 +86,6 @@ private extension ReaderTagCell {
         postDateLabel.textColor = .secondaryLabel
         titleLabel.font = WPStyleGuide.fontForTextStyle(.headline, fontWeight: .semibold)
         summaryLabel.font = WPStyleGuide.fontForTextStyle(.footnote)
-        countsLabel.font = WPStyleGuide.fontForTextStyle(.footnote)
-        countsLabel.textColor = .secondaryLabel
         likeButton.tintColor = .secondaryLabel
         likeButton.titleLabel?.font = WPStyleGuide.fontForTextStyle(.footnote)
         menuButton.tintColor = .secondaryLabel
@@ -90,6 +94,7 @@ private extension ReaderTagCell {
 
     func loadFeaturedImage(with post: ReaderPost) {
         guard let url = post.featuredImageURLForDisplay() else {
+            featuredImageViewContainer.isHidden = true
             featuredImageView.isHidden = true
             return
         }
@@ -105,8 +110,8 @@ private extension ReaderTagCell {
         siteLabel.isHidden = false
         titleLabel.isHidden = false
         summaryLabel.isHidden = false
+        featuredImageViewContainer.isHidden = false
         featuredImageView.isHidden = false
-        countsLabel.isHidden = false
         likeButton.isHidden = false
     }
 
@@ -124,29 +129,30 @@ private extension ReaderTagCell {
         let postDate = post.shortDateForDisplay()
         let postTitle = post.titleForDisplay()
         let postSummary = post.summaryForDisplay(isPad: traitCollection.userInterfaceIdiom == .pad)
-        let postCounts = post.countsForDisplay(isLoggedIn: isLoggedIn)
 
         siteLabel.text = blogName
         postDateLabel.text = postDate
         titleLabel.text = postTitle
         summaryLabel.text = postSummary
-        countsLabel.text = postCounts
 
         siteLabel.isHidden = blogName == nil
         postDateLabel.isHidden = postDate == nil
         titleLabel.isHidden = postTitle == nil
         summaryLabel.isHidden = postSummary == nil
-        countsLabel.isHidden = postCounts == nil
 
         headerStackView.isAccessibilityElement = true
         headerStackView.accessibilityLabel = [blogName, postDate].compactMap { $0 }.joined(separator: ", ")
         headerStackView.accessibilityHint = AccessibilityConstants.siteStackViewHint
         headerStackView.accessibilityTraits = .button
-        countsLabel.accessibilityLabel = postCounts?.replacingOccurrences(of: " • ", with: ", ")
         menuButton.accessibilityLabel = AccessibilityConstants.menuButtonLabel
         menuButton.accessibilityHint = AccessibilityConstants.menuButtonHint
     }
 
+    func updateContentConstraints() {
+        let isExtraLargeCategory = traitCollection.preferredContentSizeCategory >= .extraLarge
+        contentBoundsConstraints.forEach { $0.isActive = !isExtraLargeCategory }
+    }
+
 }
 
 extension ReaderTagCell: GhostableView {