Updated shadow-button transition demo to use states and sub-states

[platform/core/uifw/dali-demo.git] / resources / style / style-example-theme-one.json.in

diff --git a/resources/style/style-example-theme-one.json.in b/resources/style/style-example-theme-one.json.in
index 20ef793..d495a3d 100644 (file)
--- a/resources/style/style-example-theme-one.json.in
+++ b/resources/style/style-example-theme-one.json.in
@@ -1,4 +1,8 @@
 {
+  "constants":
+  {
+    "STYLE_DIR":"{APPLICATION_RESOURCE_PATH}/style"
+  },
   "styles":
   {
     "Title":{
@@ -69,7 +73,7 @@
       [
         {
           "target":"imageVisual",
-          "property":"colorAlpha",
+          "property":"opacity",
           "initialValue":0,
           "targetValue":1,
           "animator":
@@ -84,15 +88,15 @@
         },
         {
           "target":"imageVisual",
-          "property":"scale",
-          "targetValue":[1,1,1]
+          "property":"size",
+          "targetValue":[1,1]
         }
       ],
       "disableVisibilityTransition":
       [
         {
           "target":"imageVisual",
-          "property":"colorAlpha",
+          "property":"opacity",
           "targetValue":0,
           "animator":
           {
@@ -106,11 +110,237 @@
         },
         {
           "target":"imageVisual",
-          "property":"scale",
+          "property":"size",
           "targetValue":[1,1,1]
         }
       ]
     },
+    "ShadowButton":
+    {
+      "states":
+      {
+        "NORMAL":
+        {
+          "visuals":
+          {
+            "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"
+              }
+            }
+          },
+
+          "states":
+          {
+            "CHECKED":
+            {
+              "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":
+            {
+            }
+          }
+        },
+        //"FOCUSED"
+        "DISABLED":
+        {
+          "visuals":
+          {
+            "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"
+              }
+            }
+          }
+        }
+      },
+      "transitions":
+      [
+        {
+          "from":"DISABLED",
+          "to":"NORMAL",
+          "visualName":"backgroundVisual",
+          "effect":"FADE_IN",
+          "animator":
+          {
+            "alphaFunction":"EASE_OUT_BACK",
+            "duration":0.8
+          }
+        },
+        {
+          "from":"DISABLED",
+          "to":"NORMAL",
+          "visualName":"*",
+          "animator":
+          {
+            "alphaFunction":"EASE_OUT_BACK",
+            "duration":0.8
+          }
+        },
+        {
+          "from":"NORMAL",
+          "to":"DISABLED",
+          "visualName":"backgroundVisual",
+          "effect":"FADE_OUT",
+          "animator":
+          {
+            "alphaFunction":"EASE_OUT_BACK",
+            "duration":0.8
+          }
+        },
+        {
+          "from":"NORMAL",
+          "to":"DISABLED",
+          "visualName":"*",
+          "animator":
+          {
+            "alphaFunction":"EASE_OUT_BACK",
+            "duration":0.8
+          }
+        }
+      ]
+    },
     "BeatControl":
     {
       "beatVisual":{
@@ -173,6 +403,24 @@
             }
           }
         }
+      ],
+
+      "fadeTransition":
+      [
+        {
+          "target":"beatVisual",
+          "property":"opacity",
+          "targetValue":0,
+          "animator":
+          {
+            "alphaFunction":"BOUNCE",
+            "timePeriod":
+            {
+              "duration":0.8,
+              "delay":0
+            }
+          }
+        }
       ]
     }
   }