feat ariatemplates#781 CSS Gauge progress bar

Adding the css to be used to make the gauge progress bar instead of using images and sprites. Close ariatemplates#781
divdavem · Nov 4, 2013 · 0070bdc · 0070bdc
1 parent 9b43bc6
commit 0070bdc
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 1 deletion.
diff --git a/src/aria/widgets/AriaSkinBeans.js b/src/aria/widgets/AriaSkinBeans.js
@@ -646,13 +646,33 @@ Aria.beanDefinitions({
                     $description : "",
                     $default : 'atdefskin/sprites/back.gif'
                 },
+                "backgroundColor" : {
+                    $type : "Color",
+                    $default : "transparent"
+                },
                 "sprHeight" : {
                     $type : "Pixels"
                 },
                 "border" : {
                     $type : "json:String",
                     $description : ""
                 },
+                "borderTopLeftRadius" : {
+                    $type : "Pixels",
+                    $default : 0
+                },
+                "borderTopRightRadius" : {
+                    $type : "Pixels",
+                    $default : 0
+                },
+                "borderBottomLeftRadius" : {
+                    $type : "Pixels",
+                    $default : 0
+                },
+                "borderBottomRightRadius" : {
+                    $type : "Pixels",
+                    $default : 0
+                },
                 "borderPadding" : {
                     $type : "Pixels"
                 },
@@ -662,6 +682,36 @@ Aria.beanDefinitions({
                 },
                 "labelFontSize" : {
                     $type : "Pixels"
+                },
+                "container" : {
+                    $type : "Object",
+                    $description : "",
+                    $properties : {
+                        "backgroundColor" : {
+                            $type : "Color",
+                            $default : "transparent"
+                        },
+                        "borderTopLeftRadius" : {
+                            $type : "Pixels",
+                            $default : 0
+                        },
+                        "borderTopRightRadius" : {
+                            $type : "Pixels",
+                            $default : 0
+                        },
+                        "borderBottomLeftRadius" : {
+                            $type : "Pixels",
+                            $default : 0
+                        },
+                        "borderBottomRightRadius" : {
+                            $type : "Pixels",
+                            $default : 0
+                        },
+                        "boxShadow" : {
+                            $type : "json:String",
+                            $default : ""
+                        }
+                    }
                 }
             }
         },

diff --git a/src/aria/widgets/form/GaugeStyle.tpl.css b/src/aria/widgets/form/GaugeStyle.tpl.css
@@ -20,8 +20,22 @@
     {var skinnableClassName="Gauge"/}
 
     {macro writeSkinClass(info)}
+        .x${skinnableClassName}_${info.skinClassName}{
+            border-top-left-radius: ${info.skinClass.container.borderTopLeftRadius}px;
+            border-top-right-radius: ${info.skinClass.container.borderTopRightRadius}px;
+            border-bottom-left-radius: ${info.skinClass.container.borderBottomLeftRadius}px;
+            border-bottom-right-radius: ${info.skinClass.container.borderBottomRightRadius}px;
+            background-color: ${info.skinClass.container.backgroundColor};
+            {if info.skinClass.container.boxShadow}
+               box-shadow: ${info.skinClass.container.boxShadow};
+            {/if}
+        }
         .x${skinnableClassName}_progress_${info.skinClassName}{
-            {call background("transparent",info.skinClass.spriteUrl,"repeat-x")/}
+            {call background(info.skinClass.backgroundColor,info.skinClass.spriteUrl,"repeat-x")/}
+            border-top-left-radius: ${info.skinClass.borderTopLeftRadius}px;
+            border-top-right-radius: ${info.skinClass.borderTopRightRadius}px;
+            border-bottom-left-radius: ${info.skinClass.borderBottomLeftRadius}px;
+            border-bottom-right-radius: ${info.skinClass.borderBottomRightRadius}px;
         }
     {/macro}
 {/CSSTemplate}