Merge pull request #17812 from wordpress-mobile/task/msd_change_table_view_style_to_inset_grouped

Table Views: use `insetGrouped` style

Author: leandroalonso

RELEASE-NOTES.txt

@@ -1,5 +1,6 @@
 19.2
 -----
+* [**] Some of the screens of the app has a new, fresh and more modern visual, including the initial one: My Site. [#17812]
 
 
 19.1

WordPress/Classes/Utility/ImmuTableViewController.swift

@@ -59,6 +59,15 @@ final class ImmuTableViewController: UITableViewController, ImmuTablePresenter {
 
     // MARK: - Table View Controller
 
+    init(controller: ImmuTableController, style: UITableView.Style) {
+        self.controller = controller
+        super.init(style: style)
+
+        title = controller.title
+        registerRows(controller.immuTableRows)
+        controller.refreshModel()
+    }
+
     init(controller: ImmuTableController) {
         self.controller = controller
         super.init(style: .grouped)

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

@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="18122" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="19529" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES">
     <device id="retina4_7" orientation="portrait" appearance="light"/>
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="18093"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="19519"/>
         <capability name="Named colors" minToolsVersion="9.0"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
@@ -15,7 +15,7 @@
             <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
             <subviews>
                 <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="OEo-2z-Cmk">
-                    <rect key="frame" x="273" y="0.0" width="44" height="36"/>
+                    <rect key="frame" x="260" y="0.0" width="44" height="36"/>
                     <accessibility key="accessibilityConfiguration" label="More menu"/>
                     <constraints>
                         <constraint firstAttribute="width" constant="44" id="NQj-8B-nY9"/>
@@ -26,7 +26,7 @@
                     </connections>
                 </button>
                 <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">
-                    <rect key="frame" x="16" y="0.0" width="32.5" height="36"/>
+                    <rect key="frame" x="36" y="0.0" width="32.5" height="36"/>
                     <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                     <fontDescription key="fontDescription" type="system" pointSize="13"/>
                     <color key="textColor" name="Gray50"/>
@@ -35,9 +35,9 @@
             </subviews>
             <color key="backgroundColor" red="0.9137254901960784" green="0.93725490196078431" blue="0.95294117647058818" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
             <constraints>
-                <constraint firstAttribute="trailingMargin" secondItem="OEo-2z-Cmk" secondAttribute="trailing" constant="-13" id="EWN-SE-Ilb"/>
+                <constraint firstAttribute="leadingMargin" secondItem="eUE-Sb-m3L" secondAttribute="leading" constant="-20" id="Bi6-N7-44O"/>
+                <constraint firstAttribute="trailingMargin" secondItem="OEo-2z-Cmk" secondAttribute="trailing" id="EWN-SE-Ilb"/>
                 <constraint firstAttribute="bottom" secondItem="eUE-Sb-m3L" secondAttribute="bottom" id="ILT-ul-3i5"/>
-                <constraint firstItem="eUE-Sb-m3L" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leadingMargin" id="LH1-C3-ah6"/>
                 <constraint firstAttribute="bottom" secondItem="OEo-2z-Cmk" secondAttribute="bottom" id="a35-Lf-TpM"/>
                 <constraint firstItem="eUE-Sb-m3L" firstAttribute="top" secondItem="iN0-l3-epB" secondAttribute="top" id="oHh-OB-AWn"/>
             </constraints>

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

@@ -9,6 +9,12 @@ extension BlogDetailsViewController {
         return BlogDetailHeaderView(items: actionItems)
     }
 
+    @objc func configureQuickActions(cell: QuickActionsCell) {
+        let actionItems = createActionItems()
+
+        cell.configure(with: actionItems)
+    }
+
     @objc
     func showSiteTitleSettings() {
         let hint = blog.isAdmin ? SiteTitleStrings.siteTitleHint : SiteTitleStrings.notAnAdminHint

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

@@ -0,0 +1,55 @@
+import UIKit
+
+extension BlogDetailsViewController {
+    @objc func quickActionsSectionViewModel() -> BlogDetailsSection {
+        let row = BlogDetailsRow()
+        row.callback = {}
+        return BlogDetailsSection(title: nil,
+                                  rows: [row],
+                                  footerTitle: nil,
+                                  category: .quickAction)
+    }
+
+    @objc func isAccessibilityCategoryEnabled() -> Bool {
+        tableView.traitCollection.preferredContentSizeCategory.isAccessibilityCategory
+    }
+}
+
+@objc class QuickActionsCell: UITableViewCell {
+    private var actionRow: ActionRow!
+
+    func configure(with items: [ActionRow.Item]) {
+        guard actionRow == nil else {
+            return
+        }
+
+        actionRow = ActionRow(items: items)
+        contentView.addSubview(actionRow)
+
+        setupConstraints()
+        setupCell()
+    }
+
+    private func setupConstraints() {
+        actionRow.translatesAutoresizingMaskIntoConstraints = false
+
+        let widthConstraint = actionRow.widthAnchor.constraint(equalToConstant: Constants.maxQuickActionsWidth)
+        widthConstraint.priority = .defaultHigh
+
+        NSLayoutConstraint.activate([
+            actionRow.topAnchor.constraint(equalTo: contentView.topAnchor),
+            actionRow.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
+            actionRow.leadingAnchor.constraint(greaterThanOrEqualTo: contentView.leadingAnchor),
+            actionRow.centerXAnchor.constraint(equalTo: contentView.centerXAnchor),
+            widthConstraint
+        ])
+    }
+
+    private func setupCell() {
+        selectionStyle = .none
+    }
+
+    private enum Constants {
+        static let maxQuickActionsWidth: CGFloat = 390
+    }
+}

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

@@ -15,7 +15,8 @@ typedef NS_ENUM(NSUInteger, BlogDetailsSectionCategory) {
     BlogDetailsSectionCategoryPersonalize,
     BlogDetailsSectionCategoryConfigure,
     BlogDetailsSectionCategoryExternal,
-    BlogDetailsSectionCategoryRemoveSite
+    BlogDetailsSectionCategoryRemoveSite,
+    BlogDetailsSectionCategoryQuickAction
 };
 
 typedef NS_ENUM(NSUInteger, BlogDetailsSubsection) {

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

@@ -22,6 +22,7 @@
 static NSString *const BlogDetailsPlanCellIdentifier = @"BlogDetailsPlanCell";
 static NSString *const BlogDetailsSettingsCellIdentifier = @"BlogDetailsSettingsCell";
 static NSString *const BlogDetailsRemoveSiteCellIdentifier = @"BlogDetailsRemoveSiteCell";
+static NSString *const BlogDetailsQuickActionsCellIdentifier = @"BlogDetailsQuickActionsCell";
 static NSString *const BlogDetailsSectionHeaderViewIdentifier = @"BlogDetailsSectionHeaderView";
 static NSString *const QuickStartHeaderViewNibName = @"BlogDetailsSectionHeaderView";
 static NSString *const QuickStartListTitleCellNibName = @"QuickStartListTitleCell";
@@ -326,7 +327,7 @@ - (void)viewDidLoad
 {
     [super viewDidLoad];
 
-    _tableView = [[UITableView alloc] initWithFrame:CGRectZero style:UITableViewStyleGrouped];
+    _tableView = [[UITableView alloc] initWithFrame:CGRectZero style:UITableViewStyleInsetGrouped];
     self.tableView.delegate = self;
     self.tableView.dataSource = self;
     self.tableView.translatesAutoresizingMaskIntoConstraints = false;
@@ -346,6 +347,7 @@ - (void)viewDidLoad
     [self.tableView registerClass:[WPTableViewCellValue1 class] forCellReuseIdentifier:BlogDetailsPlanCellIdentifier];
     [self.tableView registerClass:[WPTableViewCellValue1 class] forCellReuseIdentifier:BlogDetailsSettingsCellIdentifier];
     [self.tableView registerClass:[WPTableViewCell class] forCellReuseIdentifier:BlogDetailsRemoveSiteCellIdentifier];
+    [self.tableView registerClass:[QuickActionsCell class] forCellReuseIdentifier:BlogDetailsQuickActionsCellIdentifier];
     UINib *qsHeaderViewNib = [UINib nibWithNibName:QuickStartHeaderViewNibName bundle:[NSBundle bundleForClass:[QuickStartListTitleCell class]]];
     [self.tableView registerNib:qsHeaderViewNib forHeaderFooterViewReuseIdentifier:BlogDetailsSectionHeaderViewIdentifier];
     UINib *qsTitleCellNib = [UINib nibWithNibName:QuickStartListTitleCellNibName bundle:[NSBundle bundleForClass:[QuickStartListTitleCell class]]];
@@ -751,6 +753,7 @@ - (void)configureTableViewData
 {
     NSMutableArray *marr = [NSMutableArray array];
 
+    [marr addObject:[self quickActionsSectionViewModel]];
     if ([DomainCreditEligibilityChecker canRedeemDomainCreditWithBlog:self.blog]) {
         if (!self.hasLoggedDomainCreditPromptShownEvent) {
             [WPAnalytics track:WPAnalyticsStatDomainCreditPromptShown];
@@ -1399,6 +1402,12 @@ - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
 {
     BlogDetailsSection *detailSection = [self.tableSections objectAtIndex:section];
+
+    /// For larger texts we don't show the quick actions row
+    if (detailSection.category == BlogDetailsSectionCategoryQuickAction && self.isAccessibilityCategoryEnabled) {
+        return 0;
+    }
+
     return [detailSection.rows count];
 }
 
@@ -1422,6 +1431,13 @@ - (void)configureCell:(UITableViewCell *)cell atIndexPath:(NSIndexPath *)indexPa
 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
 {
     BlogDetailsSection *section = [self.tableSections objectAtIndex:indexPath.section];
+
+    if (section.category == BlogDetailsSectionCategoryQuickAction) {
+        QuickActionsCell *cell = [tableView dequeueReusableCellWithIdentifier:BlogDetailsQuickActionsCellIdentifier];
+        [self configureQuickActionsWithCell: cell];
+        return cell;
+    }
+
     BlogDetailsRow *row = [section.rows objectAtIndex:indexPath.row];
     UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:row.identifier];
     cell.accessibilityHint = row.accessibilityHint;
@@ -1483,12 +1499,8 @@ - (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger
     BlogDetailsSection *section = [self.tableSections objectAtIndex:sectionNum];
     if (section.showQuickStartMenu) {
         return [self quickStartHeaderWithTitle:section.title];
-    } else if (sectionNum == 0 && [self.blog supports:BlogFeatureJetpackSettings]) {
-        // Jetpack header shouldn't have any padding
-        BlogDetailsSectionHeaderView *headerView = (BlogDetailsSectionHeaderView *)[tableView dequeueReusableHeaderFooterViewWithIdentifier:BlogDetailsSectionHeaderViewIdentifier];
-        headerView.ellipsisButton.hidden = YES;
-        headerView.title = @"";
-        return headerView;
+    } else if (sectionNum == 0) {
+        return nil;
     }
 
     return nil;

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

@@ -73,6 +73,7 @@ class ActionRow: UIStackView {
 
     enum Constants {
         static let minimumSpacing: CGFloat = 8
+        static let margins = UIEdgeInsets(top: 16, left: 16, bottom: 16, right: 16)
     }
 
     struct Item {
@@ -93,6 +94,9 @@ class ActionRow: UIStackView {
         spacing = Constants.minimumSpacing
         translatesAutoresizingMaskIntoConstraints = false
         refreshStackViewVisibility()
+
+        layoutMargins = Constants.margins
+        isLayoutMarginsRelativeArrangement = true
     }
 
     // MARK: - Accessibility

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

@@ -14,7 +14,6 @@ class BlogDetailHeaderView: UIView {
 
     // MARK: - Child Views
 
-    private let actionRow: ActionRow
     private let titleView: TitleView
 
     // MARK: - Delegate
@@ -83,7 +82,7 @@ class BlogDetailHeaderView: UIView {
     }
 
     private enum LayoutSpacing {
-        static let atSides: CGFloat = 16
+        static let atSides: CGFloat = 20
         static let top: CGFloat = 16
         static let bottom: CGFloat = 16
         static let belowActionRow: CGFloat = 24
@@ -104,13 +103,10 @@ class BlogDetailHeaderView: UIView {
     // MARK: - Initializers
 
     required init(items: [ActionRow.Item]) {
-        actionRow = ActionRow(items: items)
         titleView = TitleView(frame: .zero)
 
         super.init(frame: .zero)
 
-        backgroundColor = .appBarBackground
-
         setupChildViews(items: items)
     }
 
@@ -136,12 +132,6 @@ class BlogDetailHeaderView: UIView {
 
         addSubview(titleView)
 
-        if !FeatureFlag.mySiteDashboard.enabled {
-            addSubview(actionRow)
-        }
-
-        addBottomBorder(withColor: .separator)
-
         let showsActionRow = items.count > 0
         setupConstraintsForChildViews(showsActionRow)
     }
@@ -151,45 +141,19 @@ class BlogDetailHeaderView: UIView {
     private var topActionRowConstraint: NSLayoutConstraint?
 
     private func setupConstraintsForChildViews(_ showsActionRow: Bool) {
-        var constraints = constraintsForTitleView()
-
-        if !FeatureFlag.mySiteDashboard.enabled {
-            constraints += constraintsForActionRow(showsActionRow)
-        }
+        let constraints = constraintsForTitleView()
 
         NSLayoutConstraint.activate(constraints)
     }
 
-    private func constraintsForActionRow(_ showsActionRow: Bool) -> [NSLayoutConstraint] {
-        let widthConstraint = actionRow.widthAnchor.constraint(equalToConstant: LayoutSpacing.maxButtonWidth)
-        widthConstraint.priority = .defaultHigh
-
-        let topActionRowConstraint = actionRow.topAnchor.constraint(equalTo: titleView.bottomAnchor, constant: LayoutSpacing.betweenTitleViewAndActionRow(showsActionRow))
-        self.topActionRowConstraint = topActionRowConstraint
-
-        return [
-            topActionRowConstraint,
-            actionRow.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -LayoutSpacing.belowActionRow),
-            actionRow.leadingAnchor.constraint(greaterThanOrEqualTo: titleView.leadingAnchor),
-            actionRow.trailingAnchor.constraint(lessThanOrEqualTo: titleView.trailingAnchor),
-            actionRow.centerXAnchor.constraint(equalTo: centerXAnchor),
-            widthConstraint
-        ]
-    }
-
     private func constraintsForTitleView() -> [NSLayoutConstraint] {
         var constraints = [
             titleView.topAnchor.constraint(equalTo: topAnchor, constant: LayoutSpacing.top),
             titleView.leadingAnchor.constraint(equalTo: safeAreaLayoutGuide.leadingAnchor, constant: LayoutSpacing.atSides),
-            titleView.trailingAnchor.constraint(equalTo: safeAreaLayoutGuide.trailingAnchor, constant: -LayoutSpacing.atSides)
+            titleView.trailingAnchor.constraint(equalTo: safeAreaLayoutGuide.trailingAnchor, constant: -LayoutSpacing.atSides),
+            titleView.bottomAnchor.constraint(equalTo: bottomAnchor)
         ]
 
-        if FeatureFlag.mySiteDashboard.enabled {
-            constraints.append(
-                titleView.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -LayoutSpacing.bottom)
-            )
-        }
-
         return constraints
     }
 

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

@@ -99,6 +99,7 @@ class MySiteViewController: UIViewController, NoResultsViewHost {
     // MARK: - View Lifecycle
 
     override func viewDidLoad() {
+        setupView()
         setupConstraints()
         setupNavigationItem()
         setupSegmentedControl()
@@ -112,6 +113,14 @@ class MySiteViewController: UIViewController, NoResultsViewHost {
         if blog == nil {
             showBlogDetailsForMainBlogOrNoSites()
         }
+
+        setupTransparentNavBar()
+    }
+
+    override func viewWillDisappear(_ animated: Bool) {
+        super.viewWillDisappear(animated)
+
+        setupOpaqueNavBar()
     }
 
     override func viewDidAppear(_ animated: Bool) {
@@ -126,6 +135,8 @@ class MySiteViewController: UIViewController, NoResultsViewHost {
         FancyAlertViewController.presentCustomAppIconUpgradeAlertIfNecessary(from: self)
 
         trackNoSitesVisibleIfNeeded()
+
+        setupTransparentNavBar()
     }
 
     private func subscribeToPostSignupNotifications() {
@@ -161,6 +172,10 @@ class MySiteViewController: UIViewController, NoResultsViewHost {
         segmentedControl.selectedSegmentIndex = 0
     }
 
+    private func setupView() {
+        view.backgroundColor = .listBackground
+    }
+
     /// If the My Site Dashboard feature flag is enabled, then this method builds a layout with the following
     /// view hierarchy:
     ///
@@ -229,6 +244,14 @@ class MySiteViewController: UIViewController, NoResultsViewHost {
         navigationController?.navigationBar.accessibilityIdentifier = "my-site-navigation-bar"
     }
 
+    private func setupTransparentNavBar() {
+        navigationController?.navigationBar.scrollEdgeAppearance?.configureWithTransparentBackground()
+    }
+
+    private func setupOpaqueNavBar() {
+        navigationController?.navigationBar.scrollEdgeAppearance?.configureWithOpaqueBackground()
+    }
+
     // MARK: - Account
 
     private func defaultAccount() -> WPAccount? {