Spinner: add focus on remote control

[Issue] #1658 [Problem] Spinner doesn't support remote control [Solution] - added support for remote control Signed-off-by: Tomasz Lukawski <t.lukawski@samsung.com>
Samsung · Apr 6, 2021 · 4545b80 · 4545b80
1 parent 9b37ca6
commit 4545b80
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 30 deletions.
diff --git a/src/css/profile/mobile/base.less b/src/css/profile/mobile/base.less
@@ -93,6 +93,8 @@
 @calendar-weekend-day-color: #c95151;
 @progress-circle-second-color: #06b485;
 
+@focus-color: rgb(69, 143, 255);
+
 :root {
     --text-secondary-color: @text-secondary-color;
     --primary-color: @primary-color;
@@ -132,8 +134,7 @@
     --on-off-switch-off-track-background: @on-off-switch-off-track-background;
     --on-off-switch-off-disabled-track-border: @on-off-switch-off-disabled-track-border;
 
-    --focus-outline-color: rgb(69, 143, 255);
-    --focus-bg-color: fade(rgb(69, 143, 255), 10%);
+    --focus-outline-color: @focus-color;
 
     --text-field-icon-color: @text-field-icon-color;
 }
diff --git a/src/css/profile/mobile/common/dropdownmenu.less b/src/css/profile/mobile/common/dropdownmenu.less
@@ -19,15 +19,15 @@
 	&:active {
 		outline: none;
 		.ui-dropdownmenu-placeholder {
-			background-color: @color_dropdownmenu_placeholder_bg_press;
+			background-color: transparent;
 		}
 	}
 	&::before {
 		content: "";
 		opacity: 0;
 		width: 90%;
 		height: 26 * @px_base;
-		background-color: @color_dropdownmenu_placeholder_bg_press_effect;
+		background-color: var(--ripple-color);
 		position: absolute;
 		top: 17 * @px_base;
 		left: 5%;
@@ -40,7 +40,7 @@
 		opacity: 1;
 		width: 94%;
 		height: 40 * @px_base;
-		background-color: @color_dropdownmenu_placeholder_bg_press_effect;
+		background-color: var(--ripple-color);
 		position: absolute;
 		top: 10 * @px_base;
 		left: 3%;
@@ -60,7 +60,7 @@
 		text-overflow: ellipsis;
 		font-size: 17 * @px_base;
 		text-indent: 5 * @px_base;
-		background-color: @color_dropdownmenu_placeholder_bg;
+		background-color: transparent;
 		&::after {
 			content: "";
 			position: absolute;
@@ -77,7 +77,7 @@
 	}
 
 	&.ui-focus {
-		background-color: @color_dropdownmenu_placeholder_bg_press_effect;
+		background-color: var(--ripple-color);
 	}
 }
 
@@ -269,6 +269,9 @@
 			&:focus, &:active {
 				outline: none;
 			}
