Merge branch 'develop' into release

mendix · Jul 30, 2019 · 071a8f2 · 071a8f2
2 parents 7dfca91 + 5f9ce47
commit 071a8f2
Show file tree

Hide file tree

Showing 150 changed files with 4,406 additions and 3,134 deletions.
diff --git a/.gitignore b/.gitignore
@@ -15,4 +15,7 @@
 
 # Git
 .gitlab/
-.github/
+.github/
+
+# Zips
+**/*.zip
diff --git a/README.md b/README.md
@@ -1,54 +1,82 @@
 # Mendix Atlas UI
-Mendix Atlas UI is the foundation of making beautiful apps with Mendix. For more information about the framework go [here](https://atlas.mendix.com/).
 
-### Theme folder structure
-The theme folder contains the default HTML pages, Sass, CSS and resources needed to style your application.
-
-#### Workflow
-In the Sass folder you will notice two main folders, custom and lib. The lib folder houses the complete Mendix UI Framework. The custom folder is where we recommend doing *all customizations*. This will making updating to the new framework easier.
+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
-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.
+
+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.
 
 ```
 theme/
 ├── styles/
-|   ├── css/
-|   │   ├── * all output files
-|   └── sass/
-|       ├── custom/
-|       |   ├── _custom-variable.scss
-|       |   ├── custom.scss
-|       ├── lib/
-|           ├── base/
-|           ├── buildinblocks/
-|           ├── components/
-|           ├── customwidgets/
-|           ├── layouts/
-|           ├── _variable.scss
-|           ├── lib.scss
-|
+|   ├── native/
+|       ├── app/
+|       |   ├── _custom-variables.js
+|       |   └── _custom.js
+|       ├── core/
+|       |   ├── base/
+|       |   ├── helpers/
+|       |   ├── widgets/
+|       |   └── _variables.js
+|       ├── ui_resources/
+|       |   └── atlas_ui_resources/
+|       |       ├── buildingblocks/
+|       |       └── layouts/
+|       └── main.js
+|   └── web/
+|       ├── css/
+|       │   ├── * all output files
+|       └── sass/
+|           ├── app/
+|           |   ├── _custom-variables.scss
+|           |   └── _custom.scss
+|           ├── core/
+|           |   ├── _legacy/
+|           |   ├── base/
+|           |   ├── helpers/
+|           |   ├── widgets/
+|           |   ├── widgetscustom/
+|           |   └── _variables.scss
+|           ├── ui_resources/
+|           |   └── atlas_ui_resources/
+|           |       ├── buildingblocks/
+|           |       └── layouts/
+|           └── main.scss
 ├── * index files
 ├── * assets
+├── * settings*.json (Design Properties)
+└── styles.js
 ```
 
-###### Base
-The base folder contains the *architecture* for our framework. Here you will find our *mixins* and *resets*.
+###### App
+
+The app folder contains all custom styling. We recommend users to only use this directory for any custom styling.
+
+When you want to customize something, you should first check if you can accomplish your goal by changing variables.
+These variables can be found in _styles/web/sass/core/variables.scss_ or _styles/native/core/variables.js_. If you want
+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
+
+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.
 
-###### Components
-This directory contains the styling of all kinds of basic components like the datagrid, buttons, label, form, listview, and anything along those lines. They have distinct properties and can't be broken down further without losing their meaning.
+###### UI Resources
 
-###### Custom Widgets
-This directory contains any extra styling that might be needed for custom widgets downloaded from the Mendix App Store.
+THe UI Resources folder will contain any styling related to Building Blocks, Page Templates and Layouts.
 
-###### Building Blocks
-Building blocks are made up of components and widgets. For example *cards* or *headers* are building blocks. A building block could be an image, a title, and a button, assembled together into one UI block.
+Building blocks are created with Widgets. For example _cards_ or _headers_ are building blocks. A building block could
+be an image, a title, and a button, assembled together into one UI block.
 
-###### Layouts
-The layout directory contains some styles for the main sections of the layout (topbar, sidebar, footer and so on).
+Page Templates are created with Building Blocks and Widgets. Page Templates are an example of how a page could look
+like.
 
-###### Variable.scss
-This file contains the style settings that are used across the project, allowing for consistent typography, color schemes, etc.
+Layouts are created with widgets. They are mainly used for navigation or user experiences which need to be consistent
+between pages.
 
 ### License
 

diff --git a/index-phone-preview.html b/index-phone-preview.html
@@ -3,15 +3,18 @@
     <head>
         <meta charset="utf-8" />
         <title>Mendix - Phone preview</title>
-        <link rel="stylesheet" type="text/css" href="styles/web/css/main.css?{{ cachebust }}" />
+
+        {{themecss}}
+
     </head>
 
     <body>
         <div class="content">
             <div class="devicephone">
                 <iframe id="frame" class="deviceframe"></iframe>
                 <div class="devicedisclaimer">
-                    This is not a simulator but just a resized view surrounded with an image to give an impression of what the app might look like on a phone.
+                    This is not a simulator but just a resized view surrounded with an image to give an impression of
+                    what the app might look like on a phone.
                 </div>
             </div>
         </div>

diff --git a/index-tablet-preview.html b/index-tablet-preview.html
@@ -3,15 +3,18 @@
     <head>
         <meta charset="utf-8" />
         <title>Mendix - Tablet preview</title>
-        <link rel="stylesheet" type="text/css" href="styles/web/css/main.css?{{ cachebust }}" />
+
+        {{themecss}}
+
     </head>
 
     <body>
         <div class="content">
             <div class="devicetablet">
                 <iframe id="frame" class="deviceframe"></iframe>
                 <div class="devicedisclaimer">
-                    This is not a simulator but just a resized view surrounded with an image to give an impression of what the app might look like on a tablet.
+                    This is not a simulator but just a resized view surrounded with an image to give an impression of
+                    what the app might look like on a tablet.
                 </div>
             </div>
         </div>

diff --git a/login-with-sso.html b/login-with-sso.html
@@ -6,7 +6,9 @@
         <title>Login</title>
         <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1" />
         <meta name="apple-mobile-web-app-capable" content="yes" />
-        <link rel="stylesheet" type="text/css" href="styles/web/css/main.css?{{ cachebust }}" />
+
+        {{themecss}}
+
     </head>
 
     <body>
@@ -23,14 +25,30 @@ <h2>Sign in</h2>
                             <div class="form-group">
                                 <label id="usernameLabel" for="usernameInput">User name</label>
                                 <div class="inputwrapper">
-                                    <input id="usernameInput" class="form-control" type="text" placeholder="User name" autocorrect="off" autocapitalize="none" autocomplete="off" />
+                                    <input
+                                        id="usernameInput"
+                                        class="form-control"
+                                        type="text"
+                                        placeholder="User name"
+                                        autocorrect="off"
+                                        autocapitalize="none"
+                                        autocomplete="off"
+                                    />
                                     <span class="glyphicon glyphicon-user"></span>
                                 </div>
                             </div>
                             <div class="form-group">
                                 <label id="passwordLabel" for="passwordInput">Password</label>
                                 <div class="inputwrapper">
-                                    <input id="passwordInput" class="form-control" type="password" placeholder="Password" autocorrect="off" autocapitalize="none" autocomplete="off" />
+                                    <input
+                                        id="passwordInput"
+                                        class="form-control"
+                                        type="password"
+                                        placeholder="Password"
+                                        autocorrect="off"
+                                        autocapitalize="none"
+                                        autocomplete="off"
+                                    />
                                     <span class="glyphicon glyphicon-eye-close"></span>
                                 </div>
                             </div>
@@ -52,8 +70,19 @@ <h2>Sign in</h2>
             <div class="loginpage-logo">
                 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 599 187">
                     <g>
-                        <rect x="0.98" y="0.86" width="185.28" height="185.28" rx="24.72" ry="24.72" style="fill: #00aae7" />
-                        <polygon points="598.02 60 578.15 60 570.62 75.08 563.08 60 543.21 60 560.22 93.51 543.21 127.03 563.08 127.03 570.62 111.95 578.15 127.03 598.02 127.03 581.02 93.51 598.02 60" style="fill: #1a1a1a" />
+                        <rect
+                            x="0.98"
+                            y="0.86"
+                            width="185.28"
+                            height="185.28"
+                            rx="24.72"
+                            ry="24.72"
+                            style="fill: #00aae7"
+                        />
+                        <polygon
+                            points="598.02 60 578.15 60 570.62 75.08 563.08 60 543.21 60 560.22 93.51 543.21 127.03 563.08 127.03 570.62 111.95 578.15 127.03 598.02 127.03 581.02 93.51 598.02 60"
+                            style="fill: #1a1a1a"
+                        />
                         <path
                             d="M355.57,109.52a6.84,6.84,0,0,1-5.06,6l-.28.07a8.09,8.09,0,0,1-2.11.31c-4,0-6.9-1.89-7.45-6.35s-.6-12.91-.6-12.91h35.42c0-5.24.38-10-.11-14.47a29.32,29.32,0,0,0-3.54-11.53,19.51,19.51,0,0,0-8.41-7.69q-5.61-2.82-15.09-2.82t-14.82,2.63a19.21,19.21,0,0,0-8.28,7.11,25.91,25.91,0,0,0-3.61,10.44,95.45,95.45,0,0,0-.8,12.62,102.66,102.66,0,0,0,.87,13.9,26.88,26.88,0,0,0,3.74,10.88,19.19,19.19,0,0,0,8.35,7.12c3.65,1.7,8.49,2.56,14.55,2.56A36.38,36.38,0,0,0,360,125.69a23.49,23.49,0,0,0,8.28-4.61c4.54-3.93,7.21-8.86,7.21-14.34H355.62S355.67,107.6,355.57,109.52Zm-14.86-31c.38-4,3.35-7.22,7.45-7.22s7.12,2.57,7.45,7.22a56.24,56.24,0,0,1,.12,8H340.11C340.42,81.35,340.42,81.39,340.71,78.47Z"
                             style="fill: #1a1a1a"
@@ -76,7 +105,15 @@ <h2>Sign in</h2>
                         />
                         <g>
                             <path d="M534.83,80.84V127H515V60h19.87V80.84Z" style="fill: #1a1a1a" />
-                            <rect x="514.96" y="32.14" width="19.87" height="18.06" rx="3.14" ry="3.14" style="fill: #1a1a1a" />
+                            <rect
+                                x="514.96"
+                                y="32.14"
+                                width="19.87"
+                                height="18.06"
+                                rx="3.14"
+                                ry="3.14"
+                                style="fill: #1a1a1a"
+                            />
                         </g>
                     </g>
                 </svg>

diff --git a/login.html b/login.html
@@ -6,7 +6,9 @@
         <title>Login</title>
         <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1" />
         <meta name="apple-mobile-web-app-capable" content="yes" />
-        <link rel="stylesheet" type="text/css" href="styles/web/css/main.css?{{ cachebust }}" />
+
+        {{themecss}}
+
     </head>
 
     <body>
@@ -23,14 +25,30 @@ <h2>Sign in</h2>
                             <div class="form-group">
                                 <label id="usernameLabel" for="usernameInput">User name</label>
                                 <div class="inputwrapper">
-                                    <input id="usernameInput" class="form-control" type="text" placeholder="User name" autocorrect="off" autocapitalize="none" autocomplete="off" />
+                                    <input
+                                        id="usernameInput"
+                                        class="form-control"
+                                        type="text"
+                                        placeholder="User name"
+                                        autocorrect="off"
+                                        autocapitalize="none"
+                                        autocomplete="off"
+                                    />
                                     <span class="glyphicon glyphicon-user"></span>
                                 </div>
                             </div>
                             <div class="form-group">
                                 <label id="passwordLabel" for="passwordInput">Password</label>
                                 <div class="inputwrapper">
-                                    <input id="passwordInput" class="form-control" type="password" placeholder="Password" autocorrect="off" autocapitalize="none" autocomplete="off" />
+                                    <input
+                                        id="passwordInput"
+                                        class="form-control"
+                                        type="password"
+                                        placeholder="Password"
+                                        autocorrect="off"
+                                        autocapitalize="none"
+                                        autocomplete="off"
+                                    />
                                     <span class="glyphicon glyphicon-eye-close"></span>
                                 </div>
                             </div>
@@ -42,8 +60,19 @@ <h2>Sign in</h2>
             <div class="loginpage-logo">
                 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 599 187">
                     <g>
-                        <rect x="0.98" y="0.86" width="185.28" height="185.28" rx="24.72" ry="24.72" style="fill: #00aae7" />
-                        <polygon points="598.02 60 578.15 60 570.62 75.08 563.08 60 543.21 60 560.22 93.51 543.21 127.03 563.08 127.03 570.62 111.95 578.15 127.03 598.02 127.03 581.02 93.51 598.02 60" style="fill: #1a1a1a" />
+                        <rect
+                            x="0.98"
+                            y="0.86"
+                            width="185.28"
+                            height="185.28"
+                            rx="24.72"
+                            ry="24.72"
+                            style="fill: #00aae7"
+                        />
+                        <polygon
+                            points="598.02 60 578.15 60 570.62 75.08 563.08 60 543.21 60 560.22 93.51 543.21 127.03 563.08 127.03 570.62 111.95 578.15 127.03 598.02 127.03 581.02 93.51 598.02 60"
+                            style="fill: #1a1a1a"
+                        />
                         <path
                             d="M355.57,109.52a6.84,6.84,0,0,1-5.06,6l-.28.07a8.09,8.09,0,0,1-2.11.31c-4,0-6.9-1.89-7.45-6.35s-.6-12.91-.6-12.91h35.42c0-5.24.38-10-.11-14.47a29.32,29.32,0,0,0-3.54-11.53,19.51,19.51,0,0,0-8.41-7.69q-5.61-2.82-15.09-2.82t-14.82,2.63a19.21,19.21,0,0,0-8.28,7.11,25.91,25.91,0,0,0-3.61,10.44,95.45,95.45,0,0,0-.8,12.62,102.66,102.66,0,0,0,.87,13.9,26.88,26.88,0,0,0,3.74,10.88,19.19,19.19,0,0,0,8.35,7.12c3.65,1.7,8.49,2.56,14.55,2.56A36.38,36.38,0,0,0,360,125.69a23.49,23.49,0,0,0,8.28-4.61c4.54-3.93,7.21-8.86,7.21-14.34H355.62S355.67,107.6,355.57,109.52Zm-14.86-31c.38-4,3.35-7.22,7.45-7.22s7.12,2.57,7.45,7.22a56.24,56.24,0,0,1,.12,8H340.11C340.42,81.35,340.42,81.39,340.71,78.47Z"
                             style="fill: #1a1a1a"
@@ -66,7 +95,15 @@ <h2>Sign in</h2>
                         />
                         <g>
                             <path d="M534.83,80.84V127H515V60h19.87V80.84Z" style="fill: #1a1a1a" />
-                            <rect x="514.96" y="32.14" width="19.87" height="18.06" rx="3.14" ry="3.14" style="fill: #1a1a1a" />
+                            <rect
+                                x="514.96"
+                                y="32.14"
+                                width="19.87"
+                                height="18.06"
+                                rx="3.14"
+                                ry="3.14"
+                                style="fill: #1a1a1a"
+                            />
                         </g>
                     </g>
                 </svg>

diff --git a/manifest.json b/manifest.json
@@ -1,4 +1,4 @@
 {
     "name": "Atlas-UI-Framework",
-    "version": "2.0.0"
+    "version": "2.1.0"
 }