Merge branch 'develop' into release

package.json

@@ -1,6 +1,6 @@
 {
     "name": "atlas-ui-framework",
-    "version": "2.3.0",
+    "version": "2.3.1",
     "description": "Mendix Atlas UI is the foundation of making beautiful apps with Mendix. For more information about the framework go to https://atlas.mendix.com.",
     "main": "",
     "scripts": {

settings-native.json

@@ -320,6 +320,10 @@
                 "type": "Dropdown",
                 "description": "Justify content in the active direction.",
                 "options": [
+                    {
+                        "name": "Start",
+                        "class": "justifyContentStart"
+                    },
                     {
                         "name": "Center",
                         "class": "justifyContentCenter"
@@ -585,6 +589,10 @@
                 "type": "Dropdown",
                 "description": "Justify content in the active direction.",
                 "options": [
+                    {
+                        "name": "Start",
+                        "class": "justifyContentStart"
+                    },
                     {
                         "name": "Center",
                         "class": "justifyContentCenter"

styles/native/app/custom-variables.js

@@ -21,8 +21,8 @@ export const brand = {
 
 // Dark Mode - Inherits OS theme if possible
 export const darkMode = NativeModules && NativeModules.RNDarkMode && NativeModules.RNDarkMode.initialMode
-                 ? NativeModules.RNDarkMode.initialMode === "dark"
-                 : false;
+                        ? NativeModules.RNDarkMode.initialMode === "dark"
+                        : false;
 
 // Background Colors
 const backgroundColor = darkMode ? "#000" : "#FFF";
@@ -84,10 +84,12 @@ export const spacing = {
 // Button Styles
 export const button = {
     fontSize: font.sizeSmall,
-    fontSizeIcon: font.sizeSmall,
+    fontSizeIcon: font.size,
+    fontSizeIconSmall: font.sizeSmall,
+    fontSizeIconLarge: font.sizeLarge,
     borderRadius: border.radius,
-    paddingVertical: Platform.select({ android: spacing.smaller, ios: spacing.smaller }),
-    paddingHorizontal: Platform.select({ android: spacing.small, ios: spacing.regular }),
+    paddingVertical: spacing.smaller,
+    paddingHorizontal: spacing.regular,
 
     header: {
         color: brand.primary,
@@ -146,21 +148,35 @@ export const input = {
 
     // Alignment
     textAlign: "left",
-    paddingHorizontal: spacing.small,
+    paddingHorizontal: spacing.smaller,
     paddingVertical: spacing.small,
 };
 
 // Navigation Styles
 export const navigation = {
+    statusBar: {
+        backgroundColor: background.primary,
+        barStyle: darkMode ? "light-content" : "dark-content",
+    },
     topBar: {
         backgroundColor: background.primary,
         backButtonColor: contrast.highest,
         titleColor: contrast.highest,
+        titleFontSize: Platform.select({ android: font.sizeH4, ios: font.sizeH5 }),
     },
     bottomBar: {
         color: contrast.high,
-        selectedColor: brand.primary,
+        selectedTextColor: contrast.high,
+        selectedIconColor: brand.primary,
         backgroundColor: background.primary,
+        fontSize: font.sizeSmall,
+        iconSize: font.sizeSmall,
+    },
+    progressOverlay: {
+        color: "#FFF",
+        activityIndicatorColor: "#FFF",
+        backgroundColor: `rgba(0, 0, 0, 0.5)`,
+        fontSize: font.size,
     },
 };
 

styles/native/core/helpers/buttons.js

@@ -109,6 +109,27 @@ export const btnIconWhite = merge(btnIconPrimary, {
     },
 });
 
+// Round Button Icon With Background
+export const btnIconPrimaryBackground = {
+    container: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        paddingVertical: 0,
+        paddingHorizontal: 0,
+    },
+    icon: {
+        width: "100%",
+        height: "100%",
+        alignItems: "center",
+        justifyContent: "center",
+        size: button.fontSizeIconLarge,
+        color: button.primary.color,
+    },
+};
+
+
+// Text only
 export const btnAsText = {
     container: {
         maxHeight: 22,
@@ -122,7 +143,7 @@ export const btnAsText = {
     icon: {
         color: brand.primary,
         fontWeight: font.weightSemiBold,
-        size: button.fontSizeIcon,
+        size: button.fontSizeIconSmall,
     },
     caption: {
         color: brand.primary,

styles/native/core/manifest.json

@@ -1,4 +1,4 @@
 {
     "name": "Atlas-UI-Framework",
-    "version": "2.3.0"
+    "version": "2.3.1"
 }

styles/native/core/variables.js

@@ -85,10 +85,12 @@ spacing = merge(spacing, custom.spacing || {});
 // Button Styles
 let button = {
     fontSize: font.sizeSmall,
-    fontSizeIcon: font.sizeSmall,
+    fontSizeIcon: font.size,
+    fontSizeIconSmall: font.sizeSmall,
+    fontSizeIconLarge: font.sizeLarge,
     borderRadius: border.radius,
-    paddingVertical: Platform.select({ android: spacing.smaller, ios: spacing.smaller }),
-    paddingHorizontal: Platform.select({ android: spacing.small, ios: spacing.regular }),
+    paddingVertical: spacing.smaller,
+    paddingHorizontal: spacing.regular,
 
     header: {
         color: brand.primary,
@@ -148,7 +150,7 @@ let input = {
 
     // Alignment
     textAlign: "left",
-    paddingHorizontal: spacing.small,
+    paddingHorizontal: spacing.smaller,
     paddingVertical: spacing.small,
 };
 input = merge(input, custom.input || {});
@@ -163,14 +165,15 @@ let navigation = {
         backgroundColor: background.primary,
         backButtonColor: contrast.highest,
         titleColor: contrast.highest,
-        titleFontSize: font.sizeH4,
+        titleFontSize: Platform.select({ android: font.sizeH4, ios: font.sizeH5 }),
     },
     bottomBar: {
         color: contrast.high,
         selectedTextColor: contrast.high,
         selectedIconColor: brand.primary,
         backgroundColor: background.primary,
         fontSize: font.sizeSmall,
+        iconSize: font.sizeSmall,
     },
     progressOverlay: {
         color: "#FFF",

styles/native/core/widgets/buttons.js

@@ -30,7 +30,7 @@ export const ActionButton = {
     icon: {
         // Size and color are allowed
         color: button.primary.color,
-        size: button.fontSizeIcon,
+        size: button.fontSizeIconSmall,
     },
     caption: {
         // All TextStyle properties are allowed
@@ -50,7 +50,7 @@ export const ActionButtonHeader = {
     },
     icon: {
         color: button.header.color,
-        size: button.header.fontSizeIcon,
+        size: button.header.fontSizeIconSmall,
     },
     caption: {
         color: button.header.color,

styles/native/core/widgets/introscreen.js

@@ -30,7 +30,7 @@ export const introScreenButtonPaginationAbove = {
     icon: {
         // Size and color are allowed
         color: button.primary.color,
-        size: button.fontSizeIcon,
+        size: button.fontSizeIconSmall,
     },
     caption: {
         // All TextStyle properties are allowed
@@ -53,7 +53,7 @@ export const introScreenButtonPaginationBetween = {
     icon: {
         // Size and color are allowed
         color: font.color,
-        size: button.fontSizeIcon,
+        size: button.fontSizeIconSmall,
     },
     caption: {
         // All TextStyle properties are allowed

styles/native/core/widgets/navigation.js

@@ -30,7 +30,7 @@ export const navigationStyle = {
             color: navigation.topBar.titleColor,
             fontSize: navigation.topBar.titleFontSize,
             fontFamily: font.family,
-            fontWeight: Platform.select({ ios: font.weightBold, android: font.weightNormal }),
+            fontWeight: font.weightBold,
         },
         backButtonText: {
             // All TextStyle properties are allowed
@@ -64,12 +64,12 @@ export const navigationStyle = {
         icon: {
             // All TextStyle properties are allowed
             color: navigation.bottomBar.color,
-            fontSize: navigation.bottomBar.fontSize,
+            fontSize: navigation.bottomBar.iconSize,
         },
         selectedIcon: {
             // All TextStyle properties are allowed
             color: navigation.bottomBar.selectedIconColor,
-            fontSize: navigation.bottomBar.fontSize,
+            fontSize: navigation.bottomBar.iconSize,
         },
     },
     progressOverlay: {

styles/native/main.js

@@ -60,6 +60,8 @@ export * from "./core/helpers/helperclasses";
 
 // Building blocks
 export * from "./ui_resources/atlas_ui_resources/buildingblocks/card";
+export * from "./ui_resources/atlas_ui_resources/buildingblocks/header";
 
 
 // Page Templates
+export * from "./ui_resources/atlas_ui_resources/pagetemplates/maps";

styles/native/ui_resources/atlas_ui_resources/buildingblocks/header.js

@@ -0,0 +1,60 @@
+import { Platform }                              from "react-native";
+import { background, border, contrast, spacing } from "../../../core/variables";
+
+/* ==========================================================================
+    Cards
+
+========================================================================== */
+
+export const header = {
+    container: {
+        borderRadius: border.radius,
+        backgroundColor: background.primary,
+        marginBottom: spacing.regular,
+
+        ...Platform.select({
+            android: {
+                borderWidth: 1,
+                borderColor: contrast.lowest,
+            },
+        }),
+    },
+};
+
+//== Elements
+//-------------------------------------------------------------------------------------------------------------------//
+
+export const headerImageFull = {
+    container: {
+        overflow: "hidden",
+    },
+    image: {
+        width: "100%",
+        height: 250,
+        resizeMode: "cover",
+    },
+};
+
+export const headerImageOverlay = {
+    container: {
+        zIndex: 10,
+        width: "100%",
+        height: "100%",
+        position: "absolute",
+        backgroundColor: "rgba(0,0,0,0.4)",
+    },
+};
+
+export const headerBody = {
+    container: {
+        bottom: 0,
+        zIndex: 11,
+        width: "100%",
+        position: "absolute",
+        backgroundColor: "transparent",
+    },
+};
+
+//== Variations
+//-------------------------------------------------------------------------------------------------------------------//
+

styles/native/ui_resources/atlas_ui_resources/pagetemplates/maps.js

@@ -0,0 +1,53 @@
+import { background, border, contrast, spacing } from "../../../core/variables.js";
+
+
+/* ==========================================================================
+    Maps
+
+========================================================================== */
+
+
+//== Elements
+//-------------------------------------------------------------------------------------------------------------------//
+
+
+export const mapContainerBottom = {
+    container: {
+        flexDirection: "row",
+        alignItems: "center",
+        bottom: 0,
+        position: "absolute",
+    },
+};
+
+export const mapList = {
+    container: {
+        paddingHorizontal: spacing.regular,
+    },
+};
+
+export const mapListItemImage = {
+    container: {
+        backgroundColor: background.primary,
+        borderRadius: border.radius,
+        marginVertical: spacing.regular,
+        marginLeft: spacing.smallest,
+        marginRight: spacing.regular,
+        elevation: 4,
+        shadowColor: contrast.low,
+        shadowOpacity: 0.8,
+        shadowRadius: 8,
+        shadowOffset: {
+            width: 0,
+            height: 2,
+        },
+    },
+    image: {
+        borderRadius: border.radius,
+    },
+};
+
+
+//== Variations
+//-------------------------------------------------------------------------------------------------------------------//
+//

styles/web/sass/app/_custom-variables.scss

@@ -33,6 +33,7 @@ $font-size-h1:                                      31px;
 $font-size-h2:                                      26px;
 $font-size-h3:                                      24px;
 $font-size-h4:                                      18px;
+$font-color-detail:                                 $gray-light;
 $font-color-headers:                                #17347B;
 
 //== Step 2: UI Customization

styles/web/sass/core/_legacy/_mxui.scss

@@ -2681,9 +2681,10 @@ input[type="checkbox"] {
     display: table-cell;
     vertical-align: top;
 }
-.mx-scrollcontainer-wrapper {
-    padding: 10px;
-}
+//.mx-scrollcontainer-wrapper {
+//    padding: 10px;
+//}
+
 .mx-scrollcontainer-nested {
     padding: 0;
 }
@@ -3027,9 +3028,9 @@ body[dir="rtl"] .mx-header-left {
 //    background: #f5f5f5;
 //}
 .mx-listview > ul > li.selected {
-    background: #eee;
+//    background: #eee;
 }
-.mx-listview-clickable ul * {
+.mx-listview-clickable > ul > li {
     cursor: pointer;
 }
 .mx-listview-empty {