Updated shadow-button transition demo to use states and sub-states
[platform/core/uifw/dali-demo.git] / resources / style / mobile / style-example-theme-one.json.in
index 9447a9d..53bbcde 100644 (file)
     },
     "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
           }
         }
       ]