datetimepicker: VI update

This patch supports new VI. (VI-WIN.011)

Change-Id: I2834914925da7b7037520738f380b5b2e40a84fb

diff --git a/src/themes/tizen/common/jquery.mobile.tizen.datetimepicker.less b/src/themes/tizen/common/jquery.mobile.tizen.datetimepicker.less
index 58fc0ab..685b3a3 100755 (executable)
--- a/src/themes/tizen/common/jquery.mobile.tizen.datetimepicker.less
+++ b/src/themes/tizen/common/jquery.mobile.tizen.datetimepicker.less
@@ -1,5 +1,23 @@
 @import "config.less";
 
+@-webkit-keyframes ui-datetime-in {
+       from {
+               -webkit-transform: translateY(14 * @unit_base) scale(.9);
+       } to {
+               -webkit-transform: translateY(0) scale(1);
+       }
+}
+
+@-webkit-keyframes ui-datetime-out {
+       from {
+               opacity: 0.8;
+               -webkit-transform: translateY(0) scale(.6);
+       } to {
+               opacity: 0;
+               -webkit-transform: translateY(-14 * @unit_base) scale(.6);
+       }
+}
+
 .ui-datefield {
        .ui-datefield-seperator {
                display: inline-block;
@@ -14,9 +32,27 @@
        .ui-datefield-tab {
                min-width: 20 * @unit_base;
        }
+
        .ui-btn-box-s .ui-btn-inner.ui-btn-hastxt {
                padding: 0.1em 0.5em;
        }
+
+       .ui-datefield-selected {
+               display: inline-block;
+               color: @color_timepicker_selector_color;
+       }
+       .ui-datefield-selected.in {
+               -ms-animation: ui-datetime-in 0.3s 1 ease;
+               -o-animation: ui-datetime-in 0.3s 1 ease;
+               -moz-animation: ui-datetime-in 0.3s 1 ease;
+               -webkit-animation: ui-datetime-in 0.3s 1 ease;
+       }
+       .ui-datefield-selected.out {
+               -ms-animation: ui-datetime-out 0.3s 1 ease;
+               -o-animation: ui-datetime-out 0.3s 1 ease;
+               -moz-animation: ui-datetime-out 0.3s 1 ease;
+               -webkit-animation: ui-datetime-out 0.3s 1 ease;
+       }
 }
 
 .ui-datetime {

diff --git a/src/themes/tizen/tizen-white/style.less b/src/themes/tizen/tizen-white/style.less
index 3d26c77..6cca4f1 100755 (executable)
--- a/src/themes/tizen/tizen-white/style.less
+++ b/src/themes/tizen/tizen-white/style.less
@@ -208,7 +208,7 @@
 /***************************************************************************
                    Date Time picker
 ***************************************************************************/
-@color_timepicker_selector_color:      rgb(42,137,194);
+@color_timepicker_selector_color:      rgb(59,115,182);
 @font_size_datetime_main_text:              22 * @unit_base;
 @font_size_datetime_sub_text:               16 * @unit_base;
 

diff --git a/src/widgets/circularview/js/jquery.mobile.tizen.circularview.js b/src/widgets/circularview/js/jquery.mobile.tizen.circularview.js
index 4f5dfa0..95e7b7c 100755 (executable)
--- a/src/widgets/circularview/js/jquery.mobile.tizen.circularview.js
+++ b/src/widgets/circularview/js/jquery.mobile.tizen.circularview.js
@@ -329,7 +329,7 @@
                        for ( i = 0; i < this._items.length; i++ ) {
                                if ( $( this._items[i]).is( selector ) ) {
                                        newX = -( i * this._itemWidth - this._clipWidth / 2 + this._itemWidth * 1.5 );
-                                       this.scrollTo( newX + this._clipWidth * 2, 0 );
+                                       this.scrollTo( newX + this._itemWidth, 0 );
                                        this.scrollTo( newX, 0, duration );
                                        return;
                                }

diff --git a/src/widgets/datetimepicker/js/jquery.mobile.tizen.datetimepicker.js b/src/widgets/datetimepicker/js/jquery.mobile.tizen.datetimepicker.js
index ba7c6f0..c49caef 100644 (file)
--- a/src/widgets/datetimepicker/js/jquery.mobile.tizen.datetimepicker.js
+++ b/src/widgets/datetimepicker/js/jquery.mobile.tizen.datetimepicker.js
@@ -437,9 +437,24 @@
                                text = value;
                                break;
                        }
+
                        // to avoid reflow where its value isn't out-dated
                        if ( target.text() != text ) {
-                               target.text( text );
+                               if ( target.hasClass("ui-datefield-selected") ) {
+                                       target.addClass("out");
+
+                                       target.animationComplete( function () {
+                                               target.text( text );
+                                               target.addClass("in")
+                                                       .removeClass("out");
+
+                                               target.animationComplete( function () {
+                                                       target.removeClass("in");
+                                               });
+                                       });
+                               } else {
+                                       target.text( text );
+                               }
                        }
                },
 
@@ -676,7 +691,7 @@
                                }
 
                                $ul = $("<ul></ul>");
-                               $div = $('<div class="ui-datetimepicker-selector" data-transition="none" data-fade="false"></div>');
+                               $div = $('<div class="ui-datetimepicker-selector" data-transition="fade" data-fade="false"></div>');
                                $div.append( $ul ).appendTo( ui );
                                $ctx = $div.ctxpopup();
                                $ctx.parents('.ui-popupwindow').addClass('ui-datetimepicker');
@@ -705,8 +720,8 @@
                                });
 
                                $(obj).bind( 'update', function ( e, val ) {
-                                       $ctx.popupwindow( 'close' );
                                        var date = new Date( this.options.date );
+
                                        switch ( field[1] ) {
                                        case 'min':
                                                date.setMinutes( val );
@@ -732,6 +747,7 @@
                                                date.setDate( val );
                                                break;
                                        }
+
                                        obj._setDate( date );
                                });
 
@@ -744,7 +760,7 @@
                                        }
                                });
 
-                               $div.circularview( 'centerTo', '.current', 200 );
+                               $div.circularview( 'centerTo', '.current', 500 );
                                $div.bind( 'scrollend' , function ( e ) {
                                        if ( !obj._reflow ) {
                                                obj._reflow = function () {