Skip to content

Commit c27ea7c

Browse files
leandroalonsoleandroalonso
authored
Merge pull request #17812 from wordpress-mobile/task/msd_change_table_view_style_to_inset_grouped
Table Views: use `insetGrouped` style
2 parents ff99766 + 40c5008 commit c27ea7c

File tree

38 files changed

+175
-98
lines changed

38 files changed

+175
-98
lines changed

‎RELEASE-NOTES.txt

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
19.2
22
-----
3+
* [**] Some of the screens of the app has a new, fresh and more modern visual, including the initial one: My Site. [#17812]
34

45

56
19.1

‎WordPress/Classes/Utility/ImmuTableViewController.swift

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,15 @@ final class ImmuTableViewController: UITableViewController, ImmuTablePresenter {
5959

6060
// MARK: - Table View Controller
6161

62+
init(controller: ImmuTableController, style: UITableView.Style) {
63+
self.controller = controller
64+
super.init(style: style)
65+
66+
title = controller.title
67+
registerRows(controller.immuTableRows)
68+
controller.refreshModel()
69+
}
70+
6271
init(controller: ImmuTableController) {
6372
self.controller = controller
6473
super.init(style: .grouped)

‎WordPress/Classes/ViewRelated/Blog/Blog Details/BlogDetailsSectionHeaderView.xib

Lines changed: 6 additions & 6 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="18122" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES">
2+
<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="19529" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="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="18093"/>
6+
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="19519"/>
77
<capability name="Named colors" minToolsVersion="9.0"/>
88
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
99
</dependencies>
@@ -15,7 +15,7 @@
1515
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
1616
<subviews>
1717
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="OEo-2z-Cmk">
18-
<rect key="frame" x="273" y="0.0" width="44" height="36"/>
18+
<rect key="frame" x="260" y="0.0" width="44" height="36"/>
1919
<accessibility key="accessibilityConfiguration" label="More menu"/>
2020
<constraints>
2121
<constraint firstAttribute="width" constant="44" id="NQj-8B-nY9"/>
@@ -26,7 +26,7 @@
2626
</connections>
2727
</button>
2828
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="DATE" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="eUE-Sb-m3L">
29-
<rect key="frame" x="16" y="0.0" width="32.5" height="36"/>
29+
<rect key="frame" x="36" y="0.0" width="32.5" height="36"/>
3030
<color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
3131
<fontDescription key="fontDescription" type="system" pointSize="13"/>
3232
<color key="textColor" name="Gray50"/>
@@ -35,9 +35,9 @@
3535
</subviews>
3636
<color key="backgroundColor" red="0.9137254901960784" green="0.93725490196078431" blue="0.95294117647058818" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
3737
<constraints>
38-
<constraint firstAttribute="trailingMargin" secondItem="OEo-2z-Cmk" secondAttribute="trailing" constant="-13" id="EWN-SE-Ilb"/>
38+
<constraint firstAttribute="leadingMargin" secondItem="eUE-Sb-m3L" secondAttribute="leading" constant="-20" id="Bi6-N7-44O"/>
39+
<constraint firstAttribute="trailingMargin" secondItem="OEo-2z-Cmk" secondAttribute="trailing" id="EWN-SE-Ilb"/>
3940
<constraint firstAttribute="bottom" secondItem="eUE-Sb-m3L" secondAttribute="bottom" id="ILT-ul-3i5"/>
40-
<constraint firstItem="eUE-Sb-m3L" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leadingMargin" id="LH1-C3-ah6"/>
4141
<constraint firstAttribute="bottom" secondItem="OEo-2z-Cmk" secondAttribute="bottom" id="a35-Lf-TpM"/>
4242
<constraint firstItem="eUE-Sb-m3L" firstAttribute="top" secondItem="iN0-l3-epB" secondAttribute="top" id="oHh-OB-AWn"/>
4343
</constraints>

‎WordPress/Classes/ViewRelated/Blog/Blog Details/BlogDetailsViewController+Header.swift

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,12 @@ extension BlogDetailsViewController {
99
return BlogDetailHeaderView(items: actionItems)
1010
}
1111

12+
@objc func configureQuickActions(cell: QuickActionsCell) {
13+
let actionItems = createActionItems()
14+
15+
cell.configure(with: actionItems)
16+
}
17+
1218
@objc
1319
func showSiteTitleSettings() {
1420
let hint = blog.isAdmin ? SiteTitleStrings.siteTitleHint : SiteTitleStrings.notAnAdminHint

‎WordPress/Classes/ViewRelated/Blog/Blog Details/BlogDetailsViewController+QuickActions.swift

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import UIKit
2+
3+
extension BlogDetailsViewController {
4+
@objc func quickActionsSectionViewModel() -> BlogDetailsSection {
5+
let row = BlogDetailsRow()
6+
row.callback = {}
7+
return BlogDetailsSection(title: nil,
8+
rows: [row],
9+
footerTitle: nil,
10+
category: .quickAction)
11+
}
12+
13+
@objc func isAccessibilityCategoryEnabled() -> Bool {
14+
tableView.traitCollection.preferredContentSizeCategory.isAccessibilityCategory
15+
}
16+
}
17+
18+
@objc class QuickActionsCell: UITableViewCell {
19+
private var actionRow: ActionRow!
20+
21+
func configure(with items: [ActionRow.Item]) {
22+
guard actionRow == nil else {
23+
return
24+
}
25+
26+
actionRow = ActionRow(items: items)
27+
contentView.addSubview(actionRow)
28+
29+
setupConstraints()
30+
setupCell()
31+
}
32+
33+
private func setupConstraints() {
34+
actionRow.translatesAutoresizingMaskIntoConstraints = false
35+
36+
let widthConstraint = actionRow.widthAnchor.constraint(equalToConstant: Constants.maxQuickActionsWidth)
37+
widthConstraint.priority = .defaultHigh
38+
39+
NSLayoutConstraint.activate([
40+
actionRow.topAnchor.constraint(equalTo: contentView.topAnchor),
41+
actionRow.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
42+
actionRow.leadingAnchor.constraint(greaterThanOrEqualTo: contentView.leadingAnchor),
43+
actionRow.centerXAnchor.constraint(equalTo: contentView.centerXAnchor),
44+
widthConstraint
45+
])
46+
}
47+
48+
private func setupCell() {
49+
selectionStyle = .none
50+
}
51+
52+
private enum Constants {
53+
static let maxQuickActionsWidth: CGFloat = 390
54+
}
55+
}

‎WordPress/Classes/ViewRelated/Blog/Blog Details/BlogDetailsViewController.h

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@ typedef NS_ENUM(NSUInteger, BlogDetailsSectionCategory) {
1515
BlogDetailsSectionCategoryPersonalize,
1616
BlogDetailsSectionCategoryConfigure,
1717
BlogDetailsSectionCategoryExternal,
18-
BlogDetailsSectionCategoryRemoveSite
18+
BlogDetailsSectionCategoryRemoveSite,
19+
BlogDetailsSectionCategoryQuickAction
1920
};
2021

2122
typedef NS_ENUM(NSUInteger, BlogDetailsSubsection) {

‎WordPress/Classes/ViewRelated/Blog/Blog Details/BlogDetailsViewController.m

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
static NSString *const BlogDetailsPlanCellIdentifier = @"BlogDetailsPlanCell";
2323
static NSString *const BlogDetailsSettingsCellIdentifier = @"BlogDetailsSettingsCell";
2424
static NSString *const BlogDetailsRemoveSiteCellIdentifier = @"BlogDetailsRemoveSiteCell";
25+
static NSString *const BlogDetailsQuickActionsCellIdentifier = @"BlogDetailsQuickActionsCell";
2526
static NSString *const BlogDetailsSectionHeaderViewIdentifier = @"BlogDetailsSectionHeaderView";
2627
static NSString *const QuickStartHeaderViewNibName = @"BlogDetailsSectionHeaderView";
2728
static NSString *const QuickStartListTitleCellNibName = @"QuickStartListTitleCell";
@@ -326,7 +327,7 @@ - (void)viewDidLoad
326327
{
327328
[super viewDidLoad];
328329

329-
_tableView = [[UITableView alloc] initWithFrame:CGRectZero style:UITableViewStyleGrouped];
330+
_tableView = [[UITableView alloc] initWithFrame:CGRectZero style:UITableViewStyleInsetGrouped];
330331
self.tableView.delegate = self;
331332
self.tableView.dataSource = self;
332333
self.tableView.translatesAutoresizingMaskIntoConstraints = false;
@@ -346,6 +347,7 @@ - (void)viewDidLoad
346347
[self.tableView registerClass:[WPTableViewCellValue1 class] forCellReuseIdentifier:BlogDetailsPlanCellIdentifier];
347348
[self.tableView registerClass:[WPTableViewCellValue1 class] forCellReuseIdentifier:BlogDetailsSettingsCellIdentifier];
348349
[self.tableView registerClass:[WPTableViewCell class] forCellReuseIdentifier:BlogDetailsRemoveSiteCellIdentifier];
350+
[self.tableView registerClass:[QuickActionsCell class] forCellReuseIdentifier:BlogDetailsQuickActionsCellIdentifier];
349351
UINib *qsHeaderViewNib = [UINib nibWithNibName:QuickStartHeaderViewNibName bundle:[NSBundle bundleForClass:[QuickStartListTitleCell class]]];
350352
[self.tableView registerNib:qsHeaderViewNib forHeaderFooterViewReuseIdentifier:BlogDetailsSectionHeaderViewIdentifier];
351353
UINib *qsTitleCellNib = [UINib nibWithNibName:QuickStartListTitleCellNibName bundle:[NSBundle bundleForClass:[QuickStartListTitleCell class]]];
@@ -751,6 +753,7 @@ - (void)configureTableViewData
751753
{
752754
NSMutableArray *marr = [NSMutableArray array];
753755

756+
[marr addObject:[self quickActionsSectionViewModel]];
754757
if ([DomainCreditEligibilityChecker canRedeemDomainCreditWithBlog:self.blog]) {
755758
if (!self.hasLoggedDomainCreditPromptShownEvent) {
756759
[WPAnalytics track:WPAnalyticsStatDomainCreditPromptShown];
@@ -1399,6 +1402,12 @@ - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
13991402
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
14001403
{
14011404
BlogDetailsSection *detailSection = [self.tableSections objectAtIndex:section];
1405+
1406+
/// For larger texts we don't show the quick actions row
1407+
if (detailSection.category == BlogDetailsSectionCategoryQuickAction && self.isAccessibilityCategoryEnabled) {
1408+
return 0;
1409+
}
1410+
14021411
return [detailSection.rows count];
14031412
}
14041413

@@ -1422,6 +1431,13 @@ - (void)configureCell:(UITableViewCell *)cell atIndexPath:(NSIndexPath *)indexPa
14221431
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
14231432
{
14241433
BlogDetailsSection *section = [self.tableSections objectAtIndex:indexPath.section];
1434+
1435+
if (section.category == BlogDetailsSectionCategoryQuickAction) {
1436+
QuickActionsCell *cell = [tableView dequeueReusableCellWithIdentifier:BlogDetailsQuickActionsCellIdentifier];
1437+
[self configureQuickActionsWithCell: cell];
1438+
return cell;
1439+
}
1440+
14251441
BlogDetailsRow *row = [section.rows objectAtIndex:indexPath.row];
14261442
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:row.identifier];
14271443
cell.accessibilityHint = row.accessibilityHint;
@@ -1483,12 +1499,8 @@ - (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger
14831499
BlogDetailsSection *section = [self.tableSections objectAtIndex:sectionNum];
14841500
if (section.showQuickStartMenu) {
14851501
return [self quickStartHeaderWithTitle:section.title];
1486-
} else if (sectionNum == 0 && [self.blog supports:BlogFeatureJetpackSettings]) {
1487-
// Jetpack header shouldn't have any padding
1488-
BlogDetailsSectionHeaderView *headerView = (BlogDetailsSectionHeaderView *)[tableView dequeueReusableHeaderFooterViewWithIdentifier:BlogDetailsSectionHeaderViewIdentifier];
1489-
headerView.ellipsisButton.hidden = YES;
1490-
headerView.title = @"";
1491-
return headerView;
1502+
} else if (sectionNum == 0) {
1503+
return nil;
14921504
}
14931505

14941506
return nil;

‎WordPress/Classes/ViewRelated/Blog/Blog Details/Detail Header/ActionRow.swift

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ class ActionRow: UIStackView {
7373

7474
enum Constants {
7575
static let minimumSpacing: CGFloat = 8
76+
static let margins = UIEdgeInsets(top: 16, left: 16, bottom: 16, right: 16)
7677
}
7778

7879
struct Item {
@@ -93,6 +94,9 @@ class ActionRow: UIStackView {
9394
spacing = Constants.minimumSpacing
9495
translatesAutoresizingMaskIntoConstraints = false
9596
refreshStackViewVisibility()
97+
98+
layoutMargins = Constants.margins
99+
isLayoutMarginsRelativeArrangement = true
96100
}
97101

98102
// MARK: - Accessibility

‎WordPress/Classes/ViewRelated/Blog/Blog Details/Detail Header/BlogDetailHeaderView.swift

Lines changed: 4 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ class BlogDetailHeaderView: UIView {
1414

1515
// MARK: - Child Views
1616

17-
private let actionRow: ActionRow
1817
private let titleView: TitleView
1918

2019
// MARK: - Delegate
@@ -83,7 +82,7 @@ class BlogDetailHeaderView: UIView {
8382
}
8483

8584
private enum LayoutSpacing {
86-
static let atSides: CGFloat = 16
85+
static let atSides: CGFloat = 20
8786
static let top: CGFloat = 16
8887
static let bottom: CGFloat = 16
8988
static let belowActionRow: CGFloat = 24
@@ -104,13 +103,10 @@ class BlogDetailHeaderView: UIView {
104103
// MARK: - Initializers
105104

106105
required init(items: [ActionRow.Item]) {
107-
actionRow = ActionRow(items: items)
108106
titleView = TitleView(frame: .zero)
109107

110108
super.init(frame: .zero)
111109

112-
backgroundColor = .appBarBackground
113-
114110
setupChildViews(items: items)
115111
}
116112

@@ -136,12 +132,6 @@ class BlogDetailHeaderView: UIView {
136132

137133
addSubview(titleView)
138134

139-
if !FeatureFlag.mySiteDashboard.enabled {
140-
addSubview(actionRow)
141-
}
142-
143-
addBottomBorder(withColor: .separator)
144-
145135
let showsActionRow = items.count > 0
146136
setupConstraintsForChildViews(showsActionRow)
147137
}
@@ -151,45 +141,19 @@ class BlogDetailHeaderView: UIView {
151141
private var topActionRowConstraint: NSLayoutConstraint?
152142

153143
private func setupConstraintsForChildViews(_ showsActionRow: Bool) {
154-
var constraints = constraintsForTitleView()
155-
156-
if !FeatureFlag.mySiteDashboard.enabled {
157-
constraints += constraintsForActionRow(showsActionRow)
158-
}
144+
let constraints = constraintsForTitleView()
159145

160146
NSLayoutConstraint.activate(constraints)
161147
}
162148

163-
private func constraintsForActionRow(_ showsActionRow: Bool) -> [NSLayoutConstraint] {
164-
let widthConstraint = actionRow.widthAnchor.constraint(equalToConstant: LayoutSpacing.maxButtonWidth)
165-
widthConstraint.priority = .defaultHigh
166-
167-
let topActionRowConstraint = actionRow.topAnchor.constraint(equalTo: titleView.bottomAnchor, constant: LayoutSpacing.betweenTitleViewAndActionRow(showsActionRow))
168-
self.topActionRowConstraint = topActionRowConstraint
169-
170-
return [
171-
topActionRowConstraint,
172-
actionRow.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -LayoutSpacing.belowActionRow),
173-
actionRow.leadingAnchor.constraint(greaterThanOrEqualTo: titleView.leadingAnchor),
174-
actionRow.trailingAnchor.constraint(lessThanOrEqualTo: titleView.trailingAnchor),
175-
actionRow.centerXAnchor.constraint(equalTo: centerXAnchor),
176-
widthConstraint
177-
]
178-
}
179-
180149
private func constraintsForTitleView() -> [NSLayoutConstraint] {
181150
var constraints = [
182151
titleView.topAnchor.constraint(equalTo: topAnchor, constant: LayoutSpacing.top),
183152
titleView.leadingAnchor.constraint(equalTo: safeAreaLayoutGuide.leadingAnchor, constant: LayoutSpacing.atSides),
184-
titleView.trailingAnchor.constraint(equalTo: safeAreaLayoutGuide.trailingAnchor, constant: -LayoutSpacing.atSides)
153+
titleView.trailingAnchor.constraint(equalTo: safeAreaLayoutGuide.trailingAnchor, constant: -LayoutSpacing.atSides),
154+
titleView.bottomAnchor.constraint(equalTo: bottomAnchor)
185155
]
186156

187-
if FeatureFlag.mySiteDashboard.enabled {
188-
constraints.append(
189-
titleView.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -LayoutSpacing.bottom)
190-
)
191-
}
192-
193157
return constraints
194158
}
195159

‎WordPress/Classes/ViewRelated/Blog/My Site/MySiteViewController.swift

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,7 @@ class MySiteViewController: UIViewController, NoResultsViewHost {
9999
// MARK: - View Lifecycle
100100

101101
override func viewDidLoad() {
102+
setupView()
102103
setupConstraints()
103104
setupNavigationItem()
104105
setupSegmentedControl()
@@ -112,6 +113,14 @@ class MySiteViewController: UIViewController, NoResultsViewHost {
112113
if blog == nil {
113114
showBlogDetailsForMainBlogOrNoSites()
114115
}
116+
117+
setupTransparentNavBar()
118+
}
119+
120+
override func viewWillDisappear(_ animated: Bool) {
121+
super.viewWillDisappear(animated)
122+
123+
setupOpaqueNavBar()
115124
}
116125

117126
override func viewDidAppear(_ animated: Bool) {
@@ -126,6 +135,8 @@ class MySiteViewController: UIViewController, NoResultsViewHost {
126135
FancyAlertViewController.presentCustomAppIconUpgradeAlertIfNecessary(from: self)
127136

128137
trackNoSitesVisibleIfNeeded()
138+
139+
setupTransparentNavBar()
129140
}
130141

131142
private func subscribeToPostSignupNotifications() {
@@ -161,6 +172,10 @@ class MySiteViewController: UIViewController, NoResultsViewHost {
161172
segmentedControl.selectedSegmentIndex = 0
162173
}
163174

175+
private func setupView() {
176+
view.backgroundColor = .listBackground
177+
}
178+
164179
/// If the My Site Dashboard feature flag is enabled, then this method builds a layout with the following
165180
/// view hierarchy:
166181
///
@@ -229,6 +244,14 @@ class MySiteViewController: UIViewController, NoResultsViewHost {
229244
navigationController?.navigationBar.accessibilityIdentifier = "my-site-navigation-bar"
230245
}
231246

247+
private func setupTransparentNavBar() {
248+
navigationController?.navigationBar.scrollEdgeAppearance?.configureWithTransparentBackground()
249+
}
250+
251+
private func setupOpaqueNavBar() {
252+
navigationController?.navigationBar.scrollEdgeAppearance?.configureWithOpaqueBackground()
253+
}
254+
232255
// MARK: - Account
233256

234257
private func defaultAccount() -> WPAccount? {

0 commit comments

Comments
 (0)