Improve the first-run wizard: softer backdrop, dismiss outside, onboarding checklist & motion polish - #2207
Open
karlitschek wants to merge 3 commits into
Open
Improve the first-run wizard: softer backdrop, dismiss outside, onboarding checklist & motion polish#2207karlitschek wants to merge 3 commits into
karlitschek wants to merge 3 commits into
Conversation
karlitschek
force-pushed
the
fix/softer-wizard-backdrop
branch
3 times, most recently
from
August 22, 2026 16:38
763379a to
1c9807f
Compare
NcModal's opaque backdrop (used on desktop via `dark`) is ~92% black, which dims the whole page quite heavily behind the first-run wizard. Ease it to ~75% so the modal still lifts off the page without darkening everything behind it. Targets `.modal-mask--opaque` (the current NcModal class) with `.modal-mask--dark` kept for older versions. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
karlitschek
force-pushed
the
fix/softer-wizard-backdrop
branch
from
August 22, 2026 16:40
1c9807f to
c3132f3
Compare
Member
Author
The wizard was opened with `noClose`, which blocks every close path (NcModal's close() returns early when noClose is set). Drop it and enable `closeOnClickOutside` so the wizard can be dismissed by clicking the backdrop — as well as via the standard close button and Escape. All paths route through the existing close handler, so dismissing still records "do not show again". Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
karlitschek
changed the title
Build on the backdrop/close-outside tweaks with a round of UX improvements that make the first-run wizard more useful and more pleasant to move through. Live onboarding checklist (replaces the static "devices" page) - New GetStarted page turns the device step into a personal checklist: add a profile picture, set a full name, add an email, install the desktop app, get the mobile app, connect calendar & contacts. Profile items tick off live from the user's real state, with a progress bar and a friendly greeting. - The step is platform-aware: the client matching the visitor's device is highlighted and marked "recommended for your device"; the mobile row links to both the App Store and Google Play, all action buttons a uniform width. - BeforeTemplateRenderedListener provides the onboarding initial state (display name, whether avatar/name/email are set, and whether the user may change avatar/name so we can hide steps they can't act on). Always show the full wizard - Drop the returning-user "changelog only" shortcut so opening "About & What's new" shows the complete wizard, not just a couple of pages. Motion polish - Spring-eased page transitions in the slideshow. - Staggered reveal of the key-aspects cards plus hover micro-interactions. - An animated appear/disappear for the modal itself: it springs up and sharpens from a soft blur into focus while the backdrop pulls focus, then drifts away slowly and smoothly. All motion is disabled under prefers-reduced-motion. Source only; compiled assets need a /compile. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
karlitschek
changed the title
susnux
reviewed
Aug 24, 2026
Comment on lines
+89
to
+102
| /** | ||
| * Soften the backdrop. NcModal's opaque/dark backdrop is ~92% black, which dims | ||
| * the whole page quite heavily behind the wizard; ease it to a gentler tint that | ||
| * still lifts the modal off the page. (`--opaque` is the current class; `--dark` | ||
| * is kept for older NcModal versions.) | ||
| */ | ||
| .first-run-wizard.modal-mask--opaque, | ||
| .first-run-wizard.modal-mask--dark { | ||
| background-color: rgba(0, 0, 0, 0.75) !important; | ||
| // Frosted backdrop. The blur radius itself is animated on enter/leave (below) | ||
| // for a "focus pull" — the page behind gradually softens as the wizard arrives. | ||
| backdrop-filter: blur(5px) saturate(1.08); | ||
| -webkit-backdrop-filter: blur(5px) saturate(1.08); | ||
| } |
Contributor
There was a problem hiding this comment.
this belongs to nextcloud-vue and should not be adjusted in apps.
If there is a need for a soft variant (only possible if modal has neither actions nor a title) then this should be a prop of NcModal in nextcloud-vue.
Contributor
This was explicitly changed because we got many complains about useless slides for every major update by community and design agreed. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
A set of UX improvements to the first-run wizard, built up over several iterations.
Softer backdrop
On desktop the wizard uses NcModal's dark backdrop (
:dark="!isMobile"), which the current@nextcloud/vuerenders asmodal-mask--opaqueat ~92% black — dimming the whole page quite heavily. Eased to ~75% so the modal still lifts off the page without darkening everything behind it.Dismiss by clicking outside
The wizard was opened with
noClose, which blocks every close path (NcModal'sclose()returns early whennoCloseis set). Dropping it and enablingcloseOnClickOutsidelets the wizard be dismissed by clicking the backdrop — plus the standard close button and Escape. All paths go through the existingclose()handler, so dismissing still records "do not show again".Live onboarding checklist (replaces the static "devices" page)
The device step becomes a personal getting-started checklist:
BeforeTemplateRenderedListenerprovides the onboarding initial state (display name; whether avatar/name/email are set; whether the user may change avatar/name).Always show the full wizard
Dropped the returning-user "changelog only" shortcut, so opening About & What's new shows the complete wizard rather than just a couple of pages.
Motion polish
prefers-reduced-motion.Source only — the compiled assets need a
/compile. Verified on a dev instance across all of the above.