Suggestions UI - expandable item

ios/chrome/browser/ui/suggestions/suggestions_expandable_item.mm

Index: ios/chrome/browser/ui/suggestions/suggestions_expandable_item.mm
diff --git a/ios/chrome/browser/ui/suggestions/suggestions_expandable_item.mm b/ios/chrome/browser/ui/suggestions/suggestions_expandable_item.mm
new file mode 100644
index 0000000000000000000000000000000000000000..ba240ab582cb53e1a4ab9ccefd85629af9b3f7bd
--- /dev/null
+++ b/ios/chrome/browser/ui/suggestions/suggestions_expandable_item.mm
@@ -0,0 +1,278 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// 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/suggestions/suggestions_expandable_item.h"
+
+#import "ios/chrome/browser/ui/uikit_ui_util.h"
+
+#if !defined(__has_feature) || !__has_feature(objc_arc)
+#error "This file requires ARC support."
+#endif
+
+namespace {
+const CGFloat kImageSize = 80;
+}
+
+@interface SuggestionsExpandableItem ()
+
+- (void)expand:(SuggestionsExpandableCell*)cell;
+- (void)retract:(SuggestionsExpandableCell*)cell;
+
+@end
+
+@interface SuggestionsExpandableCell ()
+
+- (void)expand;
+- (void)retract;
+
+@end
+
+#pragma mark - SuggestionsExpandableItem
+
+@implementation SuggestionsExpandableItem {
+  NSString* _title;
+  NSString* _subtitle;
+  UIImage* _image;
+  NSString* _detail;
+  BOOL isExpanded;
+}
+
+@synthesize collectionView = _collectionView;
+
+- (instancetype)initWithType:(NSInteger)type
+                       title:(NSString*)title
+                    subtitle:(NSString*)subtitle
+                       image:(UIImage*)image
+                  detailText:(NSString*)detail {
+  self = [super initWithType:type];
+  if (self) {
+    self.cellClass = [SuggestionsExpandableCell class];
+    _title = title;

[lpromero, 2017/01/11 13:19:20]

Idem about copy and properties.

[gambard, 2017/01/12 14:39:40]

Done.

+    _subtitle = subtitle;
+    _image = image;
+    _detail = detail;
+  }
+  return self;
+}
+
+#pragma mark - CollectionViewItem
+
+- (void)configureCell:(SuggestionsExpandableCell*)cell {
+  [super configureCell:cell];
+  cell.item = self;
+  cell.title = _title;
+  cell.subtitle = _subtitle;
+  cell.image = _image;
+  cell.detail = _detail;
+  if (isExpanded)
+    [cell expand];
+  else
+    [cell retract];
+}
+
+#pragma mark - Private
+
+- (void)expand:(SuggestionsExpandableCell*)cell {
+  [cell expand];
+  isExpanded = YES;
+  [UIView animateWithDuration:1
+                   animations:^{
+                     [_collectionView.collectionViewLayout invalidateLayout];
+                   }];
+}
+
+- (void)retract:(SuggestionsExpandableCell*)cell {
+  [cell retract];
+  isExpanded = NO;
+  [UIView animateWithDuration:1
+                   animations:^{
+                     [_collectionView.collectionViewLayout invalidateLayout];
+                   }];
+}
+
+@end
+
+#pragma mark - SuggestionsExpandableCell
+
+@implementation SuggestionsExpandableCell {
+  UILabel* _titleLabel;
+  UILabel* _subtitleLabel;
+  UIView* _articleContainer;
+  UILabel* _detailText;
+  UIButton* _interactionButton;
+  UIButton* _expandButton;
+  UIImageView* _imageView;
+  BOOL _isExpanded;
+}
+
+@synthesize item = _item;
+@synthesize title = _title;
+@synthesize subtitle = _subtitle;
+@synthesize detail = _detail;
+@synthesize image = _image;
+
+- (instancetype)initWithFrame:(CGRect)frame {
+  self = [super initWithFrame:frame];
+  if (self) {
+    _isExpanded = NO;
+    _titleLabel = [[UILabel alloc] initWithFrame:CGRectZero];

[lpromero, 2017/01/11 13:19:20]

Nit: I usually use just init.

[gambard, 2017/01/12 14:39:40]

Acknowledged.

+    _subtitleLabel = [[UILabel alloc] initWithFrame:CGRectZero];
+    _imageView = [[UIImageView alloc] initWithFrame:CGRectZero];
+    UIView* imageContainer = [[UIView alloc] initWithFrame:CGRectZero];
+    _articleContainer = [[UIView alloc] initWithFrame:CGRectZero];
+    _expandButton = [UIButton buttonWithType:UIButtonTypeSystem];
+    _detailText = [[UILabel alloc] initWithFrame:CGRectZero];
+    _interactionButton = [UIButton buttonWithType:UIButtonTypeSystem];
+
+    _subtitleLabel.numberOfLines = 0;
+    [_expandButton setTitle:@"See more" forState:UIControlStateNormal];

[lpromero, 2017/01/11 13:19:20]

Add a localized string or a bug to track.

[gambard, 2017/01/12 14:39:40]

Done.

+    _detailText.numberOfLines = 0;
+    [_interactionButton setTitle:@"Less Interactions"

[lpromero, 2017/01/11 13:19:20]

Idem.

[gambard, 2017/01/12 14:39:40]

Done.

+                        forState:UIControlStateNormal];
+
+    imageContainer.translatesAutoresizingMaskIntoConstraints = NO;
+    _imageView.translatesAutoresizingMaskIntoConstraints = NO;
+    _titleLabel.translatesAutoresizingMaskIntoConstraints = NO;
+    _subtitleLabel.translatesAutoresizingMaskIntoConstraints = NO;
+    _articleContainer.translatesAutoresizingMaskIntoConstraints = NO;
+    _expandButton.translatesAutoresizingMaskIntoConstraints = NO;
+    _detailText.translatesAutoresizingMaskIntoConstraints = NO;
+    _interactionButton.translatesAutoresizingMaskIntoConstraints = NO;
+
+    [_expandButton addTarget:self
+                      action:@selector(expandPressed)
+            forControlEvents:UIControlEventTouchUpInside];
+    [_interactionButton addTarget:self
+                           action:@selector(retractPressed)
+                 forControlEvents:UIControlEventTouchUpInside];
+
+    [imageContainer addSubview:_imageView];
+    [_articleContainer addSubview:imageContainer];
+    [_articleContainer addSubview:_titleLabel];
+    [_articleContainer addSubview:_subtitleLabel];
+
+    [self.contentView addSubview:_articleContainer];
+    [self.contentView addSubview:_expandButton];
+
+    [NSLayoutConstraint activateConstraints:@[
+      [self.contentView.centerXAnchor
+          constraintEqualToAnchor:_expandButton.centerXAnchor],
+      [_expandButton.topAnchor
+          constraintEqualToAnchor:_articleContainer.bottomAnchor],
+      [_expandButton.bottomAnchor
+          constraintEqualToAnchor:self.contentView.bottomAnchor]
+    ]];
+
+    ApplyVisualConstraintsWithMetrics(
+        @[
+          @"H:|[container]|", @"H:|-[title]-[imageContainer(imageSize)]-|",
+          @"H:|[image(imageSize)]", @"H:|-[text]-[imageContainer]",
+          @"V:|[image(imageSize)]", @"V:|-[title]-[text]-|",
+          @"V:|-[imageContainer(>=imageSize)]-|", @"V:|[container]"
+        ],
+        @{
+          @"image" : _imageView,
+          @"imageContainer" : imageContainer,
+          @"title" : _titleLabel,
+          @"text" : _subtitleLabel,
+          @"container" : _articleContainer
+        },
+        @{ @"imageSize" : @(kImageSize) });
+  }
+  return self;
+}
+
+#pragma mark - Properties
+
+- (void)setTitle:(NSString*)title {
+  _titleLabel.text = title;
+  _title = title;

[lpromero, 2017/01/11 13:19:20]

Is that needed?

[gambard, 2017/01/12 14:39:40]

Done.

+}
+
+- (void)setSubtitle:(NSString*)subtitle {
+  _subtitleLabel.text = subtitle;
+  _subtitle = subtitle;
+}
+
+- (void)setImage:(UIImage*)image {
+  _imageView.image = image;
+  _image = image;
+}
+
+- (void)setDetail:(NSString*)detail {
+  _detailText.text = detail;
+  _detail = detail;
+}
+
+#pragma mark - Private
+
+- (void)expandPressed {
+  [self.item expand:self];
+}
+
+- (void)retractPressed {
+  [self.item retract:self];
+}
+
+- (void)expand {
+  if (_isExpanded)
+    return;
+  _isExpanded = YES;
+
+  [self.contentView addSubview:_detailText];
+  [self.contentView addSubview:_interactionButton];
+  [_expandButton removeFromSuperview];
+
+  [NSLayoutConstraint activateConstraints:@[
+    [_detailText.topAnchor
+        constraintEqualToAnchor:_articleContainer.bottomAnchor],
+    [_detailText.bottomAnchor
+        constraintEqualToAnchor:_interactionButton.topAnchor],
+    [_interactionButton.bottomAnchor
+        constraintEqualToAnchor:self.contentView.bottomAnchor],
+    [_detailText.leadingAnchor
+        constraintEqualToAnchor:self.contentView.leadingAnchor],
+    [_detailText.trailingAnchor
+        constraintEqualToAnchor:self.contentView.trailingAnchor]
+  ]];
+}
+
+- (void)retract {
+  if (!_isExpanded)
+    return;
+  _isExpanded = NO;
+
+  [_detailText removeFromSuperview];
+  [_interactionButton removeFromSuperview];
+  [self.contentView addSubview:_expandButton];
+
+  [NSLayoutConstraint activateConstraints:@[
+    [self.contentView.centerXAnchor
+        constraintEqualToAnchor:_expandButton.centerXAnchor],
+    [_expandButton.topAnchor
+        constraintEqualToAnchor:_articleContainer.bottomAnchor],
+    [_expandButton.bottomAnchor
+        constraintEqualToAnchor:self.contentView.bottomAnchor]
+  ]];
+}
+
+#pragma mark - UIView
+
+// 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);
+  _subtitleLabel.preferredMaxLayoutWidth = parentWidth - kImageSize - 3 * 8;
+  _detailText.preferredMaxLayoutWidth = parentWidth;
+
+  // Re-layout with the new preferred width to allow the label to adjust its
+  // height.
+  [super layoutSubviews];
+}
+
+@end