From 1604a8eada59810ed55db7566057ff87399da866 Mon Sep 17 00:00:00 2001 From: Minkyeong Kim Date: Fri, 8 Mar 2013 17:39:52 +0900 Subject: [PATCH] Tokentextarea: Adjusts VI effect for add/remove block Adjusts fade in/out effects for add/remove block action. Change-Id: I7617db01e00e1f168cf0f3347c6170ac71dff5b5 --- .../widgets/jquery.mobile.tizen.tokentextarea.js | 34 +++++++++++++++------- .../common/jquery.mobile.tizen.tokentextarea.less | 31 +++++++++++--------- src/themes/tizen/tizen-white/style.less | 1 - 3 files changed, 40 insertions(+), 26 deletions(-) diff --git a/src/js/widgets/jquery.mobile.tizen.tokentextarea.js b/src/js/widgets/jquery.mobile.tizen.tokentextarea.js index ecd3858..0a91ef9 100755 --- 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 --- 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 --- 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); /*************************************************************************** -- 2.7.4