fix(ui5-wheelslider): correcting the placement on mobile in different fontsizes (#3396)

Author: tsanislavgatev

packages/main/src/WheelSlider.js

@@ -117,8 +117,8 @@ const metadata = {
 	},
 };
 
-const CELL_SIZE_COMPACT = 2;
-const CELL_SIZE_COZY = 2.875;
+const CELL_SIZE_COMPACT = 32;
+const CELL_SIZE_COZY = 46;
 
 /**
  * @class
@@ -225,20 +225,20 @@ class WheelSlider extends UI5Element {
 	}
 
 	get _itemCellHeight() {
-		const defaultSize = getEffectiveContentDensity(this) === "compact" ? CELL_SIZE_COMPACT : CELL_SIZE_COZY;
+		const defaultSize = getEffectiveContentDensity(document.body) === "compact" ? CELL_SIZE_COMPACT : CELL_SIZE_COZY;
 
 		if (this.shadowRoot.querySelectorAll(".ui5-wheelslider-item").length) {
 			const itemComputedStyle = getComputedStyle(this.shadowRoot.querySelector(".ui5-wheelslider-item"));
 			const itemHeightValue = itemComputedStyle.getPropertyValue("--_ui5_wheelslider_item_height");
-			const onlyDigitsValue = itemHeightValue.replace("rem", "");
+			const onlyDigitsValue = itemHeightValue.replace("px", "");
 			return Number(onlyDigitsValue) || defaultSize;
 		}
 
 		return defaultSize;
 	}
 
 	_updateScrolling() {
-		const cellSizeInPx = this._itemCellHeight * 16,
+		const cellSizeInPx = this._itemCellHeight,
 			scrollWhere = this._scroller.scrollContainer.scrollTop;
 		let offsetIndex;
 
@@ -287,7 +287,7 @@ class WheelSlider extends UI5Element {
 	_selectElementByIndex(currentIndex) {
 		let index = currentIndex;
 		const itemsCount = this._itemsToShow.length;
-		const cellSizeInPx = this._itemCellHeight * 16;
+		const cellSizeInPx = this._itemCellHeight;
 		const scrollBy = cellSizeInPx * index;
 
 		if (this.cyclic) {

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

@@ -5,7 +5,9 @@
 	--_ui5_wheelslider_selection_frame_margin_top: calc(var(--_ui5_wheelslider_item_height) * 2);
 	--_ui5_wheelslider_mobile_selection_frame_margin_top: calc(var(--_ui5_wheelslider_item_height) * 4);
 	--_ui5_wheelslider_label_text_color: var(--sapContent_LabelColor);
-	--_ui5_wheelslider_height: 15rem;
-	--_ui5_wheelslider_mobile_height: 27rem;
+	--_ui5_wheelslider_height: 240px;
+	--_ui5_wheelslider_mobile_height: 432px;
+	--_ui5_wheelslider_item_width: 48px;
+	--_ui5_wheelslider_item_height: 46px;
 	--_ui5_wheelslider_arrows_visibility: hidden;
 }

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

@@ -194,11 +194,12 @@
 	--_ui5_rb_label_width: calc(100% - 2rem + 1px);
 	--_ui5_rb_rtl_focus_right: 0.375rem;
 
-	--_ui5_wheelslider_item_width: 4rem;
-	--_ui5_wheelslider_item_height: 2rem;
-	--_ui5_wheelslider_height: 14rem;
+	--_ui5_wheelslider_item_width: 64px;
+	--_ui5_wheelslider_item_height: 32px;
+	--_ui5_wheelslider_height: 224px;
 	--_ui5_wheelslider_selection_frame_margin_top: calc(var(--_ui5_wheelslider_item_height) * 2);
 	--_ui5_wheelslider_arrows_visibility: visible;
+	--_ui5_wheelslider_mobile_selection_frame_margin_top: 128px;
 
 	--_ui5_switch_height: var(--_ui5_switch_compact_height);
 	--_ui5_switch_width: var(--_ui5_switch_compact_width);

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

@@ -10,8 +10,8 @@
 	--_ui5_wheelslider_selected_item_hover_background_color: var(--_ui5_wheelslider_item_border_color);
 	--_ui5_wheelslider_active_item_background_color:var(--sapContent_Selected_Background);
 	--_ui5_wheelslider_active_item_text_color: var(--sapContent_Selected_TextColor);
-	--_ui5_wheelslider_item_width: 4.5rem;
-	--_ui5_wheelslider_item_height: 3rem;
+	--_ui5_wheelslider_item_width: 72px;
+	--_ui5_wheelslider_item_height: 48px;
 	--_ui5_wheelslider_selection_frame_color: var(--sapList_SelectionBorderColor);
 	--_ui_wheelslider_item_border_radius: var(--_ui5_button_border_radius);
 }

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

@@ -10,8 +10,8 @@
 	--_ui5_wheelslider_selected_item_hover_background_color: var(--sapHighlightColor);
 	--_ui5_wheelslider_active_item_background_color: var(--sapHighlightColor);
 	--_ui5_wheelslider_active_item_text_color: var(--sapTextColor);
-	--_ui5_wheelslider_item_width: 4.5rem;
-	--_ui5_wheelslider_item_height: 3rem;
+	--_ui5_wheelslider_item_width: 72px;
+	--_ui5_wheelslider_item_height: 48px;
 	--_ui5_wheelslider_selection_frame_color: var(--sapContent_ForegroundBorderColor);
 	--_ui_wheelslider_item_border_radius: 0;
 }

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

@@ -10,8 +10,8 @@
 	--_ui5_wheelslider_selected_item_hover_background_color: var(--sapHighlightColor);
 	--_ui5_wheelslider_active_item_background_color: var(--sapHighlightColor);
 	--_ui5_wheelslider_active_item_text_color: var(--sapTextColor);
-	--_ui5_wheelslider_item_width: 4.5rem;
-	--_ui5_wheelslider_item_height: 3rem;
+	--_ui5_wheelslider_item_width: 72px;
+	--_ui5_wheelslider_item_height: 48px;
 	--_ui5_wheelslider_selection_frame_color: var(--sapContent_ForegroundBorderColor);
 	--_ui_wheelslider_item_border_radius: 0;
 }

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

@@ -11,8 +11,6 @@
 	--_ui5_wheelslider_selected_item_hover_background_color: var(--sapButton_Emphasized_Hover_BorderColor);
 	--_ui5_wheelslider_active_item_background_color:var(--sapContent_Selected_Background);
 	--_ui5_wheelslider_active_item_text_color: var(--sapContent_Selected_TextColor);
-	--_ui5_wheelslider_item_width: 3rem;
-	--_ui5_wheelslider_item_height: 2.875rem;
 	--_ui5_wheelslider_selection_frame_color: var(--sapList_SelectionBorderColor);
 	--_ui_wheelslider_item_border_radius: var(--_ui5_button_border_radius);
 }

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

@@ -10,8 +10,6 @@
 	--_ui5_wheelslider_selected_item_hover_background_color: var(--sapButton_Emphasized_Hover_BorderColor);
 	--_ui5_wheelslider_active_item_background_color: var(--sapContent_Selected_Background);
 	--_ui5_wheelslider_active_item_text_color: var(--sapContent_Selected_TextColor);
-	--_ui5_wheelslider_item_width: 3rem;
-	--_ui5_wheelslider_item_height: 2.875rem;
 	--_ui5_wheelslider_selection_frame_color: var(--sapList_SelectionBorderColor);
 	--_ui_wheelslider_item_border_radius: var(--_ui5_button_border_radius);
 }

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

@@ -12,8 +12,6 @@
 	--_ui5_wheelslider_selected_item_hover_background_color: var(--sapButton_Emphasized_Hover_BorderColor);
 	--_ui5_wheelslider_active_item_background_color:var(--sapContent_Selected_Background);
 	--_ui5_wheelslider_active_item_text_color: var(--sapContent_Selected_TextColor);
-	--_ui5_wheelslider_item_width: 3rem;
-	--_ui5_wheelslider_item_height: 2.875rem;
 	--_ui5_wheelslider_selection_frame_color: var(--sapList_SelectionBorderColor);
 	--_ui_wheelslider_item_border_radius: var(--_ui5_button_border_radius);
 }

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

@@ -12,8 +12,6 @@
 	--_ui5_wheelslider_selected_item_hover_background_color: var(--sapButton_Emphasized_Hover_BorderColor);
 	--_ui5_wheelslider_active_item_background_color:var(--sapContent_Selected_Background);
 	--_ui5_wheelslider_active_item_text_color: var(--sapContent_Selected_TextColor);
-	--_ui5_wheelslider_item_width: 3rem;
-	--_ui5_wheelslider_item_height: 2.875rem;
 	--_ui5_wheelslider_selection_frame_color: var(--sapList_SelectionBorderColor);
 	--_ui_wheelslider_item_border_radius: var(--_ui5_button_border_radius);
 }