thamara / time-to-leave

Log work hours and get notified when it's time to leave the office and start to live.
http://timetoleave.app
GNU General Public License v3.0
463 stars 272 forks source link

fix date picker localizations #968

Closed RahulKannan12 closed 1 year ago

RahulKannan12 commented 1 year ago

Related issue

Closes #949

Context / Background

The date picker isn't localized, always sticking with language English.

What change is being introduced by this PR?

This PR will introduce localized date picker in preferences window alone - Later this change will be incorporated to other date picker available across in the tool. I'm using the existing translations available for Month names and week days name, so no new translations are needed, and also it cuts off our dependency on dealing with jquery-ui translation library.

Changing the language preference to Espanol

Before change

image

After change

image

How will this be tested?

The language change in preference window should load their locale specific date picker.

araujoarthur0 commented 1 year ago

Looking cool

araujoarthur0 commented 1 year ago

Some customization tips for the style of the datepicker to get it to fit more into the tool:

Consider using the preferences font in the date picker as well font-family: 'Montserrat', sans-serif

Very bad mockup image

I reduced the width of the year, added a left margin, then increased the width of the month. Changed the fonts and size.

If there's a way to make the column sizes consistent, it'd be good. Right now Fri has a smaller width than Wed

The left and right buttons are also moving up a little when we hover them, which is a little weird.

Reducing the width of the preferences page broke the page. I think the width of the date field is much bigger than it needs to be image

The behavior of the feature is great, just tested changing the languages and it switches the datepicker even without saving.