calculate progress circle font size instead of manually setting it + align colors

src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogresscircle.directive.js

@@ -9,28 +9,22 @@ Use this directive to render a circular progressbar.
 
 <h3>Markup example</h3>
 <pre>
-	<div ng-controller="My.Controller as vm">
-
+    <div>
+    
         <umb-progress-circle
             percentage="80"
             size="60"
-            font-size="m"
-            stroke-color="green">
+            color="secondary">
         </umb-progress-circle>
 
 	</div>
 </pre>
 
-
 @param {string} size (<code>attribute</code>): This parameter defines the width and the height of the circle in pixels.
 @param {string} percentage (<code>attribute</code>): Takes a number between 0 and 100 and applies it to the circle's highlight length.
-@param {string} strokeColor (<code>attribute</code>): the color of the highlight (green, purple, red, yellow). Green by default. 
-@param {string} fontSize (<code>attribute</code>): Defines the size of the number in the center (xs, s, m, l, xl)
+@param {string} color (<code>attribute</code>): the color of the highlight (primary, secondary, success, warning, danger). Success by default. 
 **/
 
-
-
-
 (function (){
     'use strict';
 
@@ -44,10 +38,10 @@ Use this directive to render a circular progressbar.
                 var percent = scope.percentage;
 
                 if (percent > 100) {
-                    percent = 100
+                    percent = 100;
                 }
                 else if (percent < 0) {
-                    percent = 0
+                    percent = 0;
                 }
 
                 // calculating the circle's highlight
@@ -63,7 +57,9 @@ Use this directive to render a circular progressbar.
 
                 // Distance for the highlight dash's offset
                 scope.strokeDashOffset = strokeDashOffset;
-                var coloring = circle.attr('stroke');
+
+                // set font size
+                scope.percentageSize = (scope.size * 0.3) + "px";
 
             }
 
@@ -78,8 +74,7 @@ Use this directive to render a circular progressbar.
             scope: {
                 size: "@?",
                 percentage: "@",
-                strokeColor: "@",
-                fontSize: "@"
+                color: "@"
             },
             link: link
 

src/Umbraco.Web.UI.Client/src/less/components/umb-progress-circle.less

@@ -19,20 +19,24 @@
     stroke: @green;
 }
 
-.umb-progress-circle__highlight--green {
+.umb-progress-circle__highlight--primary {
+    stroke: @turquoise;
+}
+
+.umb-progress-circle__highlight--secondary {
+    stroke: @purple;
+}
+
+.umb-progress-circle__highlight--success {
     stroke: @green;
 }
 
-.umb-progress-circle__highlight--red {
-    stroke: @red;
-}
-
-.umb-progress-circle__highlight--yellow {
+.umb-progress-circle__highlight--warning {
     stroke: @yellow;
 }
 
-.umb-progress-circle__highlight--purple {
-    stroke: @purple;
+.umb-progress-circle__highlight--danger {
+    stroke: @red;
 }
 
 // circle progressbar bg
@@ -46,23 +50,3 @@
     font-weight: 700;
     text-align: center;
 }
-
-.umb-progress-circle__percentage--xs{
-    font-size: 12px;
-}
-
-.umb-progress-circle__percentage--s{
-    font-size: 14px;
-}
-
-.umb-progress-circle__percentage--m{
-    font-size: 16px;
-}
-
-.umb-progress-circle__percentage--l{
-    font-size: 18px;
-}
-
-.umb-progress-circle__percentage--xl{
-    font-size: 20px;
-}

src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html

@@ -20,9 +20,7 @@
                         <h5 class="umb-help-list-item__group-title"><i style="margin-right: 2px;text-decoration: none;" ng-class="{'icon-navigation-right': !value.open, 'icon-navigation-down': value.open}"></i>{{key}}</h5>
                         <umb-progress-circle
                             percentage="{{value.completedPercentage}}"
-                            size="40"
-                            font-size="xs"
-                            stroke-color="">
+                            size="40">
                         </umb-progress-circle>
                     </a>
 

src/Umbraco.Web.UI.Client/src/views/components/umb-progress-circle.html

@@ -1,7 +1,7 @@
-<div class="umb-progress-circle" ng-style="{'width': size, 'height': size }">                    
+<div class="umb-progress-circle" ng-style="{'width': size, 'height': size }">
     <svg class="umb-progress-circle__view-box" viewBox="0 0 100 100">
         <circle class="umb-progress-circle__bg" cx="50" cy="50" r="47" fill="none" stroke-width="6"/>
-        <circle class="umb-progress-circle__highlight umb-progress-circle__highlight--{{ strokeColor }}" cx="50" cy="50" r="47" fill="none" stroke-width="6" stroke-dasharray="{{ strokeDashArray }}" stroke-dashoffset="{{ strokeDashOffset }}" />
+        <circle class="umb-progress-circle__highlight umb-progress-circle__highlight--{{ color }}" cx="50" cy="50" r="47" fill="none" stroke-width="6" stroke-dasharray="{{ strokeDashArray }}" stroke-dashoffset="{{ strokeDashOffset }}" />
     </svg>
-    <div class="umb-progress-circle__percentage umb-progress-circle__percentage--{{ fontSize }}"> {{ percentage }}%</div>
+    <div ng-style="{'font-size': percentageSize}" class="umb-progress-circle__percentage">{{ percentage }}%</div>
 </div>