armcord/src/settings/settings.html
KayoticCarnige f57fe11769
A few things (#199)
* 2 new things (Read desc.)

- Cleaned up ASAR packaging, ignoring unneeded files for building
- Moved install location for Windows users ("AppData\Local\Programs" -> "AppData\Local"

* 3 things (Read desc.)

- Updated things related to Hummus (Hummus settings don't save nor load in it's respective settings window yet, idk why)
- Added check for package version (ArmCord's internal version)
- Made check for Kernel mod a bit cleaner, it still uses the same jank method

* 3 things

- Made macOS titlebar more accurate to Discord
- Added "unFocused" class when window isn't focused
- Added option to uninstall Husky hook for Windows users with reminder to run format script before committing

* Resolved a dumb issue

My dumbass not knowing the "echo" command existed smh

* Made "precommit-fix" warning more noticable

* Whoops

* Fixed a CSS bug

Discord updates are gonna hate us, huh?

* 4 things (Formatted)

- Updated coding for getting the current version
- Updated some context menu and tray stuff
- Added current version to the title of the settings window
- Added the ability to restart the app within the settings

* A few things

- Updated tray menu to include the tray icon infront of the ArmCord version
- Updated MacOS titlebar to not be broken in setup
- Polished settings menu a bit
- Polished the Discord tray icon
- Added the Classic Discord icon as tray icon option
2022-09-25 20:30:09 +02:00

277 lines
15 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
@import url("../content/css/settings.css");
</style>
</head>
<body>
<div class="saveBar">
<button id="settings-save" class="center">Save Settings</button>
</div>
<div class="restartBar">
<button id="settings-restart" class="center">Restart App</button>
</div>
<div class="switch acTheme">
<select name="theme" id="theme" class="left dropdown">
<option value="default">Default</option>
<option value="native">Native</option>
</select>
<p class="header" id="settings-theme">ArmCord theme</p>
<p class="description">
ArmCord "themes" manage apps behaviour and looks.
<br />
<b>Default</b> - this is how ArmCord looks when you first launch it. It includes recreation of Discord's
custom titlebar and ArmCord specific styles injected into Discord.
<br />
<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>
<br />
<div class="switch acCSP">
<label class="header">ArmCord CSP</label>
<input class="tgl tgl-light left" id="csp" type="checkbox" />
<label class="tgl-btn left" for="csp"></label>
<p class="description">
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>
<br />
<div class="switch acTray">
<label class="header" id="settings-tray">Minimize to tray</label>
<input class="tgl tgl-light left" id="tray" type="checkbox" />
<label class="tgl-btn left" for="tray"></label>
<p class="description">
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>
<br />
<div class="switch acPatches">
<label class="header" id="settings-patches">Automatic Patches</label>
<input class="tgl tgl-light left" id="patches" type="checkbox" />
<label class="tgl-btn left" for="patches"></label>
<p class="description">
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>
<br />
<div class="switch acWebsocket">
<label class="header" id="settings-invitewebsocket">Invite Websocket</label>
<input class="tgl tgl-light left" id="websocket" type="checkbox" />
<label class="tgl-btn left" for="websocket"></label>
<p class="description">
When enabled ArmCord will support Discord.gg links which means that if you open an invite link in your
browser, ArmCord will automatically accept the invite. Can be unresponsive at times.
</p>
</div>
<br />
<div class="switch acMobileMode">
<label class="header" id="settings-mobileMode">Mobile mode</label>
<input class="tgl tgl-light left" id="mobile" type="checkbox" />
<label class="tgl-btn left" for="mobile"></label>
<p class="description">
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>
<br />
<div class="switch acAltPaste">
<label class="header" id="settings-alternativePaste">Alternative paste</label>
<input class="tgl tgl-light left" id="alternativePaste" type="checkbox" />
<label class="tgl-btn left" for="alternativePaste"></label>
<p class="description">
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>
<br />
<div class="switch acChannel">
<select name="channel" id="channel" class="left dropdown">
<option value="stable">Stable</option>
<option value="canary">Canary</option>
<option value="ptb">PTB</option>
<option value="hummus">Hummus (Experimental)</option>
</select>
<div>
<p class="header" id="settings-channel">Discord channel</p>
<p class="description">
You can use this setting to change current instance of Discord:
<br />
<b>Stable</b> - you're probably most familiar with this one. It's the one you see in default Discord
client!
<br />
<b>Canary</b> - this is alpha test release of Discord. By using it you gain access to the newest
features and fixes.
<br />
<b>PTB</b> - public test build. Receives features earlier than stable but is a bit older than
Canary.
<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>
<br />
<div class="switch acClientMod">
<select name="mod" id="mod" class="left dropdown">
<option value="cumcord">Cumcord</option>
<option value="goosemod">GooseMod</option>
<option value="flicker">Flicker</option>
<option value="none">None</option>
</select>
<p class="header" id="settings-mod">Client mod</p>
<p class="description">
Client mods are programs that allow you customize your Discord experience. They can change appearance of
the client, modify behaviours or add new features!
<br />
<b>Cumcord</b> - focuses on making the Discord plugin development experience easier. Minimal and
lightweight.
<br />
<b>GooseMod</b> - light, secure, and easy to use, with out of the box experience. Features a built-in
store for plugins.
<br />
<b>Flicker</b> - heavily work in progress, doesn't have a working UI.
</p>
</div>
<br />
<div class="switch acPrfmMode">
<select name="prfmMode" id="prfmMode" class="left dropdown">
<option value="performance">Performance</option>
<option value="battery">Battery</option>
<option value="none">None</option>
</select>
<p class="header" id="settings-prfmMode">Performance mode</p>
<p class="description">
Performance mode is an experimental function that may either increase responsiveness and performance of
ArmCord or... decrease it. Please try every option and see which fits you the best.
</p>
</div>
<br />
<div class="switch acTray">
<select name="trayIcon" id="trayIcon" class="left dropdown">
<optgroup label="- Discord -">
<option value="default">Dynamic</option>
<option value="dsc-tray">Discord Icon</option>
<option value="clsc-dsc-tray">Classic Discord Icon</option>
</optgroup>
<optgroup label="- ArmCord -">
<option value="ac_plug_colored">Colored Plug</option>
<option value="ac_white_plug">White Plug</option>
<option value="ac_white_plug_hollow">White Plug Alt</option>
<option value="ac_black_plug">Black Plug</option>
<option value="ac_black_plug_hollow">Black Plug Alt</option>
</optgroup>
</select>
<p class="header" id="settings-trayIcon">Tray icon</p>
<p class="description">Set the icon which will appear in tray menu.</p>
</div>
<br />
<br />
<div class="switch acAdvSettings">
<h1 class="center advancedText">⚠️ Advanced User Zone ⚠️</h1>
<br>
<br>
<label class="header" id="settings-skipSplash">Skip Splash Screen (Experimental)</label>
<input class="tgl tgl-light left" id="skipSplash" type="checkbox" />
<label class="tgl-btn left" for="skipSplash"></label>
<p class="description">Skips ArmCord splash screen when you start up the app.</p>
<br />
<button id="settings-pluginsFolder" class="center">Open Plugins Folder</button>
<br />
<button id="settings-themesFolder" class="center">Open Themes Folder</button>
<br />
<button id="settings-storageFolder" class="center">Open Storage Folder</button>
<br />
<button id="settings-copyDebugInfo" class="center">Copy Debug Info</button>
</div>
</body>
<script>
async function loadLang() {
document.getElementById("settings-restart").innerHTML = await settings.getLang("settings-restart");
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");
document.getElementById("settings-invitewebsocket").innerHTML = await settings.getLang(
"settings-invitewebsocket"
);
document.getElementById("settings-patches").innerHTML = await settings.getLang("settings-patches");
document.getElementById("settings-tray").innerHTML = await settings.getLang("settings-tray");
document.getElementById("settings-mobileMode").innerHTML = await settings.getLang("settings-mobileMode");
document.getElementById("settings-theme").innerHTML = await settings.getLang("settings-theme");
//select stuff
document.getElementById("mod").options[3].text = await settings.getLang("settings-none");
document.getElementById("prfmMode").options[2].text = await settings.getLang("settings-none");
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>
<script>
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>
</html>