Skip to content

UX: Replace native time picker with MUI Time Picker #1791

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

Closed
Tracked by #1939
greyscaled opened this issue May 26, 2022 · 11 comments · Fixed by #1923
Closed
Tracked by #1939

UX: Replace native time picker with MUI Time Picker #1791

greyscaled opened this issue May 26, 2022 · 11 comments · Fixed by #1923
Assignees
Labels
site Area: frontend dashboard
Milestone

Comments

@greyscaled
Copy link
Contributor

greyscaled commented May 26, 2022

User Story 👥

Our Workspace Schedule form uses a native <input type="time"> picker. Unfortunately, it's hard to make this appearance sit well on all browsers in our dark theme, and folx might not be able to see the dark clock against the dark theme.

time-picker-native

Instead of this less-than-stellar design, I'd love to see a TimePicker like I see in modern mobile applications.

https://material-ui-pickers.dev/demo/timepicker#time-picker

1
2

Note

The underlying data representation should not change, we use HH:mm (24 hour format).

@greyscaled greyscaled added good first issue 🥇 site Area: frontend dashboard labels May 26, 2022
@ketang
Copy link
Contributor

ketang commented May 26, 2022

Which browsers do you think have problems?

@greyscaled
Copy link
Contributor Author

Which browsers do you think have problems?

My assumption is all. I mean it certainly looks off in Chrome:

time-picker-native

@greyscaled
Copy link
Contributor Author

@tjcran may have alternatives or other views, I somewhat created this ticket on his behalf in response to feedback.

I personally feel that the MUI TimePickers are a pleasing UX.

Is it absolutely critical to do now? No.

@ketang
Copy link
Contributor

ketang commented May 26, 2022

Okay then maybe I should ask the opposite: in which browsers does it work well?

@greyscaled
Copy link
Contributor Author

Okay then maybe I should ask the opposite: in which browsers does it work well?

I don't know / am unsure it works well in dark theme on any of them

@tjcran
Copy link

tjcran commented May 26, 2022

I think this is important to get right for Community launch, not by Friday this week.

@tjcran tjcran added this to the Community MVP milestone May 30, 2022
@Kira-Pilot
Copy link
Member

A downside here is that I don't think that MUI Time Picker modal has keyboard support. Maybe we could tweak it so it behaves, or disable the modal itself on keyboard only.

Is it a pain to just change the color of the little clock icon in the existing timepicker? SO claims we can do it with a filter, but I haven't tried it or tested it cross browser.

@tjcran
Copy link

tjcran commented May 31, 2022

A downside here is that I don't think that MUI Time Picker modal has keyboard support. Maybe we could tweak it so it behaves, or disable the modal itself on keyboard only.

Is it a pain to just change the color of the little clock icon in the existing timepicker? SO claims we can do it with a filter, but I haven't tried it or tested it cross browser.

@vapurrmaid tells me the color of the clock can't be changed, and it's impossible to see on the dark mode background.. I'm open to other alternatives, though. whatever makes it easiest for users to understand how to change the time using an actual time picker.

@Kira-Pilot
Copy link
Member

I think we can change it, at least on Chrome. I'll do some testing on other browsers. Maybe we can chat at grooming and see if there were other concerns besides color.
Screen Shot 2022-05-31 at 10 53 35 AM

@greyscaled
Copy link
Contributor Author

I think we can change it, at least on Chrome. I'll do some testing on other browsers. Maybe we can chat at grooming and see if there were other concerns besides color. Screen Shot 2022-05-31 at 10 53 35 AM

Nice, I was unsuccessful in my first past in understanding how to change if. I think we should move forward with simply just that and scrap moving forward with the time picker.

@greyscaled
Copy link
Contributor Author

greyscaled commented May 31, 2022

@vapurrmaid tells me the color of the clock can't be changed

Turns out I just didn't figure out how in my pass, but @Kira-Pilot sure as heck did (:tada:)!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
site Area: frontend dashboard
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants