Improved UI and added dark mode

This commit is contained in:
Arne van Iterson 2020-06-25 14:21:53 +02:00
parent 1e3aba9ed6
commit e91c3ac6d8
5 changed files with 60 additions and 28 deletions

View File

@ -47,7 +47,7 @@
function random() { function random() {
if (randomUrls.length == 0) { if (randomUrls.length == 0) {
window.location.reload(); load("/partials/random.html");
} else { } else {
var id = Math.floor(Math.random() * (randomUrls.length - 0)) + 0; var id = Math.floor(Math.random() * (randomUrls.length - 0)) + 0;
setView(randomUrls[id]); setView(randomUrls[id]);

View File

@ -1,26 +1,51 @@
<h1 class="title">Settings</h1> <h1 class="title">Settings</h1>
<div class="columns is-mobile"> <div class="columns is-mobile">
<div class="column"> <div class="column">
<h6 class="title is-6">Credits</h6> <p class="mb-1">
Code by <a href="https://arnweb.nl">McArn</a><br> <span class="has-text-weight-semibold">Credits</span><br>
Assets by Cirkel Code by <a href="https://arnweb.nl">McArn</a><br>
Assets by Cirkel
</p>
</div> </div>
<div class="column"> <div class="column">
<h6 class="title is-6">Theme</h6> <p class="mb-1">
<span class="has-text-weight-semibold">Theme</span><br>
Use a theme with SkinSwitcher, changing this will reload your current session
</p>
<div class="buttons has-addons"> <div class="buttons has-addons">
<button class="button" id="light">Light</button> <button class="button" id="light">Light</button>
<button class="button is-dark" id="dark">Dark</button> <button class="button" id="dark">Dark</button>
<p>
Use a theme with SkinSwitcher.
</p>
</div> </div>
<h6 class="title is-6">Reset all settings</h6> <p class="mb-1">
<span class="has-text-weight-semibold">Reset all settings</span><br>
Resetting will delete all settings, credentials and saved skins.
</p>
<div class="buttons"> <div class="buttons">
<button class="button is-danger" id="reset">Reset</button> <button class="button is-danger" id="reset">Reset</button>
<p>
Resetting will delete all settings, credentials and saved skins.
</p>
</div> </div>
</div> </div>
</div> </div>
<script>
switch (settings.theme) {
case "light":
$("button#light").addClass("is-primary is-selected")
break;
case "dark":
$("button#dark").addClass("is-primary is-selected")
break;
}
$("button#light").on("click", () => {
settings.theme = "light";
save();
location.reload();
});
$("button#dark").on("click", () => {
settings.theme = "dark";
save();
location.reload();
});
</script>

13
package-lock.json generated
View File

@ -665,10 +665,10 @@
"resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.0.tgz", "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.0.tgz",
"integrity": "sha512-rV75CJkubNUroAt0qCRkjznZLoaXq/ctfMXsMvKSL84UetbSyx5REl96e8GoQ04G4Tkw0XF3STECffTOQrbzOQ==" "integrity": "sha512-rV75CJkubNUroAt0qCRkjznZLoaXq/ctfMXsMvKSL84UetbSyx5REl96e8GoQ04G4Tkw0XF3STECffTOQrbzOQ=="
}, },
"bulma-prefers-dark": { "bulmaswatch": {
"version": "0.1.0-beta.0", "version": "0.8.1",
"resolved": "https://registry.npmjs.org/bulma-prefers-dark/-/bulma-prefers-dark-0.1.0-beta.0.tgz", "resolved": "https://registry.npmjs.org/bulmaswatch/-/bulmaswatch-0.8.1.tgz",
"integrity": "sha512-EeDW8pQrkYEOXo2l3WykfghbUzi8jlQWGI+Cu2HwmXwQHMcoGF6yiKYCNShttN+8z3atq8fLWh3B7pqXUV4fBA==" "integrity": "sha512-7HGm5v9If6gzxbTht4/oVS0dhySp6g/JyTrxmpSXHXgDQXivvxiuVmcJOZo3PFv9GAOn4om7SK36I2V8W81sgw=="
}, },
"cacheable-request": { "cacheable-request": {
"version": "6.1.0", "version": "6.1.0",
@ -3811,11 +3811,6 @@
"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
"integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==" "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="
}, },
"unix-timestamp": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/unix-timestamp/-/unix-timestamp-0.2.0.tgz",
"integrity": "sha1-4c3CgI32Mn0n5jXZNR5ygVKIcz4="
},
"unused-filename": { "unused-filename": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/unused-filename/-/unused-filename-2.1.0.tgz", "resolved": "https://registry.npmjs.org/unused-filename/-/unused-filename-2.1.0.tgz",

View File

@ -19,7 +19,7 @@
"@fortawesome/fontawesome-free": "^5.13.1", "@fortawesome/fontawesome-free": "^5.13.1",
"axios": "^0.19.2", "axios": "^0.19.2",
"bulma": "^0.9.0", "bulma": "^0.9.0",
"bulma-prefers-dark": "0.1.0-beta.0", "bulmaswatch": "^0.8.1",
"cross-env": "^7.0.2", "cross-env": "^7.0.2",
"electron": "^8.2.5", "electron": "^8.2.5",
"electron-builder": "^22.6.0", "electron-builder": "^22.6.0",
@ -33,7 +33,6 @@
"pngjs": "^5.0.0", "pngjs": "^5.0.0",
"skinview3d": "^2.0.0-alpha.1", "skinview3d": "^2.0.0-alpha.1",
"three": "^0.116.1", "three": "^0.116.1",
"unix-timestamp": "^0.2.0",
"uuid": "^8.2.0" "uuid": "^8.2.0"
}, },
"devDependencies": {}, "devDependencies": {},

View File

@ -15,6 +15,20 @@ const MojangAPI = require(path.join(__dirname + "/../src/api.js"));
var settings = JSON.parse(fs.readFileSync(path.join(__dirname + "/../assets/data.json"))); var settings = JSON.parse(fs.readFileSync(path.join(__dirname + "/../assets/data.json")));
var api; var api;
var theme = document.createElement("link");
theme.rel = "stylesheet";
switch (settings.theme) {
case "light":
theme.href = "../node_modules/bulmaswatch/default/bulmaswatch.min.css";
break;
case "dark":
theme.href = "../node_modules/bulmaswatch/cyborg/bulmaswatch.min.css";
break;
}
document.head.appendChild(theme);
if (settings.clientId == "") { if (settings.clientId == "") {
notify("warning", "Generating client id"); notify("warning", "Generating client id");
settings.clientId = uuid.v4().replace(/-/g, ""); settings.clientId = uuid.v4().replace(/-/g, "");
@ -30,7 +44,7 @@ function load(url) {
if (re.test(url)) { if (re.test(url)) {
shell.openExternal(url); shell.openExternal(url);
} else { } else {
if (!api.accessToken && url != "/partials/auth.html") { if (!api.accessToken && url != "/partials/auth.html") {
notify("warning", "You need to login first"); notify("warning", "You need to login first");
} else { } else {
$("#content").load(path.join(__dirname + url), () => { $("#content").load(path.join(__dirname + url), () => {
@ -93,4 +107,3 @@ function save() {
} }
load("/partials/auth.html"); load("/partials/auth.html");