settings cleanup (#266)

* settings cleanup

* translate more texts

* Move all strings

* Fix broken switches
This commit is contained in:
Ven 2022-11-25 12:12:14 +01:00 committed by GitHub
parent 281385bdfb
commit d92da1c3d0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 153 additions and 194 deletions

View file

@ -27,6 +27,7 @@
"settings-mobileMode": "Mobile mode", "settings-mobileMode": "Mobile mode",
"settings-mobileMode-desc": "If you're on a device with touch-screen this feature is for you! It activates Discord's hidden mobile\n mode meant for phones and tablets. Only major feature missing is voice chat support. This is ideal for\n users on PinePhone and similar.", "settings-mobileMode-desc": "If you're on a device with touch-screen this feature is for you! It activates Discord's hidden mobile\n mode meant for phones and tablets. Only major feature missing is voice chat support. This is ideal for\n users on PinePhone and similar.",
"settings-channel": "Discord channel", "settings-channel": "Discord channel",
"settings-channel-hummus": "Hummus (Experimental)",
"settings-channel-desc1": "You can use this setting to change current instance of Discord:", "settings-channel-desc1": "You can use this setting to change current instance of Discord:",
"settings-channel-desc2": "you're probably most familiar with this one. It's the one you see in default Discord\n client!", "settings-channel-desc2": "you're probably most familiar with this one. It's the one you see in default Discord\n client!",
"settings-channel-desc3": "this is alpha test release of Discord. By using it you gain access to the newest\n features and fixes.", "settings-channel-desc3": "this is alpha test release of Discord. By using it you gain access to the newest\n features and fixes.",
@ -38,21 +39,32 @@
"settings-altPaste-desc": "If you're on Gnome on Linux or just simply can't paste images copied from other messages, then this is\n for you. This enables alternative module for pasting images. Only enable this when you're experiencing\n issues.", "settings-altPaste-desc": "If you're on Gnome on Linux or just simply can't paste images copied from other messages, then this is\n for you. This enables alternative module for pasting images. Only enable this when you're experiencing\n issues.",
"settings-mod": "Client mod", "settings-mod": "Client mod",
"settings-mod-desc1": "Client mods are programs that allow you customize your Discord experience. They can change appearance of\n the client, modify behaviours or add new features!", "settings-mod-desc1": "Client mods are programs that allow you customize your Discord experience. They can change appearance of\n the client, modify behaviours or add new features!",
"settings-mod-desc2": "focuses on making the Discord plugin development experience easier. Minimal and\n lightweight.", "settings-mod-vencord": "lightweight, and easy to use client mod. Features a built-in store for plugins.",
"settings-mod-desc3": "light, secure, and easy to use, with out of the box experience. Features a built-in\n store for plugins.", "settings-mod-shelter": "is a new generation client mod built to be essentially bulletproof.",
"settings-mod-desc4": "heavily work in progress, doesn't have a working UI.",
"settings-prfmMode": "Performance mode", "settings-prfmMode": "Performance mode",
"settings-prfmMode": "Performance mode is an experimental function that may either increase responsiveness and performance of\n ArmCord or... decrease it. Please try every option and see which fits you the best.", "settings-prfmMode-desc": "Performance mode is an experimental function that may either increase responsiveness and performance of\n ArmCord or... decrease it. Please try every option and see which fits you the best.",
"settings-prfmMode-performance": "Performance", "settings-prfmMode-performance": "Performance",
"settings-prfmMode-battery": "Battery", "settings-prfmMode-battery": "Battery",
"settings-trayIcon": "Tray icon", "settings-trayIcon": "Tray icon",
"settings-trayIcon-desc": "Set the icon which will appear in tray menu.", "settings-trayIcon-desc": "Set the icon which will appear in tray menu.",
"settings-advanced": "Advanced user zone", "settings-trayIcon-dynamic": "Dynamic",
"settings-trayIcon-normal": "Discord Icon",
"settings-trayIcon-classic": "Classic Discord Icon",
"settings-trayIcon-colored-plug": "Colored Plug",
"settings-trayIcon-white-plug": "White Plug",
"settings-trayIcon-white-plug-alt": "White Plug Alt",
"settings-trayIcon-black-plug": "Black Plug",
"settings-trayIcon-black-plug-alt": "Black Plug Alt",
"settings-advanced": "Advanced user zone",
"settings-pluginsFolder": "Open plugins folder", "settings-pluginsFolder": "Open plugins folder",
"settings-themesFolder": "Open themes folder", "settings-themesFolder": "Open themes folder",
"settings-storageFolder": "Open storage folder", "settings-storageFolder": "Open storage folder",
"settings-none": "None", "settings-none": "None",
"settings-save": "Save Settings", "settings-save": "Save Settings",
"settings-experimental": "Experimental",
"settings-restart": "Restart App", "settings-restart": "Restart App",
"settings-updater": "Check for updates" "settings-updater": "Check for updates",
"settings-skipSplash": "Skip Splash Screen (Experimental)",
"settings-skipSplash-desc": "Skips ArmCord splash screen when you start up the app.",
"settings-copyDebugInfo": "Copy Debug Info"
} }

