Skip to content

Commit eb9397f

Browse files
staskusstaskus
authored
Stats Traffic: Create Today card (#22433)
2 parents 17df62c + 0dd87d5 commit eb9397f

8 files changed

Lines changed: 61 additions & 38 deletions

File tree

‎WordPress/Classes/ViewRelated/Stats/Extensions/WPStyleGuide+Stats.swift‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import Foundation
22
import Gridicons
3+
import DesignSystem
34

45
extension WPStyleGuide {
56
// MARK: - Styles Used by Stats
@@ -86,6 +87,16 @@ extension WPStyleGuide {
8687
label.numberOfLines = 0
8788
}
8889

90+
static func configureLabelAsCellValueTitle(_ label: UILabel) {
91+
label.font = TextStyle.footnote.uiFont
92+
label.textColor = UIColor.DS.Foreground.secondary
93+
}
94+
95+
static func configureLabelAsCellValue(_ label: UILabel) {
96+
label.font = TextStyle.heading2.uiFont.semibold()
97+
label.textColor = UIColor.DS.Foreground.primary
98+
}
99+
89100
static func configureLabelAsData(_ label: UILabel) {
90101
label.textColor = defaultTextColor
91102
}
@@ -229,7 +240,7 @@ extension WPStyleGuide {
229240
static let separatorColor = UIColor.divider
230241
static let dataBarColor = UIColor.textTertiary
231242
static let separatorHeight: CGFloat = 1.0 / UIScreen.main.scale
232-
static let verticalSeparatorColor = UIColor.neutral(.shade5)
243+
static let verticalSeparatorColor = UIColor.DS.Foreground.quaternary
233244

234245
static let defaultFilterTintColor = UIColor.filterBarSelected
235246
static let tabbedCardFilterTintColor = UIColor.filterBarSelected

‎WordPress/Classes/ViewRelated/Stats/Insights/StatsBaseCell.swift‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import UIKit
2+
import DesignSystem
23

34
class StatsBaseCell: UITableViewCell {
45

@@ -92,7 +93,7 @@ class StatsBaseCell: UITableViewCell {
9293
topConstraint.isActive = false
9394

9495
// Create a new constraint between the stackView containing the heading label and the first item of the existing top constraint
95-
headingBottomConstraint = stackView.bottomAnchor.constraint(equalTo: anchor, constant: -(Metrics.padding + constant))
96+
headingBottomConstraint = stackView.bottomAnchor.constraint(equalTo: anchor, constant: -(Metrics.bottomSpacing + constant))
9697
headingBottomConstraint?.isActive = true
9798
}
9899
}
@@ -176,10 +177,11 @@ class StatsBaseCell: UITableViewCell {
176177
}
177178

178179
enum Metrics {
179-
static let padding: CGFloat = 16.0
180-
static let stackSpacing: CGFloat = 8.0
181-
static let buttonTitleInsets = UIEdgeInsets(top: 0, left: -8.0, bottom: 0, right: 8.0)
182-
static let rtlButtonTitleInsets = UIEdgeInsets(top: 0, left: 8.0, bottom: 0, right: -8.0)
180+
static let padding: CGFloat = Length.Padding.double
181+
static let bottomSpacing: CGFloat = Length.Padding.split
182+
static let stackSpacing: CGFloat = Length.Padding.single
183+
static let buttonTitleInsets = UIEdgeInsets(top: 0, left: -Length.Padding.single, bottom: 0, right: Length.Padding.single)
184+
static let rtlButtonTitleInsets = UIEdgeInsets(top: 0, left: Length.Padding.single, bottom: 0, right: -Length.Padding.single)
183185
}
184186

185187
private enum LocalizedText {

‎WordPress/Classes/ViewRelated/Stats/Insights/StatsLatestPostSummaryInsightsCell.swift‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import UIKit
22
import Gridicons
3+
import DesignSystem
34

45
class StatsLatestPostSummaryInsightsCell: StatsBaseCell, LatestPostSummaryConfigurable {
56
private weak var siteStatsInsightsDelegate: SiteStatsInsightsDelegate?
@@ -140,19 +141,18 @@ class StatsLatestPostSummaryInsightsCell: StatsBaseCell, LatestPostSummaryConfig
140141
let stackView = UIStackView()
141142
stackView.translatesAutoresizingMaskIntoConstraints = false
142143
stackView.axis = .vertical
143-
stackView.spacing = Metrics.statsStackViewVerticalSpacing
144+
stackView.spacing = 0
144145

145146
let topLabel = UILabel()
146-
topLabel.font = UIFont.preferredFont(forTextStyle: .subheadline)
147-
topLabel.textColor = .text
148147
topLabel.text = title
149148
topLabel.adjustsFontSizeToFitWidth = true
149+
topLabel.adjustsFontForContentSizeCategory = true
150+
Style.configureLabelAsCellValueTitle(topLabel)
150151

151-
countLabel.font = Style.insightsCountFont
152-
countLabel.textColor = .text
153152
countLabel.adjustsFontSizeToFitWidth = true
154153
countLabel.adjustsFontForContentSizeCategory = true
155154
countLabel.text = "0"
155+
Style.configureLabelAsCellValue(countLabel)
156156

157157
stackView.addArrangedSubviews([topLabel, countLabel])
158158

@@ -250,13 +250,12 @@ class StatsLatestPostSummaryInsightsCell: StatsBaseCell, LatestPostSummaryConfig
250250
// MARK: - Constants
251251

252252
private enum Metrics {
253-
static let outerStackViewSpacing: CGFloat = 16.0
254-
static let postStackViewHorizontalSpacing: CGFloat = 16.0
255-
static let postStackViewVerticalSpacing: CGFloat = 8.0
256-
static let statsStackViewVerticalSpacing: CGFloat = 8.0
257-
static let createPostButtonInset: CGFloat = 8.0
253+
static let outerStackViewSpacing: CGFloat = Length.Padding.double
254+
static let postStackViewHorizontalSpacing: CGFloat = Length.Padding.double
255+
static let postStackViewVerticalSpacing: CGFloat = Length.Padding.single
256+
static let createPostButtonInset: CGFloat = Length.Padding.single
258257
static let thumbnailSize: CGFloat = 68.0
259-
static let thumbnailCornerRadius: CGFloat = 4.0
258+
static let thumbnailCornerRadius: CGFloat = Length.Padding.half
260259
static let dividerWidth: CGFloat = 1.0
261260
}
262261

‎WordPress/Classes/ViewRelated/Stats/Insights/Two Column Stats/StatsTwoColumnRow.swift‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import UIKit
2+
import DesignSystem
23

34
struct StatsTwoColumnRowData {
45
var leftColumnName: String
@@ -54,10 +55,10 @@ class StatsTwoColumnRow: UIView, NibLoadable, Accessible {
5455
private extension StatsTwoColumnRow {
5556

5657
func applyStyles() {
57-
Style.configureLabelAsCellRowTitle(leftItemLabel)
58-
Style.configureLabelAsCellRowTitle(leftDataLabel)
59-
Style.configureLabelAsCellRowTitle(rightItemLabel)
60-
Style.configureLabelAsCellRowTitle(rightDataLabel)
58+
Style.configureLabelAsCellValueTitle(leftItemLabel)
59+
Style.configureLabelAsCellValue(leftDataLabel)
60+
Style.configureLabelAsCellValueTitle(rightItemLabel)
61+
Style.configureLabelAsCellValue(rightDataLabel)
6162
Style.configureViewAsVerticalSeparator(separatorLine)
6263
}
6364

‎WordPress/Classes/ViewRelated/Stats/Insights/Two Column Stats/StatsTwoColumnRow.xib‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<?xml version="1.0" encoding="UTF-8"?>
2-
<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="14868" 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="22505" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
33
<device id="retina4_7" orientation="portrait" appearance="light"/>
44
<dependencies>
55
<deployment identifier="iOS"/>
6-
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14824"/>
6+
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="22504"/>
77
<capability name="Safe area layout guides" minToolsVersion="9.0"/>
88
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
99
</dependencies>
@@ -15,43 +15,43 @@
1515
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
1616
<subviews>
1717
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="bi9-y4-md7" userLabel="Content View">
18-
<rect key="frame" x="16" y="13" width="410" height="54"/>
18+
<rect key="frame" x="16" y="20" width="410" height="60"/>
1919
<subviews>
2020
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Item Label" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontForContentSizeCategory="YES" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Yot-Wq-heN" userLabel="Left Item Label">
21-
<rect key="frame" x="0.0" y="0.0" width="188.5" height="17.5"/>
21+
<rect key="frame" x="0.0" y="0.0" width="188.5" height="18.5"/>
2222
<fontDescription key="fontDescription" style="UICTFontTextStyleSubhead"/>
2323
<nil key="textColor"/>
2424
<nil key="highlightedColor"/>
2525
</label>
2626
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" verticalCompressionResistancePriority="751" text="9,999" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontForContentSizeCategory="YES" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="p0p-pS-fTZ" userLabel="Left Data Label">
27-
<rect key="frame" x="0.0" y="22.5" width="188.5" height="31.5"/>
27+
<rect key="frame" x="0.0" y="18.5" width="188.5" height="41.5"/>
2828
<fontDescription key="fontDescription" style="UICTFontTextStyleTitle1"/>
2929
<nil key="textColor"/>
3030
<nil key="highlightedColor"/>
3131
</label>
3232
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="RlP-Oc-Euy" userLabel="Separator Line">
33-
<rect key="frame" x="204.5" y="0.0" width="1" height="54"/>
33+
<rect key="frame" x="204.5" y="0.0" width="1" height="60"/>
3434
<color key="backgroundColor" white="0.66666666666666663" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
3535
<constraints>
3636
<constraint firstAttribute="width" constant="1" id="xF1-Zj-Nzk"/>
3737
</constraints>
3838
</view>
3939
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Item Label" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontForContentSizeCategory="YES" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="1cm-aN-woc" userLabel="Right Item Label">
40-
<rect key="frame" x="221.5" y="0.0" width="188.5" height="17.5"/>
40+
<rect key="frame" x="221.5" y="0.0" width="188.5" height="18.5"/>
4141
<fontDescription key="fontDescription" style="UICTFontTextStyleSubhead"/>
4242
<nil key="textColor"/>
4343
<nil key="highlightedColor"/>
4444
</label>
4545
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" verticalCompressionResistancePriority="751" text="9,999" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontForContentSizeCategory="YES" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="uNi-l4-j8C" userLabel="Right Data Label">
46-
<rect key="frame" x="221.5" y="22.5" width="188.5" height="31.5"/>
46+
<rect key="frame" x="221.5" y="18.5" width="188.5" height="41.5"/>
4747
<fontDescription key="fontDescription" style="UICTFontTextStyleTitle1"/>
4848
<nil key="textColor"/>
4949
<nil key="highlightedColor"/>
5050
</label>
5151
</subviews>
5252
<color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
5353
<constraints>
54-
<constraint firstItem="p0p-pS-fTZ" firstAttribute="top" secondItem="Yot-Wq-heN" secondAttribute="bottom" constant="5" id="00O-JM-ViD"/>
54+
<constraint firstItem="p0p-pS-fTZ" firstAttribute="top" secondItem="Yot-Wq-heN" secondAttribute="bottom" id="00O-JM-ViD"/>
5555
<constraint firstItem="Yot-Wq-heN" firstAttribute="top" secondItem="bi9-y4-md7" secondAttribute="top" id="1Kr-gc-dGM"/>
5656
<constraint firstItem="RlP-Oc-Euy" firstAttribute="leading" secondItem="p0p-pS-fTZ" secondAttribute="trailing" constant="16" id="2ld-Nx-oam"/>
5757
<constraint firstItem="p0p-pS-fTZ" firstAttribute="leading" secondItem="bi9-y4-md7" secondAttribute="leading" id="51K-Xh-gb3"/>
@@ -66,20 +66,20 @@
6666
<constraint firstItem="uNi-l4-j8C" firstAttribute="leading" secondItem="RlP-Oc-Euy" secondAttribute="trailing" constant="16" id="r47-FK-9sI"/>
6767
<constraint firstAttribute="trailing" secondItem="uNi-l4-j8C" secondAttribute="trailing" id="sxT-zz-rgD"/>
6868
<constraint firstItem="1cm-aN-woc" firstAttribute="top" secondItem="bi9-y4-md7" secondAttribute="top" id="wm3-Gj-ISo"/>
69-
<constraint firstItem="uNi-l4-j8C" firstAttribute="top" secondItem="1cm-aN-woc" secondAttribute="bottom" constant="5" id="yID-nD-iOT"/>
69+
<constraint firstItem="uNi-l4-j8C" firstAttribute="top" secondItem="1cm-aN-woc" secondAttribute="bottom" id="yID-nD-iOT"/>
7070
<constraint firstAttribute="bottom" secondItem="p0p-pS-fTZ" secondAttribute="bottom" id="zmW-GW-bh0"/>
7171
</constraints>
7272
</view>
7373
</subviews>
74+
<viewLayoutGuide key="safeArea" id="WYW-xm-J1v"/>
7475
<color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
7576
<constraints>
76-
<constraint firstItem="WYW-xm-J1v" firstAttribute="bottom" secondItem="bi9-y4-md7" secondAttribute="bottom" priority="999" constant="13" id="M8E-ae-P7t"/>
77-
<constraint firstItem="bi9-y4-md7" firstAttribute="top" secondItem="WYW-xm-J1v" secondAttribute="top" constant="13" id="RXz-Ne-o29"/>
77+
<constraint firstItem="WYW-xm-J1v" firstAttribute="bottom" secondItem="bi9-y4-md7" secondAttribute="bottom" priority="999" id="M8E-ae-P7t"/>
78+
<constraint firstItem="bi9-y4-md7" firstAttribute="top" secondItem="WYW-xm-J1v" secondAttribute="top" id="RXz-Ne-o29"/>
7879
<constraint firstItem="bi9-y4-md7" firstAttribute="leading" secondItem="WYW-xm-J1v" secondAttribute="leading" constant="16" id="xmp-fo-0J0"/>
7980
<constraint firstItem="WYW-xm-J1v" firstAttribute="trailing" secondItem="bi9-y4-md7" secondAttribute="trailing" constant="16" id="y5n-vr-lkp"/>
8081
</constraints>
8182
<freeformSimulatedSizeMetrics key="simulatedDestinationMetrics"/>
82-
<viewLayoutGuide key="safeArea" id="WYW-xm-J1v"/>
8383
<connections>
8484
<outlet property="leftDataLabel" destination="p0p-pS-fTZ" id="WTT-kI-Ciy"/>
8585
<outlet property="leftItemLabel" destination="Yot-Wq-heN" id="QVR-BB-2I0"/>

‎WordPress/Classes/ViewRelated/Stats/Insights/Two Column Stats/TwoColumnCell.swift‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import UIKit
2+
import DesignSystem
23

34
class TwoColumnCell: StatsBaseCell, NibLoadable, Accessible {
45

@@ -10,6 +11,7 @@ class TwoColumnCell: StatsBaseCell, NibLoadable, Accessible {
1011
@IBOutlet weak var viewMoreLabel: UILabel!
1112
@IBOutlet weak var viewMoreButton: UIButton!
1213
@IBOutlet weak var bottomSeparatorLine: UIView!
14+
@IBOutlet weak var bottomConstraint: NSLayoutConstraint!
1315

1416
private typealias Style = WPStyleGuide.Stats
1517
private var dataRows = [StatsTwoColumnRowData]()
@@ -63,6 +65,12 @@ private extension TwoColumnCell {
6365
Style.configureCell(self)
6466
Style.configureViewAsSeparator(topSeparatorLine)
6567
Style.configureViewAsSeparator(bottomSeparatorLine)
68+
configureSpacing()
69+
}
70+
71+
private func configureSpacing() {
72+
bottomConstraint.constant = Length.Padding.double
73+
rowsStackView.spacing = Length.Padding.single
6674
}
6775

6876
func addRows() {

‎WordPress/Classes/ViewRelated/Stats/Insights/Two Column Stats/TwoColumnCell.xib‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<?xml version="1.0" encoding="UTF-8"?>
2-
<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="21225" 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="22505" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
33
<device id="retina6_1" orientation="portrait" appearance="light"/>
44
<dependencies>
55
<deployment identifier="iOS"/>
6-
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="21207"/>
6+
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="22504"/>
77
<capability name="Safe area layout guides" minToolsVersion="9.0"/>
88
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
99
</dependencies>
@@ -87,6 +87,7 @@
8787
<constraint firstAttribute="trailing" secondItem="Xi5-qb-AP6" secondAttribute="trailing" id="CoM-nd-zod"/>
8888
<constraint firstItem="Cm8-Qw-O9e" firstAttribute="top" secondItem="Xi5-qb-AP6" secondAttribute="bottom" id="Gh9-Ce-AED"/>
8989
<constraint firstAttribute="trailing" secondItem="Cm8-Qw-O9e" secondAttribute="trailing" id="PzX-nO-5NH"/>
90+
<constraint firstAttribute="bottom" relation="greaterThanOrEqual" secondItem="53U-Zk-ZGa" secondAttribute="bottom" constant="16" id="dAN-gY-FfT"/>
9091
<constraint firstItem="Xi5-qb-AP6" firstAttribute="top" secondItem="NTK-eu-Zrd" secondAttribute="bottom" id="iPV-uy-osI"/>
9192
<constraint firstAttribute="trailing" secondItem="NTK-eu-Zrd" secondAttribute="trailing" id="jHo-RQ-WZe"/>
9293
<constraint firstItem="Xi5-qb-AP6" firstAttribute="leading" secondItem="aea-rN-rAD" secondAttribute="leading" id="qSe-fz-ZVi"/>
@@ -95,6 +96,7 @@
9596
</tableViewCellContentView>
9697
<viewLayoutGuide key="safeArea" id="5pF-Tt-Ldy"/>
9798
<connections>
99+
<outlet property="bottomConstraint" destination="dAN-gY-FfT" id="b6R-58-irc"/>
98100
<outlet property="bottomSeparatorLine" destination="Cm8-Qw-O9e" id="aJ6-i9-r5U"/>
99101
<outlet property="rowsStackView" destination="53U-Zk-ZGa" id="T8V-zp-KCA"/>
100102
<outlet property="topConstraint" destination="iPV-uy-osI" id="l7A-y2-I2i"/>

‎WordPress/Classes/ViewRelated/Stats/Shared Views/StatsTotalRow.swift‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -233,8 +233,8 @@ private extension StatsTotalRow {
233233
func applyStyles() {
234234
backgroundColor = .listForeground
235235
contentView.backgroundColor = .listForeground
236-
Style.configureLabelAsCellRowTitle(itemLabel)
237-
Style.configureLabelItemDetail(itemDetailLabel)
236+
Style.configureLabelAsCellValueTitle(itemLabel)
237+
Style.configureLabelAsCellValue(itemDetailLabel)
238238
Style.configureLabelAsData(dataLabel)
239239
Style.configureViewAsSeparator(separatorLine)
240240
Style.configureViewAsSeparator(topExpandedSeparatorLine)

0 commit comments

Comments
 (0)