feat: CAL-1674 Added new header layout for new booker. #9227
Conversation
CAL-1674 new booker: reconsider day view UI
i think instead of: CleanShot%202023-05-14%20at%2022.34.112x.jpg we should do: CleanShot%202023-05-14%20at%2022.34.242x.jpg thoughts ciaran ? |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
2 Ignored Deployments
|
| @@ -98,35 +95,6 @@ const BookerComponent = ({ | |||
|
|
|||
| return ( | |||
| <> | |||
| {/* | |||
There was a problem hiding this comment.
Moved into the header component.
| <LayoutToggle onLayoutToggle={onLayoutToggle} layout={layout} /> | ||
| </div> | ||
| {/* | ||
| This second layout toggle is hidden, but needed to reserve the correct spot in the DIV |
There was a problem hiding this comment.
Couldn't come up with a better solution. Don't think this is too bad, but also not 100% happy with it. For now it works well I think, maybe later we can see if we can come up with a better solution.
There was a problem hiding this comment.
I was actually curious how this was gonna be tackled ... easier than i had it in my head :P
There was a problem hiding this comment.
Hahaha. I tried a lot with framer motion too, but you always saw the jump. So instead of spending days on an animation I think this for now was the best solution, haha.
| @@ -0,0 +1,111 @@ | |||
| import { ChevronLeft, ChevronRight } from "lucide-react"; | |||
There was a problem hiding this comment.
Whole file looks new, but main part is actually a rename of the LargeViewHeader component below. Only added the layout toggle and did a few tweaks.
📦 Next.js Bundle Analysis for @calcom/webThis analysis was generated by the Next.js Bundle Analysis action. 🤖
|
| Page | Size (compressed) |
|---|---|
global |
151.29 KB (🟡 +579 B) |
Details
The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!
Sixty-two Pages Changed Size
The following pages changed size from the code in this PR compared to its base branch:
| Page | Size (compressed) | First Load | % of Budget (350 KB) |
|---|---|---|---|
/[user]/[type] |
184.22 KB |
335.51 KB | 95.86% (🟡 +0.15%) |
/[user]/[type]/embed |
184.25 KB |
335.54 KB | 95.87% (🟡 +0.14%) |
/[user]/book |
255.3 KB |
406.59 KB | 116.17% (🟡 +0.86%) |
/_error |
33.69 KB |
184.98 KB | 52.85% (🟡 +1.57%) |
/apps |
279.48 KB |
430.78 KB | 123.08% (🟡 +0.75%) |
/apps/[slug] |
297.42 KB |
448.72 KB | 128.20% (🟡 +0.75%) |
/apps/[slug]/[...pages] |
460.1 KB |
611.39 KB | 174.68% (🟡 +0.79%) |
/apps/categories |
241.83 KB |
393.12 KB | 112.32% (🟡 +0.74%) |
/apps/categories/[category] |
262.67 KB |
413.96 KB | 118.28% (🟡 +0.74%) |
/apps/installed/[category] |
278.36 KB |
429.65 KB | 122.76% (🟡 +0.78%) |
/auth/setup |
175.12 KB |
326.42 KB | 93.26% (🟡 +0.73%) |
/availability |
247.15 KB |
398.44 KB | 113.84% (🟡 +0.74%) |
/availability/[schedule] |
333.41 KB |
484.7 KB | 138.49% (🟡 +0.74%) |
/availability/troubleshoot |
242.56 KB |
393.86 KB | 112.53% (🟡 +0.74%) |
/bookings/[status] |
341.66 KB |
492.95 KB | 140.84% (🟡 +2.27%) |
/d/[link]/[slug] |
183.86 KB |
335.16 KB | 95.76% (🟡 +0.14%) |
/d/[link]/[slug]/embed |
183.89 KB |
335.18 KB | 95.77% (🟡 +0.14%) |
/d/[link]/book |
254.95 KB |
406.24 KB | 116.07% (🟡 +0.86%) |
/event-types |
427.97 KB |
579.27 KB | 165.50% (🟡 +0.76%) |
/event-types/[type] |
479.87 KB |
631.17 KB | 180.33% (🟡 +0.78%) |
/getting-started/[[...step]] |
426.58 KB |
577.87 KB | 165.11% (🟡 +0.53%) |
/insights |
449.25 KB |
600.54 KB | 171.58% (🟡 +0.75%) |
/more |
241.45 KB |
392.75 KB | 112.21% (🟡 +0.74%) |
/new-booker/[user]/[type] |
290.63 KB |
441.92 KB | 126.26% (🟡 +0.82%) |
/new-booker/d/[link]/[slug] |
290.63 KB |
441.92 KB | 126.26% (🟡 +0.83%) |
/new-booker/team/[slug]/[type] |
290.63 KB |
441.92 KB | 126.26% (🟡 +0.83%) |
/settings/admin |
247.03 KB |
398.32 KB | 113.81% (🟡 +0.74%) |
/settings/admin/apps |
258.78 KB |
410.07 KB | 117.16% (🟡 +0.76%) |
/settings/admin/apps/[category] |
258.76 KB |
410.06 KB | 117.16% (🟡 +0.76%) |
/settings/admin/flags |
249.76 KB |
401.05 KB | 114.59% (🟡 +0.74%) |
/settings/admin/impersonation |
247.31 KB |
398.6 KB | 113.89% (🟡 +0.74%) |
/settings/admin/users |
248.45 KB |
399.74 KB | 114.21% (🟡 +0.74%) |
/settings/admin/users/[id]/edit |
334.71 KB |
486 KB | 138.86% (🟡 +0.75%) |
/settings/admin/users/add |
334.38 KB |
485.68 KB | 138.76% (🟡 +0.76%) |
/settings/billing |
247.17 KB |
398.46 KB | 113.85% (🟡 +0.74%) |
/settings/developer/api-keys |
275.77 KB |
427.07 KB | 122.02% (🟡 +0.74%) |
/settings/developer/webhooks |
250.18 KB |
401.47 KB | 114.71% (🟡 +0.74%) |
/settings/developer/webhooks/[id] |
251.86 KB |
403.15 KB | 115.19% (🟡 +0.74%) |
/settings/developer/webhooks/new |
251.71 KB |
403.01 KB | 115.15% (🟡 +0.74%) |
/settings/my-account/appearance |
261.41 KB |
412.71 KB | 117.92% (🟡 +0.74%) |
/settings/my-account/calendars |
252.81 KB |
404.1 KB | 115.46% (🟡 +0.74%) |
/settings/my-account/conferencing |
252.73 KB |
404.02 KB | 115.43% (🟡 +0.75%) |
/settings/my-account/general |
332.03 KB |
483.32 KB | 138.09% (🟡 +0.74%) |
/settings/my-account/profile |
374.54 KB |
525.84 KB | 150.24% (🟡 +0.57%) |
/settings/security/impersonation |
248.98 KB |
400.27 KB | 114.36% (🟡 +0.75%) |
/settings/security/password |
258.34 KB |
409.63 KB | 117.04% (🟡 +0.75%) |
/settings/security/sso |
256.52 KB |
407.82 KB | 116.52% (🟡 +0.76%) |
/settings/security/two-factor-auth |
251.45 KB |
402.74 KB | 115.07% (🟡 +0.74%) |
/settings/teams |
246.79 KB |
398.09 KB | 113.74% (🟡 +0.74%) |
/settings/teams/[id]/appearance |
261.34 KB |
412.63 KB | 117.90% (🟡 +0.74%) |
/settings/teams/[id]/billing |
247.03 KB |
398.33 KB | 113.81% (🟡 +0.74%) |
/settings/teams/[id]/members |
359.88 KB |
511.18 KB | 146.05% (🟡 +0.74%) |
/settings/teams/[id]/onboard-members |
164.31 KB |
315.6 KB | 90.17% (🟡 +0.72%) |
/settings/teams/[id]/profile |
370.04 KB |
521.34 KB | 148.95% (🟡 +0.74%) |
/settings/teams/[id]/sso |
256.62 KB |
407.92 KB | 116.55% (🟡 +0.76%) |
/settings/teams/new |
187.26 KB |
338.56 KB | 96.73% (🟡 +0.72%) |
/team/[slug]/[type] |
183.86 KB |
335.16 KB | 95.76% (🟡 +0.14%) |
/team/[slug]/[type]/embed |
183.89 KB |
335.19 KB | 95.77% (🟡 +0.14%) |
/team/[slug]/book |
254.95 KB |
406.24 KB | 116.07% (🟡 +0.86%) |
/teams |
241.54 KB |
392.84 KB | 112.24% (🟡 +0.74%) |
/workflows |
254.4 KB |
405.7 KB | 115.91% (🟡 +0.75%) |
/workflows/[workflow] |
368.44 KB |
519.73 KB | 148.50% (🟡 +0.75%) |
Details
Only the gzipped size is provided here based on an expert tip.
First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/- <0.01%" it means that there was a change in bundle size, but it is a trivial enough amount that it can be ignored.
Current Playwright Test Results Summary✅ 96 Passing - Run may still be in progress, this comment will be updated as current testing workflow or job completes... (Last updated on 06/06/2023 01:53:41pm UTC) Run DetailsRunning Workflow PR Update on Github Actions Commit: 674f6c3 Started: 06/06/2023 01:51:11pm UTC
|
| Test Case | Last 7 days Failures | Last 7 days Flakes |
|---|---|---|
|
Managed Event Types tests Can create managed event type
Retry 1 • Initial Attempt |
1.43% (6)6 / 421 runsfailed over last 7 days |
20.19% (85)85 / 421 runsflaked over last 7 days |
📄 packages/embeds/embed-core/playwright/tests/action-based.e2e.ts • 1 Flake
Test Case Results
| Test Case | Last 7 days Failures | Last 7 days Flakes |
|---|---|---|
|
Popup Tests should be able to reschedule
Retry 1 • Initial Attempt |
4.51% (11)11 / 244 runsfailed over last 7 days |
95.49% (233)233 / 244 runsflaked over last 7 days |
📄 apps/web/playwright/login.2fa.e2e.ts • 1 Flake
Test Case Results
| Test Case | Last 7 days Failures | Last 7 days Flakes |
|---|---|---|
|
2FA Tests should allow a user to disable 2FA
Retry 1 • Initial Attempt |
0% (0)0 / 370 runsfailed over last 7 days |
17.84% (66)66 / 370 runsflaked over last 7 days |
| const { t } = useLocale(); | ||
|
|
||
| return ( | ||
| <div className="[&>div]:bg-muted z-10"> |
There was a problem hiding this comment.
| <div className="[&>div]:bg-muted z-10"> | |
| <div className="[&>div]:bg-muted z-10"> |
We do this a lot whenever we seem to use ToggleGroup - is it worth just creating a variant that changes the background of the div?
There was a problem hiding this comment.
I tested this, and actually it isn't needed anymore. bg-muted is the default, so the classname didn't do anything anymore here. Removed it.
| gridTemplateAreas: ` | ||
| "meta" | ||
| "header" | ||
| "main" | ||
| "timeslots" | ||
| `, |
There was a problem hiding this comment.
So header now only displays the 24h selector on mobile? and not the layout view?
There was a problem hiding this comment.
Actually the header isn't visible on mobile at all. It renders null there. Mobile shows the month view, which has it's own 24h toggle above the timeslots component. So it's not visible.
… default bg color.
PeerRich
changed the title
|
NIT:
CleanShot.2023-06-01.at.11.55.15.mp4 |
|
another NIT: CleanShot.2023-06-01.at.11.58.05.mp4not sure what the best fix would be here |
|
NIT: missing padding bottom
|
|
this calendar should be bottom aligned before: after:
|
…ching weeks from jumping around.
|
@PeerRich All issues have been fixed. Could you please retest it? |
PeerRich
added
🧹 Improvements
There was a problem hiding this comment.
Found two weird displays at some random breakpoints that would only happen if youre changing the scale by hand.
Other than that all issues are fixed and LGTM. I'd be happy with these being fixed in a follow up due to the fact they're a bit out of scope of this header PR.
Nice work as always @JeroenReumkens animations are looking 👨🍳
Thanks a lot for the review @sean-brydon. I'm indeed going ahead and merge this, because I can use these changes in the embed PR too. Will make a follow up PR in the end to fix the last things for the layout and animations. |
…ctly instead of using animate for non animated properties. Performs better and removes some errors by framer motion for non animatable units like 'auto'.
What does this PR do?
Added new header design for fullscreen layout in booker.
This header is not shown in the month view. In that case you only see the layout toggle.
PS: There's currently an issue that you can't scroll in the fullscreen layouts – this is fixed in #9023
Fixes CAL-1674
Environment: Staging(main branch)
Type of change
How should this be tested?