View file

@ -1,26 +1,19 @@
import {contextBridge, ipcRenderer} from "electron"; import {contextBridge, ipcRenderer} from "electron";
import * as path from "path";
import {addStyle} from "../utils"; import {addStyle} from "../utils";
import fs from "fs";
console.log("ArmCord Settings"); console.log("ArmCord Settings");
contextBridge.exposeInMainWorld("settings", { contextBridge.exposeInMainWorld("settings", {
save: (...args: any) => ipcRenderer.send("saveSettings", ...args), save: (...args: any) => ipcRenderer.send("saveSettings", ...args),
restart: () => ipcRenderer.send("restart"), restart: () => ipcRenderer.send("restart"),
saveAlert: (restartFunc: any) => ipcRenderer.send("saveAlert", restartFunc), saveAlert: (restartFunc: any) => ipcRenderer.send("saveAlert", restartFunc),
getLang: (toGet: string) => getLang: (toGet: string) => ipcRenderer.invoke("getLang", toGet),
ipcRenderer.invoke("getLang", toGet).then((result) => { get: (toGet: string) => ipcRenderer.invoke("getSetting", toGet),
return result;
}),
get: (toGet: string) =>
ipcRenderer.invoke("getSetting", toGet).then((result) => {
return result;
}), //jank but works
openThemesFolder: () => ipcRenderer.send("openThemesFolder"), openThemesFolder: () => ipcRenderer.send("openThemesFolder"),
openPluginsFolder: () => ipcRenderer.send("openPluginsFolder"), openPluginsFolder: () => ipcRenderer.send("openPluginsFolder"),
openStorageFolder: () => ipcRenderer.send("openStorageFolder"), openStorageFolder: () => ipcRenderer.send("openStorageFolder"),
copyDebugInfo: () => ipcRenderer.send("copyDebugInfo") copyDebugInfo: () => ipcRenderer.send("copyDebugInfo")
}); });
ipcRenderer.on("themeLoader", (event, message) => { ipcRenderer.on("themeLoader", (event, message) => {
addStyle(message); addStyle(message);
}); });

View file

