Add follower/ing counts to profile header

Tusker/Views/Profile Header/ProfileHeaderView.swift

@@ -35,6 +35,7 @@ class ProfileHeaderView: UIView {
     @IBOutlet weak var relationshipLabel: UILabel!
     @IBOutlet weak var noteTextView: StatusContentTextView!
     @IBOutlet weak var fieldsView: ProfileFieldsView!
+    @IBOutlet weak var followCountButton: UIButton!
     private(set) var pagesSegmentedControl: ScrollingSegmentedControl<ProfileViewController.Page>!
     
     var accountID: String!
@@ -148,6 +149,26 @@ class ProfileHeaderView: UIView {
         fieldsView.delegate = delegate
         fieldsView.updateUI(account: account)
         
+        let (followingAbbr, followingSpelledOut) = formatBigNumber(account.followingCount)
+        let (followersAbbr, followersSpelledOut) = formatBigNumber(account.followersCount)
+        let followCountTitle = NSMutableAttributedString()
+        followCountTitle.append(NSAttributedString(string: followingAbbr, attributes: [
+            .font: UIFont.preferredFont(forTextStyle: .body).withTraits(.traitBold)!,
+            .foregroundColor: UIColor.label,
+        ]))
+        followCountTitle.append(NSAttributedString(string: " Following, ", attributes: [
+            .foregroundColor: UIColor.secondaryLabel,
+        ]))
+        followCountTitle.append(NSAttributedString(string: followersAbbr, attributes: [
+            .font: UIFont.preferredFont(forTextStyle: .body).withTraits(.traitBold)!,
+            .foregroundColor: UIColor.label,
+        ]))
+        followCountTitle.append(NSAttributedString(string: " Follower\(account.followersCount == 1 ? "" : "s")", attributes: [
+            .foregroundColor: UIColor.secondaryLabel,
+        ]))
+        followCountButton.setAttributedTitle(followCountTitle, for: .normal)
+        followCountButton.accessibilityLabel = "\(followingSpelledOut) following, \(followersSpelledOut) followers"
+        
         accessibilityElements = [
             displayNameLabel!,
             usernameLabel!,
@@ -260,6 +281,22 @@ class ProfileHeaderView: UIView {
         }
     }
     
+    private func formatBigNumber(_ value: Int) -> (String, String) {
+        let formatter = NumberFormatter()
+        formatter.maximumFractionDigits = 1
+        
+        for (threshold, abbr, spelledOut) in [(1_000_000, "m", "million"), (1_000, "k", "thousand")] {
+            if value >= threshold {
+                let frac = Double(value) / Double(threshold)
+                let s = formatter.string(from: frac as NSNumber)!
+                return ("\(s)\(abbr)", "\(s) \(spelledOut)")
+            }
+        }
+        
+        let s = formatter.string(from: value as NSNumber)!
+        return (s, s)
+    }
+    
     // MARK: Interaction
     
     @objc func avatarPressed() {
@@ -313,6 +350,8 @@ class ProfileHeaderView: UIView {
         }
     }
     
+    @IBAction func followCountButtonPressed(_ sender: Any) {
+    }
 }
 
 extension ProfileHeaderView {

Tusker/Views/Profile Header/ProfileHeaderView.xib

@@ -61,7 +61,7 @@
                         <action selector="followPressed" destination="iN0-l3-epB" eventType="touchUpInside" id="OM3-lq-Z14"/>
                     </connections>
                 </button>
-                <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" alignment="top" spacing="8" translatesAutoresizingMaskIntoConstraints="NO" id="u4P-3i-gEq">
+                <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" alignment="top" spacing="4" translatesAutoresizingMaskIntoConstraints="NO" id="u4P-3i-gEq">
                     <rect key="frame" x="16" y="266" width="398" height="596"/>
                     <subviews>
                         <label hidden="YES" opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Follows you" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="UF8-nI-KVj">
@@ -71,19 +71,37 @@
                             <nil key="highlightedColor"/>
                         </label>
                         <textView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" horizontalHuggingPriority="249" verticalHuggingPriority="251" horizontalCompressionResistancePriority="749" scrollEnabled="NO" delaysContentTouches="NO" editable="NO" textAlignment="natural" selectable="NO" translatesAutoresizingMaskIntoConstraints="NO" id="1O8-2P-Gbf" customClass="StatusContentTextView" customModule="Tusker" customModuleProvider="target">
-                            <rect key="frame" x="0.0" y="0.0" width="382" height="460"/>
+                            <rect key="frame" x="0.0" y="0.0" width="382" height="259.5"/>
                             <string key="text">Lorem ipsum dolor sit er elit lamet, consectetaur cillium adipisicing pecu, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Nam liber te conscient to factor tum poen legum odioque civiuda.</string>
                             <color key="textColor" systemColor="labelColor"/>
                             <fontDescription key="fontDescription" type="system" pointSize="17"/>
                             <textInputTraits key="textInputTraits" autocapitalizationType="sentences"/>
                         </textView>
                         <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="vKC-m1-Sbs" customClass="ProfileFieldsView" customModule="Tusker" customModuleProvider="target">
-                            <rect key="frame" x="0.0" y="468" width="398" height="128"/>
+                            <rect key="frame" x="0.0" y="263.5" width="398" height="128"/>
                             <color key="backgroundColor" systemColor="systemBackgroundColor"/>
                             <constraints>
                                 <constraint firstAttribute="height" constant="128" placeholder="YES" id="xbR-M6-H0I"/>
                             </constraints>
                         </view>
+                        <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="ood-3e-sSu" userLabel="Spacer">
+                            <rect key="frame" x="0.0" y="395.5" width="240" height="8"/>
+                            <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                            <constraints>
+                                <constraint firstAttribute="height" constant="8" id="5ri-vD-wXe"/>
+                            </constraints>
+                        </view>
+                        <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="5w9-LA-8kc">
+                            <rect key="frame" x="0.0" y="407.5" width="219" height="188.5"/>
+                            <state key="normal" title="Button"/>
+                            <buttonConfiguration key="configuration" style="plain" title="123 Following, 1.2k Followers">
+                                <fontDescription key="titleFontDescription" style="UICTFontTextStyleBody"/>
+                                <directionalEdgeInsets key="contentInsets" top="0.0" leading="0.0" bottom="0.0" trailing="0.0"/>
+                            </buttonConfiguration>
+                            <connections>
+                                <action selector="followCountButtonPressed:" destination="iN0-l3-epB" eventType="touchUpInside" id="QOO-zK-pfu"/>
+                            </connections>
+                        </button>
                     </subviews>
                     <constraints>
                         <constraint firstItem="vKC-m1-Sbs" firstAttribute="width" secondItem="u4P-3i-gEq" secondAttribute="width" id="0dI-ax-7eI"/>
@@ -149,6 +167,7 @@
                 <outlet property="displayNameLabel" destination="vcl-Gl-kXl" id="64n-a9-my0"/>
                 <outlet property="fieldsView" destination="vKC-m1-Sbs" id="FeE-jh-lYH"/>
                 <outlet property="followButton" destination="cr8-p9-xkc" id="E1n-gh-mCl"/>
+                <outlet property="followCountButton" destination="5w9-LA-8kc" id="umN-5g-q8N"/>
                 <outlet property="headerImageView" destination="dgG-dR-lSv" id="HXT-v4-2iX"/>
                 <outlet property="lockImageView" destination="KNY-GD-beC" id="9EJ-iM-Eos"/>
                 <outlet property="moreButton" destination="vFa-g3-xIP" id="dEX-1a-PHF"/>