Merge remote-tracking branch 'origin/temp-U4-10550' into temp-U4-10550

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

@@ -39,13 +39,6 @@ Use this directive to render a circular progressbar.
         function link(scope, element, $filter) {
             
             function onInit() {
-
-
-                // centering text for all sizes
-                var text = element.find(".umb-progress-circle__percentage");
-                
-                text.css({ "line-height": scope.size + "px" });
-                console.log("this is the size:", scope.size);
                             
                 // making sure we get the right numbers
                 var percent = scope.percentage;

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

@@ -1,5 +1,8 @@
-.umb-progress-circle__container {
+.umb-progress-circle {
     position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .umb-progress-circle__view-box {

src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.controller.js

@@ -136,10 +136,12 @@
                 });
                 group.completedPercentage = Math.round((completedTours/group.length)*100);
             });
-
         }
 
-        oninit();
+        evts.push(eventsService.on("appState.tour.complete", function () {
+            vm.tours = tourService.getGroupedTours();
+            getTourGroupCompletedPercentage();
+        }));
            
         $scope.$on('$destroy', function () {
             for (var e in evts) {
@@ -147,6 +149,8 @@
             }
         });
 
+        oninit();
+
     }
 
     angular.module("umbraco").controller("Umbraco.Drawers.Help", HelpDrawerController);

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

@@ -1,9 +1,7 @@
-<div>
-    <div class="umb-progress-circle__container" 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 }}" />
-        </svg>
-        <div class="umb-progress-circle__percentage umb-progress-circle__percentage--{{ fontSize }}"> {{ percentage }}%</div>
-    </div>
+<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 }}" />
+    </svg>
+    <div class="umb-progress-circle__percentage umb-progress-circle__percentage--{{ fontSize }}"> {{ percentage }}%</div>
 </div>