From 458d77821098453cdc146fe53a4eeadbfc24ad82 Mon Sep 17 00:00:00 2001
From: Robert von Burg <eitch@eitchnet.ch>
Date: Wed, 5 Feb 2020 12:27:18 +0100
Subject: [PATCH] [Major] Refactored webapp to use behaviors for re-usable code

---
 .../{ => behaviors}/c-compute-behavior.html   |  14 +-
 .../main/webapp/app/src/c-app-behavior.html   | 235 +++++++++++++++++
 .../src/main/webapp/app/src/c-app.html        | 249 +-----------------
 .../webapp/app/src/styles/c-app-style.html    |  78 ++++++
 .../webapp/app/src/{ => views}/c-view404.html |   0
 5 files changed, 337 insertions(+), 239 deletions(-)
 rename li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/{ => behaviors}/c-compute-behavior.html (97%)
 create mode 100644 li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/c-app-behavior.html
 create mode 100644 li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/styles/c-app-style.html
 rename li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/{ => views}/c-view404.html (100%)

diff --git a/li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/c-compute-behavior.html b/li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/behaviors/c-compute-behavior.html
similarity index 97%
rename from li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/c-compute-behavior.html
rename to li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/behaviors/c-compute-behavior.html
index e2129f9c4..35dcc94f2 100644
--- a/li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/c-compute-behavior.html
+++ b/li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/behaviors/c-compute-behavior.html
@@ -8,9 +8,15 @@
                     return CustomWeb.baseRestPath;
                 }
             },
+            baseWsPath: {
+                type: String,
+                value: function () {
+                    return CustomWeb.baseWsPath;
+                }
+            },
             localesPath: {
                 type: String,
-                value: '../../locales.json'
+                value: '../../../locales.json'
             }
         },
 
@@ -432,7 +438,8 @@
             this.fire("cx-show-confirmation", {
                 title: title,
                 text: text,
-                callback: callback
+                callback: callback,
+                bind: this
             });
         },
 
@@ -447,7 +454,8 @@
                 action2: action2,
                 callback2: callback2,
                 action3: action3,
