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

Changing the css of umbProgressCircle

Browse Source
This commit is contained in:
Zsolt
2017-10-26 12:02:46 +02:00
parent d98db5e6bc
commit a0a3b7e9c9
3 changed files with 24 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -42,7 +42,7 @@ Use this directive to render a circular progressbar.
// centering text for all sizes
var text = element.find(".umb-tour__values");
var text = element.find(".umb-progress-circle__percentage");
text.css({ "line-height": scope.size + "px" });
console.log("this is the size:", scope.size);
@@ -58,7 +58,7 @@ Use this directive to render a circular progressbar.
}
// calculating the circle's highlight
var circle = element.find(".umb-tour__progress-circle");
var circle = element.find(".umb-progress-circle__highlight");
var r = circle.attr('r');
var strokeDashArray = (r*Math.PI)*2;

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

@@ -1,4 +1,8 @@
.umb-tour__progress {
.umb-progress-circle__container {
position: relative;
}
.umb-progress-circle__view-box {
position: absolute;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
@@ -7,59 +11,55 @@
transform: rotate(-90deg);
}
.umb-tour__progress-container {
position: relative;
}
// circle highlight on progressbar
.umb-tour__progress-circle {
.umb-progress-circle__highlight {
stroke: @green;
}
.umb-tour__progress-circle--green {
.umb-progress-circle__highlight--green {
stroke: @green;
}
.umb-tour__progress-circle--red {
.umb-progress-circle__highlight--red {
stroke: @red;
}
.umb-tour__progress-circle--yellow {
.umb-progress-circle__highlight--yellow {
stroke: @yellow;
}
.umb-tour__progress-circle--purple {
.umb-progress-circle__highlight--purple {
stroke: @purple;
}
// circle progressbar bg
.umb-tour__progress-circle-bg {
.umb-progress-circle__bg {
stroke: @gray-8;
}
// the text in the center
.umb-tour__values {
.umb-progress-circle__percentage {
font-size: 16px;
font-weight: 700;
text-align: center;
}
.umb-tour__values--xs{
.umb-progress-circle__percentage--xs{
font-size: 12px;
}
.umb-tour__values--s{
.umb-progress-circle__percentage--s{
font-size: 14px;
}
.umb-tour__values--m{
.umb-progress-circle__percentage--m{
font-size: 16px;
}
.umb-tour__values--l{
.umb-progress-circle__percentage--l{
font-size: 18px;
}
.umb-tour__values--xl{
.umb-progress-circle__percentage--xl{
font-size: 20px;
}

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

@@ -1,9 +1,9 @@
<div>
<div class="umb-tour__progress-container" ng-style="{'width': size, 'height': size }">
<svg class="umb-tour__progress" viewBox="0 0 100 100">
<circle class="umb-tour__progress-circle-bg" cx="50" cy="50" r="47" fill="none" stroke-width="6"/>
<circle class="umb-tour__progress-circle umb-tour__progress-circle--{{ strokeColor }}" cx="50" cy="50" r="47" fill="none" stroke-width="6" stroke-dasharray="{{ strokeDashArray }}" stroke-dashoffset="{{ strokeDashOffset }}" />
<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-tour__values umb-tour__values--{{ fontSize }}"> {{ percentage }}%</div>
<div class="umb-progress-circle__percentage umb-progress-circle__percentage--{{ fontSize }}"> {{ percentage }}%</div>
</div>
</div>