Tokentextarea: Adjusts VI effect for add/remove block

Adjusts fade in/out effects for add/remove block action.

Change-Id: I7617db01e00e1f168cf0f3347c6170ac71dff5b5

diff --git a/src/js/widgets/jquery.mobile.tizen.tokentextarea.js b/src/js/widgets/jquery.mobile.tizen.tokentextarea.js
index ecd3858..0a91ef9 100755 (executable)
--- a/src/js/widgets/jquery.mobile.tizen.tokentextarea.js
+++ b/src/js/widgets/jquery.mobile.tizen.tokentextarea.js
@@ -380,7 +380,6 @@ define( [ '../jquery.mobile.tizen.core' ], function ( ) {
                                if ( $view.innerWidth() === 0 ) {
                                        return ;
                                }
-                               var inputBox = $view.find( ".ui-tokentextarea-input" );
                                self._modifyInputBoxWidth();
                                $( inputbox ).removeClass( "ui-tokentextarea-input-invisible" ).addClass( "ui-tokentextarea-input-visible" );
                        });
@@ -431,9 +430,13 @@ define( [ '../jquery.mobile.tizen.core' ], function ( ) {
                        textBlock = self._ellipsisTextBlock( textBlock );
                        textBlock.css( {'visibility': 'visible'} );
 
-                       self._currentWidth += self._calcBlockWidth( textBlock );
                        self._modifyInputBoxWidth();
-                       $view.trigger( "add" );
+
+                       textBlock.hide();
+                       textBlock.fadeIn( "fast", function() {
+                               self._currentWidth += self._calcBlockWidth( textBlock );
+                               $view.trigger( "add" );
+                       });
                },
 
                _removeTextBlock : function () {
@@ -445,8 +448,11 @@ define( [ '../jquery.mobile.tizen.core' ], function ( ) {
 
                        if ( lockBlock !== null && lockBlock.length > 0 ) {
                                self._currentWidth -= self._calcBlockWidth( lockBlock );
-                               lockBlock.remove();
-                               self._modifyInputBoxWidth();
+
+                               lockBlock.fadeOut( "fast", function() {
+                                       lockBlock.remove();
+                                       self._modifyInputBoxWidth();
+                               });
 
                                this._eventRemoveCall = true;
                                if ( $view[0].remove ) {
@@ -543,7 +549,7 @@ define( [ '../jquery.mobile.tizen.core' ], function ( ) {
                                                inputBoxWidth = self._viewWidth;
                                        }
                                } else {
-                                       if ( blockWidth >= inputBoxWidth ) {
+                                       if ( blockWidth > inputBoxWidth ) {
                                                inputBoxWidth = self._viewWidth - blockWidth;
                                        } else {
                                                inputBoxWidth -= blockWidth;
@@ -645,7 +651,7 @@ define( [ '../jquery.mobile.tizen.core' ], function ( ) {
                                statement = self._stringFormat( self.options.description, blocks.length - lastIndex - 1 );
                                tempBlock = $( document.createElement( 'label' ) );
                                tempBlock.text( statement );
-                               tempBlock.addClass( "ui-tokentextarea-desclabel" ).addClass( "ui-tokentextarea-desclabel" );
+                               tempBlock.addClass( "ui-tokentextarea-desclabel" );
                                $( blocks[lastIndex] ).after( tempBlock );
                        }
 
@@ -713,12 +719,19 @@ define( [ '../jquery.mobile.tizen.core' ], function ( ) {
                        }
 
                        if ( arguments.length === 0 ) {
-                               blocks.remove();
-                               this._trigger( "clear" );
+                               blocks.fadeOut( "fast", function() {
+                                       blocks.remove();
+                                       self._modifyInputBoxWidth();
+                                       this._trigger( "clear" );
+                               });
                        } else if ( !isNaN( position ) ) {
                                // remove selected button
                                index = ( ( position < blocks.length ) ? position : ( blocks.length - 1 ) );
-                               $( blocks[index] ).remove();
+
+                               $( blocks[index] ).fadeOut( "fast", function() {
+                                       $( blocks[index] ).remove();
+                                       self._modifyInputBoxWidth();
+                               });
 
                                this._eventRemoveCall = true;
                                if ( $view[0].remove ) {
@@ -731,7 +744,6 @@ define( [ '../jquery.mobile.tizen.core' ], function ( ) {
                                }
                                this._eventRemoveCall = false;
                        }
-                       self._modifyInputBoxWidth();
                },
 
                length : function () {

diff --git a/src/themes/tizen/common/jquery.mobile.tizen.tokentextarea.less b/src/themes/tizen/common/jquery.mobile.tizen.tokentextarea.less
index dd6aaf1..c7aa039 100644 (file)
--- a/src/themes/tizen/common/jquery.mobile.tizen.tokentextarea.less
+++ b/src/themes/tizen/common/jquery.mobile.tizen.tokentextarea.less
@@ -3,15 +3,16 @@
 .ui-tokentextarea {
        display : table;
        outline : none;
+       position : relative;
 }
 
 .ui-tokentextarea .ui-tokentextarea-label {
        display : inline-block;
        text-align : center;
        position : relative;
-       margin-left : .3em;
-       margin-right : .3em;
-       padding : .6em 0em;
+       margin-left : 5px;
+       margin-right : 5px;
+       padding : 10px 0px;
        color : @color_tokentextarea_label_text;
        font-weight : bold;
        text-align : center;
@@ -23,7 +24,7 @@
        position : relative;
        border : 0 !important;
        padding : 0 !important;
-       margin : .5em;
+       margin : 8px;
        color : @color_tokentextarea_input_text;
        text-align : left;
        font-size : 1em;
@@ -42,11 +43,11 @@
        text-align : center;
        cursor : pointer;
        position : relative;
-       margin-left : .3em;
-       margin-right : .3em;
-       margin-bottom : .3em;
-       margin-top : .3em;
-       padding : .2em .5em;
+       margin-left : 5px;
+       margin-right : 5px;
+       margin-bottom : 5px;
+       margin-top : 5px;
+       padding : 3px 8px;
        font-size : 1em;
        text-shadow : 0 .1em .1em rgba(0,0,0,.3);
        -ms-border-radius : .2em;
@@ -66,7 +67,7 @@ div.ui-tokentextarea-block {
        background-image : url(./images/00_contacts_button_header.png);
        background-size : contain;
        background-repeat : no-repeat;
-       padding-left : .7em;
+       padding-left : 11px;
 }
 
 div.ui-tokentextarea-sblock {
@@ -74,7 +75,7 @@ div.ui-tokentextarea-sblock {
        background-image : url(./images/00_contacts_button_header_press.png);
        background-size : contain;
        background-repeat : no-repeat;
-       padding-left : .7em;
+       padding-left : 11px;
 }
 
 .ui-tokentextarea .ui-tokentextarea-desclabel {
@@ -87,6 +88,8 @@ div.ui-tokentextarea-sblock {
        font-size : 1em;
 }
 
-.ui-tokentextarea-focus-button {
-    background-image : url(./images/00_button_expand_opened.png);
- }
+.ui-tokentextarea-link-base {
+       position : absolute;
+       right : 0em;
+       bottom : .2em;
+}

diff --git a/src/themes/tizen/tizen-white/style.less b/src/themes/tizen/tizen-white/style.less
index 4db7714..f25999b 100644 (file)
--- a/src/themes/tizen/tizen-white/style.less
+++ b/src/themes/tizen/tizen-white/style.less
@@ -343,7 +343,6 @@
 @color_tokentextarea_block_bg : rgb(95, 138, 189);
 @color_tokentextarea_press_bg : rgb(54, 89, 132);
 @color_tokentextarea_input_text : #222222;
-@color_tokentextarea_link : rgb(186, 185, 180);
 @color_tokentextarea_label_text : rgb(102, 102, 102);
 
 /***************************************************************************