UI: refactor conversation view

- change search bar alignment
- add account username to topbar

Change-Id: I4e07693ffc97f2c4f1b7fd21b102f92d6d39576b

Ring/Ring/Features/Conversations/SmartList/SmartlistViewController.storyboard

 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="16097.3" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="Raw-Ee-7sK">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="17701" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="Raw-Ee-7sK">
     <device id="retina4_7" orientation="portrait" appearance="light"/>
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="16087"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17703"/>
+        <capability name="System colors in document resources" minToolsVersion="11.0"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <scenes>
@@ -25,7 +26,7 @@
                             </tableView>
                             <tableView hidden="YES" clipsSubviews="YES" contentMode="scaleToFill" alwaysBounceVertical="YES" showsHorizontalScrollIndicator="NO" showsVerticalScrollIndicator="NO" dataMode="prototypes" style="grouped" separatorStyle="default" rowHeight="44" sectionHeaderHeight="1" sectionFooterHeight="1" translatesAutoresizingMaskIntoConstraints="NO" id="opE-y7-3Rm">
                                 <rect key="frame" x="0.0" y="-80" width="375" height="747"/>
-                                <color key="backgroundColor" cocoaTouchSystemColor="groupTableViewBackgroundColor"/>
+                                <color key="backgroundColor" systemColor="groupTableViewBackgroundColor"/>
                             </tableView>
                             <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="HGv-QU-VSD">
                                 <rect key="frame" x="168" y="126" width="39.5" height="19.5"/>
@@ -104,7 +105,7 @@
                                 <rect key="frame" x="0.0" y="-106" width="375" height="166"/>
                                 <subviews>
                                     <searchBar contentMode="redraw" placeholder="Enter name..." translatesAutoresizingMaskIntoConstraints="NO" id="xPr-nI-I35">
-                                        <rect key="frame" x="1" y="110" width="324" height="56"/>
+                                        <rect key="frame" x="11" y="110" width="314" height="56"/>
                                         <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                         <constraints>
                                             <constraint firstAttribute="height" constant="56" id="4yw-AN-guZ"/>
@@ -145,7 +146,7 @@
                                     <constraint firstItem="Eta-uf-Ija" firstAttribute="leading" secondItem="xPr-nI-I35" secondAttribute="trailing" id="SnW-M7-wRB"/>
                                     <constraint firstItem="Eta-uf-Ija" firstAttribute="trailing" secondItem="RSG-bY-flb" secondAttribute="trailing" id="fK5-6j-fKX"/>
                                     <constraint firstItem="Eta-uf-Ija" firstAttribute="leading" secondItem="RSG-bY-flb" secondAttribute="leading" id="ggB-jL-tbn"/>
-                                    <constraint firstItem="xPr-nI-I35" firstAttribute="leading" secondItem="DKd-eF-L6f" secondAttribute="leading" constant="1" id="m1O-ZV-Pkx"/>
+                                    <constraint firstItem="xPr-nI-I35" firstAttribute="leading" secondItem="DKd-eF-L6f" secondAttribute="leading" constant="11" id="m1O-ZV-Pkx"/>
                                     <constraint firstItem="Eta-uf-Ija" firstAttribute="bottom" secondItem="RSG-bY-flb" secondAttribute="bottom" id="wOa-Ne-n5e"/>
                                     <constraint firstAttribute="bottom" secondItem="xPr-nI-I35" secondAttribute="bottom" id="xcp-FC-G0l"/>
                                 </constraints>
@@ -176,7 +177,7 @@
                                         </userDefinedRuntimeAttributes>
                                     </button>
                                 </subviews>
-                                <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
+                                <color key="backgroundColor" systemColor="systemBackgroundColor"/>
                                 <constraints>
                                     <constraint firstAttribute="height" constant="60" id="GEI-dw-9ar"/>
                                     <constraint firstAttribute="trailing" secondItem="k8G-Me-4BI" secondAttribute="trailing" id="a7d-Q1-Fvz"/>
@@ -234,6 +235,7 @@
                         <outlet property="qrScanButton" destination="Eta-uf-Ija" id="Hh0-vy-8EK"/>
                         <outlet property="scanButtonLeadingConstraint" destination="O7M-He-7UH" id="cvF-Wd-TJT"/>
                         <outlet property="searchBarShadow" destination="DKd-eF-L6f" id="CKZ-ws-ag1"/>
+                        <outlet property="searchFieldTrailing" destination="AhH-s9-pfe" id="rhp-oZ-ZJo"/>
                         <outlet property="searchView" destination="Y4B-5f-ij4" id="FtS-9R-atZ"/>
                         <outlet property="settingsButton" destination="iaz-fd-fEz" id="R2O-R8-BDk"/>
                         <outlet property="tableTopConstraint" destination="TVk-tz-qtF" id="lIj-Yu-ZL7"/>
