[Major] Refactored webapp to use behaviors for re-usable code
This commit is contained in:
parent
1cf28eaa15
commit
458d778210
|
|
@ -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) {
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue