Merge pull request #95 from mendix/feat/navigation-vars

Add vars for progressOverlay

Author: wegiswes

styles/native/js/app/custom-variables.js

@@ -192,8 +192,12 @@ export const navigation = {
         activityIndicatorColor: font.color,
         backgroundColor: `rgba(0, 0, 0, 0.5)`,
         containerBackgroundColor: background.secondary,
-        shadowColor: "#000",
         fontSize: font.size,
+        borderRadius: border.radius,
+        elevation: 1.5,
+        shadowColor: "#000",
+        shadowOpacity: 0.1,
+        shadowRadius: 10,
     },
 };
 //

styles/native/js/core/variables.js

@@ -193,8 +193,12 @@ let navigation = {
         activityIndicatorColor: font.color,
         backgroundColor: `rgba(0, 0, 0, 0.5)`,
         containerBackgroundColor: background.secondary,
-        shadowColor: "#000",
         fontSize: font.size,
+        borderRadius: border.radius,
+        elevation: 1.5,
+        shadowColor: "#000",
+        shadowOpacity: 0.1,
+        shadowRadius: 10,
     },
 };
 navigation = merge(navigation, custom.navigation || {});

styles/native/js/core/widgets/navigation.js

@@ -1,4 +1,4 @@
-import { border, font, navigation, spacing } from "../variables";
+import { font, navigation, spacing } from "../variables";
 /*
 
 DISCLAIMER:
@@ -50,11 +50,11 @@ export const navigationStyle = {
             backgroundColor: navigation.progressOverlay.containerBackgroundColor,
             paddingHorizontal: spacing.largest,
             paddingVertical: spacing.large,
-            borderRadius: border.radius,
-            elevation: 1.5,
+            borderRadius: navigation.progressOverlay.borderRadius,
+            elevation: navigation.progressOverlay.elevation,
             shadowColor: navigation.progressOverlay.shadowColor,
-            shadowOpacity: 0.1,
-            shadowRadius: 10,
+            shadowOpacity: navigation.progressOverlay.shadowOpacity,
+            shadowRadius: navigation.progressOverlay.shadowRadius,
             shadowOffset: {
                 width: 0,
                 height: 2,

styles/native/ts/app/custom-variables.ts

@@ -213,8 +213,12 @@ export const navigation: VariablesNavigation = {
         activityIndicatorColor: font.color,
         backgroundColor: `rgba(0, 0, 0, 0.5)`,
         containerBackgroundColor: background.secondary,
-        shadowColor: "#000", // Only for iOS
         fontSize: font.size,
+        borderRadius: border.radius,
+        elevation: 1.5, // Only for Android
+        shadowColor: "#000", // Only for iOS
+        shadowOpacity: 0.1, // Only for iOS
+        shadowRadius: 10, // Only for iOS
     },
 };
 //

styles/native/ts/core/variables.ts

@@ -211,8 +211,12 @@ let navigation: VariablesNavigation = {
         activityIndicatorColor: font.color,
         backgroundColor: `rgba(0, 0, 0, 0.5)`,
         containerBackgroundColor: background.secondary,
-        shadowColor: "#000", // Only for iOS
         fontSize: font.size,
+        borderRadius: border.radius,
+        elevation: 1.5, // Only for Android
+        shadowColor: "#000", // Only for iOS
+        shadowOpacity: 0.1, // Only for iOS
+        shadowRadius: 10, // Only for iOS
     },
 };
 navigation = merge(navigation, custom.navigation || {});

styles/native/ts/core/widgets/navigation.ts

@@ -1,5 +1,5 @@
-import { border, font, navigation, spacing } from "../variables";
-import { NavigationType }                    from "../../types/widgets";
+import { NavigationType } from "../../types/widgets";
+import { font, navigation, spacing } from "../variables";
 /*
 
 DISCLAIMER:
@@ -52,16 +52,15 @@ export const navigationStyle: NavigationType = {
             backgroundColor: navigation.progressOverlay.containerBackgroundColor,
             paddingHorizontal: spacing.largest,
             paddingVertical: spacing.large,
-            borderRadius: border.radius,
-            elevation: 1.5,
+            borderRadius: navigation.progressOverlay.borderRadius,
+            elevation: navigation.progressOverlay.elevation,
             shadowColor: navigation.progressOverlay.shadowColor,
-            shadowOpacity: 0.1,
-            shadowRadius: 10,
+            shadowOpacity: navigation.progressOverlay.shadowOpacity,
+            shadowRadius: navigation.progressOverlay.shadowRadius,
             shadowOffset: {
                 width: 0,
                 height: 2,
             },
-
         },
         activityIndicator: {
             // Color, Size & All ViewStyle properties are allowed

styles/native/ts/types/variables.d.ts

@@ -157,8 +157,12 @@ export interface VariablesNavigation {
         activityIndicatorColor: string,
         backgroundColor: string,
         containerBackgroundColor: string,
-        shadowColor: string,
         fontSize: number
+        borderRadius: number,
+        elevation: number,
+        shadowColor: string,
+        shadowOpacity: number,
+        shadowRadius: number,
     }
 }