From 2c54b5f664a6cab86ce5c857f462ed0448a568b6 Mon Sep 17 00:00:00 2001 From: David Steele Date: Thu, 16 Feb 2017 16:46:11 +0000 Subject: [PATCH] Updated shadow-button transition demo to use states and sub-states Also updated the style sheet to set up the transitions for a future patch in Toolkit. Change-Id: I9e33a2ab3bc2fb9e9dac3fc01435d233d530c1a8 Signed-off-by: David Steele --- examples/transitions/transition-application.cpp | 14 +- .../style/mobile/style-example-theme-one.json.in | 404 ++++++++++----------- resources/style/style-example-theme-one.json.in | 404 ++++++++++----------- 3 files changed, 377 insertions(+), 445 deletions(-) diff --git a/examples/transitions/transition-application.cpp b/examples/transitions/transition-application.cpp index da81bb9..d3acd98 100644 --- a/examples/transitions/transition-application.cpp +++ b/examples/transitions/transition-application.cpp @@ -24,6 +24,7 @@ // External includes #include +#include #include #include #include "shadow-button.h" @@ -110,6 +111,9 @@ void TransitionApplication::Create( Application& application ) mShadowButton.SetAnchorPoint( AnchorPoint::CENTER ); mShadowButton.SetParentOrigin( ParentOrigin::CENTER ); mShadowButton.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS ); + mShadowButton.SetProperty( DevelControl::Property::STATE, DevelControl::DISABLED ); + mShadowButton.SetProperty( DevelControl::Property::SUB_STATE, "UNCHECKED" ); + buttonLayout.AddChild( mShadowButton, TableView::CellPosition(1, 1) ); TableView actionButtonLayout = TableView::New( 1, NUMBER_OF_ACTION_BUTTONS+1 ); @@ -135,7 +139,7 @@ void TransitionApplication::Create( Application& application ) mActionButtons[i].ClickedSignal().Connect( this, &TransitionApplication::OnActionButtonClicked ); actionButtonLayout.AddChild( mActionButtons[i], TableView::CellPosition( 0, 1+i ) ); } - SetLabelText( mActionButtons[0], "Activate" ); + SetLabelText( mActionButtons[0], "Enable" ); SetLabelText( mActionButtons[1], "Check" ); mActionButtons[1].SetProperty( Button::Property::DISABLED, true ); @@ -154,11 +158,13 @@ bool TransitionApplication::OnActionButtonClicked( Button button ) mShadowButton.SetActiveState( ! activeState ); if( activeState ) { - SetLabelText( button, "Activate" ); + SetLabelText( button, "Enable" ); + mShadowButton.SetProperty( DevelControl::Property::STATE, DevelControl::DISABLED ); } else { - SetLabelText( button, "Deactivate" ); + SetLabelText( button, "Disable" ); + mShadowButton.SetProperty( DevelControl::Property::STATE, DevelControl::NORMAL ); } mActionButtons[1].SetProperty( Button::Property::DISABLED, activeState ); break; @@ -170,10 +176,12 @@ bool TransitionApplication::OnActionButtonClicked( Button button ) if( checkState ) { SetLabelText( button, "Check" ); + mShadowButton.SetProperty( DevelControl::Property::SUB_STATE, "UNCHECKED" ); } else { SetLabelText( button, "Uncheck" ); + mShadowButton.SetProperty( DevelControl::Property::SUB_STATE, "CHECKED" ); } break; } diff --git a/resources/style/mobile/style-example-theme-one.json.in b/resources/style/mobile/style-example-theme-one.json.in index 9447a9d..53bbcde 100644 --- a/resources/style/mobile/style-example-theme-one.json.in +++ b/resources/style/mobile/style-example-theme-one.json.in @@ -117,264 +117,226 @@ }, "ShadowButton": { - "backgroundVisual":{ - "visualType":"IMAGE", - "url":"{STYLE_DIR}/images/shadowButtonBg.9.png", - "mixColor":[1,1,1,0] - }, - "checkboxBgVisual":{ - "visualType":"IMAGE", - "url":"{STYLE_DIR}/images/CheckBg.png", - "transform":{ - "size":[0.09, 0.28], - "offset":[30,0], - "offsetSizeMode":[1,1,0,0], - "origin":"CENTER_BEGIN", - "anchorPoint":"CENTER_BEGIN" - } - }, - "checkboxFgVisual":{ - "visualType":"IMAGE", - "url":"{STYLE_DIR}/images/Tick.png", - "transform":{ - "size":[0.09, 0.28], - "offset":[30,0], - "offsetSizeMode":[1,1,0,0], - "origin":"CENTER_BEGIN", - "anchorPoint":"CENTER_BEGIN" - } - }, - "labelVisual":{ - "visualType":"TEXT", - "text":"Don't show again", - "pointSize":8, - "horizontalAlignment":"END", - "verticalAlignment":"CENTER", - "textColor":[1,1,1,1], - "mixColor":[0.3, 0.3, 0.3, 1], - "transform":{ - "size":[0.9, 0.9], - "offset":[-30,0], - "offsetSizeMode":[1,1,0,0], - "origin":"CENTER_END", - "anchorPoint":"CENTER_END" - } - }, - "activeTransition": - [ - { - "target":"checkboxBgVisual", - "property":"size", - "initialValue":[0.09, 0.28], - "targetValue":[0.12, 0.37], - "animator": - { - "alphaFunction":"EASE_OUT_BACK", - "timePeriod": - { - "duration":0.8, - "delay":0 - } - } - }, + "states": + { + "NORMAL": { - "target":"backgroundVisual", - "property":"mixColor", - "initialValue":[1,1,1,0], - "targetValue":[1,1,1,1], - "animator": + "visuals": { - "alphaFunction":"EASE_OUT_BACK", - "timePeriod": - { - "duration":0.8, - "delay":0 + "backgroundVisual":{ + "visualType":"IMAGE", + "url":"{STYLE_DIR}/images/shadowButtonBg.9.png" + }, + + "checkboxBgVisual":{ + "visualType":"IMAGE", + "url":"{STYLE_DIR}/images/CheckBg.png", + "transform":{ + "size":[0.09, 0.28], + "offset":[30,0], + "offsetSizeMode":[1,1,0,0], + "origin":"CENTER_BEGIN", + "anchorPoint":"CENTER_BEGIN" + } + }, + + "labelVisual":{ + "visualType":"TEXT", + "text":"Don't show again", + "pointSize":8, + "horizontalAlignment":"END", + "verticalAlignment":"CENTER", + "textColor":[1,1,1,1], + "mixColor":[0, 0, 0, 1], + "transform":{ + "size":[0.9, 0.9], + "offset":[-30,0], + "offsetSizeMode":[1,1,0,0], + "origin":"CENTER_END", + "anchorPoint":"CENTER_END" + } } - } - }, - { - "target":"backgroundVisual", - "property":"size", - "initialValue":[0.9, 0.9], - "targetValue":[1, 1], - "animator": + }, + + "states": { - "alphaFunction":"EASE_OUT_BACK", - "timePeriod": + "CHECKED": { - "duration":0.8, - "delay":0 - } - } - }, - { - "target":"checkboxFgVisual", - "property":"size", - "initialValue":[0.09, 0.28], - "targetValue":[0.12, 0.37], - "animator": - { - "alphaFunction":"EASE_OUT_BACK", - "timePeriod": + "visuals": + { + "checkboxFgVisual":{ + "visualType":"IMAGE", + "url":"{STYLE_DIR}/images/Tick.png", + "transform":{ + "size":[0.09, 0.28], + "offset":[30,0], + "offsetSizeMode":[1,1,0,0], + "origin":"CENTER_BEGIN", + "anchorPoint":"CENTER_BEGIN" + } + } + }, + "entryTransition": + [ + { + "target":"checkboxFgVisual", + "property":"pixelArea", + "initialValue":[0.0, 0.0, 0.0, 1.0], + "targetValue":[0.0, 0.0, 1.0, 1.0], + "animator": + { + "alphaFunction":"EASE_IN", + "timePeriod": + { + "duration":0.4, + "delay":0 + } + } + }, + { + "target":"checkboxFgVisual", + "property":"size", + "initialValue":[0.0, 0.37], + "targetValue":[0.12, 0.37], + "animator": + { + "alphaFunction":"EASE_IN", + "timePeriod": + { + "duration":0.4, + "delay":0 + } + } + } + ], + "exitTransition": + [ + { + "target":"checkboxFgVisual", + "property":"pixelArea", + "initialValue":[0.0, 0.0, 1.0, 1.0], + "targetValue":[0.0, 0.0, 0.0, 1.0], + "animator": + { + "alphaFunction":"EASE_OUT", + "timePeriod": + { + "duration":0.4, + "delay":0 + } + } + }, + { + "target":"checkboxFgVisual", + "property":"size", + "targetValue":[0.0, 0.37], + "animator": + { + "alphaFunction":"EASE_OUT", + "timePeriod": + { + "duration":0.4, + "delay":0 + } + } + } + ] + }, + "UNCHECKED": { - "duration":0.8, - "delay":0 } } }, + //"FOCUSED" + "DISABLED": { - "target":"labelVisual", - "property":"mixColor", - "initialValue":[0.2, 0.2, 0.2, 1.0], - "targetValue":[0, 0, 0, 1], - "animator": + "visuals": { - "alphaFunction":"EASE_OUT_BACK", - "timePeriod": - { - "duration":0.8, - "delay":0 + "checkboxBgVisual":{ + "visualType":"IMAGE", + "url":"{STYLE_DIR}/images/CheckBg.png", + "transform":{ + "size":[0.09, 0.28], + "offset":[30,0], + "offsetSizeMode":[1,1,0,0], + "origin":"CENTER_BEGIN", + "anchorPoint":"CENTER_BEGIN" + } + }, + + "checkboxFgVisual":{ + "visualType":"IMAGE", + "url":"{STYLE_DIR}/images/Tick.png", + "transform":{ + "size":[0.09, 0.28], + "offset":[30,0], + "offsetSizeMode":[1,1,0,0], + "origin":"CENTER_BEGIN", + "anchorPoint":"CENTER_BEGIN" + } + }, + + "labelVisual":{ + "visualType":"TEXT", + "text":"Don't show again", + "pointSize":8, + "horizontalAlignment":"END", + "verticalAlignment":"CENTER", + "textColor":[1,1,1,1], + "mixColor":[0.3, 0.3, 0.3, 1], + "transform":{ + "size":[0.9, 0.9], + "offset":[-30,0], + "offsetSizeMode":[1,1,0,0], + "origin":"CENTER_END", + "anchorPoint":"CENTER_END" + } } } } - ], - "inactiveTransition": + }, + "transitions": [ { - "target":"checkboxBgVisual", - "property":"size", - "initialValue":[0.12, 0.37], - "targetValue":[0.09, 0.28], + "from":"DISABLED", + "to":"NORMAL", + "visualName":"backgroundVisual", + "effect":"FADE_IN", "animator": { "alphaFunction":"EASE_OUT_BACK", - "timePeriod": - { - "duration":0.8, - "delay":0 - } + "duration":0.8 } }, { - "target":"backgroundVisual", - "property":"mixColor", - "targetValue":[1,1,1,0], + "from":"DISABLED", + "to":"NORMAL", + "visualName":"*", "animator": { "alphaFunction":"EASE_OUT_BACK", - "timePeriod": - { - "duration":0.8, - "delay":0 - } + "duration":0.8 } }, { - "target":"checkboxFgVisual", - "property":"size", - "initialValue":[0.12, 0.37], - "targetValue":[0.09, 0.28], + "from":"NORMAL", + "to":"DISABLED", + "visualName":"backgroundVisual", + "effect":"FADE_OUT", "animator": { "alphaFunction":"EASE_OUT_BACK", - "timePeriod": - { - "duration":0.8, - "delay":0 - } + "duration":0.8 } }, { - "target":"labelVisual", - "property":"mixColor", - "targetValue":[0.4, 0.4, 0.4, 1.0], + "from":"NORMAL", + "to":"DISABLED", + "visualName":"*", "animator": { "alphaFunction":"EASE_OUT_BACK", - "timePeriod": - { - "duration":0.8, - "delay":0 - } - } - }, - { - "target":"backgroundVisual", - "property":"size", - "targetValue":[0.9, 0.9], - "animator": - { - "alphaFunction":"EASE_OUT_BACK", - "timePeriod": - { - "duration":0.8, - "delay":0 - } - } - } - ], - "checkTransition": - [ - { - "target":"checkboxFgVisual", - "property":"pixelArea", - "initialValue":[0.0, 0.0, 0.0, 1.0], - "targetValue":[0.0, 0.0, 1.0, 1.0], - "animator": - { - "alphaFunction":"EASE_IN", - "timePeriod": - { - "duration":0.4, - "delay":0 - } - } - }, - { - "target":"checkboxFgVisual", - "property":"size", - "initialValue":[0.0, 0.37], - "targetValue":[0.12, 0.37], - "animator": - { - "alphaFunction":"EASE_IN", - "timePeriod": - { - "duration":0.4, - "delay":0 - } - } - } - ], - "uncheckTransition": - [ - { - "target":"checkboxFgVisual", - "property":"pixelArea", - "initialValue":[0.0, 0.0, 1.0, 1.0], - "targetValue":[0.0, 0.0, 0.0, 1.0], - "animator": - { - "alphaFunction":"EASE_OUT", - "timePeriod": - { - "duration":0.4, - "delay":0 - } - } - }, - { - "target":"checkboxFgVisual", - "property":"size", - "targetValue":[0.0, 0.37], - "animator": - { - "alphaFunction":"EASE_OUT", - "timePeriod": - { - "duration":0.4, - "delay":0 - } + "duration":0.8 } } ] diff --git a/resources/style/style-example-theme-one.json.in b/resources/style/style-example-theme-one.json.in index 507c685..d495a3d 100644 --- a/resources/style/style-example-theme-one.json.in +++ b/resources/style/style-example-theme-one.json.in @@ -117,264 +117,226 @@ }, "ShadowButton": { - "backgroundVisual":{ - "visualType":"IMAGE", - "url":"{STYLE_DIR}/images/shadowButtonBg.9.png", - "mixColor":[1,1,1,0] - }, - "checkboxBgVisual":{ - "visualType":"IMAGE", - "url":"{STYLE_DIR}/images/CheckBg.png", - "transform":{ - "size":[0.09, 0.28], - "offset":[30,0], - "offsetSizeMode":[1,1,0,0], - "origin":"CENTER_BEGIN", - "anchorPoint":"CENTER_BEGIN" - } - }, - "checkboxFgVisual":{ - "visualType":"IMAGE", - "url":"{STYLE_DIR}/images/Tick.png", - "transform":{ - "size":[0.09, 0.28], - "offset":[30,0], - "offsetSizeMode":[1,1,0,0], - "origin":"CENTER_BEGIN", - "anchorPoint":"CENTER_BEGIN" - } - }, - "labelVisual":{ - "visualType":"TEXT", - "text":"Don't show again", - "pointSize":20, - "horizontalAlignment":"END", - "verticalAlignment":"CENTER", - "textColor":[1,1,1,1], - "mixColor":[0.3, 0.3, 0.3, 1], - "transform":{ - "size":[0.9, 0.9], - "offset":[-30,0], - "offsetSizeMode":[1,1,0,0], - "origin":"CENTER_END", - "anchorPoint":"CENTER_END" - } - }, - "activeTransition": - [ - { - "target":"checkboxBgVisual", - "property":"size", - "initialValue":[0.09, 0.28], - "targetValue":[0.12, 0.37], - "animator": - { - "alphaFunction":"EASE_OUT_BACK", - "timePeriod": - { - "duration":0.8, - "delay":0 - } - } - }, + "states": + { + "NORMAL": { - "target":"backgroundVisual", - "property":"mixColor", - "initialValue":[1,1,1,0], - "targetValue":[1,1,1,1], - "animator": + "visuals": { - "alphaFunction":"EASE_OUT_BACK", - "timePeriod": - { - "duration":0.8, - "delay":0 + "backgroundVisual":{ + "visualType":"IMAGE", + "url":"{STYLE_DIR}/images/shadowButtonBg.9.png" + }, + + "checkboxBgVisual":{ + "visualType":"IMAGE", + "url":"{STYLE_DIR}/images/CheckBg.png", + "transform":{ + "size":[0.09, 0.28], + "offset":[30,0], + "offsetSizeMode":[1,1,0,0], + "origin":"CENTER_BEGIN", + "anchorPoint":"CENTER_BEGIN" + } + }, + + "labelVisual":{ + "visualType":"TEXT", + "text":"Don't show again", + "pointSize":20, + "horizontalAlignment":"END", + "verticalAlignment":"CENTER", + "textColor":[1,1,1,1], + "mixColor":[0, 0, 0, 1], + "transform":{ + "size":[0.9, 0.9], + "offset":[-30,0], + "offsetSizeMode":[1,1,0,0], + "origin":"CENTER_END", + "anchorPoint":"CENTER_END" + } } - } - }, - { - "target":"backgroundVisual", - "property":"size", - "initialValue":[0.9, 0.9], - "targetValue":[1, 1], - "animator": + }, + + "states": { - "alphaFunction":"EASE_OUT_BACK", - "timePeriod": + "CHECKED": { - "duration":0.8, - "delay":0 - } - } - }, - { - "target":"checkboxFgVisual", - "property":"size", - "initialValue":[0.09, 0.28], - "targetValue":[0.12, 0.37], - "animator": - { - "alphaFunction":"EASE_OUT_BACK", - "timePeriod": + "visuals": + { + "checkboxFgVisual":{ + "visualType":"IMAGE", + "url":"{STYLE_DIR}/images/Tick.png", + "transform":{ + "size":[0.09, 0.28], + "offset":[30,0], + "offsetSizeMode":[1,1,0,0], + "origin":"CENTER_BEGIN", + "anchorPoint":"CENTER_BEGIN" + } + } + }, + "entryTransition": + [ + { + "target":"checkboxFgVisual", + "property":"pixelArea", + "initialValue":[0.0, 0.0, 0.0, 1.0], + "targetValue":[0.0, 0.0, 1.0, 1.0], + "animator": + { + "alphaFunction":"EASE_IN", + "timePeriod": + { + "duration":0.4, + "delay":0 + } + } + }, + { + "target":"checkboxFgVisual", + "property":"size", + "initialValue":[0.0, 0.37], + "targetValue":[0.12, 0.37], + "animator": + { + "alphaFunction":"EASE_IN", + "timePeriod": + { + "duration":0.4, + "delay":0 + } + } + } + ], + "exitTransition": + [ + { + "target":"checkboxFgVisual", + "property":"pixelArea", + "initialValue":[0.0, 0.0, 1.0, 1.0], + "targetValue":[0.0, 0.0, 0.0, 1.0], + "animator": + { + "alphaFunction":"EASE_OUT", + "timePeriod": + { + "duration":0.4, + "delay":0 + } + } + }, + { + "target":"checkboxFgVisual", + "property":"size", + "targetValue":[0.0, 0.37], + "animator": + { + "alphaFunction":"EASE_OUT", + "timePeriod": + { + "duration":0.4, + "delay":0 + } + } + } + ] + }, + "UNCHECKED": { - "duration":0.8, - "delay":0 } } }, + //"FOCUSED" + "DISABLED": { - "target":"labelVisual", - "property":"mixColor", - "initialValue":[0.2, 0.2, 0.2, 1.0], - "targetValue":[0, 0, 0, 1], - "animator": + "visuals": { - "alphaFunction":"EASE_OUT_BACK", - "timePeriod": - { - "duration":0.8, - "delay":0 + "checkboxBgVisual":{ + "visualType":"IMAGE", + "url":"{STYLE_DIR}/images/CheckBg.png", + "transform":{ + "size":[0.09, 0.28], + "offset":[30,0], + "offsetSizeMode":[1,1,0,0], + "origin":"CENTER_BEGIN", + "anchorPoint":"CENTER_BEGIN" + } + }, + + "checkboxFgVisual":{ + "visualType":"IMAGE", + "url":"{STYLE_DIR}/images/Tick.png", + "transform":{ + "size":[0.09, 0.28], + "offset":[30,0], + "offsetSizeMode":[1,1,0,0], + "origin":"CENTER_BEGIN", + "anchorPoint":"CENTER_BEGIN" + } + }, + + "labelVisual":{ + "visualType":"TEXT", + "text":"Don't show again", + "pointSize":20, + "horizontalAlignment":"END", + "verticalAlignment":"CENTER", + "textColor":[1,1,1,1], + "mixColor":[0.3, 0.3, 0.3, 1], + "transform":{ + "size":[0.9, 0.9], + "offset":[-30,0], + "offsetSizeMode":[1,1,0,0], + "origin":"CENTER_END", + "anchorPoint":"CENTER_END" + } } } } - ], - "inactiveTransition": + }, + "transitions": [ { - "target":"checkboxBgVisual", - "property":"size", - "initialValue":[0.12, 0.37], - "targetValue":[0.09, 0.28], + "from":"DISABLED", + "to":"NORMAL", + "visualName":"backgroundVisual", + "effect":"FADE_IN", "animator": { "alphaFunction":"EASE_OUT_BACK", - "timePeriod": - { - "duration":0.8, - "delay":0 - } + "duration":0.8 } }, { - "target":"backgroundVisual", - "property":"mixColor", - "targetValue":[1,1,1,0], + "from":"DISABLED", + "to":"NORMAL", + "visualName":"*", "animator": { "alphaFunction":"EASE_OUT_BACK", - "timePeriod": - { - "duration":0.8, - "delay":0 - } + "duration":0.8 } }, { - "target":"checkboxFgVisual", - "property":"size", - "initialValue":[0.12, 0.37], - "targetValue":[0.09, 0.28], + "from":"NORMAL", + "to":"DISABLED", + "visualName":"backgroundVisual", + "effect":"FADE_OUT", "animator": { "alphaFunction":"EASE_OUT_BACK", - "timePeriod": - { - "duration":0.8, - "delay":0 - } + "duration":0.8 } }, { - "target":"labelVisual", - "property":"mixColor", - "targetValue":[0.4, 0.4, 0.4, 1.0], + "from":"NORMAL", + "to":"DISABLED", + "visualName":"*", "animator": { "alphaFunction":"EASE_OUT_BACK", - "timePeriod": - { - "duration":0.8, - "delay":0 - } - } - }, - { - "target":"backgroundVisual", - "property":"size", - "targetValue":[0.9, 0.9], - "animator": - { - "alphaFunction":"EASE_OUT_BACK", - "timePeriod": - { - "duration":0.8, - "delay":0 - } - } - } - ], - "checkTransition": - [ - { - "target":"checkboxFgVisual", - "property":"pixelArea", - "initialValue":[0.0, 0.0, 0.0, 1.0], - "targetValue":[0.0, 0.0, 1.0, 1.0], - "animator": - { - "alphaFunction":"EASE_IN", - "timePeriod": - { - "duration":0.4, - "delay":0 - } - } - }, - { - "target":"checkboxFgVisual", - "property":"size", - "initialValue":[0.0, 0.37], - "targetValue":[0.12, 0.37], - "animator": - { - "alphaFunction":"EASE_IN", - "timePeriod": - { - "duration":0.4, - "delay":0 - } - } - } - ], - "uncheckTransition": - [ - { - "target":"checkboxFgVisual", - "property":"pixelArea", - "initialValue":[0.0, 0.0, 1.0, 1.0], - "targetValue":[0.0, 0.0, 0.0, 1.0], - "animator": - { - "alphaFunction":"EASE_OUT", - "timePeriod": - { - "duration":0.4, - "delay":0 - } - } - }, - { - "target":"checkboxFgVisual", - "property":"size", - "targetValue":[0.0, 0.37], - "animator": - { - "alphaFunction":"EASE_OUT", - "timePeriod": - { - "duration":0.4, - "delay":0 - } + "duration":0.8 } } ] -- 2.7.4