Merge commit '7a3da4b29cfa901cff612c6be9a76d2b34421400' into release

mendix · Aug 28, 2019 · 9a3af0e · 9a3af0e
2 parents 071a8f2 + 7a3da4b
commit 9a3af0e
Show file tree

Hide file tree

Showing 78 changed files with 765 additions and 613 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -1,5 +1,5 @@
 {
-    "singleQuote": true,
+    "singleQuote": false,
     "printWidth": 120,
     "proseWrap": "always",
     "tabWidth": 4,

diff --git a/.stylelintrc b/.stylelintrc
@@ -2,7 +2,7 @@
     "extends": "stylelint-config-standard",
     "rules": {
         "indentation": 4,
-        "string-quotes": "single",
+        "string-quotes": "double",
         "no-duplicate-selectors": true,
         "color-hex-case": "upper",
         "color-hex-length": "short",

diff --git a/README.md b/README.md
@@ -3,7 +3,7 @@
 Mendix Atlas UI is the foundation of making beautiful apps with Mendix. For more information about the framework go to
 [here](https://atlas.mendix.com/).
 
-##### Structure
+#### Structure
 
 Mendix is capable of creating beautiful and user-friendly UI. Our Atlas UI framework demonstrates some of its
 possibilities. Here you will find a basic overview of our framework.
@@ -50,7 +50,7 @@ theme/
 └── styles.js
 ```
 
-###### App
+#### App
 
 The app folder contains all custom styling. We recommend users to only use this directory for any custom styling.
 
@@ -59,13 +59,13 @@ These variables can be found in _styles/web/sass/core/variables.scss_ or _styles
 to change any core variable, copy it to _../app/\_custom-variables.(scss|js)_ and change it there. It will then
 overwrite the core variable. This will make updating Atlas UI much easier in the future.
 
-###### Core
+#### Core
 
 The core folder is the heart of Atlas UI. This folder includes base styling, widget styling & additional helper classes.
 The core widget styling is split in to two parts. The widget folder includes the default widget styling, as it will look
 out of the box. The helpers folder will include design properties and extra classes to change that default styling.
 
-###### UI Resources
+#### UI Resources
 
 THe UI Resources folder will contain any styling related to Building Blocks, Page Templates and Layouts.
 
@@ -78,6 +78,6 @@ like.
 Layouts are created with widgets. They are mainly used for navigation or user experiences which need to be consistent
 between pages.
 
-### License
+## License
 
 MIT
diff --git a/login-with-sso.html b/login-with-sso.html
@@ -23,7 +23,7 @@ <h2>Sign in</h2>
                         <div>
                             <div id="loginMessage" class="alert alert-danger"></div>
                             <div class="form-group">
-                                <label id="usernameLabel" for="usernameInput">User name</label>
+                                <label class="control-label" id="usernameLabel" for="usernameInput">User name</label>
                                 <div class="inputwrapper">
                                     <input
                                         id="usernameInput"
@@ -38,7 +38,7 @@ <h2>Sign in</h2>
                                 </div>
                             </div>
                             <div class="form-group">
-                                <label id="passwordLabel" for="passwordInput">Password</label>
+                                <label class="control-label" id="passwordLabel" for="passwordInput">Password</label>
                                 <div class="inputwrapper">
                                     <input
                                         id="passwordInput"
@@ -49,7 +49,7 @@ <h2>Sign in</h2>
                                         autocapitalize="none"
                                         autocomplete="off"
                                     />
-                                    <span class="glyphicon glyphicon-eye-close"></span>
+                                    <span class="glyphicon glyphicon-eye-close" onClick="togglePassword()"></span>
                                 </div>
                             </div>
                             <button id="loginButton" type="submit" class="btn btn-success btn-lg">Sign in</button>
@@ -122,5 +122,17 @@ <h2>Sign in</h2>
 
         <script src="js/login_i18n.js?{{ cachebust }}"></script>
         <script src="js/login.js?{{ cachebust }}"></script>
+        <script>
+            function togglePassword() {
+                const icon = document.querySelector('[class*=glyphicon-eye]');
+                if (icon.classList.contains('glyphicon-eye-close'))
+                    icon.classList.replace('glyphicon-eye-close', 'glyphicon-eye-open');
+                else icon.classList.replace('glyphicon-eye-open', 'glyphicon-eye-close');
+
+                const input = document.querySelector('#passwordInput');
+                if (input.type === 'password') input.type = 'text';
+                else input.type = 'password';
+            }
+        </script>
     </body>
 </html>
diff --git a/login.html b/login.html
@@ -8,7 +8,6 @@
         <meta name="apple-mobile-web-app-capable" content="yes" />
 
         {{themecss}}
-
     </head>
 
     <body>
@@ -23,7 +22,7 @@ <h2>Sign in</h2>
                         <div>
                             <div id="loginMessage" class="alert alert-danger"></div>
                             <div class="form-group">
-                                <label id="usernameLabel" for="usernameInput">User name</label>
+                                <label class="control-label" id="usernameLabel" for="usernameInput">User name</label>
                                 <div class="inputwrapper">
                                     <input
                                         id="usernameInput"
@@ -38,7 +37,7 @@ <h2>Sign in</h2>
                                 </div>
                             </div>
                             <div class="form-group">
-                                <label id="passwordLabel" for="passwordInput">Password</label>
+                                <label class="control-label" id="passwordLabel" for="passwordInput">Password</label>
                                 <div class="inputwrapper">
                                     <input
                                         id="passwordInput"
@@ -49,7 +48,7 @@ <h2>Sign in</h2>
                                         autocapitalize="none"
                                         autocomplete="off"
                                     />
-                                    <span class="glyphicon glyphicon-eye-close"></span>
+                                    <span class="glyphicon glyphicon-eye-close" onClick="togglePassword()"></span>
                                 </div>
                             </div>
                             <button id="loginButton" type="submit" class="btn btn-success btn-lg">Sign in</button>
@@ -112,5 +111,17 @@ <h2>Sign in</h2>
 
         <script src="js/login_i18n.js?{{ cachebust }}"></script>
         <script src="js/login.js?{{ cachebust }}"></script>
+        <script>
+            function togglePassword() {
+                const icon = document.querySelector('[class*=glyphicon-eye]');
+                if (icon.classList.contains('glyphicon-eye-close'))
+                    icon.classList.replace('glyphicon-eye-close', 'glyphicon-eye-open');
+                else icon.classList.replace('glyphicon-eye-open', 'glyphicon-eye-close');
+
+                const input = document.querySelector('#passwordInput');
+                if (input.type === 'password') input.type = 'text';
+                else input.type = 'password';
+            }
+        </script>
     </body>
 </html>
diff --git a/styles.js b/styles.js
@@ -1,6 +1,6 @@
-import * as main from './styles/native/main';
-import * as custom from './styles/native/app/custom';
-import mergeobjects from './styles/native/core/helpers/_helperfunctions/mergeobjects';
+import * as main    from './styles/native/main';
+import * as custom  from './styles/native/app/custom';
+import mergeobjects from './styles/native/core/helpers/_functions/mergeobjects';
 
 Object.keys(custom).forEach(key => {
     if (main[key]) {

diff --git a/styles/native/app/custom-variables.js b/styles/native/app/custom-variables.js
@@ -1,6 +1,6 @@
-import { setColorBasedOnBackground, setContrastScale } from "../core/_helperfunctions/convertcolors";
-import { Platform } from "react-native";
-import adjustFont from "../core/_helperfunctions/adjustfont";
+import { Platform }                                    from "react-native";
+import adjustFont                                      from "../core/helpers/_functions/adjustfont";
+import { setColorBasedOnBackground, setContrastScale } from "../core/helpers/_functions/convertcolors";
 
 /*
 ==> You can find a copy of the core variables below. (From styles/native/core/variables.js)
@@ -16,7 +16,7 @@ export const brand = {
     primary: "#0595DB",
     success: "#76CA02",
     warning: "#f99b1d",
-    danger: "#ed1c24"
+    danger: "#ed1c24",
 };
 
 // Dark Mode
@@ -28,7 +28,7 @@ const backgroundSecondaryContrast = darkMode ? 0.11 : 0.03;
 
 export const background = {
     primary: backgroundColor,
-    secondary: setContrastScale(backgroundSecondaryContrast, backgroundColor)
+    secondary: setContrastScale(backgroundSecondaryContrast, backgroundColor),
 };
 
 // Contrast (Gray) colors based on background.primary
@@ -39,14 +39,14 @@ export const contrast = {
     regular: setContrastScale(0.5, background.primary),
     low: setContrastScale(0.35, background.primary),
     lower: setContrastScale(0.2, background.primary),
-    lowest: setContrastScale(0.05, background.primary)
+    lowest: setContrastScale(0.05, background.primary),
 };
 
 // Border Style
 export const border = {
     color: setContrastScale(0.17, background.primary),
     width: 1,
-    radius: 5
+    radius: 5,
 };
 
 // Font Styles
@@ -65,7 +65,7 @@ export const font = {
     weightNormal: "normal",
     weightSemiBold: "600",
     weightBold: "bold",
-    family: Platform.select({ ios: "System", android: "normal" })
+    family: Platform.select({ ios: "System", android: "normal" }),
 };
 
 // Spacing
@@ -76,7 +76,7 @@ export const spacing = {
     regular: 20,
     large: 25,
     larger: 30,
-    largest: 40
+    largest: 40,
 };
 
 // Button Styles
@@ -87,33 +87,33 @@ export const button = {
     header: {
         color: brand.primary,
         borderColor: "transparent",
-        backgroundColor: "transparent"
+        backgroundColor: "transparent",
     },
     primary: {
         color: "#FFF",
         borderColor: brand.primary,
-        backgroundColor: brand.primary
+        backgroundColor: brand.primary,
     },
     secondary: {
         color: brand.primary,
         borderColor: brand.primary,
-        backgroundColor: "transparent"
+        backgroundColor: "transparent",
     },
     success: {
         color: "#FFF",
         borderColor: brand.success,
-        backgroundColor: brand.success
+        backgroundColor: brand.success,
     },
     warning: {
         color: "#FFF",
         borderColor: brand.warning,
-        backgroundColor: brand.warning
+        backgroundColor: brand.warning,
     },
     danger: {
         color: "#FFF",
         borderColor: brand.danger,
-        backgroundColor: brand.danger
-    }
+        backgroundColor: brand.danger,
+    },
 };
 
 //Input Styles
@@ -137,5 +137,5 @@ export const input = {
     // Alignment
     textAlign: "left",
     paddingHorizontal: spacing.small,
-    paddingVertical: spacing.small
+    paddingVertical: spacing.small,
 };
diff --git a/styles/native/app/custom.js b/styles/native/app/custom.js
@@ -1 +1 @@
-import {  } from '../core/variables';
+import {} from "../core/variables";