Fastscroll: Adjust the latest GUI

Change-Id: Id84f24332f6e5df132adfca5da4955739173c2fe

4 files changed, 26 insertions, 38 deletions

diff --git a/src/js/widgets/jquery.mobile.tizen.fastscroll.js b/src/js/widgets/jquery.mobile.tizen.fastscroll.js
index 76422015..6b28fce9 100644
--- a/src/js/widgets/jquery.mobile.tizen.fastscroll.js
+++ b/src/js/widgets/jquery.mobile.tizen.fastscroll.js
@@ -183,7 +183,6 @@ define( [ '../jquery.mobile.tizen.scrollview' ], function ( ) {
 						var listItem = $( this );
 						$( listItem )
 							.removeClass( "ui-fastscroll-hover" )
-							.removeClass( "ui-fastscroll-hover-up" )
 							.removeClass( "ui-fastscroll-hover-down" );
 					});
 					// Hit test each list item
@@ -228,7 +227,6 @@ define( [ '../jquery.mobile.tizen.scrollview' ], function ( ) {
 					$popup.hide();
 					$( ".ui-fastscroll-hover" ).removeClass( "ui-fastscroll-hover" );
 					$( ".ui-fastscroll-hover-first-item" ).removeClass( "ui-fastscroll-hover-first-item" );
-					$( ".ui-fastscroll-hover-up" ).removeClass( "ui-fastscroll-hover-up" );
 					$( ".ui-fastscroll-hover-down" ).removeClass( "ui-fastscroll-hover-down" );
 					self._setTimer( true );
 				} );
