Adds initial support for custom typing indicator views. Based on @sve…

…inhal implementation. Closes #201, and closes #202
slackhq · Jun 28, 2015 · ae86318 · ae86318
1 parent db3eba7
commit ae86318
Show file tree

Hide file tree

Showing 21 changed files with 1,216 additions and 1,931 deletions.
diff --git a/Examples/Messenger-Shared/MessageTableViewCell.h b/Examples/Messenger-Shared/MessageTableViewCell.h
@@ -8,8 +8,8 @@
 
 #import <UIKit/UIKit.h>
 
-#define kAvatarSize 30.0
-#define kMinimumHeight 50.0
+static CGFloat kMessageTableViewCellMinimumHeight = 50.0;
+static CGFloat kMessageTableViewCellAvatarHeight = 30.0;
 
 @interface MessageTableViewCell : UITableViewCell
 

diff --git a/Examples/Messenger-Shared/MessageTableViewCell.m b/Examples/Messenger-Shared/MessageTableViewCell.m
@@ -35,18 +35,19 @@ - (void)configureSubviews
                             @"attachmentView": self.attachmentView,
                             };
 
-    NSDictionary *metrics = @{@"tumbSize": @(kAvatarSize),
-                              @"trailing": @10,
-                              @"leading": @5,
+    NSDictionary *metrics = @{@"tumbSize": @(kMessageTableViewCellAvatarHeight),
+                              @"padding": @15,
+                              @"right": @10,
+                              @"left": @5,
                               @"attchSize": @80,
                               };
 
-    [self.contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-leading-[thumbnailView(tumbSize)]-trailing-[titleLabel(>=0)]-trailing-|" options:0 metrics:metrics views:views]];
-    [self.contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-leading-[thumbnailView(tumbSize)]-trailing-[bodyLabel(>=0)]-trailing-|" options:0 metrics:metrics views:views]];
-    [self.contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-leading-[thumbnailView(tumbSize)]-trailing-[attachmentView]-trailing-|" options:0 metrics:metrics views:views]];
+    [self.contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-left-[thumbnailView(tumbSize)]-right-[titleLabel(>=0)]-right-|" options:0 metrics:metrics views:views]];
+    [self.contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-left-[thumbnailView(tumbSize)]-right-[bodyLabel(>=0)]-right-|" options:0 metrics:metrics views:views]];
+    [self.contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-left-[thumbnailView(tumbSize)]-right-[attachmentView]-right-|" options:0 metrics:metrics views:views]];
 
-    [self.contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-trailing-[thumbnailView(tumbSize)]-(>=0)-|" options:0 metrics:metrics views:views]];
-    [self.contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-15-[titleLabel]-leading-[bodyLabel(>=0)]-leading-[attachmentView(>=0,<=attchSize)]-trailing-|" options:0 metrics:metrics views:views]];
+    [self.contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-right-[thumbnailView(tumbSize)]-(>=0)-|" options:0 metrics:metrics views:views]];
+    [self.contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-padding-[titleLabel]-left-[bodyLabel(>=0)]-left-[attachmentView(>=0,<=attchSize)]-right-|" options:0 metrics:metrics views:views]];
 }
 
 - (void)prepareForReuse
@@ -100,7 +101,7 @@ - (UIImageView *)thumbnailView
         _thumbnailView.userInteractionEnabled = NO;
         _thumbnailView.backgroundColor = [UIColor colorWithWhite:0.9 alpha:1.0];
 
-        _thumbnailView.layer.cornerRadius = kAvatarSize/2.0;
+        _thumbnailView.layer.cornerRadius = kMessageTableViewCellAvatarHeight/2.0;
         _thumbnailView.layer.masksToBounds = YES;
     }
     return _thumbnailView;
@@ -115,7 +116,7 @@ - (UIImageView *)attachmentView
         _attachmentView.backgroundColor = [UIColor clearColor];
         _attachmentView.contentMode = UIViewContentModeCenter;
 
-        _attachmentView.layer.cornerRadius = kAvatarSize/4.0;
+        _attachmentView.layer.cornerRadius = kMessageTableViewCellAvatarHeight/4.0;
         _attachmentView.layer.masksToBounds = YES;
     }
     return _attachmentView;

diff --git a/Examples/Messenger-Shared/MessageViewController.m b/Examples/Messenger-Shared/MessageViewController.m
@@ -9,10 +9,13 @@
 #import "MessageViewController.h"
 #import "MessageTableViewCell.h"
 #import "MessageTextView.h"
+#import "TypingIndicatorView.h"
 #import "Message.h"
 
 #import <LoremIpsum/LoremIpsum.h>
 
+#define DEBUG_CUSTOM_TYPING_INDICATOR 0
+
 static NSString *MessengerCellIdentifier = @"MessengerCell";
 static NSString *AutoCompletionCellIdentifier = @"AutoCompletionCell";
 
@@ -34,8 +37,7 @@ - (id)init
 {
     self = [super initWithTableViewStyle:UITableViewStylePlain];
     if (self) {
-        // Register a subclass of SLKTextView, if you need any special appearance and/or behavior customisation.
-        [self registerClassForTextView:[MessageTextView class]];
+        [self commonInit];
     }
     return self;
 }
@@ -44,8 +46,7 @@ - (id)initWithCoder:(NSCoder *)aDecoder
 {
     self = [super initWithCoder:aDecoder];
     if (self) {
-        // Register a subclass of SLKTextView, if you need any special appearance and/or behavior customisation.
-        [self registerClassForTextView:[MessageTextView class]];
+        [self commonInit];
     }
     return self;
 }
@@ -55,6 +56,17 @@ + (UITableViewStyle)tableViewStyleForCoder:(NSCoder *)decoder
     return UITableViewStylePlain;
 }
 
+- (void)commonInit
+{
+    // Register a SLKTextView subclass, if you need any special appearance and/or behavior customisation.
+    [self registerClassForTextView:[MessageTextView class]];
+
+#if DEBUG_CUSTOM_TYPING_INDICATOR
+    // Register a UIView subclass, conforming to SLKTypingIndicatorProtocol, to use a custom typing indicator view.
+    [self registerClassForTypingIndicatorView:[TypingIndicatorView class]];
+#endif
+}
+
 
 #pragma mark - View lifecycle
 
@@ -111,7 +123,9 @@ - (void)viewDidLoad
     self.textInputbar.counterStyle = SLKCounterStyleSplit;
     self.textInputbar.counterPosition = SLKCounterPositionTop;
 
+#if !DEBUG_CUSTOM_TYPING_INDICATOR
     self.typingIndicatorView.canResignByTouch = YES;
+#endif
 
     [self.autoCompletionView registerClass:[MessageTableViewCell class] forCellReuseIdentifier:AutoCompletionCellIdentifier];
     [self registerPrefixesForAutoCompletion:@[@"@", @"#", @":"]];
@@ -145,8 +159,23 @@ - (void)fillWithText:(id)sender
 
 - (void)simulateUserTyping:(id)sender
 {
-    if (!self.isEditing && !self.isAutoCompleting) {
+    if ([self canShowTypingIndicator]) {
+
+#if DEBUG_CUSTOM_TYPING_INDICATOR
+        __block TypingIndicatorView *view = (TypingIndicatorView *)self.typingIndicatorCustomView;
+
+        CGFloat scale = [UIScreen mainScreen].scale;
+        CGSize imgSize = CGSizeMake(kTypingIndicatorViewAvatarHeight*scale, kTypingIndicatorViewAvatarHeight*scale);
+
+        // This will cause the typing indicator to show after a delay ¯\_(ツ)_/¯
+        [LoremIpsum asyncPlaceholderImageWithSize:imgSize
+                                       completion:^(UIImage *image) {
+                                           UIImage *thumbnail = [UIImage imageWithCGImage:image.CGImage scale:scale orientation:UIImageOrientationUp];
+                                           [view presentIndicatorWithName:[LoremIpsum name] image:thumbnail];
+                                       }];
+#else
         [self.typingIndicatorView insertUsername:[LoremIpsum name]];
+#endif
     }
 }
 
@@ -322,6 +351,15 @@ - (BOOL)canPressRightButton
     return [super canPressRightButton];
 }
 
+- (BOOL)canShowTypingIndicator
+{
+#if DEBUG_CUSTOM_TYPING_INDICATOR
+    return YES;
+#else
+    return [super canShowTypingIndicator];
+#endif
+}
+
 - (BOOL)canShowAutoCompletion
 {
     NSArray *array = nil;
@@ -414,12 +452,7 @@ - (MessageTableViewCell *)messageCellForRowAtIndexPath:(NSIndexPath *)indexPath
     if (cell.needsPlaceholder)
     {
         CGFloat scale = [UIScreen mainScreen].scale;
-
-        if ([[UIScreen mainScreen] respondsToSelector:@selector(nativeScale)]) {
-            scale = [UIScreen mainScreen].nativeScale;
-        }
-
-        CGSize imgSize = CGSizeMake(kAvatarSize*scale, kAvatarSize*scale);
+        CGSize imgSize = CGSizeMake(kMessageTableViewCellAvatarHeight*scale, kMessageTableViewCellAvatarHeight*scale);
 
         [LoremIpsum asyncPlaceholderImageWithSize:imgSize
                                        completion:^(UIImage *image) {
@@ -470,7 +503,7 @@ - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPa
         NSDictionary *attributes = @{NSFontAttributeName: [UIFont systemFontOfSize:16.0],
                                      NSParagraphStyleAttributeName: paragraphStyle};
 
-        CGFloat width = CGRectGetWidth(tableView.frame)-kAvatarSize;
+        CGFloat width = CGRectGetWidth(tableView.frame)-kMessageTableViewCellAvatarHeight;
         width -= 25.0;
 
         CGRect titleBounds = [message.username boundingRectWithSize:CGSizeMake(width, CGFLOAT_MAX) options:NSStringDrawingUsesLineFragmentOrigin attributes:attributes context:NULL];
@@ -487,14 +520,14 @@ - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPa
             height += 80.0 + 10.0;
         }
 
-        if (height < kMinimumHeight) {
-            height = kMinimumHeight;
+        if (height < kMessageTableViewCellMinimumHeight) {
+            height = kMessageTableViewCellMinimumHeight;
         }
 
         return height;
     }
     else {
-        return kMinimumHeight;
+        return kMessageTableViewCellMinimumHeight;
     }
 }
 

diff --git a/Examples/Messenger-Shared/TypingIndicatorView.h b/Examples/Messenger-Shared/TypingIndicatorView.h
@@ -0,0 +1,20 @@
+//
+//  TypingIndicatorView.h
+//  Messenger
+//
+//  Created by Ignacio Romero Z. on 6/27/15.
+//  Copyright (c) 2015 Slack Technologies, Inc. All rights reserved.
+//
+
+#import <UIKit/UIKit.h>
+#import "SLKTypingIndicatorProtocol.h"
+
+static CGFloat kTypingIndicatorViewMinimumHeight = 80.0;
+static CGFloat kTypingIndicatorViewAvatarHeight = 30.0;
+
+@interface TypingIndicatorView : UIView <SLKTypingIndicatorProtocol>
+
+- (void)presentIndicatorWithName:(NSString *)name image:(UIImage *)image;
+- (void)dismissIndicator;
+
+@end