Jonttu/HeliosLauncher
1
0
Fork 1
mirror of https://github.com/dscalzi/HeliosLauncher.git synced 2024-12-22 19:52:14 -08:00
Code Issues Projects Releases Wiki Activity

Add Microsoft login button to settings UI.

Browse Source
This commit is contained in:
Daniel Scalzi 2022-02-06 18:59:46 -05:00
parent ad47617cd0
commit 63d15b024e
No known key found for this signature in database
GPG Key ID: 9E3E2AFE45328AA5
5 changed files with 53 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
app/assets/css/launcher.css
View File

@ -1269,21 +1269,34 @@ input:checked + .toggleSwitchSlider:before {
* Settings View (Account Tab) * Settings View (Account Tab)
* * */ * * */
#settingsAddAuthAccountButtonContainer {
display: flex;
width: 75%;
column-gap: 10px;
}
.settingsAddAuthAccountContainer {
width: 100%;
}
/* Add account button styles. */ /* Add account button styles. */
#settingsAddAccount { .settingsAddAuthAccount {
background: rgba(0, 0, 0, 0.25); background: rgba(0, 0, 0, 0.25);
border: 1px solid rgba(126, 126, 126, 0.57); border: 1px solid rgba(126, 126, 126, 0.57);
border-radius: 3px; border-radius: 3px;
height: 50px; height: 50px;
width: 75%; width: 100%;
text-align: left; text-align: left;
padding: 0px 50px; padding: 0px 25px;
cursor: pointer; cursor: pointer;
outline: none; outline: none;
transition: 0.25s ease; transition: 0.25s ease;
display: flex;
align-items: center;
column-gap: 5px;
} }
#settingsAddAccount:hover, .settingsAddAuthAccount:hover,
#settingsAddAccount:focus { .settingsAddAuthAccount:focus {
background: rgba(54, 54, 54, 0.25); background: rgba(54, 54, 54, 0.25);
text-shadow: 0px 0px 20px white; text-shadow: 0px 0px 20px white;
} }

7
app/assets/images/icons/microsoft.svg Normal file
View File

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 23">
<path fill="#f3f3f3" d="M0 0h23v23H0z" />
<path fill="#f35325" d="M1 1h10v10H1z" />
<path fill="#81bc06" d="M12 1h10v10H12z" />
<path fill="#05a6f0" d="M1 12h10v10H1z" />
<path fill="#ffba08" d="M12 12h10v10H12z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 303 B

5
app/assets/images/icons/mojang.svg Normal file
View File

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 9.677 9.667">
<path d="M-26.332-12.098h2.715c-1.357.18-2.574 1.23-2.715 2.633z" fill="#fff" />
<path d="M2.598.022h7.07L9.665 7c-.003 1.334-1.113 2.46-2.402 2.654H0V2.542C.134 1.2 1.3.195 2.598.022z" fill="#db2331" />
<path d="M1.54 2.844c.314-.76 1.31-.46 1.954-.528.785-.083 1.503.272 2.1.758l.164-.9c.327.345.587.756.964 1.052.28.254.655-.342.86-.013.42.864.408 1.86.54 2.795l-.788-.373C6.9 4.17 5.126 3.052 3.656 3.685c-1.294.592-1.156 2.65.06 3.255 1.354.703 2.953.51 4.405.292-.07.42-.34.87-.834.816l-4.95.002c-.5.055-.886-.413-.838-.89l.04-4.315z" fill="#fff" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 664 B

2
app/assets/js/scripts/settings.js
View File

@ -315,7 +315,7 @@ settingsNavDone.onclick = () => {
*/ */
// Bind the add account button. // Bind the add account button.
document.getElementById('settingsAddAccount').onclick = (e) => { document.getElementById('settingsAddMojangAccount').onclick = (e) => {
switchView(getCurrentView(), VIEWS.login, 500, 500, () => { switchView(getCurrentView(), VIEWS.login, 500, 500, () => {
loginViewOnCancel = VIEWS.settings loginViewOnCancel = VIEWS.settings
loginViewOnSuccess = VIEWS.settings loginViewOnSuccess = VIEWS.settings

24
app/settings.ejs
View File

@ -28,11 +28,29 @@
<span class="settingsTabHeaderText">Account Settings</span> <span class="settingsTabHeaderText">Account Settings</span>
<span class="settingsTabHeaderDesc">Add new accounts or manage existing ones.</span> <span class="settingsTabHeaderDesc">Add new accounts or manage existing ones.</span>
</div> </div>
<div id="settingsAddAccountContainer"> <div id="settingsAddAuthAccountButtonContainer">
<button id="settingsAddAccount"> <div id="settingsAddMojangAccountContainer" class="settingsAddAuthAccountContainer">
<span id="settingsAddAccountText">&#43; Add Account</span> <button id="settingsAddMojangAccount" class="settingsAddAuthAccount">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 9.677 9.667">
<path d="M-26.332-12.098h2.715c-1.357.18-2.574 1.23-2.715 2.633z" fill="#fff" />
<path d="M2.598.022h7.07L9.665 7c-.003 1.334-1.113 2.46-2.402 2.654H0V2.542C.134 1.2 1.3.195 2.598.022z" fill="#db2331" />
<path d="M1.54 2.844c.314-.76 1.31-.46 1.954-.528.785-.083 1.503.272 2.1.758l.164-.9c.327.345.587.756.964 1.052.28.254.655-.342.86-.013.42.864.408 1.86.54 2.795l-.788-.373C6.9 4.17 5.126 3.052 3.656 3.685c-1.294.592-1.156 2.65.06 3.255 1.354.703 2.953.51 4.405.292-.07.42-.34.87-.834.816l-4.95.002c-.5.055-.886-.413-.838-.89l.04-4.315z" fill="#fff" />
</svg>
<span id="settingsAddMojangAccountText" class="settingsAddAuthAccountText">&#43; Add Mojang Account</span>
</button> </button>
</div> </div>
<div id="settingsAddMicrosoftAccountContainer" class="settingsAddAuthAccountContainer">
<button id="settingsAddMicrosoftAccount" class="settingsAddAuthAccount">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 23 23">
<path fill="#f35325" d="M1 1h10v10H1z" />
<path fill="#81bc06" d="M12 1h10v10H12z" />
<path fill="#05a6f0" d="M1 12h10v10H1z" />
<path fill="#ffba08" d="M12 12h10v10H12z" />
</svg>
<span id="settingsAddMicrosoftAccountText" class="settingsAddAuthAccountText">&#43; Add Microsoft Account</span>
</button>
</div>
</div>
<div id="settingsCurrentAccountsHeader"> <div id="settingsCurrentAccountsHeader">
<span class="settingsFieldTitle">Current Accounts</span> <span class="settingsFieldTitle">Current Accounts</span>
</div> </div>