Add floating settings button and few new options

This commit is contained in:
smartfridge 2022-07-15 23:04:00 +02:00
parent 414c7d120f
commit 52bca257f8
5 changed files with 267 additions and 11 deletions

View File

@ -60,7 +60,6 @@ body::-webkit-scrollbar-thumb {
* {
font-family: "Whitney", sans-serif;
box-sizing: border-box;
cursor: default;
}
@ -79,6 +78,13 @@ p {
border-color: var(--background-floating);
border-style: solid;
}
.saveBar {
position: fixed;
bottom: 20px;
font-weight: bold;
z-index: 999;
font-size: 10px;
}
.header {
color: var(--header-primary);
font-size: 1.5em;
@ -118,6 +124,11 @@ p {
transform: translateX(50%);
float: right;
}
.advancedText {
color: var(--header-primary);
font-size: 1.5em;
font-weight: bold;
}
/*buttons*/
button {
background: var(--brand-experiment);
@ -244,9 +255,6 @@ select {
.acCSP {
height: 10em !important;
}
.acTray {
height: 8em !important;
}
.acPatches {
height: 10em !important;
}
@ -269,5 +277,5 @@ select {
height: 10em !important;
}
.acTray {
height: 8em !important;
height: 7em !important;
}

196
src/settings/hummus.html Normal file
View File

@ -0,0 +1,196 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>ArmCord Settings</title>
<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="switch acCSP">
<label class="header2">ArmCord CSP</label>
<input class="tgl tgl-light left" id="csp" type="checkbox" />
<label class="tgl-btn left" for="csp"></label>
<p class="description2">
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="header2" 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="description2">
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="header2" 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="description2">
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 acAltPaste">
<label class="header2" 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="description2">
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 (unofficial)</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 newest
features and fixes.
<br />
<b>PTB</b> - public test build. Gets 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! None of the client mods
bundled with ArmCord work with it. It's run by community, so you take all the risk by using it.
</p>
</div>
</div>
<br />
<div class="switch acAltPaste">
<label class="header2" id="settings-cordwood">Cordwood client mod</label>
<input class="tgl tgl-light left" id="cordwood" type="checkbox" />
<label class="tgl-btn left" for="cordwood"></label>
<p class="description2">
Client mod for Hummus that focuses on making the plugin development experience easier. Minimal, light,
and easy to use
</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">
<option value="ac_plug_colored">Default</option>
<option value="dsc-tray">Discord Icon</option>
<option value="ac_white_plug">White Icon</option>
<option value="ac_black_plug">Black Icon</option>
<option value="ac_white_plug_hollow">White Hollowed Icon</option>
<option value="ac_black_plug_hollow">Black Hollowed Icon</option>
</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 />
<h1 class="center advancedText">Advanced user zone⚠</h1>
<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>
</body>
<script>
async function loadLang() {
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("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,
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
});
});
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>

View File

@ -1,9 +1,14 @@
import {BrowserWindow, shell, ipcMain} from "electron";
import {getConfig, setConfigBulk, Settings, getLang} from "../utils";
import {BrowserWindow, shell, ipcMain, app, clipboard} from "electron";
import {getConfig, setConfigBulk, Settings, getLang, getVersion, getConfigLocation} from "../utils";
import path from "path";
import os from "os";
import fs from "fs";
var settingsWindow: BrowserWindow;
var instance: number = 0;
const userDataPath = app.getPath("userData");
const storagePath = path.join(userDataPath, "/storage/");
const themesPath = path.join(userDataPath, "/themes/");
const pluginsPath = path.join(userDataPath, "/plugins/");
export function createSettingsWindow() {
console.log("Creating a settings window.");
instance = instance + 1;
@ -28,9 +33,36 @@ export function createSettingsWindow() {
console.log(args);
setConfigBulk(args);
});
ipcMain.on("openStorageFolder", (event) => {
shell.openPath(storagePath);
});
ipcMain.on("openThemesFolder", (event) => {
shell.openPath(themesPath);
});
ipcMain.on("openPluginsFolder", (event) => {
shell.openPath(pluginsPath);
});
ipcMain.handle("getSetting", (event, toGet: string) => {
return getConfig(toGet);
});
ipcMain.on("copyDebugInfo", (event) => {
let settingsFileContent = fs.readFileSync(getConfigLocation(), "utf-8");
clipboard.writeText(
"**OS:** " +
os.platform() +
" " +
os.version() +
"\n**Architecture:** " +
os.arch() +
"\n**ArmCord version:** " +
getVersion() +
"\n**Electron version:** " +
process.versions.electron +
"\n`" +
settingsFileContent +
"`"
);
});
settingsWindow.webContents.setWindowOpenHandler(({url}) => {
shell.openExternal(url);
return {action: "deny"};

View File

@ -1,5 +1,6 @@
import {contextBridge, ipcRenderer} from "electron";
console.log("ArmCord Settings");
contextBridge.exposeInMainWorld("settings", {
save: (...args: any) => ipcRenderer.send("saveSettings", ...args),
getLang: (toGet: string) =>
@ -9,5 +10,9 @@ contextBridge.exposeInMainWorld("settings", {
get: (toGet: string) =>
ipcRenderer.invoke("getSetting", toGet).then((result) => {
return result;
}) //jank but works
}), //jank but works
openThemesFolder: () => ipcRenderer.send("openThemesFolder"),
openPluginsFolder: () => ipcRenderer.send("openPluginsFolder"),
openStorageFolder: () => ipcRenderer.send("openStorageFolder"),
copyDebugInfo: () => ipcRenderer.send("copyDebugInfo")
});

View File

@ -9,6 +9,9 @@
</head>
<body>
<div class="saveBar">
<button id="settings-save" class="center">Save Settings</button>
</div>
<div class="switch acTheme">
<select name="theme" id="theme" class="left dropdown">
<option value="default">Default</option>
@ -162,11 +165,11 @@
<p class="description">Set the icon which will appear in tray menu.</p>
</div>
<br />
<button id="settings-save" class="center">Save Settings</button>
<br />
<h1 class="center advancedText">Advanced user zone⚠</h1>
<button id="settings-pluginsFolder" class="center">Open plugins folder</button>
<br />
<button id="settings-themeFolder" class="center">Open themes folder</button>
<button id="settings-themesFolder" class="center">Open themes folder</button>
<br />
<button id="settings-storageFolder" class="center">Open storage folder</button>
<br />
@ -227,5 +230,17 @@
doneSetup: true
});
});
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>