From b7c3fb7f30f50a4ea0acafadb231bcabf7598f89 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 26 Oct 2017 12:49:36 +0200 Subject: [PATCH 1/3] set text position in progress circle with css instead of js --- .../components/umbprogresscircle.directive.js | 7 +++---- .../src/less/components/umb-progress-circle.less | 5 ++++- .../src/views/components/umb-progress-circle.html | 14 ++++++-------- 3 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogresscircle.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogresscircle.directive.js index 8cc7300401..00c704fe23 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogresscircle.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogresscircle.directive.js @@ -40,12 +40,11 @@ Use this directive to render a circular progressbar. function onInit() { - // centering text for all sizes - var text = element.find(".umb-progress-circle__percentage"); + //var text = element.find(".umb-progress-circle__percentage"); - text.css({ "line-height": scope.size + "px" }); - console.log("this is the size:", scope.size); + //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; diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-progress-circle.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-progress-circle.less index f9d9b134fe..ef799ca77e 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-progress-circle.less +++ b/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 { diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-progress-circle.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-progress-circle.html index 74aaf52599..bc690dc843 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/umb-progress-circle.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-progress-circle.html @@ -1,9 +1,7 @@ -
-
- - - - -
{{ percentage }}%
-
+
+ + + + +
{{ percentage }}%
\ No newline at end of file From 6aac216763adcde4035b25f842b058a42b5c305d Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 26 Oct 2017 12:50:46 +0200 Subject: [PATCH 2/3] update tour list when one is completed --- .../src/views/common/drawers/help/help.controller.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.controller.js index dd3766685f..45ac88f3a5 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.controller.js +++ b/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); From 86d8eae984d0de6a9c0b32efd86fecfc23fce498 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 26 Oct 2017 12:53:23 +0200 Subject: [PATCH 3/3] remove unused code --- .../directives/components/umbprogresscircle.directive.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogresscircle.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogresscircle.directive.js index 00c704fe23..22e6b9dd77 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogresscircle.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogresscircle.directive.js @@ -39,12 +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;