-                callback3: callback3
+                callback3: callback3,
+                bind: this
             });
         },
         clearNotification: function (id) {
diff --git a/li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/c-app-behavior.html b/li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/c-app-behavior.html
new file mode 100644
index 000000000..36e72d3fe
--- /dev/null
+++ b/li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/c-app-behavior.html
@@ -0,0 +1,235 @@
+<script>
+    CustomAppBehavior = {
+
+        /* Lifecycle */
+        attached: function () {
+            var that = this;
+            setTimeout(function () {
+                that.checkForNewVersion();
+            }, 3000);
+            this.checkForNewVersionInterval = setInterval(function () {
+                that.checkForNewVersion();
+            }, 10000);
+        },
+
+        reloadPage: function (pageName) {
+            this.debounce('page-reload', function () {
+                this.selectedPage = pageName;
+                var page = this.$$('#' + pageName);
+                if (page && page.reload) {
+                    console.log('Reloading ' + pageName);
+                    page.reload();
+                }
+            }, 100);
+        },
+
+        toggleDrawer: function () {
+            this.$$("#drawer").toggle();
+        },
+        closeDrawer: function () {
+            this.$$("#drawer").close();
+        },
+
+        onShowToast: function (e) {
+            if (this.$.toast.opened) {
+                // purge if we have too many
+                if (this.queuedToasts.length > 5)
+                    this.queuedToasts = [];
+                this.queuedToasts.push(e.detail.text);
+            } else {
+                this.toastText = e.detail.text;
+                this.$.toast.open();
+            }
+        },
+
+        onToastClosed: function (e) {
+            if (this.queuedToasts.length > 0) {
+                this.toastText = this.queuedToasts.splice(0, 1)[0];
+                this.$.toast.open();
+            }
+        },
+
+        onShowStrolchDialog: function (event) {
+            var dlgTitle;
+            if (event.detail.title != null)
+                dlgTitle = event.detail.title;
+            else
+                dlgTitle = event.detail.isError ? 'errorOccurred' : 'info';
+            var dlgText = event.detail.text;
+            this._showDialog(dlgTitle, dlgText);
+        },
+        onShowDialog: function (event) {
+            var dlgTitle;
+            if (event.detail.title != null)
+                dlgTitle = event.detail.title;
+            else
+                dlgTitle = event.detail.isError ? 'errorOccurred' : 'info';
+            var dlgText = event.detail.message;
+            this._showDialog(dlgTitle, dlgText);
+        },
+        onShowConfirmation: function (event) {
+            var dlgTitle = event.detail.title;
+            var dlgText = event.detail.text;
+            var dlgCallback = event.detail.callback;
+            var bind = event.detail.bind;
+            this._showConfirmation(dlgTitle, dlgText, dlgCallback, bind);
+        },
+        onShowNotification: function (event) {
+            this.$.toolBar.showNotification(event.detail);
+        },
+        onClearNotification: function (event) {
+            this.$.toolBar.clearNotification(event.detail);
+        },
+        onLogOut: function (event) {
+            this.$.login.logout();
+            this.set("authTokenValid", false);
+        },
+        onServerNotAvailable: function (event) {
+            clearInterval(this.checkForNewVersionInterval);
+            this.$.dlg.close();
+            this.$.confirmationDlg.close();
+            this.$.serverNotConnectedDlg.open();
+        },
+        onSessionInvalid: function (event) {
+            var that = this;
+            console.log(this.routeTail);
+            if (this.routeTail.prefix != '/login') {
+                this._showConfirmation('sessionInvalid', 'sessionInvalidConfirmNavToLogin', function () {
+                    that.deleteCookie('strolch.authorization');
+                    that.set("authTokenValid", false);
+                });
+            }
+        },
+        onPrivilegeDenied: function (event) {
+            if (this.authTokenValid) {
+                this._showDialog('privilegeDenied', 'privilegeDeniedText', this.requestEventToUrl(event));
+            } else {
+                console.warn("Privilege denied to URL " + this.requestEventToUrl(event), this.requestErrorToMsg(event));
+            }
+        },
+        userLocaleChanged: function (newValue, oldValue) {
+            if (newValue && oldValue) {
+                console.log('User locale changed to ' + newValue);
+                this.$.ajaxPutLocale.generateRequest();
+                Strolch.setUserLocale(newValue);
+                window.location.reload();
+            } else if (this.userConfig == null && Strolch.getUserConfig() != null && Strolch.getUserConfig().locale != newValue) {
+                this.userConfig = Strolch.getUserConfig();
+                this.userConfig.locale = newValue;
+                Strolch.setUserConfig(this.userConfig);
+                this.$.ajaxPutLocale.generateRequest();
+            }
+        },
+
+        sessionValidated: function () {
+            console.log("Session validated.");
+            var userLocale = Strolch.getUserLocale();
+            var userConfig = Strolch.getUserConfig();
+            if (userLocale !== userConfig.locale) {
+                console.log("Updating server side locale for user " + userConfig.username + " to " + userLocale);
+                userConfig.locale = userLocale;
+                Strolch.setUserConfig(userConfig);
+                this.$.ajaxPutLocale.url = this.baseRestPath + "/strolch/sessions/" + userConfig.sessionId + "/locale/" + userLocale;
+                this.$.ajaxPutLocale.generateRequest();
+            }
+            this.set("authToken", Strolch.getAuthToken());
+            this.set("authTokenValid", true);
+            this.set("userConfig", userConfig);
+        },
+        logout: function () {
+            sessionStorage.clear();
+            Polymer.dom(this.root).querySelectorAll('#auth')[0].logout();
+            Strolch.clearStorageData();
+            this.deleteCookie("strolch.authorization");
+        },
+
+        _showDialog: function (dlgTitle, dlgText, dlgReason) {
+            if (this.localize) {
+                this.dlgTitle = this.localize(dlgTitle);
+                dlgText = this.localize(dlgText);
+                if (dlgReason)
+                    dlgText += ": " + dlgReason;
+                console.log("Message: " + this.dlgTitle + ': ' + dlgText);
+                this.$.dlgText.innerHTML = this.localize(dlgText);
+                this.$.dlg.open();
+            } else {
+                this.debounce('show-dlg', function () {
+                    this.dlgTitle = this.localize(dlgTitle);
+                    dlgText = this.localize(dlgText);
+                    if (dlgReason)
+                        dlgText += ": " + dlgReason;
+                    console.log("Message: " + this.dlgTitle + ': ' + dlgText);
+                    this.$.dlgText.innerHTML = this.localize(dlgText);
+                    this.$.dlg.open();
+                }, 250);
+            }
+        },
+        _showConfirmation: function (dlgTitle, dlgText, dlgCallback, bind) {
+
+            function onClose(event) {
+                dlg.removeEventListener("iron-overlay-closed", onClose);
+                var bound = dlgCallback.bind(bind);
+                bound(event.detail.confirmed);
+            }
+
+            if (this.localize) {
+                this.dlgTitle = this.localize(dlgTitle);
+                dlgText = this.localize(dlgText);
+                console.log("Message: " + this.dlgTitle + ': ' + dlgText);
+                this.$.confirmationDlgText.innerHTML = this.localize(dlgText);
+                var dlg = this.$.confirmationDlg;
+                dlg.addEventListener("iron-overlay-closed", onClose);
+                dlg.open();
+            } else {
+                this.debounce('show-dlg', function () {
+                    this.dlgTitle = this.localize(dlgTitle);
+                    dlgText = this.localize(dlgText);
+                    console.log("Message: " + this.dlgTitle + ': ' + dlgText);
+                    this.$.confirmationDlgText.innerHTML = this.localize(dlgText);
+                    var dlg = this.$.confirmationDlg;
+                    dlg.addEventListener("iron-overlay-closed", onClose);
+                    dlg.open();
+                }, 250);
+            }
+        },
+
+        checkForNewVersion: function () {
+            this.$.ajaxGetVersion.generateRequest();
+        },
+        reconnect: function () {
+            this.$.serverNotConnectedDlg.close();
+            this.onGetVersionResponse = function (event) {
+                var version = event.detail.response;
+                this.scmRevision = version.appVersion.scmRevision;
+                localStorage['appScmRevision'] = this.scmRevision;
+                document.location.reload();
+            };
+            this.$.ajaxGetVersion.generateRequest();
+        },
+
+        onGetVersionResponse: function (event) {
+            var version = event.detail.response;
+            Strolch.setAppVersion(version);
+            this.scmRevision = version.appVersion.scmRevision;
+
+            if (localStorage['appScmRevision'] == null) {
+                localStorage['appScmRevision'] = this.scmRevision;
+            } else if (this.scmRevision !== localStorage['appScmRevision']) {
+                console.log("App SCM Revision has changed from " + localStorage['appScmRevision'] + " to " + this.scmRevision + ". Need to refresh browser...");
+                this.$.newVersionAvailableToast.open();
+            }
+            this.appVersion = version;
+        },
+
+        onGetVersionError: function (event) {
+            console.log(event);
+            var readyState = event.detail.request.xhr.readyState;
+            var status = event.detail.request.xhr.status;
+            if (readyState === 4 && status === 404) {
+                console.log("Ignoring 404 for get version, as server is probably still starting...");
+            } else {
+                this.onRequestError(event);
+            }
+        }
+    };
+</script>
\ No newline at end of file
diff --git a/li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/c-app.html b/li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/c-app.html
index 385903413..911419640 100644
--- a/li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/c-app.html
+++ b/li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/c-app.html
@@ -33,21 +33,21 @@
 <link rel="import" href="../bower_components/strolch-wc-inspector/strolch-wc-control.html">
 <link rel="import" href="../bower_components/strolch-wc-reports/strolch-wc-reports.html">
 
-<link rel="import" href="./c-compute-behavior.html">
+<link rel="import" href="./c-app-behavior.html">
+<link rel="import" href="./behaviors/c-compute-behavior.html">
+<link rel="import" href="./styles/c-app-style.html">
 <link rel="import" href="./c-app-routing.html">
 <link rel="import" href="./c-app-menu.html">
 
-<link rel="import" href="./c-view404.html">
+<link rel="import" href="./views/c-view404.html">
 
 <dom-module id="c-app">
 
     <template>
 
-        <style is="custom-styles" include="strolch-wc-styles">
+        <style is="custom-style" include="c-app-style">
 
             :host {
-                --app-primary-color: var(--paper-blue-900);
-                --app-secondary-color: black;
                 display: block;
                 margin: 0;
                 padding: 0;
@@ -64,7 +64,7 @@
             }
 
             app-toolbar {
-                background-color: var(--paper-blue-900);
+                background-color: var(--app-primary-color);
                 color: #fff;
             }
 
@@ -197,7 +197,7 @@
                 <paper-toast id="toast"
                              text="[[toastText]]"
                              duration="1750"
-                             on-iron-overlay-closed="_onToastClosed"></paper-toast>
+                             on-iron-overlay-closed="onToastClosed"></paper-toast>
 
                 <paper-toast id="newVersionAvailableToast"
                              text="[[localize('newVersionAvailableRefreshRequired')]]"
@@ -250,10 +250,14 @@
             is: 'c-app',
 
             behaviors: [
-                CustomComputeBehavior, StrolchLocalizeBehavior
+                StrolchLocalizeBehavior, CustomComputeBehavior, CustomAppBehavior
             ],
 
             properties: {
+                localesPath: {
+                    type: String,
+                    value: '../../locales.json'
+                },
                 page: {
                     type: String,
                     observer: 'observePage'
@@ -328,7 +332,7 @@
 
             observePage: function (newValue, oldValue) {
                 if (newValue) {
-                    this._reloadPage(newValue);
+                    this.reloadPage(newValue);
                 }
             },
             onPageChange: function (event) {
@@ -354,240 +358,13 @@
                         this.changePage(action);
                 }
             },
-            toggleDrawer: function () {
-                this.$$("#drawer").toggle();
-            },
-            closeDrawer: function () {
-                this.$$("#drawer").close();
-            },
-
-            onShowToast: function (e) {
-                if (this.$.toast.opened) {
-                    // purge if we have too many
-                    if (this.queuedToasts.length > 5)
-                        this.queuedToasts = [];
-                    this.queuedToasts.push(e.detail.text);
-                } else {
-                    this.toastText = e.detail.text;
-                    this.$.toast.open();
-                }
-            },
-
-            _onToastClosed: function (e) {
-                if (this.queuedToasts.length > 0) {
-                    this.toastText = this.queuedToasts.splice(0, 1)[0];
-                    this.$.toast.open();
-                }
-            },
-
-            onShowStrolchDialog: function (event) {
-                var dlgTitle;
-                if (event.detail.title != null)
-                    dlgTitle = event.detail.title;
-                else
-                    dlgTitle = event.detail.isError ? 'errorOccurred' : 'info';
-                var dlgText = event.detail.text;
-                this._showDialog(dlgTitle, dlgText);
-            },
-            onShowDialog: function (event) {
-                var dlgTitle;
-                if (event.detail.title != null)
-                    dlgTitle = event.detail.title;
-                else
-                    dlgTitle = event.detail.isError ? 'errorOccurred' : 'info';
-                var dlgText = event.detail.message;
-                this._showDialog(dlgTitle, dlgText);
-            },
-            onShowConfirmation: function (event) {
-                var dlgTitle = event.detail.title;
-                var dlgText = event.detail.text;
-                var dlgCallback = event.detail.callback;
-                this._showConfirmation(dlgTitle, dlgText, dlgCallback);
-            },
-            onShowNotification: function (event) {
-                this.$.toolBar.showNotification(event.detail);
-            },
-            onClearNotification: function (event) {
-                this.$.toolBar.clearNotification(event.detail);
-            },
-            onLogOut: function (event) {
-                this.$.login.logout();
-                this.set("authTokenValid", false);
-            },
-            onServerNotAvailable: function (event) {
-                clearInterval(this.checkForNewVersionInterval);
-                this.$.dlg.close();
-                this.$.confirmationDlg.close();
-                this.$.serverNotConnectedDlg.open();
-            },
-            onSessionInvalid: function (event) {
-                var that = this;
-                console.log(this.routeTail);
-                if (this.routeTail.prefix != '/login') {
-                    this._showConfirmation('sessionInvalid', 'sessionInvalidConfirmNavToLogin', function () {
-                        that.deleteCookie('strolch.authorization');
-                        that.set("authTokenValid", false);
-                    });
-                }
-            },
-            onPrivilegeDenied: function (event) {
-                if (this.authTokenValid) {
-                    this._showDialog('privilegeDenied', 'privilegeDeniedText', this.requestEventToUrl(event));
-                } else {
-                    console.warn("Privilege denied to URL " + this.requestEventToUrl(event), this.requestErrorToMsg(event));
-                }
-            },
-            userLocaleChanged: function (newValue, oldValue) {
-                if (newValue && oldValue) {
-                    console.log('User locale changed to ' + newValue);
-                    this.$.ajaxPutLocale.generateRequest();
-                    Strolch.setUserLocale(newValue);
-                    window.location.reload();
-                } else if (this.userConfig == null && Strolch.getUserConfig() != null && Strolch.getUserConfig().locale != newValue) {
-                    this.userConfig = Strolch.getUserConfig();
-                    this.userConfig.locale = newValue;
-                    Strolch.setUserConfig(this.userConfig);
-                    this.$.ajaxPutLocale.generateRequest();
-                }
-            },
-
-            sessionValidated: function () {
-                console.log("Session validated.");
-                var userLocale = Strolch.getUserLocale();
-                var userConfig = Strolch.getUserConfig();
-                if (userLocale !== userConfig.locale) {
-                    console.log("Updating server side locale for user " + userConfig.username + " to " + userLocale);
-                    userConfig.locale = userLocale;
-                    Strolch.setUserConfig(userConfig);
-                    this.$.ajaxPutLocale.url = this.baseRestPath + "/strolch/sessions/" + userConfig.sessionId + "/locale/" + userLocale;
-                    this.$.ajaxPutLocale.generateRequest();
-                }
-                this.set("authToken", Strolch.getAuthToken());
-                this.set("authTokenValid", true);
-                this.set("userConfig", userConfig);
-            },
-            logout: function () {
-                sessionStorage.clear();
-                Polymer.dom(this.root).querySelectorAll('#auth')[0].logout();
-                Strolch.clearStorageData();
-                this.deleteCookie("strolch.authorization");
-            },
-
-            _showDialog: function (dlgTitle, dlgText, dlgReason) {
-                if (this.localize) {
-                    this.dlgTitle = this.localize(dlgTitle);
-                    dlgText = this.localize(dlgText);
-                    if (dlgReason)
-                        dlgText += ": " + dlgReason;
-                    console.log("Message: " + this.dlgTitle + ': ' + dlgText);
-                    this.$.dlgText.innerHTML = this.localize(dlgText);
-                    this.$.dlg.open();
-                } else {
-                    this.debounce('show-dlg', function () {
-                        this.dlgTitle = this.localize(dlgTitle);
-                        dlgText = this.localize(dlgText);
-                        if (dlgReason)
-                            dlgText += ": " + dlgReason;
-                        console.log("Message: " + this.dlgTitle + ': ' + dlgText);
-                        this.$.dlgText.innerHTML = this.localize(dlgText);
-                        this.$.dlg.open();
-                    }, 250);
-                }
-            },
-            _showConfirmation: function (dlgTitle, dlgText, dlgCallback) {
-                if (this.localize) {
-                    this.dlgTitle = this.localize(dlgTitle);
-                    dlgText = this.localize(dlgText);
-                    console.log("Message: " + this.dlgTitle + ': ' + dlgText);
-                    this.$.confirmationDlgText.innerHTML = this.localize(dlgText);
-                    var dlg = this.$.confirmationDlg;
-                    var onClose = function (event) {
-                        dlgCallback(event.detail.confirmed);
-                        dlg.removeEventListener("iron-overlay-closed", onClose);
-                    };
-                    dlg.addEventListener("iron-overlay-closed", onClose);
-                    dlg.open();
-                } else {
-                    this.debounce('show-dlg', function () {
-                        this.dlgTitle = this.localize(dlgTitle);
-                        dlgText = this.localize(dlgText);
-                        console.log("Message: " + this.dlgTitle + ': ' + dlgText);
-                        this.$.confirmationDlgText.innerHTML = this.localize(dlgText);
-                        var dlg = this.$.confirmationDlg;
-                        var onClose = function (event) {
-                            dlgCallback(event.detail.confirmed);
-                            dlg.removeEventListener("iron-overlay-closed", onClose);
-                        };
-                        dlg.addEventListener("iron-overlay-closed", onClose);
-                        dlg.open();
-                    }, 250);
-                }
-            },
 
             refreshBrowser: function () {
                 localStorage['appScmRevision'] = this.scmRevision;
                 document.location.reload();
             },
-            checkForNewVersion: function () {
-                this.$.ajaxGetVersion.generateRequest();
-            },
-            reconnect: function () {
-                this.$.serverNotConnectedDlg.close();
-                this.onGetVersionResponse = function (event) {
-                    var version = event.detail.response;
-                    this.scmRevision = version.appVersion.scmRevision;
-                    localStorage['appScmRevision'] = this.scmRevision;
-                    document.location.reload();
-                };
-                this.$.ajaxGetVersion.generateRequest();
-            },
-
-            onGetVersionResponse: function (event) {
-                var version = event.detail.response;
-                Strolch.setAppVersion(version);
-                this.scmRevision = version.appVersion.scmRevision;
-
-                if (localStorage['appScmRevision'] == null) {
-                    localStorage['appScmRevision'] = this.scmRevision;
-                } else if (this.scmRevision !== localStorage['appScmRevision']) {
-                    console.log("App SCM Revision has changed from " + localStorage['appScmRevision'] + " to " + this.scmRevision + ". Need to refresh browser...");
-                    this.$.newVersionAvailableToast.open();
-                }
-                this.appVersion = version;
-            },
-
-            onGetVersionError: function (event) {
-                console.log(event);
-                var readyState = event.detail.request.xhr.readyState;
-                var status = event.detail.request.xhr.status;
-                if (readyState === 4 && status === 404) {
-                    console.log("Ignoring 404 for get version, as server is probably still starting...");
-                } else {
-                    this.onRequestError(event);
-                }
-            },
 
             /* Lifecycle */
-            attached: function () {
-                var that = this;
-                setTimeout(function () {
-                    that.checkForNewVersion();
-                }, 3000);
-                this.checkForNewVersionInterval = setInterval(function () {
-                    that.checkForNewVersion();
-                }, 10000);
-            },
-
-            _reloadPage: function (pageName) {
-                this.debounce('page-reload', function () {
-                    this.selectedPage = pageName;
-                    var page = this.$$('#' + pageName);
-                    if (page && page.reload) {
-                        console.log('Reloading ' + pageName);
-                        page.reload();
-                    }
-                }, 100);
-            },
         });
 
     </script>
