iOS: Adding cell for the promo signin for settings.

ios/chrome/browser/ui/settings/cells/signin_promo_item.mm

+// Copyright 2016 The Chromium Authors. All rights reserved.

[lpromero, 2017/03/09 10:55:03]

2017

[jlebel, 2017/03/09 20:34:07]

Done.

+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#import "ios/chrome/browser/ui/settings/cells/signin_promo_item.h"
+
+#include "base/strings/sys_string_conversions.h"
+#import "ios/chrome/browser/ui/colors/MDCPalette+CrAdditions.h"
+#import "ios/chrome/browser/ui/uikit_ui_util.h"
+#include "ios/chrome/grit/ios_chromium_strings.h"
+#include "ios/chrome/grit/ios_strings.h"
+#import "ios/third_party/material_components_ios/src/components/Palettes/src/MaterialPalettes.h"
+#import "ios/third_party/material_roboto_font_loader_ios/src/src/MaterialRobotoFontLoader.h"
+#include "ui/base/l10n/l10n_util.h"
+
+#if !defined(__has_feature) || !__has_feature(objc_arc)
+#error "This file requires ARC support."
+#endif
+
+namespace {
+// Horizontal padding for label and buttons.
+const CGFloat kHorizontalPadding = 40;
+// Vertical padding for the image and the label.
+const CGFloat kVerticalPadding = 12;
+// Vertical paddingn for buttons.

[lpromero, 2017/03/09 10:55:03]

padding

[jlebel, 2017/03/09 20:34:08]

Done.

+const CGFloat kButtonVerticalPadding = 6;
+// Image size.
+const CGFloat kImageFixedSize = 48;
+// Button height.
+const CGFloat kButtonHeight = 36;
+}
+
+@implementation SigninPromoItem
+
+@synthesize image = _image;
+@synthesize profileName = _profileName;
+@synthesize profileEmail = _profileEmail;
+
+- (instancetype)initWithType:(NSInteger)type {
+  self = [super initWithType:type];
+  if (self) {
+    self.cellClass = [SigninPromoCell class];
+    self.accessibilityTraits |= UIAccessibilityTraitButton;

[lpromero, 2017/03/09 10:55:02]

I wouldn't care for accessibility within the item, directly within the cell.
The item can carry accessibility traits from its clients to the cell, but here,
the cell can manage that directly.

+  }
+  return self;
+}
+
+#pragma mark - CollectionViewItem
+
+- (void)configureCell:(SigninPromoCell*)cell {
+  [super configureCell:cell];
+  [cell configureWithProfileName:_profileName
+                    profileEmail:_profileEmail
+                    profileImage:_image];
+}
+
+@end
+
+@implementation SigninPromoCell {
+  // Profie name.
+  NSString* _profileName;

[lpromero, 2017/03/09 10:55:02]

Doesn't seem needed to keep it in an ivar.

[jlebel, 2017/03/09 20:34:07]

Done.

+  // Profile imageView.
+  UIImageView* _imageView;
+  // Cell title.
+  UILabel* _textLabel;
+  // Signin button.
+  MDCFlatButton* _signinButton;
+  // Dismiss button.
+  MDCFlatButton* _dismissButton;
+}
+
+- (instancetype)initWithFrame:(CGRect)frame {
+  self = [super initWithFrame:frame];
+  if (self) {
+    self.isAccessibilityElement = YES;
+    [self addSubviews];
+    [self setDefaultViewStyling];
+    [self setViewConstraints];
+  }
+  return self;
+}
+
+- (void)configureWithProfileName:(NSString*)profileName
+                    profileEmail:(NSString*)profileEmail
+                    profileImage:(UIImage*)profileImage {
+  _textLabel.text = l10n_util::GetNSString(IDS_IOS_SIGNIN_PROMO_SETTINGS);
+  _profileName = profileName;
+  [self updateSigninButtonTitle];
+  [_dismissButton
+      setTitle:l10n_util::GetNSStringF(IDS_IOS_SIGNIN_PROMO_NOT,
+                                       base::SysNSStringToUTF16(profileEmail))
+      forState:UIControlStateNormal];
+  _imageView.image = profileImage;
+}
+
+- (void)updateSigninButtonTitle {
+  int messageId = IDS_IOS_SIGNIN_PROMO_CONTINUE_AS;
+  if (IsCompact(self)) {

[lpromero, 2017/03/09 10:55:03]

You mean it returns NO here? Probably because when first called, the cell is not
displayed and might be regular by default. Isn't traitsCollectionDidChange below
called when the view is added to the hierarchy?

[jlebel, 2017/03/09 20:34:07]

Done.

+    messageId = IDS_IOS_SIGNIN_PROMO_CONTINUE_AS_COMPACT;
+  }
+  [_signinButton setTitle:l10n_util::GetNSStringF(
+                              messageId, base::SysNSStringToUTF16(_profileName))
+                 forState:UIControlStateNormal];
+}
+
+// Create and add subviews.
+- (void)addSubviews {
+  UIView* contentView = self.contentView;
+  contentView.clipsToBounds = YES;
+
+  _imageView = [[UIImageView alloc] init];
+  _imageView.translatesAutoresizingMaskIntoConstraints = NO;
+  [contentView addSubview:_imageView];
+
+  _textLabel = [[UILabel alloc] init];
+  _textLabel.translatesAutoresizingMaskIntoConstraints = NO;
+  [contentView addSubview:_textLabel];
+
+  _signinButton = [[MDCFlatButton alloc] init];
+  _signinButton.translatesAutoresizingMaskIntoConstraints = NO;
+  _signinButton.accessibilityIdentifier = @"signin_promo_button";
+  [contentView addSubview:_signinButton];
+
+  _dismissButton = [[MDCFlatButton alloc] init];
+  _dismissButton.translatesAutoresizingMaskIntoConstraints = NO;
+  _dismissButton.accessibilityIdentifier = @"signin_promo_no_button";
+  [contentView addSubview:_dismissButton];
+}
+
+- (void)setDefaultViewStyling {
+  _imageView.contentMode = UIViewContentModeCenter;
+  _imageView.layer.masksToBounds = YES;
+  _imageView.contentMode = UIViewContentModeScaleAspectFit;
+  _textLabel.font = [[MDFRobotoFontLoader sharedInstance] mediumFontOfSize:14];

[lpromero, 2017/03/09 10:55:03]

Please use MDCTypography instead.

[jlebel, 2017/03/13 17:08:42]

Done.

+  _textLabel.textColor = [[MDCPalette greyPalette] tint900];
+  _textLabel.numberOfLines = 0;
+  _textLabel.textAlignment = NSTextAlignmentCenter;
+  [_signinButton setBackgroundColor:[[MDCPalette cr_bluePalette] tint500]
+                           forState:UIControlStateNormal];
+  _signinButton.customTitleColor = [UIColor whiteColor];
+  _signinButton.inkColor = [UIColor colorWithWhite:1 alpha:0.2];
+  _dismissButton.customTitleColor = [[MDCPalette cr_bluePalette] tint500];
+  _dismissButton.uppercaseTitle = NO;
+}
+
+- (void)setViewConstraints {
+  UIView* contentView = self.contentView;
+
+  [NSLayoutConstraint activateConstraints:@[
+    // Set vertical anchors.
+    [_imageView.topAnchor constraintEqualToAnchor:contentView.topAnchor
+                                         constant:kVerticalPadding * 2],
+    [_textLabel.topAnchor constraintEqualToAnchor:_imageView.bottomAnchor
+                                         constant:kVerticalPadding],
+    [_signinButton.topAnchor
+        constraintEqualToAnchor:_textLabel.bottomAnchor
+                       constant:kVerticalPadding + kButtonVerticalPadding],
+    [_dismissButton.topAnchor
+        constraintEqualToAnchor:_signinButton.bottomAnchor
+                       constant:kButtonVerticalPadding * 2],
+    [contentView.bottomAnchor
+        constraintEqualToAnchor:_dismissButton.bottomAnchor
+                       constant:kVerticalPadding + kButtonVerticalPadding],
+
+    // Set horizontal anchors.
+    [_imageView.centerXAnchor
+        constraintEqualToAnchor:contentView.centerXAnchor],
+    [_textLabel.centerXAnchor
+        constraintEqualToAnchor:contentView.centerXAnchor],
+    [_signinButton.centerXAnchor
+        constraintEqualToAnchor:contentView.centerXAnchor],
+    [_signinButton.leadingAnchor
+        constraintEqualToAnchor:contentView.leadingAnchor
+                       constant:kHorizontalPadding],
+    [contentView.trailingAnchor
+        constraintEqualToAnchor:_signinButton.trailingAnchor
+                       constant:kHorizontalPadding],
+    [_dismissButton.centerXAnchor
+        constraintEqualToAnchor:contentView.centerXAnchor],
+    [_dismissButton.leadingAnchor
+        constraintEqualToAnchor:contentView.leadingAnchor
+                       constant:kHorizontalPadding],
+    [contentView.trailingAnchor
+        constraintEqualToAnchor:_dismissButton.trailingAnchor
+                       constant:kHorizontalPadding],
+
+    // Fix width and height.
+    [_imageView.widthAnchor constraintEqualToConstant:kImageFixedSize],
+    [_imageView.heightAnchor constraintEqualToConstant:kImageFixedSize],
+    [_signinButton.heightAnchor constraintEqualToConstant:kButtonHeight],
+    [_dismissButton.heightAnchor constraintEqualToConstant:kButtonHeight],
+  ]];
+}
+
+// Implements -layoutSubviews as per instructions in documentation for
+// +[MDCCollectionViewCell cr_preferredHeightForWidth:forItem:].
+- (void)layoutSubviews {
+  [super layoutSubviews];
+
+  // Adjust the text label preferredMaxLayoutWidth when the parent's width
+  // changes, for instance on screen rotation.
+  CGFloat parentWidth = CGRectGetWidth(self.contentView.bounds);
+  _textLabel.preferredMaxLayoutWidth = parentWidth - 2 * kHorizontalPadding;
+
+  // Re-layout with the new preferred width to allow the label to adjust its
+  // height.
+  [super layoutSubviews];
+}
+
+- (void)traitCollectionDidChange:
+    (nullable UITraitCollection*)previousTraitCollection {
+  [super traitCollectionDidChange:previousTraitCollection];
+  if (self.traitCollection.horizontalSizeClass !=
+      previousTraitCollection.horizontalSizeClass) {
+    [self updateSigninButtonTitle];
+  }
+}
+
+#pragma mark - UICollectionReusableView
+
+- (void)prepareForReuse {
+  [super prepareForReuse];
+  _profileName = nil;
+  _imageView.image = nil;
+  _textLabel.text = nil;
+  _signinButton = nil;
+  _dismissButton = nil;
+}
+
+#pragma mark - NSObject(Accessibility)

[lpromero, 2017/03/09 10:55:02]

Let's discuss accessibility possibilities IRL.

+
+- (NSString*)accessibilityLabel {
+  return l10n_util::GetNSString(IDS_IOS_SIGN_IN_TO_CHROME_SETTING_TITLE);
+}
+
+- (NSString*)accessibilityValue {
+  return [NSString stringWithFormat:@"%@", _textLabel.text];
+}
+
+@end