+			&.ui-focus {
+				background-color: var(--focus-bg-color);
+			}
 
 			&::before {
 				content: "";
@@ -310,29 +313,39 @@
 }
 
 .ui-spinner {
-	.ui-dropdownmenu-placeholder::after {
-		content: "";
-		width: 20 * @px_base;
-		height: 20 * @px_base;
-		position: absolute;
-		right: 0;
-		background-color:black;
-		top: 35%;
-		mask-image: url(images/13_View_controls/tw_spinner_mtrl.svg);
+	padding: 0 24 * @px_base;
+
+	.ui-dropdownmenu-placeholder {
+		font-size: 18 * @sp_base;
+		padding-left: 0;
+		text-indent: 0;
+
+		&::after {
+			content: "";
+			width: 20 * @px_base;
+			height: 20 * @px_base;
+			position: absolute;
+			right: 0;
+			background-color: black;
+			top: 35%;
+			mask-image: url(images/13_View_controls/tw_spinner_mtrl.svg);
+		}
+	}
+	&::before {
+		height: 100%;
+		top: 0;
+		left: 0;
+		border-radius: 30 * @px_base;
 	}
 	.ui-dropdownmenu-active .ui-dropdownmenu-placeholder::after {
 		display: none;
 	}
-}
-.ui-appbar {
-	.ui-appbar-left-icons-container {
-		.ui-spinner {
-			margin-left: 4 * @px_base;
+	&.ui-focus {
+		background-color: transparent;
+
+		&::before {
+			opacity: 1;
+			background-color: var(--focus-bg-color);
 		}
 	}
 }
-.ui-li-has-dropdownmenu {
-	.ui-spinner {
-		margin-left: 4 * @px_base;
-	}
-}
diff --git a/src/css/profile/mobile/common/oneui-common.less b/src/css/profile/mobile/common/oneui-common.less
@@ -88,6 +88,7 @@
     --dropdown-menu-options-background: @dropdown-menu-options-background;
     --dropdown-menu-options-color: @dropdown-menu-options-color;
     --dropdown-menu-options-color-dim: fade(@dropdown-menu-options-color, 40%);
+    --spinner-icon-color: @spinner-icon-color;
     --content-area-line-color: @content-area-line-color;
 
     --list-item-selected-color: @list-item-selected-color;
@@ -119,3 +120,5 @@
     --date-picker-header-text-color: @calendar-text-color;
 
     --badge-color: @badge-color;
+
+    --focus-bg-color: @focus-bg-color;
diff --git a/src/css/profile/mobile/theme-changeable/theme.color.less b/src/css/profile/mobile/theme-changeable/theme.color.less
@@ -253,9 +253,6 @@
 //						DropdownMenu
 //***************************************************************************
 @color_dropdownmenu_list_group_stroke: B0733L1; // #[color] list stroke line color
-@color_dropdownmenu_placeholder_bg: W021L1; // #[color] placeholder background color
-@color_dropdownmenu_placeholder_bg_press: W021L1P; // #[color] placeholder background press color;
-@color_dropdownmenu_placeholder_bg_press_effect: var(--ripple-color); // #[color] placeholder background press effect color;
 @color_dropdownmenu_underline: F057; // #[color] underline color
 
 //***************************************************************************

diff --git a/src/css/profile/mobile/themes/dark.variables.less b/src/css/profile/mobile/themes/dark.variables.less
@@ -69,6 +69,7 @@
     @dropdown-menu-options-border: 0.75 * @px_base solid #525252;
     @dropdown-menu-options-background: #3d3d3d;
     @dropdown-menu-options-color: @color-white;
+    @spinner-icon-color: @color-white;
 
     @list-item-selected-color: fade(@color-white, 10%);
     @divider-color: #d4d4d4;
@@ -99,3 +100,6 @@
     @calendar-text-color: #cccccc;
     @calendar-arrow-color: #737373;
     @calendar-select-text-color: @_black;
+
+    @focus-bg-color: fade(@focus-color, 30%);
+
diff --git a/src/css/profile/mobile/themes/light.variables.less b/src/css/profile/mobile/themes/light.variables.less
@@ -67,7 +67,8 @@
 
     @dropdown-menu-options-border: 0.25 * @px_base solid #cccccc;
     @dropdown-menu-options-background: @popup-background-color;
-    @dropdown-menu-options-color: @_black;
+    @dropdown-menu-options-color: @color-black;
+    @spinner-icon-color: @color-black;
 
     @list-item-selected-color: fade(@primary-color, 8%);
     @divider-color: #e6e6e6;
@@ -98,3 +99,5 @@
     @calendar-text-color: #454545;
     @calendar-arrow-color: #8e8e8e;
     @calendar-select-text-color: @color-white;
+
+    @focus-bg-color: fade(@focus-color, 10%);
diff --git a/src/js/profile/mobile/widget/DropdownMenu.js b/src/js/profile/mobile/widget/DropdownMenu.js
@@ -1270,6 +1270,18 @@
 				}
 			};
 
+			prototype._focus = function () {
+				this._ui.elSelectWrapper.classList.add("ui-focus");
+			};
+
+			prototype._blur = function () {
+				this._ui.elSelectWrapper.classList.remove("ui-focus");
+			};
+
+			prototype._actionEnter = function () {
+				this.open();
+			};
+
 			/**
 			 * Show DropdownMenu options
 			 * @method _hide