Merge "[3.0] Fixed dali-demo keyboard focus and updated appearance" into tizen
authorSeoyeon Kim <seoyeon2.kim@samsung.com>
Wed, 9 Nov 2016 04:54:37 +0000 (20:54 -0800)
committerGerrit Code Review <gerrit@review.vlan103.tizen.org>
Wed, 9 Nov 2016 04:54:37 +0000 (20:54 -0800)
1  2 
demo/dali-table-view.cpp

diff --combined demo/dali-table-view.cpp
@@@ -43,6 -43,14 +43,14 @@@ namespac
  const std::string LOGO_PATH( DEMO_IMAGE_DIR "Logo-for-demo.png" );
  const std::string TILE_BACKGROUND(DEMO_IMAGE_DIR "item-background.9.png");
  const std::string TILE_BACKGROUND_ALPHA( DEMO_IMAGE_DIR "demo-tile-texture.9.png" );
+ const std::string TILE_FOCUS( DEMO_IMAGE_DIR "tile-focus.9.png" );
+ // Keyboard focus constants.
+ const float KEYBOARD_FOCUS_ANIMATION_DURATION = 1.0f;           ///< The total duration of the keyboard focus animation
+ const float KEYBOARD_FOCUS_START_SCALE = 1.05f;                 ///< The starting scale of the focus highlight
+ const float KEYBOARD_FOCUS_END_SCALE = 1.18f;                   ///< The end scale of the focus highlight
+ const float KEYBOARD_FOCUS_END_ALPHA = 0.7f;                    ///< The end alpha of the focus highlight
+ const float KEYBOARD_FOCUS_INITIAL_FADE_PERCENTAGE = 0.16f;     ///< The duration of the initial fade (from translucent to the end-alpha) as a percentage of the overal animation duration.
  
  const float TILE_LABEL_PADDING = 8.0f;                          ///< Border between edge of tile and the example text
  const float BUTTON_PRESS_ANIMATION_TIME = 0.35f;                ///< Time to perform button scale effect.
