From 7c902b6122b9c341147b9de228d82b73b4730ca2 Mon Sep 17 00:00:00 2001
From: dbadol <13353088+dbadol@users.noreply.github.com>
Date: Mon, 22 Jul 2024 09:06:37 +0200
Subject: [PATCH] Explorer: Add a dark mode (compatible with Beam Wallet
colors) (#1994)
* Add loading and title animations
Useless but fun animations...
* Define all colors as CSS variables
Will help creating dark/light modes later on.
* Add folder for DApp version
* Revert "Merge branch 'master' into Explorer"
This reverts commit 6fa6487784b1ed6d9e15bcf6baee83c31329b638, reversing
changes made to 15f5bf70dffc52053339ffe4cf924a320d202a38.
* Add Dark mode
Add dark theme colors and a toggle button. Also adjust some CSS and remove some of the previous tentative title animations.
* Adjust dark background to Beam Wallet colors
Use same background gradient as Beam Wallet (and other small adjustments).
---
explorer/htm/BeamExplorer.htm | 510 ++++++++++++++++++++++++----------
1 file changed, 361 insertions(+), 149 deletions(-)
diff --git a/explorer/htm/BeamExplorer.htm b/explorer/htm/BeamExplorer.htm
index db400e41e..e9346bcd1 100644
--- a/explorer/htm/BeamExplorer.htm
+++ b/explorer/htm/BeamExplorer.htm
@@ -26,7 +26,9 @@
-
@@ -791,9 +986,14 @@ Beam Smart Explorer v0.6
-
@@ -805,13 +1005,14 @@ Beam Smart Explorer v0.6
-
Loading...
+
+ Loading. . .
-
+
You need to enable JavaScript to run this app.
@@ -1069,7 +1270,7 @@ Loading...
function DisplayContracts()
{
let text = "\
- Deployed Smart Contracts \n\
+ Deployed Smart Contracts \n\
\n\
\n\
Cid \n\
@@ -1145,9 +1346,7 @@ Deployed Smart Contracts \n\
const jTblObj = jData["Asset history"];
const jTbl = jTblObj["value"];
- let text = "\n"
- text += "History of Asset " + g_id;
- text += " \n"
+ let text = "History of Asset " + g_id + " \n"
text += "\
\n\
@@ -1308,9 +1507,9 @@ Deployed Smart Contracts \n\
// Display error message if kernel or height was queried but no block was found
if (g_kernel || g_id > 0) {
if (g_kernel) {
- text += "Kernel not found. "
+ text += "Kernel not found. "
} else {
- text += "Block not found. "
+ text += "Block not found. "
}
SetContent(text);
return;
@@ -1322,7 +1521,7 @@ Deployed Smart Contracts \n\
// If the request was a kernel, get the resulting height
if (g_kernel) { g_id = j["value"][0][1]["value"] }
- text += "";
+ text += "";
if (g_id > 0) {
text += AddClass(MakeRef(UrlSelf("hdrs", "&hMax=" + g_id), "Deployed Smart Contracts \n\
j = jData["inputs"];
if (j)
{
- text += "Inputs \n";
+ text += "Inputs \n";
text += MakeTableTxos(j, true);
}
j = jData["outputs"];
if (j)
{
- text += "Outputs \n";
+ text += "Outputs \n";
text += MakeTableTxos(j, false);
}
let jTbl = jData["kernels"];
if (jTbl)
{
- text += "Kernels \n";
+ text += "Kernels \n";
text += "\
\n\
\n\
@@ -1566,9 +1765,7 @@ Deployed Smart Contracts \n\
const jTblObj = jData["Calls history"];
const jTbl = jTblObj["value"];
- let text = "\n"
- text += "Contract " + AddClass(g_id, "cidTitle");
- text += " \n"
+ let text = "Contract " + AddClass(g_id, "cidTitle") + " \n"
text += MakeCollapsibleBegin("Call history") + "\
\n\
@@ -1622,7 +1819,7 @@ Deployed Smart Contracts \n\
const jData = JSON.parse(this.responseText);
//const jTbl = jData["value"];
- let text = "\n"
+ let text = "\n"
text += "Block headers";
text += " ";
text += AddClass(MakeRef(MakeLinkToOlderBlocks(jData), "Deployed Smart Contracts \n\
{
const jData = JSON.parse(this.responseText);
- let text = "Blockchain status ";
+ let text = "Blockchain status ";
text += " "; // Class added to avoid adding filters to these specific tables...
text += Obj2Html(jData);
text += "
"
@@ -1653,7 +1850,7 @@ Deployed Smart Contracts \n\
{
const jData = JSON.parse(this.responseText);
- let text = "\n";
+ let text = "\n";
if (g_id) {
text += "Confidential Assets at block height " + MakeBlock(g_id);
text += " ";
@@ -1675,7 +1872,7 @@ Deployed Smart Contracts \n\
function DisplayHistoricalBlocks()
{
- let text = "Special historical blocks ";
+ let text = "Special historical blocks ";
text += " \n\
\n\
Height \n\
@@ -1864,6 +2061,10 @@ Deployed Smart Contracts \n\
}
];
+ // Check localStorage for dark mode status ("dark" or "")
+ let mode = localStorage.getItem("mode");
+ if (mode) {document.querySelector(":root").classList.add(mode)};
+
// URL and explorer node parameters
const args = (new URL(document.location)).searchParams;
let g_type = args.get("type"); // Remark: We've added two URL types not used by the explorer node ("historical" and "treasury")
@@ -2426,7 +2627,18 @@ Deployed Smart Contracts \n\
function bottomFunction() {
document.body.scrollTop = Math.abs(document.body.scrollHeight - document.body.clientHeight); // For Safari
document.documentElement.scrollTop = Math.abs(document.documentElement.scrollHeight - document.documentElement.clientHeight); // For Chrome, Firefox, IE and Opera
- }
+ }
+
+ // TOGGLE DARK MODE
+ function toggleDarkMode() {
+ let mode = "";
+ // For dark mode, we add a class to root
+ let rootclass = document.querySelector(":root").classList;
+ if ( rootclass.contains("dark") ) { rootclass.remove("dark") }
+ else { rootclass.add("dark"); mode = "dark"; }
+ // Store mode in localStorage (to allow retrieving it across pages)
+ localStorage.setItem("mode", mode);
+ }