Reader: Improve stream headers (#23730)

* Improve stream headers

* Remove leading inset for channels on iPhone

* Enable accessibility for Reader headers

* Fix background for channels in dark mode

* Fix an issue with Reader menu not using large titles

Author: kean

WordPress/Classes/System/Root View/ReaderPresenter.swift

@@ -40,10 +40,11 @@ final class ReaderPresenter: NSObject, SplitViewDisplayable {
         sidebar.onViewDidLoad = { [weak self] in
             self?.showInitialSelection()
         }
+
         sidebarViewModel.isCompact = true
         sidebarViewModel.restoreSelection(defaultValue: nil)
-        mainNavigationController.navigationBar.prefersLargeTitles = true
         mainNavigationController = UINavigationController(rootViewController: sidebar) // Loads sidebar lazily
+        mainNavigationController.navigationBar.prefersLargeTitles = true
         sidebar.navigationItem.backButtonDisplayMode = .minimal
         return mainNavigationController
     }

WordPress/Classes/ViewRelated/Reader/Cards/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/Controllers/ReaderStreamViewController+Helper.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/Controllers/ReaderStreamViewController.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/Headers/ReaderDiscoverHeaderView.swift

@@ -4,9 +4,10 @@ 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 let scrollView = UIScrollView()
     private var channelViews: [ReaderDiscoverChannelView] = []
 
     private var selectedChannel: ReaderDiscoverChannel?
@@ -16,16 +17,15 @@ final class ReaderDiscoverHeaderView: UIView, UITextViewDelegate {
     override init(frame: CGRect) {
         super.init(frame: frame)
 
-        let scrollView = UIScrollView()
         scrollView.addSubview(channelsStackView)
         scrollView.showsHorizontalScrollIndicator = false
         scrollView.clipsToBounds = false
         channelsStackView.pinEdges()
         scrollView.heightAnchor.constraint(equalTo: channelsStackView.heightAnchor).isActive = true
 
         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 = {
@@ -39,6 +39,8 @@ final class ReaderDiscoverHeaderView: UIView, UITextViewDelegate {
             return details
         }()
         titleView.detailsTextView.delegate = self
+
+        updateStyle()
     }
 
     required init?(coder: NSCoder) {
@@ -60,6 +62,17 @@ final class ReaderDiscoverHeaderView: UIView, UITextViewDelegate {
         refreshChannelViews()
     }
 
+    override func didUpdateIsCompact(_ isCompact: Bool) {
+        super.didUpdateIsCompact(isCompact)
+        updateStyle()
+    }
+
+    private func updateStyle() {
+        scrollView.contentInset = UIEdgeInsets(.leading, isCompact ? 0 : -10) // Align the "channels"
+    }
+
+    // MARK: Channels
+
     private func makeChannelView(_ channel: ReaderDiscoverChannel) -> ReaderDiscoverChannelView {
         let view = ReaderDiscoverChannelView(channel: channel)
         view.button.addAction(UIAction { [weak self] _ in
@@ -119,6 +132,8 @@ private final class ReaderDiscoverChannelView: UIView {
 
         textLabel.font = UIFont.preferredFont(forTextStyle: .subheadline).withWeight(.medium)
         textLabel.text = channel.localizedTitle
+        textLabel.adjustsFontForContentSizeCategory = true
+        textLabel.maximumContentSizeCategory = .accessibilityMedium
 
         backgroundView.clipsToBounds = true
 
@@ -138,7 +153,7 @@ private final class ReaderDiscoverChannelView: UIView {
             backgroundView.backgroundColor = UIColor.label
             textLabel.textColor = UIColor.systemBackground
         } else {
-            backgroundView.backgroundColor = UIColor.opaqueSeparator.withAlphaComponent(0.33)
+            backgroundView.backgroundColor = UIColor(light: UIColor.opaqueSeparator.withAlphaComponent(0.33), dark: UIColor.opaqueSeparator)
             textLabel.textColor = UIColor.label
         }
     }

WordPress/Classes/ViewRelated/Reader/Headers/ReaderStreamTitleView.swift

@@ -0,0 +1,50 @@
+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 }
+            didUpdateIsCompact(isCompact)
+        }
+    }
+
+    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()
+    }
+
+    func didUpdateIsCompact(_ isCompact: Bool) {
+        setNeedsUpdateConstraints()
+    }
+
+    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/ReaderBaseHeaderView.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/ReaderHeaderView.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/ReaderNavigationCustomTitleView.swift

@@ -0,0 +1,27 @@
+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)
+        titleLabel.adjustsFontForContentSizeCategory = true
+
+        detailsTextView.font = UIFont.preferredFont(forTextStyle: .subheadline)
+        detailsTextView.textColor = .secondaryLabel
+        detailsTextView.adjustsFontForContentSizeCategory = true
+
+        let stackView = UIStackView(axis: .vertical, alignment: .leading, [titleLabel, detailsTextView])
+        addSubview(stackView)
+        stackView.pinEdges()
+    }
+
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+}