Skip to content

Improve the first-run wizard: softer backdrop, dismiss outside, onboarding checklist & motion polish #2207

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.

Sign up for GitHub

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

Open
karlitschek wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Improve the first-run wizard: softer backdrop, dismiss outside, onboarding checklist & motion polish #2207

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c3132f3
fix: soften the first-run wizard backdrop
Aug 22, 2026
ff88c3b
feat: allow dismissing the first-run wizard by clicking outside
Aug 22, 2026
f79b695
feat: livelier wizard — onboarding checklist, motion polish, full flow
Aug 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 11 additions & 6 deletions lib/Listener/BeforeTemplateRenderedListener.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,12 +61,6 @@ public function handle(Event $event): void {
if (version_compare(Constants::CHANGELOG_VERSION, $lastSeenVersion, '>')) {
Util::addScript(Application::APP_ID, Application::APP_ID . '-activate');
}

// If the user was already seen before (compatibility with older wizard versions where the value was 1)
// then we only show the changelog
if (version_compare($lastSeenVersion, '1', '>')) {
$this->initialState->provideInitialState('changelogOnly', true);
}
}

Util::addStyle(Application::APP_ID, Application::APP_ID . '-style');
Expand All @@ -86,5 +80,16 @@ public function handle(Event $event): void {
'ios',
$this->systemConfig->getSystemValueString('customclient_ios', $this->theming->getiOSClientUrl())
);

// Live onboarding state for the "Get set up" checklist: which profile
// basics are already done, so the wizard can tick them off.
$this->initialState->provideInitialState('onboarding', [
'displayName' => $user->getDisplayName(),
'hasAvatar' => $user->getAvatarImage(64) !== null,
'hasName' => $user->getDisplayName() !== '' && $user->getDisplayName() !== $user->getUID(),
'hasEmail' => ($user->getEMailAddress() ?? '') !== '',
'canChangeAvatar' => $user->canChangeAvatar(),
'canChangeName' => $user->canChangeDisplayName(),
]);
}
}
52 changes: 51 additions & 1 deletion src/components/InfoCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,22 @@ const props = defineProps<{
title: string
subtitle?: string
href?: string
/** When set, the card fades/rises in with a stagger based on this index. */
revealIndex?: number
}>()

const isLink = computed(() => !!props.href)
const revealStyle = computed(() => props.revealIndex === undefined
? undefined
: { '--reveal-delay': `${props.revealIndex * 80}ms` })
</script>

<template>
<component
:is="isLink ? 'a' : 'div'"
:href="href || undefined"
:class="[$style.card, { [$style.link]: isLink }]"
:class="[$style.card, { [$style.link]: isLink, [$style.reveal]: revealIndex !== undefined }]"
:style="revealStyle"
:target="!isLink ? undefined : '_blank'"
:rel="!isLink ? undefined : 'noreferrer'">
<div :class="$style.icon">
Expand All @@ -40,6 +46,18 @@ const isLink = computed(() => !!props.href)
max-width: 250px;
box-sizing: border-box;
height: auto;
transition: transform .2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .2s ease;

// The icon pops a touch on hover — playful, and it works for plain cards too.
.icon :deep(svg),
.icon :deep(img) {
transition: transform .2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

&:hover .icon :deep(svg),
&:hover .icon :deep(img) {
transform: scale(1.18) rotate(-4deg);
}
}

.icon {
Expand All @@ -63,6 +81,12 @@ const isLink = computed(() => !!props.href)
box-shadow: 0px 0px 10px 0px var(--color-box-shadow);
border-radius: var(--border-radius-large);
padding: calc(var(--default-grid-baseline) * 4);

&:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px 0 var(--color-box-shadow);
}

&:focus-visible {
outline: 2px solid var(--color-main-text);
box-shadow: 0 0 0 4px var(--color-main-background);
Expand All @@ -74,4 +98,30 @@ const isLink = computed(() => !!props.href)
flex-direction: column;
justify-content: center;
}

// Staggered entrance.
.reveal {
opacity: 0;
animation: card-reveal .5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: var(--reveal-delay, 0ms);
}

@keyframes card-reveal {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
.card,
.card:hover .icon :deep(svg),
.card:hover .icon :deep(img) {
transition: none;
transform: none;
}

.reveal {
opacity: 1;
animation: none;
}
}
</style>
25 changes: 20 additions & 5 deletions src/components/SlideShow.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -240,27 +240,42 @@ function goToPage(pageId: string) {
* The transition classes
*/
.slide-active {
transition: all .2s;
/* A springy easing with a little overshoot so pages settle with bounce.
`all` (not just transform/opacity) so the first-page "wave" top still animates. */
transition: all .42s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.slide-left-enter {
opacity: 0;
transform: translateX(30%);
transform: translateX(44px) scale(.96);
}

.slide-left-leave-to {
opacity: 0;
transform: translateX(-30%);
transform: translateX(-44px) scale(.96);
}

.slide-right-enter {
opacity: 0;
transform: translateX(-30%);
transform: translateX(-44px) scale(.96);
}

.slide-right-leave-to {
opacity: 0;
transform: translateX(30%);
transform: translateX(44px) scale(.96);
}

@media (prefers-reduced-motion: reduce) {
.slide-active {
transition: opacity .15s linear;
}

.slide-left-enter,
.slide-left-leave-to,
.slide-right-enter,
.slide-right-leave-to {
transform: none;
}
}

.slide-up-enter {
Expand Down
Loading
Loading