Skip to content

Calendar refresh V2#24232

Open
chippison wants to merge 13 commits into5.x-devfrom
calendar-clean-commit
Open

Calendar refresh V2#24232
chippison wants to merge 13 commits into5.x-devfrom
calendar-clean-commit

Conversation

@chippison
Copy link
Contributor

@chippison chippison commented Mar 16, 2026

Description

DEV-19886

This is for the second half of the calendar refresh.
Not a lot of functional changes from the #24139.
This is more of another round of component refactor, and some UI/CSS changes

This is just a copy of this PR.
I just cleaned up the commit history a bit.

Checklist

  • [✔] I have understood, reviewed, and tested all AI outputs before use
  • [✔] All AI instructions respect security, IP, and privacy rules

Review

@chippison chippison added this to the 5.9.0 milestone Mar 16, 2026
.ui-datepicker-calendar {
table-layout: fixed;

tbody td {
Copy link
Contributor Author

@chippison chippison Mar 16, 2026

Choose a reason for hiding this comment

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

This is going deep into jQuery UI date picker itself.
Didn't really want to add classes there for this as well as other element selector below

@chippison chippison marked this pull request as ready for review March 16, 2026 21:25
$this->markTestSkipped("Skipped this test on local dev environment.");
}
$maximumTotalFilesizesExpectedInMb = 63;
$maximumTotalFilesizesExpectedInMb = 64;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Bump this up by 1 mb as our filesize has gone over the previous maximum.
Also checked CoreHome.umd.js rose by only around 20Kb so not really that significant given we are creating more and more vue and ts files

@chippison chippison mentioned this pull request Mar 16, 2026
10 tasks
@chippison chippison changed the title Calendar refresh version 2 Calendar refresh V2 Mar 17, 2026
@chippison chippison requested a review from a team March 17, 2026 01:23
date: 'today',
period: 'day',
}),
createContextKey(createBaseContext({ category: 'General_Visitors', subcategory: 'General_Overview' })),
Copy link
Contributor

Choose a reason for hiding this comment

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

I love the createBaseContext() with overrides simplification 👍

date: state.rollingDateParam || state.formattedAppliedAnchorDate,
period: state.appliedPeriod,
};
}
Copy link
Contributor

Choose a reason for hiding this comment

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

I like the idea to deport the logic outside the vue components 👍

Copy link
Contributor

@tzi tzi Mar 23, 2026

Choose a reason for hiding this comment

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

It would be even better with a more explicit. The name applyFlow is perhaps not enough and the relation with the functions not direct.

The file could be PeriodSelector.applyButton.ts and the function:

  • is ApplyButtonEnabled()
  • getApplyButtonAction()

Copy link
Contributor Author

Choose a reason for hiding this comment

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

changed the filename as well as the function name

margin-right: 3px;
}

.compare-checkbox-text {
Copy link
Contributor

Choose a reason for hiding this comment

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

I like to use class selector instead of nested tags 👍

Copy link
Contributor

@tzi tzi left a comment

Choose a reason for hiding this comment

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

Subjectif and non-blocking feedback
From the user point-of-view, I found the disable state not "transparent" enough.
After a fresh install:

  • I open Matomo
  • click on the date selector
  • Yesterday is selected by default
  • I cannot click on the calendar but it's not evident

Perhaps an opacity of 0.5 would be better?

Current opacity 0.5
Image Image

@chippison chippison force-pushed the calendar-clean-commit branch 2 times, most recently from b404e5c to e939b36 Compare March 23, 2026 23:20
@chippison chippison requested a review from tzi March 24, 2026 03:26
Copy link
Contributor

@tzi tzi left a comment

Choose a reason for hiding this comment

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

I have an accessibility issue.
When the calendar is disabled, I can still focus each date with keyboard navigation.

Screen.Recording.2026-03-24.at.11.15.30.mov

@chippison chippison requested a review from tzi March 24, 2026 22:16
@tzi
Copy link
Contributor

tzi commented Mar 25, 2026

It's better but, when I open the calendar, the focus doesn't go inside the calendar dropdown.

Screen.Recording.2026-03-25.at.19.00.41.mov

Perhaps we should change the default focus on today / yesterday / etc. even if the calendar is enabled, because it's really what we will use 90% of the time. And it solves this problem

@chippison chippison force-pushed the calendar-clean-commit branch from f9051aa to 58eb68e Compare March 25, 2026 20:12
@chippison
Copy link
Contributor Author

It's better but, when I open the calendar, the focus doesn't go inside the calendar dropdown.

Screen.Recording.2026-03-25.at.19.00.41.mov
Perhaps we should change the default focus on today / yesterday / etc. even if the calendar is enabled, because it's really what we will use 90% of the time. And it solves this problem

@tzi
Should be good to be re-reviewed.
I just made it focus to what ever is selected

@tzi
Copy link
Contributor

tzi commented Mar 26, 2026

I'm sorry for the nitpick. 😬
I love how it works now but the focus is not really evident since we do not have outline on presets.
Catch the difference:

Focus on Custom Date range Focus on Yesterday
Screenshot 2026-03-26 at 17 49 48 Screenshot 2026-03-26 at 17 49 58

I have to use tab to see where I am first:

Screen.Recording.2026-03-26.at.17.54.58.mov

Can we add the same outline on the presets?

@chippison chippison force-pushed the calendar-clean-commit branch from 58eb68e to c3550f7 Compare March 26, 2026 19:47
Copy link
Contributor

@tzi tzi left a comment

Choose a reason for hiding this comment

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

Thanks for the improvments!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

2 participants