conversations: apply generated message style

- Applies a centered style to the generated message cells.

Change-Id: I71fa4221194e2a974c787d710c2825a76c99f5c4
Reviewed-by: Kateryna Kostiuk <kateryna.kostiuk@savoirfairelinux.com>

Ring/Ring/Features/Conversations/Conversation/Cells/MessageCellGenerated.swift

@@ -21,8 +21,5 @@
 import Foundation
 import Reusable
 
-class MessageCellGenerated: UITableViewCell, NibReusable {
-
-    @IBOutlet weak var bubble: MessageBubble!
-    @IBOutlet weak var messageLabel: UILabel!
+class MessageCellGenerated: MessageCell {
 }

Ring/Ring/Features/Conversations/Conversation/Cells/MessageCellGenerated.xib

 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="12121" systemVersion="16G29" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="13196" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES">
     <device id="retina4_7" orientation="portrait">
         <adaptation id="fullscreen"/>
     </device>
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="12089"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="13174"/>
+        <capability name="Constraints to layout margins" minToolsVersion="6.0"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <objects>
@@ -15,44 +16,79 @@
             <rect key="frame" x="0.0" y="0.0" width="510" height="47"/>
             <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
             <tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" tableViewCell="3QB-g7-MaS" id="Dkz-SA-3Af">
-                <rect key="frame" x="0.0" y="0.0" width="510" height="47"/>
+                <rect key="frame" x="0.0" y="0.0" width="510" height="46.5"/>
                 <autoresizingMask key="autoresizingMask"/>
                 <subviews>
                     <view clipsSubviews="YES" contentMode="scaleToFill" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="xVQ-Jk-Sxy" customClass="MessageBubble" customModule="Ring" customModuleProvider="target">
-                        <rect key="frame" x="179" y="8" width="152.5" height="30.5"/>
+                        <rect key="frame" x="16" y="8" width="478" height="30.5"/>
                         <subviews>
-                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label Label Label Label " lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="ijf-jY-sqW">
-                                <rect key="frame" x="8" y="4" width="136.5" height="22.5"/>
-                                <fontDescription key="fontDescription" type="system" pointSize="12"/>
-                                <nil key="textColor"/>
+                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label Label Label Label " textAlignment="center" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="ijf-jY-sqW">
+                                <rect key="frame" x="161.5" y="4" width="155.5" height="22.5"/>
+                                <fontDescription key="fontDescription" type="system" pointSize="14"/>
+                                <color key="textColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                                 <nil key="highlightedColor"/>
                             </label>
                         </subviews>
                         <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="calibratedWhite"/>
                         <constraints>
                             <constraint firstAttribute="bottom" secondItem="ijf-jY-sqW" secondAttribute="bottom" constant="4" id="SxF-yH-rea"/>
-                            <constraint firstItem="ijf-jY-sqW" firstAttribute="leading" secondItem="xVQ-Jk-Sxy" secondAttribute="leading" constant="8" id="Wqz-dB-u71"/>
+                            <constraint firstItem="ijf-jY-sqW" firstAttribute="centerX" secondItem="xVQ-Jk-Sxy" secondAttribute="centerX" id="Wdw-Oz-0ar"/>
                             <constraint firstItem="ijf-jY-sqW" firstAttribute="top" secondItem="xVQ-Jk-Sxy" secondAttribute="top" constant="4" id="bc9-iJ-EjK"/>
                             <constraint firstAttribute="height" relation="greaterThanOrEqual" constant="30" id="hS0-Te-OEU"/>
-                            <constraint firstAttribute="trailing" secondItem="ijf-jY-sqW" secondAttribute="trailing" constant="8" id="jne-iL-4tV"/>
                         </constraints>
                         <userDefinedRuntimeAttributes>
                             <userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
-                                <real key="value" value="4"/>
+                                <integer key="value" value="15"/>
                             </userDefinedRuntimeAttribute>
                         </userDefinedRuntimeAttributes>
                     </view>
+                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="11/14/2016 12:34PM" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="4OM-U1-teG" userLabel="Message Time">
+                        <rect key="frame" x="178" y="6" width="154" height="21"/>
+                        <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="calibratedRGB"/>
+                        <fontDescription key="fontDescription" type="system" pointSize="17"/>
+                        <nil key="textColor"/>
+                        <nil key="highlightedColor"/>
+                    </label>
+                    <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Wm5-ce-Sf6" userLabel="Left Divider">
+                        <rect key="frame" x="16" y="16" width="146" height="1"/>
+                        <color key="backgroundColor" red="0.94117647059999998" green="0.94117647059999998" blue="0.94117647059999998" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                        <constraints>
+                            <constraint firstAttribute="height" constant="1" id="dEi-Ni-etd"/>
+                        </constraints>
+                    </view>
+                    <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="WgT-u7-Mgl" userLabel="Right Divider">
+                        <rect key="frame" x="348" y="16" width="138" height="1"/>
+                        <color key="backgroundColor" red="0.94117647059999998" green="0.94117647059999998" blue="0.94117647059999998" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                        <constraints>
+                            <constraint firstAttribute="height" constant="1" id="9kZ-1u-mwB"/>
+                        </constraints>
+                    </view>
                 </subviews>
                 <color key="tintColor" name="controlColor" catalog="System" colorSpace="catalog"/>
                 <constraints>
                     <constraint firstItem="xVQ-Jk-Sxy" firstAttribute="centerX" secondItem="Dkz-SA-3Af" secondAttribute="centerX" id="2E6-jB-N9L"/>
+                    <constraint firstAttribute="trailingMargin" secondItem="WgT-u7-Mgl" secondAttribute="trailing" constant="16" id="6Dc-L8-sJC"/>
+                    <constraint firstItem="WgT-u7-Mgl" firstAttribute="centerY" secondItem="4OM-U1-teG" secondAttribute="centerY" id="ALc-pa-7ZW"/>
+                    <constraint firstItem="4OM-U1-teG" firstAttribute="top" secondItem="Dkz-SA-3Af" secondAttribute="topMargin" constant="-2" id="CbK-m1-TUR"/>
+                    <constraint firstItem="Wm5-ce-Sf6" firstAttribute="leading" secondItem="Dkz-SA-3Af" secondAttribute="leading" constant="16" id="Faa-N7-gPP"/>
+                    <constraint firstItem="WgT-u7-Mgl" firstAttribute="leading" secondItem="4OM-U1-teG" secondAttribute="trailing" constant="16" id="Foe-Zm-1oU"/>
+                    <constraint firstItem="Wm5-ce-Sf6" firstAttribute="centerY" secondItem="4OM-U1-teG" secondAttribute="centerY" id="Q4u-AX-3D6"/>
                     <constraint firstAttribute="bottom" secondItem="xVQ-Jk-Sxy" secondAttribute="bottom" constant="8" id="Qbn-zO-KWj"/>
                     <constraint firstItem="xVQ-Jk-Sxy" firstAttribute="top" secondItem="Dkz-SA-3Af" secondAttribute="top" constant="8" id="R6Q-PY-A3m"/>
+                    <constraint firstItem="Wm5-ce-Sf6" firstAttribute="trailing" secondItem="4OM-U1-teG" secondAttribute="leading" constant="-16" id="dlX-Gh-ImE"/>
+                    <constraint firstItem="xVQ-Jk-Sxy" firstAttribute="leading" secondItem="Dkz-SA-3Af" secondAttribute="leading" constant="16" id="qxE-d6-psE"/>
+                    <constraint firstAttribute="trailing" secondItem="xVQ-Jk-Sxy" secondAttribute="trailing" constant="16" id="uTe-7R-qUz"/>
+                    <constraint firstItem="4OM-U1-teG" firstAttribute="centerX" secondItem="Dkz-SA-3Af" secondAttribute="centerX" id="zxy-XJ-QAl"/>
                 </constraints>
             </tableViewCellContentView>
             <connections>
                 <outlet property="bubble" destination="xVQ-Jk-Sxy" id="dRd-NH-FPh"/>
+                <outlet property="bubbleBottomConstraint" destination="Qbn-zO-KWj" id="hKY-TA-wId"/>
+                <outlet property="bubbleTopConstraint" destination="R6Q-PY-A3m" id="IQA-QC-eV0"/>
+                <outlet property="leftDivider" destination="Wm5-ce-Sf6" id="EaQ-1G-8Db"/>
                 <outlet property="messageLabel" destination="ijf-jY-sqW" id="Wcu-8D-wWf"/>
+                <outlet property="rightDivider" destination="WgT-u7-Mgl" id="k10-3V-ZLw"/>
+                <outlet property="timeLabel" destination="4OM-U1-teG" id="ub4-Z8-CsM"/>
             </connections>
             <point key="canvasLocation" x="-411" y="-132"/>
         </tableViewCell>

Ring/Ring/Features/Conversations/Conversation/Cells/MessageCellReceived.xib

 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="12121" systemVersion="16G29" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="13196" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES">
     <device id="retina4_7" orientation="portrait">
         <adaptation id="fullscreen"/>
     </device>
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="12089"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="13174"/>
         <capability name="Constraints to layout margins" minToolsVersion="6.0"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
@@ -16,7 +16,7 @@
             <rect key="frame" x="0.0" y="0.0" width="510" height="47"/>
             <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
             <tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" tableViewCell="KGk-i7-Jjw" id="H2p-sc-9uM">
-                <rect key="frame" x="0.0" y="0.0" width="510" height="47"/>
+                <rect key="frame" x="0.0" y="0.0" width="510" height="46.5"/>
                 <autoresizingMask key="autoresizingMask"/>
                 <subviews>
                     <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="skH-sJ-Ip9" userLabel="Profile Image">
@@ -90,7 +90,7 @@
                         </userDefinedRuntimeAttributes>
                     </view>
                     <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="zuX-zz-1Qq" userLabel="Left Divider">
-                        <rect key="frame" x="24" y="16" width="138" height="1"/>
+                        <rect key="frame" x="24" y="16" width="138.5" height="1"/>
                         <color key="backgroundColor" red="0.94117647058823528" green="0.94117647058823528" blue="0.94117647058823528" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                         <constraints>
                             <constraint firstAttribute="height" constant="1" id="OBa-HX-Vts"/>
@@ -104,7 +104,7 @@
                         </constraints>
                     </view>
                     <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="11/14/2016 12:34PM" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="mhg-uK-iD9" userLabel="Message Time">
-                        <rect key="frame" x="178" y="6" width="154.5" height="21"/>
+                        <rect key="frame" x="178.5" y="6" width="154" height="21"/>
                         <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="calibratedRGB"/>
                         <fontDescription key="fontDescription" type="system" pointSize="17"/>
                         <nil key="textColor"/>

Ring/Ring/Features/Conversations/Conversation/Cells/MessageCellSent.xib

 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="12121" systemVersion="16G29" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="13196" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES">
     <device id="retina4_7" orientation="portrait">
         <adaptation id="fullscreen"/>
     </device>
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="12089"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="13174"/>
         <capability name="Constraints to layout margins" minToolsVersion="6.0"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
@@ -16,7 +16,7 @@
             <rect key="frame" x="0.0" y="0.0" width="510" height="47"/>
             <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
             <tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" tableViewCell="KGk-i7-Jjw" id="H2p-sc-9uM">
-                <rect key="frame" x="0.0" y="0.0" width="510" height="47"/>
+                <rect key="frame" x="0.0" y="0.0" width="510" height="46.5"/>
                 <autoresizingMask key="autoresizingMask"/>
                 <subviews>
                     <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="hdz-AQ-xHI" userLabel="Bottom Corner">
@@ -68,14 +68,14 @@
                         </constraints>
                     </view>
                     <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="2U4-l3-KET" userLabel="Left Divider">
-                        <rect key="frame" x="24" y="16" width="137" height="1"/>
+                        <rect key="frame" x="24" y="16" width="137.5" height="1"/>
                         <color key="backgroundColor" red="0.94117647058823528" green="0.94117647058823528" blue="0.94117647058823528" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                         <constraints>
                             <constraint firstAttribute="height" constant="1" id="gla-pJ-IsN"/>
                         </constraints>
                     </view>
                     <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="11/14/2016 12:34PM" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="ogn-wv-fZy" userLabel="Message Time">
-                        <rect key="frame" x="177" y="6" width="154.5" height="21"/>
+                        <rect key="frame" x="177.5" y="6" width="154" height="21"/>
                         <fontDescription key="fontDescription" type="system" pointSize="17"/>
                         <nil key="textColor"/>
                         <nil key="highlightedColor"/>

Ring/Ring/Features/Conversations/Conversation/ConversationViewController.swift

@@ -215,7 +215,7 @@ class ConversationViewController: UIViewController, UITextFieldDelegate, Storybo
         for (index, messageViewModel) in self.messageViewModels!.enumerated() {
             // time labels
             let time = messageViewModel.receivedDate
-            if index == 0 {
+            if index == 0 ||  messageViewModel.bubblePosition() == .generated {
                 // always show first message's time
                 messageViewModel.timeStringShown = getTimeLabelString(forTime: time)
                 lastShownTime = time
@@ -388,9 +388,18 @@ class ConversationViewController: UIViewController, UITextFieldDelegate, Storybo
     func formatCell(withCell cell: MessageCell,
                     cellForRowAt indexPath: IndexPath,
                     withMessageVM messageVM: MessageViewModel) {
+
         // hide/show time label
         formatTimeLabel(forCell: cell, withMessageVM: messageVM)
 
+        if messageVM.bubblePosition() == .generated {
+            cell.bubble.backgroundColor = UIColor.ringMsgCellReceived
+            cell.messageLabel.setTextWithLineSpacing(withText: messageVM.content, withLineSpacing: 2)
+            // generated messages should always show the time
+            cell.bubbleTopConstraint.constant = 32
+            return
+        }
+
         // bubble grouping for cell
         applyBubbleStyleToCell(toCell: cell, cellForRowAt: indexPath, withMessageVM: messageVM)
 
@@ -401,10 +410,7 @@ class ConversationViewController: UIViewController, UITextFieldDelegate, Storybo
             cell.bubbleBottomConstraint.constant = 16
         }
 
-        if messageVM.bubblePosition() == .generated {
-            cell.failedStatusLabel.isHidden = true
-            cell.sendingIndicator.stopAnimating()
-        } else if messageVM.bubblePosition() == .sent {
+        if messageVM.bubblePosition() == .sent {
             messageVM.status.asObservable()
                 .observeOn(MainScheduler.instance)
                 .map { value in value == MessageStatus.sending ? true : false }
@@ -415,7 +421,7 @@ class ConversationViewController: UIViewController, UITextFieldDelegate, Storybo
                 .map { value in value == MessageStatus.failure ? false : true }
                 .bind(to: cell.failedStatusLabel.rx.isHidden)
                 .disposed(by: cell.disposeBag)
-        } else {
+        } else if messageVM.bubblePosition() == .received {
             // avatar
             guard let fallbackAvatar = cell.fallbackAvatar else {
                 return
@@ -453,7 +459,6 @@ class ConversationViewController: UIViewController, UITextFieldDelegate, Storybo
             }
         }
     }
-
 }
 
 extension ConversationViewController: UITableViewDataSource {
@@ -467,10 +472,14 @@ extension ConversationViewController: UITableViewDataSource {
                 let cell = tableView.dequeueReusableCell(for: indexPath, cellType: MessageCellReceived.self)
                 formatCell(withCell: cell, cellForRowAt: indexPath, withMessageVM: messageViewModel)
                 return cell
-            } else {
+            } else if messageViewModel.bubblePosition() == .sent {
                 let cell = tableView.dequeueReusableCell(for: indexPath, cellType: MessageCellSent.self)
                 formatCell(withCell: cell, cellForRowAt: indexPath, withMessageVM: messageViewModel)
                 return cell
+            } else if messageViewModel.bubblePosition() == .generated {
+                let cell = tableView.dequeueReusableCell(for: indexPath, cellType: MessageCellGenerated.self)
+                formatCell(withCell: cell, cellForRowAt: indexPath, withMessageVM: messageViewModel)
+                return cell
             }
         }