Bottom tab improvements: new icons, haptic feedback, icon animation

WordPress/Classes/Utility/BuildInformation/FeatureFlag.swift

@@ -11,6 +11,7 @@ enum FeatureFlag: Int, CaseIterable {
     case commentModerationUpdate
     case compliancePopover
     case googleDomainsCard
+    case newTabIcons
 
     /// Returns a boolean indicating if the feature is enabled
     var enabled: Bool {
@@ -37,6 +38,8 @@ enum FeatureFlag: Int, CaseIterable {
             return true
         case .googleDomainsCard:
             return false
+        case .newTabIcons:
+            return BuildConfiguration.current == .localDeveloper
         }
     }
 
@@ -77,6 +80,8 @@ extension FeatureFlag {
             return "Compliance Popover"
         case .googleDomainsCard:
             return "Google Domains Promotional Card"
+        case .newTabIcons:
+            return "New Tab Icons"
         }
     }
 }

WordPress/Classes/ViewRelated/System/Coordinators/MySitesCoordinator.swift

@@ -69,9 +69,14 @@ class MySitesCoordinator: NSObject {
         navigationController.restorationIdentifier = MySitesCoordinator.navigationControllerRestorationID
         navigationController.navigationBar.isTranslucent = false
 
-        let tabBarImage = AppStyleGuide.mySiteTabIcon
-        navigationController.tabBarItem.image = tabBarImage
-        navigationController.tabBarItem.selectedImage = tabBarImage
+        if FeatureFlag.newTabIcons.enabled {
+            navigationController.tabBarItem.image = UIImage(named: "tab-bar-home-unselected")?.withRenderingMode(.alwaysOriginal)
+            navigationController.tabBarItem.selectedImage = UIImage(named: "tab-bar-home-selected")
+        } else {
+            let tabBarImage = AppStyleGuide.mySiteTabIcon
+            navigationController.tabBarItem.image = tabBarImage
+            navigationController.tabBarItem.selectedImage = tabBarImage
+        }
         navigationController.tabBarItem.accessibilityLabel = NSLocalizedString("My Site", comment: "The accessibility value of the my site tab.")
         navigationController.tabBarItem.accessibilityIdentifier = "mySitesTabButton"
         navigationController.tabBarItem.title = NSLocalizedString("My Site", comment: "The accessibility value of the my site tab.")

WordPress/Classes/ViewRelated/System/WPTabBarController+MeTab.swift

@@ -14,9 +14,13 @@ extension WPTabBarController {
         NotificationCenter.default.addObserver(self, selector: #selector(accountDidChange), name: .WPAccountEmailAndDefaultBlogUpdated, object: nil)
     }
 
-    @objc func configureMeTabImage(placeholderImage: UIImage) {
-        meNavigationController?.tabBarItem.image = placeholderImage
-        meNavigationController?.tabBarItem.selectedImage = placeholderImage
+    @objc func configureMeTabImage(placeholderImage: UIImage?) {
+        configureMeTabImage(unselectedPlaceholderImage: placeholderImage, selectedPlaceholderImage: placeholderImage)
+    }
+
+    @objc func configureMeTabImage(unselectedPlaceholderImage: UIImage?, selectedPlaceholderImage: UIImage?) {
+        meNavigationController?.tabBarItem.image = unselectedPlaceholderImage
+        meNavigationController?.tabBarItem.selectedImage = selectedPlaceholderImage
 
         guard let account = defaultAccount(),
               let email = account.email else {
@@ -45,14 +49,20 @@ extension WPTabBarController {
     }
 
     @objc private func accountDidChange() {
-        configureMeTabImage(placeholderImage: UIImage(named: "icon-tab-me") ?? UIImage())
+        guard FeatureFlag.newTabIcons.enabled else {
+            configureMeTabImage(placeholderImage: UIImage(named: "icon-tab-me"))
+            return
+        }
+
+        configureMeTabImage(unselectedPlaceholderImage: UIImage(named: "tab-bar-me-unselected"),
+                            selectedPlaceholderImage: UIImage(named: "tab-bar-me-selected"))
     }
 }
 
 extension UITabBarItem {
 
     func configureGravatarImage(_ image: UIImage) {
-        let gravatarIcon = image.gravatarIcon(size: 28.0)
+        let gravatarIcon = image.gravatarIcon(size: 26.0)
         self.image = gravatarIcon?.blackAndWhite?.withAlpha(0.36)
         self.selectedImage = gravatarIcon
     }

WordPress/Classes/ViewRelated/System/WPTabBarController+Swift.swift

@@ -106,4 +106,18 @@ extension WPTabBarController {
 
         return selectedViewController.supportedInterfaceOrientations
     }
+
+    @objc func animateSelectedItem(_ item: UITabBarItem, for tabBar: UITabBar) {
+
+        guard let index = tabBar.items?.firstIndex(of: item), tabBar.subviews.count > index + 1,
+              let imageView = tabBar.subviews[index + 1].subviews.last as? UIImageView else {
+            return
+        }
+
+        let bounceAnimation = CAKeyframeAnimation(keyPath: "transform.scale")
+        bounceAnimation.values = [0.8, 1.02, 1.0]
+        bounceAnimation.duration = TimeInterval(0.2)
+        bounceAnimation.calculationMode = CAAnimationCalculationMode.cubic
+        imageView.layer.add(bounceAnimation, forKey: nil)
+    }
 }

WordPress/Classes/ViewRelated/System/WPTabBarController.m

@@ -181,9 +181,14 @@ - (UINavigationController *)readerNavigationController
         _readerNavigationController.navigationBar.translucent = NO;
         _readerNavigationController.view.backgroundColor = [UIColor murielBasicBackground];
 
-        UIImage *readerTabBarImage = [UIImage imageNamed:@"icon-tab-reader"];
-        _readerNavigationController.tabBarItem.image = readerTabBarImage;
-        _readerNavigationController.tabBarItem.selectedImage = readerTabBarImage;
+        if ([Feature enabled:FeatureFlagNewTabIcons]) {
+            _readerNavigationController.tabBarItem.image = [[UIImage imageNamed:@"tab-bar-reader-unselected"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
+            _readerNavigationController.tabBarItem.selectedImage = [UIImage imageNamed:@"tab-bar-reader-selected"];
+        } else {
+            UIImage *readerTabBarImage = [UIImage imageNamed:@"icon-tab-reader"];
+            _readerNavigationController.tabBarItem.image = readerTabBarImage;
+            _readerNavigationController.tabBarItem.selectedImage = readerTabBarImage;
+        }
         _readerNavigationController.restorationIdentifier = WPReaderNavigationRestorationID;
         _readerNavigationController.tabBarItem.accessibilityIdentifier = @"readerTabButton";
         _readerNavigationController.tabBarItem.title = NSLocalizedString(@"Reader", @"The accessibility value of the Reader tab.");
@@ -207,11 +212,19 @@ - (UINavigationController *)notificationsNavigationController
     }
     _notificationsNavigationController = [[UINavigationController alloc] initWithRootViewController:rootViewController];
     _notificationsNavigationController.navigationBar.translucent = NO;
-    self.notificationsTabBarImage = [UIImage imageNamed:@"icon-tab-notifications"];
-    NSString *unreadImageName = [AppConfiguration isJetpack] ? @"icon-tab-notifications-unread-jetpack" : @"icon-tab-notifications-unread";
-    self.notificationsTabBarImageUnread = [[UIImage imageNamed:unreadImageName] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
-    _notificationsNavigationController.tabBarItem.image = self.notificationsTabBarImage;
-    _notificationsNavigationController.tabBarItem.selectedImage = self.notificationsTabBarImage;
+    if ([Feature enabled:FeatureFlagNewTabIcons]) {
+        self.notificationsTabBarImage = [[UIImage imageNamed:@"tab-bar-notifications-unselected"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
+        NSString *unreadImageName = [AppConfiguration isJetpack] ? @"tab-bar-notifications-unread-jp" : @"tab-bar-notifications-unread-wp";
+        self.notificationsTabBarImageUnread = [[UIImage imageNamed:unreadImageName] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
+        _notificationsNavigationController.tabBarItem.image = self.notificationsTabBarImage;
+        _notificationsNavigationController.tabBarItem.selectedImage = [UIImage imageNamed:@"tab-bar-notifications-selected"];
+    } else {
+        self.notificationsTabBarImage = [UIImage imageNamed:@"icon-tab-notifications"];
+        NSString *unreadImageName = [AppConfiguration isJetpack] ? @"icon-tab-notifications-unread-jetpack" : @"icon-tab-notifications-unread";
+        self.notificationsTabBarImageUnread = [[UIImage imageNamed:unreadImageName] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
+        _notificationsNavigationController.tabBarItem.image = self.notificationsTabBarImage;
+        _notificationsNavigationController.tabBarItem.selectedImage = self.notificationsTabBarImage;
+    }
     _notificationsNavigationController.restorationIdentifier = WPNotificationsNavigationRestorationID;
     _notificationsNavigationController.tabBarItem.accessibilityIdentifier = @"notificationsTabButton";
     _notificationsNavigationController.tabBarItem.accessibilityLabel = NSLocalizedString(@"Notifications", @"Notifications tab bar item accessibility label");
@@ -224,7 +237,12 @@ - (UINavigationController *)meNavigationController
 {
     if (!_meNavigationController) {
         _meNavigationController = [[UINavigationController alloc] initWithRootViewController:self.meViewController];
-        [self configureMeTabImageWithPlaceholderImage:[UIImage imageNamed:@"icon-tab-me"]];
+        if ([Feature enabled:FeatureFlagNewTabIcons]) {
+            [self configureMeTabImageWithUnselectedPlaceholderImage:[[UIImage imageNamed:@"tab-bar-me-unselected"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]
+                                           selectedPlaceholderImage:[UIImage imageNamed:@"tab-bar-me-selected"]];
+        } else {
+            [self configureMeTabImageWithPlaceholderImage:[UIImage imageNamed:@"icon-tab-me"]];
+        }
         _meNavigationController.restorationIdentifier = WPMeNavigationRestorationID;
         _meNavigationController.tabBarItem.accessibilityLabel = NSLocalizedString(@"Me", @"The accessibility value of the me tab.");
         _meNavigationController.tabBarItem.accessibilityIdentifier = @"meTabButton";
@@ -472,6 +490,16 @@ - (void)showNotificationsTabForNoteWithID:(NSString *)notificationID
     [self.notificationsViewController showDetailsForNotificationWithID:notificationID];
 }
 
+#pragma mark - UITabBarDelegate
+
+- (void)tabBar:(UITabBar *)tabBar didSelectItem:(UITabBarItem *)item
+{
+    UIImpactFeedbackGenerator *generator = [[UIImpactFeedbackGenerator alloc] initWithStyle:UIImpactFeedbackStyleMedium];
+    [generator impactOccurred];
+
+    [self animateSelectedItem:item for:tabBar];
+}
+
 #pragma mark - Zendesk Notifications
 
 - (void)updateIconIndicators:(NSNotification *)notification

WordPress/Resources/AppImages.xcassets/Bottom Tabs/Contents.json

@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

WordPress/Resources/AppImages.xcassets/Bottom Tabs/tab-bar-home-selected.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "tab-bar-home-selected.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

WordPress/Resources/AppImages.xcassets/Bottom Tabs/tab-bar-home-unselected.imageset/Contents.json

@@ -0,0 +1,22 @@
+{
+  "images" : [
+    {
+      "filename" : "tab-bar-home-unselected.pdf",
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "filename" : "tab-bar-home-unselected-dark.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

WordPress/Resources/AppImages.xcassets/Bottom Tabs/tab-bar-me-selected.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "tab-bar-me-selected.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

WordPress/Resources/AppImages.xcassets/Bottom Tabs/tab-bar-me-unselected.imageset/Contents.json

@@ -0,0 +1,22 @@
+{
+  "images" : [
+    {
+      "filename" : "tab-bar-me-unselected.pdf",
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "filename" : "tab-bar-me-unselected-dark.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

WordPress/Resources/AppImages.xcassets/Bottom Tabs/tab-bar-notifications-selected.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "tab-bar-notifications-selected.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

WordPress/Resources/AppImages.xcassets/Bottom Tabs/tab-bar-notifications-unread-jp.imageset/Contents.json

@@ -0,0 +1,22 @@
+{
+  "images" : [
+    {
+      "filename" : "tab-bar-notifications-unread-jp.pdf",
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "filename" : "tab-bar-notifications-unread-jp-dark.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

WordPress/Resources/AppImages.xcassets/Bottom Tabs/tab-bar-notifications-unread-wp.imageset/Contents.json

@@ -0,0 +1,22 @@
+{
+  "images" : [
+    {
+      "filename" : "tab-bar-notifications-unread-wp.pdf",
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "filename" : "tab-bar-notifications-unread-wp-dark.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

WordPress/Resources/AppImages.xcassets/Bottom Tabs/tab-bar-notifications-unselected.imageset/Contents.json

@@ -0,0 +1,22 @@
+{
+  "images" : [
+    {
+      "filename" : "tab-bar-notifications-unselected.pdf",
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "filename" : "tab-bar-notifications-unselected-dark.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

WordPress/Resources/AppImages.xcassets/Bottom Tabs/tab-bar-reader-selected.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "tab-bar-reader-selected.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

WordPress/Resources/AppImages.xcassets/Bottom Tabs/tab-bar-reader-unselected.imageset/Contents.json

@@ -0,0 +1,22 @@
+{
+  "images" : [
+    {
+      "filename" : "tab-bar-reader-unselected.pdf",
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "filename" : "tab-bar-reader-unselected-dark.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}