mirrors/an-anime-game-launcher
1
0
Fork 0
mirror of https://github.com/an-anime-team/an-anime-game-launcher.git synced 2024-12-23 18:20:19 +03:00
Code Issues Projects Releases Packages Wiki Activity

Made checkboxes design

Browse source
This commit is contained in:
Observer KRypt0n_ 2021-10-24 11:09:43 +02:00
parent 9a309d8214
commit 127b1d128b
No known key found for this signature in database
GPG key ID: DC5D4EC1303465DA
3 changed files with 64 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
public/html/settings.html
View file

@ -56,9 +56,13 @@
<br>
<h3>Discord RPC</h3>
<div class="checkbox" id="discord-rpc">
Discord RPC
<input type="checkbox" id="drpc" name="drpc">
<div class="checkbox-mark">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="45.701px" height="45.7px" viewBox="0 0 45.701 45.7" xml:space="preserve"><g><g><path d="M20.687,38.332c-2.072,2.072-5.434,2.072-7.505,0L1.554,26.704c-2.072-2.071-2.072-5.433,0-7.504 c2.071-2.072,5.433-2.072,7.505,0l6.928,6.927c0.523,0.522,1.372,0.522,1.896,0L36.642,7.368c2.071-2.072,5.433-2.072,7.505,0 c0.995,0.995,1.554,2.345,1.554,3.752c0,1.407-0.559,2.757-1.554,3.752L20.687,38.332z"/></g></g></svg>
</div>
</div>
<br>
</div>

47
src/sass/settings.sass
View file

@ -112,4 +112,49 @@ body
background-color: #f1f4f9
font-size: 18px
cursor: pointer
cursor: pointer
.checkbox
display: inline-flex
align-items: center
font-size: larger
width: calc(100% - 24px)
height: 48px
padding: 0 12px
border-radius: 12px
cursor: pointer
&:hover
background-color: #eff2ff
.checkbox-mark
display: flex
background-color: #e1e7ff
border-radius: 16px
margin-left: auto
padding: 8px 16px
&:hover
background-color: #657ef8
svg
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
svg
height: 12px
width: 12px
.checkbox-active
background-color: #eff2ff
.checkbox-mark
background-color: #657ef8
svg
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)

15
src/ts/settings.ts
View file

@ -29,16 +29,25 @@ $(() => {
$(`.menu-item[anchor=${anchor}]`).addClass('menu-item-active');
});
$('.checkbox').on('click', (e) => {
let item = $(e.target);
while (!item.hasClass('checkbox'))
item = item.parent();
item.toggleClass('checkbox-active').trigger('classChange');
});
// Select the saved options in launcher.json on load
$(`#voice-list option[value="${Genshinlib.lang.voice}"]`).prop('selected', true);
$(`#language-list option[value="${Genshinlib.lang.launcher}"]`).prop('selected', true);
if (Genshinlib.getConfig('rpc'))
$('#drpc').prop('checked', true);
$('#discord-rpc').addClass('checkbox-active');
$('#drpc').on('change', () => {
$('#discord-rpc').on('classChange', () => {
Genshinlib.updateConfig({
rpc: $('#drpc').prop('checked')
rpc: $('#discord-rpc').hasClass('checkbox-active')
});
ipcRenderer.send('rpc-toggle');