-
Notifications
You must be signed in to change notification settings - Fork 81
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
WIP modals for smm2->smm3 user migration, first time user
- Loading branch information
Showing
6 changed files
with
290 additions
and
2 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
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,92 @@ | ||
| <script lang="ts"> | ||
| import { T } from '@tolgee/svelte'; | ||
| import { BrowserOpenURL } from '$wailsjs/runtime/runtime'; | ||
| export let parent: { onClose: () => void }; | ||
| const OpenWelcomeGuide = () => { | ||
| BrowserOpenURL('https://docs.ficsit.app/satisfactory-modding/latest/ForUsers/Welcome.html'); | ||
| }; | ||
| </script> | ||
|
|
||
| <div | ||
| style="max-height: calc(100vh - 3rem); max-width: calc(100vw - 3rem);" | ||
| class="w-[48rem] card flex flex-col gap-6" | ||
| > | ||
| <header class="card-header font-bold text-2xl text-center"> | ||
| <T defaultValue="Welcome to Satisfactory Mod Manager Version 3!" keyName="smm2_migration.title" /> | ||
| </header> | ||
| <section class="px-4"> | ||
| <p class="text-base text-center"> | ||
| <T | ||
| defaultValue="We've made a lot of improvements in this version. Here are some of the highlights:" | ||
| keyName="smm2_migration.intro" | ||
| /> | ||
| </p> | ||
| </section> | ||
| <section class="px-4 overflow-y-auto"> | ||
| <dl class="list-dl"> | ||
| <div> | ||
| <span class="badge bg-primary-800 text-lg">+</span> | ||
| <span class="flex-auto"> | ||
| <dt class="text-lg"><T defaultValue="Dedicated server management" keyName="smm2_migration.feature.servers" /></dt> | ||
| </span> | ||
| </div> | ||
| <div> | ||
| <span class="badge bg-primary-800 text-lg">+</span> | ||
| <span class="flex-auto"> | ||
| <dt class="text-lg"><T defaultValue="User interface refresh" keyName="smm2_migration.feature.ui" /></dt> | ||
| </span> | ||
| </div> | ||
| <div> | ||
| <span class="badge bg-primary-800 text-lg">+</span> | ||
| <span class="flex-auto"> | ||
| <dt class="text-lg"><T defaultValue="Translation support" keyName="smm2_migration.feature.translation" /></dt> | ||
| </span> | ||
| </div> | ||
| <div> | ||
| <span class="badge bg-primary-800 text-lg">+</span> | ||
| <span class="flex-auto"> | ||
| <dt class="text-lg"><T defaultValue="Action queueing" keyName="smm2_migration.feature.queue" /></dt> | ||
| </span> | ||
| </div> | ||
| <div> | ||
| <span class="badge bg-primary-800 text-lg">+</span> | ||
| <span class="flex-auto"> | ||
| <dt class="text-lg"><T defaultValue="Native Linux + Mac support" keyName="smm2_migration.feature.platform_support" /></dt> | ||
| </span> | ||
| </div> | ||
| <div> | ||
| <span class="badge bg-tertiary-800 text-lg">+</span> | ||
| <span class="flex-auto"> | ||
| <dt class="text-lg"><T defaultValue="Improved performance" keyName="smm2_migration.feature.performance" /></dt> | ||
| </span> | ||
| </div> | ||
| <div> | ||
| <span class="badge bg-warning-800 text-lg">⚠</span> | ||
| <span class="flex-auto"> | ||
| <dt class="text-lg"><T defaultValue="New profile format" keyName="smm2_migration.feature.profile_format" /></dt> | ||
| </span> | ||
| </div> | ||
| </dl> | ||
| </section> | ||
| <section class="px-4"> | ||
| <p class="text-base text-center"> | ||
| <button | ||
| class="btn text-primary-600 variant-ringed" | ||
| on:click={OpenWelcomeGuide} | ||
| > | ||
| <T | ||
| defaultValue="Open the SMM2 -> SMM3 Migration Guide" | ||
| keyName="smm2_migration.open_guide" | ||
| /> | ||
| </button> | ||
| </p> | ||
| </section> | ||
| <footer class="card-footer"> | ||
| <button class="btn" on:click={parent.onClose}> | ||
| <T defaultValue="Close" keyName="common.close" /> | ||
| </button> | ||
| </footer> | ||
| </div> |
109 changes: 109 additions & 0 deletions
109
frontend/src/lib/components/modals/first-time-setup/FirstTimeSetupModal.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,109 @@ | ||
| <script lang="ts"> | ||
| import { mdiTimerSandFull, mdiWeb } from '@mdi/js'; | ||
| import { SlideToggle } from '@skeletonlabs/skeleton'; | ||
| import { T } from '@tolgee/svelte'; | ||
| import LanguageSelector from './LanguageSelector.svelte'; | ||
| import SvgIcon from '$lib/components/SVGIcon.svelte'; | ||
| import { queueAutoStart } from '$lib/store/settingsStore'; | ||
| import { BrowserOpenURL } from '$wailsjs/runtime/runtime'; | ||
| export let parent: { onClose: () => void }; | ||
| const OpenWelcomeGuide = () => { | ||
| BrowserOpenURL('https://docs.ficsit.app/satisfactory-modding/latest/ForUsers/Welcome.html'); | ||
| }; | ||
| </script> | ||
|
|
||
| <div | ||
| style="max-height: calc(100vh - 3rem); max-width: calc(100vw - 3rem);" | ||
| class="w-[48rem] card flex flex-col gap-6" | ||
| > | ||
| <header class="card-header font-bold text-2xl text-center"> | ||
| <T defaultValue="Welcome to the Satisfactory Mod Manager!" keyName="first_time_setup.title" /> | ||
| </header> | ||
| <section class="px-4"> | ||
| <p class="text-base text-center"> | ||
| <T | ||
| defaultValue="Select your preferences to get started." | ||
| keyName="first_time_setup.intro" | ||
| /> | ||
| </p> | ||
| </section> | ||
| <section class="px-4 overflow-y-auto"> | ||
| <dl class="list-dl"> | ||
| <div> | ||
| <span class="badge bg-tertiary-500"> | ||
| <SvgIcon | ||
| class="h-5 w-5" | ||
| icon={mdiTimerSandFull} | ||
| /> | ||
| </span> | ||
| <span class="flex-auto"> | ||
| <dt class="text-lg"><T defaultValue="When I add or remove a mod, or switch profiles..." keyName="first_time_setup.option.queue-auto-start.title" /></dt> | ||
| <dd class="text-base"> | ||
| <span class="flex-auto"> | ||
| <SlideToggle | ||
| name="slider-queue" | ||
| active="bg-primary-600" | ||
| bind:checked={$queueAutoStart}> | ||
| <span> | ||
| {#if $queueAutoStart} | ||
| <T | ||
| defaultValue="Apply the change immediately." | ||
| keyName="first_time_setup.option.queue-auto-start.enabled" | ||
| /> | ||
| {:else} | ||
| <T | ||
| defaultValue='Wait for me to press "Apply" to apply the change.' | ||
| keyName="first_time_setup.option.queue-auto-start.enabled" | ||
| /> | ||
| {/if} | ||
| </span> | ||
| </SlideToggle> | ||
| </span> | ||
| </span> | ||
| </div> | ||
| <div> | ||
| <span class="badge bg-tertiary-500 text-lg"> | ||
| <SvgIcon | ||
| class="h-5 w-5" | ||
| icon={mdiWeb} | ||
| /> | ||
| </span> | ||
| <span class="flex-auto"> | ||
| <dt class="text-lg"><T defaultValue="Use this language where available:" keyName="first_time_setup.option.language.title" /></dt> | ||
| <dd class="text-base"> | ||
| <LanguageSelector /> | ||
| </span> | ||
| </div> | ||
| </dl> | ||
| </section> | ||
| <section class="px-4"> | ||
| <p class="text-base text-center"> | ||
| <T | ||
| defaultValue='Change these settings at any time in the "Mod Manager Settings" menu.' | ||
| keyName="first_time_setup.change_later_hint" | ||
| /> | ||
| </p> | ||
| </section> | ||
| <section class="px-4"> | ||
| <p class="text-base text-center"> | ||
| <button | ||
| class="btn text-primary-600 variant-ringed" | ||
| on:click={OpenWelcomeGuide} | ||
| > | ||
| <T | ||
| defaultValue="Open the Welcome Guide" | ||
| keyName="first_time_setup.open_welcome_guide" | ||
| /> | ||
| </button> | ||
| </p> | ||
| </section> | ||
| <footer class="card-footer"> | ||
| <button class="btn" on:click={parent.onClose}> | ||
| <T defaultValue="Close" keyName="common.close" /> | ||
| </button> | ||
| </footer> | ||
| </div> |
55 changes: 55 additions & 0 deletions
55
frontend/src/lib/components/modals/first-time-setup/LanguageSelector.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,55 @@ | ||
| <script lang="ts"> | ||
| import Select from '$lib/components/Select.svelte'; | ||
| import { i18n } from '$lib/generated'; | ||
| import { language } from '$lib/store/settingsStore'; | ||
| let languages: string[] = Object.keys(i18n); | ||
| type DropdownItem = { | ||
| value: string; | ||
| label: string; | ||
| }; | ||
| function prepLocale(locale: string) { | ||
| return { | ||
| value: locale, | ||
| label: localeName(locale), | ||
| }; | ||
| } | ||
| let dropdownItemData = languages.map(prepLocale); | ||
| function localeName(locale: string) { | ||
| if (!locale) return 'N/A'; | ||
| return new Intl.DisplayNames([locale], { type: 'language' }).of(locale) ?? `Error:${locale}`; | ||
| } | ||
| async function languageSelectChanged(selection: CustomEvent<DropdownItem>) { | ||
| $language = selection.detail.value; | ||
| } | ||
| </script> | ||
|
|
||
| <!-- TODO the formatting on this is totally botched, isn't going vertical, is starting open? --> | ||
| <Select | ||
| name="languageCombobox" | ||
| class="w-full h-15" | ||
| buttonClass="bg-surface-200-700-token px-4 text-sm" | ||
| itemActiveClass="!bg-surface-300/20" | ||
| itemClass="bg-surface-50-900-token" | ||
| items={dropdownItemData} | ||
| menuClass="bg-surface-50-900-token" | ||
|
|
||
| value={prepLocale($language) ?? 'UNSET'} | ||
| on:change={languageSelectChanged} | ||
| > | ||
| <svelte:fragment slot="item" let:item> | ||
| <span>{item.label}</span> | ||
| </svelte:fragment> | ||
| <!-- TODO: dynamic flags | ||
| <svelte:fragment slot="itemTrail" let:item> | ||
| <span slot="lead" class="h-5 w-5 block"> | ||
| {localeFlag(item.value)} | ||
| </span> | ||
| </svelte:fragment> | ||
| --> | ||
| </Select> |