@@ -257,5 +259,11 @@
         <image name="phone_book" width="37.5" height="37.5"/>
         <image name="qr_code_scan" width="32" height="32"/>
         <image name="settings_icon" width="24" height="24"/>
+        <systemColor name="groupTableViewBackgroundColor">
+            <color red="0.94901960784313721" green="0.94901960784313721" blue="0.96862745098039216" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+        </systemColor>
+        <systemColor name="systemBackgroundColor">
+            <color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+        </systemColor>
     </resources>
 </document>

Ring/Ring/Features/Conversations/SmartList/SmartlistViewController.swift

@@ -60,6 +60,7 @@ class SmartlistViewController: UIViewController, StoryboardBased, ViewModelBased
     @IBOutlet weak var qrScanButton: UIButton!
     @IBOutlet weak var phoneBookButton: UIButton!
     @IBOutlet weak var scanButtonLeadingConstraint: NSLayoutConstraint!
+    @IBOutlet weak var searchFieldTrailing: NSLayoutConstraint!
     @IBOutlet weak var networkAlertView: UIView!
     @IBOutlet weak var searchView: JamiSearchView!
 
@@ -68,6 +69,14 @@ class SmartlistViewController: UIViewController, StoryboardBased, ViewModelBased
     let accountPickerTextView = UITextField(frame: CGRect.zero)
     let accountsAdapter = AccountPickerAdapter()
     var accountsDismissTapRecognizer: UITapGestureRecognizer!
+    var accountView = UIView()
+    var accountWidth = NSLayoutConstraint()
+    let nameLabelTag = 100
+    let triangleTag = 200
+    let openAccountTag = 300
+    let margin: CGFloat = 10
+    let size: CGFloat = 32
+    let triangleViewSize: CGFloat = 12
 
     // MARK: members
     var viewModel: SmartlistViewModel!
@@ -101,6 +110,16 @@ class SmartlistViewController: UIViewController, StoryboardBased, ViewModelBased
         self.tabBarController?.tabBar.isHidden = false
         self.tabBarController?.tabBar.layer.zPosition = -0
         self.extendedLayoutIncludesOpaqueBars = true
+        NotificationCenter.default.rx
+            .notification(UIDevice.orientationDidChangeNotification)
+            .observeOn(MainScheduler.instance)
+            .subscribe(onNext: {[weak self](_) in
+                guard let self = self,
+                UIDevice.current.portraitOrLandscape else { return }
+                self.updateAccountItemSize()
+            })
+            .disposed(by: self.disposeBag)
+
     }
 
     @objc
