Merge pull request #91 from mendix/develop

Merge develop to release

index-rtl.html

@@ -4,7 +4,7 @@
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
         <title>Mendix</title>
-        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta name="apple-mobile-web-app-capable" content="yes">
 
         {{themecss}}

index.html

@@ -4,7 +4,7 @@
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
         <title>Mendix</title>
-        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta name="apple-mobile-web-app-capable" content="yes">
 
         {{themecss}}

login-with-sso.html

@@ -4,7 +4,7 @@
         <meta charset="utf-8" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
         <title>Login</title>
-        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta name="apple-mobile-web-app-capable" content="yes" />
 
         {{themecss}}

login.html

@@ -4,7 +4,7 @@
         <meta charset="utf-8" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
         <title>Login</title>
-        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta name="apple-mobile-web-app-capable" content="yes" />
 
         {{themecss}}

package.json

@@ -1,6 +1,6 @@
 {
     "name": "atlas-ui-framework",
-    "version": "2.6.1",
+    "version": "2.6.2",
     "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": {

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

@@ -72,6 +72,8 @@ export const font = {
     sizeH5: adjustFont(14),
     sizeH6: adjustFont(12),
     color: setColorBasedOnBackground(background.primary),
+    colorDisabled: "#9DA1A8",
+    labelColorDisabled: "#474E5C",
     weightLight: "100",
     weightNormal: "normal",
     weightSemiBold: "600",
@@ -111,8 +113,11 @@ export const button = {
     },
     primary: {
         color: "#FFF",
+        colorDisabled: font.colorDisabled,
         borderColor: brand.primary,
+        borderColorDisabled: border.color,
         backgroundColor: brand.primary,
+        backgroundColorDisabled: border.color,
     },
     secondary: {
         color: brand.primary,
@@ -141,11 +146,13 @@ export const button = {
 export const input = {
     // Colors
     color: font.color,
+    colorDisabled: font.colorDisabled,
     errorColor: brand.danger,
     labelColor: font.color,
+    labelColorDisabled: font.labelColorDisabled,
     borderColor: contrast.lower,
     backgroundColor: background.primary,
-    disabledBackgroundColor: contrast.lowest,
+    backgroundColorDisabled: background.secondary,
     selectionColor: contrast.lower,
     placeholderTextColor: contrast.regular,
     underlineColorAndroid: "transparent",

styles/native/js/core/manifest.json

@@ -1,4 +1,4 @@
 {
     "name": "Atlas-UI-Framework",
-    "version": "2.6.1"
+    "version": "2.6.2"
 }

styles/native/js/core/variables.js

@@ -69,6 +69,8 @@ let font = {
     sizeH5: adjustFont(14),
     sizeH6: adjustFont(12),
     color: setColorBasedOnBackground(background.primary),
+    colorDisabled: "#9DA1A8",
+    labelColorDisabled: "#474E5C",
     weightLight: "100",
     weightNormal: "normal",
     weightSemiBold: "600",
@@ -110,8 +112,11 @@ let button = {
     },
     primary: {
         color: "#FFF",
+        colorDisabled: font.colorDisabled,
         borderColor: brand.primary,
+        borderColorDisabled: border.color,
         backgroundColor: brand.primary,
+        backgroundColorDisabled: border.color,
     },
     secondary: {
         color: brand.primary,
@@ -141,11 +146,13 @@ button = merge(button, custom.button || {});
 let input = {
     // Colors
     color: font.color,
+    colorDisabled: font.colorDisabled,
     errorColor: brand.danger,
     labelColor: font.color,
+    labelColorDisabled: font.labelColorDisabled,
     borderColor: contrast.lower,
     backgroundColor: background.primary,
-    disabledBackgroundColor: contrast.lowest,
+    backgroundColorDisabled: background.secondary,
     selectionColor: contrast.lower,
     placeholderTextColor: contrast.regular,
     underlineColorAndroid: "transparent",

styles/native/js/core/widgets/buttons.js

@@ -25,18 +25,31 @@ export const ActionButton = {
         paddingVertical: button.paddingVertical,
         paddingHorizontal: button.paddingHorizontal,
     },
+    containerDisabled: {
+        // All ViewStyle properties are allowed
+        borderColor: button.primary.borderColorDisabled,
+        backgroundColor: button.primary.backgroundColorDisabled,
+    },
     icon: {
-        // Size and color are allowed
+        // size and color are allowed
         color: button.primary.color,
         size: button.fontSizeIcon,
     },
+    iconDisabled: {
+        // size and color are allowed
+        color: button.primary.colorDisabled,
+    },
     caption: {
         // All TextStyle properties are allowed
         color: button.primary.color,
         fontSize: button.fontSize,
         fontFamily: font.family,
         fontWeight: button.fontWeight,
     },
+    captionDisabled: {
+        // All TextStyle properties are allowed
+        color: button.primary.colorDisabled,
+    },
 };
 //
 // Default style for button inside a header

styles/native/js/core/widgets/checkbox.js

@@ -1,5 +1,5 @@
 import { Platform } from "react-native";
-import { background, brand, contrast, spacing } from "../variables";
+import { background, border, brand, contrast, font, spacing } from "../variables";
 import { TextBox, TextBoxVertical } from "./textbox";
 /*
 
@@ -20,10 +20,18 @@ export const CheckBox = {
         paddingVertical: spacing.smallest,
         justifyContent: "center",
     },
+    containerDisabled: {
+        // All ViewStyle properties are allowed
+        ...TextBox.containerDisabled
+    },
     label: {
         // numberOfLines and all TextStyle properties are allowed
         ...TextBox.label,
     },
+    labelDisabled: {
+        // All TextStyle properties are allowed
+        ...TextBox.labelDisabled
+    },
     input: {
         // thumbColorOn, thumbColorOff, trackColorOn, trackColorOff and all TextStyle properties are allowed
         backgroundColor: "transparent",
@@ -35,7 +43,10 @@ export const CheckBox = {
     },
     inputDisabled: {
         // thumbColorOn, thumbColorOff, trackColorOn, trackColorOff and all TextStyle properties are allowed
-        opacity: Platform.select({ android: 0.5 }),
+        thumbColorOn: background.secondary,
+        trackColorOn: font.colorDisabled,
+        thumbColorOff: background.secondary,
+        trackColorOff: border.color,
     },
     inputError: {
         // thumbColorOn, thumbColorOff, trackColorOn, trackColorOff and all TextStyle properties are allowed
@@ -53,9 +64,9 @@ export const CheckBox = {
 };
 export const CheckBoxVertical = {
     container: TextBoxVertical.container,
-    label: {
-        ...TextBoxVertical.label,
-    },
+    containerDisabled: TextBoxVertical.containerDisabled,
+    label: TextBoxVertical.label,
+    labelDisabled: TextBoxVertical.labelDisabled,
     input: {
         ...CheckBox.input,
         alignSelf: "flex-start",

styles/native/js/core/widgets/container.js

@@ -12,8 +12,12 @@ To customize any core styling, copy the part you want to customize to styles/nat
 ========================================================================== */
 export const Container = {
     container: {
-    // All ViewStyle properties are allowed
+    // rippleColor & all ViewStyle properties are allowed
     },
+    containerDisabled: {
+        // All ViewStyle properties are allowed
+        opacity: 0.6
+    }
 };
 export const ScrollContainer = {
     container: {

styles/native/js/core/widgets/datepicker.js

@@ -1,6 +1,4 @@
-import { NativeModules } from "react-native";
-import { darkMode } from "../../app/custom-variables";
-import { font, input } from "../variables";
+import { background, font, input } from "../variables";
 import { TextBox, TextBoxVertical } from "./textbox";
 /*
 
@@ -14,32 +12,34 @@ To customize any core styling, copy the part you want to customize to styles/nat
 
     Default Class For Mendix Date Picker Widget
 ========================================================================== */
-// Font color of native iOS datepicker can not be changed.
-// To fix this we change the background color of the picker if OS theme is dark and app theme is light (And the other way around).
-const isOSDarkMode = NativeModules && NativeModules.RNDarkMode && NativeModules.RNDarkMode.initialMode && NativeModules.RNDarkMode.initialMode === "dark";
-const pickerBackgroundColor = !darkMode && isOSDarkMode ?
-    "rgba(0, 0, 0, 1)" :
-    darkMode && !isOSDarkMode ? "rgba(255, 255, 255, 1)" : input.backgroundColor;
-//
 export const DatePicker = {
     container: {
         // All ViewStyle properties are allowed
         ...TextBox.container,
     },
+    containerDisabled: {
+        // All ViewStyle properties are allowed
+        ...TextBox.containerDisabled
+    },
     label: {
         // numberOfLines and all TextStyle properties are allowed
         ...TextBox.label,
     },
+    labelDisabled: {
+        // All TextStyle properties are allowed
+        ...TextBox.labelDisabled
+    },
     pickerIOS: {
-        // All ViewStyle properties are allowed
-        backgroundColor: pickerBackgroundColor,
+        // All ViewStyle properties & "color" (type: string) are allowed
+        backgroundColor: background.primary,
+        color: font.color,
     },
     pickerBackdropIOS: {
     // All ViewStyle properties are allowed
     },
     pickerTopIOS: {
         // All ViewStyle properties are allowed
-        backgroundColor: pickerBackgroundColor,
+        backgroundColor: background.primary,
     },
     value: {
         // All TextStyle properties are allowed
@@ -55,14 +55,16 @@ export const DatePicker = {
     },
     valueDisabled: {
         // All TextStyle properties are allowed
-        backgroundColor: input.disabledBackgroundColor,
+        backgroundColor: input.backgroundColorDisabled,
+        color: input.colorDisabled
     },
     placeholder: {
         // All TextStyle properties are allowed
         color: input.placeholderTextColor,
     },
     placeholderDisabled: {
-    // All TextStyle properties are allowed
+        // All TextStyle properties are allowed
+        color: input.colorDisabled
     },
     validationMessage: {
         // All TextStyle properties are allowed
@@ -71,20 +73,12 @@ export const DatePicker = {
 };
 export const DatePickerVertical = {
     container: TextBoxVertical.container,
+    containerDisabled: TextBoxVertical.containerDisabled,
     label: TextBoxVertical.label,
-    value: {
-        color: input.color,
-        borderColor: input.borderColor,
-        backgroundColor: input.backgroundColor,
-        fontSize: input.fontSize,
-        fontFamily: font.family,
-        borderRadius: input.borderRadius,
-        borderWidth: input.borderWidth,
-        paddingHorizontal: input.paddingHorizontal,
-        paddingVertical: input.paddingVertical,
-    },
-    placeholder: {
-        color: input.placeholderTextColor,
-    },
+    labelDisabled: TextBoxVertical.labelDisabled,
+    value: DatePicker.value,
+    valueDisabled: DatePicker.valueDisabled,
+    placeholder: DatePicker.placeholder,
+    placeholderDisabled: DatePicker.placeholderDisabled,
     validationMessage: TextBoxVertical.validationMessage,
 };