fix(ui5-date-time-picker): align calculations with density change (#8090

) fixes: #7992
SAP · Jan 19, 2024 · bc035bb · bc035bb
1 parent 5e2b89b
commit bc035bb
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 2 deletions.
diff --git a/packages/main/src/DateTimePicker.ts b/packages/main/src/DateTimePicker.ts
@@ -4,6 +4,7 @@ import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.j
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
 import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
+import getEffectiveContentDensity from "@ui5/webcomponents-base/dist/util/getEffectiveContentDensity.js";
 import modifyDateBy from "@ui5/webcomponents-localization/dist/dates/modifyDateBy.js";
 import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
 import "@ui5/webcomponents-icons/dist/date-time.js";
@@ -349,6 +350,10 @@ class DateTimePicker extends DatePicker {
 		return !this._calendarSelectedDates || !this._calendarSelectedDates.length;
 	}
 
+	get _density() {
+		return getEffectiveContentDensity(this);
+	}
+
 	/**
 	 * Handles clicking on the <code>submit</code> button, within the picker`s footer.
 	 */

diff --git a/packages/main/src/DateTimePickerPopover.hbs b/packages/main/src/DateTimePickerPopover.hbs
@@ -49,6 +49,7 @@
 					._calendarType="{{_primaryCalendarType}}"
 					@ui5-change="{{onTimeSelectionChange}}"
 					@ui5-slider-change="{{onTimeSliderChange}}"
+					._density="{{_density}}"
 			></ui5-time-selection>
 		{{/if}}
 	</div>

diff --git a/packages/main/src/TimeSelection.hbs b/packages/main/src/TimeSelection.hbs
@@ -9,6 +9,7 @@
 		<ui5-wheelslider
 				label = "{{hoursSliderTitle}}"
 				._items="{{hoursArray}}"
+				._density="{{_density}}"
 				data-sap-focus-ref
 				?expanded="{{_hoursSliderFocused}}"
 				value="{{_hours}}"
@@ -23,6 +24,7 @@
 		<ui5-wheelslider
 				label = "{{minutesSliderTitle}}"
 				._items="{{minutesArray}}"
+				._density="{{_density}}"
 				?expanded="{{_minutesSliderFocused}}"
 				value="{{_minutes}}"
 				@ui5-select="{{onMinutesChange}}"
@@ -36,6 +38,7 @@
 		<ui5-wheelslider
 				label = "{{secondsSliderTitle}}"
 				._items="{{secondsArray}}"
+				._density="{{_density}}"
 				?expanded="{{_secondsSliderFocused}}"
 				value="{{_seconds}}"
 				@ui5-select="{{onSecondsChange}}"
@@ -49,6 +52,7 @@
 		<ui5-wheelslider
 				label = "{{periodSliderTitle}}"
 				._items="{{periodsArray}}"
+				._density="{{_density}}"
 				?expanded="{{_periodSliderFocused}}"
 				value="{{_period}}"
 				@ui5-select="{{onPeriodChange}}"

diff --git a/packages/main/src/TimeSelection.ts b/packages/main/src/TimeSelection.ts
@@ -176,6 +176,9 @@ class TimeSelection extends UI5Element {
 	@property({ type: CalendarType })
 	_calendarType!: CalendarType;
 
+	@property()
+	_density!: string;
+
 	static i18nBundle: I18nBundle;
 
 	static async onDefine() {

diff --git a/packages/main/src/WheelSlider.hbs b/packages/main/src/WheelSlider.hbs
@@ -9,6 +9,7 @@
 	data-sap-focus-ref
 	tabindex="0"
 	@wheel="{{_handleWheel}}"
+	._density="{{_density}}"
 >
 	<div class="ui5-wheelslider-header-block">
 		<div id="{{this._id}}--label" class="ui5-wheelslider-label">{{label}}</div>

diff --git a/packages/main/src/WheelSlider.ts b/packages/main/src/WheelSlider.ts
@@ -11,7 +11,6 @@ import {
 	isPageUp,
 	isPageDown,
 } from "@ui5/webcomponents-base/dist/Keys.js";
-import getEffectiveContentDensity from "@ui5/webcomponents-base/dist/util/getEffectiveContentDensity.js";
 import "@ui5/webcomponents-icons/dist/navigation-up-arrow.js";
 import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
 import ScrollEnablement from "@ui5/webcomponents-base/dist/delegate/ScrollEnablement.js";
@@ -134,6 +133,9 @@ class WheelSlider extends UI5Element {
 	_scroller: ScrollEnablement;
 	_prevWheelTimestamp?: number;
 
+	@property()
+	_density!: string;
+
 	constructor() {
 		super();
 		this._currentElementIndex = 0;
@@ -200,7 +202,7 @@ class WheelSlider extends UI5Element {
 	}
 
 	get _itemCellHeight() {
-		const defaultSize = getEffectiveContentDensity(document.body) === "compact" ? CELL_SIZE_COMPACT : CELL_SIZE_COZY;
+		const defaultSize = this._density === "compact" ? CELL_SIZE_COMPACT : CELL_SIZE_COZY;
 
 		if (this.shadowRoot!.querySelectorAll(".ui5-wheelslider-item").length) {
 			const itemComputedStyle = getComputedStyle(this.shadowRoot!.querySelector(".ui5-wheelslider-item")!);