Add select button to JVM location

Closes ##216

README.md

@@ -32,6 +32,9 @@ this project entirely or partially for free and even commercially. However, plea
 
 Do the above and share your source code with everyone; just like we do.
 
+## Icons
+We use [Clarity Line Icons](https://www.svgrepo.com/collection/clarity-line-icons/) for this project.
+
 ## Compile it yourself!
 LiquidLauncher is using Tauri and is written in the programming language Rust, so make sure that it is installed properly. Instructions can be found on [Rust's website](https://www.rust-lang.org/learn/get-started). It also requires NodeJS and yarn.
 1. Clone the repository using `git clone --recurse-submodules https://github.com/CCBlueX/LiquidLauncher`. 

src/lib/main/MainScreen.svelte

@@ -9,7 +9,6 @@
     import SelectSetting from "../settings/SelectSetting.svelte";
     import SettingsContainer from "../settings/SettingsContainer.svelte";
     import SettingWrapper from "../settings/SettingWrapper.svelte";
-    import TextSetting from "../settings/TextSetting.svelte";
     import ToggleSetting from "../settings/ToggleSetting.svelte";
     import Account from "./Account.svelte";
     import ContentWrapper from "./ContentWrapper.svelte";
@@ -21,7 +20,8 @@
     import TextStatus from "./statusbar/TextStatus.svelte";
     import { invoke } from "@tauri-apps/api/tauri";
     import { listen } from "@tauri-apps/api/event";
-    import DirectorySelector from "../settings/DirectorySelector.svelte";
+    import DirectorySelectorSetting from "../settings/DirectorySelectorSetting.svelte";
+    import FileSelectorSetting from "../settings/FileSelectorSetting.svelte";
 
     export let options;
 
@@ -44,6 +44,8 @@
     let progressBarProgress = 0;
     let progressBarLabel = "";
 
+    let javaWrapperExecutableName = "";
+
     listen("process-output", event => {
         log = [...log, event.payload];
     });
@@ -237,12 +239,12 @@
 
 {#if settingsShown}
     <SettingsContainer title="Settings" on:hideSettings={hideSettings}>
-        <TextSetting title="JVM Location" placeholder="Internal" bind:value={options.customJavaPath} />
+        <FileSelectorSetting title="JVM Location" placeholder="Internal" bind:value={options.customJavaPath} filters={[{ name: "javaw", extensions: [] }]} windowTitle="Select custom Java wrapper" />
         <ToggleSetting title="Keep launcher running" bind:value={options.keepLauncherOpen} />
         <RangeSetting title="Memory" min={20} max={100} bind:value={options.memoryPercentage} valueSuffix="%" step={1} />
         <RangeSetting title="Concurrent Downloads" min={1} max={50} bind:value={options.concurrentDownloads} valueSuffix="connections" step={1} />
         <ButtonSetting text="Logout" on:click={() => dispatch("logout")} color="#4677FF" />
-        <DirectorySelector title="Data Location" placeholder={dataFolderPath} bind:value={options.customDataPath} />
+        <DirectorySelectorSetting title="Data Location" placeholder={dataFolderPath} bind:value={options.customDataPath} windowTitle="Select custom data directory" />
         <ButtonSetting text="Clear data" on:click={clearData} color="#B83529" />
     </SettingsContainer>
 {/if}

src/lib/settings/DirectorySelector.svelte → src/lib/settings/DirectorySelectorSetting.svelte

@@ -3,16 +3,16 @@
     import { open as shellOpen } from "@tauri-apps/api/shell";
 
     export let title;
+    export let windowTitle;
     export let placeholder;
     export let value;
 
-    console.log(placeholder);
-
     async function handleDirectorySelect(e) {
         const selected = await dialogOpen({
             directory: true,
             multiple: false,
             defaultPath: value || placeholder,
+            title: windowTitle,
         });
 
         if (selected) {
@@ -25,7 +25,7 @@
     }
 </script>
 
-<div class="text-setting">
+<div class="directory-selector-setting">
     <div class="title">{title}</div>
     <div class="wrapper">
         <input class="input" type="text" {placeholder} bind:value={value} />

src/lib/settings/FileSelectorSetting.svelte

@@ -0,0 +1,69 @@
+<script>
+    import { open as dialogOpen } from "@tauri-apps/api/dialog";
+
+    export let title;
+    export let placeholder;
+    export let value;
+    export let filters;
+    export let windowTitle;
+
+    async function handleFileSelect(e) {
+        const selected = await dialogOpen({
+            directory: false,
+            multiple: false,
+            filters,
+            defaultPath: value || placeholder,
+            title: windowTitle,
+        });
+
+        if (selected) {
+            value = selected;
+        }
+    }
+</script>
+
+<div class="file-selector-setting">
+    <div class="title">{title}</div>
+    <div class="wrapper">
+        <input class="input" type="text" {placeholder} bind:value={value} />
+        <button type="button" class="button-file" title="Select file" on:click={handleFileSelect}>
+            <img src="img/icon/icon-file-choose.svg" alt="choose">
+        </button>
+    </div>
+</div>
+
+<style>
+    .title {
+        color: white;
+        margin-bottom: 5px;
+    }
+
+    .input {
+        width: 100%;
+        background-color: rgba(0, 0, 0, .26);
+        border: none;
+        border-bottom: solid 1px #4677FF;
+        color: white;
+        font-family: "Roboto", sans-serif;
+        padding: 5px;
+        border-radius: 3px;
+    }
+
+    .wrapper {
+        display: flex;
+        column-gap: 10px;
+    }
+
+    .button-file {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-items: center;
+        background-color: transparent;
+        border: none;
+    }
+
+    .button-file img {
+        height: 20px;
+    }
+</style>