Fastscroll: Adjust the latest GUI
authorMinkyeong Kim <minkyeong.kim@samsung.com>
Tue, 30 Apr 2013 12:51:00 +0000 (21:51 +0900)
committerhjnim.kim <hjnim.kim@samsung.com>
Fri, 3 May 2013 06:29:07 +0000 (15:29 +0900)
Change-Id: Id84f24332f6e5df132adfca5da4955739173c2fe

src/js/widgets/jquery.mobile.tizen.fastscroll.js
src/themes/tizen/common/jquery.mobile.tizen.fastscroll.less
src/themes/tizen/tizen-black/style.less
src/themes/tizen/tizen-white/style.less

index 7642201..6b28fce 100644 (file)
@@ -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 );
                        });
index af9e52f..9c5e5ed 100644 (file)
        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;
        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;
 }
index fdb3097..e5579b9 100644 (file)
@@ -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);
 
 
 /***************************************************************************
index d042436..bfab0e8 100644 (file)
@@ -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);
 
 
 /***************************************************************************