@@ -128,7 +147,6 @@ class SmartlistViewController: UIViewController, StoryboardBased, ViewModelBased
     }
 
     func applyL10n() {
-        self.navigationItem.title = L10n.Global.homeTabBarTitle
         noConversationLabel.text = L10n.Smartlist.noConversation
         self.networkAlertLabel.text = L10n.Smartlist.noNetworkConnectivity
         self.cellularAlertLabel.text = L10n.Smartlist.cellularAccess
@@ -233,23 +251,67 @@ class SmartlistViewController: UIViewController, StoryboardBased, ViewModelBased
         accountButton.roundedCorners = true
         accountButton.clipsToBounds = true
         accountButton.contentMode = .scaleAspectFill
-        let size: CGFloat = 32
         accountButton.cornerRadius = size * 0.5
-        accountButton.frame = CGRect(x: 0, y: 0, width: size, height: size)
+        accountButton.frame = CGRect(x: 6, y: 0, width: size, height: size)
         accountButton.imageEdgeInsets = UIEdgeInsets(top: -4, left: -4, bottom: -4, right: -4)
-        let containerView = UIView(frame: CGRect(x: 0, y: 0, width: 80, height: size))
-        containerView.addSubview(accountButton)
-        let accountButtonItem = UIBarButtonItem(customView: containerView)
+        let screenRect = UIScreen.main.bounds
+        let screenWidth = screenRect.size.width
+        let window = UIApplication.shared.keyWindow
+        let leftPadding: CGFloat = window?.safeAreaInsets.left ?? 0
+        let maxWidth: CGFloat = screenWidth - 45 - margin * 3 - leftPadding * 2
+        let accountNameX: CGFloat = accountButton.frame.origin.x + accountButton.frame.size.width + margin
+        let triangleViewX: CGFloat = maxWidth - triangleViewSize - 2
+        let triangleViewY: CGFloat = size * 0.5
+        let accountNameWidth: CGFloat = maxWidth - triangleViewSize - size - margin * 2
+        let accountName = UILabel(frame: CGRect(x: accountNameX, y: 5, width: accountNameWidth, height: size))
+        accountName.tag = nameLabelTag
+        let triangleView = UIView(frame: CGRect(x: triangleViewX, y: triangleViewY, width: triangleViewSize, height: triangleViewSize))
+        triangleView.tag = triangleTag
+        let heightWidth = triangleView.frame.size.width
+        let path = CGMutablePath()
+
+        path.move(to: CGPoint(x: 0, y: 0))
+        path.addLine(to: CGPoint(x: heightWidth / 2, y: heightWidth / 2))
+        path.addLine(to: CGPoint(x: heightWidth, y: 0))
+        path.addLine(to: CGPoint(x: 0, y: 0))
+
+        let shape = CAShapeLayer()
+        shape.path = path
+        shape.fillColor = UIColor.jamiTextBlue.cgColor
+        triangleView.layer.insertSublayer(shape, at: 0)
+        accountName.textAlignment = .left
+        accountName.font = UIFont.systemFont(ofSize: 18.0)
+        accountName.lineBreakMode = .byTruncatingTail
+        accountName.textColor = UIColor.jamiTextBlue
+        let openButton = UIButton(type: .custom)
+        openButton.frame = CGRect(x: 0, y: 0, width: maxWidth, height: size)
+        openButton.tag = openAccountTag
+        self.viewModel.accountName
+            .subscribe(onNext: { name in
+                accountName.text = name
+                accountName.sizeToFit()
+                var frame = accountName.frame
+                frame.size.width = min(frame.size.width, maxWidth - 70)
+                accountName.frame = frame
+        })
+        .disposed(by: self.disposeBag)
+        accountView = UIView(frame: CGRect(x: 0, y: 0, width: maxWidth, height: size))
+        accountView.addSubview(accountButton)
+        accountView.addSubview(accountName)
+        accountView.addSubview(triangleView)
+        accountView.addSubview(openButton)
+        let accountButtonItem = UIBarButtonItem(customView: accountView)
         accountButtonItem
             .customView?
             .translatesAutoresizingMaskIntoConstraints = false
         accountButtonItem.customView?
                 .heightAnchor
                 .constraint(equalToConstant: size).isActive = true
-        accountButtonItem.customView?
+        accountWidth = accountView
             .widthAnchor
-                .constraint(equalToConstant: 80).isActive = true
-        accountButton.rx.tap
+            .constraint(equalToConstant: maxWidth)
+        accountWidth.isActive = true
+        openButton.rx.tap
             .throttle(Durations.halfSecond.toTimeInterval(), scheduler: MainScheduler.instance)
             .subscribe(onNext: { [weak self] in
                 self?.openAccountsList()
@@ -265,6 +327,42 @@ class SmartlistViewController: UIViewController, StoryboardBased, ViewModelBased
         self.conversationsTableView.tableFooterView = UIView()
     }
 
+    func updateAccountItemSize() {
+        let screenRect = UIScreen.main.bounds
+        let screenWidth = screenRect.size.width
+        let window = UIApplication.shared.keyWindow
+        let leftPadding: CGFloat = window?.safeAreaInsets.left ?? 0
+        searchFieldTrailing.constant = leftPadding
+        let maxWidth: CGFloat = screenWidth - 45 - margin * 3 - leftPadding * 2
+        accountWidth.constant = maxWidth
+        var accountFrame = accountView.frame
+        accountFrame.size.width = maxWidth
+        accountView.frame = accountFrame
+        if let triangle = accountView.subviews.filter({ view in
+            return view.tag == triangleTag
+        }).first {
+            var triangleFrame = triangle.frame
+            let triangleViewX: CGFloat = maxWidth - triangleViewSize - 2
+            triangleFrame.origin.x = triangleViewX
+            triangle.frame = triangleFrame
+        }
+        if let name = accountView.subviews.filter({ view in
+            return view.tag == nameLabelTag
+        }).first {
+            var nameFrame = name.frame
+            let accountNameWidth: CGFloat = maxWidth - triangleViewSize - size - margin * 2
+            nameFrame.size.width = accountNameWidth
+            name.frame = nameFrame
+        }
+        if let button = accountView.subviews.filter({ view in
+            return view.tag == openAccountTag
+        }).first {
+            var buttonFrame = button.frame
+            buttonFrame.size.width = maxWidth
+            button.frame = buttonFrame
+        }
+    }
+
     func confugureAccountPicker() {
         view.addSubview(accountPickerTextView)
         accountPickerTextView.inputView = accounPicker

Ring/Ring/Features/Conversations/SmartList/SmartlistViewModel.swift

@@ -122,6 +122,19 @@ class SmartlistViewModel: Stateable, ViewModel, FilterConversationDataSource {
             })
             .startWith(UIImage(asset: Asset.icContactPicture)!)
         }()
+    lazy var accountName: Observable<String> = { [weak self] in
+        return profileImageForCurrentAccount.share()
+            .map({ profile in
+                if let alias = profile.alias {
+                    if !alias.isEmpty { return alias }
+                }
+                guard let account = self?.accountsService.currentAccount else {
+                    return ""
+                }
+                return account.registeredName.isEmpty ? account.jamiId : account.registeredName
+            })
+            .startWith("")
+        }()
 
     lazy var conversations: Observable<[ConversationSection]> = { [weak self] in
         guard let self = self else { return Observable.empty() }