EKIRJASTO-108 Improve contrast in tab bar

Palace/AppInfrastructure/TPPAppDelegate.swift

@@ -51,49 +51,114 @@ class TPPAppDelegate: UIResponder, UIApplicationDelegate {
     window?.makeKeyAndVisible()
     window?.rootViewController = TPPRootTabBarController.shared()
 
-    let insets = window?.safeAreaInsets
-    let bottom = insets?.bottom
-
-    let itemAppearance = UITabBarItemAppearance()
-    itemAppearance.normal.badgePositionAdjustment.horizontal = 3
-    itemAppearance.normal.badgePositionAdjustment.vertical = 1
-    itemAppearance.normal.badgeBackgroundColor = UIColor(named: "ColorEkirjastoRedCircle")
-    itemAppearance.normal.badgeTextAttributes = [.foregroundColor: UIColor(named: "ColorEkirjastoAlwaysBlack")!, .font: UIFont.boldPalaceFont(ofSize: 11)]
-    if let bottom = bottom {
-      itemAppearance.normal.titlePositionAdjustment = UIOffset(horizontal: 5.0, vertical:  CGFloat.minimum(bottom, 6.0))
-    }else {
-      itemAppearance.normal.titlePositionAdjustment = UIOffset(horizontal: 5.0, vertical:  6.0)
-    }
+    let safeAreaInsets = window?.safeAreaInsets
+
+
+    // UITabBarItemAppearance
+    // Customize the appearance of one tab bar item in different states.
+    // The tab bar item contains icon image, title text and possible badge
+    // States used:
+    //   normal   = inactive tab bar item
+    //   selected = active tab bar item
+    // The appearance we define for the normal state is used as default appearance for tab bar items
 
+    let tabBarItemAppearance = UITabBarItemAppearance()
 
-    let paragraphStyle = NSMutableParagraphStyle()
-    paragraphStyle.lineBreakMode = .byTruncatingTail
-    paragraphStyle.allowsDefaultTighteningForTruncation = false
+    // Set badge position
+    // The badge (if appears) is shown in the top right corner of tab bar item
+    tabBarItemAppearance.normal.badgePositionAdjustment = UIOffset(
+      horizontal: 3.0,
+      vertical: 1.0
+    )
 
-    // iPads have more space so set the font to be larger than in iPhones
-    let fontSize = UIDevice.current.userInterfaceIdiom == .pad ? 18.0 : 12.0
-    let font = UIFontMetrics.default.scaledFont(for: UIFont(name: TPPConfiguration.ekirjastoFontName(), size: fontSize) ?? UIFont.systemFont(ofSize: fontSize))
-    let foregroundColor = TPPConfiguration.compatiblePrimaryColor()
+    // Set badge style
+    let badgeBackgroundColor = UIColor(named: "ColorEkirjastoRedCircle")
+    let badgeForegroundColor = UIColor(named: "ColorEkirjastoAlwaysBlack")!
+    let badgeFont = UIFont.boldPalaceFont(ofSize: 11)
 
-    itemAppearance.normal.titleTextAttributes = [
-      .foregroundColor: foregroundColor,
-      .font: font,
-      .paragraphStyle: paragraphStyle
+    tabBarItemAppearance.normal.badgeBackgroundColor = badgeBackgroundColor
+    tabBarItemAppearance.normal.badgeTextAttributes = [
+      .foregroundColor: badgeForegroundColor,
+      .font: badgeFont
     ]
 
-    let appearance = UITabBarAppearance()
-    appearance.stackedLayoutAppearance = itemAppearance
-    appearance.inlineLayoutAppearance = itemAppearance
-    appearance.compactInlineLayoutAppearance = itemAppearance
+    // Set title position
+    // Title is shown below the icon in iPhones and on the right side of icon in iPads.
+    // Title is positioned with 2 values:
+    //    horizontal = positive value moves title to the right, we have set this always to be 5.0
+    //    vertical   = positive value moves title downwards, we base this on how much not-used space in bottom we have.
+    //    For example in smaller iPhones there is no extra space at bottom (bottomInset is 0.0)
+    let horizontalOffset: CGFloat = 5.0
+
+    let verticalOffset: CGFloat
+    if let bottomInset = safeAreaInsets?.bottom {
+      verticalOffset = CGFloat.minimum(bottomInset, 6.0)
+    } else {
+      verticalOffset = 6.0
+    }
 
-    UITabBar.appearance().standardAppearance = appearance
-    UITabBar.appearance().tintColor = TPPConfiguration.compatiblePrimaryColor() //Edited by Ebblis
+    tabBarItemAppearance.normal.titlePositionAdjustment = UIOffset(
+      horizontal: horizontalOffset,
+      vertical: verticalOffset
+    )
+
+    // Set title text style
+    // iPads have more space so we can set the title font to be even larger than in iPhones.
+    // We also set different title text color for the selected (active) tab bar item (to match the icon color).
+    let titleFontSize = UIDevice.current.userInterfaceIdiom == .pad ? 18.0 : 12.0
+    let ekirjastoFont = UIFont(name: TPPConfiguration.ekirjastoFontName(), size: titleFontSize)
+    let systemFont = UIFont.systemFont(ofSize: titleFontSize)
+
+    let titleFont = UIFontMetrics.default.scaledFont(for: ekirjastoFont ?? systemFont)
+
+    let titleParagraphStyle = NSMutableParagraphStyle()
+    titleParagraphStyle.lineBreakMode = .byTruncatingTail
+    titleParagraphStyle.allowsDefaultTighteningForTruncation = false
+
+    tabBarItemAppearance.normal.titleTextAttributes = [
+      .font: titleFont,
+      .foregroundColor: TPPConfiguration.normalTabBarItemTitleColor(),
+      .paragraphStyle: titleParagraphStyle
+    ]
+
+    tabBarItemAppearance.selected.titleTextAttributes = [
+      .foregroundColor: TPPConfiguration.selectedTabBarItemTitleColor()
+    ]
+
+
+    // UITabBarAppearance
+    // Set the appearance of the tab bar items in tab bar.
+    // Use the tabBarItemAppearance we already defined for the one tab bar item
+
+    let tabBarAppearance = UITabBarAppearance()
+    tabBarAppearance.stackedLayoutAppearance = tabBarItemAppearance
+    tabBarAppearance.inlineLayoutAppearance = tabBarItemAppearance
+    tabBarAppearance.compactInlineLayoutAppearance = tabBarItemAppearance
+
+
+    // UITabBar
+    // Set the appearance of the tab bar (the bottom bar in app)
+    // Use the tabBarAppearance already defined for the tab bar
+
+    UITabBar.appearance().standardAppearance = tabBarAppearance
+    UITabBar.appearance().tintColor = TPPConfiguration.compatiblePrimaryColor()
     UITabBar.appearance().backgroundColor = TPPConfiguration.backgroundColor()
 
+
+    // UINavigationBar
+    // Set the appearance of the navigation bar (the top bar in app)
+    // Two size variations exist:
+    //      standardAppearance = used if navigation bar is currently of normal (standard) height
+    //      compactAppearance = used if small navigation bar is shown (iPhone in landscape)
+    // Standard and compact apperances are used when user is scrolling down the content in view,
+    // otherwise the scroll edge apperances are used (for example if there is no scrollable content in view)
+    //      scrollEdgeAppearance = used when view is scrolled to top (content top is "touching" the navigation bar)
+
     UINavigationBar.appearance().tintColor = TPPConfiguration.iconColor()
     UINavigationBar.appearance().standardAppearance = TPPConfiguration.defaultAppearance()
     UINavigationBar.appearance().compactAppearance = TPPConfiguration.defaultAppearance()
     UINavigationBar.appearance().scrollEdgeAppearance = TPPConfiguration.defaultAppearance()
+
     if #available(iOS 15.0, *) {
       UINavigationBar.appearance().compactScrollEdgeAppearance = TPPConfiguration.defaultAppearance()
     }

Palace/AppInfrastructure/TPPConfiguration+Ekirjasto.swift

@@ -175,12 +175,20 @@ extension TPPConfiguration {
     }
   }
 
