mirror of
				https://github.com/smartfrigde/armcord.git
				synced 2024-08-14 23:56:58 +00:00 
			
		
		
		
	Redesign settings
This commit is contained in:
		
							parent
							
								
									c8e6855a02
								
							
						
					
					
						commit
						a1f91d4d89
					
				
					 4 changed files with 2265 additions and 15 deletions
				
			
		|  | @ -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; | ||||
|  |  | |||
|  | @ -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, | ||||
|  |  | |||
|  | @ -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> | ||||
|             <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> | ||||
|         <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> | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue