Issue/7404 settings gravatar site icon

WordPress/Classes/ViewRelated/Blog/SiteSettingsViewController.m

@@ -73,7 +73,11 @@
 
 static NSString *const EmptySiteSupportURL = @"https://en.support.wordpress.com/empty-site/";
 
-@interface SiteSettingsViewController () <UITableViewDelegate, UITextFieldDelegate, JetpackConnectionDelegate, PostCategoriesViewControllerDelegate>
+@interface SiteSettingsViewController () <UITableViewDelegate, UITextFieldDelegate, UIAlertViewDelegate, JetpackConnectionDelegate, PostCategoriesViewControllerDelegate>
+
+#pragma mark - Blavatar Header
+@property (nonatomic, strong) SiteIconCell *siteIconHeaderView;
+@property (nonatomic, strong) SiteIconPickerPresenter *siteIconPickerPresenter;
 
 #pragma mark - General Section
 @property (nonatomic, strong) SettingTableViewCell *siteTitleCell;
@@ -140,6 +144,8 @@ - (void)viewDidLoad
     DDLogMethod();
     [super viewDidLoad];
     [self.tableView registerNib:MediaQuotaCell.nib forCellReuseIdentifier:MediaQuotaCell.defaultReuseIdentifier];
+    [self.tableView registerNib:SiteIconCell.nib forCellReuseIdentifier:SiteIconCell.defaultReuseIdentifier];
+    [self configureSiteIconHeaderView];
 
     self.navigationItem.title = NSLocalizedString(@"Settings", @"Title for screen that allows configuration of your blog/site settings.");
 
@@ -197,6 +203,23 @@ - (NSArray *)tableSections
     return sections;
 }
 
+#pragma mark - Table Header
+- (void)configureSiteIconHeaderView
+{
+    self.siteIconHeaderView = [[SiteIconCell alloc] init];
+    __weak __typeof(self)weakSelf = self;
+    [self.siteIconHeaderView setOnAddUpdateIcon:^{
+        [weakSelf siteIconTapped];
+    }];
+    [self.siteIconHeaderView setOnRefreshIconImage:^{
+        if (weakSelf.blog.hasIcon) {
+            [weakSelf.siteIconHeaderView.imageView downloadSiteIconFor:weakSelf.blog placeholderImage:nil];
+        } else {
+            weakSelf.siteIconHeaderView.imageView.image = [UIImage siteIconPlaceholderImage];
+        }
+    }];
+    self.tableView.tableHeaderView = self.siteIconHeaderView;
+}
 
 #pragma mark - UITableViewDataSource
 
@@ -1126,6 +1149,11 @@ - (void)refreshData
 
 }
 
+- (void)siteIconTapped
+{
+
+}
+
 #pragma mark - Authentication methods
 
 - (NSString *)getURLToValidate

WordPress/Classes/ViewRelated/Cells/SiteIconCell.swift