-  @objc static func catalogSegmentedControlBackgroundColorNormal() -> UIColor {
+  @objc static func normalTabBarItemTitleColor() -> UIColor {
     if #available(iOS 13, *) {
-      return UIColor(named: "ColorEkirjastoFilterButtonBackgroundNormal")!
+      return UIColor(named: "ColorEkirjastoGrey")!
     } else {
       return .lightGray
     }
   }
-
+
+  @objc static func selectedTabBarItemTitleColor() -> UIColor {
+    if #available(iOS 13, *) {
+      return UIColor(named: "ColorEkirjastoLabel")!
+    } else {
+      return .lightGray
+    }
+  }
+
 }

Palace/EkirjastoConfig/Colors.xcassets/ColorEkirjastoGrey.colorset/Contents.json

@@ -5,9 +5,9 @@
         "color-space" : "srgb",
         "components" : {
           "alpha" : "1.000",
-          "blue" : "0x9A",
-          "green" : "0x9A",
-          "red" : "0x9A"
+          "blue" : "0x75",
+          "green" : "0x75",
+          "red" : "0x75"
         }
       },
       "idiom" : "universal"
@@ -23,9 +23,9 @@
         "color-space" : "srgb",
         "components" : {
           "alpha" : "1.000",
-          "blue" : "0x9A",
-          "green" : "0x9A",
-          "red" : "0x9A"
+          "blue" : "0x94",
+          "green" : "0x94",
+          "red" : "0x94"
         }
       },
       "idiom" : "universal"

