invisi/ui-bootstrap4
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases 8 Wiki Activity

Merge pull request #17 from krlos2011/master

Browse Source 
Fixed style and striped use in progressbar
This commit was merged in pull request #17.
This commit is contained in:
Christopher S. Case
2018-03-12 20:44:10 -05:00
committed by GitHub
parent deb2a98df6 6a84363adf
commit f46406be13
9 changed files with 83 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/index.html
+18 -8
View File
@@ -4410,8 +4410,8 @@ The placement for the element.</p>
<h3>Static</h3>
<div class="row">
<div class="col-sm-4"><uib-progressbar value="55"></uib-progressbar></div>
<div class="col-sm-4"><uib-progressbar class="progress-striped" value="22" type="warning">22%</uib-progressbar></div>
<div class="col-sm-4"><uib-progressbar class="progress-striped active" max="200" value="166" type="danger"><i>166 / 200</i></uib-progressbar></div>
<div class="col-sm-4"><uib-progressbar value="22" type="warning" striped="true">22%</uib-progressbar></div>
<div class="col-sm-4"><uib-progressbar class="active" max="200" value="166" type="danger" striped="true"><i>166 / 200</i></uib-progressbar></div>
</div>
<hr />
@@ -4422,7 +4422,7 @@ The placement for the element.</p>
<uib-progressbar animate="false" value="dynamic" type="success"><b>{{dynamic}}%</b></uib-progressbar>
<small><em>Object (changes type based on value)</em></small>
<uib-progressbar class="progress-striped active" value="dynamic" type="{{type}}">{{type}} <i ng-show="showWarning">!!! Watch out !!!</i></uib-progressbar>
<uib-progressbar class="active" value="dynamic" type="{{type}}" striped="true">{{type}} <i ng-show="showWarning">!!! Watch out !!!</i></uib-progressbar>
<hr />
<h3>Stacked <button type="button" class="btn btn-sm btn-primary" ng-click="randomStacked()">Randomize</button></h3>
@@ -4461,6 +4461,11 @@ Whether bars use transitions to achieve the width change.</p>
<em>(Default: <code>progressbar</code>)</em> -
Title to use as label (for accessibility).</p>
</li>
<li><p><code>striped</code>
<small class="badge">$</small>
<small class="badge">C</small>
<em>(Default: <code>false</code>)</em></p>
</li>
</ul>
<h3 id="uib-progress-settings">uib-progress settings</h3>
<ul>
@@ -4497,6 +4502,11 @@ Bootstrap style type. Possible values are &#39;success&#39;, &#39;info&#39;, &#3
<em>(Default: <code>progressbar</code>)</em> -
Title to use as label (for accessibility).</p>
</li>
<li><p><code>striped</code>
<small class="badge">$</small>
<small class="badge">C</small>
<em>(Default: <code>false</code>)</em></p>
</li>
</ul>
</div>
@@ -4520,8 +4530,8 @@ Title to use as label (for accessibility).</p>
&lt;h3&gt;Static&lt;/h3&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-sm-4&quot;&gt;&lt;uib-progressbar value=&quot;55&quot;&gt;&lt;/uib-progressbar&gt;&lt;/div&gt;
&lt;div class=&quot;col-sm-4&quot;&gt;&lt;uib-progressbar class=&quot;progress-striped&quot; value=&quot;22&quot; type=&quot;warning&quot;&gt;22%&lt;/uib-progressbar&gt;&lt;/div&gt;
&lt;div class=&quot;col-sm-4&quot;&gt;&lt;uib-progressbar class=&quot;progress-striped active&quot; max=&quot;200&quot; value=&quot;166&quot; type=&quot;danger&quot;&gt;&lt;i&gt;166 / 200&lt;/i&gt;&lt;/uib-progressbar&gt;&lt;/div&gt;
&lt;div class=&quot;col-sm-4&quot;&gt;&lt;uib-progressbar value=&quot;22&quot; type=&quot;warning&quot; striped=&quot;true&quot;&gt;22%&lt;/uib-progressbar&gt;&lt;/div&gt;
&lt;div class=&quot;col-sm-4&quot;&gt;&lt;uib-progressbar class=&quot;active&quot; max=&quot;200&quot; value=&quot;166&quot; type=&quot;danger&quot; striped=&quot;true&quot;&gt;&lt;i&gt;166 / 200&lt;/i&gt;&lt;/uib-progressbar&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;hr /&gt;
@@ -4532,7 +4542,7 @@ Title to use as label (for accessibility).</p>
&lt;uib-progressbar animate=&quot;false&quot; value=&quot;dynamic&quot; type=&quot;success&quot;&gt;&lt;b&gt;{{dynamic}}%&lt;/b&gt;&lt;/uib-progressbar&gt;
&lt;small&gt;&lt;em&gt;Object (changes type based on value)&lt;/em&gt;&lt;/small&gt;
&lt;uib-progressbar class=&quot;progress-striped active&quot; value=&quot;dynamic&quot; type=&quot;{{type}}&quot;&gt;{{type}} &lt;i ng-show=&quot;showWarning&quot;&gt;!!! Watch out !!!&lt;/i&gt;&lt;/uib-progressbar&gt;
&lt;uib-progressbar class=&quot;active&quot; value=&quot;dynamic&quot; type=&quot;{{type}}&quot; striped=&quot;true&quot;&gt;{{type}} &lt;i ng-show=&quot;showWarning&quot;&gt;!!! Watch out !!!&lt;/i&gt;&lt;/uib-progressbar&gt;
&lt;hr /&gt;
&lt;h3&gt;Stacked &lt;button type=&quot;button&quot; class=&quot;btn btn-sm btn-primary&quot; ng-click=&quot;randomStacked()&quot;&gt;Randomize&lt;/button&gt;&lt;/h3&gt;
@@ -5748,7 +5758,7 @@ Provide a set of defaults for certain tooltip and popover attributes. Currently
</style>
<script type="text/ng-template" id="customTemplate.html">
<a>
<a class="dropdown-item">
<img ng-src="http://upload.wikimedia.org/wikipedia/commons/thumb/{{match.model.flag}}" width="16">
<span ng-bind-html="match.label | uibTypeaheadHighlight:query"></span>
</a>
@@ -5974,7 +5984,7 @@ Comprehension Angular expression (see <a href="http://docs.angularjs.org/api/ng.
&lt;/style&gt;
&lt;script type=&quot;text/ng-template&quot; id=&quot;customTemplate.html&quot;&gt;
&lt;a&gt;
&lt;a class=&quot;dropdown-item&quot;&gt;
&lt;img ng-src=&quot;http://upload.wikimedia.org/wikipedia/commons/thumb/{{match.model.flag}}&quot; width=&quot;16&quot;&gt;
&lt;span ng-bind-html=&quot;match.label | uibTypeaheadHighlight:query&quot;&gt;&lt;/span&gt;
&lt;/a&gt;
src/progressbar/docs/demo.html
+3 -3
View File
@@ -3,8 +3,8 @@
<h3>Static</h3>
<div class="row">
<div class="col-sm-4"><uib-progressbar value="55"></uib-progressbar></div>
<div class="col-sm-4"><uib-progressbar class="progress-striped" value="22" type="warning">22%</uib-progressbar></div>
<div class="col-sm-4"><uib-progressbar class="progress-striped active" max="200" value="166" type="danger"><i>166 / 200</i></uib-progressbar></div>
<div class="col-sm-4"><uib-progressbar value="22" type="warning" striped="true">22%</uib-progressbar></div>
<div class="col-sm-4"><uib-progressbar class="active" max="200" value="166" type="danger" striped="true"><i>166 / 200</i></uib-progressbar></div>
</div>
<hr />
@@ -15,7 +15,7 @@
<uib-progressbar animate="false" value="dynamic" type="success"><b>{{dynamic}}%</b></uib-progressbar>
<small><em>Object (changes type based on value)</em></small>
<uib-progressbar class="progress-striped active" value="dynamic" type="{{type}}">{{type}} <i ng-show="showWarning">!!! Watch out !!!</i></uib-progressbar>
<uib-progressbar class="active" value="dynamic" type="{{type}}" striped="true">{{type}} <i ng-show="showWarning">!!! Watch out !!!</i></uib-progressbar>
<hr />
<h3>Stacked <button type="button" class="btn btn-sm btn-primary" ng-click="randomStacked()">Randomize</button></h3>
src/progressbar/docs/readme.md
+10
View File
@@ -29,6 +29,11 @@ It supports multiple (stacked) `<uib-bar>` into the same `<uib-progress>` elemen
* `title`
_(Default: `progressbar`)_ -
Title to use as label (for accessibility).
* `striped`
<small class="badge">$</small>
<small class="badge">C</small>
_(Default: `false`)_
### uib-progress settings
@@ -63,3 +68,8 @@ It supports multiple (stacked) `<uib-bar>` into the same `<uib-progress>` elemen
* `title`
_(Default: `progressbar`)_ -
Title to use as label (for accessibility).
* `striped`
<small class="badge">$</small>
<small class="badge">C</small>
_(Default: `false`)_
src/progressbar/progressbar.js
+4 -2
View File
@@ -83,7 +83,8 @@ angular.module('ui.bootstrap.progressbar', [])
require: '^uibProgress',
scope: {
value: '=',
type: '@'
type: '@',
striped: '=?'
},
templateUrl: 'uib/template/progressbar/bar.html',
link: function(scope, element, attrs, progressCtrl) {
@@ -100,7 +101,8 @@ angular.module('ui.bootstrap.progressbar', [])
scope: {
value: '=',
maxParam: '=?max',
type: '@'
type: '@',
striped: '=?'
},
templateUrl: 'uib/template/progressbar/progressbar.html',
link: function(scope, element, attrs, progressCtrl) {
src/progressbar/test/progressbar.spec.js
+44 -20
View File
@@ -11,6 +11,8 @@ describe('progressbar directive', function() {
}));
var BAR_CLASS = 'progress-bar';
var BG_PREFIX = 'bg';
var STRIPED_CLASS = 'progress-bar-striped';
function getBar(i) {
return element.children().eq(i);
@@ -156,7 +158,6 @@ describe('progressbar directive', function() {
});
});
describe('"type" attribute', function() {
beforeEach(inject(function() {
$rootScope.type = 'success';
@@ -166,7 +167,7 @@ describe('progressbar directive', function() {
it('should use correct classes', function() {
expect(getBar(0)).toHaveClass(BAR_CLASS);
expect(getBar(0)).toHaveClass(BAR_CLASS + '-success');
expect(getBar(0)).toHaveClass(BG_PREFIX + '-success');
});
it('should change classes if type changed', function() {
@@ -176,8 +177,31 @@ describe('progressbar directive', function() {
var barEl = getBar(0);
expect(barEl).toHaveClass(BAR_CLASS);
expect(barEl).not.toHaveClass(BAR_CLASS + '-success');
expect(barEl).toHaveClass(BAR_CLASS + '-warning');
expect(barEl).not.toHaveClass(BG_PREFIX + '-success');
expect(barEl).toHaveClass(BG_PREFIX + '-warning');
});
});
describe('"striped" attribute', function() {
beforeEach(inject(function() {
$rootScope.striped = true;
element = $compile('<uib-progressbar value="value" striped="striped"></uib-progressbar>')($rootScope);
$rootScope.$digest();
}));
it('should use correct classes', function() {
expect(getBar(0)).toHaveClass(BAR_CLASS);
expect(getBar(0)).toHaveClass(STRIPED_CLASS);
});
it('should change classes if striped changed', function() {
$rootScope.striped = false;
$rootScope.value += 1;
$rootScope.$digest();
var barEl = getBar(0);
expect(barEl).toHaveClass(BAR_CLASS);
expect(barEl).not.toHaveClass(STRIPED_CLASS);
});
});
@@ -206,14 +230,14 @@ describe('progressbar directive', function() {
});
it('uses correct classes', function() {
expect(getBar(0)).toHaveClass(BAR_CLASS + '-success');
expect(getBar(0)).not.toHaveClass(BAR_CLASS + '-warning');
expect(getBar(0)).toHaveClass(BG_PREFIX + '-success');
expect(getBar(0)).not.toHaveClass(BG_PREFIX + '-warning');
expect(getBar(1)).not.toHaveClass(BAR_CLASS + '-success');
expect(getBar(1)).toHaveClass(BAR_CLASS + '-warning');
expect(getBar(1)).not.toHaveClass(BG_PREFIX + '-success');
expect(getBar(1)).toHaveClass(BG_PREFIX + '-warning');
expect(getBar(2)).not.toHaveClass(BAR_CLASS + '-success');
expect(getBar(2)).not.toHaveClass(BAR_CLASS + '-warning');
expect(getBar(2)).not.toHaveClass(BG_PREFIX + '-success');
expect(getBar(2)).not.toHaveClass(BG_PREFIX + '-warning');
});
it('should change classes if type changed', function() {
@@ -224,15 +248,15 @@ describe('progressbar directive', function() {
];
$rootScope.$digest();
expect(getBar(0)).not.toHaveClass(BAR_CLASS + '-success');
expect(getBar(0)).toHaveClass(BAR_CLASS + '-warning');
expect(getBar(0)).not.toHaveClass(BG_PREFIX + '-success');
expect(getBar(0)).toHaveClass(BG_PREFIX + '-warning');
expect(getBar(1)).not.toHaveClass(BAR_CLASS + '-success');
expect(getBar(1)).not.toHaveClass(BAR_CLASS + '-warning');
expect(getBar(1)).not.toHaveClass(BG_PREFIX + '-success');
expect(getBar(1)).not.toHaveClass(BG_PREFIX + '-warning');
expect(getBar(2)).toHaveClass(BAR_CLASS + '-info');
expect(getBar(2)).not.toHaveClass(BAR_CLASS + '-success');
expect(getBar(2)).not.toHaveClass(BAR_CLASS + '-warning');
expect(getBar(2)).toHaveClass(BG_PREFIX + '-info');
expect(getBar(2)).not.toHaveClass(BG_PREFIX + '-success');
expect(getBar(2)).not.toHaveClass(BG_PREFIX + '-warning');
});
it('should change classes if type changed', function() {
@@ -243,9 +267,9 @@ describe('progressbar directive', function() {
expect(element.children().length).toBe(1);
expect(getBar(0)).toHaveClass(BAR_CLASS + '-info');
expect(getBar(0)).not.toHaveClass(BAR_CLASS + '-success');
expect(getBar(0)).not.toHaveClass(BAR_CLASS + '-warning');
expect(getBar(0)).toHaveClass(BG_PREFIX + '-info');
expect(getBar(0)).not.toHaveClass(BG_PREFIX + '-success');
expect(getBar(0)).not.toHaveClass(BG_PREFIX + '-warning');
});
it('should have the correct aria markup', function() {
src/typeahead/docs/demo.html
+1 -1
View File
@@ -27,7 +27,7 @@
</style>
<script type="text/ng-template" id="customTemplate.html">
<a>
<a class="dropdown-item">
<img ng-src="http://upload.wikimedia.org/wikipedia/commons/thumb/{{match.model.flag}}" width="16">
<span ng-bind-html="match.label | uibTypeaheadHighlight:query"></span>
</a>
template/progressbar/bar.html
+1 -1
View File
@@ -1 +1 @@
<div class="progress-bar" ng-class="type && 'progress-bar-' + type" role="progressbar" aria-valuenow="{{value}}" aria-valuemin="0" aria-valuemax="{{max}}" ng-style="{width: (percent < 100 ? percent : 100) + '%'}" aria-valuetext="{{percent | number:0}}%" aria-labelledby="{{::title}}" ng-transclude></div>
<div class="progress-bar" ng-class="[type ? 'bg-' + type : '', striped ? 'progress-bar-striped' : '']" role="progressbar" aria-valuenow="{{value}}" aria-valuemin="0" aria-valuemax="{{max}}" ng-style="{width: (percent < 100 ? percent : 100) + '%'}" aria-valuetext="{{percent | number:0}}%" aria-labelledby="{{::title}}" ng-transclude></div>
template/progressbar/progressbar.html
+1 -1
View File
@@ -1,3 +1,3 @@
<div class="progress">
<div class="progress-bar" ng-class="type && 'progress-bar-' + type" role="progressbar" aria-valuenow="{{value}}" aria-valuemin="0" aria-valuemax="{{max}}" ng-style="{width: (percent < 100 ? percent : 100) + '%'}" aria-valuetext="{{percent | number:0}}%" aria-labelledby="{{::title}}" ng-transclude></div>
<div class="progress-bar" ng-class="[type ? 'bg-' + type : '', striped ? 'progress-bar-striped' : '']" role="progressbar" aria-valuenow="{{value}}" aria-valuemin="0" aria-valuemax="{{max}}" ng-style="{width: (percent < 100 ? percent : 100) + '%'}" aria-valuetext="{{percent | number:0}}%" aria-labelledby="{{::title}}" ng-transclude></div>
</div>
template/typeahead/typeahead-match.html
+1
View File
@@ -1,4 +1,5 @@
<a href
tabindex="-1"
class="dropdown-item"
ng-bind-html="match.label | uibTypeaheadHighlight:query"
ng-attr-title="{{match.label}}"></a>