Peter M. Groen / dali-demo

Commit 917cdd7856fd36426339b0af9197bb6fdee94d11

Authored by Adeel Kazmi
Committed by Gerrit Code Review
2 parents 2fed89ad 2c54b5f6

Merge "Updated shadow-button transition demo to use states and sub-states" into devel/master

Inline Side-by-side
Showing 3 changed files with 377 additions and 445 deletions
examples/transitions/transition-application.cpp
  View file @917cdd7
... ... @@ -24,6 +24,7 @@
24 24  
25 25 // External includes
26 26 #include <dali-toolkit/dali-toolkit.h>
  27 +#include <dali-toolkit/devel-api/controls/control-devel.h>
27 28 #include <dali-toolkit/devel-api/visuals/visual-properties-devel.h>
28 29 #include <dali-toolkit/devel-api/visuals/text-visual-properties.h>
29 30 #include "shadow-button.h"
... ... @@ -110,6 +111,9 @@ void TransitionApplication::Create( Application&amp; application )
110 111 mShadowButton.SetAnchorPoint( AnchorPoint::CENTER );
111 112 mShadowButton.SetParentOrigin( ParentOrigin::CENTER );
112 113 mShadowButton.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
  114 + mShadowButton.SetProperty( DevelControl::Property::STATE, DevelControl::DISABLED );
  115 + mShadowButton.SetProperty( DevelControl::Property::SUB_STATE, "UNCHECKED" );
  116 +
113 117 buttonLayout.AddChild( mShadowButton, TableView::CellPosition(1, 1) );
114 118  
115 119 TableView actionButtonLayout = TableView::New( 1, NUMBER_OF_ACTION_BUTTONS+1 );
... ... @@ -135,7 +139,7 @@ void TransitionApplication::Create( Application&amp; application )
135 139 mActionButtons[i].ClickedSignal().Connect( this, &TransitionApplication::OnActionButtonClicked );
136 140 actionButtonLayout.AddChild( mActionButtons[i], TableView::CellPosition( 0, 1+i ) );
137 141 }
138   - SetLabelText( mActionButtons[0], "Activate" );
  142 + SetLabelText( mActionButtons[0], "Enable" );
139 143 SetLabelText( mActionButtons[1], "Check" );
140 144 mActionButtons[1].SetProperty( Button::Property::DISABLED, true );
141 145  
... ... @@ -154,11 +158,13 @@ bool TransitionApplication::OnActionButtonClicked( Button button )
154 158 mShadowButton.SetActiveState( ! activeState );
155 159 if( activeState )
156 160 {
157   - SetLabelText( button, "Activate" );
  161 + SetLabelText( button, "Enable" );
  162 + mShadowButton.SetProperty( DevelControl::Property::STATE, DevelControl::DISABLED );
158 163 }
159 164 else
160 165 {
161   - SetLabelText( button, "Deactivate" );
  166 + SetLabelText( button, "Disable" );
  167 + mShadowButton.SetProperty( DevelControl::Property::STATE, DevelControl::NORMAL );
162 168 }
163 169 mActionButtons[1].SetProperty( Button::Property::DISABLED, activeState );
164 170 break;
... ... @@ -170,10 +176,12 @@ bool TransitionApplication::OnActionButtonClicked( Button button )
170 176 if( checkState )
171 177 {
172 178 SetLabelText( button, "Check" );
  179 + mShadowButton.SetProperty( DevelControl::Property::SUB_STATE, "UNCHECKED" );
173 180 }
174 181 else
175 182 {
176 183 SetLabelText( button, "Uncheck" );
  184 + mShadowButton.SetProperty( DevelControl::Property::SUB_STATE, "CHECKED" );
177 185 }
178 186 break;
179 187 }
... ...
resources/style/mobile/style-example-theme-one.json.in
  View file @917cdd7
