feat(ui5-datetime-picker): replace time part wheelsliders with clocks (…

…#8129) * feat(ui5-datetime-picker): replace time part wheelsliders with clocks * feat(ui5-datetime-picker): fix comments * feat(ui5-datetime-picker): fix more comments * feat(ui5-datetime-picker): remove redundant getter * feat(ui5-datetime-picker): adjust mobile view * feat(ui5-datetime-picker): fix code reordering in openPicker method
SAP · Feb 1, 2024 · 9041e16 · 9041e16
1 parent 01f5542
commit 9041e16
Show file tree

Hide file tree

Showing 11 changed files with 142 additions and 103 deletions.
diff --git a/packages/main/src/DateTimePicker.ts b/packages/main/src/DateTimePicker.ts
@@ -4,7 +4,6 @@ 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";
@@ -19,8 +18,8 @@ import type {
 	DatePickerChangeEventDetail as DateTimePickerChangeEventDetail,
 	DatePickerInputEventDetail as DateTimePickerInputEventDetail,
 } from "./DatePicker.js";
-import TimeSelection from "./TimeSelection.js";
-import type { TimeSelectionChangeEventDetail, TimeSelectionSliderChangeEventDetail } from "./TimeSelection.js";
+import TimeSelectionClocks from "./TimeSelectionClocks.js";
+import type { TimeSelectionChangeEventDetail } from "./TimePickerInternals.js";
 
 // i18n texts
 import {
@@ -132,7 +131,7 @@ type PreviewValues = {
 		Button,
 		ToggleButton,
 		SegmentedButton,
-		TimeSelection,
+		TimeSelectionClocks,
 	],
 })
 class DateTimePicker extends DatePicker {
@@ -166,12 +165,6 @@ class DateTimePicker extends DatePicker {
 	@property({ type: Object })
 	_previewValues!: PreviewValues;
 
-	/**
-	 * @private
-	 */
-	@property({ defaultValue: "hours" })
-	_currentTimeSlider!: string;
-
 	_handleResizeBound: ResizeObserverCallback;
 
 	constructor() {
@@ -211,8 +204,10 @@ class DateTimePicker extends DatePicker {
 	 */
 	async openPicker(): Promise<void> {
 		await super.openPicker();
-		this._currentTimeSlider = "hours";
-		this._previewValues.timeSelectionValue = this.value || this.getFormat().format(new Date());
+		this._previewValues = {
+			...this._previewValues,
+			timeSelectionValue: this.value || this.getFormat().format(new Date()),
+		};
 	}
 
 	/**
@@ -329,10 +324,6 @@ class DateTimePicker extends DatePicker {
 		};
 	}
 
-	onTimeSliderChange(e: CustomEvent<TimeSelectionSliderChangeEventDetail>) {
-		this._currentTimeSlider = e.detail.slider;
-	}
-
 	/**
 	 * Handles document resize to switch between <code>phoneMode</code> and normal appearance.
 	 */
@@ -350,10 +341,6 @@ 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.
 	 */
@@ -385,9 +372,6 @@ class DateTimePicker extends DatePicker {
 	_dateTimeSwitchChange(e: CustomEvent) { // Note: fix when SegmentedButton is implemented in TS
 		const target = e.target as HTMLElement;
 		this._showTimeView = target.getAttribute("key") === "Time";
-		if (this._showTimeView) {
-			this._currentTimeSlider = "hours";
-		}
 	}
 
 	/**

diff --git a/packages/main/src/DateTimePickerPopover.hbs b/packages/main/src/DateTimePickerPopover.hbs
@@ -40,17 +40,14 @@
 		{{/unless}}
 
 		{{#if showTimeView}}
-			<ui5-time-selection
-					id="{{_id}}-time-sel"
-					class="ui5-dt-time {{classes.dateTimeView}}"
-					value="{{_timeSelectionValue}}"
-					format-pattern="{{_formatPattern}}"
-					._currentSlider="{{_currentTimeSlider}}"
-					._calendarType="{{_primaryCalendarType}}"
-					@ui5-change="{{onTimeSelectionChange}}"
-					@ui5-slider-change="{{onTimeSliderChange}}"
-					._density="{{_density}}"
-			></ui5-time-selection>
+			<ui5-time-selection-clocks
+				id="{{_id}}-time-sel"
+				class="ui5-dt-time {{classes.dateTimeView}}"
+				format-pattern="{{_formatPattern}}"
+				value="{{_timeSelectionValue}}"
+				@ui5-change="{{onTimeSelectionChange}}"
+				._calendarType="{{_primaryCalendarType}}"
+			></ui5-time-selection-clocks>
 		{{/if}}
 	</div>
 {{/inline}}

diff --git a/packages/main/src/TimePickerInternals.ts b/packages/main/src/TimePickerInternals.ts
@@ -59,6 +59,7 @@ type TimePickerEntityProperties = {
 	showInnerCircle?: boolean,
 	prependZero: boolean,
 	active?: boolean,
+	focused?: boolean,
 	hasSeparator?: boolean,
 	attributes?: TimePickerEntityAttributes,
 }

diff --git a/packages/main/src/TimeSelectionClocks.hbs b/packages/main/src/TimeSelectionClocks.hbs
@@ -5,6 +5,7 @@
 	@keydown={{_onkeydown}}
 	@keyup={{_onkeyup}}
 	@focusin={{_clocksFocusIn}}
+	@focusout={{_clocksFocusOut}}
 	format-pattern="{{formatPattern}}"
 >
 	<div
@@ -16,13 +17,14 @@
 		{{/if}}
 		<ui5-toggle-spin-button
 			id="{{../_id}}_button_{{this.entity}}"
+			data-sap-clock="{{this.entity}}"
 			.valueMin="{{this.attributes.min}}"
 			.valueMax="{{this.attributes.max}}"
 			.valueNow="{{this.value}}"
 			.valueText="{{this.textValue}}"
 			.accessibleName="{{this.label}}"
 			.pressed="{{this.active}}"
-			?focused="{{this.active}}"
+			?focused="{{this.focused}}"
 			@focusin="{{../_buttonFocusIn}}"
 		>{{this.stringValue}}</ui5-toggle-spin-button>
 	{{/each}}
@@ -31,6 +33,8 @@
 		<ui5-segmented-button
 			id="{{_id}}_AmPm"
 			@click={{_periodChange}}
+			@focusin={{_amPmFocusIn}}
+			@focusout={{_amPmFocusOut}}
 		>
 		{{#each _periods}}
     		<ui5-segmented-button-item

diff --git a/packages/main/src/TimeSelectionClocks.ts b/packages/main/src/TimeSelectionClocks.ts
@@ -1,5 +1,6 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js"; // default calendar for bundling
 import {
@@ -32,6 +33,11 @@ import TimeSelectionClocksTemplate from "./generated/templates/TimeSelectionCloc
 // Styles
 import TimeSelectionClocksCss from "./generated/themes/TimeSelectionClocks.css.js";
 
+/**
+ * Fired when the picker is being closed.
+ */
+@event("close-picker")
+
 /**
  * @class
  *
@@ -70,6 +76,18 @@ class TimeSelectionClocks extends TimePickerInternals {
 	@property({ type: Boolean, noAttribute: true })
 	_spacePressed!: boolean;
 
+	/**
+	 * Flag for focused state of Clocks component
+	 */
+	@property({ type: Boolean, noAttribute: true })
+	_focused!: boolean;
+
+	/**
+	 * Flag for focused state of AM/PM segmented button
+	 */
+	@property({ type: Boolean, noAttribute: true })
+	_amPmFocused!: boolean;
+
 	onBeforeRendering() {
 		this._createComponents();
 	}
@@ -105,11 +123,16 @@ class TimeSelectionClocks extends TimePickerInternals {
 	 */
 	_clocksFocusIn(evt: Event) {
 		const target = evt.target as HTMLElement;
+		this._focused = true;
 		if (target.id === this._id) {
 			this._switchClock(this._activeIndex);
 		}
 	}
 
+	_clocksFocusOut() {
+		this._focused = false;
+	}
+
 	/**
 	 * ToggleSpinButton focusin event handler.Switches to clock which button is being focused.
 	 *
@@ -123,6 +146,20 @@ class TimeSelectionClocks extends TimePickerInternals {
 		}
 	}
 
+	/**
+	 * AM/PM segmented button focusin event handler.
+	 */
+	_amPmFocusIn() {
+		this._amPmFocused = true;
+	}
+
+	/**
+	 * AM/PM segmented button focusout event handler.
+	 */
+	_amPmFocusOut() {
+		this._amPmFocused = false;
+	}
+
 	/**
 	 * keyup event handler.
 	 *
@@ -155,7 +192,7 @@ class TimeSelectionClocks extends TimePickerInternals {
 		} else if ((isUp(evt) || isDown(evt)) && !isUpAlt(evt) && !isDownAlt(evt)) {
 			// Arrows up/down increase/decrease currently active clock
 			clock = this._clockComponent(this._activeIndex);
-			clock && !clock.disabled && clock._modifyValue(isUp(evt));
+			clock && !clock.disabled && !this._amPmFocused && clock._modifyValue(isUp(evt));
 			evt.preventDefault();
 		} else if (isPageUp(evt) || isPageDown(evt)) {
 			// PageUp/PageDown increase/decrease hours clock
@@ -349,6 +386,7 @@ class TimeSelectionClocks extends TimePickerInternals {
 			});
 		}
 		this._entities[this._activeIndex].active = true;
+		this._entities[this._activeIndex].focused = this._focused && !this._amPmFocused;
 		this._createPeriodComponent();
 	}
 
@@ -374,8 +412,10 @@ class TimeSelectionClocks extends TimePickerInternals {
 
 		if (this._entities.length && clockIndex < this._entities.length && newButton) {
 			this._entities[this._activeIndex].active = false;
+			this._entities[this._activeIndex].focused = false;
 			this._activeIndex = clockIndex;
 			this._entities[this._activeIndex].active = true;
+			this._entities[this._activeIndex].focused = this._focused && !this._amPmFocused;
 			newButton.focus();
 		}
 	}

diff --git a/packages/main/src/themes/DateTimePickerPopover.css b/packages/main/src/themes/DateTimePickerPopover.css
@@ -68,10 +68,19 @@
 /* Phone mode */
 /* TODO: Improve that layouting */
 .ui5-dt-picker-content--phone.ui5-dt-picker-content {
-	min-width: auto;
+	min-width: 20rem;
 	height: calc(100% - 4rem);
 }
 
+.ui5-dt-picker-content--phone.ui5-dt-picker-content [ui5-time-selection-clocks] {
+	height: var(--_ui5_datetime_timeview_phonemode_clocks_width);
+	width: auto;
+}
+
+.ui5-dt-picker-content--phone.ui5-dt-picker-content [ui5-calendar] {
+	margin-bottom: var(--_ui5_datetime_dateview_phonemode_margin_bottom);
+}
+
 .ui5-dt-picker-content--phone .ui5-dt-cal {
 	width: 100%;
 }

diff --git a/packages/main/src/themes/TimePickerPopover.css b/packages/main/src/themes/TimePickerPopover.css
@@ -1,3 +1,7 @@
+.ui5-time-picker-popover {
+	width: 20rem;
+}
+
 .ui5-time-picker-footer {
 	height: fit-content;
 	display: flex;

diff --git a/packages/main/src/themes/TimeSelectionClocks.css b/packages/main/src/themes/TimeSelectionClocks.css
@@ -1,8 +1,7 @@
 .ui5-time-picker-tsc-container {
 	margin: 0 auto;
 	box-sizing: border-box;
-	width: 20rem;
-	height: 23.75rem;
+	width: 100%;
 	padding: 1rem;
 	text-align: center;
 }
@@ -16,7 +15,7 @@
 	justify-content: center;
 	align-items: center;
 	padding-bottom: 1rem;
-	width: 18rem;
+	width: 100%;
 }
 
 .ui5-time-picker-tsc-buttons span[separator] {
@@ -31,7 +30,6 @@
 .ui5-time-picker-tsc-clocks {
     display: block;
     text-align: center;
-    width: 18rem;
-    height: 18rem;
+    width: 100%;
     touch-action: none;
 }
diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css
@@ -35,6 +35,8 @@
 	--_ui5_datetime_timeview_width: 17rem;
 	--_ui5_datetime_timeview_phonemode_width: 19.5rem;
 	--_ui5_datetime_timeview_padding: 1rem;
+	--_ui5_datetime_timeview_phonemode_clocks_width: 24.5rem;
+	--_ui5_datetime_dateview_phonemode_margin_bottom: 0;
 
 	/* Dialog */
 	--_ui5_dialog_content_min_height: 2.75rem;
@@ -198,11 +200,13 @@
 	--_ui5_dp_two_calendar_item_text_padding_top: 0;
 
 	/* DateTimePicker */
-	--_ui5_datetime_picker_height: 17rem;
-	--_ui5_datetime_picker_width: 34.0625rem;
+	--_ui5_datetime_picker_height: 20.5rem;
+	--_ui5_datetime_picker_width: 35.5rem;
 	--_ui5_datetime_timeview_width: 17rem;
 	--_ui5_datetime_timeview_phonemode_width: 18.5rem;
 	--_ui5_datetime_timeview_padding: 0.5rem;
+	--_ui5_datetime_timeview_phonemode_clocks_width: 21.125rem;
+	--_ui5_datetime_dateview_phonemode_margin_bottom: 3.125rem;
 
 	/* Dialog */
 	--_ui5_dialog_content_min_height: 2.5rem;

diff --git a/packages/main/test/pages/DateTimePicker.html b/packages/main/test/pages/DateTimePicker.html
@@ -35,28 +35,28 @@
 
 		<br>
 
-		<br><ui5-label>d/MM/yyyy, hh:mm aa</ui5-label><br>
+		<br><ui5-label>d/MM/yyyy, hh:mm a</ui5-label><br>
 		<ui5-datetime-picker
 			id="dtMinutes"
-			format-pattern="dd/MM/yyyy, hh:mm aa"
+			format-pattern="dd/MM/yyyy, hh:mm a"
 			value="13/04/2020, 09:16 AM"
 		></ui5-datetime-picker>
 
 		<br>
 
-		<br><ui5-label>d/MM/yyyy, hh:mm:ss aa</ui5-label><br>
+		<br><ui5-label>d/MM/yyyy, hh:mm:ss a</ui5-label><br>
 		<ui5-datetime-picker
 			id="dtSeconds"
-			format-pattern="dd/MM/yyyy, hh:mm:ss aa"
+			format-pattern="dd/MM/yyyy, hh:mm:ss a"
 			value="13/04/2020, 03:16:16 AM"
 		></ui5-datetime-picker>
 
 		<br>
 
-		<br><ui5-label>yyyy-MM-dd-hh:mm:ss aa</ui5-label><br>
+		<br><ui5-label>yyyy-MM-dd-hh:mm:ss a</ui5-label><br>
 		<ui5-datetime-picker
 			id="dtPreventDefault"
-			format-pattern="yyyy-MM-dd-hh:mm:ss aa"
+			format-pattern="yyyy-MM-dd-hh:mm:ss a"
 		></ui5-datetime-picker>
 
 		<br>
@@ -127,13 +127,13 @@
 	<section>
 	<ui5-datetime-picker
 			id="dtTest12AM"
-			format-pattern="dd/MM/yyyy, hh:mm:ss aa"
+			format-pattern="dd/MM/yyyy, hh:mm:ss a"
 			value="13/04/2020, 03:16:16 AM"
 		></ui5-datetime-picker>
 	</section>
 	<ui5-datetime-picker
 			id="dtTest12PM"
-			format-pattern="dd/MM/yyyy, hh:mm:ss aa"
+			format-pattern="dd/MM/yyyy, hh:mm:ss a"
 			value="13/04/2020, 03:16:16 AM">
 		</ui5-datetime-picker>
 
@@ -155,7 +155,7 @@
 
 		<br>
 		<ui5-datetime-picker
-			format-pattern="yyyy-MM-dd-hh:mm:ss aa"
+			format-pattern="yyyy-MM-dd-hh:mm:ss a"
 			value="2020-04-13-04:16:16 AM"
 		></ui5-datetime-picker>
 	</section>