Palace/EkirjastoConfig/Images.xcassets/Catalog.imageset/Contents.json

@@ -15,6 +15,7 @@
       "scale" : "1x"
     },
     {
+      "filename" : "[email protected]",
       "idiom" : "universal",
       "scale" : "2x"
     },
@@ -25,11 +26,12 @@
           "value" : "dark"
         }
       ],
+      "filename" : "[email protected]",
       "idiom" : "universal",
       "scale" : "2x"
     },
     {
-      "filename" : "catalog-inactive.png",
+      "filename" : "ekirjasto-icon-browseBooks-grey-042-@3x.png",
       "idiom" : "universal",
       "scale" : "3x"
     },
@@ -40,7 +42,7 @@
           "value" : "dark"
         }
       ],
-      "filename" : "catalog-active-72.png",
+      "filename" : "ekirjasto-icon-browseBooks-grey-054-@3x.png",
       "idiom" : "universal",
       "scale" : "3x"
     }

Palace/EkirjastoConfig/Images.xcassets/CatalogSelected.imageset/Contents.json

@@ -15,6 +15,7 @@
       "scale" : "1x"
     },
     {
+      "filename" : "[email protected]",
       "idiom" : "universal",
       "scale" : "2x"
     },
@@ -25,11 +26,12 @@
           "value" : "dark"
         }
       ],
+      "filename" : "[email protected]",
       "idiom" : "universal",
       "scale" : "2x"
     },
     {
-      "filename" : "catalog-active-72.png",
+      "filename" : "ekirjasto-icon-browseBooks-black-088-@3x.png",
       "idiom" : "universal",
       "scale" : "3x"
     },
@@ -40,7 +42,7 @@
           "value" : "dark"
         }
       ],
-      "filename" : "ekirjastoCatalogActiveDark.png",
+      "filename" : "ekirjasto-icon-browseBooks-white-100-@3x.png",
       "idiom" : "universal",
       "scale" : "3x"
     }

