New tabbar with shadow and indent

Signed-off-by: Philippe Weidmann <philippe.weidmann@infomaniak.com>

iOSClient/AppDelegate.m

@@ -31,6 +31,7 @@
 #import "NCBridgeSwift.h"
 #import "NCAutoUpload.h"
 #import "NCPushNotificationEncryption.h"
+#import <QuartzCore/QuartzCore.h>
 
 @class NCViewerRichdocument;
 
@@ -879,29 +880,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 {
@@ -910,13 +920,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];
     }
 }
@@ -1044,10 +1054,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/NCMainTabBar.swift

@@ -34,9 +34,8 @@ import Foundation
     private func addShape() {
         let shapeLayer = CAShapeLayer()
         shapeLayer.path = createPath()
-        shapeLayer.strokeColor = UIColor.lightGray.cgColor
-        shapeLayer.fillColor = UIColor.white.cgColor
-        shapeLayer.lineWidth = 1.0
+        shapeLayer.fillColor = NCBrandColor.sharedInstance.tabBar.cgColor
+
 
         if let oldShapeLayer = self.shapeLayer {
             self.layer.replaceSublayer(oldShapeLayer, with: shapeLayer)
@@ -47,25 +46,30 @@ import Foundation
         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 = 37.0
+        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), y: 0)) // the beginning of the trough
+        path.addLine(to: CGPoint(x: (centerWidth - height * 2) - 5, y: 0)) // the beginning of the trough
         // first curve down
-        path.addCurve(to: CGPoint(x: centerWidth, y: height),
-            controlPoint1: CGPoint(x: (centerWidth - 30), y: 0), controlPoint2: CGPoint(x: centerWidth - 35, y: height))
+        path.addQuadCurve(to: CGPoint(x: centerWidth, y: depth), controlPoint: CGPoint(x: centerWidth - height * 2, y: depth))
         // second curve up
-        path.addCurve(to: CGPoint(x: (centerWidth + height * 2), y: 0),
-            controlPoint1: CGPoint(x: centerWidth + 35, y: height), controlPoint2: CGPoint(x: (centerWidth + 30), y: 0))
-
+        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))
@@ -88,7 +92,6 @@ import Foundation
     }
 
     func createPathCircle() -> CGPath {
-
         let radius: CGFloat = 37.0
         let path = UIBezierPath()
         let centerWidth = self.frame.width / 2