Skip to content
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.

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

Adjust NcDatetimePicker styling #3813

Merged
merged 1 commit into from Feb 23, 2023

Conversation

raimund-schluessler
Copy link
Contributor

@raimund-schluessler raimund-schluessler commented Feb 23, 2023

This PR adjust the NcDatetimePicker styling to bring it inline with the other picker and input styles. It also replaces the icons used with material design icons.

Before After
Screenshot 2023-02-23 at 13-52-58 Nextcloud Vue Style Guide Screenshot 2023-02-23 at 13-53-23 Nextcloud Vue Style Guide
ActionInputBefore ActionInputAfter

Closes #3809.

@raimund-schluessler raimund-schluessler added 2. developing Work in progress feature: datepicker Related to the date/time picker component design Design, UX, interface and interaction design labels Feb 23, 2023
@raimund-schluessler raimund-schluessler marked this pull request as ready for review February 23, 2023 13:04
@raimund-schluessler raimund-schluessler added 3. to review Waiting for reviews and removed 2. developing Work in progress labels Feb 23, 2023
@raimund-schluessler raimund-schluessler added this to the 7.8.0 milestone Feb 23, 2023
Copy link
Contributor

@susnux susnux left a comment

Choose a reason for hiding this comment

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

The border looks darker than the others, but I think this is because of #3814

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>
@raimund-schluessler
Copy link
Contributor Author

The border looks darker than the others, but I think this is because of #3814

Yes, exactly. I rebased the branch with #3814 in and updated the screenshot. It looks the same now.

@raimund-schluessler raimund-schluessler merged commit c269d6a into master Feb 23, 2023
@raimund-schluessler raimund-schluessler deleted the fix/3809/calendar-picker-style branch February 23, 2023 15:11
@nickvergessen nickvergessen mentioned this pull request Feb 24, 2023
@jancborchardt
Copy link
Contributor

@raimund-schluessler just a super detail → when used in the action menu, is the text of the datepicker a bit too far down vertically inside the input? And the "calendar" icon on the right of the input is also not the same position for both of the actions for some reason?
image

@raimund-schluessler
Copy link
Contributor Author

when used in the action menu, is the text of the datepicker a bit too far down vertically inside the input?

Might be, but I think this comes from the datepicker styling. See the standalone datepicker:
Screenshot 2023-02-27 at 11-29-01 Nextcloud Vue Style Guide
But to be honest, I find it difficult to say what's the correct position, so I would leave it up to you to fix it 🙈

And the "calendar" icon on the right of the input is also not the same position for both of the actions for some reason?

Yes, it is. And until now, I thought we had no chance to fix this, as it's an icon coming from the browser. But I just noticed it reacts to the padding of the input field. So I will prepare a PR to fix it.

@raimund-schluessler raimund-schluessler modified the milestones: 7.8.0, 7.7.1 Feb 27, 2023
@raimund-schluessler
Copy link
Contributor Author

@jancborchardt See #3826.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
3. to review Waiting for reviews design Design, UX, interface and interaction design feature: datepicker Related to the date/time picker component
Projects
None yet
Development

Successfully merging this pull request may close these issues.

NcDatetimePickers do not match the consistent NcAction style
4 participants