Added directory-selector component

Made prefix folder selection design
This commit is contained in:
Observer KRypt0n_ 2021-11-28 22:07:08 +02:00
parent 89c3968513
commit cd49a5938e
No known key found for this signature in database
GPG key ID: DC5D4EC1303465DA
3 changed files with 65 additions and 11 deletions

View file

@ -130,15 +130,22 @@
</div>
</div>
<br>
<br><br>
<div id="prefixloc">
<span>Prefix: </span>
<span id="currentprefix">empty</span>
<div class="directory-selector" id="prefix">
<span>Prefix</span>
<button class="button" id="prefixdir" i18id="ChangePrefix">Change Prefix</button>&nbsp;&nbsp;&nbsp;
<button class="button" id="defprefix" i18id="DefPrefix">Reset</button>
<input readonly>
<div>
<button class="button hint--top hint--small" data-hint="Select dir" id="choose-location">
<svg width="21px" height="21px" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="translate(3 4)"><path d="m.5 1.5v9c0 1.1045695.8954305 2 2 2h10c1.1045695 0 2-.8954305 2-2v-6.00280762c.0007656-1.05436179-.8150774-1.91816512-1.8499357-1.99451426l-.1500643-.00468356-5 .00200544-2-2h-4c-.55228475 0-1 .44771525-1 1z"/><path d="m.5 2.5h7"/></g></svg>
</button>
<button class="button hint--top hint--small" data-hint="Reset dir" id="reset-location">
<svg width="15px" height="15px" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.85355 2.14645C5.04882 2.34171 5.04882 2.65829 4.85355 2.85355L3.70711 4H9C11.4853 4 13.5 6.01472 13.5 8.5C13.5 10.9853 11.4853 13 9 13H5C4.72386 13 4.5 12.7761 4.5 12.5C4.5 12.2239 4.72386 12 5 12H9C10.933 12 12.5 10.433 12.5 8.5C12.5 6.567 10.933 5 9 5H3.70711L4.85355 6.14645C5.04882 6.34171 5.04882 6.65829 4.85355 6.85355C4.65829 7.04882 4.34171 7.04882 4.14645 6.85355L2.14645 4.85355C1.95118 4.65829 1.95118 4.34171 2.14645 4.14645L4.14645 2.14645C4.34171 1.95118 4.65829 1.95118 4.85355 2.14645Z" fill="currentColor"/></svg>
</button>
</div>
</div>
<br><br>

View file

@ -12,6 +12,53 @@
p, span, div
color: map.get($theme-map, "text")
/* Directory selector
.directory-selector
display: inline-flex
width: calc(100% - 28px)
border-radius: 16px
padding: 8px
background-color: map.get($theme-map, "background2")
> span
align-self: center
margin: 0 12px
> input
width: 100%
height: 24px
align-self: center
background-color: transparent
font-size: 15px
color: map.get($theme-map, "text")
border: unset
outline: none
border-bottom: 1px solid map.get($theme-map, "primary")
> div
width: 120px
margin-left: 8px
button
padding: 4px 8px
&:nth-child(1) svg
width: 20px
height: 20px
&:nth-child(2) svg
width: 18px
height: 18px
&:hover
background-color: map.get($theme-map, "background1") !important
/* Editable list of properties */
.properties-list

View file

@ -58,17 +58,17 @@ $(() => {
* Prefix
*/
$('#prefixloc #currentprefix').text(LauncherLib.getConfig('prefix'));
$('#prefix input').val(constants.prefixDir.get());
ipcRenderer.on('prefix-changed', () => {
$('#prefixloc #currentprefix').text(LauncherLib.getConfig('prefix'));
$('#prefix input').val(constants.prefixDir.get());
});
$('#prefixloc #prefixdir').on('click', () => {
$('#prefix #choose-location').on('click', () => {
ipcRenderer.send('prefix-select');
});
$('#prefixloc #defprefix').on('click', () => {
$('#prefix #reset-location').on('click', () => {
ipcRenderer.send('prefix-reset');
});