nwpie/reiverr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: Improved onboarding page styling and ux

Browse Source
This commit is contained in:
Aleksi Lassila
2024-06-18 19:24:51 +03:00
parent d687b33249
commit 7c31ee4ce9
3 changed files with 40 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/Button.svelte
View File

@@ -9,6 +9,7 @@
export let disabled: boolean = false;
export let focusOnMount: boolean = false;
export let focusedChild = false;
export let type: 'primary' | 'secondary' | 'primary-dark' = 'primary';
export let confirmDanger = false;
export let action: (() => Promise<any>) | null = null;
@@ -62,6 +63,7 @@
on:clickOrSelect={handleClickOrSelect}
on:enter
{focusOnMount}
{focusedChild}
>
<div
class={classNames({

44
src/lib/pages/OnboardingPage.svelte
View File

@@ -60,18 +60,18 @@
Looks like this is a new account. This setup will get you started with connecting your
services to get most out of Reiverr.
</div>
<Container direction="horizontal" class="flex space-x-4">
<Container direction="horizontal" class="flex space-x-4 *:flex-1">
<Button type="primary-dark" on:clickOrSelect={() => sessions.removeSession()}
>Log Out</Button
>
<div class="flex-1">
<Button type="primary-dark" on:clickOrSelect={() => tab.next()}>
Next
<div class="absolute inset-y-0 right-0 flex items-center justify-center">
<ArrowRight size={24} />
</div>
</Button>
</div>
<Button
focusOnMount
type="primary-dark"
on:clickOrSelect={() => tab.next()}
iconAbsolute={ArrowRight}
>
Next
</Button>
</Container>
</Tab>
@@ -97,13 +97,12 @@
{/if}
<Container direction="horizontal" class="flex space-x-4 *:flex-1 mt-4">
<Button type="primary-dark" on:clickOrSelect={() => tab.previous()}>Back</Button>
<Button type="primary-dark" on:clickOrSelect={() => tab.next()}>
<Button focusedChild type="primary-dark" on:clickOrSelect={() => tab.next()}>
{#if connected}
Next
{:else}
Skip
{/if}
<ArrowRight size={19} slot="icon-absolute" />
</Button>
</Container>
</TmdbIntegration>
@@ -160,7 +159,7 @@
<Container direction="horizontal" class="grid grid-cols-2 gap-4 mt-4">
<Button type="primary-dark" on:clickOrSelect={() => tab.previous()}>Back</Button>
{#if empty || unchanged}
<Button type="primary-dark" on:clickOrSelect={() => tab.next()}>
<Button focusedChild type="primary-dark" on:clickOrSelect={() => tab.next()}>
{empty ? 'Skip' : 'Next'}
</Button>
{:else}
@@ -233,7 +232,7 @@
<Container direction="horizontal" class="grid grid-cols-2 gap-4 mt-4">
<Button type="primary-dark" on:clickOrSelect={() => tab.previous()}>Back</Button>
{#if empty || unchanged}
<Button type="primary-dark" on:clickOrSelect={() => tab.next()}>
<Button focusedChild type="primary-dark" on:clickOrSelect={() => tab.next()}>
{empty ? 'Skip' : 'Next'}
</Button>
{:else}
@@ -257,7 +256,7 @@
<Container direction="horizontal" class="grid grid-cols-2 gap-4 mt-4">
<Button type="primary-dark" on:clickOrSelect={() => tab.previous()}>Back</Button>
{#if empty || unchanged}
<Button type="primary-dark" on:clickOrSelect={() => tab.next()}>
<Button focusedChild type="primary-dark" on:clickOrSelect={() => tab.next()}>
{empty ? 'Skip' : 'Next'}
</Button>
{:else}
@@ -278,16 +277,21 @@
<CheckCircled size={64} />
</div>
<h1 class="header2 text-center w-full">All Set!</h1>
<div class="header1 mb-8 text-center">Reiverr is now ready to use.</div>
<div class="body mb-8 text-center">Reiverr is now ready to use.</div>
<Container direction="horizontal" class="inline-flex space-x-4 w-full">
<Button type="primary-dark" on:clickOrSelect={() => tab.previous()} icon={ArrowLeft}
>Back</Button
>
<Button type="primary-dark" on:clickOrSelect={() => tab.previous()} icon={ArrowLeft}>
Back
</Button>
<div class="flex-1">
<Button type="primary-dark" on:clickOrSelect={finalizeSetup} iconAbsolute={ArrowRight}
>Done</Button
<Button
focusedChild
type="primary-dark"
on:clickOrSelect={finalizeSetup}
iconAbsolute={ArrowRight}
>
Done
</Button>
</div>
</Container>
</Tab>

26
src/lib/selectable.ts
View File

@@ -580,6 +580,20 @@ export class Selectable {
console.error('No html element found for', this);
return;
}
if (this.makeFocusedChild) {
// eslint-disable-next-line @typescript-eslint/no-this-alias
let el: Selectable = this;
let parent = el.parent;
while (parent && !get(parent.hasFocusWithin)) {
console.log('setting parent focusIndex', parent, parent.children.indexOf(el));
parent.focusIndex.update((prev) => parent?.children?.indexOf(el) || prev);
el = parent;
parent = el.parent;
}
}
}
_unmountContainer() {
@@ -744,18 +758,6 @@ export class Selectable {
this.children.splice(index, 0, child);
child.parent = this;
if (child.makeFocusedChild) {
let el = child;
let parent = el.parent;
while (parent && !get(parent.hasFocusWithin)) {
parent.focusIndex.update((prev) => parent?.children?.indexOf(el) || prev);
el = parent;
parent = el.parent;
}
}
return childToFocus;
}