Merge pull request #1254 from Infomaniak/new-tab-bar

New tab bar

iOSClient/AppDelegate.m

@@ -31,6 +31,7 @@
 #import "NCBridgeSwift.h"
 #import "NCAutoUpload.h"
 #import "NCPushNotificationEncryption.h"
+#import <QuartzCore/QuartzCore.h>
 #import "TOPasscodeViewController.h"
 
 @class NCViewerRichdocument;
@@ -875,29 +876,38 @@
     item.selectedImage = item.image;
     
     // Plus Button
-    UIImage *buttonImage = [CCGraphics changeThemingColorImage:[UIImage imageNamed:@"tabBarPlus"] width:120 height:120 color:NCBrandColor.sharedInstance.brandElement];
+    int buttonSize = 56;
+    UIImage *buttonImage = [CCGraphics changeThemingColorImage:[UIImage imageNamed:@"tabBarPlus"] width:120 height:120 color:UIColor.whiteColor];
     UIButton *buttonPlus = [UIButton buttonWithType:UIButtonTypeCustom];
     buttonPlus.tag = 99;
-    [buttonPlus setBackgroundImage:buttonImage forState:UIControlStateNormal];
-    [buttonPlus setBackgroundImage:buttonImage forState:UIControlStateHighlighted];
+    [buttonPlus setImage:buttonImage forState:UIControlStateNormal];
+    buttonPlus.backgroundColor = NCBrandColor.sharedInstance.brand;
+    buttonPlus.layer.cornerRadius = buttonSize / 2;
+    buttonPlus.layer.masksToBounds = NO;
+    buttonPlus.layer.shadowOffset = CGSizeMake(0, 0);
+    buttonPlus.layer.shadowRadius = 3.0f;
+    buttonPlus.layer.shadowOpacity = 0.5;
+    
+
     [buttonPlus addTarget:self action:@selector(handleTouchTabbarCenter:) forControlEvents:UIControlEventTouchUpInside];
     
     [buttonPlus setTranslatesAutoresizingMaskIntoConstraints:NO];
     [tabBarController.tabBar addSubview:buttonPlus];
     
+
     if (safeAreaBottom > 0) {
         
         // X
         constraint = [NSLayoutConstraint constraintWithItem:buttonPlus attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:tabBarController.tabBar attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0];
         [tabBarController.view addConstraint:constraint];
         // Y
-        constraint = [NSLayoutConstraint constraintWithItem:buttonPlus attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:tabBarController.tabBar attribute:NSLayoutAttributeTop multiplier:1.0 constant:5];
+        constraint = [NSLayoutConstraint constraintWithItem:buttonPlus attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:tabBarController.tabBar attribute:NSLayoutAttributeTop multiplier:1.0 constant:-(buttonSize / 2)];
         [tabBarController.view addConstraint:constraint];
         // Width
-        constraint = [NSLayoutConstraint constraintWithItem:buttonPlus attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:0 multiplier:1.0 constant:40];
+        constraint = [NSLayoutConstraint constraintWithItem:buttonPlus attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:0 multiplier:1.0 constant:buttonSize];
         [tabBarController.view addConstraint:constraint];
         // Height
-        constraint = [NSLayoutConstraint constraintWithItem:buttonPlus attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:0 multiplier:1.0 constant:40];
+        constraint = [NSLayoutConstraint constraintWithItem:buttonPlus attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:0 multiplier:1.0 constant:buttonSize];
         [tabBarController.view addConstraint:constraint];
         
     } else {
@@ -906,13 +916,13 @@
         constraint = [NSLayoutConstraint constraintWithItem:buttonPlus attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:tabBarController.tabBar attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0];
         [tabBarController.view addConstraint:constraint];
         // Y
-        constraint = [NSLayoutConstraint constraintWithItem:buttonPlus attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:tabBarController.tabBar attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:0];
+        constraint = [NSLayoutConstraint constraintWithItem:buttonPlus attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:tabBarController.tabBar attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:-(buttonSize / 2)];
         [tabBarController.view addConstraint:constraint];
         // Width
-        constraint = [NSLayoutConstraint constraintWithItem:buttonPlus attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:0 multiplier:1.0 constant:33];
+        constraint = [NSLayoutConstraint constraintWithItem:buttonPlus attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:0 multiplier:1.0 constant:buttonSize];
         [tabBarController.view addConstraint:constraint];
         // Height
-        constraint = [NSLayoutConstraint constraintWithItem:buttonPlus attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:0 multiplier:1.0 constant:33];
+        constraint = [NSLayoutConstraint constraintWithItem:buttonPlus attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:0 multiplier:1.0 constant:buttonSize];
         [tabBarController.view addConstraint:constraint];
     }
 }