diff --git a/li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/styles/c-app-style.html b/li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/styles/c-app-style.html
new file mode 100644
index 000000000..43c49260e
--- /dev/null
+++ b/li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/styles/c-app-style.html
@@ -0,0 +1,78 @@
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/paper-styles/color.html">
+
+<link rel="import" href="../../bower_components/strolch-wc-styles/strolch-wc-styles.html">
+
+<dom-module id="c-app-style">
+    <template>
+        <style is="c-app-style" include="strolch-wc-styles">
+            :root {
+
+                /* dimensions of this app */
+                --app-width: 100%;
+                --app-max-width: 2000px;
+                --app-min-width: 640px;
+
+                /* dimensions of the header */
+                --app-header-height: 64px;
+                --app-drawer-height: calc(100vh - var(--app-header-height));
+                --app-notification-height: 48px;
+
+                /* dimensions of the pages */
+                --app-pages-content-padding: 24px;
+
+                /* primary colors */
+                --app-primary-color: #9965F4;
+                --app-secondary-color: #616161;
+
+                /* highlight colors */
+                --app-light-highlight-fg-color: black;
+                --app-light-highlight-bg-color: var(--paper-indigo-100);
+                --app-regular-highlight-fg-color: white;
+                --app-regular-highlight-bg-color: var(--paper-indigo-200);
+                --app-dark-highlight-fg-color: white;
+                --app-dark-highlight-bg-color: var(--paper-indigo-400);
+
+                /* warning colors */
+                --app-light-warning-fg-color: white;
+                --app-light-warning-bg-color: var(--paper-red-200);
+                --app-regular-warning-fg-color: white;
+                --app-regular-warning-bg-color: var(--paper-red-700);
+                --app-dark-warning-fg-color: white;
+                --app-dark-warning-bg-color: var(--paper-red-700);
+
+                /* decent colors */
+                --app-light-decent-fg-color: black;
+                --app-light-decent-bg-color: var(--paper-grey-100);
+                --app-regular-decent-fg-color: black;
+                --app-regular-decent-bg-color: var(--paper-grey-200);
+                --app-dark-decent-fg-color: black;
+                --app-dark-decent-bg-color: var(--paper-grey-300);
+            }
+
+            h1, h2, h3, h4, h5, h6 {
+                color: var(--app-primary-color);
+            }
+
+            paper-material {
+                background: white;
+                padding: 10px;
+                margin: 10px;
+            }
+
+            paper-card {
+                background: white;
+                margin: 10px;
+            }
+
+            paper-card .header {
+                margin: 10px;
+            }
+
+            paper-toggle-button {
+                --paper-toggle-button-checked-button-color: var(--app-primary-color);
+            }
+
+        </style>
+    </template>
+</dom-module>
\ No newline at end of file
diff --git a/li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/c-view404.html b/li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/views/c-view404.html
similarity index 100%
rename from li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/c-view404.html
rename to li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/views/c-view404.html