From b7e710b28fe259477e17abee243b5c0dd7750e59 Mon Sep 17 00:00:00 2001
From: zzz <zzz@i2pmail.org>
Date: Sun, 3 Oct 2021 09:05:26 -0400
Subject: [PATCH] Wizard: Add theme picker page
Clean up configui.js
CSS cleanups for new page TODO
Gitlab #335
---
.../i2p/router/web/helpers/WizardHelper.java | 11 +++---
apps/routerconsole/jsp/js/configui.js | 14 ++------
apps/routerconsole/jsp/js/welcomeui.js | 34 +++++++++++++++++++
apps/routerconsole/jsp/welcome.jsp | 31 +++++++++++++++--
4 files changed, 72 insertions(+), 18 deletions(-)
create mode 100644 apps/routerconsole/jsp/js/welcomeui.js
diff --git a/apps/routerconsole/java/src/net/i2p/router/web/helpers/WizardHelper.java b/apps/routerconsole/java/src/net/i2p/router/web/helpers/WizardHelper.java
index a950ed5ddf..700a874948 100644
--- a/apps/routerconsole/java/src/net/i2p/router/web/helpers/WizardHelper.java
+++ b/apps/routerconsole/java/src/net/i2p/router/web/helpers/WizardHelper.java
@@ -23,11 +23,12 @@ public class WizardHelper extends HelperBase {
public static final float BW_SCALE = 0.75f;
// pages
public static final int PAGE_LANG = 1;
- public static final int PAGE_CHECK = 2;
- public static final int PAGE_TEST = 3;
- public static final int PAGE_RESULTS = 4;
- public static final int PAGE_BROWSER = 5;
- public static final int PAGE_DONE = 6;
+ public static final int PAGE_THEME = 2;
+ public static final int PAGE_CHECK = 3;
+ public static final int PAGE_TEST = 4;
+ public static final int PAGE_RESULTS = 5;
+ public static final int PAGE_BROWSER = 6;
+ public static final int PAGE_DONE = 7;
// KBps
private static final float MIN_DOWN_BW = 32.0f;
diff --git a/apps/routerconsole/jsp/js/configui.js b/apps/routerconsole/jsp/js/configui.js
index c1baa6c45c..59ab35c095 100644
--- a/apps/routerconsole/jsp/js/configui.js
+++ b/apps/routerconsole/jsp/js/configui.js
@@ -4,17 +4,8 @@
// as a formal dedication to the public domain and in circumstances where
// a public domain is not usable.
-var prefersDarkTheme = false;
var oldTheme = "light";
-function detectDark() {
- // https://stackoverflow.com/questions/56393880/how-do-i-detect-dark-mode-using-javascript
- if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
- // dark mode
- prefersDarkTheme = true;
- }
-}
-
function swapStyleSheet(theme) {
// https://stackoverflow.com/questions/14292997/changing-style-sheet-javascript
document.getElementById("pagestyle").setAttribute("href", "/themes/console/" + theme + "/console.css");
@@ -34,6 +25,9 @@ function resetStyleSheet() {
function initThemeSwitcher() {
var dark = document.getElementById("dark");
+ if (dark == null) {
+ return;
+ }
dark.onclick = function() {
swapStyleSheet("dark");
disableButtons(false);
@@ -56,8 +50,6 @@ function initThemeSwitcher() {
document.getElementById("themebox1").onclick = function() { disableButtons(false); }
document.getElementById("themebox2").onclick = function() { disableButtons(false); }
document.getElementById("themebox3").onclick = function() { disableButtons(false); }
- // unused for now
- detectDark();
}
document.addEventListener("DOMContentLoaded", function() {
diff --git a/apps/routerconsole/jsp/js/welcomeui.js b/apps/routerconsole/jsp/js/welcomeui.js
new file mode 100644
index 0000000000..74d204327a
--- /dev/null
+++ b/apps/routerconsole/jsp/js/welcomeui.js
@@ -0,0 +1,34 @@
+/* @license http://creativecommons.org/publicdomain/zero/1.0/legalcode CC0-1.0 */
+
+// This component is dedicated to the public domain. It uses the CC0
+// as a formal dedication to the public domain and in circumstances where
+// a public domain is not usable.
+
+function swapStyleSheet(theme) {
+ // https://stackoverflow.com/questions/14292997/changing-style-sheet-javascript
+ document.getElementById("pagestyle").setAttribute("href", "/themes/console/" + theme + "/console.css");
+}
+
+function initThemeSwitcher() {
+ var dark = document.getElementById("dark");
+ dark.onclick = function() {
+ swapStyleSheet("dark");
+ }
+ var light = document.getElementById("light");
+ light.onclick = function() {
+ swapStyleSheet("light");
+ }
+ // https://stackoverflow.com/questions/56393880/how-do-i-detect-dark-mode-using-javascript
+ if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+ // dark mode
+ swapStyleSheet("dark");
+ dark.checked = true;
+ light.checked = false;
+ }
+}
+
+document.addEventListener("DOMContentLoaded", function() {
+ initThemeSwitcher();
+}, true);
+
+/* @license-end */
diff --git a/apps/routerconsole/jsp/welcome.jsp b/apps/routerconsole/jsp/welcome.jsp
index dad4beeba5..65b4814d81 100644
--- a/apps/routerconsole/jsp/welcome.jsp
+++ b/apps/routerconsole/jsp/welcome.jsp
@@ -11,6 +11,7 @@
// 5: Browser setup
// 6: Done
final int PAGE_LANG = net.i2p.router.web.helpers.WizardHelper.PAGE_LANG;
+ final int PAGE_THEME = net.i2p.router.web.helpers.WizardHelper.PAGE_THEME;
final int PAGE_CHECK = net.i2p.router.web.helpers.WizardHelper.PAGE_CHECK;
final int PAGE_TEST = net.i2p.router.web.helpers.WizardHelper.PAGE_TEST;
final int PAGE_RESULTS = net.i2p.router.web.helpers.WizardHelper.PAGE_RESULTS;
@@ -98,6 +99,10 @@
/* @license-end */
</script>
+<%
+ } else if (ipg == PAGE_THEME) {
+%>
+<script src="/js/welcomeui.js?<%=net.i2p.CoreVersion.VERSION%>" type="text/javascript"></script>
<%
} // ipg == PAGE_TEST
%>
@@ -131,13 +136,17 @@
<input type="hidden" name="action" value="blah" >
<input type="hidden" name="page" value="<%=(ipg + 1)%>" >
<%
+ if (ipg == PAGE_LANG || ipg == PAGE_THEME) {
+%>
+<%-- needed for CSS: --%><div id="config_ui">
+<%-- needed for lang setting in css.jsi: --%><input type="hidden" name="consoleNonce" value="<%=net.i2p.router.web.CSSHelper.getNonce()%>" >
+<%
+ }
if (ipg == PAGE_LANG) {
// language selection
%>
<jsp:useBean class="net.i2p.router.web.helpers.ConfigUIHelper" id="uihelper" scope="request" />
<jsp:setProperty name="uihelper" property="contextId" value="<%=i2pcontextId%>" />
-<%-- needed for CSS: --%><div id="config_ui">
-<%-- needed for lang setting in css.jsi: --%><input type="hidden" name="consoleNonce" value="<%=net.i2p.router.web.CSSHelper.getNonce()%>" >
<h3 id="wizardheading" class="wizard"><%=uihelper._t("Select Language")%></h3>
<img class="wizardimg" src="/themes/console/images/wizard/step-0.png">
<div id="wizlangsettings" class="wizard">
@@ -156,6 +165,24 @@
</p>
</div>
</div>
+<%
+
+ } else if (ipg == PAGE_THEME) {
+ // Theme picker
+%>
+<jsp:useBean class="net.i2p.router.web.helpers.ConfigUIHelper" id="uihelper2" scope="request" />
+<jsp:setProperty name="uihelper2" property="contextId" value="<%=i2pcontextId%>" />
+<h3 id="wizardheading" class="wizard"><%=uihelper2._t("Select Theme")%></h3>
+<img class="wizardimg" src="/themes/console/images/wizard/step-1.png">
+<div id="wizlangsettings" class="wizard">
+<jsp:getProperty name="uihelper2" property="settings" />
+</div>
+<div class="wizardtext">
+<p>
+<%=intl._t("Please select your preferred theme:")%>
+</p>
+</div>
+</div>
<%
} else if (ipg == PAGE_CHECK) {
--
GitLab