Skip to content

Five improvements for ReaderDetailHeaderView #23909

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Dec 19, 2024
Merged

Five improvements for ReaderDetailHeaderView #23909

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
dc8a9ea
Fix button like animation
kean Dec 18, 2024
e5a0ec5
Hide toolbar on scroll
kean Dec 18, 2024
cd4b73a
Use CachedAsyncImage
kean Dec 18, 2024
5e75b72
Fix subscribe button position and header layout issues
kean Dec 18, 2024
a3a3f09
Rename ReaderDetailHeaderView
kean Dec 18, 2024
60165f7
Update release notes
kean Dec 19, 2024
8e924e6
Merge branch 'trunk' into fix/reader-details-issues-minor
kean Dec 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions RELEASE-NOTES.txt
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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