Add first layout for the suggested articles

ios/chrome/browser/ui/content_suggestions/content_suggestions_article_item.mm

Index: ios/chrome/browser/ui/content_suggestions/content_suggestions_article_item.mm
diff --git a/ios/chrome/browser/ui/content_suggestions/content_suggestions_article_item.mm b/ios/chrome/browser/ui/content_suggestions/content_suggestions_article_item.mm
index 4749f4f7104e4e5a6e9e991f3c909bb4064cd77b..017324b501e12f5fda030ad145fed1cc8dc43160 100644
--- a/ios/chrome/browser/ui/content_suggestions/content_suggestions_article_item.mm
+++ b/ios/chrome/browser/ui/content_suggestions/content_suggestions_article_item.mm
@@ -5,14 +5,16 @@
 #import "ios/chrome/browser/ui/content_suggestions/content_suggestions_article_item.h"
 
 #include "base/time/time.h"
+#import "ios/chrome/browser/ui/colors/MDCPalette+CrAdditions.h"
 #import "ios/chrome/browser/ui/uikit_ui_util.h"
+#import "ios/third_party/material_components_ios/src/components/Typography/src/MaterialTypography.h"
 
 #if !defined(__has_feature) || !__has_feature(objc_arc)
 #error "This file requires ARC support."
 #endif
 
 namespace {
-const CGFloat kImageSize = 100;
+const CGFloat kImageSize = 72;
 const CGFloat kStandardSpacing = 8;
 }
 
@@ -58,9 +60,9 @@ const CGFloat kStandardSpacing = 8;
   if (!self.image && !self.imageBeingFetched) {
     [self.delegate loadImageForArticleItem:self];
   }
-  cell.titleLabel.text = _title;
-  cell.subtitleLabel.text = _subtitle;
-  cell.imageView.image = _image;
+  cell.titleLabel.text = self.title;
+  cell.subtitleLabel.text = self.subtitle;
+  cell.imageView.image = self.image;
   [cell setPublisherName:self.publisher date:self.publishDate];
 }
 
@@ -72,6 +74,8 @@ const CGFloat kStandardSpacing = 8;
 
 @property(nonatomic, strong) UILabel* publisherLabel;
 
+- (void)applyConstraints;

[Olivier, 2017/03/01 08:41:42]

comment: Called from init.

[gambard, 2017/03/01 11:55:16]

Done.

+
 @end
 
 @implementation ContentSuggestionsArticleCell
@@ -89,12 +93,14 @@ const CGFloat kStandardSpacing = 8;
     _imageView = [[UIImageView alloc] initWithFrame:CGRectZero];
     _publisherLabel = [[UILabel alloc] initWithFrame:CGRectZero];
 
+    _titleLabel.numberOfLines = 2;
     _subtitleLabel.numberOfLines = 0;
     [_subtitleLabel setContentHuggingPriority:UILayoutPriorityDefaultHigh
                                       forAxis:UILayoutConstraintAxisVertical];
     [_titleLabel setContentHuggingPriority:UILayoutPriorityDefaultHigh
                                    forAxis:UILayoutConstraintAxisVertical];
-    _imageView.contentMode = UIViewContentModeScaleAspectFit;
+    _imageView.contentMode = UIViewContentModeScaleAspectFill;
+    _imageView.clipsToBounds = YES;
 
     _imageView.translatesAutoresizingMaskIntoConstraints = NO;
     _titleLabel.translatesAutoresizingMaskIntoConstraints = NO;
@@ -106,32 +112,14 @@ const CGFloat kStandardSpacing = 8;
     [self.contentView addSubview:_subtitleLabel];
     [self.contentView addSubview:_publisherLabel];
 
-    [NSLayoutConstraint activateConstraints:@[
-      [_imageView.widthAnchor constraintLessThanOrEqualToConstant:kImageSize],
-      [_imageView.heightAnchor constraintLessThanOrEqualToConstant:kImageSize],
-      [_publisherLabel.topAnchor
-          constraintGreaterThanOrEqualToAnchor:_imageView.bottomAnchor
-                                      constant:kStandardSpacing],
-      [_publisherLabel.topAnchor
-          constraintGreaterThanOrEqualToAnchor:_subtitleLabel.bottomAnchor
-                                      constant:kStandardSpacing],
-    ]];
-
-    ApplyVisualConstraints(
-        @[
-          @"H:|-[title]-[image]-|",
-          @"H:|-[text]-[image]",
-          @"V:|-[title]-[text]",
-          @"V:|-[image]",
-          @"H:|-[publish]-|",
-          @"V:[publish]-|",
-        ],
-        @{
-          @"image" : _imageView,
-          @"title" : _titleLabel,
-          @"text" : _subtitleLabel,
-          @"publish" : _publisherLabel,
-        });
+    _titleLabel.font = [MDCTypography subheadFont];
+    _subtitleLabel.font = [MDCTypography body1Font];
+    _publisherLabel.font = [MDCTypography captionFont];
+
+    _subtitleLabel.textColor = [[MDCPalette greyPalette] tint700];
+    _publisherLabel.textColor = [[MDCPalette greyPalette] tint700];
+
+    [self applyConstraints];
   }
   return self;
 }
@@ -158,6 +146,9 @@ const CGFloat kStandardSpacing = 8;
   // Adjust the text label preferredMaxLayoutWidth when the parent's width
   // changes, for instance on screen rotation.
   CGFloat parentWidth = CGRectGetWidth(self.contentView.bounds);
+
+  self.titleLabel.preferredMaxLayoutWidth =
+      parentWidth - self.imageView.bounds.size.width - 3 * 8;

[Olivier, 2017/03/01 08:41:42]

what is 3 * 8 ?

[gambard, 2017/03/01 11:55:16]

The margins. I have created a variable + a comment to make sure this is kept up
to date.

   self.subtitleLabel.preferredMaxLayoutWidth =
       parentWidth - self.imageView.bounds.size.width - 3 * 8;
 
@@ -166,4 +157,35 @@ const CGFloat kStandardSpacing = 8;
   [super layoutSubviews];
 }
 
+#pragma mark - Private
+
+- (void)applyConstraints {
+  [NSLayoutConstraint activateConstraints:@[
+    [self.imageView.widthAnchor constraintEqualToConstant:kImageSize],

[Olivier, 2017/03/01 08:41:43]

I don't think you should use getter from init.

[gambard, 2017/03/01 11:55:16]

Done.

+    [self.imageView.heightAnchor constraintEqualToConstant:kImageSize],

[Olivier, 2017/03/01 08:41:42]

nit:
self.imageView.heightAnchor constraitEqualToAnchor:self.imageView.widthAnchor

(easier to understand this is a square).

[gambard, 2017/03/01 11:55:16]

Done.

+    [self.publisherLabel.topAnchor
+        constraintGreaterThanOrEqualToAnchor:self.imageView.bottomAnchor
+                                    constant:kStandardSpacing],
+    [self.publisherLabel.topAnchor
+        constraintGreaterThanOrEqualToAnchor:self.subtitleLabel.bottomAnchor
+                                    constant:kStandardSpacing],
+  ]];
+
+  ApplyVisualConstraints(
+      @[
+        @"H:|-[title]-[image]-|",
+        @"H:|-[text]-[image]",
+        @"V:|-[title]-[text]",
+        @"V:|-[image]",
+        @"H:|-[publish]-|",
+        @"V:[publish]-|",
+      ],
+      @{
+        @"image" : _imageView,
+        @"title" : _titleLabel,
+        @"text" : _subtitleLabel,
+        @"publish" : _publisherLabel,
+      });
+}
+
 @end