Skip to content

Commit

Permalink
Five improvements for ReaderDetailHeaderView (#23909)
Browse files Browse the repository at this point in the history 
* Fix button like animation

* Hide toolbar on scroll

* Use CachedAsyncImage

* Fix subscribe button position and header layout issues

* Rename ReaderDetailHeaderView

* Update release notes
  • Loading branch information
@kean
kean authored Dec 19, 2024
1 parent fbf817b commit de3bf0b
Show file tree
Hide file tree
Showing 5 changed files with 89 additions and 141 deletions.
12 changes: 6 additions & 6 deletions RELEASE-NOTES.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,17 @@
* [**] Enhance the Gravatar Quick Editor by adding features that allow users to delete and share their avatars. [#23868]
* [**] Add the capability to create an avatar using Apple Image Playground through the Gravatar Quick Editor. [#23868]
* [*] [internal] Update Gravatar SDK to 3.0.0 [#23701]
* [*] Use the Gravatar Quick Editor to update the avatar [#23729]
* [*] (Hidden under a feature flag) User Management for self-hosted sites. [#23768]
* [*] Add URL and ID to the Media details screen, add IDs for posts [#23887]
* [*] Enable quick access to notifications from Reader on iPad [#23882]
* [*] Reader: Enable quick access to notifications on iPad [#23882]
* [*] Add support for restricted posts in Reader [#23853]
* [*] Fix minor appearance issues in the Blaze campaign list [#23891]
* [*] Improve the sidebar animations and layout on some iPad models [#23886]
* [*] Fix an issue with posts shown embedded in the notifications popover on iPad [#23889]
* [*] Fix a couple of rare crashes in Reader [#23907]
* [*] The post cover now uses the standard aspect ratio for covers, so there is no jumping. There are also a few minor improvements to the layout and animations of the cover [#23897]
* [*] Move the "Reading Preferences" button to the "More" menu [#23897]
* [*] Reader: Fix a couple of rare crashes in Reader [#23907]
* [*] Reader: Fix an issue with posts shown embedded in the notifications popover on iPad [#23889]
* [*] Reader: The post cover now uses the standard aspect ratio for covers, so there is no jumping. There are also a few minor improvements to the layout and animations of the cover and the header [#23897, #23909]
* [*] Reader: Move the "Reading Preferences" button to the "More" menu [#23897]
* [*] Reader: Hide post toolbar when reading an article and fix like button animations [#23909]

25.5
-----
Expand Down
30 changes: 10 additions & 20 deletions WordPress/Classes/ViewRelated/Reader/Detail/ReaderDetailViewController.storyboard
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,14 @@
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<scrollView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" layoutMarginsFollowReadableWidth="YES" alwaysBounceVertical="YES" translatesAutoresizingMaskIntoConstraints="NO" id="9JA-VQ-zzw">
<rect key="frame" x="0.0" y="48" width="414" height="764"/>
<rect key="frame" x="0.0" y="48" width="414" height="790"/>
<subviews>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Xyq-y6-zPR">
<rect key="frame" x="0.0" y="0.0" width="446" height="218.5"/>
<rect key="frame" x="0.0" y="0.0" width="446" height="244.5"/>
<color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</view>
<wkWebView contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="iSu-TI-yew" customClass="ReaderWebView" customModule="WordPress" customModuleProvider="target">
<rect key="frame" x="16" y="234.5" width="414" height="0.0"/>
<rect key="frame" x="16" y="260.5" width="414" height="0.0"/>
<color key="backgroundColor" red="0.36078431370000003" green="0.38823529410000002" blue="0.4039215686" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstAttribute="width" constant="414" placeholder="YES" id="akw-kl-dl7"/>
Expand All @@ -38,28 +38,28 @@
</wkWebViewConfiguration>
</wkWebView>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="qXQ-id-Ffz" userLabel="Likes Container View">
<rect key="frame" x="16" y="234.5" width="414" height="0.0"/>
<rect key="frame" x="16" y="260.5" width="414" height="0.0"/>
<constraints>
<constraint firstAttribute="height" placeholder="YES" id="C8J-Hu-daf"/>
</constraints>
</view>
<tableView clipsSubviews="YES" contentMode="scaleToFill" alwaysBounceVertical="YES" scrollEnabled="NO" dataMode="prototypes" style="plain" separatorStyle="none" allowsSelection="NO" rowHeight="-1" estimatedRowHeight="-1" sectionHeaderHeight="28" sectionFooterHeight="28" translatesAutoresizingMaskIntoConstraints="NO" id="6yS-ZE-nbR" customClass="IntrinsicTableView" customModule="WordPress" customModuleProvider="target">
<rect key="frame" x="16" y="234.5" width="414" height="0.0"/>
<rect key="frame" x="16" y="260.5" width="414" height="0.0"/>
<color key="backgroundColor" systemColor="systemBackgroundColor"/>
<constraints>
<constraint firstAttribute="height" placeholder="YES" id="hNK-J4-GC2"/>
</constraints>
<sections/>
</tableView>
<tableView clipsSubviews="YES" contentMode="scaleToFill" alwaysBounceVertical="YES" dataMode="prototypes" style="plain" separatorStyle="default" rowHeight="-1" estimatedRowHeight="-1" sectionHeaderHeight="28" sectionFooterHeight="28" translatesAutoresizingMaskIntoConstraints="NO" id="CpT-U7-bfv" customClass="IntrinsicTableView" customModule="WordPress" customModuleProvider="target">
<rect key="frame" x="16" y="234.5" width="414" height="0.0"/>
<rect key="frame" x="16" y="260.5" width="414" height="0.0"/>
<color key="backgroundColor" systemColor="systemBackgroundColor"/>
<constraints>
<constraint firstAttribute="height" placeholder="YES" id="tci-Li-Egi"/>
</constraints>
</tableView>
<stackView opaque="NO" contentMode="scaleToFill" axis="vertical" translatesAutoresizingMaskIntoConstraints="NO" id="O4e-BA-8jp">
<rect key="frame" x="16" y="234.5" width="414" height="20.5"/>
<rect key="frame" x="16" y="260.5" width="414" height="20.5"/>
<subviews>
<view clipsSubviews="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Ewc-f7-89P" customClass="ReaderCardDiscoverAttributionView" customModule="WordPress">
<rect key="frame" x="0.0" y="0.0" width="414" height="20.5"/>
Expand Down Expand Up @@ -126,29 +126,21 @@
</connections>
</scrollView>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Qzd-gm-oIu">
<rect key="frame" x="0.0" y="812" width="414" height="50"/>
<rect key="frame" x="0.0" y="838" width="414" height="58"/>
<color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<constraints>
<constraint firstAttribute="height" constant="50" id="jvh-iQ-g9a"/>
<constraint firstAttribute="height" constant="58" placeholder="YES" id="jvh-iQ-g9a"/>
</constraints>
</view>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="ERb-e0-U8L">
<rect key="frame" x="0.0" y="862" width="414" height="34"/>
<color key="backgroundColor" systemColor="systemBackgroundColor"/>
</view>
</subviews>
<viewLayoutGuide key="safeArea" id="Tqp-x3-yXv"/>
<color key="backgroundColor" systemColor="systemBackgroundColor"/>
<constraints>
<constraint firstItem="ERb-e0-U8L" firstAttribute="top" secondItem="Qzd-gm-oIu" secondAttribute="bottom" id="AWw-Um-NsT"/>
<constraint firstItem="Qzd-gm-oIu" firstAttribute="top" secondItem="9JA-VQ-zzw" secondAttribute="bottom" id="BHA-14-Hde"/>
<constraint firstItem="ERb-e0-U8L" firstAttribute="width" secondItem="Qzd-gm-oIu" secondAttribute="width" id="D8P-Xt-kyR"/>
<constraint firstItem="9JA-VQ-zzw" firstAttribute="top" secondItem="Tqp-x3-yXv" secondAttribute="top" id="JMy-49-ddC"/>
<constraint firstItem="9JA-VQ-zzw" firstAttribute="leading" secondItem="Tqp-x3-yXv" secondAttribute="leading" id="KOc-Yv-UWy"/>
<constraint firstItem="Qzd-gm-oIu" firstAttribute="leading" secondItem="Tqp-x3-yXv" secondAttribute="leading" id="PNw-Cb-AvC"/>
<constraint firstAttribute="bottom" secondItem="ERb-e0-U8L" secondAttribute="bottom" id="fPU-nx-gzV"/>
<constraint firstItem="ERb-e0-U8L" firstAttribute="centerX" secondItem="Qzd-gm-oIu" secondAttribute="centerX" id="kuZ-bk-VtY"/>
<constraint firstItem="Tqp-x3-yXv" firstAttribute="bottom" secondItem="Qzd-gm-oIu" secondAttribute="bottom" id="p2r-l3-0Mh"/>
<constraint firstAttribute="bottom" secondItem="Qzd-gm-oIu" secondAttribute="bottom" id="p2r-l3-0Mh"/>
<constraint firstItem="Tqp-x3-yXv" firstAttribute="trailing" secondItem="9JA-VQ-zzw" secondAttribute="trailing" id="u3i-rm-kZv"/>
<constraint firstItem="Tqp-x3-yXv" firstAttribute="trailing" secondItem="Qzd-gm-oIu" secondAttribute="trailing" id="zR2-IL-BwU"/>
</constraints>
Expand All @@ -162,8 +154,6 @@
<outlet property="relatedPostsTableView" destination="CpT-U7-bfv" id="Ndh-H4-FlR"/>
<outlet property="scrollView" destination="9JA-VQ-zzw" id="lCO-o1-bLB"/>
<outlet property="toolbarContainerView" destination="Qzd-gm-oIu" id="Esk-Iq-Wbd"/>
<outlet property="toolbarHeightConstraint" destination="jvh-iQ-g9a" id="y6Q-1h-IBP"/>
<outlet property="toolbarSafeAreaView" destination="ERb-e0-U8L" id="sVN-sI-9e5"/>
<outlet property="webView" destination="iSu-TI-yew" id="DQy-Fd-C3y"/>
<outlet property="webViewHeight" destination="ywz-kG-xyW" id="q3p-wI-yeb"/>
</connections>
Expand Down
50 changes: 40 additions & 10 deletions WordPress/Classes/ViewRelated/Reader/Detail/ReaderDetailViewController.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,8 @@ class ReaderDetailViewController: UIViewController, ReaderDetailView {
/// Wrapper for the toolbar
@IBOutlet weak var toolbarContainerView: UIView!

private lazy var toolbarHidingConstraint = toolbarContainerView.heightAnchor.constraint(equalToConstant: 0)

/// Wrapper for the Likes summary view
@IBOutlet weak var likesContainerView: UIView!

Expand All @@ -75,23 +77,23 @@ class ReaderDetailViewController: UIViewController, ReaderDetailView {
/// Attribution view for Discovery posts
@IBOutlet weak var attributionView: ReaderCardDiscoverAttributionView!

@IBOutlet weak var toolbarHeightConstraint: NSLayoutConstraint!

private let activityIndicator = UIActivityIndicatorView(style: .medium)

/// The actual header
private let featuredImage: ReaderDetailFeaturedImageView = .loadFromNib()

/// The actual header
private lazy var header: ReaderDetailNewHeaderViewHost = {
private lazy var header: ReaderDetailHeaderHostingView = {
return .init()
}()

/// Bottom toolbar
private let toolbar: ReaderDetailToolbar = .loadFromNib()
private var isToolbarHidden = false
private var lastContentOffset: CGFloat = 0

/// Likes summary view
private let likesSummary: ReaderDetailLikesView = .loadFromNib()
private let likesSummary: ReaderDetailLikesView = .loadFromNib()

/// A view that fills the bottom portion outside of the safe area
@IBOutlet weak var toolbarSafeAreaView: UIView!
Expand Down Expand Up @@ -504,6 +506,8 @@ class ReaderDetailViewController: UIViewController, ReaderDetailView {

/// Configure the webview
private func configureWebView() {
scrollView.delegate = self

webView.navigationDelegate = self
}

Expand Down Expand Up @@ -657,12 +661,11 @@ class ReaderDetailViewController: UIViewController, ReaderDetailView {
}
toolbar.delegate = coordinator
toolbarContainerView.addSubview(toolbar)
toolbarContainerView.translatesAutoresizingMaskIntoConstraints = false

toolbarContainerView.pinSubviewToAllEdges(toolbar)
toolbarSafeAreaView.backgroundColor = toolbar.backgroundColor

toolbarHeightConstraint.constant = Constants.preferredToolbarHeight
// Unfortunately, this doesn't support self-sizing and dynamic type
toolbar.heightAnchor.constraint(equalToConstant: 58).isActive = true
toolbar.pinEdges([.top, .horizontal])
toolbar.pinEdges(.bottom, to: view.safeAreaLayoutGuide, priority: .init(749)) // Break on hiding
}

private func configureDiscoverAttribution(_ post: ReaderPost) {
Expand Down Expand Up @@ -814,7 +817,6 @@ class ReaderDetailViewController: UIViewController, ReaderDetailView {

private enum Constants {
static let margin: CGFloat = UIDevice.isPad() ? 0 : 8
static let preferredToolbarHeight: CGFloat = 58.0
}

// MARK: - Managed object observer
Expand Down Expand Up @@ -842,6 +844,34 @@ class ReaderDetailViewController: UIViewController, ReaderDetailView {
}
}

extension ReaderDetailViewController: UIScrollViewDelegate {
func scrollViewDidScroll(_ scrollView: UIScrollView) {
guard traitCollection.horizontalSizeClass == .compact else { return }

let currentOffset = scrollView.contentOffset.y
// Using `safeAreaLayoutGuide.layoutFrame.height` because it doesn't
// change when we extend the scroll view size by hiding the toolbar
if (currentOffset + view.safeAreaLayoutGuide.layoutFrame.height) > likesContainerView.frame.minY {
setToolbarHidden(false, animated: true) // Reached bottom (controls, comments, etc)
} else if currentOffset > lastContentOffset && currentOffset > 0 {
setToolbarHidden(true, animated: true) // Scrolling down
} else if currentOffset < lastContentOffset {
setToolbarHidden(false, animated: false) // Scrolling up
}
lastContentOffset = currentOffset
}

private func setToolbarHidden(_ isHidden: Bool, animated: Bool) {
guard isToolbarHidden != isHidden else { return }
self.isToolbarHidden = isHidden

UIView.animate(withDuration: 0.33, delay: 0.0, options: [.beginFromCurrentState, .allowUserInteraction]) {
self.toolbarHidingConstraint.isActive = isHidden
self.view.layoutIfNeeded()
}
}
}

// MARK: - StoryboardLoadable

extension ReaderDetailViewController: StoryboardLoadable {
Expand Down
Loading

0 comments on commit de3bf0b

Please sign in to comment.