Skip to content

Commit 9cfcbbf

Browse files
ilhan007ilhan007
authored
fix(ui5-timepicker, ui5-duration-picker): enable width customization (#1669)
Several issues has been resolved with this change: - the input field now expands together with the host tag - the Popover with the time sliders remains the same, when the input gets bigger - the TimePicker on phone used to have a header with a close button that is not supposed to be displayed, the component has a cancel button in the footer, this default header is meant for other components. FIXES: #1659
1 parent d9933bd commit 9cfcbbf

8 files changed

+82
-67
lines changed

‎packages/main/src/DurationPicker.hbs

+23-22
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,25 @@
11
<div class="ui5-duration-picker-root">
2-
<ui5-input
3-
value="{{value}}"
4-
?disabled="{{disabled}}"
5-
?readonly="{{readonly}}"
6-
value-state="{{valueState}}"
7-
@ui5-change="{{_handleInputChange}}"
8-
@ui5-input="{{_handleInputLiveChange}}"
9-
@keydown="{{_onkeydown}}"
10-
>
11-
{{#unless readonly}}
12-
<ui5-icon
13-
slot="icon"
14-
name="fob-watch"
15-
tabindex="-1"
16-
show-tooltip
17-
@click="{{togglePicker}}"
18-
input-icon
19-
?pressed="{{_isPickerOpen}}"
20-
class="ui5-duration-picker-input-icon-button"
21-
></ui5-icon>
22-
{{/unless}}
23-
</ui5-input>
2+
<ui5-input
3+
value="{{value}}"
4+
?disabled="{{disabled}}"
5+
?readonly="{{readonly}}"
6+
value-state="{{valueState}}"
7+
@ui5-change="{{_handleInputChange}}"
8+
@ui5-input="{{_handleInputLiveChange}}"
9+
@keydown="{{_onkeydown}}"
10+
class="ui5-duration-picker-input"
11+
>
12+
{{#unless readonly}}
13+
<ui5-icon
14+
slot="icon"
15+
name="fob-watch"
16+
tabindex="-1"
17+
show-tooltip
18+
@click="{{togglePicker}}"
19+
input-icon
20+
?pressed="{{_isPickerOpen}}"
21+
class="ui5-duration-picker-input-icon-button"
22+
></ui5-icon>
23+
{{/unless}}
24+
</ui5-input>
2425
</div>

‎packages/main/src/DurationPickerPopover.hbs

+41-41
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,48 @@
11
<ui5-responsive-popover
2-
allow-target-overlap="{{_respPopover.allowTargetOverlap}}"
3-
placement-type="{{_respPopover.placementType}}"
4-
no-arrow
2+
allow-target-overlap="{{_respPopover.allowTargetOverlap}}"
3+
placement-type="{{_respPopover.placementType}}"
54
_hide-header
6-
horizontal-align="{{_respPopover.horizontalAlign}}"
7-
stay-open-on-scroll="{{_respPopover.stayOpenOnScroll}}"
8-
@ui5-afterClose="{{_respPopover._onAfterClose}}"
9-
@keydown="{{_handleKeysDown}}"
10-
5+
no-arrow
6+
no-stretch
7+
horizontal-align="{{_respPopover.horizontalAlign}}"
8+
stay-open-on-scroll="{{_respPopover.stayOpenOnScroll}}"
9+
@ui5-afterClose="{{_respPopover._onAfterClose}}"
10+
@keydown="{{_handleKeysDown}}"
1111
>
12-
<div class="{{classes.container}}">
13-
{{#unless hideHours}}
14-
<ui5-wheelslider
15-
cyclic="true"
16-
._items="{{hoursArray}}"
17-
value="{{selectedHours}}"
18-
class="ui5-duration-picker-wheelslider ui5-duration-picker-hours-wheelslider"
19-
label = "{{hoursSliderTitle}}"
20-
></ui5-wheelslider>
21-
{{/unless}}
12+
<div class="{{classes.container}}">
13+
{{#unless hideHours}}
14+
<ui5-wheelslider
15+
cyclic="true"
16+
._items="{{hoursArray}}"
17+
value="{{selectedHours}}"
18+
class="ui5-duration-picker-wheelslider ui5-duration-picker-hours-wheelslider"
19+
label = "{{hoursSliderTitle}}"
20+
></ui5-wheelslider>
21+
{{/unless}}
2222

23-
{{#unless hideMinutes}}
24-
<ui5-wheelslider
25-
cyclic="true"
26-
._items="{{minutesArray}}"
27-
value="{{selectedMinutes}}"
28-
class="ui5-duration-picker-wheelslider ui5-duration-picker-minutes-wheelslider"
29-
label = "{{minutesSliderTitle}}"
30-
></ui5-wheelslider>
31-
{{/unless}}
23+
{{#unless hideMinutes}}
24+
<ui5-wheelslider
25+
cyclic="true"
26+
._items="{{minutesArray}}"
27+
value="{{selectedMinutes}}"
28+
class="ui5-duration-picker-wheelslider ui5-duration-picker-minutes-wheelslider"
29+
label = "{{minutesSliderTitle}}"
30+
></ui5-wheelslider>
31+
{{/unless}}
3232

33-
{{#unless hideSeconds}}
34-
<ui5-wheelslider
35-
cyclic="true"
36-
._items="{{secondsArray}}"
37-
value="{{selectedSeconds}}"
38-
class="ui5-duration-picker-wheelslider ui5-duration-picker-seconds-wheelslider"
39-
label = "{{secondsSliderTitle}}"
40-
></ui5-wheelslider>
41-
{{/unless}}
42-
</div>
33+
{{#unless hideSeconds}}
34+
<ui5-wheelslider
35+
cyclic="true"
36+
._items="{{secondsArray}}"
37+
value="{{selectedSeconds}}"
38+
class="ui5-duration-picker-wheelslider ui5-duration-picker-seconds-wheelslider"
39+
label = "{{secondsSliderTitle}}"
40+
></ui5-wheelslider>
41+
{{/unless}}
42+
</div>
4343

44-
<div slot="footer" class="ui5-duration-picker-footer" @keydown={{_onfooterkeydown}}>
45-
<ui5-button id="submit" design="Emphasized" @click="{{submitPickers}}">{{submitButtonLabel}}</ui5-button>
46-
<ui5-button id="close" design="Transparent" @click="{{togglePicker}}">{{cancelButtonLabel}}</ui5-button>
47-
</div>
44+
<div slot="footer" class="ui5-duration-picker-footer" @keydown={{_onfooterkeydown}}>
45+
<ui5-button id="submit" design="Emphasized" @click="{{submitPickers}}">{{submitButtonLabel}}</ui5-button>
46+
<ui5-button id="close" design="Transparent" @click="{{togglePicker}}">{{cancelButtonLabel}}</ui5-button>
47+
</div>
4848
</ui5-responsive-popover>

‎packages/main/src/TimePicker.hbs

+1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
@click="{{_handleInputClick}}"
1010
@ui5-change="{{_handleInputChange}}"
1111
@ui5-input="{{_handleInputLiveChange}}"
12+
class="ui5-timepicker-input"
1213
>
1314

1415
{{#if valueStateMessage.length}}

‎packages/main/src/TimePickerPopover.hbs

+4-2
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,17 @@
22
id="{{_id}}-responsive-popover"
33
allow-target-overlap="{{_respPopover.allowTargetOverlap}}"
44
placement-type="{{_respPopover.placementType}}"
5+
_hide-header
56
no-arrow
7+
no-stretch
68
horizontal-align="{{_respPopover.horizontalAlign}}"
79
stay-open-on-scroll="{{_respPopover.stayOpenOnScroll}}"
810
@ui5-afterClose="{{_respPopover.afterClose}}"
911
@ui5-afterOpen="{{_respPopover.afterOpen}}"
1012
class="ui5-timepicker-popover"
1113
@keydown="{{_ontimepickerpopoverkeydown}}"
1214
@wheel="{{_handleWheel}}"
13-
>
15+
>
1416
<div class="{{classes.container}}" @keydown={{_oncontainerkeydown}} tabindex="0" @focusin="{{_onfocuscontainerin}}">
1517
{{#if shouldBuildHoursSlider}}
1618
<ui5-wheelslider
@@ -53,4 +55,4 @@
5355
<ui5-button id="submit" design="Emphasized" @click="{{submitPickers}}">{{submitButtonLabel}}</ui5-button>
5456
<ui5-button id="close" design="Transparent" @click="{{closePicker}}">{{cancelButtonLabel}}</ui5-button>
5557
</div>
56-
</ui5-responsive-popover>
58+
</ui5-responsive-popover>

‎packages/main/src/themes/DurationPicker.css

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
:host(:not([hidden])) {
2-
display: inline-block;
2+
display: inline-block;
3+
}
4+
5+
:host .ui5-duration-picker-input {
6+
width: 100%;
37
}
48

59
.ui5-duration-picker-input-icon-button:hover {

‎packages/main/src/themes/TimePicker.css

+4
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
display: inline-block;
33
}
44

5+
:host .ui5-timepicker-input {
6+
width: 100%;
7+
}
8+
59
.ui5-timepicker-input-icon-button:hover {
610
cursor: pointer;
711
background: var(--sapButton_Hover_Background);

‎packages/main/test/pages/DurationPicker.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,9 @@
1717

1818
<body style="background-color: var(--sapBackgroundColor);">
1919
<ui5-duration-picker id="duration-picker1"></ui5-duration-picker>
20-
2120
<br>
21+
22+
<ui5-duration-picker style="width:100%"></ui5-duration-picker>
2223
<br>
2324

2425
<ui5-title>Read Only Duration Picker</ui5-title>

‎packages/main/test/pages/TimePicker.html

+2
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@
2424
<ui5-timepicker id="timepicker2" format-pattern="hh:mm:ss" value=""></ui5-timepicker>
2525
<ui5-timepicker id="timepicker3" format-pattern="hh:mm:ss a"></ui5-timepicker>
2626
<ui5-timepicker id="timepicker3" format-pattern="HH:mm"></ui5-timepicker>
27+
<br>
28+
<ui5-timepicker style="width:100%"></ui5-timepicker>
2729

2830
<br /><br />
2931
<ui5-title>Test "change" event</ui5-title>

0 commit comments

Comments
 (0)