Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(web): previous button for on-boarding steps #6178

Merged
merged 8 commits into from
Jan 6, 2024

Conversation

martabal
Copy link
Member

@martabal martabal commented Jan 4, 2024

Changes made in this PR

This PR adds the ability to go back to the previous on-boarding step with a button. It adds a progress bar too.

Screenshots

2024-01-05.00-02-23.mp4

Copy link

cloudflare-pages bot commented Jan 4, 2024

Deploying with  Cloudflare Pages  Cloudflare Pages

Latest commit: 14ca424
Status: ✅  Deploy successful!
Preview URL: https://c3f8eb6f.immich.pages.dev
Branch Preview URL: https://feat-previous-onboarding.immich.pages.dev

View logs

@martabal martabal changed the title feat(web): previous on the onboarding feat(web): previous button for on-boarding steps Jan 4, 2024
web/src/lib/assets/sun.svelte Outdated Show resolved Hide resolved
Comment on lines 47 to 62
<section id="onboarding-page" class="min-w-screen flex min-h-screen p-4">
<div class="flex flex-col w-full">
<div class="w-full bg-gray-300 dark:bg-gray-600 rounded-full h-2.5">
<div
class="progress-bar bg-immich-dark-primary/80 dark:bg-immich-primary h-2.5 rounded-full transition-all duration-200 ease-out"
style="width: {(index / (onboardingSteps.length - 1)) * 100}%"
></div>
</div>
<div class="w-full min-w-screen py-8 flex h-full place-content-center place-items-center">
<svelte:component
this={onboardingSteps[index].component}
on:done={handleDoneClicked}
on:previous={handlePrevious}
/>
</div>
</div>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this looks like a great candidate for its own component.

<Stepper on:previous={} on:next={} bind:selected> 
  <Page1 />
  <Page2 />
  <Page3 />
</Stepper>

@alextran1502
Copy link
Contributor

Thank you for the PR, looks good. I change a few styling and remove the back button for the theme setting since there is no need to go back to the welcome card.

@alextran1502 alextran1502 enabled auto-merge (squash) January 6, 2024 18:29
@alextran1502 alextran1502 merged commit 2cc5149 into main Jan 6, 2024
20 checks passed
@alextran1502 alextran1502 deleted the feat/previous-onboarding branch January 6, 2024 20:01
martabal added a commit that referenced this pull request Jan 9, 2024
* feat: previous on the onboarding

* fix: storage full screen

* feat: transition

* use svelte files for svg

* fix: use icon component

* fix: additional check

* styling'

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants