Skip to content

[next] refactor(NcDateTimePicker): migrate to @vuepick library #6651

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

Jump to bottom
Merged
merged 1 commit into from
Mar 31, 2025
Merged

[next] refactor(NcDateTimePicker): migrate to @vuepick library #6651

merged 1 commit into from
Mar 31, 2025

Conversation

@susnux
Copy link
Contributor

@susnux susnux commented Mar 27, 2025 •
edited
Loading

☑️ Resolves

  • Migrate the date time picker to a maintained library

🖼️ Screenshots

🏚️ Before 🏡 After
image image

🏁 Checklist

  • ⛑️ Tests are included or are not applicable
  • 📘 Component documentation has been extended, updated or is not applicable
  • 3️⃣ Backport to next requested with a Vue 3 upgrade

@susnux susnux added 3. to review Waiting for reviews vue 3 labels Mar 27, 2025
@susnux susnux requested review from Antreesy, ShGKme and st3iny March 27, 2025 16:57
@susnux susnux force-pushed the refactor/date-picker branch from 0b0dca4 to 8cbcade Compare March 27, 2025 17:04
@susnux susnux added this to the 9.0.0-alpha.8 milestone Mar 27, 2025
@susnux susnux marked this pull request as ready for review March 27, 2025 17:06
@susnux susnux force-pushed the refactor/date-picker branch from 8cbcade to 01ac292 Compare March 27, 2025 19:58
ShGKme
ShGKme approved these changes Mar 27, 2025
View reviewed changes
Copy link
Contributor

@ShGKme ShGKme left a comment

Choose a reason for hiding this comment

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

Great

src/components/NcDateTimePicker/NcDateTimePicker.vue
&--highlighted {
opacity: .7;
.dp__btn.dp__button.dp__button_bottom {
inset-block-end: 6px;
Copy link
Contributor

@ShGKme ShGKme Mar 27, 2025

Choose a reason for hiding this comment

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

Can we have this 6px computed?

src/components/NcDateTimePicker/NcDateTimePicker.vue
.v-popper--theme-dropdown.v-popper__popper.timezone-select__popper .v-popper__wrapper {
border-radius: var(--border-radius-large);
:deep(.dp__btn.dp__button.dp__overlay_action) {
width: calc(100% - 16px);
Copy link
Contributor

@ShGKme ShGKme Mar 27, 2025

Choose a reason for hiding this comment

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

And here

src/components/NcDateTimePicker/NcDateTimePicker.vue
padding-inline-start: var(--dp-input-icon-padding) !important;
}
:deep(.dp__btn) {
padding: calc((var(--default-clickable-area) - 20px) / 2);
Copy link
Contributor

@ShGKme ShGKme Mar 27, 2025

Choose a reason for hiding this comment

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

And here

Copy link
Contributor Author

@susnux susnux Mar 27, 2025

Choose a reason for hiding this comment

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

20px = the icon size we passed as prop to the icon wrapper

@susnux susnux force-pushed the refactor/date-picker branch 2 times, most recently from 9dd5055 to 8cc7ebb Compare March 31, 2025 14:31
Antreesy
Antreesy approved these changes Mar 31, 2025
View reviewed changes
Copy link
Contributor

@Antreesy Antreesy left a comment

Choose a reason for hiding this comment

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

Tested

Please fix typo at L11: - cleareable: false

@susnux susnux force-pushed the refactor/date-picker branch from dbbdbc5 to b1384b8 Compare March 31, 2025 16:57
@dartcafe
Copy link
Contributor

dartcafe commented Mar 31, 2025

Nice.
But could you consider to keep the old one as deprecated component?

@susnux
refactor(NcDateTimePicker): migrate to @vuepick library
a2479aa 
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
@susnux susnux force-pushed the refactor/date-picker branch from b1384b8 to a2479aa Compare March 31, 2025 18:00
@susnux
Copy link
Contributor Author

susnux commented Mar 31, 2025

But could you consider to keep the old one as deprecated component?

It is the same component, but by bad API design too much was (indirectly) exposed.
Components should not expose the underlying library. Meaning this and the v8 version should be fully compatible by the props defined by us.

If there is a feature missing we should instead add a prop our own and wrap this internally instead of exposing it.
We will make v8 forward compatible so this will be very low on breaking risk (if not private props are used).

@dartcafe
Copy link
Contributor

dartcafe commented Mar 31, 2025

I have to try it, but I hacked around the underlying library, to get the functionality like I needed it. I fear, the component in Polls will behave deferentially, causing a lot of coding and testing.

I would be fine with having the component under a different name to have enough time to make sure, it does not break Polls.

@susnux susnux merged commit 7bb4f57 into next Mar 31, 2025
24 checks passed
@susnux susnux deleted the refactor/date-picker branch March 31, 2025 18:11
@susnux
Copy link
Contributor Author

susnux commented Mar 31, 2025

to get the functionality like I needed it.

Please open a feature request if you find something missing, we will add it

@dartcafe
Copy link
Contributor

dartcafe commented Mar 31, 2025

Do you plan a new alpha release for v9 or when is the RC to expect?

@ShGKme ShGKme changed the title refactor(NcDateTimePicker): migrate to @vuepick library [next] refactor(NcDateTimePicker): migrate to @vuepick library Apr 2, 2025
@susnux
Copy link
Contributor Author

susnux commented Apr 2, 2025

/backport to stable8

@backportbot
Copy link

backportbot bot commented Apr 2, 2025

The backport to stable8 failed. Please do this backport manually.

# Switch to the target branch and update it
git checkout stable8
git pull origin stable8

# Create the new backport branch
git checkout -b backport/6651/stable8

# Cherry pick the change from the commit sha1 of the change against the default branch
# This might cause conflicts, resolve them
git cherry-pick a2479aab

# Push the cherry pick commit to the remote repository and open a pull request
git push origin backport/6651/stable8

Error: Failed to check for changes with origin/stable8: No changes found in backport branch

Learn more about backports at https://docs.nextcloud.com/server/stable/go.php?to=developer-backports.

@ShGKme
Copy link
Contributor

ShGKme commented Apr 2, 2025

Do you plan a new alpha release for v9 or when is the RC to expect?

Yes, we plan RC soon.

v9 branch is no the main branch

@susnux susnux mentioned this pull request Apr 3, 2025
Merged
3 tasks
This was referenced Apr 3, 2025
Closed
Closed
Merged
Closed
@susnux susnux linked an issue Apr 7, 2025 that may be closed by this pull request
On Time Selection, Make Click Date to go back to Date Selection Clearer #1440
Closed
@susnux susnux mentioned this pull request Apr 7, 2025
Closed
@susnux susnux linked an issue Apr 7, 2025 that may be closed by this pull request
NcDateTimePicker needs design update for Nextcloud 30 #5951
Closed
This was referenced Jun 16, 2025
Closed
Merged
This was referenced Jul 16, 2025
Closed
Closed
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ShGKme ShGKme ShGKme approved these changes

@Antreesy Antreesy Antreesy approved these changes

@st3iny st3iny Awaiting requested review from st3iny

Assignees

No one assigned

Labels

3. to review Waiting for reviews backport-request

Projects

None yet

Milestone

9.0.0-alpha.8

Development

Successfully merging this pull request may close these issues.

NcDateTimePicker needs design update for Nextcloud 30 On Time Selection, Make Click Date to go back to Date Selection Clearer

5 participants

@susnux @dartcafe @ShGKme @Antreesy