Merge branch 'develop' into release

package.json

@@ -0,0 +1,21 @@
+{
+    "name": "atlas-ui-framework",
+    "version": "2.1.4",
+    "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": {
+        "bump:patch": "node ./scripts/bump-patch.js",
+        "bump:minor": "node ./scripts/bump-minor.js",
+        "bump:major": "node ./scripts/bump-major.js"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/mendix/Atlas-UI-Framework.git"
+    },
+    "author": "Mendix",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/mendix/Atlas-UI-Framework/issues"
+    },
+    "homepage": "https://github.com/mendix/Atlas-UI-Framework#readme"
+}

scripts/bump-major.js

@@ -0,0 +1,12 @@
+const { getVersionFilePaths, readVersionFiles } = require("./lib/readFile.js");
+const { writeVersionFiles } = require("./lib/writeFile.js");
+
+(() => {
+    const paths = getVersionFilePaths();
+    const files = readVersionFiles(paths);
+    const versionNumbers = files.pkg.version.split(".");
+    const majorNumber = Number(versionNumbers[1]) + 1;
+    const majorVersion = majorNumber + "." + versionNumbers[1] + "." + versionNumbers[2];
+    files.pkg.version = files.manifest.js.version = files.manifest.sass.version = majorVersion;
+    writeVersionFiles(files, paths);
+})();

scripts/bump-minor.js

@@ -0,0 +1,12 @@
+const { getVersionFilePaths, readVersionFiles } = require("./lib/readFile.js");
+const { writeVersionFiles } = require("./lib/writeFile.js");
+
+(() => {
+    const paths = getVersionFilePaths();
+    const files = readVersionFiles(paths);
+    const versionNumbers = files.pkg.version.split(".");
+    const minorNumber = Number(versionNumbers[1]) + 1;
+    const minorVersion = versionNumbers[0] + "." + minorNumber + "." + versionNumbers[2];
+    files.pkg.version = files.manifest.js.version = files.manifest.sass.version = minorVersion;
+    writeVersionFiles(files, paths);
+})();

scripts/bump-patch.js

@@ -0,0 +1,12 @@
+const { getVersionFilePaths, readVersionFiles } = require("./lib/readFile.js");
+const { writeVersionFiles } = require("./lib/writeFile.js");
+
+(() => {
+    const paths = getVersionFilePaths();
+    const files = readVersionFiles(paths);
+    const versionNumbers = files.pkg.version.split(".");
+    const patchedNumber = Number(versionNumbers[2]) + 1;
+    const patchedVersion = versionNumbers[0] + "." + versionNumbers[1] + "." + patchedNumber;
+    files.pkg.version = files.manifest.js.version = files.manifest.sass.version = patchedVersion;
+    writeVersionFiles(files, paths);
+})();

scripts/lib/readFile.js

@@ -0,0 +1,18 @@
+const path = require("path");
+
+module.exports.getVersionFilePaths = () => ({
+    pkg: path.join(process.cwd(), "package.json"),
+    manifest: {
+        js: path.join(process.cwd(), "styles", "native", "core", "manifest.json"),
+        sass: path.join(process.cwd(), "styles", "web", "sass", "core", "manifest.json"),
+    },
+});
+
+module.exports.readVersionFiles = paths => ({
+    pkg: require(paths.pkg),
+    manifest: {
+        js: require(paths.manifest.js),
+        sass: require(paths.manifest.sass),
+    },
+});
+

scripts/lib/writeFile.js

@@ -0,0 +1,7 @@
+const fs = require("fs");
+
+module.exports.writeVersionFiles = (files, paths) => {
+    fs.writeFileSync(paths.pkg, JSON.stringify(files.pkg, null, 4));
+    fs.writeFileSync(paths.manifest.js, JSON.stringify(files.manifest.js, null, 4));
+    fs.writeFileSync(paths.manifest.sass, JSON.stringify(files.manifest.sass, null, 4));
+};

styles/native/app/custom-variables.js

@@ -161,3 +161,11 @@ export const navigation = {
         backgroundColor: background.primary,
     },
 };
+
+// Listview Styles
+export const listview = {
+    border: {
+        color: border.color,
+        width: border.width,
+    },
+};

styles/native/core/helpers/listviews.js

@@ -1,4 +1,4 @@
-import { border } from "../variables";
+import { listview } from "../variables";
 
 //
 // DISCLAIMER:
