From 43d2fab2c4ed46d8817aba8a0f566aee13bc64c8 Mon Sep 17 00:00:00 2001 From: hinzzx Date: Fri, 15 Mar 2024 13:53:14 +0200 Subject: [PATCH 01/10] fix(ui5-monthpicker): switch to two column layout on Islamic or Persian secondary calendar type --- packages/main/src/MonthPicker.ts | 3 ++- packages/main/src/themes/MonthPicker.css | 20 ++++++++++++++++++++ 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/packages/main/src/MonthPicker.ts b/packages/main/src/MonthPicker.ts index 2eeb6015216a..65774213f629 100644 --- a/packages/main/src/MonthPicker.ts +++ b/packages/main/src/MonthPicker.ts @@ -36,7 +36,7 @@ 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) +let ROW_SIZE = 3; // months per row (4 rows of 3 months each) type Month = { timestamp: string, @@ -117,6 +117,7 @@ class MonthPicker extends CalendarPart implements ICalendarPicker { onBeforeRendering() { this._buildMonths(); + ROW_SIZE = this.secondaryCalendarType === "Islamic" || this.secondaryCalendarType === "Persian" ? 2 : 3; } onAfterRendering() { diff --git a/packages/main/src/themes/MonthPicker.css b/packages/main/src/themes/MonthPicker.css index b85cbb5f0d44..62f6d96a9645 100644 --- a/packages/main/src/themes/MonthPicker.css +++ b/packages/main/src/themes/MonthPicker.css @@ -86,3 +86,23 @@ align-items: center; width: 100%; } + +/* Switching to a two column layout */ +:host([secondary-calendar-type="Persian"]) .ui5-mp-root, +:host([secondary-calendar-type="Islamic"]) .ui5-mp-root { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--_ui5_monthpicker_item_margin); +} + +:host([secondary-calendar-type="Persian"]) .ui5-mp-item, +:host([secondary-calendar-type="Islamic"]) .ui5-mp-item { + margin: 0; + width: auto; +} + +:host([secondary-calendar-type="Persian"]) .ui5-mp-quarter, +:host([secondary-calendar-type="Islamic"]) .ui5-mp-quarter { + width: 100%; + display: contents; +} From 5eb581b2726eb79e767ef95a46f80e9267f4798a Mon Sep 17 00:00:00 2001 From: hinzzx Date: Fri, 15 Mar 2024 15:26:04 +0200 Subject: [PATCH 02/10] fix(ui5-monthpicker): align vertically --- packages/main/src/themes/MonthPicker.css | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/main/src/themes/MonthPicker.css b/packages/main/src/themes/MonthPicker.css index 62f6d96a9645..401662d286b6 100644 --- a/packages/main/src/themes/MonthPicker.css +++ b/packages/main/src/themes/MonthPicker.css @@ -91,6 +91,7 @@ :host([secondary-calendar-type="Persian"]) .ui5-mp-root, :host([secondary-calendar-type="Islamic"]) .ui5-mp-root { display: grid; + padding: 1rem 0 1rem; grid-template-columns: repeat(2, 1fr); gap: var(--_ui5_monthpicker_item_margin); } From 89cf33d44047137314404876b41f7ecfb699870c Mon Sep 17 00:00:00 2001 From: Nayden Naydenov Date: Thu, 28 Mar 2024 14:25:42 +0200 Subject: [PATCH 03/10] refactor: simplify row logic --- packages/main/src/MonthPicker.hbs | 38 ++++++++++-------------- packages/main/src/MonthPicker.ts | 32 +++++++------------- packages/main/src/themes/MonthPicker.css | 37 +++++------------------ 3 files changed, 35 insertions(+), 72 deletions(-) diff --git a/packages/main/src/MonthPicker.hbs b/packages/main/src/MonthPicker.hbs index 7b13548f23a5..13e41fdc4ec8 100644 --- a/packages/main/src/MonthPicker.hbs +++ b/packages/main/src/MonthPicker.hbs @@ -9,28 +9,22 @@ @click={{_selectMonth}} > {{#each _months}} -
- - {{#each this}} -
- - {{this.name}} - - {{#if this.nameInSecType}} - - {{this.nameInSecType}} - - {{/if}} -
- {{/each}} - +
+ + {{this.name}} + + {{#if this.nameInSecType}} + + {{this.nameInSecType}} + + {{/if}}
{{/each}}
diff --git a/packages/main/src/MonthPicker.ts b/packages/main/src/MonthPicker.ts index 65774213f629..5166ccb9c0b4 100644 --- a/packages/main/src/MonthPicker.ts +++ b/packages/main/src/MonthPicker.ts @@ -36,7 +36,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 -let ROW_SIZE = 3; // months per row (4 rows of 3 months each) type Month = { timestamp: string, @@ -50,7 +49,7 @@ type Month = { classes: string, } -type MonthInterval = Array>; +type MonthInterval = Array; type MonthPickerChangeEventDetail = { timestamp: number, @@ -117,7 +116,6 @@ class MonthPicker extends CalendarPart implements ICalendarPicker { onBeforeRendering() { this._buildMonths(); - ROW_SIZE = this.secondaryCalendarType === "Islamic" || this.secondaryCalendarType === "Persian" ? 2 : 3; } onAfterRendering() { @@ -126,6 +124,10 @@ class MonthPicker extends CalendarPart implements ICalendarPicker { } } + get rowSize() { + return this.secondaryCalendarType === "Islamic" || this.secondaryCalendarType === "Persian" ? 2 : 3; + } + _buildMonths() { if (this._hidden) { return; @@ -173,13 +175,7 @@ class MonthPicker extends CalendarPart implements ICalendarPicker { month.classes += " ui5-mp-item--disabled"; } - const quarterIndex = Math.floor(i / ROW_SIZE); - - if (months[quarterIndex]) { - months[quarterIndex].push(month); - } else { - months[quarterIndex] = [month]; - } + months.push(month); } this._months = months; @@ -202,9 +198,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)) { @@ -212,9 +208,9 @@ class MonthPicker extends CalendarPart implements ICalendarPicker { } else if (isHome(e) || isEnd(e)) { this._onHomeOrEnd(isHome(e)); } else if (isHomeCtrl(e)) { - this._setTimestamp(parseInt(this._months[0][0].timestamp)); // first month of first row + this._setTimestamp(parseInt(this._months[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[this._months.length - 1].timestamp)); // last month of last row } else { preventDefault = false; } @@ -225,13 +221,7 @@ class MonthPicker extends CalendarPart implements ICalendarPicker { } _onHomeOrEnd(homePressed: boolean) { - 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 - this._setTimestamp(parseInt(row[index].timestamp)); - } - }); + this._setTimestamp(parseInt(this._months[homePressed ? 0 : this._months.length - 1].timestamp)); } /** diff --git a/packages/main/src/themes/MonthPicker.css b/packages/main/src/themes/MonthPicker.css index 401662d286b6..897499d91b16 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,25 +9,24 @@ } .ui5-mp-root { + box-sizing: border-box; padding: 2rem 0 1rem 0; - display: flex; - flex-direction: column; + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--_ui5_monthpicker_item_margin); font-family: "72override", var(--sapFontFamily); font-size: var(--sapFontSize); - justify-content: center; - align-items: center; } .ui5-mp-item { display: flex; flex-direction: column; - width: calc(33.333% - 0.125rem); - height: var(--_ui5_month_picker_item_height); + box-sizing: border-box; + height: calc(var(--_ui5_month_picker_item_height) - var(--_ui5_monthpicker_item_margin)); color: var(--sapButton_Lite_TextColor); background-color: var(--sapLegend_WorkingBackground); align-items: center; justify-content: center; - margin: var(--_ui5_monthpicker_item_margin); box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; @@ -80,30 +80,9 @@ border-radius: var(--_ui5_monthpicker_item_focus_after_border_radius); } -.ui5-mp-quarter { - display: flex; - justify-content: center; - align-items: center; - width: 100%; -} - /* Switching to a two column layout */ :host([secondary-calendar-type="Persian"]) .ui5-mp-root, :host([secondary-calendar-type="Islamic"]) .ui5-mp-root { - display: grid; padding: 1rem 0 1rem; grid-template-columns: repeat(2, 1fr); - gap: var(--_ui5_monthpicker_item_margin); -} - -:host([secondary-calendar-type="Persian"]) .ui5-mp-item, -:host([secondary-calendar-type="Islamic"]) .ui5-mp-item { - margin: 0; - width: auto; -} - -:host([secondary-calendar-type="Persian"]) .ui5-mp-quarter, -:host([secondary-calendar-type="Islamic"]) .ui5-mp-quarter { - width: 100%; - display: contents; -} +} \ No newline at end of file From 191e97ee87b83a0fe70a5428d075c923977f5f1b Mon Sep 17 00:00:00 2001 From: Nayden Naydenov Date: Thu, 28 Mar 2024 14:27:25 +0200 Subject: [PATCH 04/10] refactor: use const for page size --- packages/main/src/MonthPicker.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/main/src/MonthPicker.ts b/packages/main/src/MonthPicker.ts index 5166ccb9c0b4..97c62921ab4e 100644 --- a/packages/main/src/MonthPicker.ts +++ b/packages/main/src/MonthPicker.ts @@ -144,7 +144,7 @@ class MonthPicker extends CalendarPart implements ICalendarPicker { let timestamp; /* eslint-disable no-loop-func */ - for (let i = 0; i < 12; i++) { + for (let i = 0; i < PAGE_SIZE; i++) { tempDate.setMonth(i); timestamp = tempDate.valueOf() / 1000; @@ -210,7 +210,7 @@ class MonthPicker extends CalendarPart implements ICalendarPicker { } else if (isHomeCtrl(e)) { this._setTimestamp(parseInt(this._months[0].timestamp)); // first month of first row } else if (isEndCtrl(e)) { - this._setTimestamp(parseInt(this._months[this._months.length - 1].timestamp)); // last month of last row + this._setTimestamp(parseInt(this._months[PAGE_SIZE - 1].timestamp)); // last month of last row } else { preventDefault = false; } @@ -221,7 +221,7 @@ class MonthPicker extends CalendarPart implements ICalendarPicker { } _onHomeOrEnd(homePressed: boolean) { - this._setTimestamp(parseInt(this._months[homePressed ? 0 : this._months.length - 1].timestamp)); + this._setTimestamp(parseInt(this._months[homePressed ? 0 : PAGE_SIZE - 1].timestamp)); } /** From b9799a3f63cddcf1524b7fa1ac82687c3c3c9f4c Mon Sep 17 00:00:00 2001 From: hinzzx Date: Wed, 10 Apr 2024 16:39:53 +0300 Subject: [PATCH 05/10] Revert "refactor: use const for page size" This reverts commit 191e97ee87b83a0fe70a5428d075c923977f5f1b. --- packages/main/src/MonthPicker.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/main/src/MonthPicker.ts b/packages/main/src/MonthPicker.ts index 97c62921ab4e..5166ccb9c0b4 100644 --- a/packages/main/src/MonthPicker.ts +++ b/packages/main/src/MonthPicker.ts @@ -144,7 +144,7 @@ class MonthPicker extends CalendarPart implements ICalendarPicker { let timestamp; /* eslint-disable no-loop-func */ - for (let i = 0; i < PAGE_SIZE; i++) { + for (let i = 0; i < 12; i++) { tempDate.setMonth(i); timestamp = tempDate.valueOf() / 1000; @@ -210,7 +210,7 @@ class MonthPicker extends CalendarPart implements ICalendarPicker { } else if (isHomeCtrl(e)) { this._setTimestamp(parseInt(this._months[0].timestamp)); // first month of first row } else if (isEndCtrl(e)) { - this._setTimestamp(parseInt(this._months[PAGE_SIZE - 1].timestamp)); // last month of last row + this._setTimestamp(parseInt(this._months[this._months.length - 1].timestamp)); // last month of last row } else { preventDefault = false; } @@ -221,7 +221,7 @@ class MonthPicker extends CalendarPart implements ICalendarPicker { } _onHomeOrEnd(homePressed: boolean) { - this._setTimestamp(parseInt(this._months[homePressed ? 0 : PAGE_SIZE - 1].timestamp)); + this._setTimestamp(parseInt(this._months[homePressed ? 0 : this._months.length - 1].timestamp)); } /** From c0838a6fcfa639c3aabdac150c6ee68f9ba4aad6 Mon Sep 17 00:00:00 2001 From: hinzzx Date: Wed, 10 Apr 2024 17:19:39 +0300 Subject: [PATCH 06/10] fix: revert home/end interaction changes --- packages/main/src/MonthPicker.ts | 22 +++++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/packages/main/src/MonthPicker.ts b/packages/main/src/MonthPicker.ts index 5166ccb9c0b4..a4109d0417f1 100644 --- a/packages/main/src/MonthPicker.ts +++ b/packages/main/src/MonthPicker.ts @@ -49,7 +49,7 @@ type Month = { classes: string, } -type MonthInterval = Array; +type MonthInterval = Array>; type MonthPickerChangeEventDetail = { timestamp: number, @@ -175,7 +175,13 @@ class MonthPicker extends CalendarPart implements ICalendarPicker { month.classes += " ui5-mp-item--disabled"; } - months.push(month); + const quarterIndex = Math.floor(i / this.rowSize); + + if (months[quarterIndex]) { + months[quarterIndex].push(month); + } else { + months[quarterIndex] = [month]; + } } this._months = months; @@ -208,9 +214,9 @@ class MonthPicker extends CalendarPart implements ICalendarPicker { } else if (isHome(e) || isEnd(e)) { this._onHomeOrEnd(isHome(e)); } else if (isHomeCtrl(e)) { - this._setTimestamp(parseInt(this._months[0].timestamp)); // first month of first row + this._setTimestamp(parseInt(this._months[0][0].timestamp)); // first month of first row } else if (isEndCtrl(e)) { - this._setTimestamp(parseInt(this._months[this._months.length - 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; } @@ -221,7 +227,13 @@ class MonthPicker extends CalendarPart implements ICalendarPicker { } _onHomeOrEnd(homePressed: boolean) { - this._setTimestamp(parseInt(this._months[homePressed ? 0 : this._months.length - 1].timestamp)); + 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 : this.rowSize - 1; // select the first (if Home) or last (if End) month on the row + this._setTimestamp(parseInt(row[index].timestamp)); + } + }); } /** From c5e2a3d8c9e249de509a9809793ece9fef582929 Mon Sep 17 00:00:00 2001 From: hinzzx Date: Thu, 11 Apr 2024 09:06:10 +0300 Subject: [PATCH 07/10] refactor: revert dom and css changes --- packages/main/src/MonthPicker.hbs | 40 ++++++++++++++---------- packages/main/src/MonthPicker.ts | 3 +- packages/main/src/themes/Calendar.css | 1 + packages/main/src/themes/MonthPicker.css | 33 ++++++++++++++++--- 4 files changed, 54 insertions(+), 23 deletions(-) diff --git a/packages/main/src/MonthPicker.hbs b/packages/main/src/MonthPicker.hbs index 13e41fdc4ec8..b7cd64ef408e 100644 --- a/packages/main/src/MonthPicker.hbs +++ b/packages/main/src/MonthPicker.hbs @@ -9,22 +9,28 @@ @click={{_selectMonth}} > {{#each _months}} -
- - {{this.name}} - - {{#if this.nameInSecType}} - - {{this.nameInSecType}} - - {{/if}} +
+ + {{#each this}} +
+ + {{this.name}} + + {{#if this.nameInSecType}} + + {{this.nameInSecType}} + + {{/if}} +
+ {{/each}} +
{{/each}} -
+ \ No newline at end of file diff --git a/packages/main/src/MonthPicker.ts b/packages/main/src/MonthPicker.ts index a4109d0417f1..f45d67ed3b10 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, @@ -125,7 +126,7 @@ class MonthPicker extends CalendarPart implements ICalendarPicker { } get rowSize() { - return this.secondaryCalendarType === "Islamic" || this.secondaryCalendarType === "Persian" ? 2 : 3; + return this.secondaryCalendarType === CalendarType.Islamic || this.secondaryCalendarType === CalendarType.Persian ? 2 : 3; } _buildMonths() { 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 897499d91b16..6cbba34e37b5 100644 --- a/packages/main/src/themes/MonthPicker.css +++ b/packages/main/src/themes/MonthPicker.css @@ -11,22 +11,24 @@ .ui5-mp-root { box-sizing: border-box; padding: 2rem 0 1rem 0; - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: var(--_ui5_monthpicker_item_margin); + display: flex; + flex-direction: column; font-family: "72override", var(--sapFontFamily); font-size: var(--sapFontSize); + justify-content: center; + align-items: center; } .ui5-mp-item { display: flex; flex-direction: column; - box-sizing: border-box; - height: calc(var(--_ui5_month_picker_item_height) - var(--_ui5_monthpicker_item_margin)); + width: calc(33.333% - 0.125rem); + height: var(--_ui5_month_picker_item_height); color: var(--sapButton_Lite_TextColor); background-color: var(--sapLegend_WorkingBackground); align-items: center; justify-content: center; + margin: var(--_ui5_monthpicker_item_margin); box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; @@ -80,9 +82,30 @@ border-radius: var(--_ui5_monthpicker_item_focus_after_border_radius); } +.ui5-mp-quarter { + display: flex; + justify-content: center; + align-items: center; + width: 100%; +} + /* Switching to a two column layout */ :host([secondary-calendar-type="Persian"]) .ui5-mp-root, :host([secondary-calendar-type="Islamic"]) .ui5-mp-root { + display: grid; padding: 1rem 0 1rem; grid-template-columns: repeat(2, 1fr); + gap: var(--_ui5_monthpicker_item_margin); +} + +:host([secondary-calendar-type="Persian"]) .ui5-mp-item, +:host([secondary-calendar-type="Islamic"]) .ui5-mp-item { + margin: 0; + width: auto; +} + +:host([secondary-calendar-type="Persian"]) .ui5-mp-quarter, +:host([secondary-calendar-type="Islamic"]) .ui5-mp-quarter { + width: 100%; + display: contents; } \ No newline at end of file From 87c3826de8e4a3adb23a60b48b58289ab601070d Mon Sep 17 00:00:00 2001 From: hinzzx Date: Fri, 26 Apr 2024 12:04:33 +0300 Subject: [PATCH 08/10] fix(ui5-calendar): remove two column layout when secondary and primaty calendar types are the same --- packages/main/src/MonthPicker.ts | 3 ++- packages/main/src/themes/MonthPicker.css | 12 ++++++------ 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/main/src/MonthPicker.ts b/packages/main/src/MonthPicker.ts index f45d67ed3b10..acb8d9c71134 100644 --- a/packages/main/src/MonthPicker.ts +++ b/packages/main/src/MonthPicker.ts @@ -126,7 +126,8 @@ class MonthPicker extends CalendarPart implements ICalendarPicker { } get rowSize() { - return this.secondaryCalendarType === CalendarType.Islamic || this.secondaryCalendarType === CalendarType.Persian ? 2 : 3; + return (this.secondaryCalendarType === CalendarType.Islamic && this.primaryCalendarType !== CalendarType.Islamic) + || (this.secondaryCalendarType === CalendarType.Persian && this.primaryCalendarType !== CalendarType.Persian) ? 2 : 3; } _buildMonths() { diff --git a/packages/main/src/themes/MonthPicker.css b/packages/main/src/themes/MonthPicker.css index 6cbba34e37b5..b39dfbd9d7cb 100644 --- a/packages/main/src/themes/MonthPicker.css +++ b/packages/main/src/themes/MonthPicker.css @@ -90,22 +90,22 @@ } /* Switching to a two column layout */ -:host([secondary-calendar-type="Persian"]) .ui5-mp-root, -:host([secondary-calendar-type="Islamic"]) .ui5-mp-root { +: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: 1rem 0 1rem; grid-template-columns: repeat(2, 1fr); gap: var(--_ui5_monthpicker_item_margin); } -:host([secondary-calendar-type="Persian"]) .ui5-mp-item, -:host([secondary-calendar-type="Islamic"]) .ui5-mp-item { +: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"]) .ui5-mp-quarter, -:host([secondary-calendar-type="Islamic"]) .ui5-mp-quarter { +: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 0ffe8652f00c9c9a401ebf1eaa8ab017d40c1bdb Mon Sep 17 00:00:00 2001 From: hinzzx Date: Fri, 26 Apr 2024 17:24:37 +0300 Subject: [PATCH 09/10] fix(ui5-calendar): fix header jumping in two column layout --- packages/main/src/themes/MonthPicker.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/main/src/themes/MonthPicker.css b/packages/main/src/themes/MonthPicker.css index b39dfbd9d7cb..5c921ac9b500 100644 --- a/packages/main/src/themes/MonthPicker.css +++ b/packages/main/src/themes/MonthPicker.css @@ -93,7 +93,7 @@ :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: 1rem 0 1rem; + padding: 0.75rem 0 0.75rem; grid-template-columns: repeat(2, 1fr); gap: var(--_ui5_monthpicker_item_margin); } From eb011f727afc359468e85f226b3a947e31c6e4a2 Mon Sep 17 00:00:00 2001 From: hinzzx Date: Wed, 8 May 2024 13:14:37 +0300 Subject: [PATCH 10/10] chore: fix header jump switching from month to year picker --- packages/main/src/themes/MonthPicker.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/main/src/themes/MonthPicker.css b/packages/main/src/themes/MonthPicker.css index 5c921ac9b500..8f1144d9ef84 100644 --- a/packages/main/src/themes/MonthPicker.css +++ b/packages/main/src/themes/MonthPicker.css @@ -93,7 +93,7 @@ :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.75rem 0 0.75rem; + padding: 0.5625rem 0; grid-template-columns: repeat(2, 1fr); gap: var(--_ui5_monthpicker_item_margin); }