-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: ui for setting steam install path complete
- Loading branch information
1 parent
a783ee4
commit 8be49ee
Showing
11 changed files
with
296 additions
and
39 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| <script lang="ts"> | ||
| import type { Placement } from "tippy.js"; | ||
| import IconButton from "./IconButton.svelte"; | ||
| import { dialog } from "@tauri-apps/api"; | ||
| export let label: string; | ||
| export let tooltipPosition: Placement = "top-end"; | ||
| export let width = "22px"; | ||
| export let height = "22px"; | ||
| export let onChange: (filepath: string) => void; | ||
| export let disabled = false; | ||
| export let highlight = false; | ||
| export let warn = false; | ||
| async function onClick(e: MouseEvent) { | ||
| const path = await dialog.open({ | ||
| title: "Select your steam install", | ||
| directory: true, | ||
| multiple: false | ||
| }); | ||
| if (path && path != "") onChange(path as string); | ||
| } | ||
| </script> | ||
|
|
||
| <!-- svelte-ignore a11y-click-events-have-key-events --> | ||
| <IconButton label={label} tooltipPosition={tooltipPosition} width={width} height={height} onClick={onClick} disabled={disabled} highlight={highlight} warn={warn}> | ||
| <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"> | ||
| <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --> | ||
| <path d="M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z"/> | ||
| </svg> | ||
| </IconButton> | ||
|
|
||
| <style> | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| <script lang="ts"> | ||
| import { steamInstallPath, steamPathModalClose } from "../../Stores"; | ||
| import { LogController } from "../../lib/controllers/LogController"; | ||
| import { ToastController } from "../../lib/controllers/ToastController"; | ||
| import { SettingsManager } from "../../lib/utils/SettingsManager"; | ||
| import Button from "../interactables/Button.svelte"; | ||
| import VerticalSpacer from "../spacers/VerticalSpacer.svelte"; | ||
| import ModalBody from "./modal-utils/ModalBody.svelte"; | ||
| import SettingsFilePathEntry from "./settings/SettingsFilePathEntry.svelte"; | ||
| let canSave = false; | ||
| let steamInstallLocation = $steamInstallPath; | ||
| async function saveInstallLocation() { | ||
| LogController.log("Setting Steam Install Location..."); | ||
| $steamInstallPath = steamInstallLocation; | ||
| await SettingsManager.updateSetting("steamInstallPath", steamInstallLocation); | ||
| LogController.log("Steam Install Location set."); | ||
| canSave = false; | ||
| ToastController.showSuccessToast("Steam Install Location saved!"); | ||
| await $steamPathModalClose(); | ||
| } | ||
| /** | ||
| * Function to run on steam install location change. | ||
| * @param path The updated installation path. | ||
| */ | ||
| function onInstallLocationChange(path: string): void { | ||
| steamInstallLocation = path; | ||
| canSave = true; | ||
| } | ||
| </script> | ||
|
|
||
| <ModalBody title={"Choose Your Steam Install Path"} canClose={false}> | ||
| <div class="content"> | ||
| <VerticalSpacer /> | ||
| <VerticalSpacer /> | ||
| <SettingsFilePathEntry | ||
| label="Steam Install Path" | ||
| description={`The root of your Steam installation. The default on Windows is <b>C:/Program Files (x86)/Steam</b> and <b>~/.steam/Steam</b> on Linux.`} | ||
| value={steamInstallLocation} | ||
| onChange={onInstallLocationChange} | ||
| required | ||
| /> | ||
|
|
||
| <div class="buttons"> | ||
| <Button label="Save Changes" onClick={saveInstallLocation} width="100%" disabled={!canSave} /> | ||
| </div> | ||
| </div> | ||
| </ModalBody> | ||
|
|
||
| <style> | ||
| .content { | ||
| width: 600px; | ||
| height: calc(100% - 60px); | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: flex-start; | ||
| align-items: center; | ||
| } | ||
| .buttons { | ||
| margin-top: 14px; | ||
| margin-bottom: 7px; | ||
| width: calc(100% - 14px); | ||
| display: flex; | ||
| justify-content: space-around; | ||
| justify-self: flex-end; | ||
| } | ||
| </style> |
84 changes: 84 additions & 0 deletions
84
src/components/modals/settings/SettingsFilePathEntry.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| <script lang="ts"> | ||
| import { open } from "@tauri-apps/api/shell"; | ||
| import TextInput from "../../interactables/TextInput.svelte"; | ||
| import VerticalSpacer from "../../spacers/VerticalSpacer.svelte"; | ||
| import FileButton from "../../interactables/FileButton.svelte"; | ||
| import HorizontalSpacer from "../../spacers/HorizontalSpacer.svelte"; | ||
| export let label: string; | ||
| export let description: string; | ||
| export let required: boolean = false; | ||
| export let value: string; | ||
| export let notes: string = ""; | ||
| export let onChange: (path: string) => void = () => {}; | ||
| function changeWrapper(e: Event) { | ||
| onChange((e.currentTarget as HTMLInputElement).value); | ||
| } | ||
| /** | ||
| * Handles click events to redirect to the browser. | ||
| * @param e The click event. | ||
| */ | ||
| function clickListener(e: Event) { | ||
| const origin = (e.target as Element).closest(`a`); | ||
| if (origin) { | ||
| e.preventDefault(); | ||
| const href = origin.href; | ||
| open(href); | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <div class="setting"> | ||
| <h1 class="label">{label}</h1> | ||
| <div class="inputs"> | ||
| <TextInput placeholder={"~/something/something"} onInput={changeWrapper} width="{188}" bind:value={value} /> | ||
| <HorizontalSpacer /> | ||
| <FileButton label="Select Folder" tooltipPosition={"right"} onChange={onChange} /> | ||
| </div> | ||
| <!-- svelte-ignore a11y-click-events-have-key-events --> | ||
| <div class="description" on:click={clickListener}> | ||
| <b>Usage:</b><br/> | ||
| {@html description}<br/> | ||
|
|
||
| {#if notes != ""} | ||
| <VerticalSpacer /> | ||
| <b>Notes:</b><br/> | ||
| {@html notes} | ||
| {/if} | ||
|
|
||
| <VerticalSpacer /> | ||
| <b>Required:</b> {required ? "Yes" : "No"}<br/> | ||
| </div> | ||
| </div> | ||
|
|
||
| <style> | ||
| .setting { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: flex-start; | ||
| margin: 0px 14px; | ||
| background-color: var(--background-dark); | ||
| padding: 6px; | ||
| border-radius: 4px; | ||
| } | ||
| .label { | ||
| margin-top: 0px; | ||
| font-size: 18px; | ||
| } | ||
| .inputs { | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
| .description { | ||
| line-height: 18px; | ||
| font-size: 14px; | ||
| margin: 7px 0px; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.