@@ -16,14 +16,14 @@ import { border } from "../variables";
 // List item dividers
 export const listItemBorderBottom = {
     listItem: {
-        borderColor: border.color,
-        borderBottomWidth: border.width,
+        borderColor: listview.border.color,
+        borderBottomWidth: listview.border.width,
     },
 };
 export const listItemBorderRight = {
     listItem: {
-        borderColor: border.color,
-        borderRightWidth: border.width,
+        borderColor: listview.border.color,
+        borderRightWidth: listview.border.width,
     },
 };
 

styles/native/core/manifest.json

@@ -1,4 +1,4 @@
 {
     "name": "Atlas-UI-Framework",
-    "version": "2.1.3"
-}
+    "version": "2.1.4"
+}

styles/native/core/variables.js

@@ -153,14 +153,23 @@ let navigation = {
     topBar: {
         backgroundColor: background.primary,
         backButtonColor: contrast.highest,
-        titleColor: contrast.highest
+        titleColor: contrast.highest,
     },
     bottomBar: {
         color: contrast.high,
         selectedColor: brand.primary,
         backgroundColor: background.primary,
-    }
+    },
 };
 navigation = merge(navigation, custom.navigation || {});
 
-export { brand, background, border, contrast, font, spacing, button, input, navigation };
+// Listview Styles
+let listview = {
+    border: {
+        color: border.color,
+        width: border.width,
+    },
+};
+listview = merge(listview, custom.listview || {});
+
+export { brand, background, border, contrast, font, spacing, button, input, navigation, listview };

styles/web/sass/core/manifest.json

@@ -1,4 +1,4 @@
 {
     "name": "Atlas-UI-Framework",
-    "version": "2.1.3"
-}
+    "version": "2.1.4"
+}

styles/web/sass/core/widgets/_modals.scss

@@ -4,29 +4,30 @@
 // Customizing core files will make updating Atlas much more difficult in the future.
 // To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten.
 //
-
 /* ==========================================================================
    Modals
 
    Default Mendix Modals. Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults
 ========================================================================== */
-
 .modal-dialog {
     .modal-content {
         border: 1px solid $modal-header-border-color;
         border-radius: 4px;
         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+
         .modal-header {
             padding: 15px 20px;
             border-bottom-color: $modal-header-border-color;
             border-radius: 0; // Because of the class .mx-window-active in mxui.css
             background-color: $modal-header-bg;
+
             h4 {
                 margin: 0;
                 color: $modal-header-color;
                 font-size: 16px;
                 font-weight: $font-weight-bold;
             }
+
             .close {
                 margin-top: -3px;
                 opacity: 1;
@@ -36,9 +37,11 @@
                 filter: alpha(opacity=100);
             }
         }
+
         .modal-body {
             padding: 20px;
         }
+
         .modal-footer {
             display: flex;
             justify-content: flex-end;
@@ -52,16 +55,15 @@
 // Default Mendix Window Modal
 .mx-window {
     // If popup direct child is a dataview it gets the class mx-window-view
-    &.mx-window-view.mx-window-active .mx-window-body {
-        overflow:hidden; // hide second scrollbar in edit page
-    }
     &.mx-window-view .mx-window-body {
+        overflow: hidden; // hide second scrollbar in edit page
         padding: 0;
         // Dataview in popup
         > .mx-dataview > .mx-dataview-content,
         > .mx-placeholder > .mx-dataview > .mx-dataview-content {
             padding: 20px;
         }
+
         > .mx-dataview > .mx-dataview-controls,
         > .mx-placeholder > .mx-dataview > .mx-dataview-controls {
             display: flex;
@@ -72,9 +74,11 @@
             border-top: 1px solid $modal-header-border-color;
         }
     }
+
     .mx-dataview-controls {
         padding-bottom: 0;
     }
+
     .mx-layoutgrid {
         padding-right: 0;
         padding-left: 0;
@@ -86,6 +90,7 @@
     .modal-body {
         padding: 0 15px;
     }
+
     .modal-content {
         input {
             height: 56px;
@@ -94,18 +99,22 @@
             background: #EEEEEE;
             box-shadow: none;
             font-size: 16px;
+
             &:focus {
                 border-color: #66AFE9;
             }
         }
     }
+
     .modal-header,
     .modal-footer {
         border: 0;
     }
+
     button {
         font-size: 16px;
     }
+
     h4 {
         color: #AAAAAA;
         font-size: 20px;