Skip to content

Commit

Permalink
fix(progress-circular): add theming, simplify demo
Browse files Browse the repository at this point in the history
* Applies `$mdTheming` to the `progressCircular` component.
* Simplifies the `progressCircular` demo and adds an example of the dark theme colors.
* Removes strict dependency injection in the `progressCircularDirective`.

Closes angular#7570.
  • Loading branch information
crisbeto committed Mar 15, 2016
1 parent a653122 commit 8850b10
Show file tree
Hide file tree
Showing 3 changed files with 34 additions and 43 deletions.
28 changes: 20 additions & 8 deletions src/components/progressCircular/demoBasicUsage/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -23,15 +23,28 @@ <h4>Theming</h4>
<p>
Your current theme colors can be used to easily colorize your progress indicator with `md-warn` or `md-accent`
colors.
To easily hide a <b>&lt;md-progress-circular&gt;</b> component, simply set the <b>md-mode</b> to "" or null.
</p>

<div layout="row" layout-sm="column" layout-align="space-around">
<md-progress-circular class="md-hue-2" ng-show="vm.showList[0]" md-diameter="20px"></md-progress-circular>
<md-progress-circular class="md-accent" ng-show="vm.showList[1]" md-diameter="40"></md-progress-circular>
<md-progress-circular class="md-accent md-hue-1" ng-show="vm.showList[2]" md-diameter="60"></md-progress-circular>
<md-progress-circular class="md-warn md-hue-3" ng-show="vm.showList[3]" md-diameter="70"></md-progress-circular>
<md-progress-circular ng-show="vm.showList[4]" md-diameter="96"></md-progress-circular>
<div ng-show="vm.activated" layout="row" layout-sm="column" layout-align="space-around">
<md-progress-circular class="md-hue-2" md-diameter="20px"></md-progress-circular>
<md-progress-circular class="md-accent" md-diameter="40"></md-progress-circular>
<md-progress-circular class="md-accent md-hue-1" md-diameter="60"></md-progress-circular>
<md-progress-circular class="md-warn md-hue-3" md-diameter="70"></md-progress-circular>
<md-progress-circular md-diameter="96"></md-progress-circular>
</div>

<h4>Dark theme</h4>

<p>
This is an example of the <b>&lt;md-progress-circular&gt;</b> component, with a dark theme.
</p>

<div ng-show="vm.activated" md-theme="docs-dark" layout="row" layout-sm="column" layout-align="space-around">
<md-progress-circular class="md-hue-2" md-diameter="20px"></md-progress-circular>
<md-progress-circular class="md-accent" md-diameter="40"></md-progress-circular>
<md-progress-circular class="md-accent md-hue-1" md-diameter="60"></md-progress-circular>
<md-progress-circular class="md-warn md-hue-3" md-diameter="70"></md-progress-circular>
<md-progress-circular md-diameter="96"></md-progress-circular>
</div>

<hr ng-class="{'visible' : vm.activated}">
Expand All @@ -42,7 +55,6 @@ <h4>Theming</h4>
<h5>Off</h5>
<md-switch
ng-model="vm.activated"
ng-change="vm.toggleActivation()"
aria-label="Toggle Progress Circular Indicators">
<h5>On</h5>
</md-switch>
Expand Down
30 changes: 6 additions & 24 deletions src/components/progressCircular/demoBasicUsage/script.js
Original file line number Diff line number Diff line change
@@ -1,39 +1,21 @@
angular
.module('progressCircularDemo1', ['ngMaterial'])
.controller('AppCtrl', ['$scope', '$interval',
function($scope, $interval) {
var self = this, j= 0, counter = 0;
.controller('AppCtrl', ['$interval',
function($interval) {
var self = this;

self.showList = [ ];
self.activated = true;
self.determinateValue = 30;

/**
* Turn off or on the 5 themed loaders
*/
self.toggleActivation = function() {
if ( !self.activated ) self.showList = [ ];
if ( self.activated ) j = counter = 0;
};

// Iterate every 100ms, non-stop
// Iterate every 100ms, non-stop and increment
// the Determinate loader.
$interval(function() {

// Increment the Determinate loader

self.determinateValue += 1;
if (self.determinateValue > 100) {
self.determinateValue = 30;
}

// Incrementally start animation the five (5) Indeterminate,
// themed progress circular bars

if ( (j < 5) && !self.showList[j] && self.activated ) {
self.showList[j] = true;
}
if ( counter++ % 4 === 0 ) j++;

}, 100, 0, true);
}, 100);
}
]);
19 changes: 8 additions & 11 deletions src/components/progressCircular/js/progressCircularDirective.js
Original file line number Diff line number Diff line change
Expand Up @@ -43,17 +43,12 @@

angular
.module('material.components.progressCircular')
.directive('mdProgressCircular', [
'$$rAF',
'$window',
'$mdProgressCircular',
'$mdUtil',
'$interval',
'$log',
MdProgressCircularDirective
]);

function MdProgressCircularDirective($$rAF, $window, $mdProgressCircular, $mdUtil, $interval, $log) {
.directive('mdProgressCircular', MdProgressCircularDirective);

/* @ngInject */
function MdProgressCircularDirective($$rAF, $window, $mdProgressCircular, $mdTheming,
$mdUtil, $interval, $log) {

var DEGREE_IN_RADIANS = $window.Math.PI / 180;
var MODE_DETERMINATE = 'determinate';
var MODE_INDETERMINATE = 'indeterminate';
Expand Down Expand Up @@ -100,6 +95,8 @@ function MdProgressCircularDirective($$rAF, $window, $mdProgressCircular, $mdUti
var lastAnimationId = 0;
var interval;

$mdTheming(element);

scope.$watchGroup(['value', 'mdMode'], function(newValues, oldValues) {
var mode = newValues[1];

Expand Down

0 comments on commit 8850b10

Please sign in to comment.