Explore typing notifications inspired by web

Riot/Modules/DotsView/DotsView.swift

@@ -21,15 +21,9 @@ import UIKit
 class DotsView: UIView {
     // MARK: - Public properties
 
-    @IBInspectable var highlightedDotColor: UIColor = .darkGray {
-        didSet {
-        }
-    }
+    @IBInspectable var highlightedDotColor: UIColor = .darkGray
 
-    @IBInspectable var dotColor: UIColor = .lightGray {
-        didSet {
-        }
-    }
+    @IBInspectable var dotColor: UIColor = .lightGray
 
     @IBInspectable var dotMaxWidth: CGFloat = 10 {
         didSet {

Riot/Modules/Room/DataSources/RoomDataSource.h

@@ -21,6 +21,8 @@
 
 #import "MXRoomSummary+Riot.h"
 
+#import "TypingUserInfo.h"
+
 @protocol RoomDataSourceDelegate;
 
 /**
@@ -51,7 +53,7 @@
 /**
  List of members who are typing in the room.
  */
-@property(nonatomic, nullable) NSArray *currentTypingUsers;
+@property(nonatomic, nullable) NSArray<TypingUserInfo *> *currentTypingUsers;
 
 /**
  Check if there is an active jitsi widget in the room and return it.

Riot/Modules/Room/DataSources/RoomDataSource.m

@@ -27,6 +27,7 @@
 
 #import "MXRoom+Riot.h"
 
+const CGFloat kTypingCellHeight = 24;
 
 @interface RoomDataSource() <BubbleReactionsViewModelDelegate>
 {
@@ -191,7 +192,7 @@ - (CGFloat)cellHeightAtIndex:(NSInteger)index withMaximumWidth:(CGFloat)maxWidth
 {
     if (index == self.typingCellIndex)
     {
-        return 24;
+        return kTypingCellHeight;
     }
 
     return [super cellHeightAtIndex:index withMaximumWidth:maxWidth];

Riot/Modules/Room/RoomViewController.m

@@ -1354,8 +1354,8 @@ - (void)setScrollToBottomHidden:(BOOL)scrollToBottomHidden
         if (roomDataSource.currentTypingUsers && !roomDataSource.currentTypingUsers.count)
         {
             [roomDataSource resetTypingNotification];
-            NSInteger count = [roomDataSource tableView:self.bubblesTableView numberOfRowsInSection:0];
-            [self.bubblesTableView deleteRowsAtIndexPaths:@[[NSIndexPath indexPathForRow:count inSection:0]] withRowAnimation:UITableViewRowAnimationNone];
+            NSInteger count = [self.bubblesTableView numberOfRowsInSection:0];
+            [self.bubblesTableView deleteRowsAtIndexPaths:@[[NSIndexPath indexPathForRow:count - 1 inSection:0]] withRowAnimation:UITableViewRowAnimationNone];
         }
     }
 
@@ -4159,7 +4159,7 @@ - (void)refreshTypingNotification
         }
         else
         {
-            NSInteger count = [self.roomDataSource tableView:self.bubblesTableView numberOfRowsInSection:0];
+            NSInteger count = [self.bubblesTableView numberOfRowsInSection:0];
             NSIndexPath *lastIndexPath = [NSIndexPath indexPathForRow:count - 1 inSection:0];
             [self.bubblesTableView reloadRowsAtIndexPaths:@[lastIndexPath] withRowAnimation:UITableViewRowAnimationFade];
         }
@@ -4168,7 +4168,7 @@ - (void)refreshTypingNotification
             && !self.bubblesTableView.isDragging
             && !self.bubblesTableView.isDecelerating)
         {
-            NSInteger count = [self.roomDataSource tableView:self.bubblesTableView numberOfRowsInSection:0];
+            NSInteger count = [self.bubblesTableView numberOfRowsInSection:0];
             if (count)
             {
                 [self scrollBubblesTableViewToBottomAnimated:YES];

Riot/Modules/Room/Views/BubbleCells/RoomTypingBubbleCell.swift

@@ -17,17 +17,21 @@
 import UIKit
 
 @objcMembers
-class RoomTypingBubbleCell: UITableViewCell {
+class RoomTypingBubbleCell: UITableViewCell, Themable {
     // MARK: - Constants
 
     static let cellIdentifier = "RoomTypingBubbleCell"
-
+    private static let maxPictureCount = 4
+    private static let pictureSize: CGFloat = 24
+    private static let pictureMaxMargin: CGFloat = 16
+    private static let pictureMinMargin: CGFloat = 8
+
     // MARK: - Outlets
 
-    @IBOutlet weak var additionalUsersLabel: UILabel?
-    @IBOutlet weak var additionalUsersLabelLeadingConstraint: NSLayoutConstraint?
-    @IBOutlet weak var dotsView: DotsView?
-    @IBOutlet weak var dotsViewLeadingConstraint: NSLayoutConstraint?
+    @IBOutlet private weak var additionalUsersLabel: UILabel!
+    @IBOutlet private weak var additionalUsersLabelLeadingConstraint: NSLayoutConstraint!
+    @IBOutlet private weak var dotsView: DotsView!
+    @IBOutlet private weak var dotsViewLeadingConstraint: NSLayoutConstraint!
 
     // MARK: - members
 
@@ -38,9 +42,7 @@ class RoomTypingBubbleCell: UITableViewCell {
     override func awakeFromNib() {
         super.awakeFromNib()
 
-        additionalUsersLabel?.textColor = ThemeService.shared().theme.textSecondaryColor
-        dotsView?.highlightedDotColor = ThemeService.shared().theme.textTertiaryColor
-        dotsView?.dotColor = ThemeService.shared().theme.textSecondaryColor
+        update(theme: ThemeService.shared().theme)
     }
 
     override func prepareForReuse() {
@@ -50,15 +52,13 @@ class RoomTypingBubbleCell: UITableViewCell {
             pictureView.removeFromSuperview()
         }
 
-        additionalUsersLabel?.textColor = ThemeService.shared().theme.textSecondaryColor
-        dotsView?.highlightedDotColor = ThemeService.shared().theme.textTertiaryColor
-        dotsView?.dotColor = ThemeService.shared().theme.textSecondaryColor
+        update(theme: ThemeService.shared().theme)
     }
 
     override func layoutSubviews() {
         super.layoutSubviews()
 
-        self.dotsView?.isHidden = userPictureViews.count == 0
+        dotsView.isHidden = userPictureViews.count == 0
 
         guard userPictureViews.count > 0 else {
             return
@@ -69,31 +69,40 @@ class RoomTypingBubbleCell: UITableViewCell {
         var pictureViewsMaxX: CGFloat = 0
         var xOffset: CGFloat = 0
         for pictureView in userPictureViews {
-            pictureView.center = CGPoint(x: 16 + xOffset + pictureView.bounds.midX, y: self.bounds.midY)
+            pictureView.center = CGPoint(x: RoomTypingBubbleCell.pictureMaxMargin + xOffset + pictureView.bounds.midX, y: self.bounds.midY)
             xOffset += round(pictureView.bounds.maxX * 2 / 3)
             pictureViewsMaxX = pictureView.frame.maxX
         }
 
-        let leftMagin: CGFloat = pictureViewsMaxX + (userPictureViews.count == 1 ? 16 : 8)
-        additionalUsersLabelLeadingConstraint?.constant = leftMagin
+        let leftMagin: CGFloat = pictureViewsMaxX + (userPictureViews.count == 1 ? RoomTypingBubbleCell.pictureMaxMargin : RoomTypingBubbleCell.pictureMinMargin)
+        additionalUsersLabelLeadingConstraint.constant = leftMagin
 
-        dotsViewLeadingConstraint?.constant = additionalUsersLabel?.text.isEmptyOrNil == true ? leftMagin : leftMagin + 8 + (additionalUsersLabel?.frame.width ?? 0)
+        dotsViewLeadingConstraint?.constant = additionalUsersLabel.text.isEmptyOrNil == true ? leftMagin : leftMagin + 8 + additionalUsersLabel.frame.width
+    }
+
+    // MARK: - Themable
+
+    func update(theme: Theme) {
+        additionalUsersLabel.textColor = theme.textSecondaryColor
+        dotsView.highlightedDotColor = theme.textTertiaryColor
+        dotsView.dotColor = theme.textSecondaryColor
     }
+
 
     // MARK: - Business methods
 
-    func updateTypingUsers(_ typingUsers: Array<TypingUserInfo>, mediaManager: MXMediaManager) {
+    func updateTypingUsers(_ typingUsers: [TypingUserInfo], mediaManager: MXMediaManager) {
         for pictureView in userPictureViews {
             pictureView.removeFromSuperview()
         }
-        userPictureViews = Array()
+        userPictureViews = []
 
         for user in typingUsers {
-            if userPictureViews.count >= 4 {
+            if userPictureViews.count >= RoomTypingBubbleCell.maxPictureCount {
                 break
             }
 
-            let pictureView = MXKImageView(frame: CGRect(x: 0, y: 0, width: 24, height: 24))
+            let pictureView = MXKImageView(frame: CGRect(x: 0, y: 0, width: RoomTypingBubbleCell.pictureSize, height: RoomTypingBubbleCell.pictureSize))
             pictureView.layer.masksToBounds = true
             pictureView.layer.cornerRadius = pictureView.bounds.midX
 
@@ -106,11 +115,11 @@ class RoomTypingBubbleCell: UITableViewCell {
 
         switch typingUsers.count {
         case 0:
-            additionalUsersLabel?.text = nil
+            additionalUsersLabel.text = nil
         case 1:
-            additionalUsersLabel?.text = firstUserNameFor(typingUsers)
+            additionalUsersLabel.text = firstUserNameFor(typingUsers)
         default:
-            additionalUsersLabel?.text = VectorL10n.roomMultipleTypingNotification(firstUserNameFor(typingUsers) ?? "")
+            additionalUsersLabel.text = VectorL10n.roomMultipleTypingNotification(firstUserNameFor(typingUsers) ?? "")
         }
         self.setNeedsLayout()
     }