Palace/EkirjastoConfig/Images.xcassets/Holds.imageset/Contents.json

@@ -15,6 +15,7 @@
       "scale" : "1x"
     },
     {
+      "filename" : "[email protected]",
       "idiom" : "universal",
       "scale" : "2x"
     },
@@ -25,11 +26,12 @@
           "value" : "dark"
         }
       ],
+      "filename" : "[email protected]",
       "idiom" : "universal",
       "scale" : "2x"
     },
     {
-      "filename" : "reservation-inactiove.png",
+      "filename" : "ekirjasto-icon-holds-grey-042-@3x.png",
       "idiom" : "universal",
       "scale" : "3x"
     },
@@ -40,7 +42,7 @@
           "value" : "dark"
         }
       ],
-      "filename" : "reservation-active-72.png",
+      "filename" : "ekirjasto-icon-holds-grey-054-@3x.png",
       "idiom" : "universal",
       "scale" : "3x"
     }

Palace/EkirjastoConfig/Images.xcassets/HoldsSelected.imageset/Contents.json

@@ -15,6 +15,7 @@
       "scale" : "1x"
     },
     {
+      "filename" : "[email protected]",
       "idiom" : "universal",
       "scale" : "2x"
     },
@@ -25,11 +26,12 @@
           "value" : "dark"
         }
       ],
+      "filename" : "[email protected]",
       "idiom" : "universal",
       "scale" : "2x"
     },
     {
-      "filename" : "reservation-active-72.png",
+      "filename" : "ekirjasto-icon-holds-black-088-@3x.png",
       "idiom" : "universal",
       "scale" : "3x"
     },
@@ -40,7 +42,7 @@
           "value" : "dark"
         }
       ],
-      "filename" : "ekirjastoReservationActiveDark.png",
+      "filename" : "ekirjasto-icon-holds-white-100-@3x.png",
       "idiom" : "universal",
       "scale" : "3x"
     }

Palace/EkirjastoConfig/Images.xcassets/Magazines.imageset/Contents.json

@@ -15,6 +15,7 @@
       "scale" : "1x"
     },
     {
+      "filename" : "[email protected]",
       "idiom" : "universal",
       "scale" : "2x"
     },
@@ -25,11 +26,12 @@
           "value" : "dark"
         }
       ],
+      "filename" : "[email protected]",
       "idiom" : "universal",
       "scale" : "2x"
     },
     {
-      "filename" : "newspaper-any.png",
+      "filename" : "ekirjasto-icon-magazines-grey-042-@3x.png",
       "idiom" : "universal",
       "scale" : "3x"
     },
@@ -40,7 +42,7 @@
           "value" : "dark"
         }
       ],
-      "filename" : "newspaper-dark.png",
+      "filename" : "ekirjasto-icon-magazines-grey-054-@3x.png",
       "idiom" : "universal",
       "scale" : "3x"
     }

Palace/EkirjastoConfig/Images.xcassets/MagazinesSelected.imageset/Contents.json

@@ -15,6 +15,7 @@
       "scale" : "1x"
     },
     {
+      "filename" : "[email protected]",
       "idiom" : "universal",
       "scale" : "2x"
     },
@@ -25,11 +26,12 @@
           "value" : "dark"
         }
       ],
+      "filename" : "[email protected]",
       "idiom" : "universal",
       "scale" : "2x"
     },
     {
-      "filename" : "newspaper-selected-any.png",
+      "filename" : "ekirjasto-icon-magazines-black-088-@3x.png",
       "idiom" : "universal",
       "scale" : "3x"
     },
@@ -40,7 +42,7 @@
           "value" : "dark"
         }
       ],
-      "filename" : "newspaper-selected-dark.png",
+      "filename" : "ekirjasto-icon-magazines-white-100-@3x.png",
       "idiom" : "universal",
       "scale" : "3x"
     }