Redesign settings

This commit is contained in:
smartfridge 2022-07-14 19:46:01 +02:00
parent c8e6855a02
commit a1f91d4d89
4 changed files with 2265 additions and 15 deletions

2179
pnpm-lock.yaml Normal file

File diff suppressed because it is too large Load diff

View file

@ -66,14 +66,52 @@ body::-webkit-scrollbar-thumb {
}
.left {
float: right;
vertical-align: right !important;
}
p {
pointer-events: none;
user-select: none;
}
.switch {
vertical-align: middle;
border-radius: 10px;
background: var(--background-floating);
border: 20px;
border-color: var(--background-floating);
border-style: solid;
}
.header {
color: var(--header-primary);
font-size: 1.46em;
font-size: 1.5em;
position: relative;
bottom: 20px;
font-weight: bold;
}
.header2 {
color: var(--header-primary);
font-size: 1.5em;
position: relative;
bottom: 0px;
font-weight: bold;
}
.description2 {
position: relative;
color: white;
font-size: 1.2em;
font-weight: lighter;
bottom: 15px;
}
.description {
position: relative;
color: white;
font-size: 1.2em;
font-weight: lighter;
white-space: pre-line;
bottom: 40px;
}
.dropdown {
position: relative;
top: 40px !important;
font-size: 25px;
}
.center {
text-align: center;

View file

@ -14,8 +14,8 @@ export function createSettingsWindow() {
}
} else {
settingsWindow = new BrowserWindow({
width: 500,
height: 555,
width: 660,
height: 670,
title: "ArmCord Settings",
darkTheme: true,
frame: true,

View file

@ -10,70 +10,102 @@
<body>
<div class="switch">
<select name="theme" id="theme" class="left">
<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" are basically behaviour packs.
<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.
</p>
</div>
<br />
<div class="switch">
<label class="header">ArmCord CSP</label>
<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">
<label class="header" id="settings-tray">Minimize to tray</label>
<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">
If enabled, when you close the Discord window, ArmCord will sit back and relax in your system tray.
Otherwise it'll shutdown completely.
</p>
</div>
<br />
<div class="switch">
<label class="header" id="settings-patches">Automatic Patches</label>
<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">
<label class="header" id="settings-invitewebsocket">Invite Websocket</label>
<label class="header2" 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="description2">short description, describing this great feature</p>
</div>
<br />
<div class="switch">
<label class="header" id="settings-mobileMode">Mobile mode</label>
<label class="header2" 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="description2">short description, describing this great feature</p>
</div>
<br />
<div class="switch">
<select name="channel" id="channel" class="left">
<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">short description, describing this great feature</p>
</div>
</div>
<br />
<div class="switch">
<select name="mod" id="mod" class="left">
<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">short description, describing this great feature</p>
</div>
<br />
<div class="switch">
<select name="prfmMode" id="prfmMode" class="left">
<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">short description, describing this great feature</p>
</div>
<br />
<div class="switch">
<select name="trayIcon" id="trayIcon" class="left">
<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>
@ -82,6 +114,7 @@
<option value="ac_black_plug_hollow">Black Hollowed Icon</option>
</select>
<p class="header" id="settings-trayIcon">Tray icon:</p>
<p class="description">short description, describing this great feature</p>
</div>
<button id="settings-save" class="center">Save Settings</button>
</body>