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.

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

fix date picker localizations #968

Closed
wants to merge 3 commits into from
Closed

fix date picker localizations #968

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f1b9582
fix date picker localizations
RahulKannan12 Jun 3, 2023
95a66b1
fix date picker localizations
RahulKannan12 Jun 3, 2023
2d7b3ba
fix date picker localizations
RahulKannan12 Jun 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -668,6 +668,11 @@ input:disabled + .slider {
}

/* Styles for Right Alignment of input type date */
#preferences-window input[type="text"].date-right {
text-align: right;
position: relative;
}

#preferences-window input[type="date"].date-right::-webkit-datetime-edit {
text-align: right;
position: relative;
Expand Down
15 changes: 14 additions & 1 deletion js/date-to-string-util.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,20 @@ function getMonthName(languageData, monthIndex)
return getTranslationInLanguageData(languageData, `$DateUtil.${monthNames[monthIndex]}`);
}


function getMonthNames(languageData)
{
return monthNames.map(val => getTranslationInLanguageData(languageData, `$DateUtil.${val}`));
}

function getDayAbbrvs(languageData)
{
return dayAbbrs.map(val => getTranslationInLanguageData(languageData, `$DateUtil.${val}`));
}

export {
getDayAbbr,
getMonthName
getMonthName,
getMonthNames,
getDayAbbrvs
};
8 changes: 8 additions & 0 deletions js/menus.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,14 @@ function getEditMenuTemplate(mainWindow)
BrowserWindow.getFocusedWindow().webContents.toggleDevTools();
}
});
prefWindow.webContents.on('before-input-event', (event, input) =>
{
if (input.control && input.shift && input.key.toLowerCase() === 'r')
{
BrowserWindow.getFocusedWindow().reload();
}
});

},
},
{type: 'separator'},
Expand Down
4 changes: 3 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,9 @@
"i18next-node-fs-backend": "^2.1.3",
"is-online": "^9.0.1",
"jquery": "^3.6.0",
"jquery-mousewheel": "^3.1.13"
"jquery-mousewheel": "^3.1.13",
"jquery-ui": "^1.13.2",
"jquery-ui-css": "^1.11.5"
},
"engines": {
"node": ">=14.15.5",
Expand Down
7 changes: 6 additions & 1 deletion src/preferences.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../node_modules/@fortawesome/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="../css/styles.css">
<link rel="stylesheet" href="../node_modules/jquery-ui-css/jquery-ui.theme.min.css">
<link rel="stylesheet" href="../node_modules/jquery-ui-css/jquery-ui.structure.min.css">

<!-- First we need to declare jQuery and $ globals with jquery -->
<script src="../node_modules/jquery/dist/jquery.min.js" charset="utf-8"></script>
Expand All @@ -13,6 +15,7 @@
</script>

<script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.js" charset="utf-8"></script>
<script src="../node_modules/jquery-ui/dist/jquery-ui.min.js"></script>
<script type="module" src="preferences.js"></script>
</head>

Expand Down Expand Up @@ -105,7 +108,9 @@
</div>
<div class="flex-box">
<p><i class="fas fa-sign-in-alt"></i><span data-i18n="$Preferences.overallBalanceStart">Overall Balance Start Date</span></p>
<label id='overall-balance-start-date'><input type="date" class="date-right" name="overall-balance-start-date"></label>
<label id="overall-balance-start-date"><input id="datepicker" type="text" class="date-right" name="overall-balance-start-date">
<i class="fa fa-calendar" aria-hidden="true"></i>
</label>
</div>
<div class="flex-box">
<p><i class="fas fa-eye"></i><span data-i18n="$Preferences.view">View</span></p>
Expand Down
30 changes: 29 additions & 1 deletion src/preferences.js
View file
Open in desktop
Copy link
Collaborator

Choose a reason for hiding this comment

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

Size is a little odd on the month names
September got cut

image

Also, when we switch to a month with more days, it covers the input we were going to choose

image

Wonder if there's a setting for this

Copy link
Collaborator

Choose a reason for hiding this comment

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

Some people suggest having a fixed height, but that can leave an empty row in some months.
The native datepicker solves that by having the days from the other months fill up even new rows to always have the 6 rows

Copy link
Author

Choose a reason for hiding this comment

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

There is no property exposed to set the constant rows (6 in our case)
As you mentioned, people suggesting to have a fixed height
What you say? can we go with fixed height?

Copy link
Collaborator

Choose a reason for hiding this comment

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

I think the fixed height is ok. There might be a way to adjust the other height proportions so it doesn't look too bad.

Also, have you seen https://www.npmjs.com/package/js-datepicker?
I was looking at alternatives, and I think it looks nicer visually that jquery's 😅
The native datepicker is very slick and nice, but the jquery one looks a bit dated, like older web stuff.

Copy link
Author

Choose a reason for hiding this comment

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

Okay, So can we switch to this suggested npm package, did you had a check whether it covers all our requirement ? If yes and all good, I am fine to move to this npm package instead of jquery-ui datepicker

Copy link
Collaborator

Choose a reason for hiding this comment

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

Yes, it can be translated and looks simple enough to replace the colors afterwards.

Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@

import { applyTheme } from '../renderer/themes.js';
import { translatePage } from '../renderer/i18n-translator.js';
import { getMonthNames, getDayAbbrvs } from '../js/date-to-string-util.js';


// Global values for preferences page
let usersStyles;
Expand Down Expand Up @@ -35,6 +37,7 @@ function listenerLanguage()
window.mainApi.changeLanguagePromise(this.value).then((languageData) =>
{
translatePage(this.value, languageData, 'Preferences');
refreshDate(this.value, languageData);
window.mainApi.notifyNewPreferences(preferences);
});
});
Expand All @@ -47,9 +50,25 @@ function setupLanguages()
window.mainApi.getLanguageDataPromise().then(languageData =>
{
translatePage(usersStyles['language'], languageData.data, 'Preferences');
refreshDate(usersStyles['language'], languageData.data);
});
}

function refreshDate(language, languageData)
{
const monthAbbrs = getMonthNames(languageData);
const dayAbbrs = getDayAbbrvs(languageData);
$.datepicker.regional[`${language}`] = {
monthNames: monthAbbrs,
Copy link
Collaborator

Choose a reason for hiding this comment

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

I like the "showOtherMonths: true" option, which makes it similar to the older one

monthNamesShort: monthAbbrs,
weekHeader: 'Sm',
dayNames: dayAbbrs,
dayNamesShort: dayAbbrs,
dayNamesMin: dayAbbrs,
firstDay: 0};
$.datepicker.setDefaults($.datepicker.regional[`${language}`]);
}

function refreshContent()
{
return new Promise((resolve) =>
Expand Down Expand Up @@ -91,6 +110,15 @@ function renderPreferencesWindow()
$('#view').val(usersStyles['view']);
}

$(()=>
{
$( '#datepicker' ).datepicker({
RahulKannan12 marked this conversation as resolved.
Show resolved Hide resolved
dateFormat: 'yy-mm-dd',
changeYear: true,
changeMonth: true
});
});

$('input[type="checkbox"]').on('change', function()
{
changeValue(this.name, this.checked);
Expand All @@ -105,7 +133,7 @@ function renderPreferencesWindow()
}
});

$('input[type="number"], input[type="date"]').on('change', function()
$('input[type="number"], input[type="date"], input[type="text"]').on('change', function()
{
changeValue(this.name, this.value);
});
Expand Down