Improve stream headers

Author: kean

WordPress/Classes/ViewRelated/Reader/ReaderBaseHeaderView.swift

@@ -0,0 +1,46 @@
+import UIKit
+import WordPressUI
+
+// A container view for stream headers.
+class ReaderBaseHeaderView: UIView {
+    let contentView = UIView()
+
+    var isCompact: Bool = true {
+        didSet {
+            guard oldValue != isCompact else { return }
+            setNeedsUpdateConstraints()
+        }
+    }
+
+    private var contentViewConstraints: [NSLayoutConstraint] = []
+
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+
+        addSubview(contentView)
+    }
+
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    override func updateConstraints() {
+        NSLayoutConstraint.deactivate(contentViewConstraints)
+        contentViewConstraints = []
+
+        let insets = Self.makeInsets(isCompact: isCompact)
+        contentViewConstraints += contentView.pinEdges(.horizontal, to: isCompact ? self : readableContentGuide, insets: insets)
+        contentViewConstraints += contentView.pinEdges(.vertical, insets: insets)
+
+        super.updateConstraints()
+    }
+
+    static func makeInsets(isCompact: Bool) -> UIEdgeInsets {
+        UIEdgeInsets(
+            top: 4, // To align with the large title on iPad
+            left: isCompact ? 16 : ReaderStreamBaseCell.insets.left, // Align with the text in the feed
+            bottom: 12, // Add spacing below
+            right: 0
+        )
+    }
+}

WordPress/Classes/ViewRelated/Reader/ReaderDiscoverHeaderView.swift

@@ -4,8 +4,8 @@ protocol ReaderDiscoverHeaderViewDelegate: AnyObject {
     func readerDiscoverHeaderView(_ view: ReaderDiscoverHeaderView, didChangeSelection selection: ReaderDiscoverChannel)
 }
 
