From dab8ddb37d221cff61cc445349d75bf34c4eac04 Mon Sep 17 00:00:00 2001
From: Matthew Chen <charlesmchen@gmail.com>
Date: Wed, 31 May 2017 21:12:27 -0400
Subject: [PATCH] Rework appearance of the unread indicator.

// FREEBIE
---
 .../ConversationView/MessagesViewController.m |  47 +++++++
 Signal/src/views/OWSUnreadIndicatorCell.m     | 119 +++++++++++-------
 2 files changed, 123 insertions(+), 43 deletions(-)

diff --git a/Signal/src/ViewControllers/ConversationView/MessagesViewController.m b/Signal/src/ViewControllers/ConversationView/MessagesViewController.m
index 7e0b78ce1..a6fe96db9 100644
--- a/Signal/src/ViewControllers/ConversationView/MessagesViewController.m
+++ b/Signal/src/ViewControllers/ConversationView/MessagesViewController.m
@@ -59,6 +59,7 @@
 #import <JSQMessagesViewController/JSQMessagesBubbleImage.h>
 #import <JSQMessagesViewController/JSQMessagesBubbleImageFactory.h>
 #import <JSQMessagesViewController/JSQMessagesCollectionViewFlowLayoutInvalidationContext.h>
+#import <JSQMessagesViewController/JSQMessagesCollectionViewLayoutAttributes.h>
 #import <JSQMessagesViewController/JSQMessagesTimestampFormatter.h>
 #import <JSQMessagesViewController/JSQSystemSoundPlayer+JSQMessages.h>
 #import <JSQMessagesViewController/UIColor+JSQMessages.h>
@@ -109,6 +110,40 @@ typedef enum : NSUInteger {
     kMediaTypeVideo,
 } kMediaTypes;
 
+@protocol OWSMessagesCollectionViewFlowLayoutDelegate <NSObject>
+
+- (BOOL)isSpecialItemAtIndexPath:(NSIndexPath *)indexPath;
+
+@end
+
+#pragma mark -
+
+@interface OWSMessagesCollectionViewFlowLayout : JSQMessagesCollectionViewFlowLayout
+
+@property (nonatomic, weak) id<OWSMessagesCollectionViewFlowLayoutDelegate> delegate;
+
+@property (nonatomic) CGRect lastBounds;
+
+@end
+
+#pragma mark -
+
+@implementation OWSMessagesCollectionViewFlowLayout
+
+- (CGSize)sizeForItemAtIndexPath:(NSIndexPath *)indexPath
+{
+    // The unread indicator should be sized according to its desired size.
+    if ([self.delegate isSpecialItemAtIndexPath:indexPath]) {
+        CGSize messageBubbleSize = [self messageBubbleSizeForItemAtIndexPath:indexPath];
+        CGFloat finalHeight = messageBubbleSize.height;
+        return CGSizeMake(CGRectGetWidth(self.collectionView.frame), ceilf((float)finalHeight));
+    } else {
+        return [super sizeForItemAtIndexPath:indexPath];
+    }
+}
+
+@end
+
 #pragma mark -
 
 @interface MessagesViewController () <AVAudioPlayerDelegate,
