Skip to content

Commit 2afc61f

Browse files
authored
Merge pull request #5001 from woocommerce/issue/4890-orders-empty-state-alignment-fix
4890 Center empty state in space below top banner
2 parents 0058a77 + 73ae659 commit 2afc61f

File tree

2 files changed

+24
-7
lines changed

2 files changed

+24
-7
lines changed

WooCommerce/Classes/ViewRelated/ReusableViews/EmptyStateViewController/EmptyStateViewController.swift

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,21 @@ final class EmptyStateViewController: UIViewController, KeyboardFrameAdjustmentP
9898
/// Used to present the Contact Support dialog if the `Config` is `.withSupportRequest`.
9999
private let zendeskManager: ZendeskManagerProtocol
100100

101+
/// Used to pin the stackView to the center of the visible area in the contact view,
102+
/// taking account of the banner view when it's shown.
103+
private lazy var visiblyCenteredLayoutGuide: UILayoutGuide = {
104+
let centerGuide = UILayoutGuide()
105+
contentView.addLayoutGuide(centerGuide)
106+
let topConstraint = centerGuide.topAnchor.constraint(equalTo: contentView.topAnchor)
107+
topConstraint.priority = UILayoutPriority(250)
108+
NSLayoutConstraint.activate([
109+
topConstraint,
110+
centerGuide.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
111+
centerGuide.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
112+
centerGuide.trailingAnchor.constraint(equalTo: contentView.trailingAnchor)])
113+
return centerGuide
114+
}()
115+
101116
/// Top banner that shows an error if there is a problem loading reviews data
102117
///
103118
private lazy var topBannerView: TopBannerView = {
@@ -129,6 +144,7 @@ final class EmptyStateViewController: UIViewController, KeyboardFrameAdjustmentP
129144

130145
view.backgroundColor = style.backgroundColor
131146
contentView.backgroundColor = style.backgroundColor
147+
NSLayoutConstraint.activate([stackView.centerYAnchor.constraint(equalTo: visiblyCenteredLayoutGuide.centerYAnchor)])
132148

133149
messageLabel.applySecondaryTitleStyle()
134150
detailsLabel.applySecondaryBodyStyle()
@@ -241,7 +257,8 @@ final class EmptyStateViewController: UIViewController, KeyboardFrameAdjustmentP
241257
topBannerView.leadingAnchor.constraint(equalTo: contentView.safeLeadingAnchor),
242258
topBannerView.trailingAnchor.constraint(equalTo: contentView.safeTrailingAnchor),
243259
topBannerView.topAnchor.constraint(equalTo: contentView.topAnchor),
244-
topBannerView.bottomAnchor.constraint(lessThanOrEqualTo: stackView.topAnchor, constant: -16)
260+
topBannerView.bottomAnchor.constraint(lessThanOrEqualTo: stackView.topAnchor, constant: -16),
261+
visiblyCenteredLayoutGuide.topAnchor.constraint(equalTo: topBannerView.bottomAnchor)
245262
])
246263
}
247264

WooCommerce/Classes/ViewRelated/ReusableViews/EmptyStateViewController/EmptyStateViewController.xib

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<?xml version="1.0" encoding="UTF-8"?>
2-
<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="17701" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
2+
<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="18122" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
33
<device id="retina6_1" orientation="portrait" appearance="light"/>
44
<dependencies>
5-
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17703"/>
5+
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="18093"/>
66
<capability name="Safe area layout guides" minToolsVersion="9.0"/>
77
<capability name="System colors in document resources" minToolsVersion="11.0"/>
88
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
@@ -33,7 +33,7 @@
3333
<rect key="frame" x="0.0" y="0.0" width="414" height="818"/>
3434
<subviews>
3535
<stackView opaque="NO" contentMode="scaleToFill" axis="vertical" alignment="center" spacing="32" translatesAutoresizingMaskIntoConstraints="NO" id="Usx-wg-Fgl">
36-
<rect key="frame" x="58" y="168.5" width="298" height="481.5"/>
36+
<rect key="frame" x="58" y="185.5" width="298" height="447"/>
3737
<subviews>
3838
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="We're sorry, we couldn't find results for &quot;adidas&quot;" textAlignment="center" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="h54-zO-thf">
3939
<rect key="frame" x="0.0" y="0.0" width="298" height="41"/>
@@ -45,14 +45,14 @@
4545
<rect key="frame" x="31" y="73" width="236" height="206"/>
4646
</imageView>
4747
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" textAlignment="center" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="iFj-AP-WfL">
48-
<rect key="frame" x="1.5" y="311" width="295" height="108.5"/>
48+
<rect key="frame" x="0.0" y="311" width="298" height="74"/>
4949
<string key="text">Qui eum est quo et recusandae ut. Hic cupiditate nobis et pariatur quidem dolorum. Doloribus est tempora ipsam eius. Quos ab et aspernatur velit corporis aut rem.</string>
5050
<fontDescription key="fontDescription" style="UICTFontTextStyleBody"/>
5151
<color key="textColor" systemColor="secondaryLabelColor"/>
5252
<nil key="highlightedColor"/>
5353
</label>
5454
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="MHH-Z6-FbG" userLabel="Action Button">
55-
<rect key="frame" x="35" y="451.5" width="228" height="30"/>
55+
<rect key="frame" x="35" y="417" width="228" height="30"/>
5656
<constraints>
5757
<constraint firstAttribute="width" constant="228" id="ytx-Jd-N6j"/>
5858
</constraints>
@@ -69,7 +69,7 @@
6969
<constraint firstAttribute="trailing" secondItem="Usx-wg-Fgl" secondAttribute="trailing" constant="58" id="Ard-YP-Eb1"/>
7070
<constraint firstItem="Usx-wg-Fgl" firstAttribute="leading" secondItem="nZ1-Qr-0N4" secondAttribute="leading" constant="58" id="F8T-gj-c3S"/>
7171
<constraint firstAttribute="bottom" relation="greaterThanOrEqual" secondItem="Usx-wg-Fgl" secondAttribute="bottom" constant="8" id="ItW-Oe-98H"/>
72-
<constraint firstItem="Usx-wg-Fgl" firstAttribute="centerY" secondItem="nZ1-Qr-0N4" secondAttribute="centerY" id="Qwk-Qs-WXi"/>
72+
<constraint firstItem="Usx-wg-Fgl" firstAttribute="centerY" secondItem="nZ1-Qr-0N4" secondAttribute="centerY" placeholder="YES" id="Qwk-Qs-WXi"/>
7373
<constraint firstItem="Usx-wg-Fgl" firstAttribute="top" relation="greaterThanOrEqual" secondItem="nZ1-Qr-0N4" secondAttribute="top" constant="8" id="Z5f-Ai-Dxe"/>
7474
</constraints>
7575
</view>

0 commit comments

Comments
 (0)