@ -9,264 +9,218 @@
<body> <body>
<div class="saveBar"> <div class="saveBar">
<button id="settings-save" class="center">Save Settings</button> <button data-string="settings-save" class="center" onclick="saveSettings()"></button>
</div> </div>
<div class="restartBar"> <div class="restartBar">
<button id="settings-restart" class="center">Restart App</button> <button data-string="settings-restart" class="center" onclick="settings.restart()"></button>
</div> </div>
<div class="switch acTheme"> <div class="switch acTheme">
<select name="theme" id="theme" class="left dropdown"> <select name="theme" data-setting="windowStyle" class="left dropdown">
<option value="default">Default</option> <option value="" disabled selected hidden data-string="settings-theme"></option>
<option value="native">Native</option> <option value="default" data-string="settings-theme-default"></option>
<option value="native" data-string="settings-theme-native"></option>
</select> </select>
<p class="header" id="settings-theme">ArmCord theme</p>
<p class="description"> <p class="header" data-string="settings-theme"></p>
ArmCord "themes" manage apps behaviour and looks.
<div class="description">
<p data-string="settings-theme-desc1"></p>
<b data-string="settings-theme-default"></b> -
<span data-string="settings-theme-desc2"></span>
<br /> <br />
<b>Default</b> - this is how ArmCord looks when you first launch it. It includes recreation of Discord's <b data-string="settings-theme-native"></b> -
custom titlebar and ArmCord specific styles injected into Discord. <span data-string="settings-theme-desc3"></span>
<br /> </div>
<b>Native</b> - uses native titlebar of OS you're currently running (e.g Windows 7/10). Functions more
similar to actual Discord app on Linux.
</p>
</div> </div>
<br /> <br />
<div class="switch acCSP"> <div class="switch acCSP">
<label class="header">ArmCord CSP</label> <label class="header">ArmCord CSP</label>
<input class="tgl tgl-light left" id="csp" type="checkbox" /> <input id="csp" class="tgl tgl-light left" data-setting="armcordCSP" type="checkbox" />
<label class="tgl-btn left" for="csp"></label> <label class="tgl-btn left" for="csp"></label>
<p class="description"> <p class="description" data-string="settings-csp-desc"></p>
ArmCord CSP is our system that manages loading custom content loading into the Discord app. Stuff like
client mods and themes depend on it. Disable if you want to get rid of mods and custom styles.
</p>
</div> </div>
<br /> <br />
<div class="switch acTray"> <div class="switch acTray">
<label class="header" id="settings-tray">Minimize to tray</label> <label class="header" data-string="settings-tray"></label>
<input class="tgl tgl-light left" id="tray" type="checkbox" /> <input id="tray" class="tgl tgl-light left" data-setting="minimizeToTray" type="checkbox" />
<label class="tgl-btn left" for="tray"></label> <label class="tgl-btn left" for="tray"></label>
<p class="description"> <p class="description" data-string="settings-tray-desc"></p>
When disabled, ArmCord will close like any other window when closed, otherwise it'll sit back and relax
in your system tray for later.
</p>
</div> </div>
<br /> <br />
<div class="switch acPatches"> <div class="switch acPatches">
<label class="header" id="settings-patches">Automatic Patches</label> <label class="header" data-string="settings-patches"></label>
<input class="tgl tgl-light left" id="patches" type="checkbox" /> <input id="patches" class="tgl tgl-light left" data-setting="automaticPatches" type="checkbox" />
<label class="tgl-btn left" for="patches"></label> <label class="tgl-btn left" for="patches"></label>
<p class="description"> <p class="description" data-string="settings-patches-desk"></p>
Fetches automatic patches that are distributed if release turns out to have bugs after release. Usually
you don't have to keep this enabled, unless notified in support Discord.
</p>
</div> </div>
<br /> <br />
<div class="switch acWebsocket"> <div class="switch acWebsocket">
<label class="header" id="settings-invitewebsocket">Rich Presence (Experimental)</label> <label class="header" data-string="settings-invitewebsocket"></label>
<input class="tgl tgl-light left" id="websocket" type="checkbox" /> <input id="websocket" class="tgl tgl-light left" data-setting="inviteWebsocket" type="checkbox" />
<label class="tgl-btn left" for="websocket"></label> <label class="tgl-btn left" for="websocket"></label>
<p class="description"> <p class="description">
<!-- TODO add data-string -->
Uses <a target="_blank" href="https://github.com/OpenAsar/arrpc">arRPC</a> to support Discord RPC (Rich Uses <a target="_blank" href="https://github.com/OpenAsar/arrpc">arRPC</a> to support Discord RPC (Rich
Presence) with local programs on your machine. Work in progress. Presence) with local programs on your machine. Work in progress.
</p> </p>
</div> </div>
<br /> <br />
<div class="switch acMobileMode"> <div class="switch acMobileMode">
<label class="header" id="settings-mobileMode">Mobile mode</label> <label class="header" data-string="settings-mobileMode"></label>
<input class="tgl tgl-light left" id="mobile" type="checkbox" /> <input id="mobile" class="tgl tgl-light left" data-setting="mobileMode" type="checkbox" />
<label class="tgl-btn left" for="mobile"></label> <label class="tgl-btn left" for="mobile"></label>
<p class="description"> <p class="description" data-string="settings-mobileMode-desc"></p>
If you're on a device with touch-screen this feature is for you! It activates Discord's hidden mobile
mode meant for phones and tablets. Only major feature missing is voice chat support. This is ideal for
users on PinePhone and similar.
</p>
</div> </div>
<br /> <br />
<div class="switch acAltPaste"> <div class="switch acAltPaste">
<label class="header" id="settings-alternativePaste">Alternative paste</label> <label class="header" data-string="settings-altPaste"></label>
<input class="tgl tgl-light left" id="alternativePaste" type="checkbox" /> <input id="alternativePaste" class="tgl tgl-light left" data-setting="alternativePaste" type="checkbox" />
<label class="tgl-btn left" for="alternativePaste"></label> <label class="tgl-btn left" for="alternativePaste"></label>
<p class="description"> <p class="description" data-string="settings-altPaste-desc"></p>
If you're on Gnome on Linux or just simply can't paste images copied from other messages, then this is
for you. This enables alternative module for pasting images. Only enable this when you're experiencing
issues.
</p>
</div> </div>
<br /> <br />
<div class="switch acChannel"> <div class="switch acChannel">
<select name="channel" id="channel" class="left dropdown"> <select name="channel" data-setting="channel" class="left dropdown">
<option value="stable">Stable</option> <option value="stable" selected>Stable</option>
<option value="canary">Canary</option> <option value="canary">Canary</option>
<option value="ptb">PTB</option> <option value="ptb">PTB</option>
<option value="hummus">Hummus (Experimental)</option> <option value="hummus" data-string="settings-channel-hummus"></option>
</select> </select>
<div> <div>
<p class="header" id="settings-channel">Discord channel</p> <p class="header" data-string="settings-channel"></p>
<p class="description"> <div class="description">
You can use this setting to change current instance of Discord: <p data-string="settings-channel-desc1"></p>
<b>Stable</b> - <span data-string="settings-channel-desc2"></span>
<br /> <br />
<b>Stable</b> - you're probably most familiar with this one. It's the one you see in default Discord <b>Canary</b> - <span data-string="settings-channel-desc3"></span>
client!
<br /> <br />
<b>Canary</b> - this is alpha test release of Discord. By using it you gain access to the newest <b>PTB</b> -
features and fixes. <span data-string="settings-channel-desc4"></span>
<br /> <br />
<b>PTB</b> - public test build. Receives features earlier than stable but is a bit older than <b>Hummus</b> -<span data-string="settings-channel-desc5"></span>
Canary. </div>
<br />
<b>Hummus</b> - unofficial instance of Discord that takes you back to 2016! Only client mod
available to run alongside with it is Cordwood. It's run by community, so you take all the risk by
using it.
</p>
</div> </div>
</div> </div>
<br /> <br />
<div class="switch acClientMod"> <div class="switch acClientMod">
<select name="mod" id="mod" class="left dropdown"> <select name="mod" data-setting="mods" class="left dropdown">
<option value="none" data-string="settings-none" selected></option>
<option value="vencord">Vencord</option> <option value="vencord">Vencord</option>
<option value="shelter">Shelter</option> <option value="shelter">Shelter</option>
<option value="none">None</option>
</select> </select>
<p class="header" id="settings-mod">Client mod</p>
<p class="description"> <p class="header" data-string="settings-mod"></p>
Client mods are programs that allow you customize your Discord experience. They can change appearance of <div class="description">
the client, modify behaviours or add new features! <p data-string="settings-mod-desc1"></p>
<b>Vencord</b> - <span data-string="settings-mod-vencord"></span>
<br /> <br />
<b>Vencord</b> - lightweight, and easy to use client mod. Features a built-in store for plugins. <b>Shelter</b> - <span data-string="settings-mod-shelter"></span>
<br /> </div>
<b>Shelter</b> - is a new generation client mod built to be essentially bulletproof.
</p>
</div> </div>
<br /> <br />
<div class="switch acPrfmMode"> <div class="switch acPrfmMode">
<select name="prfmMode" id="prfmMode" class="left dropdown"> <select name="prfmMode" data-setting="performanceMode" class="left dropdown">
<option value="performance">Performance</option> <option value="none" data-string="settings-none" selected></option>
<option value="battery">Battery</option> <option value="performance" data-string="settings-prfmMode-performance"></option>
<option value="none">None</option> <option value="battery" data-string="settings-prfmMode-battery"></option>
</select> </select>
<p class="header" id="settings-prfmMode">Performance mode</p>
<p class="description"> <p class="header" data-string="settings-prfmMode"></p>
Performance mode is an experimental function that may either increase responsiveness and performance of <p class="description" data-string="settings-prfmMode-desc"></p>
ArmCord or... decrease it. Please try every option and see which fits you the best.
</p>
</div> </div>
<br /> <br />
<div class="switch acTray"> <div class="switch acTray">
<select name="trayIcon" id="trayIcon" class="left dropdown"> <select name="trayIcon" data-setting="trayIcon" class="left dropdown">
<optgroup label="- Discord -"> <optgroup label="- Discord -">
<option value="default">Dynamic</option> <option data-string="settings-trayIcon-dynamic" value="default" selected></option>
<option value="dsc-tray">Discord Icon</option> <option data-string="settings-trayIcon-normal" value="dsc-tray"></option>
<option value="clsc-dsc-tray">Classic Discord Icon</option> <option data-string="settings-trayIcon-normal" value="clsc-dsc-tray"></option>
</optgroup> </optgroup>
<optgroup label="- ArmCord -"> <optgroup label="- ArmCord -">
<option value="ac_plug_colored">Colored Plug</option> <option data-string="settings-trayIcon-colored-plug" value="ac_plug_colored"></option>
<option value="ac_white_plug">White Plug</option> <option data-string="settings-trayIcon-white-plug" value="ac_white_plug"></option>
<option value="ac_white_plug_hollow">White Plug Alt</option> <option data-string="settings-trayIcon-white-plug-alt" value="ac_white_plug_hollow"></option>
<option value="ac_black_plug">Black Plug</option> <option data-string="settings-trayIcon-black-plug" value="ac_black_plug"></option>
<option value="ac_black_plug_hollow">Black Plug Alt</option> <option data-string="settings-trayIcon-black-plug-alt" value="ac_black_plug_hollow"></option>
</optgroup> </optgroup>
</select> </select>
<p class="header" id="settings-trayIcon">Tray icon</p>
<p class="description">Set the icon which will appear in tray menu.</p> <p class="header" data-string="settings-trayIcon"></p>
<p class="description" data-string="settings-trayIcon-desc"></p>
</div> </div>
<br /> <br />
<br /> <br />
<div class="switch acAdvSettings"> <div class="switch acAdvSettings">
<h1 class="center advancedText">⚠️ Advanced User Zone ⚠️</h1> <h1 data-string="settings-advanced" class="center advancedText"></h1>
<br /> <br />
<br /> <br />
<label class="header" id="settings-skipSplash">Skip Splash Screen (Experimental)</label>
<input class="tgl tgl-light left" id="skipSplash" type="checkbox" /> <div>
<label class="tgl-btn left" for="skipSplash"></label> <label class="header" data-string="settings-skipSplash"></label>
<p class="description">Skips ArmCord splash screen when you start up the app.</p> <input id="skipSplash" class="tgl tgl-light left" data-setting="skipSplash" type="checkbox" />
<label class="tgl-btn left" for="skipSplash"></label>
<p data-string="settings-skipSplash-desc" class="description"></p>
</div>
<br /> <br />
<button id="settings-pluginsFolder" class="center">Open Plugins Folder</button>
<button data-string="settings-pluginsFolder" data-open="Plugins" class="center"></button>
<br /> <br />
<button id="settings-themesFolder" class="center">Open Themes Folder</button> <button data-string="settings-themesFolder" data-open="Themes" class="center"></button>
<br /> <br />
<button id="settings-storageFolder" class="center">Open Storage Folder</button> <button data-string="settings-storageFolder" data-open="Storage" class="center"></button>
<br /> <br />
<button id="settings-copyDebugInfo" class="center">Copy Debug Info</button> <button
data-string="settings-copyDebugInfo"
id="settings-copyDebugInfo"
class="center"
onclick="settings.copyDebugInfo()"
></button>
</div> </div>
</body> </body>
<script> <script>
async function loadLang() { document.querySelectorAll("[data-string]").forEach(async (el) => {
document.getElementById("settings-restart").innerHTML = await settings.getLang("settings-restart"); el.textContent = await settings.getLang(el.dataset.string);
document.getElementById("settings-save").innerHTML = await settings.getLang("settings-save"); });
document.getElementById("settings-mod").innerHTML = await settings.getLang("settings-mod");
document.getElementById("settings-channel").innerHTML = await settings.getLang("settings-channel"); const elements = document.querySelectorAll("[data-setting]");
document.getElementById("settings-invitewebsocket").innerHTML = await settings.getLang( elements.forEach(async (e) => {
"settings-invitewebsocket" const value = await settings.get(e.dataset.setting);
if (e.tagName == "SELECT") e.value = value;
else e.checked = value;
});
function saveSettings() {
const elements = Array.from(document.querySelectorAll("[data-setting]"));
const obj = Object.fromEntries(
elements.map((e) => [e.dataset.setting, e.tagName === "SELECT" ? e.value : e.checked])
); );
document.getElementById("settings-patches").innerHTML = await settings.getLang("settings-patches");
document.getElementById("settings-tray").innerHTML = await settings.getLang("settings-tray"); obj.doneSetup = true;
document.getElementById("settings-mobileMode").innerHTML = await settings.getLang("settings-mobileMode"); settings.save(obj);
document.getElementById("settings-theme").innerHTML = await settings.getLang("settings-theme");
//select stuff const doRestart = confirm(`Your settings have been saved!
document.getElementById("mod").options[3].text = await settings.getLang("settings-none"); Some changes may require the app to restart before taking effect, would you like to do so now?`);
document.getElementById("prfmMode").options[2].text = await settings.getLang("settings-none"); if (doRestart) settings.restart();
document.getElementById("prfmMode").options[1].text = await settings.getLang("settings-prfmMode-battery");
document.getElementById("prfmMode").options[0].text = await settings.getLang(
"settings-prfmMode-performance"
);
document.getElementById("theme").options[1].text = await settings.getLang("settings-theme-native");
document.getElementById("theme").options[0].text = await settings.getLang("settings-theme-default");
} }
loadLang();
</script> document.querySelectorAll("[data-open]").forEach((e) => {
<script> e.addEventListener("click", settings[`open${e.dataset.open}Folder`]);
async function loadSettings() {
document.getElementById("csp").checked = await settings.get("armcordCSP");
document.getElementById("tray").checked = await settings.get("minimizeToTray");
document.getElementById("websocket").checked = await settings.get("inviteWebsocket");
document.getElementById("alternativePaste").checked = await settings.get("alternativePaste");
document.getElementById("skipSplash").checked = await settings.get("skipSplash");
document.getElementById("mobile").checked = await settings.get("mobileMode");
document.getElementById("patches").value = await settings.get("automaticPatches");
document.getElementById("mod").value = await settings.get("mods");
document.getElementById("channel").value = await settings.get("channel");
document.getElementById("theme").value = await settings.get("windowStyle");
document.getElementById("prfmMode").value = await settings.get("performanceMode");
document.getElementById("trayIcon").value = await settings.get("trayIcon");
}
loadSettings();
document.getElementById("settings-save").addEventListener("click", function () {
settings.save({
windowStyle: document.getElementById("theme").value,
channel: document.getElementById("channel").value,
armcordCSP: document.getElementById("csp").checked,
minimizeToTray: document.getElementById("tray").checked,
alternativePaste: document.getElementById("alternativePaste").checked,
skipSplash: document.getElementById("skipSplash").checked,
automaticPatches: document.getElementById("patches").checked,
mods: document.getElementById("mod").value,
mobileMode: document.getElementById("mobile").checked,
inviteWebsocket: document.getElementById("websocket").checked,
performanceMode: document.getElementById("prfmMode").value,
trayIcon: document.getElementById("trayIcon").value,
doneSetup: true
});
if (
confirm(`Your settings have been saved!
Some changes may require the app to restart before taking effect, would you like to do so now?`) == true
) {
settings.restart();
}
});
document.getElementById("settings-restart").addEventListener("click", function () {
settings.restart();
});
document.getElementById("settings-pluginsFolder").addEventListener("click", function () {
settings.openPluginsFolder();
});
document.getElementById("settings-themesFolder").addEventListener("click", function () {
settings.openThemesFolder();
});
document.getElementById("settings-storageFolder").addEventListener("click", function () {
settings.openStorageFolder();
});
document.getElementById("settings-copyDebugInfo").addEventListener("click", function () {
settings.copyDebugInfo();
}); });
</script> </script>
</html> </html>