[iOS][MF] Change buttons to look like chips
Changes the aspect of the buttons in Manual Fallback to be like chips.
Slides and more info in crbug.com/942001
Bug: 942002, 942001
Change-Id: I6fa86fc6f2abae6ded4f1f177efdf411c6ac8a03
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1529284
Commit-Queue: Javier Ernesto Flores Robles <javierrobles@chromium.org>
Reviewed-by: David Jean <djean@chromium.org>
Cr-Commit-Position: refs/heads/master@{#642450}diff --git a/ios/chrome/browser/ui/autofill/manual_fill/BUILD.gn b/ios/chrome/browser/ui/autofill/manual_fill/BUILD.gn
index 29014be..d3176385 100644
--- a/ios/chrome/browser/ui/autofill/manual_fill/BUILD.gn
+++ b/ios/chrome/browser/ui/autofill/manual_fill/BUILD.gn
@@ -76,6 +76,8 @@
"card_list_delegate.h",
"card_view_controller.h",
"card_view_controller.mm",
+ "chip_button.h",
+ "chip_button.mm",
"credential.h",
"credential.mm",
"credit_card.h",
diff --git a/ios/chrome/browser/ui/autofill/manual_fill/action_cell.mm b/ios/chrome/browser/ui/autofill/manual_fill/action_cell.mm
index 0add3bb75..0dd7806 100644
--- a/ios/chrome/browser/ui/autofill/manual_fill/action_cell.mm
+++ b/ios/chrome/browser/ui/autofill/manual_fill/action_cell.mm
@@ -4,6 +4,7 @@
#import "ios/chrome/browser/ui/autofill/manual_fill/action_cell.h"
+#import "ios/chrome/browser/ui/autofill/manual_fill/manual_fill_cell_button.h"
#import "ios/chrome/browser/ui/autofill/manual_fill/manual_fill_cell_utils.h"
#import "ios/chrome/browser/ui/autofill/manual_fill/uicolor_manualfill.h"
#import "ios/chrome/browser/ui/list_model/list_model.h"
@@ -139,9 +140,11 @@
UIView* guide = self.contentView;
self.grayLine = CreateGraySeparatorForContainer(guide);
- self.titleButton = CreateButtonWithSelectorAndTarget(
- @selector(userDidTapTitleButton:), self);
- self.titleButton.titleLabel.lineBreakMode = NSLineBreakByTruncatingTail;
+ self.titleButton = [ManualFillCellButton buttonWithType:UIButtonTypeCustom];
+ [self.titleButton addTarget:self
+ action:@selector(userDidTapTitleButton:)
+ forControlEvents:UIControlEventTouchUpInside];
+
[self.contentView addSubview:self.titleButton];
NSMutableArray<NSLayoutConstraint*>* staticConstraints =
diff --git a/ios/chrome/browser/ui/autofill/manual_fill/chip_button.h b/ios/chrome/browser/ui/autofill/manual_fill/chip_button.h
new file mode 100644
index 0000000..b7dc629
--- /dev/null
+++ b/ios/chrome/browser/ui/autofill/manual_fill/chip_button.h
@@ -0,0 +1,14 @@
+// Copyright 2019 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.
+
+#ifndef IOS_CHROME_BROWSER_UI_AUTOFILL_MANUAL_FILL_CHIP_BUTTON_H_
+#define IOS_CHROME_BROWSER_UI_AUTOFILL_MANUAL_FILL_CHIP_BUTTON_H_
+
+#import <UIKit/UIKit.h>
+
+// Buttons with a rounded border and gray background in highlighted state.
+@interface ChipButton : UIButton
+@end
+
+#endif // IOS_CHROME_BROWSER_UI_AUTOFILL_MANUAL_FILL_CHIP_BUTTON_H_
diff --git a/ios/chrome/browser/ui/autofill/manual_fill/chip_button.mm b/ios/chrome/browser/ui/autofill/manual_fill/chip_button.mm
new file mode 100644
index 0000000..8d98634
--- /dev/null
+++ b/ios/chrome/browser/ui/autofill/manual_fill/chip_button.mm
@@ -0,0 +1,102 @@
+// Copyright 2019 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/autofill/manual_fill/chip_button.h"
+
+#include "base/mac/foundation_util.h"
+#import "ios/chrome/browser/ui/autofill/manual_fill/uicolor_manualfill.h"
+
+#if !defined(__has_feature) || !__has_feature(objc_arc)
+#error "This file requires ARC support."
+#endif
+
+namespace {
+// Top and bottom padding for the button.
+static const CGFloat kChipVerticalPadding = 14;
+// Left and right padding for the button.
+static const CGFloat kChipHorizontalPadding = 14;
+// Vertical margins for the button. How much bigger the tap target is.
+static const CGFloat kChipVerticalMargin = 4;
+} // namespace
+
+@interface ChipButton ()
+
+// Gray rounded background view which gives the aspect of a chip.
+@property(strong, nonatomic) UIView* backgroundView;
+
+@end
+
+@implementation ChipButton
+
+- (id)initWithFrame:(CGRect)frame {
+ self = [super initWithFrame:frame];
+ if (self) {
+ [self initializeStyling];
+ }
+ return self;
+}
+
+- (id)initWithCoder:(NSCoder*)aDecoder {
+ self = [super initWithCoder:aDecoder];
+ if (self) {
+ [self initializeStyling];
+ }
+ return self;
+}
+
+- (void)awakeFromNib {
+ [super awakeFromNib];
+ [self initializeStyling];
+}
+
+- (void)layoutSubviews {
+ [super layoutSubviews];
+ self.backgroundView.layer.cornerRadius =
+ self.backgroundView.bounds.size.height / 2.0;
+}
+
+- (void)setHighlighted:(BOOL)highlighted {
+ [super setHighlighted:highlighted];
+ CGFloat alpha = highlighted ? 0.2 : 1.0;
+ self.backgroundView.alpha = alpha;
+}
+
+#pragma mark - Private
+
+- (void)initializeStyling {
+ _backgroundView = [[UIView alloc] init];
+ _backgroundView.userInteractionEnabled = NO;
+ _backgroundView.backgroundColor = UIColor.cr_manualFillChipColor;
+ _backgroundView.translatesAutoresizingMaskIntoConstraints = NO;
+
+ [self addSubview:_backgroundView];
+ [self sendSubviewToBack:_backgroundView];
+ [NSLayoutConstraint activateConstraints:@[
+ [_backgroundView.leadingAnchor constraintEqualToAnchor:self.leadingAnchor],
+ [_backgroundView.trailingAnchor
+ constraintEqualToAnchor:self.trailingAnchor],
+ [_backgroundView.topAnchor constraintEqualToAnchor:self.topAnchor
+ constant:kChipVerticalMargin],
+ [_backgroundView.bottomAnchor constraintEqualToAnchor:self.bottomAnchor
+ constant:-kChipVerticalMargin]
+ ]];
+
+ self.translatesAutoresizingMaskIntoConstraints = NO;
+
+ [self setTitleColor:UIColor.cr_manualFillChipDarkTextColor
+ forState:UIControlStateNormal];
+ self.titleLabel.adjustsFontForContentSizeCategory = YES;
+
+ UIFont* font = [UIFont preferredFontForTextStyle:UIFontTextStyleSubheadline];
+ UIFontDescriptor* boldFontDescriptor = [font.fontDescriptor
+ fontDescriptorWithSymbolicTraits:UIFontDescriptorTraitBold];
+ DCHECK(boldFontDescriptor);
+ self.titleLabel.font = [UIFont fontWithDescriptor:boldFontDescriptor size:0];
+
+ self.contentEdgeInsets =
+ UIEdgeInsetsMake(kChipVerticalPadding, kChipHorizontalPadding,
+ kChipVerticalPadding, kChipHorizontalPadding);
+}
+
+@end
diff --git a/ios/chrome/browser/ui/autofill/manual_fill/manual_fill_address_cell.mm b/ios/chrome/browser/ui/autofill/manual_fill/manual_fill_address_cell.mm
index 3d53ed8e..8230cfd 100644
--- a/ios/chrome/browser/ui/autofill/manual_fill/manual_fill_address_cell.mm
+++ b/ios/chrome/browser/ui/autofill/manual_fill/manual_fill_address_cell.mm
@@ -48,6 +48,9 @@
@interface ManualFillAddressCell ()
+// Separator line between cells, if needed.
+@property(nonatomic, strong) UIView* grayLine;
+
// The label with the line1 -- line2.
@property(nonatomic, strong) UILabel* addressLabel;
@@ -58,15 +61,9 @@
// A button showing the address associated first name.
@property(nonatomic, strong) UIButton* firstNameButton;
-// The separator label between first and middle name/initial.
-@property(nonatomic, strong) UILabel* middleNameSeparatorLabel;
-
// A button showing the address associated middle name or initial.
@property(nonatomic, strong) UIButton* middleNameButton;
-// The separator label between middle name/initial and last name.
-@property(nonatomic, strong) UILabel* lastNameSeparatorLabel;
-
// A button showing the address associated last name.
@property(nonatomic, strong) UIButton* lastNameButton;
@@ -82,18 +79,12 @@
// A button showing zip code.
@property(nonatomic, strong) UIButton* zipButton;
-// The separator label between zip and city.
-@property(nonatomic, strong) UILabel* citySeparatorLabel;
-
// A button showing city.
@property(nonatomic, strong) UIButton* cityButton;
// A button showing state/province.
@property(nonatomic, strong) UIButton* stateButton;
-// The separator label between state and country.
-@property(nonatomic, strong) UILabel* countrySeparatorLabel;
-
// A button showing country.
@property(nonatomic, strong) UIButton* countryButton;
@@ -141,7 +132,7 @@
self.delegate = delegate;
NSMutableArray<UIView*>* verticalLeadViews = [[NSMutableArray alloc] init];
- UIView* guide = self.contentView;
+ UIView* guide = self.grayLine;
NSString* blackText = nil;
NSString* grayText = nil;
@@ -208,13 +199,6 @@
self.firstNameButton.hidden = YES;
}
- if (showFirstName && showMiddleName && !largeTypes) {
- [nameLineViews addObject:self.middleNameSeparatorLabel];
- self.middleNameSeparatorLabel.hidden = NO;
- } else {
- self.middleNameSeparatorLabel.hidden = YES;
- }
-
if (showMiddleName) {
[self.middleNameButton setTitle:address.middleNameOrInitial
forState:UIControlStateNormal];
@@ -224,13 +208,6 @@
self.middleNameButton.hidden = YES;
}
- if ((showFirstName || showMiddleName) && showLastName && !largeTypes) {
- [nameLineViews addObject:self.lastNameSeparatorLabel];
- self.lastNameSeparatorLabel.hidden = NO;
- } else {
- self.lastNameSeparatorLabel.hidden = YES;
- }
-
if (showLastName) {
[self.lastNameButton setTitle:address.lastName
forState:UIControlStateNormal];
@@ -283,13 +260,6 @@
self.zipButton.hidden = YES;
}
- if (address.zip.length && address.city.length && !largeTypes) {
- [zipCityLineViews addObject:self.citySeparatorLabel];
- self.citySeparatorLabel.hidden = NO;
- } else {
- self.citySeparatorLabel.hidden = YES;
- }
-
if (address.city.length) {
[self.cityButton setTitle:address.city forState:UIControlStateNormal];
[zipCityLineViews addObject:self.cityButton];
@@ -315,13 +285,6 @@
self.stateButton.hidden = YES;
}
- if (address.state.length && address.country.length && !largeTypes) {
- [stateCountryLineViews addObject:self.countrySeparatorLabel];
- self.countrySeparatorLabel.hidden = NO;
- } else {
- self.countrySeparatorLabel.hidden = YES;
- }
-
if (address.country.length) {
[self.countryButton setTitle:address.country forState:UIControlStateNormal];
[stateCountryLineViews addObject:self.countryButton];
@@ -353,8 +316,9 @@
self.emailAddressButton.hidden = YES;
}
- AppendVerticalConstraintsSpacingForViews(self.dynamicConstraints,
- verticalLeadViews, self.contentView);
+ AppendVerticalConstraintsSpacingForViews(
+ self.dynamicConstraints, verticalLeadViews, self.contentView,
+ TopSystemSpacingMultiplier, 1, BottomSystemSpacingMultiplier);
[NSLayoutConstraint activateConstraints:self.dynamicConstraints];
}
@@ -372,14 +336,16 @@
return;
if (largeTypes) {
for (UIView* view in views) {
- AppendHorizontalConstraintsForViews(self.dynamicConstraints, @[ view ],
- guide);
+ AppendHorizontalConstraintsForViews(
+ self.dynamicConstraints, @[ view ], guide, kChipsHorizontalMargin,
+ AppendConstraintsHorizontalEqualOrSmallerThanGuide);
[verticalLeadViews addObject:view];
}
} else {
AppendHorizontalConstraintsForViews(
- self.dynamicConstraints, views, guide, 0,
- AppendConstraintsHorizontalSyncBaselines);
+ self.dynamicConstraints, views, guide, kChipsHorizontalMargin,
+ AppendConstraintsHorizontalSyncBaselines |
+ AppendConstraintsHorizontalEqualOrSmallerThanGuide);
[verticalLeadViews addObject:views.firstObject];
}
}
@@ -388,8 +354,7 @@
- (void)createViewHierarchy {
self.selectionStyle = UITableViewCellSelectionStyleNone;
- UIView* guide = self.contentView;
- CreateGraySeparatorForContainer(guide);
+ self.grayLine = CreateGraySeparatorForContainer(self.contentView);
NSMutableArray<NSLayoutConstraint*>* staticConstraints =
[[NSMutableArray alloc] init];
@@ -397,81 +362,76 @@
self.addressLabel = CreateLabel();
[self.contentView addSubview:self.addressLabel];
AppendHorizontalConstraintsForViews(staticConstraints, @[ self.addressLabel ],
- guide, ButtonHorizontalMargin);
+ self.contentView,
+ kButtonHorizontalMargin);
- self.firstNameButton = CreateButtonWithSelectorAndTarget(
- @selector(userDidTapAddressInfo:), self);
+ self.firstNameButton =
+ CreateChipWithSelectorAndTarget(@selector(userDidTapAddressInfo:), self);
[self.contentView addSubview:self.firstNameButton];
- self.middleNameSeparatorLabel = CreateLabel();
- self.middleNameSeparatorLabel.text = @"·";
- [self.contentView addSubview:self.middleNameSeparatorLabel];
-
- self.middleNameButton = CreateButtonWithSelectorAndTarget(
- @selector(userDidTapAddressInfo:), self);
+ self.middleNameButton =
+ CreateChipWithSelectorAndTarget(@selector(userDidTapAddressInfo:), self);
[self.contentView addSubview:self.middleNameButton];
- self.lastNameSeparatorLabel = CreateLabel();
- self.lastNameSeparatorLabel.text = @"·";
- [self.contentView addSubview:self.lastNameSeparatorLabel];
-
- self.lastNameButton = CreateButtonWithSelectorAndTarget(
- @selector(userDidTapAddressInfo:), self);
+ self.lastNameButton =
+ CreateChipWithSelectorAndTarget(@selector(userDidTapAddressInfo:), self);
[self.contentView addSubview:self.lastNameButton];
- self.companyButton = CreateButtonWithSelectorAndTarget(
- @selector(userDidTapAddressInfo:), self);
+ self.companyButton =
+ CreateChipWithSelectorAndTarget(@selector(userDidTapAddressInfo:), self);
[self.contentView addSubview:self.companyButton];
- AppendHorizontalConstraintsForViews(staticConstraints,
- @[ self.companyButton ], guide);
+ AppendHorizontalConstraintsForViews(
+ staticConstraints, @[ self.companyButton ], self.grayLine,
+ kChipsHorizontalMargin,
+ AppendConstraintsHorizontalEqualOrSmallerThanGuide);
- self.line1Button = CreateButtonWithSelectorAndTarget(
- @selector(userDidTapAddressInfo:), self);
+ self.line1Button =
+ CreateChipWithSelectorAndTarget(@selector(userDidTapAddressInfo:), self);
[self.contentView addSubview:self.line1Button];
- AppendHorizontalConstraintsForViews(staticConstraints, @[ self.line1Button ],
- guide);
+ AppendHorizontalConstraintsForViews(
+ staticConstraints, @[ self.line1Button ], self.grayLine,
+ kChipsHorizontalMargin,
+ AppendConstraintsHorizontalEqualOrSmallerThanGuide);
- self.line2Button = CreateButtonWithSelectorAndTarget(
- @selector(userDidTapAddressInfo:), self);
+ self.line2Button =
+ CreateChipWithSelectorAndTarget(@selector(userDidTapAddressInfo:), self);
[self.contentView addSubview:self.line2Button];
- AppendHorizontalConstraintsForViews(staticConstraints, @[ self.line2Button ],
- guide);
+ AppendHorizontalConstraintsForViews(
+ staticConstraints, @[ self.line2Button ], self.grayLine,
+ kChipsHorizontalMargin,
+ AppendConstraintsHorizontalEqualOrSmallerThanGuide);
- self.zipButton = CreateButtonWithSelectorAndTarget(
- @selector(userDidTapAddressInfo:), self);
+ self.zipButton =
+ CreateChipWithSelectorAndTarget(@selector(userDidTapAddressInfo:), self);
[self.contentView addSubview:self.zipButton];
- self.citySeparatorLabel = CreateLabel();
- self.citySeparatorLabel.text = @"·";
- [self.contentView addSubview:self.citySeparatorLabel];
-
- self.cityButton = CreateButtonWithSelectorAndTarget(
- @selector(userDidTapAddressInfo:), self);
+ self.cityButton =
+ CreateChipWithSelectorAndTarget(@selector(userDidTapAddressInfo:), self);
[self.contentView addSubview:self.cityButton];
- self.stateButton = CreateButtonWithSelectorAndTarget(
- @selector(userDidTapAddressInfo:), self);
+ self.stateButton =
+ CreateChipWithSelectorAndTarget(@selector(userDidTapAddressInfo:), self);
[self.contentView addSubview:self.stateButton];
- self.countrySeparatorLabel = CreateLabel();
- self.countrySeparatorLabel.text = @"·";
- [self.contentView addSubview:self.countrySeparatorLabel];
-
- self.countryButton = CreateButtonWithSelectorAndTarget(
- @selector(userDidTapAddressInfo:), self);
+ self.countryButton =
+ CreateChipWithSelectorAndTarget(@selector(userDidTapAddressInfo:), self);
[self.contentView addSubview:self.countryButton];
- self.phoneNumberButton = CreateButtonWithSelectorAndTarget(
- @selector(userDidTapAddressInfo:), self);
+ self.phoneNumberButton =
+ CreateChipWithSelectorAndTarget(@selector(userDidTapAddressInfo:), self);
[self.contentView addSubview:self.phoneNumberButton];
- AppendHorizontalConstraintsForViews(staticConstraints,
- @[ self.phoneNumberButton ], guide);
+ AppendHorizontalConstraintsForViews(
+ staticConstraints, @[ self.phoneNumberButton ], self.grayLine,
+ kChipsHorizontalMargin,
+ AppendConstraintsHorizontalEqualOrSmallerThanGuide);
- self.emailAddressButton = CreateButtonWithSelectorAndTarget(
- @selector(userDidTapAddressInfo:), self);
+ self.emailAddressButton =
+ CreateChipWithSelectorAndTarget(@selector(userDidTapAddressInfo:), self);
[self.contentView addSubview:self.emailAddressButton];
- AppendHorizontalConstraintsForViews(staticConstraints,
- @[ self.emailAddressButton ], guide);
+ AppendHorizontalConstraintsForViews(
+ staticConstraints, @[ self.emailAddressButton ], self.grayLine,
+ kChipsHorizontalMargin,
+ AppendConstraintsHorizontalEqualOrSmallerThanGuide);
// Without this set, Voice Over will read the content vertically instead of
// horizontally.
diff --git a/ios/chrome/browser/ui/autofill/manual_fill/manual_fill_card_cell.mm b/ios/chrome/browser/ui/autofill/manual_fill/manual_fill_card_cell.mm
index 9abf38d..5e2e30c 100644
--- a/ios/chrome/browser/ui/autofill/manual_fill/manual_fill_card_cell.mm
+++ b/ios/chrome/browser/ui/autofill/manual_fill/manual_fill_card_cell.mm
@@ -186,8 +186,9 @@
self.cardholderButton.hidden = YES;
}
- AppendVerticalConstraintsSpacingForViews(self.dynamicConstraints,
- verticalViews, self.contentView);
+ AppendVerticalConstraintsSpacingForViews(
+ self.dynamicConstraints, verticalViews, self.contentView,
+ TopSystemSpacingMultiplier, 1, BottomSystemSpacingMultiplier);
[NSLayoutConstraint activateConstraints:self.dynamicConstraints];
}
@@ -197,8 +198,7 @@
- (void)createViewHierarchy {
self.selectionStyle = UITableViewCellSelectionStyleNone;
- UIView* guide = self.contentView;
- CreateGraySeparatorForContainer(guide);
+ UIView* grayLine = CreateGraySeparatorForContainer(self.contentView);
NSMutableArray<NSLayoutConstraint*>* staticConstraints =
[[NSMutableArray alloc] init];
@@ -210,35 +210,40 @@
self.cardIcon.translatesAutoresizingMaskIntoConstraints = NO;
[self.contentView addSubview:self.cardIcon];
AppendHorizontalConstraintsForViews(
- staticConstraints, @[ self.cardLabel, self.cardIcon ], guide,
- ButtonHorizontalMargin, AppendConstraintsHorizontalExtraSpaceLeft);
+ staticConstraints, @[ self.cardLabel, self.cardIcon ], self.contentView,
+ kButtonHorizontalMargin, AppendConstraintsHorizontalExtraSpaceLeft);
[NSLayoutConstraint activateConstraints:@[
[self.cardIcon.bottomAnchor
constraintEqualToAnchor:self.cardLabel.firstBaselineAnchor]
]];
self.cardNumberButton =
- CreateButtonWithSelectorAndTarget(@selector(userDidTapCardNumber:), self);
+ CreateChipWithSelectorAndTarget(@selector(userDidTapCardNumber:), self);
[self.contentView addSubview:self.cardNumberButton];
- AppendHorizontalConstraintsForViews(staticConstraints,
- @[ self.cardNumberButton ], guide);
+ AppendHorizontalConstraintsForViews(
+ staticConstraints, @[ self.cardNumberButton ], grayLine,
+ kChipsHorizontalMargin,
+ AppendConstraintsHorizontalEqualOrSmallerThanGuide);
self.cardholderButton =
- CreateButtonWithSelectorAndTarget(@selector(userDidTapCardInfo:), self);
+ CreateChipWithSelectorAndTarget(@selector(userDidTapCardInfo:), self);
[self.contentView addSubview:self.cardholderButton];
- AppendHorizontalConstraintsForViews(staticConstraints,
- @[ self.cardholderButton ], guide);
+ AppendHorizontalConstraintsForViews(
+ staticConstraints, @[ self.cardholderButton ], grayLine,
+ kChipsHorizontalMargin,
+ AppendConstraintsHorizontalEqualOrSmallerThanGuide);
// Expiration line.
self.expirationMonthButton =
- CreateButtonWithSelectorAndTarget(@selector(userDidTapCardInfo:), self);
+ CreateChipWithSelectorAndTarget(@selector(userDidTapCardInfo:), self);
[self.contentView addSubview:self.expirationMonthButton];
self.expirationYearButton =
- CreateButtonWithSelectorAndTarget(@selector(userDidTapCardInfo:), self);
+ CreateChipWithSelectorAndTarget(@selector(userDidTapCardInfo:), self);
[self.contentView addSubview:self.expirationYearButton];
UILabel* expirationSeparatorLabel = CreateLabel();
expirationSeparatorLabel.font =
[UIFont preferredFontForTextStyle:UIFontTextStyleHeadline];
+ [expirationSeparatorLabel setTextColor:UIColor.cr_manualFillChipColor];
expirationSeparatorLabel.text = @"/";
[self.contentView addSubview:expirationSeparatorLabel];
AppendHorizontalConstraintsForViews(
@@ -247,8 +252,9 @@
self.expirationMonthButton, expirationSeparatorLabel,
self.expirationYearButton
],
- guide, 0, AppendConstraintsHorizontalSyncBaselines);
-
+ grayLine, kChipsHorizontalMargin,
+ AppendConstraintsHorizontalSyncBaselines |
+ AppendConstraintsHorizontalEqualOrSmallerThanGuide);
// Without this set, Voice Over will read the content vertically instead of
// horizontally.
diff --git a/ios/chrome/browser/ui/autofill/manual_fill/manual_fill_cell_button.mm b/ios/chrome/browser/ui/autofill/manual_fill/manual_fill_cell_button.mm
index 198d221..41262f88 100644
--- a/ios/chrome/browser/ui/autofill/manual_fill/manual_fill_cell_button.mm
+++ b/ios/chrome/browser/ui/autofill/manual_fill/manual_fill_cell_button.mm
@@ -4,18 +4,62 @@
#import "ios/chrome/browser/ui/autofill/manual_fill/manual_fill_cell_button.h"
+#import "ios/chrome/browser/ui/autofill/manual_fill/manual_fill_cell_utils.h"
#import "ios/chrome/browser/ui/autofill/manual_fill/uicolor_manualfill.h"
#if !defined(__has_feature) || !__has_feature(objc_arc)
#error "This file requires ARC support."
#endif
+namespace {
+
+// Top and bottom margins for buttons.
+static const CGFloat kButtonVerticalMargin = 12;
+
+} // namespace
+
@implementation ManualFillCellButton
+- (id)initWithFrame:(CGRect)frame {
+ self = [super initWithFrame:frame];
+ if (self) {
+ [self initializeStyling];
+ }
+ return self;
+}
+
+- (id)initWithCoder:(NSCoder*)aDecoder {
+ self = [super initWithCoder:aDecoder];
+ if (self) {
+ [self initializeStyling];
+ }
+ return self;
+}
+
+- (void)awakeFromNib {
+ [super awakeFromNib];
+ [self initializeStyling];
+}
+
- (void)setHighlighted:(BOOL)highlighted {
[super setHighlighted:highlighted];
CGFloat alpha = highlighted ? 0.07 : 0;
self.backgroundColor = [UIColor colorWithWhite:0 alpha:alpha];
}
+#pragma mark - Private
+
+- (void)initializeStyling {
+ [self setTitleColor:UIColor.cr_manualFillTintColor
+ forState:UIControlStateNormal];
+ self.translatesAutoresizingMaskIntoConstraints = NO;
+ self.titleLabel.font = [UIFont preferredFontForTextStyle:UIFontTextStyleBody];
+ self.titleLabel.adjustsFontForContentSizeCategory = YES;
+ self.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeading;
+ self.contentEdgeInsets =
+ UIEdgeInsetsMake(kButtonVerticalMargin, kButtonHorizontalMargin,
+ kButtonVerticalMargin, kButtonHorizontalMargin);
+ self.titleLabel.lineBreakMode = NSLineBreakByTruncatingTail;
+}
+
@end
diff --git a/ios/chrome/browser/ui/autofill/manual_fill/manual_fill_cell_utils.h b/ios/chrome/browser/ui/autofill/manual_fill/manual_fill_cell_utils.h
index 9052130..f872b74 100644
--- a/ios/chrome/browser/ui/autofill/manual_fill/manual_fill_cell_utils.h
+++ b/ios/chrome/browser/ui/autofill/manual_fill/manual_fill_cell_utils.h
@@ -9,6 +9,12 @@
namespace {
+// Left and right margins of the cell content and buttons.
+static const CGFloat kButtonHorizontalMargin = 16;
+
+// Left and right margins for the chips.
+static const CGFloat kChipsHorizontalMargin = -1;
+
// The multiplier for the base system spacing at the top margin.
static const CGFloat TopSystemSpacingMultiplier = 1.58;
@@ -18,26 +24,21 @@
// The multiplier for the base system spacing at the bottom margin.
static const CGFloat BottomSystemSpacingMultiplier = 2.26;
-// Top and bottom margins for buttons.
-static const CGFloat ButtonVerticalMargin = 12;
-
-// Left and right margins of the cell content and buttons.
-static const CGFloat ButtonHorizontalMargin = 16;
-
// Options for |AppendHorizontalConstraintsForViews|.
typedef NS_OPTIONS(NSUInteger, AppendConstraints) {
AppendConstraintsNone = 0,
// Add to options to give remaining space in the line to leftmost item.
AppendConstraintsHorizontalExtraSpaceLeft = 1 << 0,
- // Add to options to give remaining space in the line to leftmost item.
+ // Add an equal constraint to the baselines.
AppendConstraintsHorizontalSyncBaselines = 1 << 1,
+ // The views can be constraint smaller than the guide.
+ AppendConstraintsHorizontalEqualOrSmallerThanGuide = 1 << 2,
};
} // namespace
-// Creates a blank button in fallback style, for the given |action| and
-// |target|.
-UIButton* CreateButtonWithSelectorAndTarget(SEL action, id target);
+// Creates a blank button in chip style, for the given |action| and |target|.
+UIButton* CreateChipWithSelectorAndTarget(SEL action, id target);
// Adds vertical constraints to given list, laying |views| vertically (based on
// firstBaselineAnchor for the buttons or labels) inside |container|, starting
diff --git a/ios/chrome/browser/ui/autofill/manual_fill/manual_fill_cell_utils.mm b/ios/chrome/browser/ui/autofill/manual_fill/manual_fill_cell_utils.mm
index 741e41e7..f0fcd64 100644
--- a/ios/chrome/browser/ui/autofill/manual_fill/manual_fill_cell_utils.mm
+++ b/ios/chrome/browser/ui/autofill/manual_fill/manual_fill_cell_utils.mm
@@ -6,7 +6,7 @@
#include "base/strings/sys_string_conversions.h"
#include "base/strings/utf_string_conversions.h"
-#import "ios/chrome/browser/ui/autofill/manual_fill/manual_fill_cell_button.h"
+#import "ios/chrome/browser/ui/autofill/manual_fill/chip_button.h"
#import "ios/chrome/browser/ui/autofill/manual_fill/uicolor_manualfill.h"
#import "ios/chrome/common/ui_util/constraints_ui_util.h"
#include "ios/chrome/grit/ios_strings.h"
@@ -16,22 +16,18 @@
#error "This file requires ARC support."
#endif
-UIButton* CreateButtonWithSelectorAndTarget(SEL action, id target) {
- UIButton* button = [ManualFillCellButton buttonWithType:UIButtonTypeCustom];
- [button setTitleColor:UIColor.cr_manualFillTintColor
- forState:UIControlStateNormal];
+namespace {
+// Horizontal spacing between views in |AppendHorizontalConstraintsForViews|.
+constexpr CGFloat kHorizontalSpacing = 16;
+} // namespace
+
+UIButton* CreateChipWithSelectorAndTarget(SEL action, id target) {
+ UIButton* button = [ChipButton buttonWithType:UIButtonTypeCustom];
button.translatesAutoresizingMaskIntoConstraints = NO;
- button.titleLabel.font =
- [UIFont preferredFontForTextStyle:UIFontTextStyleBody];
button.titleLabel.adjustsFontForContentSizeCategory = YES;
- button.contentHorizontalAlignment =
- UIControlContentHorizontalAlignmentLeading;
[button addTarget:target
action:action
forControlEvents:UIControlEventTouchUpInside];
- button.contentEdgeInsets =
- UIEdgeInsetsMake(ButtonVerticalMargin, ButtonHorizontalMargin,
- ButtonVerticalMargin, ButtonHorizontalMargin);
return button;
}
@@ -57,11 +53,11 @@
CGFloat multiplier = topSystemSpacingMultiplier;
for (UIView* view in views) {
[constraints
- addObject:[view.firstBaselineAnchor
+ addObject:[view.topAnchor
constraintEqualToSystemSpacingBelowAnchor:previousAnchor
multiplier:multiplier]];
multiplier = middleSystemSpacingMultiplier;
- previousAnchor = view.lastBaselineAnchor;
+ previousAnchor = view.bottomAnchor;
}
multiplier = bottomSystemSpacingMultiplier;
[constraints
@@ -104,30 +100,40 @@
? UILayoutPriorityDefaultLow
: UILayoutPriorityDefaultHigh;
- CGFloat shift = margin;
+ BOOL isFirstView = YES;
for (UIView* view in views) {
+ CGFloat constant = isFirstView ? margin : kHorizontalSpacing;
[constraints
addObject:[view.leadingAnchor constraintEqualToAnchor:previousAnchor
- constant:shift]];
+ constant:constant]];
[view setContentCompressionResistancePriority:firstPriority
forAxis:
UILayoutConstraintAxisHorizontal];
[view setContentHuggingPriority:lastPriority
forAxis:UILayoutConstraintAxisHorizontal];
previousAnchor = view.trailingAnchor;
- shift = 0;
+ isFirstView = NO;
}
- [constraints addObject:[views.lastObject.trailingAnchor
- constraintEqualToAnchor:guide.trailingAnchor
- constant:-margin]];
- // Give all remaining space to the last button, minus margin, as per UX.
- [views.lastObject
- setContentCompressionResistancePriority:lastPriority
- forAxis:UILayoutConstraintAxisHorizontal];
- [views.lastObject setContentHuggingPriority:firstPriority
- forAxis:UILayoutConstraintAxisHorizontal];
+ if (options & AppendConstraintsHorizontalEqualOrSmallerThanGuide) {
+ [constraints
+ addObject:[views.lastObject.trailingAnchor
+ constraintLessThanOrEqualToAnchor:guide.trailingAnchor
+ constant:-margin]];
+ } else {
+ [constraints addObject:[views.lastObject.trailingAnchor
+ constraintEqualToAnchor:guide.trailingAnchor
+ constant:-margin]];
+ // Give all remaining space to the last button, minus margin, as per UX.
+ [views.lastObject
+ setContentCompressionResistancePriority:lastPriority
+ forAxis:
+ UILayoutConstraintAxisHorizontal];
+ [views.lastObject
+ setContentHuggingPriority:firstPriority
+ forAxis:UILayoutConstraintAxisHorizontal];
+ }
if (options & AppendConstraintsHorizontalSyncBaselines) {
AppendEqualBaselinesConstraints(constraints, views);
}
@@ -169,9 +175,9 @@
[grayLine.heightAnchor constraintEqualToConstant:1],
// Horizontal constraints.
[grayLine.leadingAnchor constraintEqualToAnchor:safeArea.leadingAnchor
- constant:ButtonHorizontalMargin],
+ constant:kButtonHorizontalMargin],
[safeArea.trailingAnchor constraintEqualToAnchor:grayLine.trailingAnchor
- constant:ButtonHorizontalMargin],
+ constant:kButtonHorizontalMargin],
]];
return grayLine;
diff --git a/ios/chrome/browser/ui/autofill/manual_fill/manual_fill_password_cell.mm b/ios/chrome/browser/ui/autofill/manual_fill/manual_fill_password_cell.mm
index 457be8a..d1ab656 100644
--- a/ios/chrome/browser/ui/autofill/manual_fill/manual_fill_password_cell.mm
+++ b/ios/chrome/browser/ui/autofill/manual_fill/manual_fill_password_cell.mm
@@ -115,7 +115,7 @@
[self.usernameButton setTitle:@"" forState:UIControlStateNormal];
self.usernameButton.enabled = YES;
- [self.usernameButton setTitleColor:UIColor.cr_manualFillTintColor
+ [self.usernameButton setTitleColor:UIColor.cr_manualFillChipDarkTextColor
forState:UIControlStateNormal];
[self.passwordButton setTitle:@"" forState:UIControlStateNormal];
@@ -205,8 +205,7 @@
self.dynamicConstraints = [[NSMutableArray alloc] init];
AppendVerticalConstraintsSpacingForViews(
self.dynamicConstraints, verticalLeadViews, self.contentView,
- topSystemSpacingMultiplier, MiddleSystemSpacingMultiplier,
- bottomSystemSpacingMultiplier);
+ topSystemSpacingMultiplier, 1, bottomSystemSpacingMultiplier);
[NSLayoutConstraint activateConstraints:self.dynamicConstraints];
}
@@ -216,8 +215,7 @@
- (void)createViewHierarchy {
self.selectionStyle = UITableViewCellSelectionStyleNone;
- UIView* guide = self.contentView;
- self.grayLine = CreateGraySeparatorForContainer(guide);
+ self.grayLine = CreateGraySeparatorForContainer(self.contentView);
NSMutableArray<NSLayoutConstraint*>* staticConstraints =
[[NSMutableArray alloc] init];
@@ -226,20 +224,24 @@
self.siteNameLabel.adjustsFontForContentSizeCategory = YES;
[self.contentView addSubview:self.siteNameLabel];
AppendHorizontalConstraintsForViews(staticConstraints,
- @[ self.siteNameLabel ], guide,
- ButtonHorizontalMargin);
+ @[ self.siteNameLabel ], self.contentView,
+ kButtonHorizontalMargin);
- self.usernameButton = CreateButtonWithSelectorAndTarget(
+ self.usernameButton = CreateChipWithSelectorAndTarget(
@selector(userDidTapUsernameButton:), self);
[self.contentView addSubview:self.usernameButton];
- AppendHorizontalConstraintsForViews(staticConstraints,
- @[ self.usernameButton ], guide);
+ AppendHorizontalConstraintsForViews(
+ staticConstraints, @[ self.usernameButton ], self.grayLine,
+ kChipsHorizontalMargin,
+ AppendConstraintsHorizontalEqualOrSmallerThanGuide);
- self.passwordButton = CreateButtonWithSelectorAndTarget(
+ self.passwordButton = CreateChipWithSelectorAndTarget(
@selector(userDidTapPasswordButton:), self);
[self.contentView addSubview:self.passwordButton];
- AppendHorizontalConstraintsForViews(staticConstraints,
- @[ self.passwordButton ], guide);
+ AppendHorizontalConstraintsForViews(
+ staticConstraints, @[ self.passwordButton ], self.grayLine,
+ kChipsHorizontalMargin,
+ AppendConstraintsHorizontalEqualOrSmallerThanGuide);
[NSLayoutConstraint activateConstraints:staticConstraints];
}
diff --git a/ios/chrome/browser/ui/autofill/manual_fill/uicolor_manualfill.h b/ios/chrome/browser/ui/autofill/manual_fill/uicolor_manualfill.h
index b85d53e67..b30f7eb 100644
--- a/ios/chrome/browser/ui/autofill/manual_fill/uicolor_manualfill.h
+++ b/ios/chrome/browser/ui/autofill/manual_fill/uicolor_manualfill.h
@@ -12,6 +12,12 @@
// Color to set in interactable elements for manual fill (0.1, 0.45, 0.91 RGB).
@property(class, nonatomic, readonly) UIColor* cr_manualFillTintColor;
+// Color for the text in manual fill chips.
+@property(class, nonatomic, readonly) UIColor* cr_manualFillChipDarkTextColor;
+
+// Color for the manual fill chips.
+@property(class, nonatomic, readonly) UIColor* cr_manualFillChipColor;
+
// Color for the line separators in manual fill (0.66, 0.66, 0.66 RGB).
@property(class, nonatomic, readonly) UIColor* cr_manualFillSeparatorColor;
diff --git a/ios/chrome/browser/ui/autofill/manual_fill/uicolor_manualfill.mm b/ios/chrome/browser/ui/autofill/manual_fill/uicolor_manualfill.mm
index f21412eb..edfa1ac 100644
--- a/ios/chrome/browser/ui/autofill/manual_fill/uicolor_manualfill.mm
+++ b/ios/chrome/browser/ui/autofill/manual_fill/uicolor_manualfill.mm
@@ -16,16 +16,32 @@
return color;
}
++ (UIColor*)cr_manualFillChipColor {
+ static UIColor* color = [UIColor colorWithRed:236.0 / 255.0
+ green:239.0 / 255.0
+ blue:241.0 / 255.0
+ alpha:1.0];
+ return color;
+}
+
++ (UIColor*)cr_manualFillChipDarkTextColor {
+ static UIColor* color = [UIColor colorWithRed:55.0 / 255.0
+ green:55.0 / 255.0
+ blue:55.0 / 255.0
+ alpha:1.0];
+ return color;
+}
+
+ (UIColor*)cr_manualFillSeparatorColor {
- static UIColor* color = [UIColor colorWithRed:188 / 255.0
- green:187 / 255.0
- blue:193 / 255.0
- alpha:1 / 1.0];
+ static UIColor* color = [UIColor colorWithRed:188.0 / 255.0
+ green:187.0 / 255.0
+ blue:193.0 / 255.0
+ alpha:1.0];
return color;
}
+ (UIColor*)cr_manualFillGrayLineColor {
- static UIColor* color = [UIColor colorWithWhite:0.88 alpha:1];
+ static UIColor* color = [UIColor colorWithWhite:0.88 alpha:1.0];
return color;
}