@@ -261,8 +259,8 @@ define( [ '../jquery.mobile.tizen.scrollview' ], function ( ) {
 			}
 
 			$popup.text( text )
-				.css( { marginLeft: -( $popup.width() / 2 ),
-					marginTop: -( $popup.height() / 2 ),
+				.css( { marginLeft: -( $popup.outerWidth() / 2 ),
+					marginTop: -( $popup.outerHeight() / 2 ),
 					padding: $popup.css( "paddingTop" ) } )
 				.width( $popup.height() )
 				.show();
@@ -271,9 +269,6 @@ define( [ '../jquery.mobile.tizen.scrollview' ], function ( ) {
 			if ( listItem.index() === 0 ) {
 				$( listItem ).addClass( "ui-fastscroll-hover-first-item" );
 			}
-			if ( listItem.index() > 0 ) {
-				$( listItem ).siblings().eq( listItem.index() - 1 ).addClass( "ui-fastscroll-hover-up" );
-			}
 			$( listItem ).siblings().eq( listItem.index() ).addClass( "ui-fastscroll-hover-down" );
 		},
 
@@ -294,8 +289,8 @@ define( [ '../jquery.mobile.tizen.scrollview' ], function ( ) {
 			}
 
 			$popup.text( text )
-				.css( { marginLeft: -( $popup.width() / 2 ),
-					marginTop: -( $popup.height() / 2 ),
+				.css( { marginLeft: -( $popup.outerWidth() / 2 ),
+					marginTop: -( $popup.outerHeight() / 2 ),
 					padding: $popup.css( "paddingTop" ) } )
 				.width( $popup.height() )
 				.show();
@@ -304,9 +299,6 @@ define( [ '../jquery.mobile.tizen.scrollview' ], function ( ) {
 			if ( listItem.index() === 0 ) {
 				$( listItem ).addClass( "ui-fastscroll-hover-first-item" );
 			}
-			if ( listItem.index() > 0 ) {
-				$( listItem ).siblings().eq( listItem.index() - 1 ).addClass( "ui-fastscroll-hover-up" );
-			}
 			$( listItem ).siblings().eq( listItem.index() ).addClass( "ui-fastscroll-hover-down" );
 		},
 
@@ -323,7 +315,6 @@ define( [ '../jquery.mobile.tizen.scrollview' ], function ( ) {
 				$popup.hide();
 				$( ".ui-fastscroll-hover" ).removeClass( "ui-fastscroll-hover" );
 				$( ".ui-fastscroll-hover-first-item" ).removeClass( "ui-fastscroll-hover-first-item" );
-				$( ".ui-fastscroll-hover-up" ).removeClass( "ui-fastscroll-hover-up" );
 				$( ".ui-fastscroll-hover-down" ).removeClass( "ui-fastscroll-hover-down" );
 				self._setTimer( true );
 			});
diff --git a/src/themes/tizen/common/jquery.mobile.tizen.fastscroll.less b/src/themes/tizen/common/jquery.mobile.tizen.fastscroll.less
index af9e52f9..9c5e5ed8 100644
--- a/src/themes/tizen/common/jquery.mobile.tizen.fastscroll.less
+++ b/src/themes/tizen/common/jquery.mobile.tizen.fastscroll.less
@@ -74,11 +74,10 @@
 	background: @color_fastscroll_popup_bg;
 	color: @color_fastscroll_popup_text;
 	padding:10*@unit_base 30*@unit_base;
-	-ms-box-shadow: 8*@unit_base 10*@unit_base 0*@unit_base @color_fastscroll_popup_shadow;
-	-o-box-shadow: 8*@unit_base 10*@unit_base 0*@unit_base @color_fastscroll_popup_shadow; 
-	-moz-box-shadow: 8*@unit_base 10*@unit_base 0*@unit_base @color_fastscroll_popup_shadow;
-	-webkit-box-shadow: 8*@unit_base 10*@unit_base 0*@unit_base @color_fastscroll_popup_shadow;
-	box-shadow: 8*@unit_base 10*@unit_base 0*@unit_base @color_fastscroll_popup_shadow;
+	border: 1px solid @color_fastscroll_popup_border;
+	border-radius: .1em;
+	box-shadow: -2px -2px 2px #fff, 8*@unit_base 10*@unit_base 4*@unit_base @color_fastscroll_popup_shadow;
+	text-shadow: 0px -2px -2px @color_fastscroll_popup_shadow;
 	text-align: center;
 	font-size: 75*@unit_base;
 	font-weight: bold;
@@ -88,38 +87,34 @@
 	top: 50%;
 }
 
-li.ui-fastscroll-hover {
-	color : @color_fastscroll_popup_bg;
-}
-
 li.ui-fastscroll-hover,
-li.ui-fastscroll-hover-up,
 li.ui-fastscroll-hover-down {
-	background : @color_list_bg;
-
 	border-style : solid;
 	border-color : @color_fastscroll_popup_bg;
 	border-width : 0px;
-	border-right-width : 3 * @unit_base;
-	border-left-width : 1px;
-	border-left-color : @color_list_bg;
+
+	padding-top : 0px;
+	padding-bottom : 0px;
 }
 
 li.ui-fastscroll-hover {
-	padding-top : @unit_base;
-	padding-bottom : @unit_base;
-}
+	background : @color_list_bg;
+	color : @color_fastscroll_popup_bg;
 
-li.ui-fastscroll-hover-first-item {
-	padding-top : 2 * @unit_base;
+	border-top-width : 3 * @unit_base;
+	border-right-width : 3 * @unit_base;
+	border-left-width : 1px;
+	border-left-color : @color_list_bg;
 }
 
-li.ui-fastscroll-hover-up {
-	border-top-width : 3 * @unit_base;
-	padding-top : 0px;
+li.ui-fastscroll-hover-first-item {
+	border-top-width : 0px;
+	padding-top : 1.5 * @unit_base;
+	padding-bottom : 1.5 * @unit_base;
 }
 
 li.ui-fastscroll-hover-down {
-	border-bottom-width : 3 * @unit_base;
-	padding-bottom : 0px;
+	border-top-width : 3 * @unit_base;
+	border-left-width : 3 * @unit_base;
+	padding-bottom : 2 * @unit_base;
 }
diff --git a/src/themes/tizen/tizen-black/style.less b/src/themes/tizen/tizen-black/style.less
index fdb30971..e5579b98 100644
--- a/src/themes/tizen/tizen-black/style.less
+++ b/src/themes/tizen/tizen-black/style.less
@@ -68,6 +68,7 @@
 @color_fastscroll_popup_bg: rgba(59, 115, 182, 1);		/* B0731 : 00_fast_scroll_popup_bg.png */
 @color_fastscroll_popup_shadow: rgba(199, 199, 199, 0.5);
 @color_fastscroll_popup_text: rgba(255, 255, 255, 1);		/* B0732 : Scroll popup text */
+@color_fastscroll_popup_border: rgba(100, 100, 100, 0.5);
 
 
 /***************************************************************************
diff --git a/src/themes/tizen/tizen-white/style.less b/src/themes/tizen/tizen-white/style.less
index d042436d..bfab0e88 100644
--- a/src/themes/tizen/tizen-white/style.less
+++ b/src/themes/tizen/tizen-white/style.less
@@ -69,6 +69,7 @@
 @color_fastscroll_popup_bg: rgba(59, 115, 182, 1);		/* B0731 : 00_fast_scroll_popup_bg.png */
 @color_fastscroll_popup_shadow: rgba(199, 199, 199, 0.5);
 @color_fastscroll_popup_text: rgba(255, 255, 255, 1);		/* B0732 : Scroll popup text */
+@color_fastscroll_popup_border: rgba(100, 100, 100, 0.5);
 
 
 /***************************************************************************