@@@ -252,8 -260,6 +260,8 @@@ void DaliTableView::Initialize( Applica
    logo.SetAnchorPoint( AnchorPoint::TOP_CENTER );
    logo.SetParentOrigin( Vector3( 0.5f, 0.1f, 0.5f ) );
    logo.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
 +  // The logo should appear on top of everything.
 +  logo.SetDrawMode( DrawMode::OVERLAY_2D );
  
    // Show version in a popup when log is tapped
    mLogoTapDetector = TapGestureDetector::New();
    SetupBackground( bubbleContainer );
  
    mRootActor.Add( logo );
 -  // We use depth index to bring the logo above the bubbles (as an alternative to creating actors).
 -  logo.GetRendererAt( 0 ).SetProperty( Renderer::Property::DEPTH_INDEX, 30000 );
    mRootActor.Add( bubbleContainer );
    mRootActor.Add( mScrollView );
  
    KeyboardFocusManager::Get().PreFocusChangeSignal().Connect( this, &DaliTableView::OnKeyboardPreFocusChange );
    KeyboardFocusManager::Get().FocusedActorEnterKeySignal().Connect( this, &DaliTableView::OnFocusedActorActivated );
    AccessibilityManager::Get().FocusedActorActivatedSignal().Connect( this, &DaliTableView::OnFocusedActorActivated );
+   mFocusContainer = ImageView::New( TILE_FOCUS );
+   mFocusContainer.SetParentOrigin( ParentOrigin::CENTER );
+   mFocusContainer.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
+   mFocusContainer.SetInheritScale( false );
+   mFocusContainer.SetColorMode( USE_OWN_COLOR );
+   mFocusContainer.SetName( "focusActor" );
+   mFocusContainer.OnStageSignal().Connect( this, &DaliTableView::OnStageConnect );
+   mFocusInner = ImageView::New( TILE_FOCUS );
+   mFocusInner.SetParentOrigin( ParentOrigin::CENTER );
+   mFocusInner.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
+   mFocusInner.SetInheritScale( false );
+   mFocusInner.SetColorMode( USE_OWN_COLOR );
+   mFocusInner.SetName( "focusActor" );
+   mFocusInner.OnStageSignal().Connect( this, &DaliTableView::OnStageConnect );
+   mFocusContainer.Add( mFocusInner );
+   // Setup the keyboard focus highlight.
+   Vector3 startScale( KEYBOARD_FOCUS_START_SCALE, KEYBOARD_FOCUS_START_SCALE, KEYBOARD_FOCUS_START_SCALE );
+   Vector3 endScale( KEYBOARD_FOCUS_END_SCALE, KEYBOARD_FOCUS_END_SCALE, KEYBOARD_FOCUS_END_SCALE );
+   mFocusAnimation = Animation::New( KEYBOARD_FOCUS_ANIMATION_DURATION );
+   mFocusAnimationInner = Animation::New( KEYBOARD_FOCUS_ANIMATION_DURATION );
+   mFocusContainer.SetScale( startScale );
+   mFocusInner.SetScale( startScale );
+   mFocusContainer.SetOpacity( 0.0f );
+   mFocusInner.SetOpacity( 0.0f );
+   const float initialFadeDuration = KEYBOARD_FOCUS_ANIMATION_DURATION * KEYBOARD_FOCUS_INITIAL_FADE_PERCENTAGE;
+   mFocusAnimation.AnimateTo( Property( mFocusContainer, Actor::Property::COLOR_ALPHA ), KEYBOARD_FOCUS_END_ALPHA, AlphaFunction::LINEAR, TimePeriod( 0.0f, initialFadeDuration ) );
+   mFocusAnimation.AnimateTo( Property( mFocusContainer, Actor::Property::SCALE ), endScale, AlphaFunction::LINEAR, TimePeriod( initialFadeDuration, KEYBOARD_FOCUS_ANIMATION_DURATION - initialFadeDuration ) );
+   mFocusAnimation.AnimateTo( Property( mFocusContainer, Actor::Property::COLOR_ALPHA ), 0.0f, AlphaFunction::LINEAR, TimePeriod( initialFadeDuration, KEYBOARD_FOCUS_ANIMATION_DURATION - initialFadeDuration ) );
+   mFocusAnimationInner.AnimateTo( Property( mFocusInner, Actor::Property::COLOR_ALPHA ), KEYBOARD_FOCUS_END_ALPHA, AlphaFunction::LINEAR, TimePeriod( 0.0f, initialFadeDuration ) );
+   mFocusAnimationInner.AnimateTo( Property( mFocusInner, Actor::Property::SCALE ), endScale, AlphaFunction::LINEAR, TimePeriod( initialFadeDuration, KEYBOARD_FOCUS_ANIMATION_DURATION - initialFadeDuration ) );
+   mFocusAnimationInner.AnimateTo( Property( mFocusInner, Actor::Property::COLOR_ALPHA ), 0.0f, AlphaFunction::LINEAR, TimePeriod( initialFadeDuration, KEYBOARD_FOCUS_ANIMATION_DURATION - initialFadeDuration ) );
+   // Play the animation on the 1st glow object.
+   mFocusAnimation.SetLooping( true );
+   mFocusAnimation.Play();
+   // Stagger the animation on the 2st glow object half way through.
+   mFocusAnimationInner.SetLooping( true );
+   mFocusAnimationInner.PlayFrom( KEYBOARD_FOCUS_ANIMATION_DURATION / 2.0f );
+   KeyboardFocusManager::Get().SetFocusIndicatorActor( mFocusContainer );
+ }
+ void DaliTableView::OnStageConnect( Dali::Actor actor )
+ {
+   // If this is one of the keyboard focus actors, place it behind the object it is focusing.
+   if( actor.GetName() == "focusActor" )
+   {
+     actor.GetRendererAt( 0 ).SetProperty( Dali::Renderer::Property::DEPTH_INDEX, -40000 );
+   }
  }
  
  void DaliTableView::ApplyCubeEffectToPages()
@@@ -482,12 -545,12 +545,12 @@@ Actor DaliTableView::CreateTile( const 
    content.Add( tileContent );
  
    // Create an ImageView for the 9-patch border around the tile.
-   ImageView image = ImageView::New( TILE_BACKGROUND );
-   image.SetAnchorPoint( AnchorPoint::CENTER );
-   image.SetParentOrigin( ParentOrigin::CENTER );
-   image.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
-   image.SetOpacity( 0.8f );
-   tileContent.Add( image );
+   ImageView borderImage = ImageView::New( TILE_BACKGROUND );
+   borderImage.SetAnchorPoint( AnchorPoint::CENTER );
+   borderImage.SetParentOrigin( ParentOrigin::CENTER );
+   borderImage.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
+   borderImage.SetOpacity( 0.8f );
+   tileContent.Add( borderImage );
  
    TextLabel label = TextLabel::New();
    label.SetAnchorPoint( AnchorPoint::CENTER );
    content.Add( label );
  
    // Set the tile to be keyboard focusable
-   content.SetKeyboardFocusable(true);
+   content.SetKeyboardFocusable( true );
  
    // connect to the touch events
    content.TouchSignal().Connect( this, &DaliTableView::OnTilePressed );