... ... @@ -117,264 +117,226 @@
117 117 },
118 118 "ShadowButton":
119 119 {
120   - "backgroundVisual":{
121   - "visualType":"IMAGE",
122   - "url":"{STYLE_DIR}/images/shadowButtonBg.9.png",
123   - "mixColor":[1,1,1,0]
124   - },
125   - "checkboxBgVisual":{
126   - "visualType":"IMAGE",
127   - "url":"{STYLE_DIR}/images/CheckBg.png",
128   - "transform":{
129   - "size":[0.09, 0.28],
130   - "offset":[30,0],
131   - "offsetSizeMode":[1,1,0,0],
132   - "origin":"CENTER_BEGIN",
133   - "anchorPoint":"CENTER_BEGIN"
134   - }
135   - },
136   - "checkboxFgVisual":{
137   - "visualType":"IMAGE",
138   - "url":"{STYLE_DIR}/images/Tick.png",
139   - "transform":{
140   - "size":[0.09, 0.28],
141   - "offset":[30,0],
142   - "offsetSizeMode":[1,1,0,0],
143   - "origin":"CENTER_BEGIN",
144   - "anchorPoint":"CENTER_BEGIN"
145   - }
146   - },
147   - "labelVisual":{
148   - "visualType":"TEXT",
149   - "text":"Don't show again",
150   - "pointSize":8,
151   - "horizontalAlignment":"END",
152   - "verticalAlignment":"CENTER",
153   - "textColor":[1,1,1,1],
154   - "mixColor":[0.3, 0.3, 0.3, 1],
155   - "transform":{
156   - "size":[0.9, 0.9],
157   - "offset":[-30,0],
158   - "offsetSizeMode":[1,1,0,0],
159   - "origin":"CENTER_END",
160   - "anchorPoint":"CENTER_END"
161   - }
162   - },
163   - "activeTransition":
164   - [
165   - {
166   - "target":"checkboxBgVisual",
167   - "property":"size",
168   - "initialValue":[0.09, 0.28],
169   - "targetValue":[0.12, 0.37],
170   - "animator":
171   - {
172   - "alphaFunction":"EASE_OUT_BACK",
173   - "timePeriod":
174   - {
175   - "duration":0.8,
176   - "delay":0
177   - }
178   - }
179   - },
  120 + "states":
  121 + {
  122 + "NORMAL":
180 123 {
181   - "target":"backgroundVisual",
182   - "property":"mixColor",
183   - "initialValue":[1,1,1,0],
184   - "targetValue":[1,1,1,1],
185   - "animator":
  124 + "visuals":
186 125 {
187   - "alphaFunction":"EASE_OUT_BACK",
188   - "timePeriod":
189   - {
190   - "duration":0.8,
191   - "delay":0
  126 + "backgroundVisual":{
  127 + "visualType":"IMAGE",
  128 + "url":"{STYLE_DIR}/images/shadowButtonBg.9.png"
  129 + },
  130 +
  131 + "checkboxBgVisual":{
  132 + "visualType":"IMAGE",
  133 + "url":"{STYLE_DIR}/images/CheckBg.png",
  134 + "transform":{
  135 + "size":[0.09, 0.28],
  136 + "offset":[30,0],
  137 + "offsetSizeMode":[1,1,0,0],
  138 + "origin":"CENTER_BEGIN",
  139 + "anchorPoint":"CENTER_BEGIN"
  140 + }
  141 + },
  142 +
  143 + "labelVisual":{
  144 + "visualType":"TEXT",
  145 + "text":"Don't show again",
  146 + "pointSize":8,
  147 + "horizontalAlignment":"END",
  148 + "verticalAlignment":"CENTER",
  149 + "textColor":[1,1,1,1],
  150 + "mixColor":[0, 0, 0, 1],
  151 + "transform":{
  152 + "size":[0.9, 0.9],
  153 + "offset":[-30,0],
  154 + "offsetSizeMode":[1,1,0,0],
  155 + "origin":"CENTER_END",
  156 + "anchorPoint":"CENTER_END"
  157 + }
192 158 }
193   - }
194   - },
195   - {
196   - "target":"backgroundVisual",
197   - "property":"size",
198   - "initialValue":[0.9, 0.9],
199   - "targetValue":[1, 1],
200   - "animator":
  159 + },
  160 +
  161 + "states":
201 162 {
202   - "alphaFunction":"EASE_OUT_BACK",
203   - "timePeriod":
  163 + "CHECKED":
204 164 {
205   - "duration":0.8,
206   - "delay":0
207   - }
208   - }
209   - },
210   - {
211   - "target":"checkboxFgVisual",
212   - "property":"size",
213   - "initialValue":[0.09, 0.28],
214   - "targetValue":[0.12, 0.37],
215   - "animator":
216   - {
217   - "alphaFunction":"EASE_OUT_BACK",
218   - "timePeriod":
  165 + "visuals":
  166 + {
  167 + "checkboxFgVisual":{
  168 + "visualType":"IMAGE",
  169 + "url":"{STYLE_DIR}/images/Tick.png",
  170 + "transform":{
  171 + "size":[0.09, 0.28],
  172 + "offset":[30,0],
  173 + "offsetSizeMode":[1,1,0,0],
  174 + "origin":"CENTER_BEGIN",
  175 + "anchorPoint":"CENTER_BEGIN"
  176 + }
  177 + }
  178 + },
  179 + "entryTransition":
  180 + [
  181 + {
  182 + "target":"checkboxFgVisual",
  183 + "property":"pixelArea",
  184 + "initialValue":[0.0, 0.0, 0.0, 1.0],
  185 + "targetValue":[0.0, 0.0, 1.0, 1.0],
  186 + "animator":
  187 + {
  188 + "alphaFunction":"EASE_IN",
  189 + "timePeriod":
  190 + {
  191 + "duration":0.4,
  192 + "delay":0
  193 + }
  194 + }
  195 + },
  196 + {
  197 + "target":"checkboxFgVisual",
  198 + "property":"size",
  199 + "initialValue":[0.0, 0.37],
  200 + "targetValue":[0.12, 0.37],
  201 + "animator":
  202 + {
  203 + "alphaFunction":"EASE_IN",
  204 + "timePeriod":
  205 + {
  206 + "duration":0.4,
  207 + "delay":0
  208 + }
  209 + }
  210 + }
  211 + ],
  212 + "exitTransition":
  213 + [
  214 + {
  215 + "target":"checkboxFgVisual",
  216 + "property":"pixelArea",
  217 + "initialValue":[0.0, 0.0, 1.0, 1.0],
  218 + "targetValue":[0.0, 0.0, 0.0, 1.0],
  219 + "animator":
  220 + {
  221 + "alphaFunction":"EASE_OUT",
  222 + "timePeriod":
  223 + {
  224 + "duration":0.4,
  225 + "delay":0
  226 + }
  227 + }
  228 + },
  229 + {
  230 + "target":"checkboxFgVisual",
  231 + "property":"size",
  232 + "targetValue":[0.0, 0.37],
  233 + "animator":
  234 + {
  235 + "alphaFunction":"EASE_OUT",
  236 + "timePeriod":
  237 + {
  238 + "duration":0.4,
  239 + "delay":0
  240 + }
  241 + }
  242 + }
  243 + ]
  244 + },
  245 + "UNCHECKED":
219 246 {
220   - "duration":0.8,
221   - "delay":0
222 247 }
223 248 }
224 249 },
  250 + //"FOCUSED"
  251 + "DISABLED":
225 252 {
226   - "target":"labelVisual",
227   - "property":"mixColor",
228   - "initialValue":[0.2, 0.2, 0.2, 1.0],
229   - "targetValue":[0, 0, 0, 1],
230   - "animator":
  253 + "visuals":
231 254 {
232   - "alphaFunction":"EASE_OUT_BACK",
233   - "timePeriod":
234   - {
235   - "duration":0.8,
236   - "delay":0
  255 + "checkboxBgVisual":{
  256 + "visualType":"IMAGE",
  257 + "url":"{STYLE_DIR}/images/CheckBg.png",
  258 + "transform":{
  259 + "size":[0.09, 0.28],
  260 + "offset":[30,0],
  261 + "offsetSizeMode":[1,1,0,0],
  262 + "origin":"CENTER_BEGIN",
  263 + "anchorPoint":"CENTER_BEGIN"
  264 + }
  265 + },
  266 +
  267 + "checkboxFgVisual":{
  268 + "visualType":"IMAGE",
  269 + "url":"{STYLE_DIR}/images/Tick.png",
  270 + "transform":{
  271 + "size":[0.09, 0.28],
  272 + "offset":[30,0],
  273 + "offsetSizeMode":[1,1,0,0],
  274 + "origin":"CENTER_BEGIN",
  275 + "anchorPoint":"CENTER_BEGIN"
  276 + }
  277 + },
  278 +
  279 + "labelVisual":{
  280 + "visualType":"TEXT",
  281 + "text":"Don't show again",
  282 + "pointSize":8,
  283 + "horizontalAlignment":"END",
  284 + "verticalAlignment":"CENTER",
  285 + "textColor":[1,1,1,1],
  286 + "mixColor":[0.3, 0.3, 0.3, 1],
  287 + "transform":{
  288 + "size":[0.9, 0.9],
  289 + "offset":[-30,0],
  290 + "offsetSizeMode":[1,1,0,0],
  291 + "origin":"CENTER_END",
  292 + "anchorPoint":"CENTER_END"
  293 + }
237 294 }
238 295 }
239 296 }
240   - ],
241   - "inactiveTransition":
  297 + },
  298 + "transitions":
242 299 [
243 300 {
244   - "target":"checkboxBgVisual",
245   - "property":"size",
246   - "initialValue":[0.12, 0.37],
247   - "targetValue":[0.09, 0.28],
  301 + "from":"DISABLED",
  302 + "to":"NORMAL",
  303 + "visualName":"backgroundVisual",
  304 + "effect":"FADE_IN",
248 305 "animator":
249 306 {
250 307 "alphaFunction":"EASE_OUT_BACK",
251   - "timePeriod":
252   - {
253   - "duration":0.8,
254   - "delay":0
255   - }
  308 + "duration":0.8
256 309 }
257 310 },
258 311 {
259   - "target":"backgroundVisual",
260   - "property":"mixColor",
261   - "targetValue":[1,1,1,0],
  312 + "from":"DISABLED",
  313 + "to":"NORMAL",
  314 + "visualName":"*",
262 315 "animator":
263 316 {
264 317 "alphaFunction":"EASE_OUT_BACK",
265   - "timePeriod":
266   - {
267   - "duration":0.8,
268   - "delay":0
269   - }
  318 + "duration":0.8
270 319 }
271 320 },
272 321 {
273   - "target":"checkboxFgVisual",
274   - "property":"size",
275   - "initialValue":[0.12, 0.37],
276   - "targetValue":[0.09, 0.28],
  322 + "from":"NORMAL",
  323 + "to":"DISABLED",
  324 + "visualName":"backgroundVisual",
  325 + "effect":"FADE_OUT",
277 326 "animator":
278 327 {
279 328 "alphaFunction":"EASE_OUT_BACK",
280   - "timePeriod":
281   - {
282   - "duration":0.8,
283   - "delay":0
284   - }
  329 + "duration":0.8
285 330 }
286 331 },
287 332 {
288   - "target":"labelVisual",
289   - "property":"mixColor",
290   - "targetValue":[0.4, 0.4, 0.4, 1.0],
  333 + "from":"NORMAL",
  334 + "to":"DISABLED",
  335 + "visualName":"*",
291 336 "animator":
292 337 {
293 338 "alphaFunction":"EASE_OUT_BACK",
294   - "timePeriod":
295   - {
296   - "duration":0.8,
297   - "delay":0
298   - }
299   - }
300   - },
301   - {
302   - "target":"backgroundVisual",
303   - "property":"size",
304   - "targetValue":[0.9, 0.9],
305   - "animator":
306   - {
307   - "alphaFunction":"EASE_OUT_BACK",
308   - "timePeriod":
309   - {
310   - "duration":0.8,
311   - "delay":0
312   - }
313   - }
314   - }
315   - ],
316   - "checkTransition":
317   - [
318   - {
319   - "target":"checkboxFgVisual",
320   - "property":"pixelArea",
321   - "initialValue":[0.0, 0.0, 0.0, 1.0],
322   - "targetValue":[0.0, 0.0, 1.0, 1.0],
323   - "animator":
324   - {
325   - "alphaFunction":"EASE_IN",
326   - "timePeriod":
327   - {
328   - "duration":0.4,
329   - "delay":0
330   - }
331   - }
332   - },
333   - {
334   - "target":"checkboxFgVisual",
335   - "property":"size",
336   - "initialValue":[0.0, 0.37],
337   - "targetValue":[0.12, 0.37],
338   - "animator":
339   - {
340   - "alphaFunction":"EASE_IN",
341   - "timePeriod":
342   - {
343   - "duration":0.4,
344   - "delay":0
345   - }
346   - }
347   - }
348   - ],
349   - "uncheckTransition":
350   - [
351   - {
352   - "target":"checkboxFgVisual",
353   - "property":"pixelArea",
354   - "initialValue":[0.0, 0.0, 1.0, 1.0],
355   - "targetValue":[0.0, 0.0, 0.0, 1.0],
356   - "animator":
357   - {
358   - "alphaFunction":"EASE_OUT",
359   - "timePeriod":
360   - {
361   - "duration":0.4,
362   - "delay":0
363   - }
364   - }
365   - },
366   - {
367   - "target":"checkboxFgVisual",
368   - "property":"size",
369   - "targetValue":[0.0, 0.37],
370   - "animator":
371   - {
372   - "alphaFunction":"EASE_OUT",
373   - "timePeriod":
374   - {
375   - "duration":0.4,
376   - "delay":0
377   - }
  339 + "duration":0.8
378 340 }
379 341 }
380 342 ]
... ...
resources/style/style-example-theme-one.json.in
  View file @917cdd7
... ... @@ -117,264 +117,226 @@
117 117 },
118 118 "ShadowButton":
119 119 {
120   - "backgroundVisual":{
121   - "visualType":"IMAGE",
122   - "url":"{STYLE_DIR}/images/shadowButtonBg.9.png",
123   - "mixColor":[1,1,1,0]
124   - },
125   - "checkboxBgVisual":{
126   - "visualType":"IMAGE",
127   - "url":"{STYLE_DIR}/images/CheckBg.png",
128   - "transform":{
129   - "size":[0.09, 0.28],
130   - "offset":[30,0],
131   - "offsetSizeMode":[1,1,0,0],
132   - "origin":"CENTER_BEGIN",
133   - "anchorPoint":"CENTER_BEGIN"
134   - }
135   - },
136   - "checkboxFgVisual":{
137   - "visualType":"IMAGE",
138   - "url":"{STYLE_DIR}/images/Tick.png",
139   - "transform":{
140   - "size":[0.09, 0.28],
141   - "offset":[30,0],
142   - "offsetSizeMode":[1,1,0,0],
143   - "origin":"CENTER_BEGIN",
144   - "anchorPoint":"CENTER_BEGIN"
145   - }
146   - },
147   - "labelVisual":{
148   - "visualType":"TEXT",
149   - "text":"Don't show again",
150   - "pointSize":20,
151   - "horizontalAlignment":"END",
152   - "verticalAlignment":"CENTER",
153   - "textColor":[1,1,1,1],
154   - "mixColor":[0.3, 0.3, 0.3, 1],
155   - "transform":{
156   - "size":[0.9, 0.9],
157   - "offset":[-30,0],
158   - "offsetSizeMode":[1,1,0,0],
159   - "origin":"CENTER_END",
160   - "anchorPoint":"CENTER_END"
161   - }
162   - },
163   - "activeTransition":
164   - [
165   - {
166   - "target":"checkboxBgVisual",
167   - "property":"size",
168   - "initialValue":[0.09, 0.28],
169   - "targetValue":[0.12, 0.37],
170   - "animator":
171   - {
172   - "alphaFunction":"EASE_OUT_BACK",
173   - "timePeriod":
174   - {
175   - "duration":0.8,
176   - "delay":0
177   - }
178   - }
179   - },
  120 + "states":
  121 + {
  122 + "NORMAL":
180 123 {
181   - "target":"backgroundVisual",
182   - "property":"mixColor",
183   - "initialValue":[1,1,1,0],
184   - "targetValue":[1,1,1,1],
185   - "animator":
  124 + "visuals":
186 125 {
187   - "alphaFunction":"EASE_OUT_BACK",
188   - "timePeriod":
189   - {
190   - "duration":0.8,
191   - "delay":0
  126 + "backgroundVisual":{
  127 + "visualType":"IMAGE",
  128 + "url":"{STYLE_DIR}/images/shadowButtonBg.9.png"
  129 + },
  130 +
  131 + "checkboxBgVisual":{
  132 + "visualType":"IMAGE",
  133 + "url":"{STYLE_DIR}/images/CheckBg.png",
  134 + "transform":{
  135 + "size":[0.09, 0.28],
  136 + "offset":[30,0],
  137 + "offsetSizeMode":[1,1,0,0],
  138 + "origin":"CENTER_BEGIN",
  139 + "anchorPoint":"CENTER_BEGIN"
  140 + }
  141 + },
  142 +
  143 + "labelVisual":{
  144 + "visualType":"TEXT",
  145 + "text":"Don't show again",
  146 + "pointSize":20,
  147 + "horizontalAlignment":"END",
  148 + "verticalAlignment":"CENTER",
  149 + "textColor":[1,1,1,1],
  150 + "mixColor":[0, 0, 0, 1],
  151 + "transform":{
  152 + "size":[0.9, 0.9],
  153 + "offset":[-30,0],
  154 + "offsetSizeMode":[1,1,0,0],
  155 + "origin":"CENTER_END",
  156 + "anchorPoint":"CENTER_END"
  157 + }
192 158 }
193   - }
194   - },
195   - {
196   - "target":"backgroundVisual",
197   - "property":"size",
198   - "initialValue":[0.9, 0.9],
199   - "targetValue":[1, 1],
200   - "animator":
  159 + },
  160 +
  161 + "states":
201 162 {
202   - "alphaFunction":"EASE_OUT_BACK",
203   - "timePeriod":
  163 + "CHECKED":
204 164 {
205   - "duration":0.8,
206   - "delay":0
207   - }
208   - }
209   - },
210   - {
211   - "target":"checkboxFgVisual",
212   - "property":"size",
213   - "initialValue":[0.09, 0.28],
214   - "targetValue":[0.12, 0.37],
215   - "animator":
216   - {
217   - "alphaFunction":"EASE_OUT_BACK",
218   - "timePeriod":
  165 + "visuals":
  166 + {
  167 + "checkboxFgVisual":{
  168 + "visualType":"IMAGE",
  169 + "url":"{STYLE_DIR}/images/Tick.png",
  170 + "transform":{
  171 + "size":[0.09, 0.28],
  172 + "offset":[30,0],
  173 + "offsetSizeMode":[1,1,0,0],
  174 + "origin":"CENTER_BEGIN",
  175 + "anchorPoint":"CENTER_BEGIN"
  176 + }
  177 + }
  178 + },
  179 + "entryTransition":
  180 + [
  181 + {
  182 + "target":"checkboxFgVisual",
  183 + "property":"pixelArea",
  184 + "initialValue":[0.0, 0.0, 0.0, 1.0],
  185 + "targetValue":[0.0, 0.0, 1.0, 1.0],
  186 + "animator":
  187 + {
  188 + "alphaFunction":"EASE_IN",
  189 + "timePeriod":
  190 + {
  191 + "duration":0.4,
  192 + "delay":0
  193 + }
  194 + }
  195 + },
  196 + {
  197 + "target":"checkboxFgVisual",
  198 + "property":"size",
  199 + "initialValue":[0.0, 0.37],
  200 + "targetValue":[0.12, 0.37],
  201 + "animator":
  202 + {
  203 + "alphaFunction":"EASE_IN",
  204 + "timePeriod":
  205 + {
  206 + "duration":0.4,
  207 + "delay":0
  208 + }
  209 + }
  210 + }
  211 + ],
  212 + "exitTransition":
  213 + [
  214 + {
  215 + "target":"checkboxFgVisual",
  216 + "property":"pixelArea",
  217 + "initialValue":[0.0, 0.0, 1.0, 1.0],
  218 + "targetValue":[0.0, 0.0, 0.0, 1.0],
  219 + "animator":
  220 + {
  221 + "alphaFunction":"EASE_OUT",
  222 + "timePeriod":
  223 + {
  224 + "duration":0.4,
  225 + "delay":0
  226 + }
  227 + }
  228 + },
  229 + {
  230 + "target":"checkboxFgVisual",
  231 + "property":"size",
  232 + "targetValue":[0.0, 0.37],
  233 + "animator":
  234 + {
  235 + "alphaFunction":"EASE_OUT",
  236 + "timePeriod":
  237 + {
  238 + "duration":0.4,
  239 + "delay":0
  240 + }
  241 + }
  242 + }
  243 + ]
  244 + },
  245 + "UNCHECKED":
219 246 {
220   - "duration":0.8,
221   - "delay":0
222 247 }
223 248 }
224 249 },
  250 + //"FOCUSED"
  251 + "DISABLED":
225 252 {
226   - "target":"labelVisual",
227   - "property":"mixColor",
228   - "initialValue":[0.2, 0.2, 0.2, 1.0],
229   - "targetValue":[0, 0, 0, 1],
230   - "animator":
  253 + "visuals":
231 254 {
232   - "alphaFunction":"EASE_OUT_BACK",
233   - "timePeriod":
234   - {
235   - "duration":0.8,
236   - "delay":0
  255 + "checkboxBgVisual":{
  256 + "visualType":"IMAGE",
  257 + "url":"{STYLE_DIR}/images/CheckBg.png",
  258 + "transform":{
  259 + "size":[0.09, 0.28],
  260 + "offset":[30,0],
  261 + "offsetSizeMode":[1,1,0,0],
  262 + "origin":"CENTER_BEGIN",
  263 + "anchorPoint":"CENTER_BEGIN"
  264 + }
  265 + },
  266 +
  267 + "checkboxFgVisual":{
  268 + "visualType":"IMAGE",
  269 + "url":"{STYLE_DIR}/images/Tick.png",
  270 + "transform":{
  271 + "size":[0.09, 0.28],
  272 + "offset":[30,0],
  273 + "offsetSizeMode":[1,1,0,0],
  274 + "origin":"CENTER_BEGIN",
  275 + "anchorPoint":"CENTER_BEGIN"
  276 + }
  277 + },
  278 +
  279 + "labelVisual":{
  280 + "visualType":"TEXT",
  281 + "text":"Don't show again",
  282 + "pointSize":20,
  283 + "horizontalAlignment":"END",
  284 + "verticalAlignment":"CENTER",
  285 + "textColor":[1,1,1,1],
  286 + "mixColor":[0.3, 0.3, 0.3, 1],
  287 + "transform":{
  288 + "size":[0.9, 0.9],
  289 + "offset":[-30,0],
  290 + "offsetSizeMode":[1,1,0,0],
  291 + "origin":"CENTER_END",
  292 + "anchorPoint":"CENTER_END"
  293 + }
237 294 }
238 295 }
239 296 }
240   - ],
241   - "inactiveTransition":
  297 + },
  298 + "transitions":
242 299 [
243 300 {
244   - "target":"checkboxBgVisual",
245   - "property":"size",
246   - "initialValue":[0.12, 0.37],
247   - "targetValue":[0.09, 0.28],
  301 + "from":"DISABLED",
  302 + "to":"NORMAL",
  303 + "visualName":"backgroundVisual",
  304 + "effect":"FADE_IN",
248 305 "animator":
249 306 {
250 307 "alphaFunction":"EASE_OUT_BACK",
251   - "timePeriod":
252   - {
253   - "duration":0.8,
254   - "delay":0
255   - }
  308 + "duration":0.8
256 309 }
257 310 },
258 311 {
259   - "target":"backgroundVisual",
260   - "property":"mixColor",
261   - "targetValue":[1,1,1,0],
  312 + "from":"DISABLED",
  313 + "to":"NORMAL",
  314 + "visualName":"*",
262 315 "animator":
263 316 {
264 317 "alphaFunction":"EASE_OUT_BACK",
265   - "timePeriod":
266   - {
267   - "duration":0.8,
268   - "delay":0
269   - }
  318 + "duration":0.8
270 319 }
271 320 },
272 321 {
273   - "target":"checkboxFgVisual",
274   - "property":"size",
275   - "initialValue":[0.12, 0.37],
276   - "targetValue":[0.09, 0.28],
  322 + "from":"NORMAL",
  323 + "to":"DISABLED",
  324 + "visualName":"backgroundVisual",
  325 + "effect":"FADE_OUT",
277 326 "animator":
278 327 {
279 328 "alphaFunction":"EASE_OUT_BACK",
280   - "timePeriod":
281   - {
282   - "duration":0.8,
283   - "delay":0
284   - }
  329 + "duration":0.8
285 330 }
286 331 },
287 332 {
288   - "target":"labelVisual",
289   - "property":"mixColor",
290   - "targetValue":[0.4, 0.4, 0.4, 1.0],
  333 + "from":"NORMAL",
  334 + "to":"DISABLED",
  335 + "visualName":"*",
291 336 "animator":
292 337 {
293 338 "alphaFunction":"EASE_OUT_BACK",
294   - "timePeriod":
295   - {
296   - "duration":0.8,
297   - "delay":0
298   - }
299   - }
300   - },
301   - {
302   - "target":"backgroundVisual",
303   - "property":"size",
304   - "targetValue":[0.9, 0.9],
305   - "animator":
306   - {
307   - "alphaFunction":"EASE_OUT_BACK",
308   - "timePeriod":
309   - {
310   - "duration":0.8,
311   - "delay":0
312   - }
313   - }
314   - }
315   - ],
316   - "checkTransition":
317   - [
318   - {
319   - "target":"checkboxFgVisual",
320   - "property":"pixelArea",
321   - "initialValue":[0.0, 0.0, 0.0, 1.0],
322   - "targetValue":[0.0, 0.0, 1.0, 1.0],
323   - "animator":
324   - {
325   - "alphaFunction":"EASE_IN",
326   - "timePeriod":
327   - {
328   - "duration":0.4,
329   - "delay":0
330   - }
331   - }
332   - },
333   - {
334   - "target":"checkboxFgVisual",
335   - "property":"size",
336   - "initialValue":[0.0, 0.37],
337   - "targetValue":[0.12, 0.37],
338   - "animator":
339   - {
340   - "alphaFunction":"EASE_IN",
341   - "timePeriod":
342   - {
343   - "duration":0.4,
344   - "delay":0
345   - }
346   - }
347   - }
348   - ],
349   - "uncheckTransition":
350   - [
351   - {
352   - "target":"checkboxFgVisual",
353   - "property":"pixelArea",
354   - "initialValue":[0.0, 0.0, 1.0, 1.0],
355   - "targetValue":[0.0, 0.0, 0.0, 1.0],
356   - "animator":
357   - {
358   - "alphaFunction":"EASE_OUT",
359   - "timePeriod":
360   - {
361   - "duration":0.4,
362   - "delay":0
363   - }
364   - }
365   - },
366   - {
367   - "target":"checkboxFgVisual",
368   - "property":"size",
369   - "targetValue":[0.0, 0.37],
370   - "animator":
371   - {
372   - "alphaFunction":"EASE_OUT",
373   - "timePeriod":
374   - {
375   - "duration":0.4,
376   - "delay":0
377   - }
  339 + "duration":0.8
378 340 }
379 341 }
380 342 ]
... ...