swcs/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

set text position in progress circle with css instead of js

Browse Source
This commit is contained in:
Mads Rasmussen
2017-10-26 12:49:36 +02:00
parent a0a3b7e9c9
commit b7c3fb7f30
3 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogresscircle.directive.js
+3 -4
View File
@@ -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;
src/Umbraco.Web.UI.Client/src/less/components/umb-progress-circle.less
+4 -1
View File
@@ -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/components/umb-progress-circle.html
+6 -8
View File
@@ -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>