Docs updated, test/sample app replaced

Accenture · Jul 23, 2019 · 5621760 · 5621760
1 parent e210992
commit 5621760
Show file tree

Hide file tree

Showing 25 changed files with 2,547 additions and 791 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,8 +3,6 @@ test/deployment/
 test/.classpath
 test/.project
 test/userlib/
-test/.classpath
-test/.project
 *.launch
 *.tmp
 *.lock

diff --git a/README.md b/README.md
@@ -4,8 +4,15 @@ A Mendix widget that adds CSS classes determined by a microflow (or nanoflow) to
 
 ## Typical usage scenario
 
-It's useful in applications that need to determine styling based on arbitrary logic and change it dynamically in runtime.
-An example may be a multi-tenant app with different styling for different brands, depending on settings of the current user.
+It's useful in applications that need to **determine styling** based on **arbitrary logic** and change it **dynamically in runtime**:
+
+- An example may be a **multi-tenant app** with different styling for **different brands**, depending on settings of the current user.
+- Another use case would be to allow your users to choose between **multiple theme or skins** for your application, depending on their preferences.
+- You can also **improve accessibility** by switching to styling with e.g. bigger fonts and cleaner layout with less distractions for users with visual or cognitive impairments.
+
+## Example application
+
+[Here](https://github.com/ObjectivityLtd/Mendix.CssClassSwitcher/tree/master/test) you can find a simple yet beautiful sample app that switches its styling between light and dark depending on current user theme stored in ``Account`` entity.
 
 ## Usage
 

diff --git a/src/package.xml b/src/package.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="CssClassSwitcher" version="1.1.1" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="CssClassSwitcher" version="1.1.2" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="CssClassSwitcher/CssClassSwitcher.xml" />
         </widgetFiles>

diff --git a/test/Test.mpr b/test/Test.mpr
diff --git a/test/data-snapshot.zip b/test/data-snapshot.zip
diff --git a/test/theme/com.mendix.charts.json b/test/theme/com.mendix.charts.json
@@ -0,0 +1 @@
+{}
diff --git a/test/theme/components.json b/test/theme/components.json
@@ -1 +1 @@
-{"files":{"css":["lib/bootstrap/css/bootstrap.min.css","mxclientsystem/mxui/ui/mxui.css","styles/css/lib/lib.css","styles/css/custom/custom.css"],"js":["mxclientsystem/mxui/mxui.js"]},"cachebust":"635689412670032000"}
+{"files":{"css":["lib/bootstrap/css/bootstrap.min.css","mxclientsystem/mxui/ui/mxui.css","styles/css/lib/lib.css","styles/css/custom/custom.css"],"js":["mxclientsystem/mxui/mxui.js"]},"cachebust":"{{cachebust}}"}
diff --git a/test/theme/index-phone-preview.html b/test/theme/index-phone-preview.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <title>Mendix - Phone preview</title>
+    <link rel="stylesheet" type="text/css" href="styles/css/lib/lib.css?{{cachebust}}">
+</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.
+            </div>
+        </div>
+    </div>
+
+    <script type="text/javascript">
+        // Firefox does not add a history item if the page is not loaded
+        // from the cache, and the src is set as attribute on the iframe
+        document.getElementById("frame").src = "index.html" + window.location.search + window.location.hash;
+    </script>
+</body>
+
+</html>
diff --git a/test/theme/index-tablet-preview.html b/test/theme/index-tablet-preview.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <title>Mendix - Tablet preview</title>
+    <link rel="stylesheet" type="text/css" href="styles/css/lib/lib.css?{{cachebust}}">
+</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.
+            </div>
+        </div>
+    </div>
+
+    <script type="text/javascript">
+        // Firefox does not add a history item if the page is not loaded
+        // from the cache, and the src is set as attribute on the iframe
+        document.getElementById("frame").src = "index.html" + window.location.search + window.location.hash;
+    </script>
+</body>
+
+</html>
diff --git a/test/theme/index.html b/test/theme/index.html
@@ -8,8 +8,8 @@
         <meta name="apple-mobile-web-app-capable" content="yes">
         <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css?{{cachebust}}">
         <link rel="stylesheet" href="mxclientsystem/mxui/ui/mxui.css?{{cachebust}}">
-   
-		{{themecss}}
+
+        {{themecss}}
 
         <!-- ICONS EXAMPLE -->
 

diff --git a/test/theme/login-with-sso.html b/test/theme/login-with-sso.html
@@ -0,0 +1,78 @@
+<!doctype html>
+<html>
+
+<head>
+    <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="apple-mobile-web-app-capable" content="yes">
+    <link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.min.css?{{cachebust}}">
+    <link rel="stylesheet" type="text/css" href="styles/css/lib/lib.css?{{cachebust}}">
+</head>
+
+<body>
+    <div class="loginpage">
+        <div class="loginpage-left">
+            <div class="loginpage-image"></div>
+        </div>
+        <div class="loginpage-right">
+            <div class="loginpage-formwrapper">
+                <h2>Sign in</h2>
+                <form id="loginForm" class="loginpage-form" autocomplete="off">
+                    <div>
+                        <div id="loginMessage" class="alert alert-danger"></div>
+                        <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" autocomplete="off" autocapitalize="none">
+                                <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" autocomplete="off" autocapitalize="none">
+                                <span class="glyphicon glyphicon-eye-close"></span>
+                            </div>
+                        </div>
+                        <button id="loginButton" type="submit" class="btn btn-success btn-lg">Sign in</button>
+                    </div>
+
+                    <div class="loginpage-alternativelabel">
+                        <div>Or sign in with</div>
+                        <hr>
+                    </div>
+
+                    <a id="ssoButton" href="/openid/login" class="btn btn-default btn-lg">
+                        <img src="logo.png" />
+                        <span class="loginpage-signin">Mendix Account</span>
+                    </a>
+
+                </form>
+            </div>
+        </div>
+        <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" />
+                    <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" />
+                    <path d="M310.19,68.24a14.19,14.19,0,0,0-3.88-4.42,17.6,17.6,0,0,0-5.63-2.75,23.43,23.43,0,0,0-6.77-1,25.5,25.5,0,0,0-10.57,2,22.29,22.29,0,0,0-7.89,6.21,16.85,16.85,0,0,0-6.48-6,19.81,19.81,0,0,0-9.44-2.18,25,25,0,0,0-9.73,1.73,16.29,16.29,0,0,0-7,6.09h-.28V60.1H222.61V127h19.87V82.45c0-.14,0-.26,0-.4V78.9h0a7.46,7.46,0,0,1,14.91,0h0v3.3h0c0,.08,0,.16,0,.25V127h19.87V78.9h0a7.46,7.46,0,0,1,14.91,0h0V127h19.87V75.15A16.06,16.06,0,0,0,310.19,68.24Z" style="fill: #1a1a1a" />
+                    <path d="M166.59,60H146.72l-7.53,15.09L131.65,60H111.78l17,33.52-15.36,30.27V75.13a16,16,0,0,0-1.9-6.9,14.08,14.08,0,0,0-3.88-4.42A17.61,17.61,0,0,0,102,61.05a23.77,23.77,0,0,0-6.77-1,25.34,25.34,0,0,0-10.57,2,22.29,22.29,0,0,0-7.89,6.21,16.85,16.85,0,0,0-6.48-6,19.81,19.81,0,0,0-9.44-2.18,25,25,0,0,0-9.73,1.73,16.2,16.2,0,0,0-7,6.08h-.28V60.09H24V127H43.82V82.43c0-.13,0-.26,0-.39V78.88h0a7.46,7.46,0,0,1,14.91,0h0v3.3h0a2.18,2.18,0,0,1,0,.25V127H78.62V78.88h0a7.46,7.46,0,0,1,14.91,0h0V127h38.09l7.54-15.09L146.72,127h19.87l-17-33.52Z" style="fill: #fff" />
+                    <path d="M437.7,68.24a14.29,14.29,0,0,0-3.87-4.42,17.71,17.71,0,0,0-5.65-2.75,25.79,25.79,0,0,0-16.48.83,15.94,15.94,0,0,0-7.05,6h-.27V60.1H384.5V127h19.88V81.5c0-.22,0-.41,0-.62v-2h0a7.46,7.46,0,0,1,14.91,0h0V127h19.87V74.19A11.89,11.89,0,0,0,437.7,68.24Z" style="fill: #1a1a1a" />
+                    <path d="M502.85,50.16c0-9.32-7.79-17-17.78-17.93-.66-.06-1.34-.09-2-.09v33a16.63,16.63,0,0,0-5.46-3.92,24.08,24.08,0,0,0-9.51-1.71q-7.69,0-11.84,3.42a19.44,19.44,0,0,0-5.95,8.59,37.59,37.59,0,0,0-2,11.15c-.11,3.16-.18,6.1-.2,8.84h0c0,.7,0,1.39,0,2.06,0,3.43.08,7.19.22,11.28a39.41,39.41,0,0,0,2,11.42,19.83,19.83,0,0,0,6,8.84q4.21,3.57,12.19,3.57a24.38,24.38,0,0,0,10.17-1.92,14.22,14.22,0,0,0,4.3-3.08V127h19.87V50.51h0C502.83,50.39,502.85,50.28,502.85,50.16ZM483,81.92v26.51l0,2.09a7.14,7.14,0,0,1-5,6.22,6,6,0,0,1-2.21.41h-.19s-9.45,1.79-9.45-23.1c0-11.93,2.17-17.73,4.43-20.54a8.43,8.43,0,0,1,.73-.92,3.27,3.27,0,0,1,1.21-.84,4.71,4.71,0,0,1,3.08-.81,7.28,7.28,0,0,1,3.55,1l.18.1A7.57,7.57,0,0,1,483,78.47v3.45Z" style="fill: #1a1a1a" />
+                    <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" />
+                    </g>
+                </g>
+            </svg>
+        </div>
+    </div>
+
+    <script src="js/login_i18n.js?{{cachebust}}"></script>
+    <script src="js/login.js?{{cachebust}}"></script>
+</body>
+
+</html>
diff --git a/test/theme/login.html b/test/theme/login.html
@@ -0,0 +1,67 @@
+<!doctype html>
+<html>
+
+<head>
+    <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="apple-mobile-web-app-capable" content="yes">
+    <link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.min.css?{{cachebust}}">
+    <link rel="stylesheet" type="text/css" href="styles/css/lib/lib.css?{{cachebust}}">
+</head>
+
+<body>
+    <div class="loginpage">
+        <div class="loginpage-left">
+            <div class="loginpage-image"></div>
+        </div>
+        <div class="loginpage-right">
+            <div class="loginpage-formwrapper">
+                <h2>Sign in</h2>
+                <form id="loginForm" class="loginpage-form" autocomplete="off">
+                    <div>
+                        <div id="loginMessage" class="alert alert-danger"></div>
+                        <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" autocomplete="off" autocapitalize="none">
+                                <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" autocomplete="off" autocapitalize="none">
+                                <span class="glyphicon glyphicon-eye-close"></span>
+                            </div>
+                        </div>
+                        <button id="loginButton" type="submit" class="btn btn-success btn-lg">Sign in</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+        <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" />
+                    <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" />
+                    <path d="M310.19,68.24a14.19,14.19,0,0,0-3.88-4.42,17.6,17.6,0,0,0-5.63-2.75,23.43,23.43,0,0,0-6.77-1,25.5,25.5,0,0,0-10.57,2,22.29,22.29,0,0,0-7.89,6.21,16.85,16.85,0,0,0-6.48-6,19.81,19.81,0,0,0-9.44-2.18,25,25,0,0,0-9.73,1.73,16.29,16.29,0,0,0-7,6.09h-.28V60.1H222.61V127h19.87V82.45c0-.14,0-.26,0-.4V78.9h0a7.46,7.46,0,0,1,14.91,0h0v3.3h0c0,.08,0,.16,0,.25V127h19.87V78.9h0a7.46,7.46,0,0,1,14.91,0h0V127h19.87V75.15A16.06,16.06,0,0,0,310.19,68.24Z" style="fill: #1a1a1a" />
+                    <path d="M166.59,60H146.72l-7.53,15.09L131.65,60H111.78l17,33.52-15.36,30.27V75.13a16,16,0,0,0-1.9-6.9,14.08,14.08,0,0,0-3.88-4.42A17.61,17.61,0,0,0,102,61.05a23.77,23.77,0,0,0-6.77-1,25.34,25.34,0,0,0-10.57,2,22.29,22.29,0,0,0-7.89,6.21,16.85,16.85,0,0,0-6.48-6,19.81,19.81,0,0,0-9.44-2.18,25,25,0,0,0-9.73,1.73,16.2,16.2,0,0,0-7,6.08h-.28V60.09H24V127H43.82V82.43c0-.13,0-.26,0-.39V78.88h0a7.46,7.46,0,0,1,14.91,0h0v3.3h0a2.18,2.18,0,0,1,0,.25V127H78.62V78.88h0a7.46,7.46,0,0,1,14.91,0h0V127h38.09l7.54-15.09L146.72,127h19.87l-17-33.52Z" style="fill: #fff" />
+                    <path d="M437.7,68.24a14.29,14.29,0,0,0-3.87-4.42,17.71,17.71,0,0,0-5.65-2.75,25.79,25.79,0,0,0-16.48.83,15.94,15.94,0,0,0-7.05,6h-.27V60.1H384.5V127h19.88V81.5c0-.22,0-.41,0-.62v-2h0a7.46,7.46,0,0,1,14.91,0h0V127h19.87V74.19A11.89,11.89,0,0,0,437.7,68.24Z" style="fill: #1a1a1a" />
+                    <path d="M502.85,50.16c0-9.32-7.79-17-17.78-17.93-.66-.06-1.34-.09-2-.09v33a16.63,16.63,0,0,0-5.46-3.92,24.08,24.08,0,0,0-9.51-1.71q-7.69,0-11.84,3.42a19.44,19.44,0,0,0-5.95,8.59,37.59,37.59,0,0,0-2,11.15c-.11,3.16-.18,6.1-.2,8.84h0c0,.7,0,1.39,0,2.06,0,3.43.08,7.19.22,11.28a39.41,39.41,0,0,0,2,11.42,19.83,19.83,0,0,0,6,8.84q4.21,3.57,12.19,3.57a24.38,24.38,0,0,0,10.17-1.92,14.22,14.22,0,0,0,4.3-3.08V127h19.87V50.51h0C502.83,50.39,502.85,50.28,502.85,50.16ZM483,81.92v26.51l0,2.09a7.14,7.14,0,0,1-5,6.22,6,6,0,0,1-2.21.41h-.19s-9.45,1.79-9.45-23.1c0-11.93,2.17-17.73,4.43-20.54a8.43,8.43,0,0,1,.73-.92,3.27,3.27,0,0,1,1.21-.84,4.71,4.71,0,0,1,3.08-.81,7.28,7.28,0,0,1,3.55,1l.18.1A7.57,7.57,0,0,1,483,78.47v3.45Z" style="fill: #1a1a1a" />
+                    <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" />
+                    </g>
+                </g>
+            </svg>
+        </div>
+    </div>
+
+    <script src="js/login_i18n.js?{{cachebust}}"></script>
+    <script src="js/login.js?{{cachebust}}"></script>
+</body>
+
+</html>
diff --git a/test/theme/resources/phone.png b/test/theme/resources/phone.png
diff --git a/test/theme/resources/tablet.png b/test/theme/resources/tablet.png
diff --git a/test/theme/resources/work-do-more.jpeg b/test/theme/resources/work-do-more.jpeg
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		{"files":{"css":["lib/bootstrap/css/bootstrap.min.css","mxclientsystem/mxui/ui/mxui.css","styles/css/lib/lib.css","styles/css/custom/custom.css"],"js":["mxclientsystem/mxui/mxui.js"]},"cachebust":"635689412670032000"}
		{"files":{"css":["lib/bootstrap/css/bootstrap.min.css","mxclientsystem/mxui/ui/mxui.css","styles/css/lib/lib.css","styles/css/custom/custom.css"],"js":["mxclientsystem/mxui/mxui.js"]},"cachebust":"{{cachebust}}"}