Skip to content

Commit 26f8a7e

Browse files
budak7273budak7273
authored
UX improvements to Manage Servers UI. (#261)
- Add headers to the subsections - Fix which subsections are scrollable - "no servers added yet" when no servers in manage existing servers - Move error message to top of picker section and make it always visible regardless of scroll position
1 parent 56a7ee7 commit 26f8a7e

File tree

2 files changed

+71
-57
lines changed

2 files changed

+71
-57
lines changed

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,7 @@ After running `wails dev`, open `http://localhost:34115/` in your browser of cho
115115

116116
## Code Signing Policy
117117

118+
<!-- markdownlint-disable -->
118119
<table>
119120
<tr>
120121
<td colspan=3>
@@ -144,3 +145,4 @@ After running `wails dev`, open `http://localhost:34115/` in your browser of cho
144145
</td>
145146
</tr>
146147
</table>
148+
<!-- markdownlint-enable -->

‎frontend/src/lib/components/modals/ServerManager.svelte‎

Lines changed: 69 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -190,7 +190,7 @@
190190
<header class="card-header font-bold text-2xl text-center">
191191
<T defaultValue="Dedicated Servers" keyName="server-manager.title" />
192192
</header>
193-
<section class="p-4 flex-auto space-y-4 overflow-y-auto flex">
193+
<section class="p-4 flex-auto space-y-4 flex">
194194
<button class="btn flex-auto h-12 text-sm variant-filled-primary" on:click={() => BrowserOpenURL('https://docs.ficsit.app/satisfactory-modding/latest/ForUsers/DedicatedServerSetup.html')}>
195195
<T defaultValue="Get help connecting to servers" keyName="server-manager.get-help" />
196196
<div class="grow" />
@@ -199,73 +199,86 @@
199199
icon={mdiWeb} />
200200
</button>
201201
</section>
202-
<section class="p-4 flex-auto space-y-4 overflow-y-auto flex">
202+
<header class="card-header font-bold text-2xl text-center">
203+
<T defaultValue="Manage Existing Servers" keyName="server-manager.existing-servers.title" />
204+
</header>
205+
<section class="p-4 flex-auto space-y-4 flex">
203206
<div class="flex-auto w-full overflow-x-auto overflow-y-auto">
204207
<table class="table">
205208
<tbody>
206-
{#each $remoteServers as remoteServer}
207-
<tr>
208-
<td class="break-all">{$installsMetadata[remoteServer]?.info?.launcher}</td>
209-
<td class="break-all">{redactRemoteURL(remoteServer)}</td>
210-
<td>
211-
{#if $installsMetadata[remoteServer]?.state === ficsitcli.InstallState.VALID}
212-
{$installsMetadata[remoteServer]?.info?.type}
213-
{:else}
214-
<Tooltip popupId={installWarningPopupId(remoteServer)}>
215-
<span class="text-base">
209+
{#if $remoteServers.length > 0}
210+
{#each $remoteServers as remoteServer}
211+
<tr>
212+
<td class="break-all">{$installsMetadata[remoteServer]?.info?.launcher}</td>
213+
<td class="break-all">{redactRemoteURL(remoteServer)}</td>
214+
<td>
215+
{#if $installsMetadata[remoteServer]?.state === ficsitcli.InstallState.VALID}
216+
{$installsMetadata[remoteServer]?.info?.type}
217+
{:else}
218+
<Tooltip popupId={installWarningPopupId(remoteServer)}>
219+
<span class="text-base">
220+
{#if $installsMetadata[remoteServer]?.state === ficsitcli.InstallState.LOADING}
221+
<T defaultValue="Loading..." keyName="server-manager.loading" />
222+
{:else if $installsMetadata[remoteServer]?.state === ficsitcli.InstallState.INVALID}
223+
<T defaultValue="SMM cannot manage this install" keyName="server-manager.invalid" />
224+
{:else}
225+
<T defaultValue="Failed to connect to server, click to retry" keyName="server-manager.failed-to-connect" />
226+
{/if}
227+
</span>
228+
</Tooltip>
229+
<div
230+
class="h-6 w-full text-sm"
231+
use:popup={installWarningPopups[remoteServer]}>
216232
{#if $installsMetadata[remoteServer]?.state === ficsitcli.InstallState.LOADING}
217-
<T defaultValue="Loading..." keyName="server-manager.loading" />
233+
<SvgIcon
234+
class="!p-0 !m-0 !w-full !h-full animate-spin text-primary-600"
235+
icon={mdiLoading} />
218236
{:else if $installsMetadata[remoteServer]?.state === ficsitcli.InstallState.INVALID}
219-
<T defaultValue="SMM cannot manage this install" keyName="server-manager.invalid" />
220-
{:else}
221-
<T defaultValue="Failed to connect to server, click to retry" keyName="server-manager.failed-to-connect" />
222-
{/if}
223-
</span>
224-
</Tooltip>
225-
<div
226-
class="h-6 w-full text-sm"
227-
use:popup={installWarningPopups[remoteServer]}>
228-
{#if $installsMetadata[remoteServer]?.state === ficsitcli.InstallState.LOADING}
229-
<SvgIcon
230-
class="!p-0 !m-0 !w-full !h-full animate-spin text-primary-600"
231-
icon={mdiLoading} />
232-
{:else if $installsMetadata[remoteServer]?.state === ficsitcli.InstallState.INVALID}
233-
<SvgIcon
234-
class="!p-0 !m-0 !w-full !h-full text-red-500"
235-
icon={mdiAlert} />
236-
{:else}
237-
<button
238-
class="btn-icon h-6 w-full"
239-
on:click={() => retryConnect(remoteServer)}>
240237
<SvgIcon
241238
class="!p-0 !m-0 !w-full !h-full text-red-500"
242239
icon={mdiAlert} />
243-
</button>
244-
{/if}
245-
</div>
246-
{/if}
247-
</td>
248-
<td>
249-
{#if $installsMetadata[remoteServer]?.info?.version}
250-
CL{$installsMetadata[remoteServer].info?.version}
251-
{/if}
252-
</td>
253-
<td>
254-
<button
255-
class="btn-icon h-5 w-full"
256-
on:click={() => removeServer(remoteServer)}>
257-
<SvgIcon
258-
class="!p-0 !m-0 !w-full !h-full hover:text-red-500"
259-
icon={mdiTrashCan}/>
260-
</button>
261-
</td>
262-
</tr>
263-
{/each}
240+
{:else}
241+
<button
242+
class="btn-icon h-6 w-full"
243+
on:click={() => retryConnect(remoteServer)}>
244+
<SvgIcon
245+
class="!p-0 !m-0 !w-full !h-full text-red-500"
246+
icon={mdiAlert} />
247+
</button>
248+
{/if}
249+
</div>
250+
{/if}
251+
</td>
252+
<td>
253+
{#if $installsMetadata[remoteServer]?.info?.version}
254+
CL{$installsMetadata[remoteServer].info?.version}
255+
{/if}
256+
</td>
257+
<td>
258+
<button
259+
class="btn-icon h-5 w-full"
260+
on:click={() => removeServer(remoteServer)}>
261+
<SvgIcon
262+
class="!p-0 !m-0 !w-full !h-full hover:text-red-500"
263+
icon={mdiTrashCan}/>
264+
</button>
265+
</td>
266+
</tr>
267+
{/each}
268+
{:else}
269+
<tr><p><T defaultValue="No servers added yet. Add one below!" keyName="server-manager.existing-servers.none-yet" /></p></tr>
270+
{/if}
264271
</tbody>
265272
</table>
266273
</div>
267274
</section>
268-
<section class="p-4 space-y-4 overflow-y-auto">
275+
<section class="px-4">
276+
<header class="card-header font-bold text-2xl text-center">
277+
<T defaultValue="Add a New Server" keyName="server-manager.new-server.title" />
278+
</header>
279+
<p class="font-mono">{err}</p>
280+
</section>
281+
<section class="p-4 overflow-y-auto">
269282
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 items-start auto-rows-[minmax(2.5rem,_max-content)]">
270283
<Select
271284
name="newServerProtocol"
@@ -386,7 +399,6 @@
386399
icon={mdiServerNetwork} />
387400
</button>
388401
</div>
389-
<p class="font-mono">{err}</p>
390402
</section>
391403
<footer class="card-footer">
392404
<button

0 commit comments

Comments
 (0)