smartfridge/armcord
1
1
Fork 0
mirror of https://github.com/smartfrigde/armcord.git synced 2024-08-14 23:56:58 +00:00
Code Issues Projects Releases Wiki Activity

Redesign settings

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2179
pnpm-lock.yaml Normal file
View file

File diff suppressed because it is too large Load diff

42
src/content/css/settings.css
View file

@ -66,14 +66,52 @@ body::-webkit-scrollbar-thumb {
} }
.left { .left {
float: right; float: right;
vertical-align: right !important; }
p {
pointer-events: none;
user-select: none;
} }
.switch { .switch {
vertical-align: middle; vertical-align: middle;
border-radius: 10px;
background: var(--background-floating);
border: 20px;
border-color: var(--background-floating);
border-style: solid;
} }
.header { .header {
color: var(--header-primary); 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 { .center {
text-align: center; text-align: center;

4
src/settings/main.ts
View file

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

55
src/settings/settings.html
View file

@ -10,70 +10,102 @@
<body> <body>
<div class="switch"> <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="default">Default</option>
<option value="native">Native</option> <option value="native">Native</option>
</select> </select>
<p class="header" id="settings-theme">ArmCord theme:</p> <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> </div>
<br /> <br />
<div class="switch"> <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" /> <input class="tgl tgl-light left" id="csp" type="checkbox" />
<label class="tgl-btn left" for="csp"></label> <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> </div>
<br /> <br />
<div class="switch"> <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" /> <input class="tgl tgl-light left" id="tray" type="checkbox" />
<label class="tgl-btn left" for="tray"></label> <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> </div>
<br /> <br />
<div class="switch"> <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" /> <input class="tgl tgl-light left" id="patches" type="checkbox" />
<label class="tgl-btn left" for="patches"></label> <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> </div>
<br /> <br />
<div class="switch"> <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" /> <input class="tgl tgl-light left" id="websocket" type="checkbox" />
<label class="tgl-btn left" for="websocket"></label> <label class="tgl-btn left" for="websocket"></label>
<p class="description2">short description, describing this great feature</p>
</div> </div>
<br /> <br />
<div class="switch"> <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" /> <input class="tgl tgl-light left" id="mobile" type="checkbox" />
<label class="tgl-btn left" for="mobile"></label> <label class="tgl-btn left" for="mobile"></label>
<p class="description2">short description, describing this great feature</p>
</div> </div>
<br />
<div class="switch"> <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="stable">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 (unofficial)</option> <option value="hummus">Hummus (unofficial)</option>
</select> </select>
<p class="header" id="settings-channel">Discord channel:</p> <div>
<p class="header" id="settings-channel">Discord channel:</p>
<p class="description">short description, describing this great feature</p>
</div>
</div> </div>
<br />
<div class="switch"> <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="cumcord">Cumcord</option>
<option value="goosemod">GooseMod</option> <option value="goosemod">GooseMod</option>
<option value="flicker">Flicker</option> <option value="flicker">Flicker</option>
<option value="none">None</option> <option value="none">None</option>
</select> </select>
<p class="header" id="settings-mod">Client mod:</p> <p class="header" id="settings-mod">Client mod:</p>
<p class="description">short description, describing this great feature</p>
</div> </div>
<br />
<div class="switch"> <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="performance">Performance</option>
<option value="battery">Battery</option> <option value="battery">Battery</option>
<option value="none">None</option> <option value="none">None</option>
</select> </select>
<p class="header" id="settings-prfmMode">Performance mode:</p> <p class="header" id="settings-prfmMode">Performance mode:</p>
<p class="description">short description, describing this great feature</p>
</div> </div>
<br />
<div class="switch"> <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="ac_plug_colored">Default</option>
<option value="dsc-tray">Discord Icon</option> <option value="dsc-tray">Discord Icon</option>
<option value="ac_white_plug">White Icon</option> <option value="ac_white_plug">White Icon</option>
@ -82,6 +114,7 @@
<option value="ac_black_plug_hollow">Black Hollowed Icon</option> <option value="ac_black_plug_hollow">Black Hollowed Icon</option>
</select> </select>
<p class="header" id="settings-trayIcon">Tray icon:</p> <p class="header" id="settings-trayIcon">Tray icon:</p>
<p class="description">short description, describing this great feature</p>
</div> </div>
<button id="settings-save" class="center">Save Settings</button> <button id="settings-save" class="center">Save Settings</button>
</body> </body>