Skip to content

Commit 6104b80

Browse files
tsanislavgatevtsanislavgatev
authored
fix(ui5-wheelslider): correcting the placement on mobile in different fontsizes (#3396)
1 parent 724025b commit 6104b80

File tree

10 files changed

+20
-25
lines changed

10 files changed

+20
-25
lines changed

‎packages/main/src/WheelSlider.js

+6-6
Original file line numberDiff line numberDiff line change
@@ -117,8 +117,8 @@ const metadata = {
117117
},
118118
};
119119

120-
const CELL_SIZE_COMPACT = 2;
121-
const CELL_SIZE_COZY = 2.875;
120+
const CELL_SIZE_COMPACT = 32;
121+
const CELL_SIZE_COZY = 46;
122122

123123
/**
124124
* @class
@@ -225,20 +225,20 @@ class WheelSlider extends UI5Element {
225225
}
226226

227227
get _itemCellHeight() {
228-
const defaultSize = getEffectiveContentDensity(this) === "compact" ? CELL_SIZE_COMPACT : CELL_SIZE_COZY;
228+
const defaultSize = getEffectiveContentDensity(document.body) === "compact" ? CELL_SIZE_COMPACT : CELL_SIZE_COZY;
229229

230230
if (this.shadowRoot.querySelectorAll(".ui5-wheelslider-item").length) {
231231
const itemComputedStyle = getComputedStyle(this.shadowRoot.querySelector(".ui5-wheelslider-item"));
232232
const itemHeightValue = itemComputedStyle.getPropertyValue("--_ui5_wheelslider_item_height");
233-
const onlyDigitsValue = itemHeightValue.replace("rem", "");
233+
const onlyDigitsValue = itemHeightValue.replace("px", "");
234234
return Number(onlyDigitsValue) || defaultSize;
235235
}
236236

237237
return defaultSize;
238238
}
239239

240240
_updateScrolling() {
241-
const cellSizeInPx = this._itemCellHeight * 16,
241+
const cellSizeInPx = this._itemCellHeight,
242242
scrollWhere = this._scroller.scrollContainer.scrollTop;
243243
let offsetIndex;
244244

@@ -287,7 +287,7 @@ class WheelSlider extends UI5Element {
287287
_selectElementByIndex(currentIndex) {
288288
let index = currentIndex;
289289
const itemsCount = this._itemsToShow.length;
290-
const cellSizeInPx = this._itemCellHeight * 16;
290+
const cellSizeInPx = this._itemCellHeight;
291291
const scrollBy = cellSizeInPx * index;
292292

293293
if (this.cyclic) {

‎packages/main/src/themes/base/WheelSlider-parameters.css

+4-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@
55
--_ui5_wheelslider_selection_frame_margin_top: calc(var(--_ui5_wheelslider_item_height) * 2);
66
--_ui5_wheelslider_mobile_selection_frame_margin_top: calc(var(--_ui5_wheelslider_item_height) * 4);
77
--_ui5_wheelslider_label_text_color: var(--sapContent_LabelColor);
8-
--_ui5_wheelslider_height: 15rem;
9-
--_ui5_wheelslider_mobile_height: 27rem;
8+
--_ui5_wheelslider_height: 240px;
9+
--_ui5_wheelslider_mobile_height: 432px;
10+
--_ui5_wheelslider_item_width: 48px;
11+
--_ui5_wheelslider_item_height: 46px;
1012
--_ui5_wheelslider_arrows_visibility: hidden;
1113
}

‎packages/main/src/themes/base/sizes-parameters.css

+4-3
Original file line numberDiff line numberDiff line change
@@ -194,11 +194,12 @@
194194
--_ui5_rb_label_width: calc(100% - 2rem + 1px);
195195
--_ui5_rb_rtl_focus_right: 0.375rem;
196196

197-
--_ui5_wheelslider_item_width: 4rem;
198-
--_ui5_wheelslider_item_height: 2rem;
199-
--_ui5_wheelslider_height: 14rem;
197+
--_ui5_wheelslider_item_width: 64px;
198+
--_ui5_wheelslider_item_height: 32px;
199+
--_ui5_wheelslider_height: 224px;
200200
--_ui5_wheelslider_selection_frame_margin_top: calc(var(--_ui5_wheelslider_item_height) * 2);
201201
--_ui5_wheelslider_arrows_visibility: visible;
202+
--_ui5_wheelslider_mobile_selection_frame_margin_top: 128px;
202203

203204
--_ui5_switch_height: var(--_ui5_switch_compact_height);
204205
--_ui5_switch_width: var(--_ui5_switch_compact_width);

‎packages/main/src/themes/sap_belize/WheelSlider-parameters.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@
1010
--_ui5_wheelslider_selected_item_hover_background_color: var(--_ui5_wheelslider_item_border_color);
1111
--_ui5_wheelslider_active_item_background_color:var(--sapContent_Selected_Background);
1212
--_ui5_wheelslider_active_item_text_color: var(--sapContent_Selected_TextColor);
13-
--_ui5_wheelslider_item_width: 4.5rem;
14-
--_ui5_wheelslider_item_height: 3rem;
13+
--_ui5_wheelslider_item_width: 72px;
14+
--_ui5_wheelslider_item_height: 48px;
1515
--_ui5_wheelslider_selection_frame_color: var(--sapList_SelectionBorderColor);
1616
--_ui_wheelslider_item_border_radius: var(--_ui5_button_border_radius);
1717
}

‎packages/main/src/themes/sap_belize_hcb/WheelSlider-parameters.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@
1010
--_ui5_wheelslider_selected_item_hover_background_color: var(--sapHighlightColor);
1111
--_ui5_wheelslider_active_item_background_color: var(--sapHighlightColor);
1212
--_ui5_wheelslider_active_item_text_color: var(--sapTextColor);
13-
--_ui5_wheelslider_item_width: 4.5rem;
14-
--_ui5_wheelslider_item_height: 3rem;
13+
--_ui5_wheelslider_item_width: 72px;
14+
--_ui5_wheelslider_item_height: 48px;
1515
--_ui5_wheelslider_selection_frame_color: var(--sapContent_ForegroundBorderColor);
1616
--_ui_wheelslider_item_border_radius: 0;
1717
}

‎packages/main/src/themes/sap_belize_hcw/WheelSlider-parameters.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@
1010
--_ui5_wheelslider_selected_item_hover_background_color: var(--sapHighlightColor);
1111
--_ui5_wheelslider_active_item_background_color: var(--sapHighlightColor);
1212
--_ui5_wheelslider_active_item_text_color: var(--sapTextColor);
13-
--_ui5_wheelslider_item_width: 4.5rem;
14-
--_ui5_wheelslider_item_height: 3rem;
13+
--_ui5_wheelslider_item_width: 72px;
14+
--_ui5_wheelslider_item_height: 48px;
1515
--_ui5_wheelslider_selection_frame_color: var(--sapContent_ForegroundBorderColor);
1616
--_ui_wheelslider_item_border_radius: 0;
1717
}

‎packages/main/src/themes/sap_fiori_3/WheelSlider-parameters.css

-2
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,6 @@
1111
--_ui5_wheelslider_selected_item_hover_background_color: var(--sapButton_Emphasized_Hover_BorderColor);
1212
--_ui5_wheelslider_active_item_background_color:var(--sapContent_Selected_Background);
1313
--_ui5_wheelslider_active_item_text_color: var(--sapContent_Selected_TextColor);
14-
--_ui5_wheelslider_item_width: 3rem;
15-
--_ui5_wheelslider_item_height: 2.875rem;
1614
--_ui5_wheelslider_selection_frame_color: var(--sapList_SelectionBorderColor);
1715
--_ui_wheelslider_item_border_radius: var(--_ui5_button_border_radius);
1816
}

‎packages/main/src/themes/sap_fiori_3_dark/WheelSlider-parameters.css

-2
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,6 @@
1010
--_ui5_wheelslider_selected_item_hover_background_color: var(--sapButton_Emphasized_Hover_BorderColor);
1111
--_ui5_wheelslider_active_item_background_color: var(--sapContent_Selected_Background);
1212
--_ui5_wheelslider_active_item_text_color: var(--sapContent_Selected_TextColor);
13-
--_ui5_wheelslider_item_width: 3rem;
14-
--_ui5_wheelslider_item_height: 2.875rem;
1513
--_ui5_wheelslider_selection_frame_color: var(--sapList_SelectionBorderColor);
1614
--_ui_wheelslider_item_border_radius: var(--_ui5_button_border_radius);
1715
}

‎packages/main/src/themes/sap_fiori_3_hcb/WheelSlider-parameters.css

-2
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,6 @@
1212
--_ui5_wheelslider_selected_item_hover_background_color: var(--sapButton_Emphasized_Hover_BorderColor);
1313
--_ui5_wheelslider_active_item_background_color:var(--sapContent_Selected_Background);
1414
--_ui5_wheelslider_active_item_text_color: var(--sapContent_Selected_TextColor);
15-
--_ui5_wheelslider_item_width: 3rem;
16-
--_ui5_wheelslider_item_height: 2.875rem;
1715
--_ui5_wheelslider_selection_frame_color: var(--sapList_SelectionBorderColor);
1816
--_ui_wheelslider_item_border_radius: var(--_ui5_button_border_radius);
1917
}

‎packages/main/src/themes/sap_fiori_3_hcw/WheelSlider-parameters.css

-2
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,6 @@
1212
--_ui5_wheelslider_selected_item_hover_background_color: var(--sapButton_Emphasized_Hover_BorderColor);
1313
--_ui5_wheelslider_active_item_background_color:var(--sapContent_Selected_Background);
1414
--_ui5_wheelslider_active_item_text_color: var(--sapContent_Selected_TextColor);
15-
--_ui5_wheelslider_item_width: 3rem;
16-
--_ui5_wheelslider_item_height: 2.875rem;
1715
--_ui5_wheelslider_selection_frame_color: var(--sapList_SelectionBorderColor);
1816
--_ui_wheelslider_item_border_radius: var(--_ui5_button_border_radius);
1917
}

0 commit comments

Comments
 (0)