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
SAP · May 21, 2020 · 9cfcbbf · 9cfcbbf
1 parent d9933bd
commit 9cfcbbf
Show file tree

Hide file tree

Showing 8 changed files with 82 additions and 67 deletions.
diff --git a/packages/main/src/DurationPicker.hbs b/packages/main/src/DurationPicker.hbs
@@ -1,24 +1,25 @@
 <div class="ui5-duration-picker-root">
-    <ui5-input
-    value="{{value}}"
-    ?disabled="{{disabled}}"
-    ?readonly="{{readonly}}"
-    value-state="{{valueState}}"
-    @ui5-change="{{_handleInputChange}}"
-    @ui5-input="{{_handleInputLiveChange}}"
-    @keydown="{{_onkeydown}}"
-    >
-        {{#unless readonly}}
-            <ui5-icon
-                slot="icon"
-                name="fob-watch"
-                tabindex="-1"
-                show-tooltip
-                @click="{{togglePicker}}"
-                input-icon
-                ?pressed="{{_isPickerOpen}}"
-                class="ui5-duration-picker-input-icon-button"
-            ></ui5-icon>
-        {{/unless}}
-    </ui5-input>
+	<ui5-input
+		value="{{value}}"
+		?disabled="{{disabled}}"
+		?readonly="{{readonly}}"
+		value-state="{{valueState}}"
+		@ui5-change="{{_handleInputChange}}"
+		@ui5-input="{{_handleInputLiveChange}}"
+		@keydown="{{_onkeydown}}"
+		class="ui5-duration-picker-input"
+	>
+			{{#unless readonly}}
+				<ui5-icon
+					slot="icon"
+					name="fob-watch"
+					tabindex="-1"
+					show-tooltip
+					@click="{{togglePicker}}"
+					input-icon
+					?pressed="{{_isPickerOpen}}"
+					class="ui5-duration-picker-input-icon-button"
+				></ui5-icon>
+			{{/unless}}
+	</ui5-input>
 </div>
diff --git a/packages/main/src/DurationPickerPopover.hbs b/packages/main/src/DurationPickerPopover.hbs
@@ -1,48 +1,48 @@
 <ui5-responsive-popover
-    allow-target-overlap="{{_respPopover.allowTargetOverlap}}"
-    placement-type="{{_respPopover.placementType}}"
-    no-arrow
+	allow-target-overlap="{{_respPopover.allowTargetOverlap}}"
+	placement-type="{{_respPopover.placementType}}"
 	_hide-header
-    horizontal-align="{{_respPopover.horizontalAlign}}"
-    stay-open-on-scroll="{{_respPopover.stayOpenOnScroll}}"
-    @ui5-afterClose="{{_respPopover._onAfterClose}}"
-    @keydown="{{_handleKeysDown}}"
-
+	no-arrow
+	no-stretch
+	horizontal-align="{{_respPopover.horizontalAlign}}"
+	stay-open-on-scroll="{{_respPopover.stayOpenOnScroll}}"
+	@ui5-afterClose="{{_respPopover._onAfterClose}}"
+	@keydown="{{_handleKeysDown}}"
 >
-    <div class="{{classes.container}}">
-        {{#unless hideHours}}
-            <ui5-wheelslider
-                cyclic="true"
-                ._items="{{hoursArray}}"
-                value="{{selectedHours}}"
-                class="ui5-duration-picker-wheelslider ui5-duration-picker-hours-wheelslider"
-                label = "{{hoursSliderTitle}}"
-            ></ui5-wheelslider>
-        {{/unless}}
+	<div class="{{classes.container}}">
+		{{#unless hideHours}}
+			<ui5-wheelslider
+				cyclic="true"
+				._items="{{hoursArray}}"
+				value="{{selectedHours}}"
+				class="ui5-duration-picker-wheelslider ui5-duration-picker-hours-wheelslider"
+				label = "{{hoursSliderTitle}}"
+			></ui5-wheelslider>
+		{{/unless}}
 
-        {{#unless hideMinutes}}
-            <ui5-wheelslider
-                cyclic="true"
-                ._items="{{minutesArray}}"
-                value="{{selectedMinutes}}"
-                class="ui5-duration-picker-wheelslider ui5-duration-picker-minutes-wheelslider"
-                label = "{{minutesSliderTitle}}"
-            ></ui5-wheelslider>
-        {{/unless}}
+		{{#unless hideMinutes}}
+			<ui5-wheelslider
+				cyclic="true"
+				._items="{{minutesArray}}"
+				value="{{selectedMinutes}}"
+				class="ui5-duration-picker-wheelslider ui5-duration-picker-minutes-wheelslider"
+				label = "{{minutesSliderTitle}}"
+			></ui5-wheelslider>
+		{{/unless}}
 
-        {{#unless hideSeconds}}
-            <ui5-wheelslider
-                cyclic="true"
-                ._items="{{secondsArray}}"
-                value="{{selectedSeconds}}"
-                class="ui5-duration-picker-wheelslider ui5-duration-picker-seconds-wheelslider"
-                label = "{{secondsSliderTitle}}"
-            ></ui5-wheelslider>
-        {{/unless}}
-    </div>
+		{{#unless hideSeconds}}
+			<ui5-wheelslider
+				cyclic="true"
+				._items="{{secondsArray}}"
+				value="{{selectedSeconds}}"
+				class="ui5-duration-picker-wheelslider ui5-duration-picker-seconds-wheelslider"
+				label = "{{secondsSliderTitle}}"
+			></ui5-wheelslider>
+		{{/unless}}
+	</div>
 
-    <div slot="footer" class="ui5-duration-picker-footer" @keydown={{_onfooterkeydown}}>
-        <ui5-button id="submit" design="Emphasized" @click="{{submitPickers}}">{{submitButtonLabel}}</ui5-button>
-        <ui5-button id="close" design="Transparent" @click="{{togglePicker}}">{{cancelButtonLabel}}</ui5-button>
-    </div>
+	<div slot="footer" class="ui5-duration-picker-footer" @keydown={{_onfooterkeydown}}>
+		<ui5-button id="submit" design="Emphasized" @click="{{submitPickers}}">{{submitButtonLabel}}</ui5-button>
+		<ui5-button id="close" design="Transparent" @click="{{togglePicker}}">{{cancelButtonLabel}}</ui5-button>
+	</div>
 </ui5-responsive-popover>
diff --git a/packages/main/src/TimePicker.hbs b/packages/main/src/TimePicker.hbs
@@ -9,6 +9,7 @@
 			@click="{{_handleInputClick}}"
 			@ui5-change="{{_handleInputChange}}"
 			@ui5-input="{{_handleInputLiveChange}}"
+			class="ui5-timepicker-input"
 	>
 
 	{{#if valueStateMessage.length}}

diff --git a/packages/main/src/TimePickerPopover.hbs b/packages/main/src/TimePickerPopover.hbs
@@ -2,15 +2,17 @@
 	id="{{_id}}-responsive-popover"
 	allow-target-overlap="{{_respPopover.allowTargetOverlap}}"
 	placement-type="{{_respPopover.placementType}}"
+	_hide-header
 	no-arrow
+	no-stretch
 	horizontal-align="{{_respPopover.horizontalAlign}}"
 	stay-open-on-scroll="{{_respPopover.stayOpenOnScroll}}"
 	@ui5-afterClose="{{_respPopover.afterClose}}"
 	@ui5-afterOpen="{{_respPopover.afterOpen}}"
 	class="ui5-timepicker-popover"
 	@keydown="{{_ontimepickerpopoverkeydown}}"
 	@wheel="{{_handleWheel}}"
-	>
+>
 	<div class="{{classes.container}}" @keydown={{_oncontainerkeydown}} tabindex="0" @focusin="{{_onfocuscontainerin}}">
 		{{#if shouldBuildHoursSlider}}
 			<ui5-wheelslider 
@@ -53,4 +55,4 @@
 			<ui5-button id="submit" design="Emphasized" @click="{{submitPickers}}">{{submitButtonLabel}}</ui5-button>
 			<ui5-button id="close" design="Transparent" @click="{{closePicker}}">{{cancelButtonLabel}}</ui5-button>
 		</div>
-	</ui5-responsive-popover>
+</ui5-responsive-popover>
diff --git a/packages/main/src/themes/DurationPicker.css b/packages/main/src/themes/DurationPicker.css
@@ -1,5 +1,9 @@
 :host(:not([hidden])) {
-    display: inline-block;
+	display: inline-block;
+}
+
+:host .ui5-duration-picker-input {
+	width: 100%;
 }
 
 .ui5-duration-picker-input-icon-button:hover {

diff --git a/packages/main/src/themes/TimePicker.css b/packages/main/src/themes/TimePicker.css
@@ -2,6 +2,10 @@
 	display: inline-block;
 }
 
+:host .ui5-timepicker-input {
+	width: 100%;
+}
+
 .ui5-timepicker-input-icon-button:hover {
 	cursor: pointer;
 	background: var(--sapButton_Hover_Background);

diff --git a/packages/main/test/pages/DurationPicker.html b/packages/main/test/pages/DurationPicker.html
@@ -17,8 +17,9 @@
 
 <body style="background-color: var(--sapBackgroundColor);">
 	<ui5-duration-picker id="duration-picker1"></ui5-duration-picker>
-
 	<br>
+
+	<ui5-duration-picker style="width:100%"></ui5-duration-picker>
 	<br>
 
 	<ui5-title>Read Only Duration Picker</ui5-title>

diff --git a/packages/main/test/pages/TimePicker.html b/packages/main/test/pages/TimePicker.html
@@ -24,6 +24,8 @@
 		<ui5-timepicker id="timepicker2" format-pattern="hh:mm:ss" value=""></ui5-timepicker>
 		<ui5-timepicker id="timepicker3" format-pattern="hh:mm:ss a"></ui5-timepicker>
 		<ui5-timepicker id="timepicker3" format-pattern="HH:mm"></ui5-timepicker>
+		<br>
+		<ui5-timepicker style="width:100%"></ui5-timepicker>
 
 		<br /><br />
 		<ui5-title>Test "change" event</ui5-title>