@@ -117,6 +152,7 @@ typedef enum : NSUInteger {
     CNContactViewControllerDelegate,
     JSQMessagesComposerTextViewPasteDelegate,
     OWSConversationSettingsViewDelegate,
+    OWSMessagesCollectionViewFlowLayoutDelegate,
     OWSTextViewPasteDelegate,
     OWSVoiceMemoGestureDelegate,
     UIDocumentMenuDelegate,
@@ -1097,6 +1133,9 @@ typedef enum : NSUInteger {
     self.view.frame = viewFrame;
     self.collectionView.frame = viewFrame;
 
+    OWSMessagesCollectionViewFlowLayout *layout = [OWSMessagesCollectionViewFlowLayout new];
+    layout.delegate = self;
+    self.collectionView.collectionViewLayout = layout;
     [self.collectionView.collectionViewLayout setMessageBubbleFont:[UIFont ows_dynamicTypeBodyFont]];
 
     self.collectionView.showsVerticalScrollIndicator = NO;
@@ -3867,6 +3906,14 @@ typedef enum : NSUInteger {
     }
 }
 
+#pragma mark - OWSMessagesCollectionViewFlowLayoutDelegate
+
+- (BOOL)isSpecialItemAtIndexPath:(NSIndexPath *)indexPath
+{
+    TSInteraction *interaction = [self interactionAtIndexPath:indexPath];
+    return [interaction isKindOfClass:[TSUnreadIndicatorInteraction class]];
+}
+
 #pragma mark - Class methods
 
 + (UINib *)nib
diff --git a/Signal/src/views/OWSUnreadIndicatorCell.m b/Signal/src/views/OWSUnreadIndicatorCell.m
index 462164a1d..24586cced 100644
--- a/Signal/src/views/OWSUnreadIndicatorCell.m
+++ b/Signal/src/views/OWSUnreadIndicatorCell.m
@@ -4,7 +4,6 @@
 
 #import "OWSUnreadIndicatorCell.h"
 #import "NSBundle+JSQMessages.h"
-#import "OWSBezierPathView.h"
 #import "TSUnreadIndicatorInteraction.h"
 #import "UIColor+OWS.h"
 #import "UIFont+OWS.h"
@@ -13,10 +12,12 @@
 
 @interface OWSUnreadIndicatorCell ()
 
+@property (nonatomic) UIView *titleBackgroundView;
+@property (nonatomic) UIView *titleTopHighlightView;
+@property (nonatomic) UIView *titleBottomHighlightView;
+@property (nonatomic) UIView *titlePillView;
 @property (nonatomic) UILabel *titleLabel;
 @property (nonatomic) UILabel *subtitleLabel;
-@property (nonatomic) OWSBezierPathView *leftPathView;
-@property (nonatomic) OWSBezierPathView *rightPathView;
 
 @end
 
@@ -34,11 +35,27 @@
     self.backgroundColor = [UIColor whiteColor];
 
     if (!self.titleLabel) {
+        self.titleBackgroundView = [UIView new];
+        self.titleBackgroundView.backgroundColor = [UIColor colorWithRGBHex:0xe2e2e2];
+        [self.contentView addSubview:self.titleBackgroundView];
+
+        self.titleTopHighlightView = [UIView new];
+        self.titleTopHighlightView.backgroundColor = [UIColor whiteColor];
+        [self.titleBackgroundView addSubview:self.titleTopHighlightView];
+
+        self.titleBottomHighlightView = [UIView new];
+        self.titleBottomHighlightView.backgroundColor = [UIColor colorWithRGBHex:0xd1d1d1];
+        [self.titleBackgroundView addSubview:self.titleBottomHighlightView];
+
+        self.titlePillView = [UIView new];
+        self.titlePillView.backgroundColor = [UIColor whiteColor];
+        [self.titleBackgroundView addSubview:self.titlePillView];
+
         self.titleLabel = [UILabel new];
         self.titleLabel.text = [OWSUnreadIndicatorCell titleForInteraction:self.interaction];
-        self.titleLabel.textColor = [UIColor ows_infoMessageBorderColor];
+        self.titleLabel.textColor = [UIColor blackColor];
         self.titleLabel.font = [OWSUnreadIndicatorCell textFont];
-        [self.contentView addSubview:self.titleLabel];
+        [self.titlePillView addSubview:self.titleLabel];
 
         self.subtitleLabel = [UILabel new];
         self.subtitleLabel.text = [OWSUnreadIndicatorCell subtitleForInteraction:self.interaction];
@@ -48,27 +65,6 @@
         self.subtitleLabel.lineBreakMode = NSLineBreakByWordWrapping;
         self.subtitleLabel.textAlignment = NSTextAlignmentCenter;
         [self.contentView addSubview:self.subtitleLabel];
-
-        CGFloat kLineThickness = 0.5f;
-        CGFloat kLineMargin = 5.f;
-        ConfigureShapeLayerBlock configureShapeLayerBlock = ^(CAShapeLayer *layer, CGRect bounds) {
-            OWSCAssert(layer);
-
-            CGRect pathBounds
-                = CGRectMake(0, (bounds.size.height - kLineThickness) * 0.5f, bounds.size.width, kLineThickness);
-            pathBounds = CGRectInset(pathBounds, kLineMargin, 0);
-            UIBezierPath *path = [UIBezierPath bezierPathWithRect:pathBounds];
-            layer.path = path.CGPath;
-            layer.fillColor = [[UIColor ows_infoMessageBorderColor] colorWithAlphaComponent:0.5f].CGColor;
-        };
-
-        self.leftPathView = [OWSBezierPathView new];
-        self.leftPathView.configureShapeLayerBlock = configureShapeLayerBlock;
-        [self.contentView addSubview:self.leftPathView];
-
-        self.rightPathView = [OWSBezierPathView new];
-        self.rightPathView.configureShapeLayerBlock = configureShapeLayerBlock;
-        [self.contentView addSubview:self.rightPathView];
     }
 }
 
