From a22537d36b57acece3a8a26406d2f4dda69494d8 Mon Sep 17 00:00:00 2001 From: Stoyan <88034608+hinzzx@users.noreply.github.com> Date: Fri, 10 May 2024 11:28:10 +0300 Subject: [PATCH 1/3] fix(ui5-calendar): switch to two column layout on Islamic or Persian secondary calendar type (#8453) Now, when any of the two calendar types (Persian or Islamic) is set as a secondaryCalendarType, when the end user is in month view of the calendar, the months are displayed in two column layout, instead of three, providing enough space for the texts to be displayed in one row. --- packages/main/src/MonthPicker.hbs | 2 +- packages/main/src/MonthPicker.ts | 17 +++++++++++------ packages/main/src/themes/Calendar.css | 1 + packages/main/src/themes/MonthPicker.css | 23 +++++++++++++++++++++++ 4 files changed, 36 insertions(+), 7 deletions(-) diff --git a/packages/main/src/MonthPicker.hbs b/packages/main/src/MonthPicker.hbs index 7b13548f23a5..b7cd64ef408e 100644 --- a/packages/main/src/MonthPicker.hbs +++ b/packages/main/src/MonthPicker.hbs @@ -33,4 +33,4 @@ {{/each}} - + \ No newline at end of file diff --git a/packages/main/src/MonthPicker.ts b/packages/main/src/MonthPicker.ts index 2eeb6015216a..acb8d9c71134 100644 --- a/packages/main/src/MonthPicker.ts +++ b/packages/main/src/MonthPicker.ts @@ -5,6 +5,7 @@ import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/ge import convertMonthNumbersToMonthNames from "@ui5/webcomponents-localization/dist/dates/convertMonthNumbersToMonthNames.js"; import transformDateToSecondaryType from "@ui5/webcomponents-localization/dist/dates/transformDateToSecondaryType.js"; import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js"; +import CalendarType from "@ui5/webcomponents-base/dist/types/CalendarType.js"; import { isEnter, isSpace, @@ -36,7 +37,6 @@ import MonthPickerTemplate from "./generated/templates/MonthPickerTemplate.lit.j import monthPickerStyles from "./generated/themes/MonthPicker.css.js"; const PAGE_SIZE = 12; // total months on a single page -const ROW_SIZE = 3; // months per row (4 rows of 3 months each) type Month = { timestamp: string, @@ -125,6 +125,11 @@ class MonthPicker extends CalendarPart implements ICalendarPicker { } } + get rowSize() { + return (this.secondaryCalendarType === CalendarType.Islamic && this.primaryCalendarType !== CalendarType.Islamic) + || (this.secondaryCalendarType === CalendarType.Persian && this.primaryCalendarType !== CalendarType.Persian) ? 2 : 3; + } + _buildMonths() { if (this._hidden) { return; @@ -172,7 +177,7 @@ class MonthPicker extends CalendarPart implements ICalendarPicker { month.classes += " ui5-mp-item--disabled"; } - const quarterIndex = Math.floor(i / ROW_SIZE); + const quarterIndex = Math.floor(i / this.rowSize); if (months[quarterIndex]) { months[quarterIndex].push(month); @@ -201,9 +206,9 @@ class MonthPicker extends CalendarPart implements ICalendarPicker { } else if (isRight(e)) { this._modifyTimestampBy(1); } else if (isUp(e)) { - this._modifyTimestampBy(-ROW_SIZE); + this._modifyTimestampBy(-this.rowSize); } else if (isDown(e)) { - this._modifyTimestampBy(ROW_SIZE); + this._modifyTimestampBy(this.rowSize); } else if (isPageUp(e)) { this._modifyTimestampBy(-PAGE_SIZE); } else if (isPageDown(e)) { @@ -213,7 +218,7 @@ class MonthPicker extends CalendarPart implements ICalendarPicker { } else if (isHomeCtrl(e)) { this._setTimestamp(parseInt(this._months[0][0].timestamp)); // first month of first row } else if (isEndCtrl(e)) { - this._setTimestamp(parseInt(this._months[PAGE_SIZE / ROW_SIZE - 1][ROW_SIZE - 1].timestamp)); // last month of last row + this._setTimestamp(parseInt(this._months[PAGE_SIZE / this.rowSize - 1][this.rowSize - 1].timestamp)); // last month of last row } else { preventDefault = false; } @@ -227,7 +232,7 @@ class MonthPicker extends CalendarPart implements ICalendarPicker { this._months.forEach(row => { const indexInRow = row.findIndex(item => CalendarDate.fromTimestamp(parseInt(item.timestamp) * 1000).getMonth() === this._calendarDate.getMonth()); if (indexInRow !== -1) { // The current month is on this row - const index = homePressed ? 0 : ROW_SIZE - 1; // select the first (if Home) or last (if End) month on the row + const index = homePressed ? 0 : this.rowSize - 1; // select the first (if Home) or last (if End) month on the row this._setTimestamp(parseInt(row[index].timestamp)); } }); diff --git a/packages/main/src/themes/Calendar.css b/packages/main/src/themes/Calendar.css index 71061e115ccb..a567334db309 100644 --- a/packages/main/src/themes/Calendar.css +++ b/packages/main/src/themes/Calendar.css @@ -11,6 +11,7 @@ display: flex; flex-direction: column-reverse; justify-content: flex-end; + overflow: hidden; } .ui5-cal-root [ui5-calendar-header] { diff --git a/packages/main/src/themes/MonthPicker.css b/packages/main/src/themes/MonthPicker.css index b85cbb5f0d44..8f1144d9ef84 100644 --- a/packages/main/src/themes/MonthPicker.css +++ b/packages/main/src/themes/MonthPicker.css @@ -1,3 +1,4 @@ + :host(:not([hidden])) { display: block; } @@ -8,6 +9,7 @@ } .ui5-mp-root { + box-sizing: border-box; padding: 2rem 0 1rem 0; display: flex; flex-direction: column; @@ -86,3 +88,24 @@ align-items: center; width: 100%; } + +/* Switching to a two column layout */ +:host([secondary-calendar-type="Persian"]:not([primary-calendar-type="Persian"])) .ui5-mp-root, +:host([secondary-calendar-type="Islamic"]:not([primary-calendar-type="Islamic"])) .ui5-mp-root { + display: grid; + padding: 0.5625rem 0; + grid-template-columns: repeat(2, 1fr); + gap: var(--_ui5_monthpicker_item_margin); +} + +:host([secondary-calendar-type="Persian"]:not([primary-calendar-type="Persian"])) .ui5-mp-item, +:host([secondary-calendar-type="Islamic"]:not([primary-calendar-type="Islamic"])) .ui5-mp-item { + margin: 0; + width: auto; +} + +:host([secondary-calendar-type="Persian"]:not([primary-calendar-type="Persian"])) .ui5-mp-quarter, +:host([secondary-calendar-type="Islamic"]:not([primary-calendar-type="Islamic"])) .ui5-mp-quarter { + width: 100%; + display: contents; +} \ No newline at end of file From 74d323d8d049872a2cf75ef44e4edf48a42b909a Mon Sep 17 00:00:00 2001 From: Stoyan <88034608+hinzzx@users.noreply.github.com> Date: Tue, 21 May 2024 09:18:04 +0300 Subject: [PATCH 2/3] fix(ui5-calendar): respect component level calendarType in week calculation (#8971) Fixed edge case where when a calendarType was being set to Islamic or Buddhist in the document configuration, and a primary-calendar-type="Gregorian" on a date component level where week numbering is present, the week numbers were calculated wrong. --- .../localization/src/dates/calculateWeekNumber.ts | 13 +++++++------ packages/main/src/DayPicker.ts | 2 +- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/localization/src/dates/calculateWeekNumber.ts b/packages/localization/src/dates/calculateWeekNumber.ts index 630343abfe9f..47dcf86510ad 100644 --- a/packages/localization/src/dates/calculateWeekNumber.ts +++ b/packages/localization/src/dates/calculateWeekNumber.ts @@ -1,9 +1,10 @@ import type Locale from "@ui5/webcomponents-base/dist/locale/Locale.js"; +import CalendarType from "@ui5/webcomponents-base/dist/types/CalendarType.js"; import UniversalDate from "./UniversalDate.js"; import type LocaleData from "../LocaleData.js"; import type UI5Date from "./UI5Date.js"; -const calculateWeekNumber = (confFirstDayOfWeek: number | undefined, oDate: Date | UI5Date, iYear: number, oLocale: Locale, oLocaleData: LocaleData) => { +const calculateWeekNumber = (confFirstDayOfWeek: number | undefined, oDate: Date | UI5Date, iYear: number, oLocale: Locale, oLocaleData: LocaleData, calendarType: CalendarType) => { let iWeekNum = 0; let iWeekDay = 0; const iFirstDayOfWeek = Number.isInteger(confFirstDayOfWeek) ? confFirstDayOfWeek! : oLocaleData.getFirstDayOfWeek(); @@ -17,12 +18,12 @@ const calculateWeekNumber = (confFirstDayOfWeek: number | undefined, oDate: Date * The first week of the year starts with January 1st. But Dec. 31 is still in the last year * So the week beginning in December and ending in January has 2 week numbers */ - const oJanFirst = new UniversalDate(oDate.getTime()); + const oJanFirst = UniversalDate.getInstance(oDate, calendarType); oJanFirst.setUTCFullYear(iYear, 0, 1); iWeekDay = oJanFirst.getUTCDay(); // get the date for the same weekday like jan 1. - const oCheckDate = new UniversalDate(oDate.getTime()); + const oCheckDate = UniversalDate.getInstance(oDate, calendarType); oCheckDate.setUTCDate(oCheckDate.getUTCDate() - oCheckDate.getUTCDay() + iWeekDay); iWeekNum = Math.round((oCheckDate.getTime() - oJanFirst.getTime()) / 86400000 / 7) + 1; @@ -30,19 +31,19 @@ const calculateWeekNumber = (confFirstDayOfWeek: number | undefined, oDate: Date // normally the first week of the year is the one where the first Thursday of the year is // find Thursday of this week // if the checked day is before the 1. day of the week use a day of the previous week to check - const oThursday = new UniversalDate(oDate.getTime()); + const oThursday = UniversalDate.getInstance(oDate, calendarType); oThursday.setUTCDate(oThursday.getUTCDate() - iFirstDayOfWeek); iWeekDay = oThursday.getUTCDay(); oThursday.setUTCDate(oThursday.getUTCDate() - iWeekDay + 4); - const oFirstDayOfYear = new UniversalDate(oThursday.getTime()); + const oFirstDayOfYear = UniversalDate.getInstance(new Date(oThursday.getTime()), calendarType); oFirstDayOfYear.setUTCMonth(0, 1); iWeekDay = oFirstDayOfYear.getUTCDay(); let iAddDays = 0; if (iWeekDay > 4) { iAddDays = 7; // first day of year is after Thursday, so first Thursday is in the next week } - const oFirstThursday = new UniversalDate(oFirstDayOfYear.getTime()); + const oFirstThursday = UniversalDate.getInstance(new Date(oFirstDayOfYear.getTime()), calendarType); oFirstThursday.setUTCDate(1 - iWeekDay + 4 + iAddDays); iWeekNum = Math.round((oThursday.getTime() - oFirstThursday.getTime()) / 86400000 / 7) + 1; diff --git a/packages/main/src/DayPicker.ts b/packages/main/src/DayPicker.ts index 32e2c85de4d2..8e9163b487e8 100644 --- a/packages/main/src/DayPicker.ts +++ b/packages/main/src/DayPicker.ts @@ -311,7 +311,7 @@ class DayPicker extends CalendarPart implements ICalendarPicker { if (dayOfTheWeek === DAYS_IN_WEEK - 1) { // 0-indexed so 6 is the last day of the week week.unshift({ - weekNum: calculateWeekNumber(getFirstDayOfWeek(), tempDate.toUTCJSDate(), tempDate.getYear(), getLocale(), localeData), + weekNum: calculateWeekNumber(getFirstDayOfWeek(), tempDate.toUTCJSDate(), tempDate.getYear(), getLocale(), localeData, this._primaryCalendarType as CalendarType), isHidden: this.shouldHideWeekNumbers, }); } From 6226b2a3e3f79cce7bc3b2382ff06f24ce967176 Mon Sep 17 00:00:00 2001 From: hinzzx Date: Tue, 8 Oct 2024 15:41:39 +0300 Subject: [PATCH 3/3] fix(ui5-menu-li): fix the font size of the text --- packages/main/src/themes/MenuListItem.css | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/main/src/themes/MenuListItem.css b/packages/main/src/themes/MenuListItem.css index ace19d008f31..888c4d5da1a6 100644 --- a/packages/main/src/themes/MenuListItem.css +++ b/packages/main/src/themes/MenuListItem.css @@ -45,6 +45,7 @@ white-space: nowrap; pointer-events: none; display: inline-block; + font-size: var(--sapFontSize); } .ui5-menu-item-dummy-icon {