|
1 | 1 | <script lang="ts">
|
2 |
| - import { mdiTimerSandFull, mdiWeb } from '@mdi/js'; |
| 2 | + import { mdiClock, mdiPlay, mdiTimerSandFull, mdiTimerSandPaused, mdiWatch, mdiWeb } from '@mdi/js'; |
3 | 3 | import { SlideToggle } from '@skeletonlabs/skeleton';
|
4 | 4 | import { T } from '@tolgee/svelte';
|
5 | 5 |
|
|
16 | 16 | BrowserOpenURL('https://docs.ficsit.app/satisfactory-modding/latest/ForUsers/Welcome.html');
|
17 | 17 | };
|
18 | 18 |
|
| 19 | + // Modal should be persistent when used because pressing Escape doesn't trigger this |
19 | 20 | function onClose() {
|
20 | 21 | SetNewUserSetupComplete(true);
|
21 | 22 | parent.onClose();
|
|
37 | 38 | />
|
38 | 39 | </p>
|
39 | 40 | </section>
|
40 |
| - <section class="px-4 overflow-y-auto"> |
| 41 | + <section class="px-4 overflow-y-visible"> |
41 | 42 | <ul class="list">
|
42 | 43 | <li>
|
43 | 44 | <span class="badge bg-tertiary-500">
|
44 | 45 | <SvgIcon
|
45 |
| - class="h-5 w-5" |
| 46 | + class="h-6 w-6 my-1" |
46 | 47 | icon={mdiTimerSandFull}
|
47 | 48 | />
|
48 | 49 | </span>
|
49 |
| - <span class="flex-auto"> |
| 50 | + <div class="flex-auto"> |
50 | 51 | <p class="text-lg"><T defaultValue="When I add or remove a mod, or switch profiles..." keyName="first_time_setup.option.queue-auto-start.title" /></p>
|
51 |
| - <p class="text-base"> |
52 |
| - <span class="flex-auto"> |
53 |
| - <SlideToggle |
54 |
| - name="slider-queue" |
55 |
| - active="bg-primary-600" |
56 |
| - bind:checked={$queueAutoStart}> |
57 |
| - <span> |
58 |
| - {#if $queueAutoStart} |
59 |
| - <T |
60 |
| - defaultValue="Apply the change immediately." |
61 |
| - keyName="first_time_setup.option.queue-auto-start.enabled" |
62 |
| - /> |
63 |
| - {:else} |
64 |
| - <T |
65 |
| - defaultValue='Queue the change and wait for me to press "Apply" to enact queued changes.' |
66 |
| - keyName="first_time_setup.option.queue-auto-start.enabled" |
67 |
| - /> |
68 |
| - {/if} |
69 |
| - </span> |
70 |
| - </SlideToggle> |
| 52 | + <SlideToggle |
| 53 | + name="slider-queue" |
| 54 | + class="flex-auto" |
| 55 | + active="bg-primary-600" |
| 56 | + bind:checked={$queueAutoStart}> |
| 57 | + <span> |
| 58 | + {#if $queueAutoStart} |
| 59 | + <T |
| 60 | + defaultValue="Apply the change immediately." |
| 61 | + keyName="first_time_setup.option.queue-auto-start.enabled" |
| 62 | + /> |
| 63 | + {:else} |
| 64 | + <T |
| 65 | + defaultValue='Queue the change and wait for me to press "Apply" to enact queued changes.' |
| 66 | + keyName="first_time_setup.option.queue-auto-start.disabled" |
| 67 | + /> |
| 68 | + {/if} |
71 | 69 | </span>
|
72 |
| - </span> |
| 70 | + </SlideToggle> |
| 71 | + <!-- TODO testing the button group approach --> |
| 72 | + <div class="btn-group bg-surface-200-700-token"> |
| 73 | + <button |
| 74 | + class="!btn-sm !px-4 text-lg" |
| 75 | + class:!bg-primary-900={$queueAutoStart} |
| 76 | + on:click={() => { $queueAutoStart = true; }} |
| 77 | + > |
| 78 | + <T defaultValue="Apply the change immediately." keyName="first_time_setup.option.queue-auto-start.enabled"/> |
| 79 | + <div class="grow"/> |
| 80 | + <SvgIcon |
| 81 | + class="h-5 w-5" |
| 82 | + icon={mdiPlay} /> |
| 83 | + </button> |
| 84 | + <button |
| 85 | + class="!btn-sm !px-4 text-lg" |
| 86 | + class:!bg-primary-900={!$queueAutoStart} |
| 87 | + on:click={() => { $queueAutoStart = false; }} |
| 88 | + > |
| 89 | + <T defaultValue='Queue the change and wait for me to press "Apply" to enact queued changes.' keyName="first_time_setup.option.queue-auto-start.disabled"/> |
| 90 | + <div class="grow"/> |
| 91 | + <SvgIcon |
| 92 | + class="h-5 w-5" |
| 93 | + icon={mdiClock} /> |
| 94 | + </button> |
| 95 | + </div> |
| 96 | + </div> |
73 | 97 | </li>
|
74 | 98 | <li>
|
75 | 99 | <span class="badge bg-tertiary-500 text-lg">
|
76 | 100 | <SvgIcon
|
77 |
| - class="h-5 w-5" |
| 101 | + class="h-6 w-6 my-1" |
78 | 102 | icon={mdiWeb}
|
79 | 103 | />
|
80 | 104 | </span>
|
81 |
| - <span class="w-full"> |
82 |
| - <p class="text-lg"><T defaultValue="Use this language where available:" keyName="first_time_setup.option.language.title" /></p> |
83 |
| - <p class="text-base"> |
84 |
| - <LanguageSelector /> |
85 |
| - </span> |
| 105 | + <div class="w-full"> |
| 106 | + <span class="text-lg"><T defaultValue="Use this language where available:" keyName="first_time_setup.option.language.title" /></span> |
| 107 | + <LanguageSelector /> |
86 | 108 | </li>
|
87 | 109 | </ul>
|
88 | 110 | </section>
|
|
108 | 130 | </p>
|
109 | 131 | </section>
|
110 | 132 | <footer class="card-footer">
|
111 |
| - <button class="btn" on:click={onClose}> |
112 |
| - <T defaultValue="Close" keyName="common.close" /> |
| 133 | + <button class="btn variant-ringed" on:click={onClose}> |
| 134 | + <T defaultValue="Get Started!" keyName="first_time_setup.acknowledge" /> |
113 | 135 | </button>
|
114 | 136 | </footer>
|
115 | 137 | </div>
|
0 commit comments