-final class ReaderDiscoverHeaderView: UIView, UITextViewDelegate {
-    private let titleView = ReaderStreamTitleView(insets: nil)
+final class ReaderDiscoverHeaderView: ReaderBaseHeaderView, UITextViewDelegate {
+    private let titleView = ReaderTitleView()
     private let channelsStackView = UIStackView(spacing: 8, [])
     private var channelViews: [ReaderDiscoverChannelView] = []
 
@@ -22,10 +22,11 @@ final class ReaderDiscoverHeaderView: UIView, UITextViewDelegate {
         scrollView.clipsToBounds = false
         channelsStackView.pinEdges()
         scrollView.heightAnchor.constraint(equalTo: channelsStackView.heightAnchor).isActive = true
+        scrollView.contentInset = UIEdgeInsets(.leading, -10) // Align the "channels"
 
         let stackView = UIStackView(axis: .vertical, spacing: 8, [titleView, scrollView])
-        addSubview(stackView)
-        stackView.pinEdges(insets: ReaderStreamTitleView.preferredInsets)
+        contentView.addSubview(stackView)
+        stackView.pinEdges()
 
         titleView.titleLabel.text = SharedStrings.Reader.discover
         titleView.detailsTextView.attributedText = {

WordPress/Classes/ViewRelated/Reader/ReaderHeaderView.swift

@@ -0,0 +1,30 @@
+import UIKit
+import WordPressUI
+
+final class ReaderHeaderView: ReaderBaseHeaderView {
+    let titleView = ReaderTitleView()
+
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+
+        contentView.addSubview(titleView)
+        titleView.pinEdges()
+    }
+
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+}
+
+extension ReaderHeaderView {
+    static func makeForFollowing() -> ReaderHeaderView {
+        let view = ReaderHeaderView()
+        view.titleView.titleLabel.text = SharedStrings.Reader.recent
+        view.titleView.detailsTextView.text = Strings.followingDetails
+        return view
+    }
+}
+
+private enum Strings {
+    static let followingDetails = NSLocalizedString("reader.following.header.details", value: "Stay current with the blogs you've subscribed to.", comment: "Screen header details")
+}

WordPress/Classes/ViewRelated/Reader/ReaderNavigationCustomTitleView.swift

@@ -0,0 +1,34 @@
+import UIKit
+import WordPressUI
+
+/// A custom replacement for a navigation bar title view.
+final class ReaderNavigationCustomTitleView: UIView {
+    let textLabel = UILabel()
+
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+
+        textLabel.font = WPStyleGuide.navigationBarStandardFont
+        textLabel.alpha = 0
+
+        // The label has to be a subview of the title view because
+        // navigation bar doesn't seem to allow you to change the alpha
+        // of `navigationItem.titleView` itself.
+        addSubview(textLabel)
+        textLabel.pinEdges()
+    }
+
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    func updateAlpha(in scrollView: UIScrollView) {
+        let offsetY = scrollView.contentOffset.y
+        if offsetY < 16 {
+            textLabel.alpha = 0
+        } else {
+            let alpha = (offsetY - 16) / 24
+            textLabel.alpha = max(0, min(1, alpha))
+        }
+    }
+}

WordPress/Classes/ViewRelated/Reader/ReaderPostCell.swift

@@ -51,12 +51,7 @@ final class ReaderPostCell: ReaderStreamBaseCell {
 
     override func updateConstraints() {
         NSLayoutConstraint.deactivate(contentViewConstraints)
-        contentViewConstraints = [
-            view.leadingAnchor.constraint(equalTo: isCompact ? contentView.leadingAnchor : contentView.readableContentGuide.leadingAnchor),
-            view.trailingAnchor.constraint(equalTo: isCompact ? contentView.trailingAnchor : contentView.readableContentGuide.trailingAnchor)
-        ]
-        NSLayoutConstraint.activate(contentViewConstraints)
-
+        contentViewConstraints = view.pinEdges(.horizontal, to: isCompact ? contentView : contentView.readableContentGuide)
         super.updateConstraints()
     }
 }

WordPress/Classes/ViewRelated/Reader/ReaderStreamTitleView.swift

@@ -12,7 +12,7 @@ extension ReaderStreamViewController {
 
     func headerForStream(_ topic: ReaderAbstractTopic?, isLoggedIn: Bool, container: UITableViewController) -> UIView? {
         if let topic, ReaderHelpers.topicIsFollowing(topic) {
-            return ReaderStreamTitleView.makeForFollowing()
+            return ReaderHeaderView.makeForFollowing()
         }
         if let topic,
            let header = headerForStream(topic) {

WordPress/Classes/ViewRelated/Reader/ReaderStreamViewController+Helper.swift

@@ -198,6 +198,13 @@ import AutomatticTracks
 
     var isEmbeddedInDiscover = false
 
+    private var isCompact = true {
+        didSet {
+            guard oldValue != isCompact else { return }
+            didChangeIsCompact(isCompact)
+        }
+    }
+
     // MARK: - Init
 
     /// Convenience method for instantiating an instance of ReaderStreamViewController
@@ -275,6 +282,8 @@ import AutomatticTracks
     override func viewDidLoad() {
         super.viewDidLoad()
 
+        isCompact = traitCollection.horizontalSizeClass == .compact
+
         // Setup Site Blocking Controller
         self.siteBlockingController.delegate = self
 
@@ -353,6 +362,17 @@ import AutomatticTracks
         }
     }
 
+    override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
+        super.traitCollectionDidChange(previousTraitCollection)
+
+        isCompact = traitCollection.horizontalSizeClass == .compact
+    }
+
+    private func didChangeIsCompact(_ isCompact: Bool) {
+        (tableView.tableHeaderView as? ReaderBaseHeaderView)?.isCompact = isCompact
+        tableView.reloadData()
+    }
+
     // MARK: - Topic acquisition
 
     /// Fetches a site topic for the value of the `siteID` property.
@@ -471,6 +491,7 @@ import AutomatticTracks
             headerView.isHidden = tableHeaderView.isHidden
         }
 
+        (headerView as? ReaderBaseHeaderView)?.isCompact = isCompact
         tableView.tableHeaderView = headerView
         streamHeader = headerView as? ReaderStreamHeader
 
@@ -1398,8 +1419,6 @@ extension ReaderStreamViewController: WPTableViewHandlerDelegate {
             return cell
         }
 
-        let isCompact = traitCollection.horizontalSizeClass == .compact
-
         if post.isCross() {
             let cell = tableConfiguration.crossPostCell(tableView)
             cell.isCompact = isCompact

WordPress/Classes/ViewRelated/Reader/ReaderStreamViewController.swift

@@ -0,0 +1,24 @@
+import UIKit
+import WordPressUI
+
+/// A Reader stream header with a large title and a description.
+final class ReaderTitleView: UIView {
+    let titleLabel = UILabel()
+    let detailsTextView = UITextView.makeLabel()
+
+    init() {
+        super.init(frame: .zero)
+
+        titleLabel.font = UIFont.preferredFont(forTextStyle: .largeTitle).withWeight(.bold)
+        detailsTextView.font = UIFont.preferredFont(forTextStyle: .subheadline)
+        detailsTextView.textColor = .secondaryLabel
+
+        let stackView = UIStackView(axis: .vertical, alignment: .leading, [titleLabel, detailsTextView])
+        addSubview(stackView)
+        stackView.pinEdges()
+    }
+
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+}