crisbeto / angular-svg-round-progressbar

Angular module that uses SVG to create a circular progressbar
https://crisbeto.github.io/angular-svg-round-progressbar/
MIT License
742 stars 173 forks source link

Changes to integrate Progress values into Directive #103

Closed msfilho closed 7 years ago

msfilho commented 7 years ago

I've made changes on the code to integrate progress values inside directive, and do not use a div outside anymore, with a new option to show or not max value on it.

It was needed to rename the name of progress class on css because it has a conflict with another framework.

Some css values were put inside the code, since they are always required in most cases, and should not be a simple custom color or font-size. If someone need to put the progress value in another place it can override the css or disable it with showValue option and use variables manually.

crisbeto commented 7 years ago

Thank you for the PR, however I'll have to reject it. There have been a number of requests to add the text option to the directive, but I've been avoiding it intentionally. My reasoning is that there are far too many ways for the text to be represented and configured (e.g. only show current, current/max, current% etc.). This will eventually become too hard to maintain and will add a bit of bloat to the module.

On the other hand, if the end user wants to add it to their module, it's as simple as:

<div class="progress-wrapper">
  <div class="text">{{ current }} / {{ max }}</div>
  <round-progress current="current" max="max"></round-progress>
</div>
.progress-wrapper {
  position: relative;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

And if this HTML is too cumbersome to write, it can be abstracted away into wrapper directive.