fix(ui5-calendar): switch to two column layout on Islamic or Persian …

…secondary calendar type (#8943) Properly switches to two column layout when Islamic or Persian secondary calendar type are used Fixes: #8453
SAP · May 13, 2024 · be342e7 · be342e7
1 parent 184175b
commit be342e7
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 7 deletions.
diff --git a/packages/main/src/MonthPicker.hbs b/packages/main/src/MonthPicker.hbs
@@ -33,4 +33,4 @@
 
 		</div>
 	{{/each}}
-</div>
+</div>
diff --git 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
@@ -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
@@ -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;
+}