Skip to content

Commit de3bf0b

Browse files
keankean
authored
Five improvements for ReaderDetailHeaderView (#23909)
* Fix button like animation * Hide toolbar on scroll * Use CachedAsyncImage * Fix subscribe button position and header layout issues * Rename ReaderDetailHeaderView * Update release notes
1 parent fbf817b commit de3bf0b

File tree

5 files changed

+89
-141
lines changed

5 files changed

+89
-141
lines changed

‎RELEASE-NOTES.txt‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,17 @@
77
* [**] Enhance the Gravatar Quick Editor by adding features that allow users to delete and share their avatars. [#23868]
88
* [**] Add the capability to create an avatar using Apple Image Playground through the Gravatar Quick Editor. [#23868]
99
* [*] [internal] Update Gravatar SDK to 3.0.0 [#23701]
10-
* [*] Use the Gravatar Quick Editor to update the avatar [#23729]
1110
* [*] (Hidden under a feature flag) User Management for self-hosted sites. [#23768]
1211
* [*] Add URL and ID to the Media details screen, add IDs for posts [#23887]
13-
* [*] Enable quick access to notifications from Reader on iPad [#23882]
12+
* [*] Reader: Enable quick access to notifications on iPad [#23882]
1413
* [*] Add support for restricted posts in Reader [#23853]
1514
* [*] Fix minor appearance issues in the Blaze campaign list [#23891]
1615
* [*] Improve the sidebar animations and layout on some iPad models [#23886]
17-
* [*] Fix an issue with posts shown embedded in the notifications popover on iPad [#23889]
18-
* [*] Fix a couple of rare crashes in Reader [#23907]
19-
* [*] 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]
20-
* [*] Move the "Reading Preferences" button to the "More" menu [#23897]
16+
* [*] Reader: Fix a couple of rare crashes in Reader [#23907]
17+
* [*] Reader: Fix an issue with posts shown embedded in the notifications popover on iPad [#23889]
18+
* [*] 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]
19+
* [*] Reader: Move the "Reading Preferences" button to the "More" menu [#23897]
20+
* [*] Reader: Hide post toolbar when reading an article and fix like button animations [#23909]
2121

2222
25.5
2323
-----

‎WordPress/Classes/ViewRelated/Reader/Detail/ReaderDetailViewController.storyboard‎

Lines changed: 10 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,14 @@
1818
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
1919
<subviews>
2020
<scrollView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" layoutMarginsFollowReadableWidth="YES" alwaysBounceVertical="YES" translatesAutoresizingMaskIntoConstraints="NO" id="9JA-VQ-zzw">
21-
<rect key="frame" x="0.0" y="48" width="414" height="764"/>
21+
<rect key="frame" x="0.0" y="48" width="414" height="790"/>
2222
<subviews>
2323
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Xyq-y6-zPR">
24-
<rect key="frame" x="0.0" y="0.0" width="446" height="218.5"/>
24+
<rect key="frame" x="0.0" y="0.0" width="446" height="244.5"/>
2525
<color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
2626
</view>
2727
<wkWebView contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="iSu-TI-yew" customClass="ReaderWebView" customModule="WordPress" customModuleProvider="target">
28-
<rect key="frame" x="16" y="234.5" width="414" height="0.0"/>
28+
<rect key="frame" x="16" y="260.5" width="414" height="0.0"/>
2929
<color key="backgroundColor" red="0.36078431370000003" green="0.38823529410000002" blue="0.4039215686" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
3030
<constraints>
3131
<constraint firstAttribute="width" constant="414" placeholder="YES" id="akw-kl-dl7"/>
@@ -38,28 +38,28 @@
3838
</wkWebViewConfiguration>
3939
</wkWebView>
4040
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="qXQ-id-Ffz" userLabel="Likes Container View">
41-
<rect key="frame" x="16" y="234.5" width="414" height="0.0"/>
41+
<rect key="frame" x="16" y="260.5" width="414" height="0.0"/>
4242
<constraints>
4343
<constraint firstAttribute="height" placeholder="YES" id="C8J-Hu-daf"/>
4444
</constraints>
4545
</view>
4646
<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">
47-
<rect key="frame" x="16" y="234.5" width="414" height="0.0"/>
47+
<rect key="frame" x="16" y="260.5" width="414" height="0.0"/>
4848
<color key="backgroundColor" systemColor="systemBackgroundColor"/>
4949
<constraints>
5050
<constraint firstAttribute="height" placeholder="YES" id="hNK-J4-GC2"/>
5151
</constraints>
5252
<sections/>
5353
</tableView>
5454
<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">
55-
<rect key="frame" x="16" y="234.5" width="414" height="0.0"/>
55+
<rect key="frame" x="16" y="260.5" width="414" height="0.0"/>
5656
<color key="backgroundColor" systemColor="systemBackgroundColor"/>
5757
<constraints>
5858
<constraint firstAttribute="height" placeholder="YES" id="tci-Li-Egi"/>
5959
</constraints>
6060
</tableView>
6161
<stackView opaque="NO" contentMode="scaleToFill" axis="vertical" translatesAutoresizingMaskIntoConstraints="NO" id="O4e-BA-8jp">
62-
<rect key="frame" x="16" y="234.5" width="414" height="20.5"/>
62+
<rect key="frame" x="16" y="260.5" width="414" height="20.5"/>
6363
<subviews>
6464
<view clipsSubviews="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Ewc-f7-89P" customClass="ReaderCardDiscoverAttributionView" customModule="WordPress">
6565
<rect key="frame" x="0.0" y="0.0" width="414" height="20.5"/>
@@ -126,29 +126,21 @@
126126
</connections>
127127
</scrollView>
128128
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Qzd-gm-oIu">
129-
<rect key="frame" x="0.0" y="812" width="414" height="50"/>
129+
<rect key="frame" x="0.0" y="838" width="414" height="58"/>
130130
<color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
131131
<constraints>
132-
<constraint firstAttribute="height" constant="50" id="jvh-iQ-g9a"/>
132+
<constraint firstAttribute="height" constant="58" placeholder="YES" id="jvh-iQ-g9a"/>
133133
</constraints>
134134
</view>
135-
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="ERb-e0-U8L">
136-
<rect key="frame" x="0.0" y="862" width="414" height="34"/>
137-
<color key="backgroundColor" systemColor="systemBackgroundColor"/>
138-
</view>
139135
</subviews>
140136
<viewLayoutGuide key="safeArea" id="Tqp-x3-yXv"/>
141137
<color key="backgroundColor" systemColor="systemBackgroundColor"/>
142138
<constraints>
143-
<constraint firstItem="ERb-e0-U8L" firstAttribute="top" secondItem="Qzd-gm-oIu" secondAttribute="bottom" id="AWw-Um-NsT"/>
144139
<constraint firstItem="Qzd-gm-oIu" firstAttribute="top" secondItem="9JA-VQ-zzw" secondAttribute="bottom" id="BHA-14-Hde"/>
145-
<constraint firstItem="ERb-e0-U8L" firstAttribute="width" secondItem="Qzd-gm-oIu" secondAttribute="width" id="D8P-Xt-kyR"/>
146140
<constraint firstItem="9JA-VQ-zzw" firstAttribute="top" secondItem="Tqp-x3-yXv" secondAttribute="top" id="JMy-49-ddC"/>
147141
<constraint firstItem="9JA-VQ-zzw" firstAttribute="leading" secondItem="Tqp-x3-yXv" secondAttribute="leading" id="KOc-Yv-UWy"/>
148142
<constraint firstItem="Qzd-gm-oIu" firstAttribute="leading" secondItem="Tqp-x3-yXv" secondAttribute="leading" id="PNw-Cb-AvC"/>
149-
<constraint firstAttribute="bottom" secondItem="ERb-e0-U8L" secondAttribute="bottom" id="fPU-nx-gzV"/>
150-
<constraint firstItem="ERb-e0-U8L" firstAttribute="centerX" secondItem="Qzd-gm-oIu" secondAttribute="centerX" id="kuZ-bk-VtY"/>
151-
<constraint firstItem="Tqp-x3-yXv" firstAttribute="bottom" secondItem="Qzd-gm-oIu" secondAttribute="bottom" id="p2r-l3-0Mh"/>
143+
<constraint firstAttribute="bottom" secondItem="Qzd-gm-oIu" secondAttribute="bottom" id="p2r-l3-0Mh"/>
152144
<constraint firstItem="Tqp-x3-yXv" firstAttribute="trailing" secondItem="9JA-VQ-zzw" secondAttribute="trailing" id="u3i-rm-kZv"/>
153145
<constraint firstItem="Tqp-x3-yXv" firstAttribute="trailing" secondItem="Qzd-gm-oIu" secondAttribute="trailing" id="zR2-IL-BwU"/>
154146
</constraints>
@@ -162,8 +154,6 @@
162154
<outlet property="relatedPostsTableView" destination="CpT-U7-bfv" id="Ndh-H4-FlR"/>
163155
<outlet property="scrollView" destination="9JA-VQ-zzw" id="lCO-o1-bLB"/>
164156
<outlet property="toolbarContainerView" destination="Qzd-gm-oIu" id="Esk-Iq-Wbd"/>
165-
<outlet property="toolbarHeightConstraint" destination="jvh-iQ-g9a" id="y6Q-1h-IBP"/>
166-
<outlet property="toolbarSafeAreaView" destination="ERb-e0-U8L" id="sVN-sI-9e5"/>
167157
<outlet property="webView" destination="iSu-TI-yew" id="DQy-Fd-C3y"/>
168158
<outlet property="webViewHeight" destination="ywz-kG-xyW" id="q3p-wI-yeb"/>
169159
</connections>

‎WordPress/Classes/ViewRelated/Reader/Detail/ReaderDetailViewController.swift‎

Lines changed: 40 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,8 @@ class ReaderDetailViewController: UIViewController, ReaderDetailView {
6666
/// Wrapper for the toolbar
6767
@IBOutlet weak var toolbarContainerView: UIView!
6868

69+
private lazy var toolbarHidingConstraint = toolbarContainerView.heightAnchor.constraint(equalToConstant: 0)
70+
6971
/// Wrapper for the Likes summary view
7072
@IBOutlet weak var likesContainerView: UIView!
7173

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

78-
@IBOutlet weak var toolbarHeightConstraint: NSLayoutConstraint!
79-
8080
private let activityIndicator = UIActivityIndicatorView(style: .medium)
8181

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

8585
/// The actual header
86-
private lazy var header: ReaderDetailNewHeaderViewHost = {
86+
private lazy var header: ReaderDetailHeaderHostingView = {
8787
return .init()
8888
}()
8989

9090
/// Bottom toolbar
9191
private let toolbar: ReaderDetailToolbar = .loadFromNib()
92+
private var isToolbarHidden = false
93+
private var lastContentOffset: CGFloat = 0
9294

9395
/// Likes summary view
94-
private let likesSummary: ReaderDetailLikesView = .loadFromNib()
96+
private let likesSummary: ReaderDetailLikesView = .loadFromNib()
9597

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

505507
/// Configure the webview
506508
private func configureWebView() {
509+
scrollView.delegate = self
510+
507511
webView.navigationDelegate = self
508512
}
509513

@@ -657,12 +661,11 @@ class ReaderDetailViewController: UIViewController, ReaderDetailView {
657661
}
658662
toolbar.delegate = coordinator
659663
toolbarContainerView.addSubview(toolbar)
660-
toolbarContainerView.translatesAutoresizingMaskIntoConstraints = false
661664

662-
toolbarContainerView.pinSubviewToAllEdges(toolbar)
663-
toolbarSafeAreaView.backgroundColor = toolbar.backgroundColor
664-
665-
toolbarHeightConstraint.constant = Constants.preferredToolbarHeight
665+
// Unfortunately, this doesn't support self-sizing and dynamic type
666+
toolbar.heightAnchor.constraint(equalToConstant: 58).isActive = true
667+
toolbar.pinEdges([.top, .horizontal])
668+
toolbar.pinEdges(.bottom, to: view.safeAreaLayoutGuide, priority: .init(749)) // Break on hiding
666669
}
667670

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

815818
private enum Constants {
816819
static let margin: CGFloat = UIDevice.isPad() ? 0 : 8
817-
static let preferredToolbarHeight: CGFloat = 58.0
818820
}
819821

820822
// MARK: - Managed object observer
@@ -842,6 +844,34 @@ class ReaderDetailViewController: UIViewController, ReaderDetailView {
842844
}
843845
}
844846

847+
extension ReaderDetailViewController: UIScrollViewDelegate {
848+
func scrollViewDidScroll(_ scrollView: UIScrollView) {
849+
guard traitCollection.horizontalSizeClass == .compact else { return }
850+
851+
let currentOffset = scrollView.contentOffset.y
852+
// Using `safeAreaLayoutGuide.layoutFrame.height` because it doesn't
853+
// change when we extend the scroll view size by hiding the toolbar
854+
if (currentOffset + view.safeAreaLayoutGuide.layoutFrame.height) > likesContainerView.frame.minY {
855+
setToolbarHidden(false, animated: true) // Reached bottom (controls, comments, etc)
856+
} else if currentOffset > lastContentOffset && currentOffset > 0 {
857+
setToolbarHidden(true, animated: true) // Scrolling down
858+
} else if currentOffset < lastContentOffset {
859+
setToolbarHidden(false, animated: false) // Scrolling up
860+
}
861+
lastContentOffset = currentOffset
862+
}
863+
864+
private func setToolbarHidden(_ isHidden: Bool, animated: Bool) {
865+
guard isToolbarHidden != isHidden else { return }
866+
self.isToolbarHidden = isHidden
867+
868+
UIView.animate(withDuration: 0.33, delay: 0.0, options: [.beginFromCurrentState, .allowUserInteraction]) {
869+
self.toolbarHidingConstraint.isActive = isHidden
870+
self.view.layoutIfNeeded()
871+
}
872+
}
873+
}
874+
845875
// MARK: - StoryboardLoadable
846876

847877
extension ReaderDetailViewController: StoryboardLoadable {

0 commit comments

Comments
 (0)