feat(oui-progress): progress component implementation #192
Conversation
ganeshkumar1989
requested review from
AxelPeter,
FredericEspiau,
JDownloader,
cbourgois,
jleveugle,
neolitec,
rfougier and
whispyy
|
@ganeshkumar1989 Is there a staging (not in the ticket) ? |
|
I have added the staging link @AxelPeter . The link is also available in the ticket :) |
packages/oui-progress/README.md
Outdated
|
|
||
| | Attribute | Type | Binding | One-time binding | Values | default | Description | | ||
| | ---- | ---- | ---- | ---- | ---- | ---- | ---- | | ||
| | type | String | @ | yes | `info`, `success`, `warning`, `error` | | Type of the progress component | |
There was a problem hiding this comment.
From the specs, this attribute should be only on children
There was a problem hiding this comment.
The parent and child are now combined to a single component
packages/oui-progress/README.md
Outdated
| | ---- | ---- | ---- | ---- | ---- | ---- | ---- | | ||
| | type | String | @ | yes | `info`, `success`, `warning`, `error` | | Type of the progress component | | ||
| | max-value | Number | @? | yes | | 100 | The max value for the progress bar | | ||
| | indeterminate | Boolean | <? | yes | | false | Enable/Disable indeterminate mode. When in this mode, the progress component shows an indefinite wait and the max-value would not have any effect. In this mode, the progress component should not have any other component in it | |
There was a problem hiding this comment.
Guidelines has changed since, this is not needed
There was a problem hiding this comment.
This has been removed
packages/oui-progress/README.md
Outdated
| | ---- | ---- | ---- | ---- | ---- | ---- | ---- | | ||
| | type | String | @? | yes | `info`, `success`, `warning`, `error` | parent's type | Type of the progress bar. If not provided, takes the type of the parent | | ||
| | value | Number | < | no | | | The current value for the progress bar | | ||
| | label-align | String | @? | yes | `left`, `right` | right | The alignment of the label inside the progress bar | |
There was a problem hiding this comment.
No need, the value is always right aligned (see UI specs)
There was a problem hiding this comment.
This is removed :)
| const widthPrecentage = (this.value * maxValuePercentage) / this.parent.maxValue; | ||
| this.$element.addClass("oui-progress__bar"); | ||
| this.$element.addClass(`oui-progress__bar_${this.type}`); | ||
| this.$element.css("width", `${widthPrecentage}%`); |
There was a problem hiding this comment.
DOM manipulations need a $timeout wrap
There was a problem hiding this comment.
This is done :)
| const maxValuePercentage = 100; | ||
| const leftPrecentage = (this.value * maxValuePercentage) / this.parent.maxValue; | ||
| this.$element.addClass("oui-progress__threshold"); | ||
| this.$element.css("left", `${leftPrecentage}%`); |
There was a problem hiding this comment.
Same as above, $timeout :)
There was a problem hiding this comment.
This is done :)
|
Hello @ganeshkumar1989, |
Added progress component
updated to match the latest UI spec
AxelPeter
force-pushed
the
feature/oui-progress
branch
from
881adfc to
0c54d09
Compare
AxelPeter
force-pushed
the
feature/oui-progress
branch
2 times, most recently
from
c6b0af6 to
c721346
Compare
AxelPeter
force-pushed
the
feature/oui-progress
branch
from
c721346 to
fd0f641
Compare
5 participants
UU-842
Added progress component
Staging link: http://feature_oui_progress_build.ui-kit.ovh/#!/oui-angular/progress
Linked To:
ovh/ovh-ui-kit#213
ovh-ux/ovh-ui-kit-documentation#112