Handler: Adjust the latest GUI

Change-Id: Id943db93feee26ae0c373bb42f7ba73175e32e66

diff --git a/src/js/widgets/jquery.mobile.tizen.scrollview.handler.js b/src/js/widgets/jquery.mobile.tizen.scrollview.handler.js
index b2b1352..67eafe3 100644 (file)
--- a/src/js/widgets/jquery.mobile.tizen.scrollview.handler.js
+++ b/src/js/widgets/jquery.mobile.tizen.scrollview.handler.js
@@ -98,7 +98,7 @@ define( [ '../jquery.mobile.tizen.core', '../jquery.mobile.tizen.scrollview' ],
                createHandler = function ( target ) {
                        var $view = target,
                                prefix = "<div class=\"ui-handler ui-handler-direction-",
-                               suffix = "\"><div class=\"ui-handler-track\"><div class=\"ui-handler-thumb\"></div></div></div>",
+                               suffix = "\"><div class=\"ui-handler-track\"><div class=\"ui-handler-handle\"><div class=\"ui-handler-thumb\"></div></div></div></div>",
                                scrollview = $view.data( "scrollview" ),
                                options = scrollview.options,
                                direction = options.direction,
@@ -109,7 +109,7 @@ define( [ '../jquery.mobile.tizen.core', '../jquery.mobile.tizen.scrollview' ],
                                _$clip = scrollview._$clip,
                                scrollbar = $view.find( ".ui-scrollbar" ),
                                handler = null,
-                               handlerThumb = null,
+                               handlerHandle = null,
                                viewLength = 0,
                                clipLength = 0,
                                handlerHeight = 0,
@@ -128,7 +128,7 @@ define( [ '../jquery.mobile.tizen.core', '../jquery.mobile.tizen.scrollview' ],
                                },
                                setHanderPostion = function ( scrollPos ) {
                                        var handlerPos = Math.round( ( isHorizontal ? scrollPos.x : scrollPos.y ) / viewLength * trackLength );
-                                       handlerThumb[0].style[ ( isHorizontal ? "left" : "top" ) ] = handlerPos + "px";
+                                       handlerHandle[0].style[ ( isHorizontal ? "left" : "top" ) ] = handlerPos + "px";
                                },
                                stopHandlerScroll = function () {
                                        $( document ).unbind( ".handler" );
@@ -136,16 +136,16 @@ define( [ '../jquery.mobile.tizen.core', '../jquery.mobile.tizen.scrollview' ],
                                        _$view.trigger( "scrollstop" );
                                };
 
-                       if ( $view.find( ".ui-handler-thumb" ).length !== 0 || typeof direction !== "string" ) {
+                       if ( $view.find( ".ui-handler-handle" ).length !== 0 || typeof direction !== "string" ) {
                                return;
                        }
 
                        handler = $( [ prefix, direction, suffix ].join( "" ) ).appendTo( $view.addClass( " ui-handler-" + theme ) );
-                       handlerThumb = $view.find( ".ui-handler-thumb" ).attr( {
+                       handlerHandle = $view.find( ".ui-handler-handle" ).attr( {
                                "tabindex" : "0",
                                "aria-label" : ( isHorizontal ? "Horizontal handler, double tap and move to scroll" : "Verticalhandler, double tap and move to scroll" )
                        }).hide();
-                       handlerHeight = ( isHorizontal ? handlerThumb.width() : handlerThumb.height() );
+                       handlerHeight = ( isHorizontal ? handlerHandle.width() : handlerHandle.height() );
                        handlerMargin = ( isHorizontal ? parseInt( handler.css( "right" ), 10 ) : parseInt( handler.css( "bottom" ), 10 ) );
 
                        $.extend( $view, {
@@ -153,8 +153,8 @@ define( [ '../jquery.mobile.tizen.core', '../jquery.mobile.tizen.scrollview' ],
                        });
 
                        // handler drag
-                       handlerThumb.bind( dragStartEvt, {
-                               e : handlerThumb[0]
+                       handlerHandle.bind( dragStartEvt, {
+                               e : handlerHandle[0]
                        }, function ( event ) {
                                scrollview._stopMScroll();
 
@@ -238,7 +238,7 @@ define( [ '../jquery.mobile.tizen.core', '../jquery.mobile.tizen.scrollview' ],
                                }
 
                                handler.addClass( "ui-handler-visible" );
-                               handlerThumb.stop( true, true )
+                               handlerHandle.stop( true, true )
                                                        .fadeIn();
                        }).bind( "scrollupdate", function ( event, data ) {
                                if ( !scrollview.enableHandler() || viewLength < 0 || clipLength < handlerHeight ) {
@@ -265,7 +265,7 @@ define( [ '../jquery.mobile.tizen.core', '../jquery.mobile.tizen.scrollview' ],
                                }
                                scrollview._handlerTimer = setTimeout( function () {
                                        if ( scrollview._timerID === 0 && $view.moveData === null ) {
-                                               handlerThumb.stop( true, true )
+                                               handlerHandle.stop( true, true )
                                                        .css( "opacity", 1.0 )
                                                        .fadeOut( function () {
                                                                handler.removeClass( "ui-handler-visible" );

diff --git a/src/themes/tizen/common/jquery.mobile.tizen.scrollview.handler.less b/src/themes/tizen/common/jquery.mobile.tizen.scrollview.handler.less
index bdcb4d4..0981c68 100644 (file)
--- a/src/themes/tizen/common/jquery.mobile.tizen.scrollview.handler.less
+++ b/src/themes/tizen/common/jquery.mobile.tizen.scrollview.handler.less
@@ -9,21 +9,21 @@
 }
 
 .ui-handler-visible {
-  opacity: 1;
+       opacity: 1;
 }
 
 .ui-handler-direction-y {
        top : 10 * @unit_base_handler;
-       right : 10 * @unit_base_handler;
+       right : 0 * @unit_base_handler;
        bottom : 10 * @unit_base_handler;
-       width : 48 * @unit_base_handler;
+       width : 36 * @unit_base_handler;
 }
 
 .ui-handler-direction-x {
        right : 10 * @unit_base_handler;
-       bottom : 10 * @unit_base_handler;
+       bottom : 0 * @unit_base_handler;
        left : 10 * @unit_base_handler;
-       height : 48 * @unit_base_handler;
+       height : 36 * @unit_base_handler;
 }
 
 .ui-handler-track {
@@ -32,19 +32,32 @@
        height : 100%;
 }
 
-.ui-handler-thumb {
+.ui-handler-handle {
        position : absolute;
        top : 0;
        left : 0;
+}
+
+.ui-handler-direction-x .ui-handler-handle {
+       width : 234 * @unit_base_handler;
+       height : 36 * @unit_base_handler;
+}
+
+.ui-handler-direction-y .ui-handler-handle {
+       width : 36 * @unit_base_handler;
+       height : 234 * @unit_base_handler;
+}
+
+.ui-handler-thumb {
        background-position : center;
        background-repeat : no-repeat;
-       .LESSborder-radius-all(5 * @unit_base_handler);
+       .LESSborder-radius-all(11 * @unit_base_handler);
 }
 
 .ui-handler-direction-y .ui-handler-thumb {
-       width : 48 * @unit_base_handler;
-       height : 214 * @unit_base_handler;
-       background-size : 48 * @unit_base_handler       40 * @unit_base_handler;
+       width : 23 * @unit_base_handler;
+       height : 229 * @unit_base_handler;
+       background-size : 23 * @unit_base_handler       37 * @unit_base_handler;
 }
 
 .ui-handler-direction-x .ui-handler-thumb {

diff --git a/src/themes/tizen/tizen-black/images/00_scroll_bar_handler.png b/src/themes/tizen/tizen-black/images/00_scroll_bar_handler.png
index 52ffbef..399413e 100644 (file)
Binary files a/src/themes/tizen/tizen-black/images/00_scroll_bar_handler.png and b/src/themes/tizen/tizen-black/images/00_scroll_bar_handler.png differ

diff --git a/src/themes/tizen/tizen-black/images/00_scroll_bar_handler_hor.png b/src/themes/tizen/tizen-black/images/00_scroll_bar_handler_hor.png
index 76a84a9..dad9669 100644 (file)
Binary files a/src/themes/tizen/tizen-black/images/00_scroll_bar_handler_hor.png and b/src/themes/tizen/tizen-black/images/00_scroll_bar_handler_hor.png differ

diff --git a/src/themes/tizen/tizen-black/style.less b/src/themes/tizen/tizen-black/style.less
index 437e1ec..fd701d4 100644 (file)
--- a/src/themes/tizen/tizen-black/style.less
+++ b/src/themes/tizen/tizen-black/style.less
@@ -311,7 +311,8 @@
 /***************************************************************************
                    Handler
 ***************************************************************************/
-@color_scrollview_handler_bg : rgba(150, 150, 150, 0.5);
+@color_scrollview_handler_bg : rgba(198, 196, 190, 1);
+@color_scrollview_handler_shadow : rgb(0, 0, 0, 0.5);
 
 
 /***************************************************************************

diff --git a/src/themes/tizen/tizen-white/images/00_scroll_bar_handler.png b/src/themes/tizen/tizen-white/images/00_scroll_bar_handler.png
index 52ffbef..399413e 100644 (file)
Binary files a/src/themes/tizen/tizen-white/images/00_scroll_bar_handler.png and b/src/themes/tizen/tizen-white/images/00_scroll_bar_handler.png differ

diff --git a/src/themes/tizen/tizen-white/images/00_scroll_bar_handler_hor.png b/src/themes/tizen/tizen-white/images/00_scroll_bar_handler_hor.png
index 76a84a9..dad9669 100644 (file)
Binary files a/src/themes/tizen/tizen-white/images/00_scroll_bar_handler_hor.png and b/src/themes/tizen/tizen-white/images/00_scroll_bar_handler_hor.png differ

diff --git a/src/themes/tizen/tizen-white/style.less b/src/themes/tizen/tizen-white/style.less
index cb0a627..dbd4071 100644 (file)
--- a/src/themes/tizen/tizen-white/style.less
+++ b/src/themes/tizen/tizen-white/style.less
@@ -312,7 +312,8 @@
 /***************************************************************************
                    Handler
 ***************************************************************************/
-@color_scrollview_handler_bg : rgba(150, 150, 150, 0.5);
+@color_scrollview_handler_bg : rgba(198, 196, 190, 1);
+@color_scrollview_handler_shadow : rgb(0, 0, 0, 0.5);
 
 
 /***************************************************************************