@@ -1032,10 +1042,11 @@
         if ([navigationController isKindOfClass:[UINavigationController class]]) {
             UITabBarController *tabBarController = (UITabBarController *)navigationController.topViewController;
             if ([tabBarController isKindOfClass:[UITabBarController class]]) {
+                [tabBarController.tabBar setNeedsDisplay];
                 UIButton *button = [tabBarController.view viewWithTag:99];
-                UIImage *buttonImage = [CCGraphics changeThemingColorImage:[UIImage imageNamed:@"tabBarPlus"] multiplier:3 color:NCBrandColor.sharedInstance.brandElement];
-                [button setBackgroundImage:buttonImage forState:UIControlStateNormal];
-                [button setBackgroundImage:buttonImage forState:UIControlStateHighlighted];
+                UIImage *buttonImage = [CCGraphics changeThemingColorImage:[UIImage imageNamed:@"tabBarPlus"] width:120 height:120 color:UIColor.whiteColor];
+                [button setImage:buttonImage forState:UIControlStateNormal];
+                button.backgroundColor = NCBrandColor.sharedInstance.brand;
             }
         }
     }

iOSClient/Brand/NCBrand.swift

@@ -147,7 +147,7 @@ class NCBrandColor: NSObject {
             separator = UIColor(red: 60.0/255.0, green: 60.0/255.0, blue: 60.0/255.0, alpha: 1.0)
             select = UIColor.white.withAlphaComponent(0.2)
         } else {
-            tabBar = UIColor(red: 247.0/255.0, green: 247.0/255.0, blue: 247.0/255.0, alpha: 1.0)
+            tabBar = .white
             backgroundView = .white
             backgroundForm = UIColor(red: 247.0/255.0, green: 247.0/255.0, blue: 247.0/255.0, alpha: 1.0)
             textView = .black

iOSClient/Main/CCMain.m

@@ -176,7 +176,8 @@
     // Register cell
     [self.tableView registerNib:[UINib nibWithNibName:@"CCCellMain" bundle:nil] forCellReuseIdentifier:@"CellMain"];
     [self.tableView registerNib:[UINib nibWithNibName:@"CCCellMainTransfer" bundle:nil] forCellReuseIdentifier:@"CellMainTransfer"];
-    
+    self.tableView.contentInset = UIEdgeInsetsMake(0, 0, 30, 0);
+
     // long press recognizer TableView
     UILongPressGestureRecognizer* longPressRecognizer = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(onLongPressTableView:)];
     [self.tableView addGestureRecognizer:longPressRecognizer];

iOSClient/Main/Main.storyboard

@@ -131,7 +131,7 @@
         <!--Main Tab Bar Controller-->
         <scene sceneID="gY3-Ur-rTC">
             <objects>
-                <tabBarController automaticallyAdjustsScrollViewInsets="NO" id="FkP-Lh-8zt" customClass="CCMainTabBarController" customModule="Nextcloud" customModuleProvider="target" sceneMemberID="viewController">
+                <tabBarController extendedLayoutIncludesOpaqueBars="YES" automaticallyAdjustsScrollViewInsets="NO" id="FkP-Lh-8zt" customClass="CCMainTabBarController" customModule="Nextcloud" customModuleProvider="target" sceneMemberID="viewController">
                     <toolbarItems/>
                     <navigationItem key="navigationItem" id="ozb-fg-0GE">
                         <barButtonItem key="backBarButtonItem" title="Back" id="oUu-2v-gUF"/>
@@ -139,7 +139,7 @@
                     <tabBar key="tabBar" contentMode="scaleToFill" id="72f-jP-cei" customClass="NCMainTabBar" customModule="Nextcloud" customModuleProvider="target">
                         <rect key="frame" x="0.0" y="0.0" width="1000" height="1000"/>
                         <autoresizingMask key="autoresizingMask"/>
-                        <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="custom" customColorSpace="sRGB"/>
+                        <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                     </tabBar>
                     <connections>
                         <segue destination="bSZ-tE-FEj" kind="relationship" relationship="viewControllers" id="qbu-nX-qCk"/>
@@ -445,7 +445,7 @@
                         <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                         <subviews>
                             <tableView clipsSubviews="YES" contentMode="scaleToFill" alwaysBounceVertical="YES" showsHorizontalScrollIndicator="NO" showsVerticalScrollIndicator="NO" dataMode="prototypes" style="plain" separatorStyle="default" rowHeight="44" sectionHeaderHeight="28" sectionFooterHeight="28" translatesAutoresizingMaskIntoConstraints="NO" id="dC6-NQ-0Td">
-                                <rect key="frame" x="0.0" y="140" width="414" height="673"/>
+                                <rect key="frame" x="0.0" y="140" width="414" height="703"/>
                                 <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
                                 <connections>
                                     <outlet property="dataSource" destination="Qyv-Eo-LeA" id="8v3-Et-JVZ"/>