@@ -0,0 +1,61 @@
+import Foundation
+import UIKit
+
+@objc class SiteIconCell: WPTableViewCell {
+    // MARK: - Public Properties and Outlets
+    @objc @IBOutlet var blavatarImageView: UIImageView!
+    @objc @IBOutlet var blavatarButton: UIButton!
+
+    @objc static let defaultReuseIdentifier = "SiteIconCell"
+
+    @objc static let nib: UINib = {
+        let nib = UINib(nibName: "SiteIconCell", bundle: Bundle(for: SiteIconCell.self))
+        return nib
+    }()
+
+    @objc var onAddUpdateIcon: (() -> Void)?
+    @objc var onRefreshIconImage: (() -> Void)?
+    @objc var activityIndicator = UIActivityIndicatorView(activityIndicatorStyle: .white)
+    @objc var showsActivityIndicator: Bool {
+        get {
+            return activityIndicator.isAnimating
+        }
+        set {
+            if newValue == true {
+                activityIndicator.startAnimating()
+            } else {
+                activityIndicator.stopAnimating()
+            }
+        }
+    }
+
+    // MARK: - Convenience Initializers
+    override func awakeFromNib() {
+        super.awakeFromNib()
+
+        // Make sure the Outlets are loaded
+        assert(blavatarImageView != nil)
+        assert(blavatarButton != nil)
+
+        configureActivityIndicator()
+        configureBlavatarImageView()
+    }
+
+    @objc @IBAction func onBlavatarWasPressed(_ sender: UIButton) {
+        onAddUpdateIcon?()
+    }
+
+    @objc func configureActivityIndicator() {
+        activityIndicator.hidesWhenStopped = true
+        activityIndicator.translatesAutoresizingMaskIntoConstraints = false
+    }
+
+    @objc func configureBlavatarImageView() {
+        blavatarImageView.addSubview(activityIndicator)
+        blavatarImageView.pinSubviewAtCenter(activityIndicator)
+        setNeedsUpdateConstraints()
+
+        let recognizer = UITapGestureRecognizer(target: self, action: #selector(onBlavatarWasPressed(_:)))
+        blavatarImageView.addGestureRecognizer(recognizer)
+    }
+}

WordPress/Classes/ViewRelated/Cells/SiteIconCell.xib

@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="13771" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+    <device id="retina4_7" orientation="portrait">
+        <adaptation id="fullscreen"/>
+    </device>
+    <dependencies>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="13772"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <tableViewCell clipsSubviews="YES" contentMode="scaleToFill" preservesSuperviewLayoutMargins="YES" selectionStyle="default" indentationWidth="10" reuseIdentifier="SiteIconCell" id="AA3-Gc-UnX" customClass="SiteIconCell" customModule="WordPress" customModuleProvider="target">
+            <rect key="frame" x="0.0" y="0.0" width="375" height="134"/>
+            <autoresizingMask key="autoresizingMask"/>
+            <tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" preservesSuperviewLayoutMargins="YES" insetsLayoutMarginsFromSafeArea="NO" tableViewCell="AA3-Gc-UnX" id="irS-o2-ZFK">
+                <rect key="frame" x="0.0" y="0.0" width="375" height="133.5"/>
+                <autoresizingMask key="autoresizingMask"/>
+                <subviews>
+                    <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" alignment="center" spacing="10" translatesAutoresizingMaskIntoConstraints="NO" id="YHw-wV-QOW">
+                        <rect key="frame" x="20" y="20" width="335" height="93.5"/>
+                        <subviews>
+                            <imageView contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="blavatar-default" translatesAutoresizingMaskIntoConstraints="NO" id="dg0-cU-Lig" userLabel="blavatar">
+                                <rect key="frame" x="135.5" y="0.0" width="64" height="64"/>
+                                <constraints>
+                                    <constraint firstAttribute="width" constant="64" id="UJ5-rD-p0f"/>
+                                    <constraint firstAttribute="height" constant="64" id="d99-HG-Z2s"/>
+                                </constraints>
+                            </imageView>
+                            <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="c6T-gq-RaY">
+                                <rect key="frame" x="127.5" y="74" width="80" height="19.5"/>
+                                <fontDescription key="fontDescription" style="UICTFontTextStyleCallout"/>
+                                <state key="normal" title="Button text">
+                                    <color key="titleColor" red="0.0" green="0.52941176469999995" blue="0.74509803919999995" alpha="1" colorSpace="calibratedRGB"/>
+                                </state>
+                                <connections>
+                                    <action selector="onBlavatarWasPressed:" destination="AA3-Gc-UnX" eventType="touchUpInside" id="BQk-rp-A5R"/>
+                                </connections>
+                            </button>
+                        </subviews>
+                    </stackView>
+                </subviews>
+                <constraints>
+                    <constraint firstItem="YHw-wV-QOW" firstAttribute="centerX" secondItem="irS-o2-ZFK" secondAttribute="centerX" id="1iI-qT-ijM"/>
+                    <constraint firstItem="YHw-wV-QOW" firstAttribute="top" secondItem="irS-o2-ZFK" secondAttribute="top" constant="20" id="AZQ-6h-5s0"/>
+                    <constraint firstItem="YHw-wV-QOW" firstAttribute="centerY" secondItem="irS-o2-ZFK" secondAttribute="centerY" id="Hhn-Zn-lmi"/>
+                    <constraint firstAttribute="trailing" secondItem="YHw-wV-QOW" secondAttribute="trailing" constant="20" id="PiY-gR-8VA"/>
+                    <constraint firstItem="YHw-wV-QOW" firstAttribute="leading" secondItem="irS-o2-ZFK" secondAttribute="leading" constant="20" id="qoP-8A-50M"/>
+                    <constraint firstAttribute="bottom" secondItem="YHw-wV-QOW" secondAttribute="bottom" constant="20" id="vct-sM-5Wf"/>
+                </constraints>
+            </tableViewCellContentView>
+            <connections>
+                <outlet property="blavatarButton" destination="c6T-gq-RaY" id="NzY-l3-kPQ"/>
+                <outlet property="blavatarImageView" destination="dg0-cU-Lig" id="oUA-DK-x6x"/>
+            </connections>
+            <point key="canvasLocation" x="12" y="74"/>
+        </tableViewCell>
+    </objects>
+    <resources>
+        <image name="blavatar-default" width="40" height="40"/>
+    </resources>
+</document>

WordPress/Classes/ViewRelated/Me/MyProfileHeaderView.swift

@@ -0,0 +1,87 @@
+import Foundation
+
+class MyProfileHeaderView: WPTableViewCell {
+    // MARK: - Public Properties and Outlets
+    @IBOutlet var gravatarImageView: CircularImageView!
+    @IBOutlet var gravatarButton: UIButton!
+
+    var onAddUpdatePhoto: (() -> Void)?
+    var activityIndicator = UIActivityIndicatorView(activityIndicatorStyle: .white)
+    var showsActivityIndicator: Bool {
+        get {
+            return activityIndicator.isAnimating
+        }
+        set {
+            if newValue == true {
+                activityIndicator.startAnimating()
+            } else {
+                activityIndicator.stopAnimating()
+            }
+        }
+    }
+    var gravatarEmail: String? = nil {
+        didSet {
+            if let email = gravatarEmail {
+                gravatarImageView.downloadGravatarWithEmail(email, rating: UIImageView.GravatarRatings.x)
+            }
+        }
+    }
+
+    override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
+        super.init(style: style, reuseIdentifier: reuseIdentifier)
+    }
+
+    required init?(coder aDecoder: NSCoder) {
+        super.init(coder: aDecoder)
+    }
+
+    class func makeFromNib() -> MyProfileHeaderView {
+        return Bundle.main.loadNibNamed("MyProfileHeaderView", owner: self, options: nil)?.first as! MyProfileHeaderView
+    }
+
+    // MARK: - Convenience Initializers
+    override func awakeFromNib() {
+        super.awakeFromNib()
+
+        // Make sure the Outlets are loaded
+        assert(gravatarImageView != nil)
+        assert(gravatarButton != nil)
+
+        configureActivityIndicator()
+        configureGravatarImageView()
+    }
+
+    @IBAction func onProfileWasPressed(_ sender: UIButton) {
+        onAddUpdatePhoto?()
+    }
+
+    /// Overrides the current Gravatar Image (set via Email) with a given image reference.
+    /// Plus, AFNetworking's internal cache is updated, to prevent undesired glitches upon refresh.
+    ///
+    func overrideGravatarImage(_ image: UIImage) {
+        gravatarImageView.image = image
+
+        // Note:
+        // We need to update AFNetworking's internal cache. Otherwise, any upcoming query to refresh the gravatar
+        // might return the cached (outdated) image, and the UI will end up in an inconsistent state.
+        //
+        if let email = gravatarEmail {
+            gravatarImageView.overrideGravatarImageCache(image, rating: UIImageView.GravatarRatings.x, email: email)
+        }
+    }
+
+    func configureActivityIndicator() {
+        activityIndicator.hidesWhenStopped = true
+        activityIndicator.translatesAutoresizingMaskIntoConstraints = false
+    }
+
+    func configureGravatarImageView() {
+        gravatarImageView.shouldRoundCorners = true
+        gravatarImageView.addSubview(activityIndicator)
+        gravatarImageView.pinSubviewAtCenter(activityIndicator)
+        setNeedsUpdateConstraints()
+
+        let recognizer = UITapGestureRecognizer(target: self, action: #selector(onProfileWasPressed(_:)))
+        gravatarImageView.addGestureRecognizer(recognizer)
+    }
+}

WordPress/Classes/ViewRelated/Me/MyProfileHeaderView.xib

@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="13771" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+    <device id="retina4_7" orientation="portrait">
+        <adaptation id="fullscreen"/>
+    </device>
+    <dependencies>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="13772"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <tableViewCell clipsSubviews="YES" contentMode="scaleToFill" preservesSuperviewLayoutMargins="YES" selectionStyle="default" indentationWidth="10" reuseIdentifier="MyProfileHeaderViewCell" rowHeight="140" id="fcx-xK-EJj" customClass="MyProfileHeaderView" customModule="WordPress" customModuleProvider="target">
+            <rect key="frame" x="0.0" y="0.0" width="375" height="134"/>
+            <autoresizingMask key="autoresizingMask"/>
+            <tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" preservesSuperviewLayoutMargins="YES" insetsLayoutMarginsFromSafeArea="NO" tableViewCell="fcx-xK-EJj" id="YeK-MX-Gye">
+                <rect key="frame" x="0.0" y="0.0" width="375" height="133.5"/>
+                <autoresizingMask key="autoresizingMask"/>
+                <subviews>
+                    <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" alignment="center" spacing="10" translatesAutoresizingMaskIntoConstraints="NO" id="5Te-sl-4HZ">
+                        <rect key="frame" x="20" y="20" width="335" height="93.5"/>
+                        <subviews>
+                            <imageView contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="gravatar" translatesAutoresizingMaskIntoConstraints="NO" id="Sgx-sT-G82" customClass="CircularImageView" customModule="WordPress" customModuleProvider="target">
+                                <rect key="frame" x="135.5" y="0.0" width="64" height="64"/>
+                                <constraints>
+                                    <constraint firstAttribute="height" constant="64" id="mFM-Wn-9HA"/>
+                                    <constraint firstAttribute="width" constant="64" id="pwi-AC-YZf"/>
+                                </constraints>
+                            </imageView>
+                            <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="hfE-Wp-Ea1">
+                                <rect key="frame" x="127.5" y="74" width="80" height="19.5"/>
+                                <fontDescription key="fontDescription" style="UICTFontTextStyleCallout"/>
+                                <state key="normal" title="Button text">
+                                    <color key="titleColor" red="0.0" green="0.52941176470588236" blue="0.74509803921568629" alpha="1" colorSpace="calibratedRGB"/>
+                                </state>
+                                <connections>
+                                    <action selector="onProfileWasPressed:" destination="fcx-xK-EJj" eventType="touchUpInside" id="6bg-EF-94L"/>
+                                </connections>
+                            </button>
+                        </subviews>
+                    </stackView>
+                </subviews>
+                <constraints>
+                    <constraint firstItem="5Te-sl-4HZ" firstAttribute="top" secondItem="YeK-MX-Gye" secondAttribute="top" constant="20" id="Lqg-vH-EhH"/>
+                    <constraint firstAttribute="bottom" secondItem="5Te-sl-4HZ" secondAttribute="bottom" constant="20" id="Otv-KZ-yq9"/>
+                    <constraint firstItem="5Te-sl-4HZ" firstAttribute="leading" secondItem="YeK-MX-Gye" secondAttribute="leading" constant="20" id="VGH-e9-kV1"/>
+                    <constraint firstAttribute="trailing" secondItem="5Te-sl-4HZ" secondAttribute="trailing" constant="20" id="qlo-F7-vVG"/>
+                </constraints>
+            </tableViewCellContentView>
+            <connections>
+                <outlet property="gravatarButton" destination="hfE-Wp-Ea1" id="Kld-Tp-PVI"/>
+                <outlet property="gravatarImageView" destination="Sgx-sT-G82" id="bYR-Zw-IG4"/>
+            </connections>
+            <point key="canvasLocation" x="-141" y="73"/>
+        </tableViewCell>
+    </objects>
+    <resources>
+        <image name="gravatar" width="85" height="85"/>
+    </resources>
+</document>