feat(progressButtons): integrate angular progress buttons

bower.json

@@ -41,6 +41,7 @@
     "jquery.easy-pie-chart": "~2.1.6",
     "leaflet": "~0.7.5",
     "moment": "~2.10.6",
-    "slimScroll": "jquery-slimscroll#~1.3.6"
+    "slimScroll": "jquery-slimscroll#~1.3.6",
+    "angular-progress-button-styles": "~0.1.0"
   }
 }

gulpfile.js

@@ -44,7 +44,8 @@ gulp.task('minify-css', ['minify-404-css', 'minify-auth-css'], function () {
     'bower_components/bootstrap-tagsinput/dist/bootstrap-tagsinput.css',
     'bower_components/Ionicons/css/ionicons.min.css',
     'bower_components/font-awesome/css/font-awesome.min.css',
-    'bower_components/animate.css/animate.min.css'
+    'bower_components/animate.css/animate.min.css',
+    'bower_components/angular-progress-button-styles/dist/angular-progress-button-styles.min.css'
   ]);
   var appFiles = gulp.src('src/assets/css/main.scss').pipe(sass({ style: 'compressed' }).on('error', sass.logError));
 
@@ -109,6 +110,7 @@ gulp.task('js-lib', function(){
     'bower_components/angular-slimscroll/angular-slimscroll.js',
     'bower_components/hammerjs/hammer.min.js',
     'bower_components/AngularHammer/angular.hammer.min.js',
+    'bower_components/angular-progress-button-styles/dist/angular-progress-button-styles.min.js',
     'src/app/components/backTop/lib/jquery.backTop.min.js'
   ];
 

src/app/pages/buttons/_buttonsPage.scss

@@ -76,3 +76,21 @@ $btn-icon-size: 34px;
   float: left;
 }
 
+.progress-buttons-container {
+  text-align: center;
+  font-size: 16px;
+  .progress {
+    margin-bottom: 0;
+  }
+  span.button-title {
+    display: inline-block;
+    width: 100%;
+    line-height: 1;
+    font-size: 14px;
+    margin-bottom: 10px;
+  }
+  .row + .row {
+    margin-top: 30px;
+  }
+}
+

src/app/pages/buttons/buttons.js

@@ -1,6 +1,6 @@
 'use strict';
 
-angular.module('BlurAdmin.buttonsPage', ['ngRoute'])
+angular.module('BlurAdmin.buttonsPage', ['ngRoute', 'angular-progress-button-styles'])
 
     .config(['$routeProvider', function ($routeProvider) {
       $routeProvider.when('/buttons', {
@@ -8,7 +8,11 @@ angular.module('BlurAdmin.buttonsPage', ['ngRoute'])
         controller: 'buttonsPageCtrl'
       });
     }])
-    .controller('buttonsPageCtrl', ['$scope', function ($scope) {
+    .controller('buttonsPageCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
+      $scope.progressFunction = function() {
+        return $timeout(function() {}, 3000);
+      };
+
       $scope.widgetBlocks = [
         {
           widgets: [
@@ -42,6 +46,16 @@ angular.module('BlurAdmin.buttonsPage', ['ngRoute'])
               }
             ]
           ]
+        },
+        {
+          widgets: [
+            [
+              {
+                title: 'Progress Buttons',
+                url: 'app/pages/buttons/widgets/progressButtons.html'
+              }
+            ]
+          ]
         }
       ];
     }]);

src/app/pages/buttons/widgets/progressButtons.html

@@ -0,0 +1,84 @@
+<div class="progress-buttons-container text-center" ng-controller="buttonsPageCtrl">
+  <div class="row">
+    <section class="col-md-6 col-lg-3">
+      <span class="button-title">fill horizontal</span>
+      <button progress-button="progressFunction()">Submit</button>
+    </section>
+    <section class="col-md-6 col-lg-3">
+      <span class="button-title">fill vertical</span>
+      <button progress-button="progressFunction()" pb-direction="vertical">Submit</button>
+    </section>
+    <section class="col-md-6 col-lg-3">
+      <span class="button-title">shrink horizontal</span>
+      <button progress-button="progressFunction()" pb-style="shrink">Submit</button>
+    </section>
+    <section class="col-md-6 col-lg-3">
+      <span class="button-title">shrink vertical</span>
+      <button progress-button="progressFunction()" pb-style="shrink" pb-direction="vertical">Submit</button>
+    </section>
+  </div>
+  <div class="row">
+    <section class="col-md-6 col-lg-3">
+      <span class="button-title">rotate-angle-bottom <br/>perspective</span>
+      <button progress-button="progressFunction()" pb-style="rotate-angle-bottom">Submit</button>
+    </section>
+    <section class="col-md-6 col-lg-3">
+      <span class="button-title">rotate-angle-top <br/>perspective</span>
+      <button progress-button="progressFunction()" pb-style="rotate-angle-top">Submit</button>
+    </section>
+    <section class="col-md-6 col-lg-3">
+      <span class="button-title">rotate-angle-left <br/>perspective</span>
+      <button progress-button="progressFunction()" pb-style="rotate-angle-left">Submit</button>
+    </section>
+    <section class="col-md-6 col-lg-3">
+      <span class="button-title">rotate-angle-right <br/>perspective</span>
+      <button progress-button="progressFunction()" pb-style="rotate-angle-right">Submit</button>
+    </section>
+  </div>
+  <div class="row">
+    <section class="col-md-6 col-lg-3">
+      <span class="button-title">rotate-side-down <br/>perspective</span>
+      <button progress-button="progressFunction()" pb-style="rotate-side-down">Submit</button>
+    </section>
+    <section class="col-md-6 col-lg-3">
+      <span class="button-title">rotate-side-up <br/>perspective</span>
+      <button progress-button="progressFunction()" pb-style="rotate-side-up">Submit</button>
+    </section>
+    <section class="col-md-6 col-lg-3">
+      <span class="button-title">rotate-side-left <br/>perspective</span>
+      <button progress-button="progressFunction()" pb-style="rotate-side-left">Submit</button>
+    </section>
+    <section class="col-md-6 col-lg-3">
+      <span class="button-title">rotate-side-right <br/>perspective</span>
+      <button progress-button="progressFunction()" pb-style="rotate-side-right">Submit</button>
+    </section>
+  </div>
+  <div class="row">
+    <section class="col-md-6 col-lg-3">
+      <span class="button-title">rotate-back <br/>perspective</span>
+      <button progress-button="progressFunction()" pb-style="rotate-back">Submit</button>
+    </section>
+    <section class="col-md-6 col-lg-3">
+      <span class="button-title">flip-open <br/>perspective</span>
+      <button progress-button="progressFunction()" pb-style="flip-open">Submit</button>
+    </section>
+    <section class="col-md-6 col-lg-3">
+      <span class="button-title">slide-down <br/>horizontal</span>
+      <button progress-button="progressFunction()" pb-style="slide-down">Submit</button>
+    </section>
+    <section class="col-md-6 col-lg-3">
+      <span class="button-title">move-up <br/>horizontal</span>
+      <button progress-button="progressFunction()" pb-style="move-up">Submit</button>
+    </section>
+  </div>
+  <div class="row">
+    <section class="col-md-6">
+      <span class="button-title">top-line <br/>horizontal</span>
+      <button progress-button="progressFunction()" pb-style="top-line">Submit</button>
+    </section>
+    <section class="col-md-6">
+      <span class="button-title">lateral-lines <br/>vertical</span>
+      <button progress-button="progressFunction()" pb-style="lateral-lines">Submit</button>
+    </section>
+  </div>
+</div>