Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 8 commits into from
Feb 1, 2024
Merged

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

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a70d6d1
feat(ui5-datetime-picker): replace time part wheelsliders with clocks
NHristov-sap Jan 17, 2024
6c6ea1e
feat(ui5-datetime-picker): fix comments
NHristov-sap Jan 23, 2024
4322961
Merge branch 'main' into BL_dtp_clocks
NHristov-sap Jan 23, 2024
b3211ed
feat(ui5-datetime-picker): fix more comments
NHristov-sap Jan 29, 2024
ab80275
Merge branch 'BL_dtp_clocks' of https://github.com/SAP/ui5-webcompone…
NHristov-sap Jan 29, 2024
9e278fd
feat(ui5-datetime-picker): remove redundant getter
NHristov-sap Jan 29, 2024
7842141
feat(ui5-datetime-picker): adjust mobile view
NHristov-sap Jan 30, 2024
7b29e51
feat(ui5-datetime-picker): fix code reordering in openPicker method
NHristov-sap Feb 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 4 additions & 23 deletions packages/main/src/DateTimePicker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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 {
Expand Down Expand Up @@ -132,7 +131,7 @@ type PreviewValues = {
Button,
ToggleButton,
SegmentedButton,
TimeSelection,
TimeSelectionClocks,
],
})
class DateTimePicker extends DatePicker {
Expand Down Expand Up @@ -166,12 +165,6 @@ class DateTimePicker extends DatePicker {
@property({ type: Object })
_previewValues!: PreviewValues;

/**
* @private
*/
@property({ defaultValue: "hours" })
_currentTimeSlider!: string;

_handleResizeBound: ResizeObserverCallback;

constructor() {
Expand Down Expand Up @@ -210,9 +203,8 @@ class DateTimePicker extends DatePicker {
* @public
*/
async openPicker(): Promise<void> {
await super.openPicker();
this._currentTimeSlider = "hours";
this._previewValues.timeSelectionValue = this.value || this.getFormat().format(new Date());
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

also please check _calendarSelectedDates and _calendarTimestamp. Seems that the fallback is always executed and the overrides seems to be redundant.

Copy link
Contributor Author

@NHristov-sap NHristov-sap Feb 1, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the mentioned getters _calendarSelectedDates and _calendarTimestamp are necessary, you can check it by commenting them and try to use a picker when there is no date selected already.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this._previewValues. _calendarSelectedDates is never set so we always use the value which comes from the parent class. Take this as possible cleanup in separate PR

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is set in the onSelectedDatesChange method

await super.openPicker();
NHristov-sap marked this conversation as resolved.
Show resolved Hide resolved
}

/**
Expand Down Expand Up @@ -329,10 +321,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.
*/
Expand All @@ -350,10 +338,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.
*/
Expand Down Expand Up @@ -385,9 +369,6 @@ class DateTimePicker extends DatePicker {
_dateTimeSwitchChange(e: CustomEvent) { // Note: fix when SegmentedButton is implemented in TS
NHristov-sap marked this conversation as resolved.
Show resolved Hide resolved
const target = e.target as HTMLElement;
this._showTimeView = target.getAttribute("key") === "Time";
if (this._showTimeView) {
this._currentTimeSlider = "hours";
}
}

/**
Expand Down
19 changes: 8 additions & 11 deletions packages/main/src/DateTimePickerPopover.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
Expand Down
1 change: 1 addition & 0 deletions packages/main/src/TimePickerInternals.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ type TimePickerEntityProperties = {
showInnerCircle?: boolean,
prependZero: boolean,
active?: boolean,
focused?: boolean,
hasSeparator?: boolean,
attributes?: TimePickerEntityAttributes,
}
Expand Down
6 changes: 5 additions & 1 deletion packages/main/src/TimeSelectionClocks.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
@keydown={{_onkeydown}}
@keyup={{_onkeyup}}
@focusin={{_clocksFocusIn}}
@focusout={{_clocksFocusOut}}
format-pattern="{{formatPattern}}"
>
<div
Expand All @@ -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}}"
NHristov-sap marked this conversation as resolved.
Show resolved Hide resolved
@focusin="{{../_buttonFocusIn}}"
>{{this.stringValue}}</ui5-toggle-spin-button>
{{/each}}
Expand All @@ -31,6 +33,8 @@
<ui5-segmented-button
id="{{_id}}_AmPm"
@click={{_periodChange}}
@focusin={{_amPmFocusIn}}
@focusout={{_amPmFocusOut}}
>
{{#each _periods}}
<ui5-segmented-button-item
Expand Down
42 changes: 41 additions & 1 deletion packages/main/src/TimeSelectionClocks.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -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
*
Expand Down Expand Up @@ -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();
}
Expand Down Expand Up @@ -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.
*
Expand All @@ -123,6 +146,20 @@ class TimeSelectionClocks extends TimePickerInternals {
}
}

/**
* AM/PM segmented button focusin event handler.
*/
_amPmFocusIn() {
NHristov-sap marked this conversation as resolved.
Show resolved Hide resolved
this._amPmFocused = true;
}

/**
* AM/PM segmented button focusout event handler.
*/
_amPmFocusOut() {
this._amPmFocused = false;
}

/**
* keyup event handler.
*
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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();
}

Expand All @@ -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();
}
}
Expand Down
11 changes: 10 additions & 1 deletion packages/main/src/themes/DateTimePickerPopover.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
}
Expand Down
4 changes: 4 additions & 0 deletions packages/main/src/themes/TimePickerPopover.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
.ui5-time-picker-popover {
width: 20rem;
}

.ui5-time-picker-footer {
height: fit-content;
display: flex;
Expand Down
8 changes: 3 additions & 5 deletions packages/main/src/themes/TimeSelectionClocks.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
Expand All @@ -16,7 +15,7 @@
justify-content: center;
align-items: center;
padding-bottom: 1rem;
width: 18rem;
width: 100%;
}

.ui5-time-picker-tsc-buttons span[separator] {
Expand All @@ -31,7 +30,6 @@
.ui5-time-picker-tsc-clocks {
display: block;
text-align: center;
width: 18rem;
height: 18rem;
width: 100%;
touch-action: none;
}
8 changes: 6 additions & 2 deletions packages/main/src/themes/base/sizes-parameters.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
18 changes: 9 additions & 9 deletions packages/main/test/pages/DateTimePicker.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>

Expand All @@ -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>
Expand Down
Loading
Loading