@@ -457,7 +457,7 @@
                             <constraint firstItem="dC6-NQ-0Td" firstAttribute="leading" secondItem="Sqy-z1-MI5" secondAttribute="leading" id="AAp-Xf-P1c"/>
                             <constraint firstItem="dC6-NQ-0Td" firstAttribute="top" secondItem="Sqy-z1-MI5" secondAttribute="top" id="BrC-GS-MSF"/>
                             <constraint firstItem="Sqy-z1-MI5" firstAttribute="trailing" secondItem="dC6-NQ-0Td" secondAttribute="trailing" id="DBL-Bo-AUz"/>
-                            <constraint firstItem="Sqy-z1-MI5" firstAttribute="bottom" secondItem="dC6-NQ-0Td" secondAttribute="bottom" id="d6p-eB-e8X"/>
+                            <constraint firstItem="Sqy-z1-MI5" firstAttribute="bottom" secondItem="dC6-NQ-0Td" secondAttribute="bottom" constant="-30" id="d6p-eB-e8X"/>
                         </constraints>
                         <viewLayoutGuide key="safeArea" id="Sqy-z1-MI5"/>
                     </view>

iOSClient/Main/NCMainTabBar.swift

@@ -23,8 +23,91 @@
 
 import Foundation
 
-class NCMainTabBar: UITabBar {
+@IBDesignable class NCMainTabBar: UITabBar {
+
     override var traitCollection: UITraitCollection {
         return UITraitCollection(horizontalSizeClass: .compact)
     }
+
+    private var shapeLayer: CALayer?
+
+    private func addShape() {
+        let shapeLayer = CAShapeLayer()
+        shapeLayer.path = createPath()
+        shapeLayer.fillColor = NCBrandColor.sharedInstance.tabBar.cgColor
+
+
+        if let oldShapeLayer = self.shapeLayer {
+            self.layer.replaceSublayer(oldShapeLayer, with: shapeLayer)
+        } else {
+            self.layer.insertSublayer(shapeLayer, at: 0)
+        }
+
+        self.shapeLayer = shapeLayer
+    }
+
+    override func layoutSubviews() {
+        super.layoutSubviews()
+        self.layer.shadowPath = createPath()
+        self.layer.shadowRadius = 5
+        self.layer.shadowOffset = .zero
+        self.layer.shadowOpacity = 0.25
+    }
+
+    override func draw(_ rect: CGRect) {
+        self.addShape()
+    }
+
+    func createPath() -> CGPath {
+        let height: CGFloat = 16
+        let depth: CGFloat = height * 2 + 2
+        let path = UIBezierPath()
+        let centerWidth = self.frame.width / 2
+
+        path.move(to: CGPoint(x: 0, y: 0)) // start top left
+        path.addLine(to: CGPoint(x: (centerWidth - height * 2) - 5, y: 0)) // the beginning of the trough
+        // first curve down
+        path.addQuadCurve(to: CGPoint(x: centerWidth, y: depth), controlPoint: CGPoint(x: centerWidth - height * 2, y: depth))
+        // second curve up
+        path.addQuadCurve(to: CGPoint(x: centerWidth + height * 2 + 5, y: 0), controlPoint: CGPoint(x: centerWidth + height * 2, y: depth))
+        // complete the rect
+        path.addLine(to: CGPoint(x: self.frame.width, y: 0))
+        path.addLine(to: CGPoint(x: self.frame.width, y: self.frame.height))
+        path.addLine(to: CGPoint(x: 0, y: self.frame.height))
+        path.close()
+
+        return path.cgPath
+    }
+
+    override func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
+        if self.bounds.contains(point) {
+            //inside tab bar
+            let buttonRadius: CGFloat = 60
+            let val = abs(self.center.x - point.x) > buttonRadius || abs(point.y) > buttonRadius
+            print(val)
+            return true
+        } else {
+            return false
+        }
+    }
+
+    func createPathCircle() -> CGPath {
+        let radius: CGFloat = 37.0
+        let path = UIBezierPath()
+        let centerWidth = self.frame.width / 2
+
+        path.move(to: CGPoint(x: 0, y: 0))
+        path.addLine(to: CGPoint(x: (centerWidth - radius * 2), y: 0))
+        path.addArc(withCenter: CGPoint(x: centerWidth, y: 0), radius: radius, startAngle: CGFloat(180).degreesToRadians, endAngle: CGFloat(0).degreesToRadians, clockwise: false)
+        path.addLine(to: CGPoint(x: self.frame.width, y: 0))
+        path.addLine(to: CGPoint(x: self.frame.width, y: self.frame.height))
+        path.addLine(to: CGPoint(x: 0, y: self.frame.height))
+        path.close()
+        return path.cgPath
+    }
+
+}
+extension CGFloat {
+    var degreesToRadians: CGFloat { return self * .pi / 180 }
+    var radiansToDegrees: CGFloat { return self * 180 / .pi }
 }