@@ -110,7 +106,27 @@
     return 3.f;
 }
 
-+ (CGFloat)vMargin
++ (CGFloat)titleInnerHMargin
+{
+    return 10.f;
+}
+
++ (CGFloat)titleInnerVMargin
+{
+    return 5.f;
+}
+
++ (CGFloat)titleOuterVMargin
+{
+    return 5.f;
+}
+
++ (CGFloat)topVMargin
+{
+    return 5.f;
+}
+
++ (CGFloat)bottomVMargin
 {
     return 5.f;
 }
@@ -120,35 +136,52 @@
     [super layoutSubviews];
 
     [self.titleLabel sizeToFit];
-    if (self.subtitleLabel.text.length < 1) {
-        [self.titleLabel centerOnSuperview];
-    } else {
+
+    // It's a bit of a hack, but we use a view that extends _outside_ the cell's bounds
+    // to draw its background, since we want the background to extend to the edges of the
+    // collection view.
+    //
+    // This layout logic assumes that the cell insets are symmetrical and can be deduced
+    // from the cell frame.
+    CGRect titleBackgroundViewFrame = CGRectMake(-self.left,
+        OWSUnreadIndicatorCell.topVMargin,
+        self.width + self.left * 2.f,
+        self.titleLabel.height + OWSUnreadIndicatorCell.titleInnerVMargin * 2.f
+            + OWSUnreadIndicatorCell.titleOuterVMargin * 2.f);
+    self.titleBackgroundView.frame = [self convertRect:titleBackgroundViewFrame toView:self.contentView];
+
+    self.titleTopHighlightView.frame = CGRectMake(0, 0, self.titleBackgroundView.width, 1.f);
+    self.titleBottomHighlightView.frame
+        = CGRectMake(0, self.titleBackgroundView.height - 1.f, self.titleBackgroundView.width, 1.f);
+
+    self.titlePillView.frame = CGRectMake(0,
+        0,
+        self.titleLabel.width + OWSUnreadIndicatorCell.titleInnerHMargin * 2.f,
+        self.titleLabel.height + OWSUnreadIndicatorCell.titleInnerVMargin * 2.f);
+    self.titlePillView.layer.cornerRadius = self.titlePillView.height * 0.5f;
+    [self.titlePillView centerOnSuperview];
+
+    [self.titleLabel centerOnSuperview];
+
+    if (self.subtitleLabel.text.length > 0) {
         CGSize subtitleSize = [self.subtitleLabel
             sizeThatFits:CGSizeMake(
                              self.contentView.width - [OWSUnreadIndicatorCell subtitleHMargin] * 2.f, CGFLOAT_MAX)];
-        CGFloat contentHeight
-            = ceil(self.titleLabel.height) + OWSUnreadIndicatorCell.subtitleVSpacing + ceil(subtitleSize.height);
-
-        self.titleLabel.frame = CGRectMake(round((self.titleLabel.superview.width - self.titleLabel.width) * 0.5f),
-            round((self.titleLabel.superview.height - contentHeight) * 0.5f),
-            ceil(self.titleLabel.width),
-            ceil(self.titleLabel.height));
         self.subtitleLabel.frame = CGRectMake(round((self.titleLabel.superview.width - subtitleSize.width) * 0.5f),
-            round(self.titleLabel.bottom + OWSUnreadIndicatorCell.subtitleVSpacing),
+            round(self.titleBackgroundView.bottom + OWSUnreadIndicatorCell.subtitleVSpacing),
             ceil(subtitleSize.width),
             ceil(subtitleSize.height));
     }
-
-    self.leftPathView.frame = CGRectMake(0, self.titleLabel.top, self.titleLabel.left, self.titleLabel.height);
-    self.rightPathView.frame = CGRectMake(
-        self.titleLabel.right, self.titleLabel.top, self.width - self.titleLabel.right, self.titleLabel.height);
 }
 
 + (CGSize)cellSizeForInteraction:(TSUnreadIndicatorInteraction *)interaction
              collectionViewWidth:(CGFloat)collectionViewWidth
 {
     CGSize result = CGSizeMake(collectionViewWidth, 0);
-    result.height += self.vMargin * 2.f;
+    result.height += self.titleInnerVMargin * 2.f;
+    result.height += self.titleOuterVMargin * 2.f;
+    result.height += self.topVMargin;
+    result.height += self.bottomVMargin;
 
     NSString *title = [self titleForInteraction:interaction];
     NSString *subtitle = [self subtitleForInteraction:interaction];